/* ============================================================================
   Makale tipografisi — blog yazısı gövdesi
   ----------------------------------------------------------------------------
   TEK KAYNAK: bu dosyayı hem site (templates/blog/post_detail.html) hem de
   panel editörü (CKEditor `contentsCss`) okur. Yazarken gördüğünüzle yayında
   görünen bir olsun diye. İkisini ayrı yerlerde biçimlendirirsek kaçınılmaz
   olarak birbirinden uzaklaşırlar.

   NEDEN TAILWIND TYPOGRAPHY DEĞİL: `tailwind.config.js` → `plugins: []`,
   eklenti kurulu değil ve `static/css/tailwind.css` repoya commit'li bir
   derleme çıktısı (Şubat 2026). Dockerfile Tailwind çalıştırmıyor. Eklenti
   eklemek için o dosyayı yeniden derlemek gerekir; 7 aydır derlenmediği için
   aradaki tüm yeni utility sınıfları bir anda devreye girer ve sitenin her
   yerinde kayma yaratır. Tipografi düzeltmesi için alınacak risk değil.

   Tailwind Preflight başlıkları `font-size: inherit; font-weight: inherit`e,
   paragrafları `margin: 0`a çeker. Buradaki seçiciler sınıf kapsamlı olduğu
   için (0,1,1) Preflight'ı (0,0,1) yükleme sırasından bağımsız yener.
   ========================================================================== */

.article-body {
  /* Okuma ölçüsü. Canlı sayfada 112 karakter/satırdı.
     `ch` DEĞİL `rem`: `ch` her elemanın KENDİ yazı boyutuna göre çözülür, bu
     yüzden 30px'lik bir başlıkta 19px'lik paragraftan ~1,6 kat geniş çıkıyor
     ve başlıklar metinle hizalanmıyordu (canlı sayfada görüldü).
     48rem = 768px; ölçülerek seçildi: satır başına ortalama 70 karakter, yani
     tipografide ideal sayılan 65-75 bandının tam ortası. */
  --olcu: 48rem;

  --yazi: #e3eaf4;
  --yazi-soluk: #a7b4c7;
  --baslik: #ffffff;
  --vurgu: #00ff87;         /* aurora-green — koyu zeminde kontrastı yüksek */
  --cizgi: rgba(255, 255, 255, 0.14);
  --cizgi-soluk: rgba(255, 255, 255, 0.08);
  --yuzey: rgba(255, 255, 255, 0.04);

  color: var(--yazi);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); /* 17 → 19px */
  line-height: 1.75;
  /* Türkçe uzun kelimeler dar ekranda taşmasın. */
  overflow-wrap: break-word;
}

/* Açık zeminli kip — panel editörü beyaz zeminde çalışıyor. */
.article-body--acik {
  --yazi: #26303f;
  --yazi-soluk: #5b6878;
  --baslik: #121a26;
  --vurgu: #0a7d5a;         /* yeşil, beyaz zeminde okunur tonu */
  --cizgi: rgba(18, 26, 38, 0.16);
  --cizgi-soluk: rgba(18, 26, 38, 0.09);
  --yuzey: rgba(18, 26, 38, 0.04);
}

/* ── Ölçü ve taşma ───────────────────────────────────────────────────────
   Normal akış korunuyor (grid DEĞİL): grid'de dikey marjlar birleşmez,
   başlığın üstündeki ve paragrafın altındaki boşluk toplanıp iki katına
   çıkardı. Her çocuğa ölçü verip ortalıyoruz; görsel, tablo ve ayraç
   kaptaki tam genişliğe taşabiliyor. */
.article-body > * {
  max-width: var(--olcu);
  margin-inline: auto;
}

/* Yalnız GÖRSEL ve gömülü içerik taşar. Tablo ve ayraç bilerek metin
   ölçüsünde kalıyor: dar bir tablo tam genişliğe taşınca sola yapışıp
   metinle hizasız duruyordu (önizlemede görüldü). */
.article-body > :is(figure, img, iframe, video, .genis),
.article-body > p:has(> img:only-child),
.article-body > p:has(> iframe:only-child),
.article-body > div:has(> iframe) {
  max-width: 100%;
}

/* ── Paragraf ritmi ─────────────────────────────────────────────────── */
.article-body p {
  margin-block: 0 1.35em;
}

.article-body > :last-child {
  margin-bottom: 0;
}

/* Şablondaki giriş paragrafı (post.excerpt) */
.article-body .lead {
  font-size: 1.15em;
  line-height: 1.65;
  color: var(--yazi-soluk);
  margin-bottom: 2em;
}

/* ── Başlıklar ───────────────────────────────────────────────────────────
   Üstteki boşluk alttakinin ~3 katı: bir başlığın kendinden SONRAKİ metne
   ait olduğunu gösteren en güçlü ipucu budur.

   `h1` bilerek `h2` ile aynı: yazıların içinde `h1` kullanılmış (sayfanın
   kendi başlığı zaten `h1`) ve numaralı bölümler h1/h2 arasında karışık —
   "1." h2 iken "2." h1. Farklı biçimlendirilirse kardeş başlıklar farklı
   boyutta çıkıyor. Doğrusu içerikteki `h1`leri `h2`ye çevirmek; o bir içerik
   düzenlemesi, burada görsel olarak eşitliyoruz. */
