/* 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 */
}
: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;
  --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;
  --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; }
/* Kardes-dil rozeti ("DE"/"EN"): .themetog kutusuyla ayni olcu, ama metin --
 * tek istisna, cunku burada bir bayrak/ikonun ANLATAMAYACAGI bilgi (hangi
 * dile gecilecegi) acikca yazi ile verilmeli. */
.langtog { text-decoration: none; font-size: .68rem; font-weight: 800;
  letter-spacing: .03em; }
.langtog:hover { color: var(--brand); border-color: var(--brand); }
.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); }
.navtog-input { position: absolute; opacity: 0; width: 0; height: 0; }
.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; }
  .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; }
  .catnav .in { display: none; flex-direction: column; padding: 0 0 6px; border-top: 1px solid var(--s-line); }
  .navtog-input:checked ~ .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-input:focus-visible ~ .navtog { 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; }
.banner .ov { padding: 22px; background: linear-gradient(transparent, rgba(8,14,14,.88));
  width: 100%; color: #fff; position: relative; }

/* GOTCHA (2026-08-12, kullanici canlida buldu -- BU DUZELTME KALICI, BIR
 * DAHA KAYBOLMASIN): kapak gorselinin BASKIN RENGI kategori/baslik rengine
 * yakin tondaysa (orn. kirmizimsi bir fotograf + kirmizi "History & War"
 * etiketi) alttaki degrade (.ov) TEK BASINA yetmiyor -- kutu kisaysa
 * degradenin UST kismi (etiketin durdugu yer) hala buyuk olcude saydam,
 * yani metin buyuk olcude HAM GORSEL uzerinde kaliyor. Gorselden BAGIMSIZ,
 * garantili kontrast icin: sabit koyu text-shadow halosu. Bu, gorselin
 * hangi renkte oldugundan TAMAMEN bagimsiz calisir (dominant-renk analizi
 * gerektirmez) -- .clabel kategori rengini KORUR ama artik her zaman okunur.
 * SILME/DEGISTIRME: bu kurali kaldirirsan ayni hata (kategori/baslik
 * gorselle ayni tonda -> okunmaz) sessizce geri doner. */
.banner .ov, .banner .ov .clabel { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.65); }

/* 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 h1 { font-size: clamp(1.25rem,3.6vw,2.25rem); line-height: 1.15; color: #fff;
  margin: 5px 0 6px; max-width: 26ch; }
.banner p { margin: 0; font-size: .86rem; color: #D6DEDC; max-width: 56ch; }
.banner .cmeta { color: #B9C4C1; margin-bottom: 0; }

/* 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 h1 { 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; }

.ggallery { margin: 24px 0; }
.ggallery .l { font-size: .62rem; text-transform: uppercase; letter-spacing: .15em;
  font-weight: 800; color: var(--s-ink4); margin-bottom: 10px; }
.ggallery .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ggallery figure { margin: 0; }
.ggallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 6px; display: block; }
.ggallery-bag { display: block; cursor: zoom-in; border-radius: 6px; }
.ggallery-bag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) { .ggallery .grid { grid-template-columns: 1fr; } .ggallery img { height: auto; } }

/* Lightbox. Konumlandirma icin sabit birimler DEGIL viewport kullaniliyor:
   gorsel her zaman ekrana sigsin, sayfa ASLA kaydirma cubugu uretmesin.

   `position:fixed; inset:0; margin:0` ACIKCA yaziliyor: `dialog:modal`
   tarayici varsayilani bunu zaten yapar AMA `dialog` (modal olmayan)
   varsayilani `position:absolute` + `margin:auto`'dur. showModal() yerine
   show() kullanan bir degisiklik, kutuyu sessizce sayfa akisindaki yerine
   (galerinin yanina) dusururdu. Niyeti varsayilana birakmiyoruz. */
