/* =====================================================================
   CILGINTEKNOLOJI - ana.css  (tema govdesinin tek stil dosyasi)

   KAYNAK
   Onaylanmis maket: tema-tasarim/yon-b.html, BIRINCI <style> blogu.
   Blok elle yeniden yazilmadi, bir betikle cikarilip birebir tasindi;
   olculer, kirilma noktalari ve renkler maketle ayni.

   NE CIKARILDI
   - Maket gorunumu (.maket cubugu, gorunum secici, cubugun footer'i
     ortmemesi icin konan .site-alt alt bosluklari) - tasarimin parcasi degil.
   - "body.kilit .maket" kurali - ayni sebeple.
   - Yazi govdesinin (.ct-makale) koyu tema blogu ve mobil tablo kurallari:
     onlar makale-koyu.css'in isi ve o dosya bu dosyadan SONRA yukleniyor;
     burada dursalar olu kural olurlardi. Ayni sekilde makale.css'te zaten
     bulunan h2::before duzeltmesi de tekrarlanmadi.
     .ct-makale bolumunde kalanlar YALNIZCA o iki dosyada karsiligi olmayan,
     sahibin "parlama yok" kurali geregi zorunlu duzeltmelerdir.

   NE EKLENDI
   - Easy Table of Contents (etkin eklenti) icin gercek isaretlemeye gore
     yazilmis kural takimi - maketteki taslagin yerine.
   - Dosyanin sonundaki "TEMAYA OZGU EKLER" bolumu: yazilmis sablonlarin
     urettigi ama makette karsiligi olmayan siniflar (.pnav, .yorumlar,
     .sayfalama, .bos, .side-sticky, .sayfa-guncel, .prose eklemeleri,
     .pm-guncel, .ct-kirinti, .ct-yazar, .ct-rozet, .ct-reklam, .nm ...).

   DEGISMEYENLER
   Jetonlar: acik tema :root'ta, koyu tema html[data-theme="dark"] altinda.
   prefers-color-scheme kullanilmiyor; tercihi inc/assets.php'deki on-boyama
   betigi data-theme olarak yaziyor. Yazi tipi yuklemesi fontlar.css'te;
   burada yalnizca --f degiskeni kullaniliyor.

   Dosya bilerek okunur birakildi (kucultme yok) - WordPress/LiteSpeed
   yayinda kendisi sikistiriyor.
   ===================================================================== */

/* =====================================================================
   CILGINTEKNOLOJI - YON B "PORTAL" (maket)
   Koyu oncelikli teknoloji haber portali; acik tema esit agirlikta.
   Dil: duz renk bloklari (lacivert / marka mavisi / camgobegi), kapsul
   (pill) etkilesim ogeleri, 12-18px kose yaricapli kart ve gorseller,
   Lucide cizgi ikonlari. Parlama, cam efekti, dekoratif gradyan YOK;
   gradyan yalnizca fotograf ustundeki islevsel karartma perdesi.
   ===================================================================== */

/* ---------- Jetonlar: ACIK (varsayilan) ---------- */
:root{
  --max:1320px; --gut:clamp(16px,3vw,32px); --rail:332px; --hdr-h:68px; --cat-h:0px;
  --st:clamp(52px,9vw,150px);
  /* Tek yazi tipi: Overpass (sahibin secimi, canli sitede de kullaniliyor). Govde (.ct-makale) kendi yiginini korur. */
  --f:"Overpass","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --navy:#0b2f4a; --blue:#0d6fb8; --cyan:#00d4ff; --ink:#04121f;
  --r-card:16px; --r-img:12px; --ease:cubic-bezier(.2,.7,.2,1);

  color-scheme:light;
  --bg:#ffffff; --bg-alt:#f0f4f8; --surface:#ffffff; --surface-2:#edf2f7;
  --line:#dfe6ed; --line-2:#c6d3df;
  --text:#0a1a2b; --text-2:#364a5e; --muted:#566b80;
  --link:#0a62a6; --accent:#0d6fb8; --accent-ink:#ffffff; --ic:#0d6fb8;
  --hdr:#ffffff; --focus:#0a62a6;
  --chip-bd:#bccddd; --chip-t:#0a4f86;
  --band:#0b2f4a; --band-2:#082439; --band-line:#0b2f4a; --trace:#9adcf8; --trace-o:.13;
  --ad-bg:#f5f7fa; --ad-bd:#a9bbcc; --ad-t:#4f6275;
  --img:#dde7f0; --foot:#0b2f4a;
}
/* ---------- Jetonlar: KOYU ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#07121e; --bg-alt:#0a1828; --surface:#0d1d2f; --surface-2:#132840;
  --line:#1a2f46; --line-2:#29445f;
  --text:#edf3f9; --text-2:#b9c9d8; --muted:#91a6ba;
  --link:#62c9ff; --accent:#00d4ff; --accent-ink:#04121f; --ic:#4fc9f5;
  --hdr:#07121e; --focus:#5fe3ff;
  --chip-bd:#2c4a6a; --chip-t:#a3e1ff;
  --band:#0a2741; --band-2:#061c30; --band-line:#15395a; --trace:#96d9f6; --trace-o:.12;
  --ad-bg:#0b1929; --ad-bd:#3a5674; --ad-t:#9aaec1;
  --img:#10233a; --foot:#040c16;
}

/* ---------- Temel ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + var(--yonetici-cubugu, 0px) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--f);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}
.on-dark :focus-visible,.site-alt :focus-visible{outline-color:#5fe3ff}
main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-90px;z-index:300;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 15px/1 var(--f)}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* Lucide ikonlari: tek cizgi dili */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}

/* Butun karti kaplayan baglanti */
.stretch::after{content:"";position:absolute;inset:0;z-index:2;border-radius:14px}
.stretch:focus-visible{outline:none}
.stretch:focus-visible::after{outline:2.5px solid var(--focus);outline-offset:3px}

/* ---------- Kapsul ogeler ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 10px;border-radius:999px;
  border:1px solid var(--chip-bd);color:var(--chip-t);font:600 12.5px/1 var(--f);letter-spacing:.01em;white-space:nowrap}
.chip .ic{width:15px;height:15px;stroke-width:1.9}
.chip-cyan{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.chip-inv{border-color:rgba(255,255,255,.62);color:#fff}
.chip-ink{border-color:rgba(4,18,31,.5);color:var(--ink)}
.chip-nav{border-color:rgba(255,255,255,.3);color:#c4ecff}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.date{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.2 var(--f);color:var(--muted);white-space:nowrap}
.date .ic{width:14px;height:14px}
.date-inv{color:#fff}

.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;
  border:1.5px solid transparent;font:700 14.5px/1 var(--f);white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.pbtn .ic{width:17px;height:17px}
.ic-arr{transition:transform .2s var(--ease)}
.pbtn:hover .ic-arr,.more:hover .ic-arr,.ctile:hover .ic-arr,.tile:hover .ic-arr,.alead:hover .ic-arr,.card:hover .ic-arr{transform:translateX(3px)}
.pbtn-solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pbtn-line{border-color:var(--line-2);color:var(--text)}
.pbtn-line:hover{border-color:var(--accent);color:var(--link)}
.pbtn-white{background:#fff;border-color:#fff;color:var(--navy)}
.pbtn-wide{display:flex;width:100%;margin-top:24px;min-height:52px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--hdr);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;gap:12px;height:var(--hdr-h)}
.brand{flex:none;display:flex;align-items:center;min-height:44px;margin-right:auto}
.brand img{display:block;height:36px;width:auto}
html[data-theme="dark"] .brand .logo-acik,
html:not([data-theme="dark"]) .brand .logo-koyu{display:none}

.nav{display:none}
.nav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav a{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:999px;
  font:600 14px/1 var(--f);color:var(--text-2);white-space:nowrap;transition:background-color .18s ease,color .18s ease}
.nav a .ic{width:16px;height:16px;color:var(--ic)}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a[aria-current]{background:var(--accent);color:var(--accent-ink)}
.nav a[aria-current] .ic{color:currentColor}

.acts{display:flex;align-items:center;gap:8px;flex:none}
.ibtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 12px;
  border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--text);font:600 14.5px/1 var(--f);
  transition:background-color .18s ease,border-color .18s ease}
.ibtn:hover,.ibtn[aria-expanded="true"]{background:var(--surface-2);border-color:var(--accent)}
.ibtn .lbl{display:none}
.menu-btn .i-x{display:none}
.menu-btn[aria-expanded="true"] .i-x{display:block}
.menu-btn[aria-expanded="true"] .i-m{display:none}

/* Tema anahtari: gunes / ay, kaydirmali kapsul */
.tgl{position:relative;display:inline-grid;grid-template-columns:32px 32px;align-items:center;height:44px;padding:0 5px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--muted)}
.tgl .ic{position:relative;z-index:1;justify-self:center;width:17px;height:17px;transition:color .2s ease}
.tgl-k{position:absolute;left:5px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:999px;background:var(--accent);
  transition:transform .22s var(--ease)}
.tgl:hover{border-color:var(--accent)}
html:not([data-theme="dark"]) .tgl .i-sun{color:var(--accent-ink)}
html[data-theme="dark"] .tgl-k{transform:translateX(32px)}
html[data-theme="dark"] .tgl .i-moon{color:var(--accent-ink)}

@media (min-width:1220px){
  .brand{margin-right:0}
  .nav{display:block;margin-inline:auto}
  .menu-btn,.catbar,.drw,.drw-perde{display:none!important}
}
/* Masaustu menunun ilk araligi dar: yedi kategori + arama + tema tek satira
   rahat sigsin diye haplar burada biraz daralir (1320 pxten sonra eski olcu). */
@media (min-width:1220px) and (max-width:1319px){
  .nav a{padding:0 8px;gap:5px}
}
@media (min-width:1440px){
  .nav a{padding:0 11px;gap:7px;font-size:15px}
  .nav a .ic{width:17px;height:17px}
  .search-btn{padding:0 17px 0 14px}
  .search-btn .lbl{display:inline}
}
@media (max-width:639px){
  :root{--hdr-h:60px}
  .brand img{height:29px}
  .acts{gap:6px}
}
@media (max-width:379px){.brand img{height:25px}}

/* Acilir paneller */
.panel{border-top:1px solid var(--line);background:var(--hdr);max-height:calc(100dvh - var(--hdr-h) - var(--cat-h));overflow:auto}
.sform{display:flex;gap:10px;max-width:780px;margin-inline:auto;padding-block:16px 18px}
.sfield{position:relative;flex:1;min-width:0}
.sfield .ic{position:absolute;left:18px;top:50%;margin-top:-9px;color:var(--muted);pointer-events:none}
.sfield input{width:100%;height:52px;padding:0 20px 0 48px;border-radius:999px;border:1.5px solid var(--line-2);
  background:var(--surface);color:var(--text);font:500 16px/1 var(--f);-webkit-appearance:none;appearance:none}
.sfield input::placeholder{color:var(--muted)}
.sfield input:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-color:var(--accent)}
.sform .pbtn{min-height:52px;padding:0 26px}
/* ---------- Kategori hap seridi (< 1220 px: tablet + mobil) ----------
   1240 px'in altinda yedi kategorinin hicbiri gorunmuyordu; serit basligin
   altinda, basliga yapisik duruyor ve yatay kayiyor. Adet YOK: yalniz ikon + ad. */
