/* Curio — site kabugu.
 * Onaylanan prototipin token'lari ve duzeni (Magnews2 yonunde dergi arayuzu).
 *
 * TEK RENK KAYNAGI: asagidaki --s-* degiskenleri. Django bunlari SiteSettings'ten
 * uretir, boylece *.madeda.com altindaki her site ayni kod tabanindan kendi
 * paletiyle cikar. Koyu tema AYNI token setini ezer -> bedava.
 *
 * WEBFONT YOK, JS CERCEVESI YOK, CAROUSEL YOK. Sayfa tam olarak cache'lenebilir
 * kalsin diye bilincli secim (bkz. prototipteki "Hiz & Cache" sekmesi).
 */

:root {
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --display: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --s-bg: #FFFFFF; --s-bg2: #F4F6F4; --s-bg3: #EFF1EE;
  --s-ink: #16191A; --s-ink2: #3A4042; --s-ink3: #545B5C; --s-ink4: #6B7472;
  --s-line: #E2E6E3; --s-line2: #F0F2F0;
  --s-strip: #16191A; --s-strip-ink: #C8CFCC;
  --s-num: #C9D2CE; --s-tldr-bg: #F1F6F6;
  --brand: #166B52; --ad: #9A4A16;
  --shadow: 0 1px 2px rgba(20,30,25,.04), 0 8px 24px rgba(20,30,25,.06);
  color-scheme: light;
}

/* KOYU TEMA YALNIZCA ACIK SECIMLE (proje sahibi karari).
 * `prefers-color-scheme` ile OTOMATIK gecis BILINCLI OLARAK YOK: isletim
 * sistemi koyu modda olan bir ziyaretci, siteyi hic istemedigi halde koyu
 * goruyordu. Varsayilan acik tema; koyuyu isteyen basliktaki dugmeyle acar
 * ve secim localStorage'da kalir.
 * Ayri bir koyu TASARIM yok -- ayni token seti, farkli degerler. */
:root[data-t="dark"] {
  --s-bg: #14181A; --s-bg2: #1C2225; --s-bg3: #20282B;
  --s-ink: #E9EEF0; --s-ink2: #C2CCCF; --s-ink3: #A2AEB1; --s-ink4: #93A1A5;
  --s-line: #2B3437; --s-line2: #232B2E;
  --s-strip: #0B0E0F; --s-strip-ink: #9AA7AA;
  --s-num: #3A4649; --s-tldr-bg: #152629;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}
:root[data-t="dark"] .thumb img, :root[data-t="dark"] .cover img { filter: brightness(.88); }

/* --- BOLUM RENKLERI: tema basina AYRI deger ---
 * Kategori rengi DB'de tek bir deger (Category.color) ve sablonlarda dogrudan
 * `style="color:..."` ile basiliyordu. Olculdu: `#9E2B25` acik zeminde 7.43
 * (gecer) ama koyu zeminde 2.4 -- WCAG AA esigi 4.5. Tek deger iki temayi
 * ayni anda karsilayamaz.
 * Cozum: her bolum icin bir CSS degiskeni; DB degeri sablonda YEDEK olarak
 * kaliyor (yeni bir kategori eklenirse renksiz kalmasin).
 * Degerler hesaplanarak secildi, goz karariyla degil. */
:root {
  --cat-history-war: #9E2B25;            /* 7.43 */
  --cat-science-technology: #1F7A86;     /* 5.02 */
  --cat-film-tv-music: #6A4A9C;          /* 6.84 */
  --cat-culture-art-literature: #8A6113; /* 5.53 */
  --cat-society-psychology-life: #41663D;/* 6.58 */
  /* ridvanbilgin.com'un gercek 4 kategorisi -- ayni yontemle hesaplandi. */
  --cat-disaster: #A13E2A;               /* 6.49 */
  --cat-disastertech: #1B7A8A;           /* 5.00 */
  --cat-ai: #5B3FA6;                     /* 7.76 */
  --cat-devops: #8A5A12;                 /* 5.91 */
}
:root[data-t="dark"] {
  --cat-history-war: #E0736C;
  --cat-science-technology: #5CC2D0;
  --cat-film-tv-music: #AE92D8;
  --cat-culture-art-literature: #D3A24A;
  --cat-society-psychology-life: #87BC80;
  --cat-disaster: #E8836F;               /* 6.73 */
  --cat-disastertech: #5FC7D6;           /* 9.04 */
  --cat-ai: #B79AEE;                     /* 7.55 */
  --cat-devops: #D9A754;                 /* 8.17 */
  --brand: #4FC49E;
}
:root[data-t="light"] {
  --cat-history-war: #9E2B25;
  --cat-science-technology: #1F7A86;
  --cat-film-tv-music: #6A4A9C;
  --cat-culture-art-literature: #8A6113;
  --cat-society-psychology-life: #41663D;
  --cat-disaster: #A13E2A;
  --cat-disastertech: #1B7A8A;
  --cat-ai: #5B3FA6;
  --cat-devops: #8A5A12;
  --brand: #166B52;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--s-bg); color: var(--s-ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 {
  font-family: var(--display); margin: 0; font-weight: 800;
  letter-spacing: -.021em; text-wrap: balance;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
.sw { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--s-bg); color: var(--s-ink);
  padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 0; }

/* --- servis seridi --- */
.ustrip { background: var(--s-strip); color: var(--s-strip-ink); font-size: .72rem; }
.ustrip .in { display: flex; align-items: center; gap: 14px; padding: 6px 24px;
  flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.ustrip a { color: var(--s-strip-ink); }
.ustrip .sp { flex: 1; }

/* --- masthead --- */
.mast { border-bottom: 1px solid var(--s-line); padding: 16px 24px; display: flex;
  align-items: center; gap: 16px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.logo { font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 4vw, 1.75rem);
  letter-spacing: -.035em; color: var(--s-ink); line-height: 1; }
.logo:hover { text-decoration: none; }
.logo b { color: var(--brand); }
.logo small { display: block; font-family: var(--sans); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .19em; color: var(--s-ink4); font-weight: 700; margin-top: 3px; }
.mast .sp { flex: 1; }
/* tema dugmesi: YALNIZ ikon, metin yok (proje sahibi karari) */
.themetog { appearance: none; border: 1px solid var(--s-line); background: none; border-radius: 6px;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--s-ink3); flex: none; padding: 0; }
.themetog:hover { color: var(--s-ink); border-color: var(--s-ink4); }
.themetog svg { width: 18px; height: 18px; display: block; }
.themetog .moon { display: none; }
:root[data-t="dark"] .themetog .sun { display: none; }
:root[data-t="dark"] .themetog .moon { display: block; }

/* --- kategori navigasyonu: genis=yatay bar, dar=hamburger (JS'SIZ) --- */
.catnav { border-bottom: 2px solid var(--s-ink); background: var(--s-bg); position: relative; }
.catnav .in { display: flex; padding: 0 24px; max-width: 1200px; margin: 0 auto; }
.catnav a { font-size: .79rem; font-weight: 700; padding: 11px 14px; color: var(--s-ink2);
  white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px;
  text-transform: uppercase; letter-spacing: .05em; min-height: 44px; display: flex; align-items: center; }
.catnav a.on { color: var(--s-ink); border-bottom-color: var(--brand); }
/* Genis ekran icin ekstra bir kural GEREKMIYOR: `<details open>` sunucudan
   geliyor (bkz. base.html), yani `.in` zaten normal bir gorunur torun --
   satir 140'taki `.catnav .in { display:flex }` yeterli. (Denendi ve
   olculdu: `open` OLMADAN CSS'te `display:flex` yazip native "kapali
   baslar" varsayilanini ezmeye calismak Chromium'da ISE YARAMADI --
   `getComputedStyle` "flex" donduruyor ama icerik yine de render
   edilmiyor, tarayici bunu CSS display'den bagimsiz bir katmanda
   yonetiyor. Bu yuzden footer'daki `.foot-grup` ile AYNI cozum: `open`
   HER ZAMAN sunucudan gelsin.) */
.navtog { display: none; }
@media (max-width: 760px) {
  .navtog { display: flex; align-items: center; gap: 9px; padding: 12px 15px; font-size: .79rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--s-ink);
    cursor: pointer; min-height: 46px; user-select: none; list-style: none; }
  .navtog::marker { content: ""; }
  .navtog::-webkit-details-marker { display: none; }
  .navtog .bars { display: inline-flex; flex-direction: column; gap: 3px; width: 17px; }
  .navtog .bars i { display: block; height: 2px; background: var(--s-ink); border-radius: 2px; }
  /* `open` HER ZAMAN sunucudan geldigi icin (bkz. yukarida) dar ekranda da
     ILK YUKLEMEDE ACIK baslar -- footer'in 20+ baglantisindan farkli olarak
     burada 5 oge oldugu icin kabul edilebilir. Kullanici summary'ye
     tiklayinca tarayici `open`i KENDISI kaldirir/geri getirir (native
     toggle, JS gerekmez); asagidaki iki kural o iki duruma karsilik gelir. */
  .catnav-mob > .in { display: none; flex-direction: column; padding: 0 0 6px; border-top: 1px solid var(--s-line); }
  .catnav-mob[open] > .in { display: flex; }
  .catnav .in a { width: 100%; padding: 12px 15px; border-bottom: 1px solid var(--s-line2);
    border-left: 3px solid transparent; margin-bottom: 0; white-space: normal; }
  .catnav .in a.on { border-bottom-color: var(--s-line2); border-left-color: var(--brand); background: var(--s-bg2); }
  .navtog:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  .sw { padding: 0 15px; }
  .mast, .ustrip .in { padding-left: 15px; padding-right: 15px; }
}

