/* ==========================================================================
   Zengin metin (CKEditor 5) içeriği — sitede (.rich-text) ve yönetim panelindeki
   editörde (.ck-editor__editable.ck-content) AYNI kurallarla görünür; böylece editörde
   görülen sayfa sitede de aynı görünür. Bu dosya hem site şablonuna (base_public.html)
   hem de editöre (settings.CKEDITOR_5_CUSTOM_CSS) yüklenir. Yeni bir kural eklerken
   iki seçiciyi birlikte yazın. Satır içi stil kullanılmaz (site CSP'si izin vermez),
   hizalama ve tablolar sınıf tabanlıdır.
   ========================================================================== */

/* Yönetim panelinde site değişkenleri (main.css :root) yok; aynı değerler editör alanına tanımlanır. */
.ck-editor__main > .ck-editor__editable.ck-content {
  --paper: #F7F5F0; --paper-2: #EFEBE3; --paper-3: #E4DDD0;
  --ink: #16130F; --ink-2: #4A443C; --ink-3: #6E665B; --rule: #D8D0C2;
  --sun: #F3951F; --sun-ink: #A5500A;
  --f-serif: "Source Serif 4", "Sitka Heading", "Sitka Text", Cambria, Georgia, serif;
  --f-sans: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Sitedeki ana içerik sütunu (.statement-lead): 18px / 1.55, en fazla 34em genişlik. */
  background: var(--paper);
  color: var(--ink-2);
  font: 400 18px/1.55 var(--f-sans);
  max-width: calc(34em + 24px);
  min-height: 320px;
  padding: 8px 12px;
  overflow-wrap: break-word;
}

/* Django yönetim paneli p, li, td, th, blockquote, h3 için kendi yazı boyutu/rengini verir; içerik alanında
   sitedeki gibi (kapsayıcıdan miras) görünmeleri için sıfırlanır. */
.ck-editor__main > .ck-editor__editable.ck-content :is(p, li, td, th, blockquote, figcaption) {
  font-size: inherit; line-height: inherit; color: inherit; text-transform: none; letter-spacing: normal;
}
.ck-editor__main > .ck-editor__editable.ck-content :is(p, li) { padding-top: 0; padding-bottom: 0; }
.ck-editor__main > .ck-editor__editable.ck-content :is(h2, h3) {
  margin-left: 0; padding: 0; border: 0; background: none; color: inherit; text-transform: none;
}