.lbox { position: fixed; inset: 0; margin: 0; border: 0; padding: 0;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  background: transparent; overflow: hidden; }
.lbox::backdrop { background: rgba(0, 0, 0, .92); }
.lbox[open] { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.lbox-img { max-width: 94vw; max-height: 88vh; width: auto; height: auto;
  object-fit: contain; border-radius: 4px; }
.lbox-alt { color: #d6d6d6; font-size: .8rem; margin: 10px 16px 0; text-align: center;
  max-width: 80ch; }
.lbox-btn { position: fixed; background: rgba(0, 0, 0, .55); color: #fff; border: 0;
  cursor: pointer; line-height: 1; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; }
.lbox-btn:hover { background: rgba(0, 0, 0, .8); }
.lbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lbox-kapat { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 1.7rem; }
.lbox-onceki, .lbox-sonraki { top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; font-size: 2rem; }
.lbox-onceki { left: 12px; }
.lbox-sonraki { right: 12px; }
/* Tek gorselde gezinme dugmeleri anlamsiz (galeri.js `tek` sinifini koyar). */
.lbox.tek .lbox-onceki, .lbox.tek .lbox-sonraki { display: none; }
@media (max-width: 640px) {
  .lbox-img { max-width: 100vw; max-height: 80vh; }
  .lbox-onceki, .lbox-sonraki { width: 40px; height: 40px; font-size: 1.7rem; }
}

.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; }
.postcta-comment { margin: 18px 0 0; font-size: .88rem; color: var(--s-ink3); }
.postcta-comment a { color: var(--brand); font-weight: 700; text-decoration: none; }
.postcta-comment a:hover { text-decoration: underline; }

/* --- 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; }
.authordisclosure { font-size: .8rem; color: var(--s-ink4); line-height: 1.55;
  max-width: 68ch; margin: 20px 0 6px; padding: 12px 15px; background: var(--s-bg2);
  border-radius: 8px; }
.authordisclosure a { color: var(--brand); text-decoration: underline; }
.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); }

@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; }
}

/* --- bulten durum metni (paylasilan: sidebar bulten karti kullaniyor,
 * bkz. .swidbulten yukarida) --- */
.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; }

/* --- 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); }

/* --- sidebar bulten CTA karti --- */
/* `.swidpush` gibi bir DAVET ama dolgu DEGIL cizgi-vurgulu: hemen ustundeki
 * push kartiyla ayni katı renk tekrarlanirsa iki blok gorsel olarak
 * birbirine yapisir. Sadece kenarlik + baslik/ikon marka renginde,
 * buton dolgu -- tikla hedefi yine en belirgin element. */
.swidbulten { border-color: var(--brand); text-align: center; padding: 18px 15px; }
.swidbulten svg { color: var(--brand); margin-bottom: 6px; }
.swidbulten .h { border-bottom: 0; text-align: center; color: var(--brand); margin-bottom: 4px; }
.swidbulten p { font-size: .82rem; color: var(--s-ink3); line-height: 1.5; margin: 0 0 14px; }
.swidbulten form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.swidbulten input[type="email"] { width: 100%; 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; }
.swidbulten input[type="email"]:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.swidbulten button[type="submit"] { width: 100%; border: 1px solid var(--brand); background: var(--brand);
  color: #fff; border-radius: 50rem; padding: 0 16px; min-height: 40px; font: inherit;
  font-size: .84rem; font-weight: 700; cursor: pointer; }
.swidbulten button[type="submit"]:hover { opacity: .9; }
.swidbulten button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }
.swidbulten .foot-bulten-durum { text-align: left; }
/* Turnstile widget'i sabit ~300px genislikte ve ESNEMIYOR (bkz. yukarida
 * silinen footer notu, ayni gozlem burada da gecerli) -- sidebar karti
 * 300px'ten dar oldugu icin `.swid`'in 15px yan dolgusu widget'i karttan
 * tasiriyordu (canli ekran goruntusunde goruldu). Cozum widget'i KISALTMAK
 * DEGIL (esnemiyor, denendi bile olsa sonuc degismez) -- yalnizca bu
 * widget'i kartin dolgusunun disina "tasirip" (bleed) ona kartin tam
 * genisligini + biraz fazlasini vermek. */
.swidbulten .cf-turnstile { margin: 12px -20px 4px; display: flex; justify-content: center; }

/* --- 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; }