/* --- ana izgara --- */
.mg { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 32px; padding: 22px 0 30px; }
@media (max-width: 1040px) { .mg { gap: 24px; grid-template-columns: minmax(0,1fr) 280px; } }
@media (max-width: 900px) { .mg { grid-template-columns: 1fr; gap: 26px; }
  .side { flex-direction: row; flex-wrap: wrap; } .side > * { flex: 1 1 260px; } }

.clabel { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.cmeta { display: flex; align-items: center; gap: 8px; font-size: .7rem; color: var(--s-ink4); margin-bottom: 6px; flex-wrap: wrap; }

/* --- banner --- */
/* MANSET.
 * `aspect-ratio` DEGIL `min-height`: sabit oran, icerik ondan uzunsa
 * `overflow:hidden` ile metni USTTEN KIRPIYORDU. 375 px ekranda 21/9 orani
 * kutuyu 148 px yapiyor, oysa kategori + 4 satir baslik + 3 satir ozet +
 * ic bosluk ~210 px istiyor. `min-height` + `align-content:end` ile kutu
 * gerekirse UZAR; kirpilma matematiksel olarak imkansiz hale gelir. */
.banner { position: relative; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg,#22333A,#4E7A80);
  display: grid; align-content: end; min-height: clamp(260px, 40vw, 520px); }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Ust ucun TAMAMEN seffaf olmamasi sart: kategori etiketi ve baslik ilk
 * satiri tam o bolgede oturuyor. Acik renkli bir kapak fotografinda seffaf
 * ust uc, metnin arkasinda hic karartma birakmiyordu ve okunurluk fotografin
 * kendi renklerine kaliyordu (bildirilen hata). Taban deger .45 -- gorseli
 * hala gosterir ama HER fotografta bir kat karartma garantiler. */
.banner .ov { padding: 22px; background: linear-gradient(rgba(8,14,14,.45), rgba(8,14,14,.88));
  width: 100%; color: #fff; position: relative; }

/* SIRA KRITIK: bu uc kural medya sorgusundan ONCE gelmek ZORUNDA.
 * Daha once sonrasinda duruyorlardi ve uretimde su hataya yol acti: ozgulluk
 * esit (0,0,1,1) -- medya sorgusu ozgulluk EKLEMEZ -- yani sonra gelen kazandi
 * ve mobilde baslik BEYAZ ZEMIN UZERINDE BEYAZ kaldi. Sayfa "bos" gorunuyordu
 * ama metin oradaydi; ekran okuyucu okuyor, goz gormuyordu. Ayni sekilde
 * `.banner p` acik gri kaliyordu -> WCAG kontrast ihlali.
 * content/checks.py bu sirayi artik denetliyor. */
.banner h2 { font-size: clamp(1.25rem,3.6vw,2.25rem); line-height: 1.15; color: #fff;
  margin: 5px 0 6px; max-width: 26ch; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.banner p { margin: 0; font-size: .86rem; color: #D6DEDC; max-width: 56ch;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.banner .cmeta { color: #B9C4C1; margin-bottom: 0; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Dar ekranda BINDIRME YOK, YIGMA VAR.
 * Bindirmeli manset dar ekranda iki isi birden kotu yapiyor: gorselden geriye
 * ince bir serit kaliyor ve metin degrade uzerinde okunurlugunu yitiriyor.
 * Yigilmis duzende gorsel kendi orani icinde tam gorunuyor, metin normal
 * akista -- yani hicbir kosulda kirpilamaz. */
@media (max-width: 700px) {
  .banner { display: block; min-height: 0; background: none; border-radius: 0; overflow: visible; }
  .banner img { position: static; width: 100%; height: auto; aspect-ratio: 16/10;
    border-radius: 8px; display: block; }
  .banner .ov { background: none; padding: 12px 0 0; color: var(--s-ink); }
  .banner h2 { color: var(--s-ink); font-size: clamp(1.3rem, 6vw, 1.8rem); max-width: none; }
  .banner p { color: var(--s-ink3); max-width: none; }
  .banner .cmeta { color: var(--s-ink4); }
  /* Gorseli olmayan mansset: bos beyaz alan kalmasin diye degrade geri gelir. */
  .banner:not(:has(img)) { background: linear-gradient(135deg,#22333A,#4E7A80);
    border-radius: 8px; padding: 16px; }
  .banner:not(:has(img)) .ov { color: #fff; padding: 0; }
  .banner:not(:has(img)) h2 { color: #fff; }
  .banner:not(:has(img)) p { color: #D6DEDC; }
}

/* --- bolum basligi + trending --- */
.sechead { display: flex; align-items: center; gap: 10px; margin: 26px 0 13px;
  border-bottom: 2px solid var(--s-ink); padding-bottom: 7px; }
.sechead h2, .sechead h3 { font-size: 1.06rem; color: var(--s-ink); }
.sechead .sp { flex: 1; }
.sechead a { font-size: .72rem; font-weight: 700; color: var(--s-ink3);
  text-transform: uppercase; letter-spacing: .08em; }
.trend { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 860px) { .trend { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .trend { grid-template-columns: 1fr; gap: 14px; } }
.tcard { position: relative; padding-left: 26px; display: block; }
.tcard .n { position: absolute; left: 0; top: -2px; font-family: var(--display);
  font-size: 1.35rem; font-weight: 600; color: var(--s-num); line-height: 1; }
.tcard h3 { font-size: .87rem; line-height: 1.34; color: var(--s-ink); }
.tcard .rt { font-size: .68rem; color: var(--s-ink4); margin-top: 4px; }

/* --- kategori blogu: 1 buyuk + 3 satir --- */
.block { margin-top: 28px; }
.lead2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; margin-bottom: 16px; }
@media (max-width: 800px) { .lead2 { grid-template-columns: 1fr; } }
.thumb { border-radius: 6px; overflow: hidden; aspect-ratio: 16/10; background: var(--s-bg3);
  display: flex; align-items: center; justify-content: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.lead2 h3 { font-size: clamp(1.05rem,2.1vw,1.3rem); line-height: 1.22; color: var(--s-ink); margin: 7px 0 5px; }
.lead2 p { font-size: .85rem; color: var(--s-ink3); margin: 0; }
.rows { display: flex; flex-direction: column; gap: 13px; }
.row2 { display: grid; grid-template-columns: 104px 1fr; gap: 13px; align-items: start; }
@media (max-width: 420px) { .row2 { grid-template-columns: 82px 1fr; gap: 11px; } }
.row2 .thumb { aspect-ratio: 4/3; }
.row2 h3 { font-size: .9rem; line-height: 1.32; color: var(--s-ink); }
.row2 .rt { font-size: .68rem; color: var(--s-ink4); margin-top: 4px; }

/* --- yan sutun --- */
.side { display: flex; flex-direction: column; gap: 22px; }
.swid { border: 1px solid var(--s-line); border-radius: 8px; padding: 15px; }
.swid .h { font-size: .68rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 800;
  color: var(--s-ink); border-bottom: 2px solid var(--s-ink); padding-bottom: 7px; margin-bottom: 12px; }
.pop { display: flex; flex-direction: column; gap: 12px; counter-reset: p; }
.pop a { display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: start; }
.pop a::before { counter-increment: p; content: counter(p); font-family: var(--display);
  font-size: 1.15rem; color: var(--s-num); font-weight: 600; line-height: 1.1; }
.pop.plain a { grid-template-columns: 1fr; }
.pop.plain a::before { content: none; counter-increment: none; }
.pop h3 { font-size: .84rem; line-height: 1.3; margin: 0; font-weight: 700; letter-spacing: -.012em; color: var(--s-ink); }
.pop .rt { font-size: .66rem; color: var(--s-ink4); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags { gap: 8px; }
.tags a { font-size: .74rem; padding: 8px 12px; border: 1px solid var(--s-line); border-radius: 4px;
  color: var(--s-ink2); min-height: 34px; display: inline-flex; align-items: center; }
.tags a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

/* --- reklam slotu ---
 * KAPALI SLOT HIC RENDER EDILMEZ: sablonda kosul var, burada yalniz acik
 * slotun gorunumu tanimli. Kapaliyken yukseklik REZERVE EDILMEZ. */
.adslot { border-radius: 6px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin: 14px 0; }

/* --- yazi sayfasi --- */
.apage { display: grid; grid-template-columns: minmax(0,720px) 300px; gap: 34px;
  padding: 20px 0 30px; justify-content: center; }
@media (max-width: 1040px) { .apage { grid-template-columns: minmax(0,1fr) 290px; gap: 26px; } }
@media (max-width: 900px) { .apage { grid-template-columns: 1fr; } }
.crumb { font-size: .73rem; color: var(--s-ink4); margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.apage h1 { font-size: clamp(1.6rem,4.2vw,2.5rem); line-height: 1.1; margin-bottom: 11px; color: var(--s-ink); }
.byline { display: flex; align-items: center; gap: 9px; padding: 11px 0;
  border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line);
  margin-bottom: 16px; font-size: .78rem; color: var(--s-ink3); flex-wrap: wrap; }
.byline b { color: var(--s-ink); }
.avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: .6rem; font-weight: 800; flex: none; }
.cover { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; margin-bottom: 5px; background: var(--s-bg3); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cap { font-size: .71rem; color: var(--s-ink4); margin-bottom: 18px; }

.tldr { border-left: 4px solid var(--brand); background: var(--s-tldr-bg);
  border-radius: 0 8px 8px 0; padding: 14px 17px; margin: 18px 0; }
.tldr .l { font-size: .62rem; text-transform: uppercase; letter-spacing: .15em;
  font-weight: 800; color: var(--brand); margin-bottom: 5px; }
.tldr p { margin: 0; font-size: .93rem; color: var(--s-ink2); line-height: 1.6; }
.kf { border: 1px solid var(--s-line); border-radius: 8px; padding: 14px 17px; margin: 18px 0; }
.kf .l { font-size: .62rem; text-transform: uppercase; letter-spacing: .15em;
  font-weight: 800; color: var(--s-ink4); margin-bottom: 8px; }
.kf ul { margin: 0; padding-left: 16px; font-size: .88rem; color: var(--s-ink2); }
.kf li { margin-bottom: 5px; line-height: 1.48; }

.faq { margin-top: 26px; border-top: 1px solid var(--s-line); padding-top: 18px; }
.faq h2 { font-size: 1.26rem; margin-bottom: 12px; color: var(--s-ink); }
.faq .q { font-family: var(--display); font-weight: 800; letter-spacing: -.015em;
  font-size: 1rem; margin: 13px 0 5px; color: var(--s-ink); }
.faq .a { font-size: .92rem; color: var(--s-ink2); margin: 0; line-height: 1.6; }

.biocard { background: var(--s-bg2); border-radius: 9px; padding: 16px; margin-top: 22px; display: flex; gap: 13px; }
.biocard .av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .95rem; }
.biocard h2 { font-size: 1rem; margin-bottom: 2px; }
.biocard .r { font-size: .73rem; color: var(--s-ink4); margin-bottom: 5px; }
.biocard p { font-size: .84rem; color: var(--s-ink2); margin: 0; line-height: 1.52; }

.comments { margin-top: 26px; border-top: 1px solid var(--s-line); padding-top: 18px; }
.c-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 800;
  color: var(--s-ink); border-bottom: 2px solid var(--s-ink); padding-bottom: 7px;
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.c-item { display: grid; grid-template-columns: 34px 1fr; gap: 11px; margin-bottom: 15px; }
.c-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: .7rem; font-weight: 800; flex: none; background: var(--s-ink4); }
.c-meta { font-size: .75rem; color: var(--s-ink4); margin-bottom: 3px; }
.c-meta b { color: var(--s-ink); }
.c-item p { margin: 0; font-size: .9rem; color: var(--s-ink2); line-height: 1.55; }

/* --- avatar: fotograf varyanti ---
 * `.avatar`, `.av`, `.authorav` monogram icin flex kutu olarak tanimli.
 * Fotograf geldiginde ayni oleni kaplamali ama flex kurallari <img>'e
 * uygulanmamali; `object-fit: cover` kare olmayan bir gorseli ezmek yerine
 * kirpar (model zaten kare kirpiyor, bu ikinci emniyet). */
.avphoto { border-radius: 50%; object-fit: cover; display: block; flex: none;
  background: var(--s-bg3); }

/* --- kapaksiz kart: bos kutu YERINE tipografik kapak ---
 * 216 yazinin 57'sinde gorsel yok. Bos bir .thumb 16/10 oraniyla dev gri bir
 * delik biraktigi icin (canlida goruldu) yerine bolum renginde bir degrade ve
 * bolumun bas harfi konuyor. Izgara bozulmaz, sayfa "eksik" gorunmez. */
.thumb-bos { position: relative; background:
  linear-gradient(135deg, color-mix(in srgb, var(--k) 82%, #000 18%),
                          color-mix(in srgb, var(--k) 34%, var(--s-bg2))); }
.thumb-harf { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-family: var(--display); font-weight: 800;
  color: rgba(255,255,255,.72); font-size: clamp(1.4rem, 4vw, 3rem);
  letter-spacing: -.04em; }
.row2 .thumb-harf { font-size: 1.35rem; }

/* --- arsiv/bolum basligi --- */
.archead { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: 26px 0 16px; border-bottom: 3px solid var(--k); margin-bottom: 22px; }
.archead > div { flex: 1 1 320px; min-width: 0; }
.archead h1 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); line-height: 1.06; margin: 5px 0 0; }
.archead-lede { color: var(--s-ink3); margin: 10px 0 0; max-width: 62ch; font-size: .95rem; }
.archead-sayi { font-family: var(--display); font-weight: 800; font-size: 2.4rem;
  line-height: 1; color: var(--k); display: flex; align-items: baseline; gap: 7px; }
.archead-sayi small { font-family: var(--sans); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--s-ink4); }

/* --- yazi alti etiketleri --- */
.posttags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 26px 0 4px; padding-top: 18px; border-top: 1px solid var(--s-line); }
.posttags-l { font-size: .62rem; text-transform: uppercase; letter-spacing: .15em;
  font-weight: 800; color: var(--s-ink4); margin-right: 4px; }
.posttags a { font-size: .78rem; padding: 8px 13px; border: 1px solid var(--s-line);
  border-radius: 50rem; color: var(--s-ink2); min-height: 34px;
  display: inline-flex; align-items: center; }
.posttags a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

/* --- onceki / sonraki yazi --- */
/* Iki sutun HER ZAMAN duruyor (bir taraf bossa `.pnav-bos` yer tutar), boylece
   "Newer" ilk yazida aniden sola kaymiyor -- kayan yerlesim, ayni sitede
   gezinen okur icin sayfa yanlis yuklenmis hissi birakir. */
.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--s-line); }
.pnav-i { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  border: 1px solid var(--s-line); border-radius: 9px; min-height: 76px;
  justify-content: center; }
a.pnav-i:hover { border-color: var(--brand); text-decoration: none; }
a.pnav-i:hover .pnav-t { color: var(--brand); }
.pnav-n { text-align: right; align-items: flex-end; }
.pnav-l { display: inline-flex; align-items: center; gap: 5px;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .15em;
  font-weight: 800; color: var(--s-ink4); }
.pnav-t { font-family: var(--serif); font-size: .95rem; line-height: 1.35;
  font-weight: 700; color: var(--s-ink); }
/* Bos taraf: cerceve YOK. Bos bir kutu cizmek "burada bir sey vardi ama
   yuklenmedi" izlenimi verir; yer tutmasi yeter. */
.pnav-bos { border: none; }
@media (max-width: 560px) {
  .pnav { grid-template-columns: 1fr; }
  /* Tek sutunda sagda duran "Newer" garip durur, sola hizala. */
  .pnav-n { text-align: left; align-items: flex-start; }
  .pnav-bos { display: none; }
}

/* --- yazar About sayfasi --- */
.authorhead { display: flex; gap: 20px; align-items: flex-start; padding: 26px 0 18px;
  border-bottom: 2px solid var(--s-ink); flex-wrap: wrap; }
.authorav { width: 84px; height: 84px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 800;
  font-size: 1.7rem; letter-spacing: .02em; }
.authormeta { flex: 1 1 300px; min-width: 0; }
.authormeta h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.08; margin: 4px 0 10px; }
.authorlede { font-size: 1.02rem; color: var(--s-ink2); margin: 0 0 14px; max-width: 62ch; }
.authorfacts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  margin: 0; font-size: .82rem; }
.authorfacts dt { color: var(--s-ink4); text-transform: uppercase; font-size: .66rem;
  letter-spacing: .12em; font-weight: 700; padding-top: 3px; }
.authorfacts dd { margin: 0; color: var(--s-ink2); }
.authorbio { font-family: var(--serif); font-size: 1.02rem; line-height: 1.72;
  color: var(--s-ink2); max-width: 68ch; margin: 22px 0 0; }
.authorbio p { margin: 0 0 15px; }
.authorabout { max-width: 68ch; margin: 22px 0 6px; padding: 16px 18px;
  background: var(--s-bg2); border: 1px solid var(--s-line); border-radius: 8px; }
.authorabout p { margin: 0 0 12px; color: var(--s-ink3); font-size: .92rem; line-height: 1.6; }
.authorabout-btn { display: inline-block; text-decoration: none; }
.authorsections { list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px; }
.authorsections li { border: 1px solid var(--s-line); border-radius: 6px;
  padding: 7px 12px; font-size: .8rem; font-weight: 700; }
.authorsections li span { color: var(--s-ink4); font-weight: 400; margin-left: 6px; }
.tagflat { font-size: .72rem; padding: 4px 9px; border: 1px solid var(--s-line);
  border-radius: 4px; color: var(--s-ink2); display: inline-flex; align-items: center; }

/* --- sayfalama / altbilgi --- */
.pager { display: flex; gap: 10px; align-items: center; justify-content: center;
  margin: 28px 0 10px; font-size: .82rem; }
/* `>` SART, sadece `.pager a` DEGIL: yon dugmelerinin ICINDE de bir <span>
 * var (dar ekranda metni gizleyip yalniz oku birakmak icin). Torun secici
 * kullanildiginda o ic span de kendi cercevesini aliyordu ve dugmeler
 * KUTU ICINDE KUTU gorunuyordu (uretimde bildirildi). */
.pager > a, .pager > span { padding: 9px 15px; border: 1px solid var(--s-line);
  border-radius: 6px; min-height: 40px; display: inline-flex; align-items: center; }
.pager .cur { border-color: var(--s-ink); font-weight: 700; }
/* Yon dugmelerinin ic span'i: yalnizca metin tasir, kendi kutusu YOK. */
.pager-yon { gap: 7px; color: var(--s-ink2); }
.pager-yon span { padding: 0; border: 0; min-height: 0; display: inline; }
.pager-yon:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
/* Numaralar: 40px dokunma hedefi korunuyor (WCAG 2.5.8). */
.pager-no { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  padding: 0 !important; border: 0 !important; min-height: 0 !important; }
.pager-no a, .pager-no span { padding: 9px 13px; border: 1px solid var(--s-line);
  border-radius: 6px; min-height: 40px; min-width: 40px; display: inline-flex;
  align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pager-no a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pager-bosluk { border: 0 !important; color: var(--s-ink4); padding: 9px 2px !important;
  min-width: 0 !important; }
/* Pasif yon: yer TUTAR ama tiklanamaz -- ilk sayfada duzenin kaymamasi icin. */
.pager-pasif { opacity: .32; }
@media (max-width: 560px) {
  /* Dar ekranda yon dugmelerinin metni gizlenir, ok kalir. */
  .pager-yon span { display: none; }
  .pager-no a, .pager-no span { padding: 9px 10px; }
}
footer.sitefoot { border-top: 1px solid var(--s-line); margin-top: 30px; padding: 26px 0 40px;
  color: var(--s-ink4); font-size: .79rem; }
footer.sitefoot .cols { display: flex; gap: 26px; flex-wrap: wrap; }
footer.sitefoot .cols > * { flex: 1 1 200px; }
footer.sitefoot a { color: var(--s-ink3); display: inline-block; padding: 7px 0;
  min-height: 24px; }
/* Dokunma hedefi: 24 px yukseklik + aralik. PageSpeed'in "touch targets"
 * denetimi altbilgi baglarini ve kategori etiketlerini isaretlemisti. */
footer.sitefoot .cols > div > a { margin-bottom: 2px; }

/* --- yorum formu --- */
.c-form { background: var(--s-bg2); border-radius: 10px; padding: 18px; margin-top: 20px; }
.c-form-b { font-size: .95rem; margin: 0 0 12px; }
.c-row { display: flex; gap: 12px; flex-wrap: wrap; }
.c-row > .c-alan { flex: 1 1 200px; }
.c-alan { display: block; margin-bottom: 12px; }
.c-alan > span { display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700; color: var(--s-ink4); margin-bottom: 5px; }
.c-alan > span em { text-transform: none; letter-spacing: 0; font-weight: 400; font-style: normal; }
.c-alan input, .c-alan textarea { width: 100%; border: 1px solid var(--s-line);
  background: var(--s-bg); color: var(--s-ink); border-radius: 6px; padding: 10px 12px;
  font: inherit; font-size: .9rem; min-height: 44px; }
.c-alan textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.c-alan input:focus, .c-alan textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Bal kupu: ekran okuyucudan da gizli, ama `display:none` DEGIL -- bazi botlar
 * gizli alanlari atlar, bunu atlamasin. */
.c-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c-btn { appearance: none; border: 0; background: var(--brand); color: #fff;
  font: inherit; font-size: .85rem; font-weight: 700; padding: 11px 20px;
  border-radius: 6px; min-height: 44px; cursor: pointer; margin-top: 4px; }
.c-btn:disabled { opacity: .55; cursor: not-allowed; }
.c-note { font-size: .74rem; color: var(--s-ink4); margin: 10px 0 0; line-height: 1.5; }
.c-note.c-hata { color: #B3382F; font-weight: 600; }
:root[data-t="dark"] .c-note.c-hata { color: #E0736C; }
.c-uyari { font-size: .78rem; color: var(--ad); margin: 8px 0; }
.cf-turnstile { margin: 12px 0 4px; }

/* ============================================================
   Arama, yukari-cik, altbilgi (2026-08-09)
   SIRA KURALI: her bilesenin TEMEL kurallari once, medya sorgusu SONRA.
   Tersi calismaz -- bkz. content/checks.py curio.E002.
   ============================================================ */

/* --- gorsel olarak gizli ama ekran okuyucuya acik --- */
.gizli-etiket { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- ust bardaki arama dugmesi --- */
.aratog { text-decoration: none; }
.aratog:hover { color: var(--brand); }

/* --- arama penceresi --- */
.aramodal { border: 0; border-radius: 12px; padding: 0; width: min(620px, calc(100% - 32px));
  background: var(--s-bg); color: var(--s-ink); box-shadow: 0 24px 60px rgba(0,0,0,.28);
  margin-top: 12vh; }
.aramodal::backdrop { background: rgba(8,14,14,.55); backdrop-filter: blur(2px); }
.aramodal form { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.aramodal svg { width: 20px; height: 20px; flex: none; color: var(--s-ink4); }
.aramodal input { flex: 1; border: 0; background: none; color: var(--s-ink);
  font: inherit; font-size: 1.05rem; min-height: 44px; outline: none; }
.aramodal button[type="submit"] { border: 1px solid var(--s-line); background: none;
  color: var(--s-ink2); border-radius: 6px; padding: 0 14px; min-height: 40px;
  font: inherit; font-size: .85rem; cursor: pointer; }
.aramodal button[type="submit"]:hover { border-color: var(--brand); color: var(--brand); }
.aramodal-kapat { border: 0; background: none; color: var(--s-ink4); font-size: 1.6rem;
  line-height: 1; cursor: pointer; padding: 0 4px; min-height: 44px; min-width: 44px; }

/* --- arama sayfasi formu --- */
.ara-form { display: flex; gap: 8px; margin: 18px 0 24px; }
.ara-form input { flex: 1; border: 1px solid var(--s-line); border-radius: 8px;
  background: var(--s-bg2); color: var(--s-ink); font: inherit; padding: 0 14px; min-height: 46px; }
.ara-form input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.ara-form button { border: 1px solid var(--s-ink); background: var(--s-ink); color: var(--s-bg);
  border-radius: 8px; padding: 0 20px; min-height: 46px; font: inherit; font-weight: 700; cursor: pointer; }
.ara-bos { padding: 26px 0 40px; color: var(--s-ink3); }
.ara-bos p { margin: 0 0 10px; }

/* --- yukari cik --- */
.ustecik { position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--s-line); background: var(--s-bg); color: var(--s-ink2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.ustecik:hover { border-color: var(--brand); color: var(--brand); }
.ustecik svg { width: 20px; height: 20px; }
.ustecik[hidden] { display: none; }

/* --- altbilgi --- */
.foot-ust { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.foot-marka strong { font-family: var(--display); font-size: 1.15rem; }
.foot-marka p { margin: 6px 0 0; font-size: .84rem; color: var(--s-ink3); max-width: 34ch; }
.foot-guvence { font-style: italic; }
.foot-kunye { font-size: .78rem !important; opacity: .8; }
.foot-grup summary { font-size: .68rem; text-transform: uppercase; letter-spacing: .13em;
  font-weight: 800; color: var(--s-ink4); list-style: none; cursor: default;
  padding-bottom: 8px; border-bottom: 1px solid var(--s-line); margin-bottom: 10px; }
.foot-grup summary::-webkit-details-marker { display: none; }
.foot-grup ul { list-style: none; margin: 0; padding: 0; }
.foot-grup li { margin-bottom: 7px; }
.foot-grup a { font-size: .86rem; color: var(--s-ink2); }
.foot-grup a:hover { color: var(--brand); }
.foot-alt { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--s-line);
  font-size: .78rem; color: var(--s-ink4); }
.foot-alt p { margin: 0; }
.foot-kredi { margin-left: auto !important; }
.foot-kredi a { color: var(--s-ink3); text-decoration: underline; text-underline-offset: 2px; }
.foot-kredi a:hover { color: var(--brand); }

.foot-imza { display: flex; justify-content: center; margin-top: 22px; }
.foot-imza img { height: 44px; width: auto; }
.foot-imza-koyu { display: none; }
:root[data-t="dark"] .foot-imza-acik { display: none; }
:root[data-t="dark"] .foot-imza-koyu { display: block; }

@media (max-width: 760px) {
  .foot-ust { grid-template-columns: 1fr; gap: 4px; }
  .foot-marka { margin-bottom: 14px; }
  /* Dar ekranda gruplar KAPALI baslar: 20+ baglantiyi alt alta dizmek
     altbilgiyi iki ekran uzatiyordu. <details open> sunucudan geliyor,
     burada gorunumu ezmek yerine ok isaretini geri getiriyoruz. */
  .foot-grup { border-bottom: 1px solid var(--s-line); }
  .foot-grup summary { border: 0; margin: 0; padding: 14px 0; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; }
  .foot-grup summary::after { content: "+"; font-size: 1.1rem; opacity: .6; }
  .foot-grup[open] summary::after { content: "\2212"; }
  .foot-grup ul { padding-bottom: 12px; }
  .foot-kredi { margin-left: 0 !important; }
  .ustecik { right: 12px; bottom: 12px; }
}

/* --- altbilgi bulten formu ---
 * IKI SATIR, BILINCLI: Turnstile widget'i sabit genislikte ve esnemiyor.
 * Email+buton ile widget AYNI flex satirinda oldugunda widget kendi
 * genisligini koruyup satiri tasiriyordu (uretimde goruldu). Form dikey
 * (column), icindeki `.foot-bulten-satir` yatay (row) -- widget o satirin
 * DISINDA, kendi satirinda kaliyor. */
.foot-bulten { margin-top: 18px; }
.foot-bulten-b { font-size: .82rem; color: var(--s-ink3); margin: 0 0 10px; max-width: 30ch; }
.foot-bulten form { display: flex; flex-direction: column; gap: 10px; }
.foot-bulten-satir { display: flex; gap: 8px; }
.foot-bulten-satir input[type="email"] { flex: 1; min-width: 0; border: 1px solid var(--s-line);
  border-radius: 6px; background: var(--s-bg); color: var(--s-ink); font: inherit;
  font-size: .84rem; padding: 0 12px; min-height: 40px; }
.foot-bulten-satir input[type="email"]:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.foot-bulten-satir button { border: 1px solid var(--s-ink); background: var(--s-ink); color: var(--s-bg);
  border-radius: 6px; padding: 0 16px; min-height: 40px; font: inherit; font-size: .82rem;
  font-weight: 700; cursor: pointer; flex: none; }
.foot-bulten-satir button:disabled { opacity: .55; cursor: not-allowed; }
.foot-bulten-durum { font-size: .74rem; color: var(--s-ink4); margin: 8px 0 0; min-height: 1.2em; }
.foot-bulten-durum.c-hata { color: #B3382F; font-weight: 600; }
:root[data-t="dark"] .foot-bulten-durum.c-hata { color: #E0736C; }
@media (max-width: 420px) {
  .foot-bulten-satir { flex-direction: column; }
}

/* --- begeni + push dugmeleri: AYNI GORUNUM (paylasilan taban) --- */
.begentog, .pushtog { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 9px 16px; border: 1px solid var(--s-line); border-radius: 50rem;
  background: var(--s-bg2); color: var(--s-ink2); font: inherit; font-size: .84rem;
  font-weight: 700; cursor: pointer; min-height: 40px; }
.begentog:hover, .pushtog:hover { border-color: var(--brand); color: var(--brand); }
.begentog:disabled, .pushtog:disabled { cursor: default; }
.begentog.begendi, .pushtog.begendi { border-color: var(--brand); color: var(--brand); background: var(--s-tldr-bg); }
.begentog.begendi svg { fill: currentColor; }
.begentog-sayi { font-variant-numeric: tabular-nums; color: var(--s-ink4); }
.begentog.begendi .begentog-sayi { color: var(--brand); }

/* --- sidebar push CTA karti --- */
/* `.swid`in duz cercevesi yerine marka rengiyle hafif vurgulu bir zemin --
 * bu bir bilgi widget'i degil bir DAVET, digerlerinden gorsel olarak
 * ayrilmasi gerekiyor, aksi halde "Most in depth" ile ayni agirlikta
 * gorunup goz atlardi. */
.swidpush { border-color: var(--brand); background: var(--s-tldr-bg); text-align: center; padding: 18px 15px; }
.swidpush svg { color: var(--brand); margin-bottom: 6px; }
.swidpush .h { border-bottom: 0; text-align: center; color: var(--brand); margin-bottom: 4px; }
.swidpush p { font-size: .82rem; color: var(--s-ink3); line-height: 1.5; margin: 0 0 14px; }
.swidpush .pushtog { width: 100%; justify-content: center; margin-top: 0;
  background: var(--brand); color: #fff; border-color: var(--brand); }
.swidpush .pushtog:hover { opacity: .9; }
.swidpush .pushtog.begendi { background: var(--s-bg); color: var(--brand); }

/* --- onay banneri (CMP) --- */
.cmpbanner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--s-bg); border-top: 1px solid var(--s-line);
  box-shadow: 0 -6px 24px rgba(0,0,0,.12);
  padding: 16px 20px; display: flex; gap: 16px; align-items: center;
  flex-wrap: wrap; justify-content: space-between; }
.cmpbanner[hidden] { display: none; }
.cmpbanner p { margin: 0; font-size: .82rem; color: var(--s-ink2); flex: 1; min-width: 240px; }
.cmpbanner a { color: var(--brand); text-decoration: underline; }
.cmpbanner-b { display: flex; gap: 10px; flex: none; }
.cmp-red { border: 1px solid var(--s-line); background: none; color: var(--s-ink2);
  border-radius: 6px; padding: 0 16px; min-height: 40px; font: inherit; font-size: .82rem;
  font-weight: 700; cursor: pointer; }
.cmp-red:hover { border-color: var(--s-ink4); color: var(--s-ink); }
.cmp-kabul { border: 1px solid var(--s-ink); background: var(--s-ink); color: var(--s-bg);
  border-radius: 6px; padding: 0 16px; min-height: 40px; font: inherit; font-size: .82rem;
  font-weight: 700; cursor: pointer; }
@media (max-width: 560px) {
  .cmpbanner { padding: 14px 16px; }
  .cmpbanner-b { width: 100%; }
  .cmp-red, .cmp-kabul { flex: 1; }
}

/* --- push karsilama modali --- */
.pushmodal { border: 0; border-radius: 14px; padding: 0; width: min(420px, calc(100% - 32px));
  background: var(--s-bg); color: var(--s-ink); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.pushmodal::backdrop { background: rgba(8,14,14,.55); backdrop-filter: blur(2px); }
.pushmodal-ic { padding: 30px 26px 26px; text-align: center; }
.pushmodal-ic svg { color: var(--brand); margin-bottom: 12px; }
.pushmodal-ic h2 { font-size: 1.2rem; margin-bottom: 8px; }
.pushmodal-ic p { font-size: .87rem; color: var(--s-ink3); line-height: 1.55; margin: 0 0 22px; }
.pushmodal-b { display: flex; gap: 10px; }
.pushmodal-red { flex: 1; border: 1px solid var(--s-line); background: none; color: var(--s-ink2);
  border-radius: 8px; padding: 0 14px; min-height: 44px; font: inherit; font-size: .85rem;
  font-weight: 700; cursor: pointer; }
.pushmodal-red:hover { border-color: var(--s-ink4); color: var(--s-ink); }
.pushmodal-kabul { flex: 1; border: 1px solid var(--brand); background: var(--brand); color: #fff;
  border-radius: 8px; padding: 0 14px; min-height: 44px; font: inherit; font-size: .85rem;
  font-weight: 700; cursor: pointer; }
.pushmodal-kabul:hover { opacity: .9; }
.pushmodal-kabul:disabled { opacity: .55; cursor: not-allowed; }

/* --- Sidebar bulten formu ------------------------------------------------
   Footer'daki `.foot-bulten`in sidebar karsiligi. AYNI IKI-SATIR YAPISI
   KORUNDU: Turnstile widget'i ~300px sabit genislikte ve esnemiyor; email +
   buton ile ayni `display:flex` satirinda oldugunda satiri tasiriyor. Sidebar
   footer'dan DAR oldugu icin bu risk burada daha da yuksek. */
/* Interaktif araclar blogu (partials/araclar.html). Kendi `.swid` cercevesini
   kullanir; burada yalnizca liste bicimi tanimli. */
.swidarac-l { list-style: none; margin: 10px 0 0; padding: 0; }
.swidarac-l li + li { margin-top: 8px; }
.swidarac-l a {
  display: block; font-size: .86rem; line-height: 1.4; font-weight: 600;
  color: var(--s-ink); text-decoration: none;
}
.swidarac-l a:hover { color: var(--brand); text-decoration: underline; }

.swidbulten { margin-top: 12px; }
.swidbulten-b { font-size: .82rem; color: var(--s-ink3); margin: 6px 0 10px; }
.swidbulten form { display: flex; flex-direction: column; gap: 10px; }
.swidbulten-satir { display: flex; gap: 8px; }
.swidbulten-satir input[type="email"] {
  flex: 1; min-width: 0; border: 1px solid var(--s-line); border-radius: 6px;
  padding: 8px 10px; font: inherit; font-size: .85rem;
  background: var(--s-bg); color: var(--s-ink);
}
.swidbulten-satir button {
  border: 0; border-radius: 6px; padding: 8px 14px; font: inherit;
  font-size: .85rem; font-weight: 700; cursor: pointer;
  background: var(--brand); color: #fff;
}
.swidbulten-satir button:hover { filter: brightness(1.06); }
.swidbulten-durum { font-size: .8rem; color: var(--s-ink3); margin: 8px 0 0; }
/* Widget `flexible`, 300px SABIT alt sinirla -- yan sutunun ic kutusu bundan
   dar (268px varsayilan, <=1040px'te 248px, bkz. abonelik.html'deki not).
   `max-width:100%` ile SIKISTIRMAK yanlis cozumdu: iframe'i kutunun genisligine
   zorlar, widget kirpilir/bozuk gorunur -- olculdu, UI acisindan basarisiz
   bulundu. Dogru cozum widget'i kartin dolgusunun disina TASIRMAK (bleed):
   -34px, en dar kesme noktasinda (248px) bile 248+68=316px >= 300px veriyor.
   Ayni teknik curio.madeda.com'da zaten kanitlanmis. */
.swidbulten .cf-turnstile { margin: 4px -34px 0; display: flex; justify-content: center; }
/* Dar sidebar'da email+buton yan yana sigmayabilir. */
@media (max-width: 420px) { .swidbulten-satir { flex-direction: column; } }

/* --- Icindekiler ---------------------------------------------------------
   `<details>` yerel disclosure: JS gerekmez, klavye ve ekran okuyucu bedava.
   Masaustunde acik, mobilde de acik ama katlanabilir -- mockup mobilde
   icindekileri komple gizliyordu; yazi uzunlugu medyani 12 baslik oldugu icin
   gezinme aracini kucuk ekranda kaldirmak en cok gerektigi yerde kaldirmakti. */
.toc { border: 1px solid var(--s-line); border-radius: 8px; padding: 12px 15px;
       margin: 22px 0; background: var(--s-tldr-bg); }
.toc > summary { cursor: pointer; font-size: .68rem; text-transform: uppercase;
                 letter-spacing: .15em; font-weight: 800; color: var(--s-ink3); }
.toc > summary::marker { color: var(--brand); }
.toc-l { margin: 10px 0 0; padding-left: 1.15em; display: grid; gap: 5px; }
.toc-l li { font-size: .88rem; }
.toc-l a { color: var(--s-ink2); text-decoration: none; }
.toc-l a:hover { color: var(--brand); text-decoration: underline; }
/* Capa hedefi sabit baslikin altinda kalmasin. */
.article-blocks [id^="s-"] { scroll-margin-top: 84px; }

/* ---- Interaktif araclar (templates/tools/, static/js/tools/) ----------------
   Arsivden gelen isaretleme Bootstrap 5 siniflari tasiyordu (card, row, col-*,
   badge bg-*) ama sitede Bootstrap YUKLU DEGIL -- bkz. docs/karar/bootstrap-govde.md.
   Bu blok o gorsel dili sitenin kendi belirtecleriyle yeniden kurar; hem acik
   hem koyu temada calisir cunku hepsi degiskenlerden okunuyor. */
.ab-interactive { margin: 28px 0; }
.ab-interactive > h2 { margin-bottom: 6px; }

.arac-ozet { color: var(--s-ink3); font-size: .92rem; line-height: 1.55; margin: 0 0 16px; }

.arac-panel {
  border: 1px solid var(--s-line); border-radius: 8px; padding: 14px 16px;
  background: var(--s-bg2); margin-bottom: 14px;
}
.arac-alan { display: block; font-size: .8rem; font-weight: 700; color: var(--s-ink2); }
.arac-alan input[type="range"] { display: block; width: 100%; margin-top: 10px; accent-color: var(--brand); }
.arac-deger { font-variant-numeric: tabular-nums; color: var(--brand); font-weight: 800; }

/* `auto-fit` + `minmax`: dar sidebar'da da, genis ana sutunda da tasmadan
   sarar. Sabit sutun sayisi mobilde tasiyordu. */
.arac-olcumler {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.arac-olcum {
  border: 1px solid var(--s-line); border-radius: 8px; padding: 10px 12px;
  background: var(--s-bg); text-align: center;
}
.arac-olcum-ad {
  display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; color: var(--s-ink4); margin-bottom: 4px;
}
/* `tabular-nums`: degerler saniyede birkac kez degisiyor; oransal rakamlarda
   kutu genisligi zipliyordu. */
.arac-olcum-deger {
  display: block; font-size: 1.05rem; font-weight: 800; color: var(--s-ink);
  font-variant-numeric: tabular-nums;
}
.arac-olcum-deger.arac-vurgu { color: var(--ad); }

.arac-rozet {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: var(--s-bg3); color: var(--s-ink3);
}
.arac-rozet-bekliyor { background: #FDF0DC; color: #8A5B12; }
.arac-rozet-tamam { background: var(--s-tldr-bg); color: var(--brand); }

/* Yukseklik BURADA, JS'te DEGIL: JS'ten yazilinca ilk boyamadan sonra yerlesiyor
   ve yerlesim kaymasi (CLS) uretiyordu. */
.arac-harita {
  height: 420px; border: 1px solid var(--s-line); border-radius: 8px;
  overflow: hidden; margin-bottom: 14px; background: var(--s-bg2);
}
@media (min-width: 768px) { .arac-harita { height: 520px; } }

.arac-yontem { border-top: 1px solid var(--s-line); padding-top: 12px; }
.arac-yontem summary { font-weight: 700; cursor: pointer; font-size: .9rem; }
.arac-yontem p { font-size: .86rem; line-height: 1.6; color: var(--s-ink3); margin: 10px 0 0; }
.arac-yontem code {
  background: var(--s-bg3); padding: 1px 5px; border-radius: 4px; font-size: .85em;
}
.arac-uyari { color: var(--ad); }

/* ---- Disaster Preparedness Quiz (templates/tools/disaster_preparedness_quiz.html) */
.quiz-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.quiz-nav button {
  border: 1px solid var(--s-line); border-radius: 6px; padding: 8px 16px;
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  background: var(--s-bg); color: var(--s-ink2);
}
#quiz-sonraki, #quiz-bitir { background: var(--brand); color: #fff; border-color: transparent; }
.quiz-nav button:hover { filter: brightness(1.05); }

.quiz-baslik { font-weight: 800; margin: 0 0 12px; }
.quiz-secenek {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--s-line);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 7px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.quiz-secenek.secili { background: var(--s-tldr-bg); border-color: var(--brand); font-weight: 700; }
.quiz-secenek input { accent-color: var(--brand); }
.quiz-secim-uyari { color: var(--ad); font-size: .85rem; margin: 8px 0 0; }
.quiz-kaynak { font-size: .75rem; color: var(--s-ink4); margin: 10px 0 0; }

.quiz-skor { font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; }
.quiz-mesaj { font-weight: 700; margin: 0 0 12px; }
.quiz-basari { color: var(--brand); }
.quiz-orta { color: var(--ad); }
.quiz-dusuk { color: #B3261E; }
.quiz-inceleme-baslik { font-weight: 700; margin: 14px 0 6px; }
.quiz-inceleme-liste { padding-left: 20px; font-size: .88rem; line-height: 1.6; color: var(--s-ink2); }
.quiz-inceleme-liste li { margin-bottom: 10px; }

/* ---- Ortak arac form/tablo bilesenleri (earthquake_explorer, realtime_*,
   earthquake_statistics, evacuation_routing_simulator) ------------------- */
.arac-form {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  border: 1px solid var(--s-line); border-radius: 8px; padding: 14px;
  background: var(--s-bg2); margin-bottom: 14px;
}
.arac-alan-grup { display: flex; flex-direction: column; gap: 4px; }
.arac-alan-grup label { font-size: .72rem; font-weight: 700; color: var(--s-ink3); }
.arac-alan-grup input, .arac-alan-grup select {
  border: 1px solid var(--s-line); border-radius: 6px; padding: 7px 9px;
  font: inherit; font-size: .85rem; background: var(--s-bg); color: var(--s-ink);
}
.arac-alan-kucuk input { width: 78px; }
.arac-form button[type="submit"] {
  border: 0; border-radius: 6px; padding: 9px 18px; font: inherit;
  font-size: .85rem; font-weight: 700; cursor: pointer;
  background: var(--brand); color: #fff; margin-left: auto;
}
.arac-form button[type="submit"]:hover { filter: brightness(1.05); }
.arac-form button[type="submit"]:disabled { opacity: .65; cursor: default; }

.arac-not {
  background: var(--s-bg2); border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0;
  padding: 10px 14px; font-size: .85rem; line-height: 1.55; color: var(--s-ink2); margin: 0 0 14px;
}

.arac-tablo-ust { text-align: right; margin-bottom: 8px; }
.arac-buton-ikincil {
  border: 1px solid var(--s-line); border-radius: 6px; padding: 7px 14px;
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  background: var(--s-bg); color: var(--s-ink2);
}
.arac-buton-ikincil:hover { border-color: var(--brand); color: var(--brand); }
/* DataTables genislikte tasabilir; kendi kaydirma kutusu -- sayfa govdesi
   hic yatay kaymamali. */
.arac-tablo-kapsayici { overflow-x: auto; margin-bottom: 14px; }
.arac-tablo { font-size: .82rem; }

.arac-secim { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 14px; }
.arac-secim label { font-size: .8rem; font-weight: 600; color: var(--s-ink2); }
.arac-secim select {
  border: 1px solid var(--s-line); border-radius: 6px; padding: 6px 9px;
  font: inherit; font-size: .85rem; margin-left: 6px; background: var(--s-bg); color: var(--s-ink);
}

/* ---- Kamu Sınavları Veri Bankası (templates/tools/public_exams_database.html) */
.exams-rozet {
  display: inline-block; font-size: .7rem; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; color: #fff;
}
.exams-rozet-soru { background: #B3261E; }
.exams-rozet-not { background: #1F6FB2; }
.exams-rozet-metin { background: var(--s-ink); }
.exams-rozet-ozet { background: #9A4A16; }
.exams-rozet-varsayilan { background: var(--s-ink4); }