.catbar{display:none;border-top:1px solid var(--line);background:var(--hdr)}
.catbar-l{display:flex;align-items:center;gap:8px;list-style:none;margin:0;
  padding-block:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  /* Centikli telefonlarda yatay modda ilk/son hap centigin altinda kalmasin */
  padding-inline:calc(var(--gut) + env(safe-area-inset-left,0px)) calc(var(--gut) + env(safe-area-inset-right,0px));
  scroll-snap-type:x proximity;
  scroll-padding-inline:calc(var(--gut) + env(safe-area-inset-left,0px)) calc(var(--gut) + env(safe-area-inset-right,0px));
  scrollbar-width:none;-ms-overflow-style:none;--fl:0px;--fr:0px;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 var(--fl),#000 calc(100% - var(--fr)),rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 var(--fl),#000 calc(100% - var(--fr)),rgba(0,0,0,0) 100%)}
.catbar-l::-webkit-scrollbar{display:none}
.catbar-l li{flex:none;scroll-snap-align:start}
.catbar a{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px 0 12px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);
  font:600 14px/1 var(--f);white-space:nowrap;scroll-margin-inline:26px;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
/* Gorsel yukseklik 40 px, dokunma hedefi 44 px */
.catbar a::before{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}
.catbar a .ic{width:17px;height:17px;color:var(--ic)}
.catbar a:hover{border-color:var(--accent);color:var(--text)}
.catbar a[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.catbar a[aria-current] .ic{color:currentColor}
@media (max-width:1219px){
  :root{--cat-h:57px}
  .catbar{display:block}
  html{scroll-padding-top:calc(var(--hdr-h) + var(--cat-h) + 16px)}
}
/* Telefonda serit YOK (sahibin karari, 29 Eyl 2026): kategorilerin hepsi
   hamburger cekmecesinde zaten var, tekrar edip dikey yer kaplamasin.
   --cat-h 0: yapiskan kenar ve capa kaydirma payi seridi hesaba katmasin. */
@media (max-width:639px){
  :root{--cat-h:0px}
  .catbar{display:none}
  html{scroll-padding-top:calc(var(--hdr-h) + var(--yonetici-cubugu, 0px) + 16px)}
}

/* ---------- Dil anahtari (inc/dil.php) ----------
   Sahibin istegi: tema anahtari gibi. Geometri .tgl ile BIREBIR: 44 px kapsul,
   iki 32 px yuva, kayan hap; hap gecerli dilin bayraginin altinda.
   >=640 px ust cubukta (.acts). Telefonda ust cubukta yer yok (375 px'te
   17 px bos alan olculdu); orada dil secimi yalniz cekmecede.
   1220-1319 px'te masaustu menusunun haplari 8 px'ten 6 px'e daralir. */
.bayrak{display:block;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(4,18,31,.16)}
html[data-theme="dark"] .bayrak{box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.dil-tgl{position:relative;display:inline-grid;grid-template-columns:32px 32px;align-items:center;height:44px;padding:0 5px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2)}
.dil-tgl-k{position:absolute;left:5px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:999px;background:var(--accent);
  transition:transform .22s var(--ease)}
.dil-tgl--en .dil-tgl-k{transform:translateX(32px)}
/* Tiklaninca hap once kayar (tema.js), sonra sayfa degisir */
.dil-tgl.kay .dil-tgl-k{transform:translateX(32px)}
.dil-tgl--en.kay .dil-tgl-k{transform:translateX(0)}
.dil-tgl-b{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:44px;border-radius:999px}
.dil-tgl-b .bayrak{width:20px;height:15px;opacity:.55;transition:opacity .18s ease}
.dil-tgl-b[aria-current] .bayrak,.dil-tgl-b:hover .bayrak,.dil-tgl-b:focus-visible .bayrak{opacity:1}
.dil-tgl:hover{border-color:var(--accent)}
.dil-tgl-b:focus-visible{outline-offset:-2px}
@media (min-width:1220px) and (max-width:1319px){
  /* Yalniz anahtar basildiginda: bolum kapaliyken Turkce menu aynen kalsin */
  .hdr:has(.dil-tgl--ust) .nav a{padding:0 6px}
}
@media (max-width:639px){
  .dil-tgl--ust{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dil-tgl-k{transition:none}
}

/* ---------- Hamburger cekmecesi (sagdan tam boy panel) ---------- */
.drw-perde{position:fixed;inset:0;z-index:90;background:rgba(3,12,22,.62);opacity:0;
  overscroll-behavior:contain;touch-action:none;transition:opacity .2s ease}
.drw-perde.acik{opacity:1}
.drw{position:fixed;top:0;right:0;z-index:100;display:flex;flex-direction:column;
  width:min(90vw,376px);height:100dvh;background:var(--hdr);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .22s var(--ease)}
.drw.acik{transform:translateX(0)}
.drw-in{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
          calc(20px + env(safe-area-inset-bottom)) 16px}
.drw-ust{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-bottom:10px}
.drw-ust b{font:800 16px/1 var(--f);letter-spacing:-.01em}
.drw-h{margin:0 0 10px;padding-left:6px;font:700 12.5px/1 var(--f);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.drw-l{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:6px}
.drw-l--tek{margin-bottom:18px}
.drw-l a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font:600 15.5px/1.2 var(--f);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.drw-l a .ic{width:19px;height:19px;color:var(--ic)}
.drw-l a:hover{border-color:var(--accent)}
.drw-l a[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.drw-l a[aria-current] .ic{color:currentColor}
.drw-l--dil{grid-template-columns:1fr 1fr}
.drw-l--dil .bayrak{width:22px;height:17px}
/* Kurumsal: tek kartta gruplu liste; satir basinda yuvarlak ikon zemini, sonda ok.
   flex:none SART: .drw-in dikey flex kutu; overflow:hidden olan oge orada
   icerigine gore degil kalan yere gore kuculup satirlari kesiyordu. */
.drw-kur{flex:none;list-style:none;margin:0 0 22px;padding:0;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);overflow:hidden}
.drw-kur li+li{border-top:1px solid var(--line)}
.drw-kur a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px 0 10px;
  font:600 15px/1.2 var(--f);color:var(--text);transition:background-color .18s ease,color .18s ease}
.drw-kur a:focus-visible{outline-offset:-3px}
.drw-kur-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:999px;
  background:var(--surface-2);color:var(--ic);transition:background-color .18s ease,color .18s ease}
.drw-kur-ic .ic{width:17px;height:17px}
.drw-kur-ad{flex:1;min-width:0}
.drw-kur .drw-kur-ok{width:16px;height:16px;color:var(--muted);transition:transform .2s var(--ease)}
.drw-kur a:hover{background:var(--surface-2);color:var(--link)}
.drw-kur a:hover .drw-kur-ic,.drw-kur a[aria-current] .drw-kur-ic{background:var(--accent);color:var(--accent-ink)}
.drw-kur a:hover .drw-kur-ok{transform:translateX(3px)}
.drw-kur a[aria-current]{color:var(--link)}
.drw-kur:last-child{margin-bottom:0}
body.kilit{overflow:hidden;overscroll-behavior:contain}
@media (prefers-reduced-motion:reduce){
  .drw,.drw-perde{transition:none}
}

/* ---------- Bolum basliklari ---------- */
.sh{display:flex;align-items:center;gap:12px;min-height:44px;margin:0 0 18px}
.sh h2{margin:0;font:800 clamp(23px,2.1vw,30px)/1.1 var(--f);letter-spacing:-.022em;white-space:nowrap}
.sh-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:34px;border-radius:999px;
  border:1.5px solid var(--line-2);color:var(--ic)}
.sh-ic .ic{width:19px;height:19px}
.sh-n{font:600 13.5px/1 var(--f);color:var(--muted);white-space:nowrap}
.sh-rule{flex:1 1 24px;min-width:16px;height:2px;border-radius:2px;background:var(--line)}
.more{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 16px;border-radius:999px;border:1.5px solid var(--line-2);
  font:700 13.5px/1 var(--f);color:var(--text);white-space:nowrap;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.more .ic{width:16px;height:16px}
.more:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rh{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:800 20px/1.15 var(--f);letter-spacing:-.015em}
.rh .ic{width:20px;height:20px;color:var(--ic)}
@media (max-width:639px){
  .sh{gap:10px;margin-bottom:12px}
  .sh-rule{display:none}
  .sh-n{display:none}
  .more{margin-left:auto;height:44px;flex:none}
  .sh-ic{width:44px;height:32px}
  .sh h2{white-space:normal;font-size:22px;line-height:1.15}
  .crail .sh .more{display:none}
}

/* ---------- Ana sayfa: manset bandi ---------- */
.band{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding-block:24px 36px;
  /* (c) tek tonlu, cok hafif koyulasma - ayni lacivert ailesi */
  background:linear-gradient(180deg,var(--band) 0,var(--band-2) 100%);
  /* (e) alt kenarda tek 1 px camgobegi cizgi */
  border-bottom:1px solid var(--cyan)}
.band>.wrap{position:relative;z-index:2}
/* (b)+(d) Marka izi: logodaki ampul + devre yolu dili. Duz cizgi, 45 derece dirsek,
   kare dugum. Parlama/bulaniklik/animasyon YOK; yalnizca dusuk opaklik. */
.band-dev,.band-marka{position:absolute;z-index:0;pointer-events:none;color:var(--trace);
  fill:none;stroke:currentColor;stroke-linecap:square;stroke-linejoin:miter}
/* Cizimler bandin tamamini kaplar: height:100% + viewBox 1240 px derinliginde
   ve "slice" ile kirpiliyor - boylece olculen en uzun bantta da (768 pxde
   1225 px) alt kosede duz lacivert serit kalmiyor; olcek 1'de kaldigi icin
   45 derece dirsekler ve cizgi kalinligi bozulmuyor. */
.band-dev{top:0;height:100%;width:560px;stroke-width:1.5;opacity:var(--trace-o)}
.band-dev-l{left:0}
.band-dev-r{right:0}
/* Marka izi: bandin sag ust bosluguna oturur, sag cizimde bu kose bos birakildi */
.band-marka{top:-6px;right:-14px;width:230px;height:284px;stroke-width:1.6;
  opacity:calc(var(--trace-o) + .02)}
@media (max-width:1179px){
  /* Bu genisliklerin altinda bandin saginda gercek bos alan yok: iki cizim
     ust uste binip icerigin arkasini yogunlastiriyordu. Sag kompozisyon ve
     marka izi kapanir, sol kompozisyon tek basina calisir. */
  .band-dev-r,.band-marka{display:none}
}
@media (max-width:639px){
  /* 375 px'te kalabaliklastirmak yerine sadelestir */
  .band-dev-l{width:430px;opacity:calc(var(--trace-o) * .85)}
}
@media (min-width:1600px){
  /* (a) genis ekranda manset nefes alsin: olu kenar boslugu daralir.
     Kap genisligi sayfanin tamami icin ayni olcude buyur - manset, iki
     kolonlu govde, raylar ve altbilgi tek sol kenari paylasir. */
  :root{--max:clamp(1400px,88vw,1520px)}
}
.band-head{margin:0 0 26px}
.kick{display:inline-flex;align-items:center;gap:7px;height:30px;margin:0 0 12px;padding:0 14px 0 11px;border-radius:999px;
  border:1.5px solid var(--cyan);color:var(--cyan);font:700 12.5px/1 var(--f);letter-spacing:.08em;text-transform:uppercase}
.kick .ic{width:15px;height:15px}
.band h1{margin:0;font:800 clamp(30px,3.4vw,48px)/1.02 var(--f);letter-spacing:-.03em;text-wrap:balance}
.bstats{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.bstats li{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.26);color:#dbe8f3;font:600 13.5px/1 var(--f);white-space:nowrap}
.bstats .ic{width:16px;height:16px;color:var(--cyan)}

.mosaic{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
/* Fotograf karolari: metin, tek tonlu islevsel karartma perdesi uzerinde */
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:var(--r-card);background:#123a5a;color:#fff;min-height:0}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .24s var(--ease)}
/* Perde metin blogunun kendisinde: baslik kac satir olursa olsun cip/tarih satiri en az ~.74 opak zeminde kalir
   (karo yuksekligine bagli perde, acik renkli kapak fotografinda tarihi 1,8-3,4:1'e dusuruyordu). */
.tile-b{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:calc(clamp(16px,2vw,30px) + 48px) clamp(16px,2vw,30px) clamp(16px,2vw,30px);
  background:linear-gradient(0deg,rgba(3,12,22,.93) 0,rgba(3,12,22,.76) calc(100% - 64px),rgba(3,12,22,0) 100%)}
.tile-t{margin:0;font:800 clamp(19px,1.6vw,24px)/1.16 var(--f);letter-spacing:-.018em;text-wrap:balance}
.t-lead .tile-t{font-size:clamp(27px,2.9vw,44px);line-height:1.1;letter-spacing:-.028em;max-width:21ch}
.t-wide .tile-t{text-wrap:pretty;max-width:36ch}
.tile-x{margin:0;max-width:56ch;color:#d9e5f0;font-size:16.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-lead .pbtn{margin-top:4px}
.tile:hover>img{transform:scale(1.04)}
.tile:hover .tile-t,.blk:hover .blk-t,.alead:hover .alead-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.tile:hover .tile-t{text-decoration-color:var(--cyan)}
.tile .stretch:focus-visible::after,.blk .stretch:focus-visible::after,.alead .stretch:focus-visible::after{outline-color:#fff;outline-offset:-5px;border-radius:var(--r-card)}
/* :has destekleyen tarayicida odak halkasi karonun DISINDA (fotografin acik kosesinde kaybolmaz) */
@supports selector(:has(*)){
  .tile:has(.stretch:focus-visible),.blk:has(.stretch:focus-visible){outline:2.5px solid #5fe3ff;outline-offset:3px}
  .alead:has(.stretch:focus-visible){outline:2.5px solid var(--focus);outline-offset:3px}
  .tile .stretch:focus-visible::after,.blk .stretch:focus-visible::after,.alead .stretch:focus-visible::after{outline:none}
}

/* Duz renk bloklari */
.blk{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-card)}
.blk-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#123a5a}
.blk-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .24s var(--ease)}
.blk:hover .blk-img img{transform:scale(1.04)}
.blk-b{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 18px 18px}
.blk-t{margin:0;font:700 18px/1.24 var(--f);letter-spacing:-.012em;text-wrap:pretty}
.blk-b .date{margin-top:auto}
.blk-blue{background:var(--blue);color:#fff}
.blk-blue .date{color:#fff}
.blk-cyan{background:var(--cyan);color:var(--ink)}
.blk-cyan .date{color:var(--navy)}
.blk-cyan .stretch:focus-visible::after{outline-color:var(--ink)}

@media (min-width:1024px){
  .mosaic{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:clamp(214px,17.5vw,256px) auto}
  .t-lead{grid-row:1/3;min-height:540px}
  .t-wide{grid-column:2/4}
}
@media (min-width:640px) and (max-width:1023px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-lead{grid-column:1/-1;aspect-ratio:16/9}
  .t-wide{grid-column:1/-1;aspect-ratio:21/9}
}
@media (max-width:639px){
  .band{padding-block:18px 24px}
  .band-head{margin-bottom:18px}
  .t-lead{aspect-ratio:4/5}
  .t-lead .tile-x{display:none}
  .t-wide{aspect-ratio:16/11}
  .blk{flex-direction:row;min-height:128px}
  .blk-img{flex:0 0 38%;aspect-ratio:auto}
  .blk-img img{position:absolute;inset:0}
  .blk-b{padding:12px 14px 14px;gap:8px}
  .blk-t{font-size:16px}
}

/* ---------- Iki kolon govde ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;padding-block:44px 12px}
@media (min-width:1100px){.cols{grid-template-columns:minmax(0,1fr) var(--rail);gap:clamp(40px,4vw,64px)}}

/* Yatay liste kartlari */
.rows{border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,clamp(128px,29%,250px)) minmax(0,1fr);gap:clamp(14px,2vw,26px);
  align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}
.row-img{overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-img);background:var(--img)}
.row-img img,.card-img img,.mini-img img,.alead-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .22s var(--ease)}
.row:hover .row-img img,.card:hover .card-img img,.mini li:hover .mini-img img,.alead:hover .alead-img img{transform:scale(1.04)}
.row-t{margin:10px 0 0;font:700 clamp(17px,1.5vw,21px)/1.25 var(--f);letter-spacing:-.014em;text-wrap:pretty;transition:color .18s ease}
.row-x{margin:8px 0 0;color:var(--text-2);font-size:15px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row:hover .row-t,.card:hover .card-t,.mini li:hover .t{color:var(--link)}
@media (max-width:639px){
  .row{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px 0}
  .row-x{display:none}
  .row-t{font-size:16px;margin-top:8px}
  .row .date{display:none}
}

/* ---------- Sag ray ---------- */
.rail{display:grid;gap:34px;align-content:start}
@media (min-width:700px) and (max-width:1099px){
  .rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .rail .ad{grid-column:1/-1}
}
.catlist{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.catlist a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 18px 0 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font:600 15px/1.2 var(--f);transition:border-color .18s ease,background-color .18s ease}
.catlist a .ic{width:19px;height:19px;color:var(--ic)}
.catlist a:hover{border-color:var(--accent)}
.catlist a[aria-current],.catlist a.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.catlist a[aria-current] .ic,.catlist a.on .ic{color:currentColor}

.top5{background:var(--band);color:#fff;border-radius:18px;padding:22px 20px 8px;border:1px solid var(--band-line)}
.top5 .rh{color:#fff}
.top5 .rh .ic{color:var(--cyan)}
.top5 ol{list-style:none;margin:0;padding:0}
.top5 li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:15px 0 16px;border-top:1px solid rgba(255,255,255,.14)}
.top5 .num{font:800 52px/.86 var(--f);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--cyan);text-align:center}
.top5 .t{display:block;margin-top:9px;font:700 15.5px/1.3 var(--f);color:#fff}
.top5 li:hover .t{text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:4px}
.top5 .stretch:focus-visible::after{outline-color:#5fe3ff;outline-offset:0}

/* ---------- Reklam alanlari (olcusu ayrilmis, CLS yok) ---------- */
.ad{display:flex;flex-direction:column;align-items:center;gap:8px}
.ad-l{display:inline-flex;align-items:center;height:22px;padding:0 11px;border-radius:999px;border:1px solid var(--ad-bd);
  font:600 11px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--ad-t)}
.ad-s{display:flex;align-items:center;justify-content:center;width:var(--aw,300px);max-width:100%;height:var(--ah,250px);
  border:1.5px dashed var(--ad-bd);border-radius:10px;background:var(--ad-bg);color:var(--ad-t);font:500 12px/1 var(--f);letter-spacing:.04em}
.ad-s .d-l{display:none}
@media (min-width:768px){.ad-lb .ad-s{--aw:728px;--ah:90px}.ad-lb .d-l{display:inline}.ad-lb .d-s{display:none}}
@media (min-width:1100px){.ad-half .ad-s{--ah:600px}.ad-half .d-l{display:inline}.ad-half .d-s{display:none}}
.adrow{padding-block:34px 38px}
/* Ray alta dustugunde (<1100px) ray reklami ile bolum arasi reklam art arda gelmesin;
   onun yerine telefon/tablette kategori raylarinin arasinda ikinci slot (.ad-mid) acilir.
   TEMADA: gizli slotta adsbygoogle.push() cagrilmaz (matchMedia ile kontrol) ya da slot hic basilmaz. */
@media (max-width:1099px){.ad-rail-home{display:none}}
.ad-mid{padding-bottom:44px}
@media (min-width:1100px){.ad-mid{display:none}}
.ad-post{max-width:860px;margin:44px auto 0}

/* ---------- Kategori raylari ---------- */
.rails{background:var(--bg-alt);border-top:1px solid var(--line);padding-block:46px 14px}
.crail{padding-bottom:44px}
.cgrid{display:grid;gap:26px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.card-img{overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-img);background:var(--img)}
.card-b{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.card-t{margin:0;font:700 17.5px/1.28 var(--f);letter-spacing:-.012em;text-wrap:pretty;transition:color .18s ease}
.card-x{margin:0;color:var(--text-2);font-size:14.5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-more{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font:700 13.5px/1 var(--f);color:var(--link)}
.card-more .ic{width:16px;height:16px}

/* Kategori kutusu: marka mavisi duz blok */
.ctile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:22px 22px 20px;border-radius:var(--r-card);background:var(--blue);color:#fff;min-height:100%}
.ctile .big-ic{width:40px;height:40px;stroke-width:1.6;margin-bottom:2px}
/* Ad kucuk etiket (ray basligi zaten adi tasiyor), buyuk satir kategorinin konusu */
.ctile-n{font:700 12.5px/1 var(--f);letter-spacing:.09em;text-transform:uppercase;color:#e7f3fd}
.ctile-t{font:800 clamp(22px,1.7vw,27px)/1.16 var(--f);letter-spacing:-.022em;text-wrap:balance}
.ctile .pbtn{margin-top:auto}
.ctile .pbtn{min-height:40px;padding:0 16px;font-size:13.5px}
.ctile:hover .pbtn{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.ctile:focus-visible{outline-offset:3px}
@media (min-width:640px){.crail-alt .ctile{order:-1}}
@media (max-width:639px){
  .cgrid{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
  .cgrid .card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .cgrid .card-t{font-size:15.5px}
  .ctile{order:9;flex-direction:row;align-items:center;gap:12px;min-height:60px;margin-top:14px;padding:8px 8px 8px 18px;border-radius:999px}
  .ctile .big-ic{width:24px;height:24px;stroke-width:1.85;margin-bottom:0}
  /* Telefonda hap satiri: kategori adi yeniden ana satir, konu cumlesi gizli */
  .ctile-n{font:800 19px/1.1 var(--f);letter-spacing:-.01em;text-transform:none;color:#fff}
  .ctile-t{display:none}
  .ctile .pbtn{margin-left:auto;margin-top:0;min-height:44px}
}

/* ---------- SEO bloklari ---------- */
.about{padding-block:52px 60px;border-top:1px solid var(--line)}
.about-grid{display:grid;gap:30px}
@media (min-width:960px){.about-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:44px;align-items:start}}
.about h2{margin:0 0 18px;font:800 clamp(22px,2vw,28px)/1.15 var(--f);letter-spacing:-.02em}
.bul{display:grid;gap:12px 26px;list-style:none;margin:0;padding:0}
@media (min-width:640px){.bul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bul li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;min-height:44px}
.bul .stretch::after{inset:-4px -6px;border-radius:14px}
.bul .sh-ic{width:46px;height:32px}
.bul .sh-ic .ic{width:18px;height:18px}
.bul p{margin:0}
.bul a{display:inline-block;font:700 15.5px/1.3 var(--f);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.bul li:hover a{color:var(--link);text-decoration-color:currentColor}
.bul p>span{display:block;margin-top:2px;color:var(--text-2);font-size:14.5px;line-height:1.45}
.howto{background:var(--blue);color:#fff;border-radius:18px;padding:26px 28px 28px}
.howto h2{color:#fff}
.howto p{margin:0 0 18px;font-size:15.5px;line-height:1.62;color:#fff}
.hsteps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.hsteps li{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.55);font:600 13.5px/1 var(--f)}
.hsteps .ic{width:16px;height:16px}

/* ---------- Kategori arsivi ---------- */
/* Ana sayfa bandiyla ayni tek tonlu zemin dili (desen yok, yalniz yuzey) */
.cband{background:linear-gradient(180deg,var(--band) 0,var(--band-2) 100%);color:#fff;
  padding-block:10px 26px;border-bottom:1px solid var(--band-line)}
.chead{display:grid;gap:18px 48px;margin-top:14px;align-items:end}
/* Baslik sutunu icerigi kadar genis (Mobil); uzun adlarda aciklamaya en az 320px birakir ve kendi icinde kirilir */
@media (min-width:960px){.chead{grid-template-columns:minmax(0,auto) minmax(320px,1fr)}}
.ctw{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);min-width:0}
.cicon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:clamp(56px,5.2vw,76px);height:clamp(40px,3.6vw,52px);
  border-radius:999px;border:2px solid var(--cyan);color:var(--cyan)}
.cicon .ic{width:clamp(20px,1.8vw,26px);height:clamp(20px,1.8vw,26px);stroke-width:1.75}
/* Kategori/arsiv H1: en fazla 56px (masaustu), ~34px (telefon) */
.ctitle{margin:0;min-width:0;font:800 clamp(34px,calc(2.2vw + 26px),56px)/1 var(--f);letter-spacing:-.022em;text-transform:uppercase;color:#fff;
  padding-top:.08em;text-wrap:balance;overflow-wrap:break-word}
.ctitle-q{text-transform:none;letter-spacing:-.025em}
@media (max-width:639px){.ctw{flex-wrap:wrap}}
.cinfo p{margin:0 0 14px;max-width:56ch;color:#d6e3ef;font-size:16.5px;line-height:1.55}
.csw{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.csw-l{margin-right:6px;font:700 12.5px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:#c4d6e6}
.csw a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  color:#e6f0f8;font:600 14px/1 var(--f);transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.csw a .ic{width:16px;height:16px;color:var(--cyan)}
.csw a:hover{background:#fff;border-color:#fff;color:var(--navy)}
.csw a:hover .ic{color:var(--blue)}
@media (max-width:639px){
  .csw a{height:44px}
  .csw-l{flex-basis:100%;margin-bottom:2px}
}
/* Dokunmatik her genislikte 44px hedef (640-1023 tablet araligi dahil) */
@media (pointer:coarse){
  .csw a{height:auto;min-height:44px}
  .more{height:44px}
  .alt-logo{min-height:44px;align-items:center}
}
/* Arama/404 bandindaki arama kutusu */
.sform-band{max-width:640px;margin:22px 0 0;padding:0}
.sform-band .sfield input{background:#fff;border-color:#fff;color:#0a1a2b}
.sform-band .sfield input::placeholder,.sform-band .sfield .ic{color:#566b80}
.sform-band .sfield input:focus-visible{outline-color:#5fe3ff;border-color:#fff}
.solo{padding-block:44px 60px}

.afeed{container-type:inline-size;min-width:0}
.agrid{display:grid;gap:30px 22px;grid-template-columns:minmax(0,1fr);grid-auto-flow:row dense}
.alead{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-card);background:var(--blue);color:#fff}
.alead-img{position:relative;overflow:hidden;aspect-ratio:16/9;background:#123a5a}
.alead-b{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 24px 24px}
.alead-t{margin:0;font:800 clamp(24px,2.4vw,32px)/1.1 var(--f);letter-spacing:-.024em;text-wrap:balance}
.alead-x{margin:0;font-size:15.5px;line-height:1.55;color:#fff;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.alead .pbtn{margin-top:auto}
.alead:hover .pbtn{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.ad-feed{grid-column:1/-1;padding-block:4px}
.ad-feed .ad-s{--aw:300px;--ah:250px}
@container (min-width:520px){
  .agrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alead{grid-column:1/-1;flex-direction:row}
  .alead-img{flex:0 0 55%;aspect-ratio:auto;min-height:320px}
  .alead-img img{position:absolute;inset:0}
  .agrid>.card:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:center}
}
@container (min-width:740px){
  .ad-feed .ad-s{--aw:728px;--ah:90px}
  .ad-feed .d-l{display:inline}
  .ad-feed .d-s{display:none}
}
@container (min-width:820px){
  .agrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .alead{grid-column:1/3;grid-row:1/3;flex-direction:column}
  .alead-img{flex:none;aspect-ratio:16/9;min-height:0}
  .alead-img img{position:static}
  .agrid>.card:last-child{grid-column:auto;display:flex;gap:12px}
}
@container (max-width:519px){
  .agrid{gap:0}
  .alead{margin-bottom:8px}
  .agrid .card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .agrid .card-t{font-size:16px}
  .agrid .card-x,.agrid .card-more{display:none}
  .agrid .ad-feed{padding-block:20px;border-bottom:1px solid var(--line)}
}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:44px}
.pg{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:48px;height:48px;padding:0 16px;border-radius:999px;
  border:1.5px solid var(--line-2);font:700 15px/1 var(--f);color:var(--text);transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.pg .ic{width:17px;height:17px}
a.pg:hover{border-color:var(--accent);color:var(--link)}
.pg[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pg-off{border-style:dashed;color:var(--muted);cursor:not-allowed}
/* Dar ekranda Onceki/Sonraki yalniz ok ikonlu hap (metin ekran okuyucuda kalir): sayfalama tek satirda */
@media (max-width:519px){
  .pg-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .pg{padding:0 14px}
}

/* ---------- Tekil yazi ---------- */
.phead{background:linear-gradient(180deg,var(--band) 0,var(--band-2) 100%);color:#fff;
  padding-block:10px calc(var(--st) + 30px)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
/*
 * justify-content:space-between ARTAN YERI BOSLUGA ITIYORDU: 1440px'de
 * sutunlar 860+300=1160, kap 1256 -> aradaki bosluk 96px'e cikiyor ve
 * gap degeri hic islemiyordu. Metin de 860px'lik sutunun icinde 760px
 * olarak ortalandigi icin yaziyla kenar cubugu arasi 146px'i buluyordu.
 * Artik: sutun metnin genisligi kadar, bosluk gercekten gap kadar,
 * ikili blok kabin ortasinda.
 */
@media (min-width:1100px){.pgrid{grid-template-columns:minmax(0,800px) var(--rail);justify-content:center;gap:clamp(36px,3.4vw,52px)}}
/* Yazi H1: en fazla 40px (masaustu), 28px (telefon); 860px kolonda uzun Turkce baslik <=3 satir */
.ptitle{margin:16px 0 14px;font:800 clamp(28px,calc(1.2vw + 23.5px),40px)/1.12 var(--f);letter-spacing:-.025em;text-wrap:balance}
.pdek{margin:0 0 22px;max-width:62ch;color:#d3e1ed;font-size:clamp(16.5px,1.35vw,19px);line-height:1.5}
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pm{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.26);
  color:#e3edf6;font:600 14px/1 var(--f);white-space:nowrap;transition:background-color .18s ease}
.pm .ic{width:16px;height:16px;color:var(--cyan)}
a.pm:hover{background:rgba(255,255,255,.12)}
.pm-plain{border-color:transparent;padding-inline:6px}
.pm-cat{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.pm-cat .ic{color:var(--ink)}
a.pm-cat:hover{background:#fff;border-color:#fff}
.pmain{padding-bottom:12px}
.pfig{margin:calc(-1 * var(--st)) 0 34px;overflow:hidden;border-radius:18px;background:var(--img)}
.pfig img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}
.pcol{min-width:0}
.pend{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:860px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--line)}
.pend-l{font:700 12.5px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chip-link{height:40px;padding:0 15px 0 12px;font-size:14px}
.chip-link:hover{border-color:var(--accent);color:var(--link)}
.pend-x{margin-left:auto}
.side{display:grid;gap:34px;align-content:start}
@media (min-width:1100px){.side{padding-top:28px}}
@media (min-width:700px) and (max-width:1099px){.side{grid-template-columns:repeat(2,minmax(0,1fr))}.side .ad{grid-column:1/-1}}
.mini{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mini li{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line)}
.mini-img{overflow:hidden;aspect-ratio:16/9;border-radius:10px;background:var(--img)}
.mini .chip{height:24px;padding:0 9px 0 8px;font-size:11.5px}
.mini .chip .ic{width:13px;height:13px}
.mini .t{display:block;margin-top:7px;font:700 14.5px/1.3 var(--f);transition:color .18s ease}
.related{margin-top:60px;padding-block:46px 56px;background:var(--bg-alt);border-top:1px solid var(--line)}
.rgrid{display:grid;gap:26px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.rgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Dokunmatik hedef 44px: kural yalniz genislige bagliyken 768-1099px
   tabletlerde .pm 36px, .chip-link 40px kaliyordu. "pointer:coarse" giris
   aygitindan tetikler; masaustu faresinde gorunum degismez. Bu kural .pm ve
   .chip-link TANIMLARINDAN SONRA durmali - medya sorgusu ozgulluk eklemiyor. */
@media (max-width:767px),(pointer:coarse){.pm{height:44px}.chip-link{height:44px}}
@media (max-width:639px){
  .pend-x{margin-left:0}
  .rgrid{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
  .rgrid .card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .rgrid .card-t{font-size:15.5px}
}

/* ---------- Yazi govdesi (.ct-makale): tema yalnizca sarar ----------
   Govdenin kendi bicimi makale.css + makale-koyu.css'te; O IKI DOSYANIN
   KURALLARI BURAYA KOPYALANMADI. Burada yalnizca onlarda karsiligi olmayan,
   sahibin "parlama yok / gradyan yazi yok" kurali geregi zorunlu duzeltmeler
   duruyor. Govdedeki <style> blogu bu dosyadan SONRA geldigi icin esit
   ozgullukte o kazanir; bu yuzden her kural "html" ile baslar. */

/* 1) Parlama/halo KALDIRILDI (iki temada da). Ogeler yerinde, yalnizca isik yok. */
html .ct-makale .fd-note .fd-dot,
html .ct-makale .fd-warn .fd-wdot{box-shadow:none}
html .ct-makale .fd-stage .fd-num{box-shadow:none}
html .ct-makale ul.fd-list li::before{box-shadow:none}
html .ct-makale .fd-cta::after{background:none}
/* Renkli (mavi tonlu) golgeler de bir tur isik: kaldirildi. Notr ve cok hafif golgeler (.04-.12) yazinin kendi stilinde kaldi. */
html .ct-makale .fd-stat,
html .ct-makale .fd-cta{box-shadow:none}
/* Degrade yazi (background-clip:text) yasak: istatistik rakami duz beyaz */
html .ct-makale .fd-stat .fd-big{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:#fff}
html .ct-makale .fd-stat .fd-small{opacity:1}
/* CTA: surekli kayan 4 duraklı degrade (fdshift) yerine duz lacivert; animasyon ve surekli yeniden boyama yok.
   Teal ucta beyaz metin 2,2:1'e dusuyordu; lacivertte ~13:1. */
html .ct-makale .fd-cta{background:#0b2f4a;background-size:auto;animation:none}
/* Adim numarasi: camgobegi-mavi degradede beyaz rakam 1,8-2,9:1 idi -> duz mavi 6,4:1 (iki temada da) */
html .ct-makale .fd-stage .fd-num{background:#0b62a3}

/* 4) Easy Table of Contents (eklenti, ETKIN): kutuyu .ct-makale'nin icine basar.
   Eklentinin kendi bicimi (gri zemin, 4px kose, disari tasan golge, display:table)
   maketin .fd-* diline cevrildi: jeton yuzeyi, 16px kose, camgobegi sol serit,
   hap dugme, PARLAMA YOK. Renkler jetonlardan geldigi icin tek kural takimi
   iki temayi da kapsiyor - ayri html[data-theme="dark"] blogu gerekmiyor.
   Ozgulluk: eklentinin en agir secicisi "div#ez-toc-container .x" (1,1,1) ve
   satir ici <style>'i bu dosyadan once ya da sonra gelebiliyor; bu yuzden her
   kural "html" onekiyle bir kademe yukari alindi (1,1,2). !important yalniz
   eklentinin ikonlara satir ici style yazdigi yerde - son care olarak.

   NOT (box-shadow:none): acik temada gecerli, eklentinin kendi 0 1px 1px
   golgesini siliyor. KOYU temada gecerli DEGIL - makale-koyu.css bu dosyadan
   sonra yukleniyor ve #ez-toc-container'i .fd-* kutulariyla ayni listeye
   alarak 1px ince ic halka veriyor. Bilerek oyle birakildi: koyu temada kutu
   boylece yanindaki .fd-note / .fd-card kutulariyla birebir ayni gorunuyor.
   Golge degil halka - sahibin "her seye golge" kuralina aykiri degil. */
html div#ez-toc-container,
html div#ez-toc-container.ez-toc-grey,
html div#ez-toc-container.ez-toc-white,
html div#ez-toc-container.ez-toc-light-blue{display:block;width:auto;max-width:100%;margin:26px 0;padding:18px 20px;
  border:1px solid var(--line);border-left:5px solid var(--cyan);border-radius:16px;
  background:var(--surface-2);color:var(--text);box-shadow:none}
html div#ez-toc-container .ez-toc-title-container{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:auto}
html div#ez-toc-container .ez-toc-title{display:inline-block;margin:0;font:800 15px/1.3 var(--f);letter-spacing:.01em;color:var(--text)}
html div#ez-toc-container .ez-toc-title-toggle{margin-left:auto;display:inline-flex}
/* Ac/kapa dugmesi: hap, 44px dokunma hedefi */
html div#ez-toc-container a.ez-toc-btn,
html div#ez-toc-container a.ez-toc-btn-default{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text-2);box-shadow:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
html div#ez-toc-container a.ez-toc-btn:hover{background:var(--surface-2);border-color:var(--accent);color:var(--text)}
html div#ez-toc-container a.ez-toc-btn:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}
/* Eklenti ikonlara style="fill:#999;color:#999" yaziyor; satir ici bildirimi
   yalnizca !important yenebilir (koyu temada #999 zeminle 2,4:1'de kaliyordu). */
html div#ez-toc-container a.ez-toc-btn svg{width:18px;height:18px;fill:currentColor!important;color:currentColor!important}
html div#ez-toc-container nav>ul,
html div#ez-toc-container ul.ez-toc-list{margin:12px 0 0;padding:0;list-style:none}
html div#ez-toc-container ul ul{margin:0 0 0 1.1em;padding:0}
html div#ez-toc-container li{margin:0;padding:0;line-height:1.5}
html div#ez-toc-container a{padding:10px 0;color:var(--link);font-weight:600;border-bottom:0;text-decoration:none}
html div#ez-toc-container a:visited{color:var(--link)}
html div#ez-toc-container a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
html div#ez-toc-container a:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:8px}
/* Numara basliktan once okunmasin: kucuk ve notr */
html div#ez-toc-container.ez-toc-counter nav ul li a::before{color:var(--muted);font-weight:600}

/* ---------- Footer (Yon A "Manset" alt bilgisi; iki temada da koyu zemin) ----------
   A'nin yapisi birebir korundu; renkler B'nin jetonlarina baglandi
   (--foot / --cyan / --navy / --line + B'nin koyu zemin metin tonlari).
   Kehribar vurgu TASINMADI: B'nin camgobegi vurgusu kullanildi. */
.site-alt{padding-top:clamp(56px,7vw,88px);padding-bottom:64px;background:var(--foot);color:#bfcedc}
html[data-theme="dark"] .site-alt{border-top:1px solid var(--line)}
.alt-ust{display:grid;gap:28px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.14)}
.alt-logo{display:inline-flex;border-radius:10px}
.alt-logo img{display:block;height:38px;width:auto}
.alt-slogan{margin:24px 0 0;font-weight:800;font-size:clamp(1.875rem,1.2rem + 1.6vw,2.5rem);line-height:1.06;letter-spacing:-.03em;color:#fff}
.alt-slogan em{font-style:normal;color:var(--cyan)}
.alt-izgara{display:grid;gap:40px;padding-block:44px}
@media (min-width:640px){.alt-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}.alt-izgara > :first-child{grid-column:1 / -1}}
@media (min-width:1024px){.alt-izgara{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}.alt-izgara > :first-child{grid-column:auto}}
.alt-izgara h2{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:800 12.5px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:#86e2ff}
.alt-izgara h2 .ic{width:16px;height:16px;color:var(--cyan)}
.alt-liste{list-style:none;margin:0;padding:0}
.alt-liste--kat{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));column-gap:24px}
.alt-liste a{display:flex;align-items:center;gap:10px;min-height:44px;color:#e4edf6;font:500 15px/1.3 var(--f);transition:color .18s ease}
.alt-liste a .ic{width:17px;height:17px;color:var(--cyan)}
.alt-liste a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:4px}
.alt-takip p{margin:0 0 16px;font-size:15px;line-height:1.55;color:#bfcedc}
.alt-takip .pbtn{min-height:46px}
.alt-takip .pbtn-white:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.alt-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:22px 28px;
  border-top:1px solid rgba(255,255,255,.14);font:500 13.5px/1.5 var(--f);color:#bfcedc}
.alt-alt p{margin:0}
/* Kenarlik .24 degil .4: hapin tek gorsel siniri bu, WCAG 1.4.11'in 3:1 esigi iki temada da tutsun
   (acik temada --foot #0b2f4a uzerinde 3,46:1; koyu temada #040c16 uzerinde 3,76:1). */
.basa-don{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.4);color:#e4edf6;font:600 13.5px/1 var(--f);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease}
/* Ayni Lucide yolu (-45 derece) duz yukari ok olarak okunur; capraz ok yan taraftaki
   X baglantisinda "disari acilir" anlamiyla ayirt edici kalir. */
.basa-don .ic{width:16px;height:16px;transform:rotate(-45deg)}
.basa-don:hover{background:#fff;border-color:#fff;color:var(--navy)}

/* ---------- Sabit sayfa (page.php): kenar cubuksuz okuma kolonu ---------- */
.prose{max-width:720px;font-size:17px;line-height:1.72}
.prose>h2{margin:38px 0 12px;font:800 clamp(22px,1.9vw,26px)/1.2 var(--f);letter-spacing:-.018em}
.prose>h2:first-child{margin-top:0}
.prose>p{margin:0 0 18px}
.prose>p a{color:var(--link);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose>p a:hover{text-decoration-color:currentColor}
.prose .bul{margin:4px 0 8px}
.nw{white-space:nowrap}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   TEMAYA OZGU EKLER - maketten GELMEYEN bolum
   Yazilmis sablonlarin (single, archive, page, search, comments, sidebar,
   template-tags) urettigi ama makette karsiligi olmayan isaretlemeler.
   Dil maketin kendi dili: ayni jetonlar, hap geometrisi (.chip / .pg / .pbtn),
   olculu kart koseleri, parlama / gradyan yazi / golge yok, iki temada AA.
   ===================================================================== */

/* WordPress cekirdeginin kendi urettigi gizli baslik sinifi (sayfalama
   basligi, arama etiketi). Makette yok; .sr-only ile ayni is. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Kirinti (ct_kirinti) ----------
   Rank Math kapaliyken tema kendi isaretlemesini basiyor: <nav class="ct-kirinti">
   + <span class="ct-kirinti__ayrac">. Gorunum maketteki .crumbs ile ayni
   (her ikisi de koyu bandin ustunde: .phead / .cband). Rank Math acikken
   gelen .separator da ayni ayraci kullanir. */
.ct-kirinti{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:0;font:500 13.5px/1.3 var(--f);color:#c4d6e6}
/* Rank Math ACIKKEN kendi <nav class="rank-math-breadcrumb"><p>...</p></nav>
   sarmalayicisini basiyor ve icerik o <p>'nin icinde kaliyor. Tarayicinin
   <p> kenar boslugu kirinti seridini 38 px yerine 65 px yapiyordu; son parca
   da haplarla ayni eksene oturmuyordu (olculdu). <p> satir duzenini devralir. */
.ct-kirinti .rank-math-breadcrumb{min-width:0}
.ct-kirinti p{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:0;min-width:0}
.ct-kirinti a{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 10px;border-radius:999px;
  color:#e2edf6;transition:background-color .18s ease}
.ct-kirinti a:hover{background:rgba(255,255,255,.1)}
.ct-kirinti a .ic{width:15px;height:15px;color:var(--cyan)}
.ct-kirinti__ayrac,.ct-kirinti .separator{padding-inline:2px;color:rgba(255,255,255,.4)}
.ct-kirinti [aria-current],.ct-kirinti .last{max-width:100%;padding-inline:8px;color:#fff;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (pointer:coarse){.ct-kirinti a{min-height:44px}}

/* ---------- Tekil yazi kunyesi ----------
   ct_yazar_html() ciplak bir <a class="ct-yazar"> basiyor; .pmeta icinde
   komsusu olan .pm haplariyla ayni olcude olmali. */
.ct-yazar{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.26);color:#e3edf6;font:600 14px/1 var(--f);white-space:nowrap;
  transition:background-color .18s ease,color .18s ease}
.ct-yazar:hover{background:rgba(255,255,255,.12);color:#fff}
/* "Guncellendi" rozeti: yayin tarihinden ayirt edilsin diye camgobegi kenar
   (koyu bant uzerinde #00d4ff ~10:1). .pm-plain'in seffaf kenarini ezer -
   ayni ozgullukte ama dosyada ondan sonra geldigi icin bu kural kazanir. */
.pm-guncel{padding:0 13px 0 10px;border-color:var(--cyan);color:#fff}
.pm-guncel .ic{color:var(--cyan)}
.ct-guncel time{white-space:nowrap}
@media (max-width:767px),(pointer:coarse){.ct-yazar{height:44px}}
/* Koyu bant icindeki baslik sutunu: .pgrid'in ilk hucresi, tasma korumali */
.ph-in{min-width:0}

/* ---------- Sablon iskeleti ----------
   Makette karsiligi olmayan ama her sayfada basilan uc kapsayici. */
/* <main id="icerik" class="ct-ana">: atlama baglantisinin hedefi.
   Odak halkasi maketteki main:focus kuraliyla zaten kapali; burada yalniz
   izgara hucresinde tasma korumasi var. */
.ct-ana{display:block;min-width:0}
/* Ana sayfa akis sutunu (.cols'un ilk hucresi) - arsivdeki .afeed'in esi. */
.feed{min-width:0}
/* .row'un metin blogu: makette isaretlemede vardi, kurali yoktu.
   Yaziya kapak gorseli konmamissa satir tek sutuna duser. */
.row-b{min-width:0}
.row-b:only-child{grid-column:1/-1}
/* Logo ayarlanmamissa marka adi yazi olarak cikar (yalniz yedek yol). */
.brand-ad{font:800 clamp(18px,2.2vw,22px)/1 var(--f);letter-spacing:-.022em;color:var(--text);white-space:nowrap}

/* ---------- Kategori rozeti (ct_kategori_rozeti) ----------
   Sablonlarda hazir bekleyen yardimci; .chip ile ayni hap. */
.ct-rozet{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;
  border:1px solid var(--chip-bd);color:var(--chip-t);font:600 12.5px/1 var(--f);white-space:nowrap;
  transition:border-color .18s ease,color .18s ease}
.ct-rozet:hover{border-color:var(--accent);color:var(--link)}

/* ---------- Onceki / sonraki yazi (single.php) ----------
   Kutular kart: olculu kose (--r-card). Ustteki "Onceki yazi" etiketi hap:
   maketteki .chip ile birebir ayni olcu ve renk.
   Yalniz bir yon varsa (ilk / son yazi) kutu ikinci sutuna gecer, boylece
   "Sonraki" her zaman sagda kalir. */
.pnav{display:grid;gap:12px;max-width:860px;margin:34px auto 0}
.pnav-l,.pnav-r{min-width:0}
.pnav a{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:var(--r-card);
  border:1.5px solid var(--line-2);background:var(--surface-2);
  transition:border-color .18s ease,background-color .18s ease}
.pnav a:hover{border-color:var(--accent)}
.pnav-e{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;height:28px;padding:0 12px 0 10px;
  border-radius:999px;border:1px solid var(--chip-bd);color:var(--chip-t);font:600 12.5px/1 var(--f);
  letter-spacing:.01em;white-space:nowrap}
.pnav-e .ic{width:15px;height:15px;stroke-width:1.9}
.pnav-t{font:700 16px/1.32 var(--f);letter-spacing:-.012em;color:var(--text);text-wrap:pretty;
  transition:color .18s ease}
.pnav a:hover .pnav-t{color:var(--link)}
@media (min-width:640px){
  .pnav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pnav-l{text-align:left}
  .pnav-r{text-align:right}
  .pnav-r .pnav-e{align-self:flex-end;padding:0 10px 0 12px}
  .pnav-r:only-child{grid-column:2}
}

/* ---------- Yorumlar (comments.php) ---------- */
.yorumlar{max-width:860px;margin:56px auto 0;padding-top:34px;border-top:1px solid var(--line)}
.yorum-liste{list-style:none;margin:0 0 34px;padding:0}
.yorum-liste ol,.yorum-liste ul{list-style:none;margin:0;padding:0}
.yorum-liste li{margin:0 0 14px}
.yorum-liste .children{margin-top:14px;padding-left:clamp(14px,3.5vw,38px);border-left:2px solid var(--line)}
.comment-body{position:relative;padding:18px 20px;border-radius:var(--r-card);border:1px solid var(--line);
  background:var(--surface-2)}
.bypostauthor>.comment-body{border-color:var(--accent)}
.comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.comment-author{display:flex;align-items:center;gap:10px;min-width:0;font:700 15px/1.2 var(--f);color:var(--text)}
.comment-author .avatar{flex:none;border-radius:999px}
.comment-author .fn{font-style:normal}
.comment-author .fn a{color:var(--text)}
/* "... diyor ki:" ekran okuyucuda kalsin, gorselde tekrar etmesin */
.comment-author .says{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.comment-metadata a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);font:500 13px/1.2 var(--f)}
.comment-metadata a:hover{color:var(--link)}
.comment-content{color:var(--text-2);font-size:15.5px;line-height:1.65}
.comment-content p{margin:0 0 12px}
.comment-content p:last-child{margin-bottom:0}
.comment-content a{color:var(--link);text-decoration:underline;text-decoration-color:var(--line-2);
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.comment-content a:hover{text-decoration-color:currentColor}
.comment-awaiting-moderation{display:block;margin:0 0 10px;color:var(--muted);font:600 13.5px/1.4 var(--f)}
.comment .reply{margin-top:12px}
.comment-reply-link{display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;
  border:1.5px solid var(--line-2);font:700 13.5px/1 var(--f);color:var(--text);
  transition:border-color .18s ease,color .18s ease}
.comment-reply-link:hover{border-color:var(--accent);color:var(--link)}
@media (pointer:coarse){.comment-reply-link{min-height:44px}}

/* Yorum formu */
.comment-respond{padding:24px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--bg-alt)}
.comment-reply-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 16px;
  font:800 20px/1.2 var(--f);letter-spacing:-.015em;color:var(--text)}
.comment-reply-title small{font:600 14px/1 var(--f)}
.comment-reply-title small a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.yorum-form{display:grid;gap:14px;margin:0}
.yorum-form p{margin:0}
.yorum-not,.comment-notes,.logged-in-as{color:var(--text-2);font-size:14.5px;line-height:1.55}
.yorum-not a,.comment-notes a,.logged-in-as a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.yorum-form label{display:block;margin-bottom:7px;font:700 13.5px/1 var(--f);letter-spacing:.02em;color:var(--text)}
.yorum-form input[type="text"],.yorum-form input[type="email"],.yorum-form input[type="url"],.yorum-form textarea{
  width:100%;max-width:100%;border:1.5px solid var(--line-2);background:var(--surface);color:var(--text);
  font:400 16px/1.5 var(--f);-webkit-appearance:none;appearance:none}
.yorum-form input[type="text"],.yorum-form input[type="email"],.yorum-form input[type="url"]{
  height:48px;padding:0 20px;border-radius:999px}
.yorum-form textarea{min-height:150px;padding:14px 18px;border-radius:14px;resize:vertical}
.yorum-form input::placeholder,.yorum-form textarea::placeholder{color:var(--muted)}
.yorum-form input:focus-visible,.yorum-form textarea:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-color:var(--accent)}
.comment-form-cookies-consent{display:flex;align-items:flex-start;gap:10px}
.comment-form-cookies-consent input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}
.comment-form-cookies-consent label{margin:0;font:500 14.5px/1.45 var(--f);color:var(--text-2)}
.yorum-form .form-submit{margin-top:4px}
/* comments.php gonder dugmesine "pbtn pbtn-white" veriyor; .pbtn-white koyu
   zemin icin (beyaz dolgu) - acik temada beyaz kutunun uzerinde kayboluyordu.
   Form icinde dolu vurgu rengine cevriliyor (iki temada da AA). */
.yorum-form .form-submit .pbtn-white{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (min-width:640px){
  .yorum-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yorum-form>.yorum-not,.yorum-form>.comment-notes,.yorum-form>.logged-in-as,
  .yorum-form>.yorum-alan,.yorum-form>.comment-form-comment,.yorum-form>.comment-form-url,
  .yorum-form>.comment-form-cookies-consent,.yorum-form>.form-submit{grid-column:1/-1}
}

/* ---------- Sayfalama (.sayfalama) ----------
   Iki yerden geliyor: wp_link_pages (page.php) ve the_comments_pagination /
   the_posts_pagination (comments.php, search.php). Gorunum maketteki .pager
   ile birebir ayni; burada WordPress'in kendi .page-numbers sinifina uyarlandi. */
.sayfalama{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:34px}
.sayfalama .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.sayfalama>span{font:700 12.5px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sayfalama a,.sayfalama .page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:48px;height:48px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-2);
  font:700 15px/1 var(--f);color:var(--text);
  transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.sayfalama .ic{width:17px;height:17px}
.sayfalama a:hover{border-color:var(--accent);color:var(--link)}
.sayfalama .current,.sayfalama [aria-current]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sayfalama .dots{min-width:0;padding:0 6px;border-color:transparent;color:var(--muted)}
/* ct_sayfalama() ucnokta kutusu: .pg'nin kenarligini tasimasin */
.pg-dots{min-width:0;padding:0 6px;border-color:transparent;color:var(--muted);cursor:default}

/* ---------- Sonuc yok ---------- */
.bos{margin:0;padding:24px 26px;border-radius:var(--r-card);border:1px solid var(--line);
  background:var(--bg-alt);color:var(--text-2);font-size:16px;line-height:1.6}

/* ---------- Kenar cubugunun son blogu yapiskan ----------
   Yapiskan baslik .site-header; icinde 1220 pxin altinda kategori seridi de
   var, bu yuzden ust bosluk --hdr-h + --cat-h (serit yokken --cat-h 0).
   Ray yalniz 1100 pxten sonra gercek bir sutun; altinda yapiskanlik anlamsiz. */
.side-sticky{min-width:0}
@media (min-width:1100px){
  .side-sticky{position:sticky;top:calc(var(--hdr-h) + var(--cat-h) + 16px)}
}

/* ---------- Sabit sayfada guncellenme tarihi ---------- */
.sayfa-guncel{max-width:720px;margin:34px 0 0;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font:500 14px/1.5 var(--f)}

/* ---------- .prose eklemeleri (page.php govdesi) ----------
   Makette .prose yalniz h2 / p / a / .bul tasiyordu; editorden h3, liste,
   alinti, tablo ve gorsel de gelebiliyor. Okuma genisligi maketteki 720 px
   (17 px Overpass'ta ~70 karakter) - degistirilmedi. */
.prose>h3{margin:26px 0 8px;font:800 19px/1.3 var(--f);letter-spacing:-.01em}
.prose>ul,.prose>ol{margin:0 0 18px;padding-left:24px}
.prose>ul{list-style:disc}
.prose>ol{list-style:decimal}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--accent)}
.prose li:last-child{margin-bottom:0}
.prose a{color:var(--link);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2);
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{font-weight:700;color:var(--text)}
.prose blockquote{margin:22px 0;padding:14px 20px;border-left:4px solid var(--cyan);
  border-radius:0 var(--r-card) var(--r-card) 0;background:var(--surface-2);color:var(--text-2)}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{border-radius:var(--r-img)}
.prose hr{margin:30px 0;border:0;border-top:1px solid var(--line)}
.prose figure{margin:24px 0}
.prose figcaption{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.5}
.prose table{width:100%;margin:0 0 20px;border-collapse:collapse;font-size:15.5px}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.prose thead th{background:var(--surface-2);font-weight:700;color:var(--text)}
/* Blok duzenleyicinin tablosu (kurumsal sayfalar, 0.2.4). Dar ekranda dort
   sutunu 330px'e sikistirmak kelimeleri harf ortasindan boluyordu ("Purpos-e");
   bunun yerine tablo 540px'in altina inmez ve kutusunun icinde yana kayar.
   Yalniz bosluksuz uzun adlar (comment_author_email_*) hucrede satir kirar.
   Cekirdegin has-fixed-layout'u (esit sutun + word-break) burada kullanilmiyor. */
.prose .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose .wp-block-table table{margin:0}
.prose .wp-block-table td{overflow-wrap:break-word}
@media (max-width:600px){.prose .wp-block-table table{min-width:540px}}
.prose>p:last-child,.prose>ul:last-child,.prose>ol:last-child{margin-bottom:0}

/* ---------- Kenar cubugu kategori satiri ----------
   Sayi span'i kaldirildigi icin (kategori basina yazi sayisi HICBIR YERDE
   gosterilmiyor) satirda artik yalniz ikon + ad var; ad uzun oldugunda hapi
   tasirmasin diye kirpiliyor. */
.catlist a .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Arama dugmesi ----------
   searchform.php her kopyada "pbtn pbtn-white" basiyor. Beyaz dolgu yalniz
   koyu bandin (.sform-band) uzerinde dogru; acik temada beyaz panelde dugme
   gorunmuyordu. Bant disinda dolu vurgu rengine cevriliyor. */
.sform:not(.sform-band) .pbtn-white{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- Reklam kabi (ct_reklam) ----------
   Makette reklam kutulari .ad / .ad-l / .ad-s ile ciziliydi (o kurallar
   yukarida duruyor); tema ise .ct-reklam basiyor - burada ayni dile baglandi.

   BOS KUTU SORUNU - secilen yontem: IKISI BIRDEN.
   1) Asil cozum kabin hic basilmamasi: ct_reklam() AdSense onayina kadar
      erken donuyor, yani <aside class="ct-reklam"> sayfaya hic girmiyor.
   2) Ama sablonlar kendi sarmalayicilarini basiyor (sidebar.php ve
      sidebar-ray.php'deki <div class="side-sticky">). O div bos kalinca
      .side / .rail izgarasinda bir satir + 34 px bosluk aciyordu.
      DIKKAT: :empty burada YETMIYOR - sablon div'in icine satir sonu
      biraktigi icin ici bos degil, bir bosluk metni var (olculdu:
      childNodes 1, :empty eslesmiyor). Bu yuzden asil kural
      :not(:has(*)) - "icinde hic OGE yok" demek; bosluk metni sorun olmuyor.
      :empty yine de duruyor: :has() desteklemeyen eski tarayicida ve
      sarmalayicinin gercekten bombos basildigi durumda calisir.
      Ayni koruma .ct-reklam'a da veriliyor ki reklam kodu bos donerse
      kabin kendisi yer kaplamasin. */
.side-sticky:empty,.ct-reklam:empty{display:none}
@supports selector(:has(*)){
  .side-sticky:not(:has(*)),.ct-reklam:not(:has(*)){display:none}
}
.ct-reklam{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.ct-reklam img,.ct-reklam ins,.ct-reklam iframe{max-width:100%}
.ct-reklam__etiket{display:inline-flex;align-items:center;height:22px;padding:0 11px;border-radius:999px;
  border:1px solid var(--ad-bd);font:600 11px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--ad-t)}
.ct-reklam--akis{grid-column:1/-1;padding-block:4px}
.ct-reklam--yazi-ici{max-width:860px;margin:44px auto 0}
.ct-reklam--ust{padding-block:18px}
/* Onizleme kutusu (yalniz CT_REKLAM_ONIZLEME tanimliyken; canlida basilmaz):
   onaydan sonraki olcu burada ayrilir, reklam gelince duzen kaymaz. */
.ct-reklam--onizleme{justify-content:center;width:var(--aw,300px);max-width:100%;min-height:var(--ah,250px);
  margin-inline:auto;border:1.5px dashed var(--ad-bd);border-radius:10px;background:var(--ad-bg);color:var(--ad-t)}
.ct-reklam__not{font:500 12px/1 var(--f);letter-spacing:.04em}
@media (min-width:768px){.ct-reklam--ust.ct-reklam--onizleme{--aw:728px;--ah:90px}}
@media (min-width:1100px){.ct-reklam--kenar.ct-reklam--onizleme{--ah:600px}}

/* ---------- Yonetici cubugu (oturum acik ziyaretci) ---------- */
/*
 * WordPress oturum acikken <html>'e 32px ust bosluk veriyor ve kendi cubugunu
 * position:fixed ile en uste sabitliyor. Yapiskan basligimizin top:0 degeri
 * bu cubugun ALTINA denk geliyor ve baslik cubugun arkasinda kayboluyor.
 * Cubugun yuksekligi >782px'de 32px, 601-782px'de 46px; <=600px'de cubuk
 * sabit degil (sayfayla birlikte kayiyor), o yuzden orada duzeltme yok.
 */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
  body.admin-bar .drw{top:46px}
}
@media screen and (max-width:600px){
  body.admin-bar .site-header{top:0}
  body.admin-bar .drw{top:0}
}

/* Sayfa ici baglantilarda yapiskan basligin altinda kalmamak icin ek pay */
body.admin-bar{--yonetici-cubugu:32px}
@media screen and (max-width:782px){body.admin-bar{--yonetici-cubugu:46px}}
@media screen and (max-width:600px){body.admin-bar{--yonetici-cubugu:0px}}

/* Sayfanin tepesindeki baglanti hedefi: gorunmez, yer kaplamaz */
.ct-tepe{display:block;height:0;overflow:hidden}

/* =====================================================================
   HAREKET 1 - "KENAR DEVRESI"        (ana.css'in EN SONUNA eklenir)
   ---------------------------------------------------------------------
   SIKAYET
   "blog icinde ... etraf hem bos hem duz bi hareketlilik yok."
   Yazi ve arsiv sayfalarinda icerik blogunun iki yanindaki olu alan
   (1440'ta ~130px, 1920'de ~370px) bombos ve tek tonlu duruyor.

   NE YAPIYOR - iki katman, tek fikir
   1) ZEMIN: o olu seritler --bg yerine --bg-alt'a doner ve icerige dogru
      solar. Tek tonlu, cok hafif bir koyulasma/acilma (manset bandinda
      zaten kullanilan dil). Boylece okuma sutunu "aydinlik bir serit",
      kenarlar "uzerinde durdugu zemin" olur - sayfa artik duz degil.
   2) IZ: o seritlerin uzerine ana sayfa mansetindeki DEVRE IZI motifi
      duser - ayni kelime dagarcigi: ince duz cizgi, 45 derece dirsek,
      dolu kare dugum, kucuk halka. Fark: mansette yatay akiyor, burada
      olugun boyuna dikey akiyor (dar ve uzun alana dogru yon).

   HAREKETLILIK NEREDEN GELIYOR (animasyon YOK)
   Iz katmani position:fixed, yani ekrana sabit. Ustunden gecen zeminli
   bolumler - .phead (lacivert bant), .related (--bg-alt), .site-alt
   (altbilgi) - onu ortuyor; cunku katman z-index:-1 ile blok zeminlerinin
   ALTINDA. Sonuc: yazinin basinda kenarlar sade lacivert; okumaya
   basladikca devre izi kenarlarda "aciliyor"; ilgili yazilara gelince
   sonuyor. Kaydirmaya bagli gercek bir degisim, tek bir @keyframes,
   transition ya da JS olmadan. prefers-reduced-motion altinda katman
   position:absolute'a donuyor: sayfayla birlikte akiyor, ekrana gore
   hicbir sey oynamiyor.

   HEDEFLENEN SINIFLAR - hepsi zaten var, YENI ISARETLEME YOK
   body.single / body.archive / body.search   - zemin seridi + oluk olcusu
   .ct-ana                                    - tek kapsayici; ::before sol
                                                oluk, ::after sag oluk
   Jetonlar: --max, --gut, --rail, --bg-alt, --line-2   (yeni hex yok)

   KURALLAR
   - Parlama/halo, cam, gradyan yazi, mor, bulanik leke, emoji, golge YOK.
   - Susleme metne 6-8px yaklasmadan biter (asagida olculer var), okumayi
     bolmez; 1240px altinda hic cizilmez (mobil ve tablet tamamen disarida).
   - Duzen kaymasi (CLS) yok: her iki katman da akisin disinda
     (fixed / canvas zemini), hicbir seyin olcusunu degistirmiyor.
   - Ek istek yok: SVG satir ici data URI (997 karakter), web font yok,
     JS yok, filter/blur yok. Katman compositor'de kaliyor.
   - Iki temada da calisir; renkler degiskenden gelir.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) AYAR NOKTALARI
   Izin rengi ve gucu tek yerden. Daha sessiz isteniyorsa --iz-o'yu dusur
   (.85 -> .6), daha belirgin icin .95'e cikar. Baska yere dokunmaya gerek
   yok. Renk --line-2: temanin kendi "ikinci cizgi" jetonu; kart ve dugme
   kenarlariyla ayni aile, bu yuzden hicbir ihtimalde parlak/neon durmaz.
   --------------------------------------------------------------------- */
:root{
  --iz:var(--line-2);
  --iz-o:.85;          /* acik tema: #c6d3df beyaz uzerinde zaten cok yumusak */
}
html[data-theme="dark"]{
  --iz-o:.8;           /* koyu tema: #29445f neredeyse siyah uzerinde, 1,7:1 - sessiz */
}

/* ---------------------------------------------------------------------
   2) OLUK GENISLIGI
   Iki sayfa tipinde icerik blogu FARKLI oturuyor, tek formul yetmez:

   TEKIL YAZI (.pgrid): 800px yazi + gap + 332px ray, justify-content:center
     ile kabin ortasinda. Blok genisligi ekrandan bagimsiz ~1181-1184px,
     yani yarim genisligi ~592px. Oluk = 50vw - 592px. 606px yazip 14px
     emniyet payi biraktim; ustelik 50vw kaydirma cubugunu da sayar, bu da
     olugu 6-8px daha kisaltir. Olculer: 1280'de 34px, 1440'ta 114px
     (gercek bosluk 122px), 1600'de 194px (gercek 200px), 1920'de 354px
     (gercek 360px). Her genislikte iz metinden en az 6px once bitiyor.
     1215px altinda deger sifira duser - kural kendi kendini kapatir.

   ARSIV / ARAMA (.cols): izgara kabin TAMAMINI doldurur, ortalama yok.
     Oluk = kabin disinda kalan + kabin ic boslugu = (100vw - --max)/2 + --gut.
     Yine 14px emniyet. 1440'ta 78px (gercek 84px), 1920'de 218px (gercek 224px).
     --max 1600px ustunde clamp'la buyudugu icin formul onu da takip eder.
   --------------------------------------------------------------------- */
@media (min-width:1240px){

  body.single{
    --ct-oluk:max(0px, calc(50vw - 606px));
  }
  body.archive,
  body.search{
    --ct-oluk:max(0px, calc((100vw - var(--max)) / 2 + var(--gut) - 14px));
  }

  /* -------------------------------------------------------------------
     3) ZEMIN SERIDI  (canvas zemini - hicbir oge eklemeden)
     body'nin zemini tuvale tasinir, yani viewport'un tamamini kaplar ve
     uzerindeki her zeminli bolum (.phead, .related, .site-alt) onu dogal
     olarak ortur. Iki yatay gradyan: biri soldan, biri sagdan.
     Renk --bg-alt; acik temada #f0f4f8 / beyaz, koyu temada #0a1828 /
     #07121e - sahibin izin verdigi "tek tonlu, cok hafif" fark.
     Serit son 52px'te soluyor ki okuma sutununa kese gibi bir kenar
     dayamasin. background-color'a DOKUNULMUYOR: ana.css'teki
     body{background:var(--bg)} yerinde kaliyor, yalniz -image ekleniyor.
     ------------------------------------------------------------------- */
  body.single,
  body.archive,
  body.search{
    background-image:
      /* sol serit: kenardan baslar, oluk bitmeden soner */
      linear-gradient(90deg,
        var(--bg-alt) 0,
        var(--bg-alt) calc(var(--ct-oluk) - 52px),
        transparent var(--ct-oluk)),
      /* sag serit: ayni sey, ters yon */
      linear-gradient(270deg,
        var(--bg-alt) 0,
        var(--bg-alt) calc(var(--ct-oluk) - 52px),
        transparent var(--ct-oluk));
    background-repeat:no-repeat;   /* tek kaplama; gradyanlar zaten alanin tamami kadar */
  }

  /* -------------------------------------------------------------------
     4) DEVRE IZI KATMANI
     .ct-ana her sablonda basilan tek <main>; iki sozde ogesi bos, temada
     hicbir kurali yok - bu yuzden guvenli.

     position:relative YALNIZCA asagidaki prefers-reduced-motion yedegi
     icin; z-index verilmedigi icin yigin baglami acmaz ve fixed katmani
     etkilemez (fixed'i yalniz transform/filter/contain baglar).
     ------------------------------------------------------------------- */
  .ct-ana{position:relative}

  body.single  .ct-ana::before, body.single  .ct-ana::after,
  body.archive .ct-ana::before, body.archive .ct-ana::after,
  body.search  .ct-ana::before, body.search  .ct-ana::after{
    content:"";
    position:fixed;                 /* ekrana sabit: kaydirirken bolumler ustunden gecer */
    top:0; bottom:0;
    width:var(--ct-oluk, 0px);      /* jeton yoksa 0 - hicbir sey cizilmez */
    z-index:-1;                     /* blok zeminlerinin ALTI: metnin onune asla gecemez */
    pointer-events:none;            /* tiklamayi yemesin (z-index zaten arkada, yine de) */
    opacity:var(--iz-o);

    /* RENK katmani: dikey solmali dolu sutun. Ust 150px (yapiskan baslik
       + biraz pay) ve alt 130px seffaf, boylece iz ekranin kenarlarina
       carpmadan, cizgi kesilmis gibi degil, sonerek biter. */
    background-image:linear-gradient(180deg,
      transparent 0,
      var(--iz) 150px,
      var(--iz) calc(100% - 130px),
      transparent 100%);

    /* SEKIL katmani: maske. Renk maskeden gelmez, yukaridaki degiskenden
       gelir - bu yuzden data URI'de tema rengi yok, yalnizca alfa icin
       "black" var. Motif: uc dikey iz, 45 derece dirsekler (l26 26 / l-22 22),
       dolu 6px kare dugumler, r=3 halkalar, iki kisa yatay cikis.
       Doseme 150x340 ve dikeyde kusursuz eklenir (her iz girdigi x'ten
       cikar), yani tekrar dikisi gorunmez. */
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='340'%20viewBox='0%200%20150%20340'%20fill='none'%20stroke='black'%20stroke-width='1.25'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cpath%20d='M26%200v70l26%2026v90l-26%2026v128'/%3E%3Cpath%20d='M78%200v132l24%2024v102l-24%2024v58'/%3E%3Cpath%20d='M124%200v44l-22%2022v54l22%2022v198'/%3E%3Cpath%20d='M124%20296h-30'/%3E%3Cpath%20d='M52%20122h20'/%3E%3Crect%20x='49'%20y='140'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Crect%20x='75'%20y='60'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Crect%20x='121'%20y='240'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Crect%20x='91'%20y='293'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Crect%20x='69'%20y='119'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='52'%20cy='96'%20r='3'/%3E%3Ccircle%20cx='102'%20cy='156'%20r='3'/%3E%3Ccircle%20cx='102'%20cy='120'%20r='3'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='340'%20viewBox='0%200%20150%20340'%20fill='none'%20stroke='black'%20stroke-width='1.25'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cpath%20d='M26%200v70l26%2026v90l-26%2026v128'/%3E%3Cpath%20d='M78%200v132l24%2024v102l-24%2024v58'/%3E%3Cpath%20d='M124%200v44l-22%2022v54l22%2022v198'/%3E%3Cpath%20d='M124%20296h-30'/%3E%3Cpath%20d='M52%20122h20'/%3E%3Crect%20x='49'%20y='140'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Crect%20x='75'%20y='60'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Crect%20x='121'%20y='240'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Crect%20x='91'%20y='293'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Crect%20x='69'%20y='119'%20width='6'%20height='6'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='52'%20cy='96'%20r='3'/%3E%3Ccircle%20cx='102'%20cy='156'%20r='3'/%3E%3Ccircle%20cx='102'%20cy='120'%20r='3'/%3E%3C/svg%3E");
    -webkit-mask-repeat:repeat;  mask-repeat:repeat;   /* dar olukta tek sutun, genis ekranda kendiliginden iki sutun */
    -webkit-mask-size:150px 340px; mask-size:150px 340px;  /* 1:1 olcek: cizgi 1,25px, dirsekler tam 45 derece */
  }

  /* Sol ve sag AYNA OLMASIN - birebir simetri "uretilmis" hissi veriyor.
     Ikisi de ayni dosemeyi kullanir, farkli kirpar. */
  body.single  .ct-ana::before,
  body.archive .ct-ana::before,
  body.search  .ct-ana::before{
    left:0;
    /* Sag kenardan 12px icerde hizalanir: en yogun izler metne bakan
       tarafta, seyrek kenar ekranin disina dogru. */
    -webkit-mask-position:right 12px top 0;
            mask-position:right 12px top 0;
  }
  body.single  .ct-ana::after,
  body.archive .ct-ana::after,
  body.search  .ct-ana::after{
    right:0;
    /* Soldan hizalanir ve dosemenin yarisi kadar (170px) yukari kaydirilir:
       ayni cizim, baska bir yerinden kesiliyor - iki kenar akraba ama esit degil. */
    -webkit-mask-position:left 10px top -170px;
            mask-position:left 10px top -170px;
    opacity:calc(var(--iz-o) * .82);   /* sag taraf bir tik daha sessiz: goz once sola alisir */
  }

  /* -------------------------------------------------------------------
     5) HAREKET AZALTMA
     Tek "hareket" kaynagi, katmanin ekrana sabit olmasi (icerik uzerinden
     kayar). Tercihi kapatan kullanicida katman sayfaya baglanir: ayni
     doku, ayni yogunluk, ama kaydirirken iceriğe gore hic oynamaz.
     ana.css'teki genel kural zaten transition/animation'i kapatiyor;
     burada da animasyon yok, sadece bagli oldugu duzlem degisiyor.
     ------------------------------------------------------------------- */
  @media (prefers-reduced-motion:reduce){
    body.single  .ct-ana::before, body.single  .ct-ana::after,
    body.archive .ct-ana::before, body.archive .ct-ana::after,
    body.search  .ct-ana::before, body.search  .ct-ana::after{
      position:absolute;   /* kapsayici .ct-ana (yukarida relative yapildi) */
      top:0; bottom:0;     /* <main>'in tam boyu */
    }
  }
}

/* ---------------------------------------------------------------------
   6) BASKI
   Sayfa yazdirilirken kenar susu ne ise yarar ne de murekkep hak eder.
   --------------------------------------------------------------------- */
@media print{
  body.single,body.archive,body.search{background-image:none}
  .ct-ana::before,.ct-ana::after{display:none}
}

/* ---------- Tekil yazi basliginin sag hucresi ---------- */
/*
 * .pgrid iki sutunlu; baslik bandinda ikinci hucre bostu ve genis ekranda
 * bandin sagi bombos duruyordu. Ana sayfadaki manset bandiyla AYNI dil:
 * logodan gelen ampul konturu, duz cizgi, parlama yok, icerigin arkasinda.
 * Bant iki temada da koyu lacivert oldugu icin (--band / --band-2) desen
 * acik temada da ayni sekilde calisir; renk --trace, opaklik --trace-o.
 */
/* .ph-sus suslemesi icin gerekli. DIKKAT: position verilince bant,
   kendisinden SONRA gelen konumlandirilmamis icerigin ustune boyaniyor
   ve .pfig'in negatif ust boslukla banda tasan kahraman gorselinin
   tepesini ortuyordu. .pmain'e z-index:1 verilerek sira geri alindi. */
.phead{position:relative;overflow:hidden}
.pmain{position:relative;z-index:1}
.ph-sus{position:relative;min-width:0;display:none}
.ph-marka{position:absolute;right:-26px;bottom:-34px;width:250px;height:auto;
  color:var(--trace);fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter;
  opacity:calc(var(--trace-o) + .04);pointer-events:none}

/* Izgara iki sutuna ancak 1100px'de geciyor; altinda ikinci hucre yok. */
@media (min-width:1100px){
  .ph-sus{display:block}
}
/* Cok genis ekranda isaret biraz buyur: bant da genisliyor. */
@media (min-width:1600px){
  .ph-marka{width:290px;right:-34px}
}
@media (prefers-reduced-motion:reduce){
  .ph-marka{transition:none}
}