.article-body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--baslik);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-block: 2.1em 0.65em;
}

.article-body :is(h1, h2) {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.9rem);   /* 24 → 30px */
}

.article-body h3 {
  font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.45rem); /* 20 → 23px */
  font-weight: 600;
  margin-block: 1.9em 0.5em;
}

.article-body :is(h4, h5, h6) {
  font-size: 1.08em;
  font-weight: 600;
  margin-block: 1.7em 0.45em;
}

/* İlk başlık yazının tepesinde gereksiz boşluk açmasın. */
.article-body > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* Üst üste başlıklar arasında iki kat boşluk olmasın. */
.article-body :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.8em;
}

/* ── Vurgu ve bağlantı ───────────────────────────────────────────────────
   Bu yazılarda `strong` ara başlık yerine de kullanılıyor; biraz daha
   parlak olması okunuşu toparlıyor. */
.article-body strong,
.article-body b {
  color: var(--baslik);
  font-weight: 600;
}

.article-body a {
  color: var(--vurgu);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease;
}

.article-body a:hover {
  opacity: 0.75;
}

/* ── Listeler ────────────────────────────────────────────────────────── */
.article-body :is(ul, ol) {
  margin-block: 0 1.35em;
  padding-inline-start: 1.5em;
}

.article-body ul {
  list-style: disc;
}

.article-body ol {
  list-style: decimal;
}

.article-body li {
  margin-block: 0.4em;
  padding-inline-start: 0.25em;
}

.article-body li::marker {
  color: var(--vurgu);
}

.article-body li > :is(ul, ol) {
  margin-block: 0.4em 0.2em;
}

.article-body li p {
  margin-block: 0 0.4em;
}

/* ── Görseller ───────────────────────────────────────────────────────────
   `!important` gerekli: CKEditor görsellere satır içi `width:900px;
   height:560px` yazıyor. Satır içi stil normal kuralları yener; sabit
   yükseklik yüzünden görseller telefonda eziliyordu. */
.article-body img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  display: block;
  margin-inline: auto;
  border-radius: 14px;
  border: 1px solid var(--cizgi-soluk);
}

.article-body > img,
.article-body > p:has(> img:only-child) {
  margin-block: 2em;
}

.article-body figure {
  margin-block: 2em;
}

.article-body figcaption {
  margin-top: 0.75em;
  font-size: 0.875em;
  line-height: 1.6;
  color: var(--yazi-soluk);
  text-align: center;
  max-width: var(--olcu);
  margin-inline: auto;
}

/* ── Ayraç ───────────────────────────────────────────────────────────────
   Yazıda 5 adet `hr` var; bölüm ayracı olarak kullanılmış. */
.article-body hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--cizgi) 20%,
    var(--cizgi) 80%,
    transparent
  );
  margin-block: 3em;
}

/* ── Alıntı ──────────────────────────────────────────────────────────── */
.article-body blockquote {
  margin-block: 1.8em;
  padding: 0.2em 0 0.2em 1.25em;
  border-inline-start: 3px solid var(--vurgu);
  color: var(--yazi-soluk);
  font-style: italic;
}

.article-body blockquote > :last-child {
  margin-bottom: 0;
}

/* ── Tablo ───────────────────────────────────────────────────────────────
   Dar ekranda tablo taşmak yerine kendi içinde kaysın. */
/* `display: block` + `overflow-x` ikilisi: metin ölçüsünden geniş tablo
   sayfayı yatay kaydırmak yerine kendi içinde kayar. Yan etkisi, tablonun
   içerik genişliğine büzülmesi; blok metin sütunuyla hizalı olduğu için
   tablo da metinle hizalı başlar. */
.article-body table {
  margin-block: 2em;
  border-collapse: collapse;
  font-size: 0.94em;
  display: block;
  overflow-x: auto;
}

.article-body :is(th, td) {
  padding: 0.7em 0.9em;
  border: 1px solid var(--cizgi-soluk);
  text-align: start;
  vertical-align: top;
}

.article-body th {
  background: var(--yuzey);
  color: var(--baslik);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Kod ─────────────────────────────────────────────────────────────── */
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: 5px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-soluk);
}

.article-body pre {
  margin-block: 1.8em;
  padding: 1.1em 1.25em;
  border-radius: 12px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-soluk);
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.6;
}

.article-body pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}

/* ── Gömülü içerik ───────────────────────────────────────────────────── */
.article-body :is(iframe, video) {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 14px;
  margin-block: 2em;
  display: block;
}

/* ── Panel editörü ───────────────────────────────────────────────────────
   CKEditor gövdesi doğrudan `.article-body` olur. Editörün iç alanı
   kenarlıksız olduğu için payı burada veriyoruz; ölçü yine aynı, yazar
   satır uzunluğunu yayındaki gibi görsün. */
.article-body--editor {
  background: #ffffff;
  padding: 2rem 1.5rem 3rem;
}

@media (max-width: 640px) {
  .article-body--editor {
    padding: 1.25rem 1rem 2rem;
  }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .article-body a {
    transition: none;
  }
}