/* ---- Metin akışı ---- */
.rich-text > *:first-child, .ck-editor__main > .ck-editor__editable.ck-content > *:first-child { margin-top: 0; }
.rich-text p, .ck-editor__main > .ck-editor__editable.ck-content p { margin: 0 0 1em; }
.rich-text h2, .ck-editor__main > .ck-editor__editable.ck-content h2 {
  font-family: var(--f-serif); font-size: 26px; font-weight: 700; line-height: 1.14; letter-spacing: -0.012em;
  margin: 1.4em 0 .5em; clear: both;
}
.rich-text h3, .ck-editor__main > .ck-editor__editable.ck-content h3 {
  font-family: var(--f-serif); font-size: 21px; font-weight: 700; line-height: 1.14; letter-spacing: -0.012em;
  margin: 1.2em 0 .5em; clear: both;
}
.rich-text ul, .rich-text ol, .ck-editor__main > .ck-editor__editable.ck-content ul, .ck-editor__main > .ck-editor__editable.ck-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.rich-text ul, .ck-editor__main > .ck-editor__editable.ck-content ul { list-style: disc; }
.rich-text ol, .ck-editor__main > .ck-editor__editable.ck-content ol { list-style: decimal; }
.rich-text li, .ck-editor__main > .ck-editor__editable.ck-content li { margin-bottom: .3em; }
.rich-text li > ul, .rich-text li > ol, .ck-editor__main > .ck-editor__editable.ck-content li > ul, .ck-editor__main > .ck-editor__editable.ck-content li > ol { margin: .3em 0 0; }
.rich-text a, .ck-editor__main > .ck-editor__editable.ck-content a { color: var(--sun-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rich-text blockquote, .ck-editor__main > .ck-editor__editable.ck-content blockquote {
  margin: 1.2em 0; padding: 4px 0 4px 20px; border: 0; border-left: 3px solid var(--sun);
  color: var(--ink-2); font-style: italic; overflow: visible;
}
.rich-text hr, .ck-editor__main > .ck-editor__editable.ck-content hr { height: 0; margin: 1.6em 0; border: 0; border-top: 1px solid var(--rule); background: none; }

/* Kayan (hizalanmış) görseller içerik bitince serbest kalsın. */
.rich-text::after, .ck-editor__main > .ck-editor__editable.ck-content::after { content: ""; display: table; clear: both; }

/* ---- Görseller ----
   Editörün ürettiği blok görsel: <figure class="image"><img></figure>. Alt alta görseller arasında
   tek bir aralık (.8em) kalır; boş paragraflarla boşluk bırakmaya gerek yoktur (kaydederken
   boş paragraflar silinir). Hizalama sınıfları editörün adlandırmasıyla aynıdır. */
.rich-text img, .ck-editor__main > .ck-editor__editable.ck-content img { max-width: 100%; height: auto; }
.rich-text img { display: block; margin: .8em 0; }                 /* eski/içe aktarılmış içerikteki çıplak görseller */
.rich-text p img { display: inline-block; vertical-align: bottom; margin: 0; }
.rich-text figure.image, .ck-editor__main > .ck-editor__editable.ck-content figure.image {
  display: table; clear: both; min-width: 50px; max-width: 100%; margin: .8em auto; text-align: center;
}
.rich-text figure.image img, .ck-editor__main > .ck-editor__editable.ck-content figure.image img {
  display: block; min-width: 100%; max-width: 100%; height: auto; margin: 0 auto;
}
.rich-text figure.image > figcaption, .ck-editor__main > .ck-editor__editable.ck-content figure.image > figcaption {
  display: table-caption; caption-side: bottom; padding: 6px 0 0; background: none;
  font-size: 13px; line-height: 1.4; color: var(--ink-3); text-align: left; word-break: break-word;
}
.rich-text figure { margin: .8em 0; }                              /* eski/içe aktarılmış içerikteki sınıfsız figure */
.rich-text figcaption { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.rich-text figure.image-style-align-left, .ck-editor__main > .ck-editor__editable.ck-content figure.image-style-align-left {
  float: left; clear: none; max-width: 50%; margin: .4em 1.4em .8em 0;
}
.rich-text figure.image-style-align-right, .ck-editor__main > .ck-editor__editable.ck-content figure.image-style-align-right {
  float: right; clear: none; max-width: 50%; margin: .4em 0 .8em 1.4em;
}
.rich-text figure.image-style-align-center, .ck-editor__main > .ck-editor__editable.ck-content figure.image-style-align-center {
  float: none; margin-left: auto; margin-right: auto;
}

/* ---- Tablolar ---- (<figure class="table"><table>…) */
.rich-text table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 15px; }
.rich-text figure.table, .ck-editor__main > .ck-editor__editable.ck-content figure.table { display: block; clear: both; margin: 1.2em 0; overflow-x: auto; }
.rich-text figure.table table, .ck-editor__main > .ck-editor__editable.ck-content figure.table table {
  width: 100%; height: auto; margin: 0; border: 0; border-collapse: collapse; font-size: 15px;
}
.rich-text th, .rich-text td, .ck-editor__main > .ck-editor__editable.ck-content figure.table table th, .ck-editor__main > .ck-editor__editable.ck-content figure.table table td {
  min-width: 2em; padding: 8px 10px; border: 1px solid var(--rule); text-align: left; vertical-align: top;
}
.rich-text th, .ck-editor__main > .ck-editor__editable.ck-content figure.table table th { background: var(--paper-2); font-weight: 600; }
.rich-text td > :last-child, .rich-text th > :last-child,
.ck-editor__main > .ck-editor__editable.ck-content td > :last-child, .ck-editor__main > .ck-editor__editable.ck-content th > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .rich-text figure.image-style-align-left, .rich-text figure.image-style-align-right {
    float: none; max-width: 100%; margin: .8em auto;
  }
}