/* ==========================================================================
   KAYSERİ HAYAT HABER — Ön Yüz
   Tasarım dili: "Bazalt ve Kar"
   --------------------------------------------------------------------------
   Kayseri Kalesi'nin siyah bazaltı ile Erciyes'in karı. Zemin saf beyaz ve
   serin; yapı bazalt siyahı; vurgu logonun kendi mavisi. Kırmızı YALNIZ
   aciliyet içindir (son dakika, canlı) — her yere dağıtılmaz, dağıtılırsa
   son dakika şeridi bağırmayı bırakır.

   Üç karar, üçü de bilinçli:
   1) Başlıklar SANS (dar, ağır), makale gövdesi SERIF. Haber sitelerinin
      alışkanlığı tersidir; okunurluk ölçüldüğünde ekranda dar sans başlık
      daha çok kelimeyi aynı satıra sığdırıyor, serif gövde uzun metinde
      daha az yoruyor.
   2) Gölge YOK. Ayrım boşluk ve ince çizgiyle yapılır; kart yığını kurmak
      yerine beyaz nefes alır.
   3) Köşeler keskin — fotoğraf ve kartta. Yalnız tıklanabilir çipler ve
      düğmeler tam yuvarlak. Keskin = haber, yuvarlak = eylem.
   ========================================================================== */

:root{
  /* Kar — zemin ve yüzeyler.
     Referans (malatyamuhabir.com) kart mantığı: SAYFA serin gri, KART beyaz.
     Kart gri zeminin üstünde yüzer; ayrımı çizgi değil zıtlık kurar. */
  --zemin:        #d7dde3;   /* sayfa zemini */
  --kagit:        #ffffff;   /* kart yüzeyi */
  --kagit-acik:   #f1f4f7;   /* ikincil yüzey */
  --kagit-koyu:   #e7ecf1;   /* üçüncül yüzey, görsel yer tutucu */

  /* Bazalt — metin ve koyu bölgeler (mavi-gri dökümlü siyah) */
  --murekkep:     #111820;
  --murekkep-2:   #2c3844;
  --murekkep-3:   #5a636e;
  --soluk:        #5d6b7a;
  --silik:        #8e9ba8;   /* soluktan da geri: üstveri, tarih */

  /* Vurgu — logonun mavisi. Yapıyı bu taşır: bağlantı, bölüm çizgisi,
     etkin sekme, odak halkası. Logodaki #009CE0 küçük puntoda yeterince
     koyu değil (WCAG AA'yı beyaz üstünde geçmiyor), metin için bir tık
     koyultuldu; dolgu olarak kullanıldığında ham logo mavisi kalır. */
  --vurgu:        #0078b4;   /* ölçüldü 13.10.2026: beyaz üstünde 4,83:1 */
  --vurgu-koyu:   #00648f;
  --vurgu-ham:    #009ce0;   /* logo mavisi — dolgu ve şeritlerde */
  --vurgu-sis:    #e8f4fb;   /* açık mavi yüzey */

  /* Acil — logonun kırmızısı. SADECE son dakika, canlı, hata. */
  --acil:         #e20814;
  --acil-koyu:    #b1050f;

  --altin:        #b8862f;
  --yesil:        #177245;

  /* Çizgiler — serin gri (kâğıt sarısı değil) */
  --tel:          #cbd4dc;
  --tel-koyu:     #b6c3d0;   /* referans --koyu-yazi */
  --tel-ters:     rgba(255,255,255,.13);

  /* Tipografi
     Archivo: değişken genişlik ekseni olan bir grotesk. Başlıkta genişliği
     daralt (wdth 88) ve ağırlığı yükselt — dar sütunda daha çok kelime.
     Source Serif 4: yalnız makale gövdesi. */
  --baslik: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --sans:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dar:    "Archivo Narrow", "Archivo", system-ui, sans-serif;
  --metin:  "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Köşe yarıçapı ve gölge — referanstan birebir.
     Keskin köşe matbaa diliydi; referans kart dilinde yumuşak köşe var.
     r-s: rozet ve küçük düğme · r: kart ve görsel · r-l: büyük kutu */
  --r-s: 8px;
  --r:   12px;
  --r-l: 18px;
  --golge: 0 1px 2px rgba(17,24,32,.05), 0 8px 24px -12px rgba(17,24,32,.18);
  --golge-yuksek: 0 20px 50px -20px rgba(17,24,32,.35);

  /* Referanstan: koyu yuzeylerdeki ince cizgi ve kap genisligi.
     Kap 1280 idi, referans 1200 kullaniyor; birebir nakilde onunki. */
  /* Referanstan gelen kurallarin istedigi degiskenler.
     --mono YEDEKSIZ kullaniliyor (font: kisayolunda); tanimsiz kalirsa
     o bildirim tamamen duser, o yuzden sart.
     sd-* son dakika seridinin renk ve olculeri; referansta panelden
     satir ici veriliyor, bizde paletten geliyor. */
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --acil-sis: #fbe4e4;
  /* Gri sayfa zemini uzerindeki soluk metin, beyaz kart uzerindekinden
     daha koyu olmali: --soluk gri zeminde 3,99:1, --murekkep-3 4,45:1,
     ikisi de AA esiginin altinda. Bu ton 4,63:1 veriyor. */
  --soluk-zemin: #54616e;
  --sdr: var(--acil);
  --sde: #ffffff;
  --sdz: var(--kagit);
  --sdy: var(--murekkep);
  --sdf: 15px;
  --sdw: 600;
  --kule-ust: 190px;
  --koyu-cizgi: #253240;
  --en: 1200px;

  --gecis: 200ms cubic-bezier(.2,.7,.3,1);
}

/* Başlık ailesinin genişlik ekseni. Değişken yazı tipi yüklenmezse
   font-variation-settings sessizce yok sayılır, tasarım bozulmaz. */
h1,h2,h3,h4,.baslik-dar{ font-variation-settings:"wdth" 92; }

/* ---------- temel ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--zemin);
  color:var(--murekkep);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
/* WebP icin <picture> sarmali eklendi; kutu uretmesin ki mevcut yerlesim
   (flex/grid olculeri, en-boy oranlari) hic degismesin. */
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.012em; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }
sup{ font-size:.5em; vertical-align:super; line-height:0; }

::selection{ background:var(--vurgu); color:#fff; }
:focus-visible{ outline:2px solid var(--vurgu); outline-offset:3px; }

.kap{ width:min(var(--en, 1200px), 100% - 40px); margin-inline:auto; }

.gizli-metin{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.simge-deposu{ display:none; }

.atla{
  position:fixed; top:-60px; left:16px; z-index:200;
  background:var(--murekkep); color:#fff; padding:10px 16px;
  font:600 13px/1 var(--dar); letter-spacing:.08em; text-transform:uppercase;
  transition:top var(--gecis);
}
.atla:focus{ top:12px; }

/* Kâğıt dokusu kaldırıldı: gazete kâğıdı taneciği krem zeminin parçasıydı,
   beyaz üstünde yalnız kirli bir gri sis bırakıyordu. Öğe de HTML'den
   silindi (inc/head.php) — boş kural bırakılmadı. */

/* simgeler */
.ik{
  width:1em; height:1em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.ik-buyuk{ width:1.6em; height:1.6em; stroke-width:1.4; }

/* Ortak: kategori etiketi.
   Çizgi + harf aralığı yerine DOLU SEKME. Bölüm adı haber sitesinde
   gerçek bir sınıflandırma; onu dekoratif bir "eyebrow" gibi değil,
   okunur bir rozet gibi basıyoruz. Rengi kategorinin kendi rengi
   (--kat-renk, şablon basar); yoksa vurgu mavisi. */
.etiket{
  display:inline-block;
  background:var(--kat-renk, var(--vurgu));
  color:#fff;
  padding:3px 8px 4px;
  font:700 10.5px/1 var(--dar);
  letter-spacing:.07em; text-transform:uppercase;
}
.etiket-duz{ margin-bottom:10px; }

/* Ortak: üst veri satırı (tarih · okunma).
   Ayıraç olarak orta nokta değil İNCE DİKEY ÇİZGİ kullanılıyor; sayfanın
   her yerindeki dikey çizgi düzeniyle aynı dili konuşsun diye. */
.ustveri{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font:500 12px/1 var(--dar);
  letter-spacing:.01em; color:var(--murekkep-3);
}
.ustveri .ik{ width:13px; height:13px; stroke-width:1.7; }
.ustveri i{ width:1px; height:11px; background:var(--tel-koyu); margin:0 2px; }

/* ==========================================================================
   ÜST ŞERİT
   ========================================================================== */
.serit{
  background:var(--murekkep);
  color:#b9b2a6;
  font:500 12px/1 var(--dar);
  letter-spacing:.02em;
}
.serit-ic{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px; }
.serit-sol{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.serit-oge{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.serit-oge .ik{ width:14px; height:14px; color:var(--altin); opacity:.9; }
.serit-oge b{ color:#f0ece3; font-weight:600; }
.serit-oge i{ font-style:normal; opacity:.35; margin:0 2px; }
.serit-sag{ display:flex; align-items:center; }
.serit-sag a{
  width:30px; height:36px; display:grid; place-items:center;
  color:#8f887c; transition:color var(--gecis), background var(--gecis);
}
.serit-sag a:hover{ color:#fff; background:var(--vurgu); }
.serit-sag .ik{ width:14px; height:14px; }

/* ==========================================================================
   KÜNYE (masthead)
   ========================================================================== */
.kunye{
  background:var(--kagit-acik);
  border-bottom:1px solid var(--tel);
}
.kunye-ic{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:34px;
  padding:22px 0 20px;
}
.marka{ display:flex; align-items:center; gap:16px; }
.marka-isaret{
  width:52px; height:52px; flex:none;
  fill:none; stroke:var(--vurgu); stroke-width:1.5; stroke-linecap:round;
  transition:transform 600ms cubic-bezier(.2,.7,.3,1);
}
.marka:hover .marka-isaret{ transform:rotate(60deg); }
.marka-ad{
  display:block;
  font-family:var(--baslik);
  font-weight:700;
  font-size:clamp(30px, 3.4vw, 44px);
  line-height:.95;
  letter-spacing:-.028em;
  color:var(--murekkep);
}
.marka-vurgu{ color:var(--vurgu); font-style:italic; }
.marka-alt{
  display:flex; align-items:center; gap:8px;
  margin-top:9px;
  font:600 10px/1 var(--dar);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--murekkep-3);
}
.marka-alt i{ width:20px; height:1px; background:var(--tel-koyu); }

/* ----------------------------------------------------------------------------
   REKLAM KUŞAĞI — sınıf adları neden "reklam" değil?
   ----------------------------------------------------------------------------
   Sınıf adı .reklam iken banner HİÇBİR ziyaretçide görünmüyordu. Sunucu doğru
   HTML gönderiyor, görsel HTTP 200 dönüyor, ama sayfada yok. Sebep: Kaspersky
   Anti-Banner sayfaya kendi engel listesini enjekte ediyor ve listede aynen
   ".reklam" seçicisi var -> display:none. Aynı seçici uBlock/AdGuard'ın Türkçe
   listelerinde de bulunuyor.

   Bu, engelleyicileri atlatma girişimi değil: burada gerçek bir reklam ağı ya
   da izleyici yok, yalnızca yayıncının kendi sattığı yerel banner var.
   Sınıflara işlevi değil YERLEŞİMİ anlatan yansız adlar veriyoruz ki
   engelleyiciler yanlış eşleşme yapmasın. Dosya adlarında da "banner",
   "reklam" ve "970x250" gibi ölçü kalıplarından kaçının; onlar da engelleniyor.
   ---------------------------------------------------------------------------- */
.kusak{
  display:grid; place-items:center;
  border:1px dashed var(--tel-koyu);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(0,0,0,.018) 10px 20px);
  color:var(--soluk);
}
/* Dolu bir reklamda kesikli çerçeve ve tarama deseni istemiyoruz; onlar boş
   alanı göstermek için. Görsel varsa kuşak temiz basılır.

   display:block ŞART — yalnızca kozmetik değil:
   Kuşağın boş hâli grid + place-items:center. Görsel varken de grid kalınca
   img bir grid öğesi oluyor ve genişliği İÇERİĞİNE göre ölçülüyor. Henüz
   yüklenmemiş bir görselin içeriği 0 olduğu için kutu 0 genişlikte kalıyor,
   sıfır alanlı görseli tarayıcı da yüklemiyor (loading="lazy") ve iş
   KİLİTLENİYOR: banner hiç görünmüyor. Canlıda tam olarak bu yaşandı.
   Blok düzeninde img width:100% ile kabı doldurur, kilitlenme olmaz. */
.kusak:has(img),
.kusak:has(iframe){ border:0; background:none; display:block; }
.kusak img{ display:block; width:100%; height:auto; }

/* Haber görseli ile haber metni arasındaki kuşak.
   Yazı sütunuyla aynı genişlikte durur ki metin akışını bölmesin. */
.yazi-kusak{
  margin:20px 0 4px;
  overflow:hidden;
}

/* Manşet üstü kuşak: son dakika şeridi ile manşet arası. Sayfa genişliğini
   boydan boya kullanır; yüksekliğini yüklenen banner'ın oranı belirler. */
.manset-ustu-kusak{
  margin:18px 0 0;
  overflow:hidden;
}
@media (max-width:700px){
  .manset-ustu-kusak{ margin:12px 0 0; }
}
.yazi-kusak .kusak{ width:100%; }
/* Kuşak, haber görseliyle AYNI GENİŞLİKTE durur; yüksekliği yüklenen
   banner'ın oranı belirler. Bir süre yükseklik sınırı denendi ama banner
   ortada küçük kalıyordu; doğru çözüm sınır koymak değil, doğru oranda
   görsel yüklemek. Panel, önerilen ölçüyü ve yüklenen görselin sayfada kaç
   piksel yer kaplayacağını yazıyor (bkz. panel/reklam.php). */
@media (max-width:700px){
  .yazi-kusak{ margin:14px 0 2px; }
}
.kusak span{
  display:flex; align-items:center; gap:10px;
  font:600 10px/1 var(--dar); letter-spacing:.22em; text-transform:uppercase;
}
.kusak i{ font-style:normal; opacity:.6; letter-spacing:.1em; }
.kusak-kunye{ height:74px; max-width:620px; justify-self:center; width:100%; }
.kusak-govde{ height:104px; margin:34px 0; }
.kusak-yan{ height:250px; }

.kunye-eylem{ display:flex; align-items:center; gap:12px; }
.ara{
  display:flex; align-items:center;
  border:1px solid var(--tel-koyu);
  background:var(--kagit);
  height:42px;
  transition:border-color var(--gecis);
}
.ara:focus-within{ border-color:var(--murekkep); }
.ara input{
  width:180px; height:100%; border:0; background:none; padding:0 12px;
  font-size:13.5px; color:var(--murekkep);
}
.ara input::placeholder{ color:var(--soluk); }
.ara input:focus{ outline:none; }
.ara button{
  width:42px; height:100%; display:grid; place-items:center;
  color:var(--murekkep-2);
}
.ara button:hover{ color:var(--vurgu); }
.ara .ik{ width:17px; height:17px; }

.dugme-egazete{
  display:inline-flex; align-items:center; gap:9px;
  height:42px; padding:0 18px;
  background:var(--murekkep); color:var(--kagit-acik);
  font:600 12px/1 var(--dar); letter-spacing:.13em; text-transform:uppercase;
  transition:background var(--gecis);
}
.dugme-egazete:hover{ background:var(--vurgu); }
.dugme-egazete .ik{ width:17px; height:17px; }

/* ==========================================================================
   MENÜ
   ========================================================================== */
.menu{
  background:var(--murekkep);
  position:sticky; top:0; z-index:120;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.menu-ic{ display:flex; align-items:center; gap:18px; min-height:48px; }
.menu-dugme{
  display:none; align-items:center; gap:8px;
  color:#fff; font:600 12px/1 var(--dar); letter-spacing:.14em;
}
.menu-dugme .ik{ width:20px; height:20px; }

.menu-liste{ display:flex; align-items:stretch; flex:1; min-width:0; }
.menu-liste > li{ display:flex; }
.menu-liste a,
.menu-liste > li > button{
  display:flex; align-items:center;
  padding:0 14px; height:48px;
  color:#cfc8ba;
  font:600 12.5px/1 var(--dar);
  letter-spacing:.11em; text-transform:uppercase;
  position:relative;
  transition:color var(--gecis);
}
.menu-liste a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:11px;
  height:2px; background:var(--vurgu);
  transform:scaleX(0); transform-origin:left; transition:transform var(--gecis);
}
.menu-liste a:hover,
.menu-liste > li > button:hover{ color:#fff; }
.menu-liste a:hover::after{ transform:scaleX(1); }
.menu-liste a.aktif{ color:#fff; }
.menu-liste a.aktif::after{ transform:scaleX(1); }

.menu-daha{ position:relative; }
.menu-daha > button::after{
  content:""; width:5px; height:5px; margin-left:8px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.menu-acilir{
  position:absolute; top:100%; left:0; min-width:210px;
  background:var(--murekkep-2);
  border-top:2px solid var(--vurgu);
  padding:6px 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all var(--gecis);
  z-index:5;
}
.menu-daha:hover .menu-acilir,
.menu-daha:focus-within .menu-acilir{ opacity:1; visibility:visible; transform:none; }
.menu-acilir a{ height:38px; padding:0 18px; text-transform:none; letter-spacing:.02em; font-size:13.5px; }
.menu-acilir a::after{ display:none; }
.menu-acilir a:hover{ background:rgba(255,255,255,.06); color:#fff; }
/* nabiz: son dakika noktasi ve sesli okuma gostergesi kullaniyor
   (.sd-nokta, .oa-ses.okuyor) */
@keyframes nabiz{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(226,8,20,.55); }
  70%{ opacity:.75; box-shadow:0 0 0 7px rgba(226,8,20,0); }
}

/* ==========================================================================
   SON DAKİKA
   ========================================================================== */
/* ---------------------------------------------------------------------------
   SON DAKİKA (sayfanın en üstü)
   Kayan şerit yerine tek tek geçiş: başlık okunacak kadar duruyor, okurun
   gözü sabit kalıyor. Solda etiket, ok tuşları; sağda "Tümü".
--------------------------------------------------------------------------- */
.sondakika{ background:var(--murekkep); color:#e8e2d6; }
.sondakika-ic{ display:flex; align-items:center; height:40px; gap:0; }
/* Son dakika şeridi sayfadaki TEK kırmızı yerdir. Vurgu mavisi yapıyı
   taşır; kırmızı yalnız "şimdi oluyor" demek için ayrıldı. */
.sondakika-etiket{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--acil); color:#fff;
  padding:0 15px; height:100%;
  font:700 11px/1 var(--dar); letter-spacing:.14em;
  white-space:nowrap;
}
.sd-nokta{ width:6px; height:6px; background:#fff; border-radius:50%; animation:nabiz 1.4s infinite; }

.sd-oklar{ display:flex; height:100%; flex:0 0 auto; }
.sd-oklar button{
  width:30px; height:100%; display:grid; place-items:center;
  color:#8f887c; transition:color var(--gecis), background var(--gecis);
}
.sd-oklar button:hover{ color:#fff; background:rgba(255,255,255,.07); }
.sd-oklar .ik{ width:13px; height:13px; }

.sd-akis{ flex:1; min-width:0; position:relative; height:100%; padding-left:14px; }
.sd-oge{
  position:absolute; inset:0; display:none; align-items:center; gap:12px;
  padding-left:14px; min-width:0;
  opacity:0; transition:opacity 260ms var(--gecis);
}
.sd-oge.acik{ display:flex; opacity:1; }
.sd-oge time{
  flex:0 0 auto; font:600 11px/1 var(--dar); letter-spacing:.08em; color:var(--vurgu);
}
.sd-oge span{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13.5px; color:#e8e2d6;
}
.sd-oge:hover span{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.sd-tumu{
  flex:0 0 auto; padding:0 15px; height:100%; display:inline-flex; align-items:center;
  border-left:1px solid rgba(255,255,255,.14);
  font:600 10.5px/1 var(--dar); letter-spacing:.14em; text-transform:uppercase;
  color:#8f887c; transition:color var(--gecis);
}
.sd-tumu:hover{ color:#fff; }

@media (max-width:640px){
  .sondakika-etiket{ padding:0 11px; font-size:10px; letter-spacing:.1em; }
  .sd-oklar{ display:none; }
  .sd-oge time{ display:none; }
  .sd-tumu{ padding:0 11px; }
}

/* ==========================================================================
   MANŞET
   ========================================================================== */
.manset{
  display:grid;
  grid-template-columns:minmax(0,1fr) 348px;
  gap:0 36px;
  padding:34px 0 40px;
}

/* align-self:start şart. `.manset` bir ızgara ve ızgara ögeleri varsayılan
   olarak satır yüksekliğine GERİLİR — yan sütundaki liste manşetten uzunsa
   `.vitrin` onun boyuna uzuyor, içindeki mutlak konumlu kumanda da
   fotoğrafın altındaki boşluğa düşüyordu (ölçüldü: vitrin 612px, fotoğraf
   496px). Beyaz zeminde beyaz oklar görünmediği için kumanda kaybolmuş
   gibi duruyordu. */
.vitrin{ position:relative; align-self:start; }
.vitrin-cerceve{ display:grid; }
.slayt{
  grid-area:1/1;
  opacity:0; visibility:hidden;
  transition:opacity 620ms ease, visibility 620ms;
}
.slayt.acik{ opacity:1; visibility:visible; }
/* MANŞET — sayfanın tek cesur yeri.
   --------------------------------------------------------------------------
   Önceki düzende başlık fotoğrafın altına, beyaz bir kutunun içine
   taşıyordu: kutu fotoğrafı kesiyor, manşet de kart yığınının bir parçası
   gibi duruyordu. Şimdi başlık FOTOĞRAFIN ÜSTÜNDE, tam genişlikte ve
   büyük; fotoğraf kesilmiyor, manşet sayfadaki başka hiçbir şeye
   benzemiyor. Geri kalan her şey sessiz kalsın diye bu tek yere
   yükleniyoruz. */
.slayt-gorsel{
  margin:0; overflow:hidden; background:var(--kagit-koyu);
  aspect-ratio:16/9;
  grid-area:1/1;
}
.slayt-gorsel img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 700ms cubic-bezier(.2,.7,.3,1);
}
.slayt:hover .slayt-gorsel img{ transform:scale(1.03); }

/* Okunurluk perdesi. Düz siyah bindirme fotoğrafın tamamını öldürüyor;
   alttan yukarı açılan perde yalnız yazının oturduğu bölgeyi karartır.
   İki duraklı değil üç duraklı: ortadaki durak olmadan geçiş fotoğrafın
   ortasında görünür bir bant bırakıyor. */
.slayt{ position:relative; }
.slayt-gorsel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(10,12,15,.92) 0%,
    rgba(10,12,15,.72) 22%,
    rgba(10,12,15,.18) 52%,
    rgba(10,12,15,0)   78%);
}
.slayt-yazi{
  position:absolute; inset:auto 0 0 0; z-index:2;
  margin:0; padding:0 clamp(18px,3vw,38px) clamp(20px,2.6vw,34px);
  background:none; border:0;
  color:#fff;
}
.slayt-yazi h1,
.slayt-yazi h2{
  font-family:var(--baslik);
  font-weight:700;
  font-variation-settings:"wdth" 86;
  font-size:clamp(25px, 3.5vw, 50px);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:12px 0 10px;
  max-width:24ch;            /* manşet başlığı iki-üç satırda dursun */
  text-wrap:balance;
}
.slayt-yazi h1 a,
.slayt-yazi h2 a{ color:#fff; }
.slayt-yazi h1 a:hover,
.slayt-yazi h2 a:hover{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
.slayt-yazi p{
  font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.82);
  max-width:56ch; margin-bottom:12px;
}
/* Kumanda yazının sağ alt köşesinde duruyor. Yalnız ALT SATIRLARA sağdan
   yer ayrılır — özet ve üst veri kumandanın hizasında. Başlığa ayrılmaz:
   kumanda başlığın hizasında değil ve başlığı daraltmak manşeti dört
   cılız satıra bölüyordu. */
@media (min-width:861px){
  .slayt-yazi p, .slayt-yazi .ustveri{
    padding-right:clamp(190px, 26%, 300px);
  }
}
.slayt-yazi .ustveri{ color:rgba(255,255,255,.72); }
.slayt-yazi .ustveri i{ background:rgba(255,255,255,.34); }
/* Fotoğrafın üstünde etiketin kendi rengi yetmez; koyu perdede beyaz
   kenarlıkla ayrılıyor. */
.slayt-yazi .etiket{ box-shadow:0 0 0 1px rgba(255,255,255,.22); }

/* Manşet kumandası sağ ÜSTTE duruyordu ve fotoğrafın en iyi yerini
   kapatıyordu. Sağ ALTA, yazının hizasına alındı: okur başlığı okurken
   eli zaten orada. Numara yerine çizgi — on tane iki haneli rakam
   fotoğrafın üstünde gereksiz bir tablo kuruyordu; çizgiler kaç slayt
   olduğunu ve kaçıncısında olduğunu aynı şekilde söylüyor. */
.vitrin-kontrol{
  position:absolute; right:clamp(18px,3vw,38px); bottom:clamp(20px,2.6vw,34px);
  z-index:4;
  display:flex; align-items:center; gap:14px;
}
.vitrin-ok{
  width:40px; height:40px; display:grid; place-items:center;
  color:#fff; border:1px solid rgba(255,255,255,.34); border-radius:999px;
  transition:background var(--gecis), border-color var(--gecis);
}
.vitrin-ok:hover{ background:#fff; color:var(--murekkep); border-color:#fff; }
.vitrin-ok .ik{ width:15px; height:15px; }

.vitrin-sayac{ display:flex; align-items:center; gap:6px; }
/* Dokunma hedefi 44px: görünen çizgi 3px ama düğmenin kendisi tam
   yükseklikte ve saydam (WCAG 2.5.8). */
.vitrin-sayac button{
  width:22px; height:44px; padding:0;
  display:grid; align-items:center;
  font-size:0;
  position:relative;
}
.vitrin-sayac button::before{
  content:""; display:block; height:3px; width:100%;
  background:rgba(255,255,255,.38);
  transition:background var(--gecis);
}
.vitrin-sayac button:hover::before{ background:rgba(255,255,255,.75); }
.vitrin-sayac button.acik::before{ background:var(--vurgu-ham); }

/* İlerleme çubuğu fotoğrafın ALT kenarında: manşetle altındaki içeriği
   ayıran çizginin ta kendisi olur, ayrıca bir eleman eklemez. */
.vitrin-ilerleme{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.18); z-index:3;
}
.vitrin-ilerleme span{ display:block; height:100%; width:0; background:var(--vurgu-ham); }

/* Son haberler listesi — manşetin yanındaki akış.
   Dikey çizgi manşeti listeden ayırır; sayfadaki tek ayırıcı dil bu. */
.gunun-listesi{ border-left:1px solid var(--tel); padding-left:30px; }
.liste-baslik{
  font-family:var(--baslik); font-weight:700; font-size:19px; line-height:1.1;
  letter-spacing:-.018em; color:var(--murekkep);
  padding-bottom:9px; border-bottom:3px solid var(--vurgu);
  margin-bottom:2px;
}
.siralama li + li{ border-top:1px solid var(--tel); }
.siralama a{
  display:block; padding:13px 0;
  border-left:3px solid transparent; padding-left:0;
  transition:border-color var(--gecis), padding-left var(--gecis);
}
/* Satır üstüne gelince sola ince bir çizgi büyür. Arka plan boyamak
   listeyi lekeli gösteriyordu; çizgi hangi satırda olduğunu daha net
   söylüyor ve beyazı kirletmiyor. */
.siralama a:hover{ border-left-color:var(--vurgu); padding-left:12px; }
.sira-yazi{ display:block; }
.sira-baslik{
  display:block;
  font-family:var(--baslik); font-weight:500; font-size:16.5px; line-height:1.28;
  letter-spacing:-.01em; color:var(--murekkep);
  transition:color var(--gecis);
}
.siralama a:hover .sira-baslik{ color:var(--vurgu); }
/* Kategori + zaman satırı. Büyük harf ve geniş harf aralığı bırakıldı:
   bu bir etiket değil, okunacak bir bilgi. Ayıraç yine ince dikey çizgi —
   sayfadaki bütün üst veri satırlarıyla aynı dil. */
.sira-kat{
  display:flex; align-items:center; gap:7px; margin-top:6px;
  font:500 12px/1 var(--dar); letter-spacing:.01em;
  color:var(--murekkep-3);
}
.sira-kat i{ width:1px; height:11px; background:var(--tel-koyu); }

/* ==========================================================================
   ÖNE ÇIKANLAR
   ========================================================================== */
.onecikan{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:2px solid var(--murekkep);
  border-bottom:1px solid var(--tel);
  padding:26px 0 28px;
}
.oc-kart + .oc-kart{ border-left:1px solid var(--tel); }
.oc-kart{ padding:0 22px; }
.oc-kart:first-child{ padding-left:0; }
.oc-kart:last-child{ padding-right:0; }
.oc-kart figure{
  margin:0 0 14px; overflow:hidden; aspect-ratio:3/2; background:var(--kagit-koyu);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.08);
}
.oc-kart img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) contrast(1.03);
  transition:transform 600ms var(--gecis), filter var(--gecis);
}
.oc-kart a:hover img{ transform:scale(1.04); filter:saturate(1) contrast(1.03); }
.oc-kart h3{
  font-family:var(--baslik); font-weight:600; font-size:18.5px; line-height:1.25;
  margin-bottom:10px;
  transition:color var(--gecis);
}
.oc-kart a:hover h3{ color:var(--vurgu); }

/* ==========================================================================
   GÖVDE
   ========================================================================== */
.govde{
  display:grid;
  grid-template-columns:minmax(0,1fr) 348px;
  gap:0 36px;
  padding:40px 0 10px;
  align-items:start;
}
.sutun-ana{ min-width:0; }
.yan{ border-left:1px solid var(--tel); padding-left:34px; min-width:0; }

/* Bölüm başlığı — "basamaklı çizgi".
   ------------------------------------------------------------------------
   Sayfanın imzası burada: satır boyunca KESİNTİSİZ tek bir taban çizgisi
   var; başlığın altında 3px ve renkli, geri kalanında 1px ve gri. Kopuk
   duran kısa bir vurgu çubuğu değil — çizgi başlıktan doğup satır boyunca
   inceliyor. Selçuklu taç kapılarının basamaklı silmesinden alındı ve
   bölüm ile içeriği arasında gerçek bir ayrım işi görüyor. */
.blok-baslik{
  display:flex; align-items:flex-end; gap:18px;
  margin-bottom:22px;
  border-bottom:1px solid var(--tel-koyu);
}
.blok-baslik h2{
  font-family:var(--baslik); font-weight:700; font-size:27px; line-height:1.05;
  letter-spacing:-.022em;
  padding-bottom:9px; margin-bottom:-1px;
  border-bottom:3px solid var(--kat-renk, var(--vurgu));
}
.blok-cizgi{ flex:1; }
/* "Tümü" — büyük harf + harf aralığı yerine düz cümle düzeni. Bağlantının
   kendisi zaten eylem; onu etiket gibi göstermek gerekmiyor. */
.blok-tumu{
  display:inline-flex; align-items:center; gap:5px;
  padding-bottom:10px;
  font:600 14px/1 var(--sans);
  color:var(--vurgu); transition:color var(--gecis);
}
.blok-tumu:hover{ color:var(--vurgu-koyu); text-decoration:underline; text-underline-offset:3px; }
.blok-tumu .ik{ width:14px; height:14px; }

.blok + .blok{ margin-top:44px; }

.blok-izgara{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:0 30px;
}
.blok-izgara.ters > .one-haber{ order:2; }
.blok-izgara.ters > .satir-liste{ order:1; padding:0 30px 0 0; border-left:0; border-right:1px solid var(--tel); }

.one-haber figure{
  margin:0 0 16px; overflow:hidden; aspect-ratio:3/2; background:var(--kagit-koyu);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.08);
}
.one-haber img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.03);
  transition:transform 700ms var(--gecis), filter 320ms var(--gecis);
}
.one-haber a:hover img{ transform:scale(1.03); }
.one-haber h3{
  font-family:var(--baslik); font-weight:600; font-size:25px; line-height:1.16;
  letter-spacing:-.018em; margin-bottom:10px;
  transition:color var(--gecis);
}
.one-haber a:hover h3{ color:var(--vurgu); }
.one-haber p{ font-size:14.5px; line-height:1.62; color:var(--murekkep-3); margin-bottom:12px; }

.satir-liste{ padding-left:30px; border-left:1px solid var(--tel); }
.satir + .satir{ border-top:1px solid var(--tel); }
.satir a{ display:flex; gap:16px; padding:15px 0; align-items:flex-start; }
.satir:first-child a{ padding-top:0; }
.satir figure{
  margin:0; width:88px; height:88px; flex:none; overflow:hidden; background:var(--kagit-koyu);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.08);
}
.satir img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(1.03);
  transition:transform 600ms var(--gecis), filter 320ms var(--gecis);
}
.satir a:hover img{ transform:scale(1.06); }
.satir h4{
  font-family:var(--baslik); font-weight:500; font-size:17px; line-height:1.26;
  letter-spacing:-.01em; margin-bottom:8px;
  transition:color var(--gecis);
}
.satir a:hover h4{ color:var(--vurgu); }

/* ilçeler */
.ilceler{
  margin-top:44px;
  background:var(--murekkep);
  color:var(--kagit);
  padding:28px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background-image:linear-gradient(90deg, rgba(0,156,224,.18), transparent 42%);
}
.ilceler-yazi{ display:flex; gap:16px; align-items:flex-start; }
.ilceler-yazi > .ik{ color:var(--vurgu); margin-top:2px; }
.ilceler h2{ font-family:var(--baslik); font-weight:700; font-size:23px; letter-spacing:-.02em; }
.ilceler p{ font-size:13.5px; color:#a4adb8; margin-top:5px; max-width:46ch; }
.ilce-etiketler{ display:flex; gap:8px; flex-wrap:wrap; }
.ilce-etiketler a{
  padding:9px 15px;
  border:1px solid rgba(255,255,255,.2);
  font:600 11.5px/1 var(--dar); letter-spacing:.1em; text-transform:uppercase;
  color:var(--tel-koyu);
  transition:all var(--gecis);
}
.ilce-etiketler a:hover{ background:var(--vurgu); border-color:var(--vurgu); color:#fff; }

/* ==========================================================================
   YAN SÜTUN MODÜLLERİ
   ========================================================================== */
.modul + .modul,
.modul + .kusak{ margin-top:30px; padding-top:30px; border-top:1px solid var(--tel); }
.modul-baslik{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:11px; margin-bottom:14px;
  border-bottom:2px solid var(--murekkep);
  font:700 11.5px/1 var(--dar); letter-spacing:.18em; text-transform:uppercase;
}
.modul-baslik span{
  font-weight:500; letter-spacing:.06em; text-transform:none; color:var(--soluk); font-size:12px;
}

.sekme-basliklar{ display:flex; border-bottom:2px solid var(--murekkep); margin-bottom:6px; }
.sekme{
  flex:1; padding:0 4px 11px;
  font:600 11px/1 var(--dar); letter-spacing:.1em; text-transform:uppercase;
  color:var(--soluk); position:relative;
  transition:color var(--gecis);
}
.sekme:hover{ color:var(--murekkep); }
.sekme.acik{ color:var(--murekkep); }
.sekme.acik::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--vurgu);
}
.sekme-panel{ display:none; }
.sekme-panel.acik{ display:block; animation:belir 380ms ease both; }
.sekme-panel li + li{ border-top:1px solid var(--tel); }
.sekme-panel a{
  display:flex; gap:13px; padding:12px 0;
  font-family:var(--baslik); font-weight:500; font-size:16px; line-height:1.28; letter-spacing:-.01em;
  transition:color var(--gecis);
}
.sekme-panel a:hover{ color:var(--vurgu); }
.sekme-panel .sira{
  font:700 14px/1.3 var(--dar); color:var(--vurgu); min-width:14px;
}
@keyframes belir{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* hava */
.hava-ust{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--murekkep); color:var(--kagit);
  padding:18px 20px;
}
.hava-derece{
  font-family:var(--dar); font-weight:600; font-size:46px; line-height:.9;
  letter-spacing:-.03em;
}
.hava-durum{
  display:flex; align-items:center; gap:8px; margin-top:8px;
  font:500 12px/1 var(--dar); letter-spacing:.05em; color:var(--murekkep-3);
}
.hava-durum i{ width:3px; height:3px; background:var(--soluk); border-radius:50%; }
.hava-ikon{
  width:52px; height:52px; color:var(--altin);
  fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round;
}
.hava-gunler{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--tel); border-top:0; }
.hava-gunler > div{
  display:grid; justify-items:center; gap:7px; padding:12px 4px;
  font:600 11px/1 var(--dar); letter-spacing:.08em; text-transform:uppercase; color:var(--soluk);
}
.hava-gunler > div + div{ border-left:1px solid var(--tel); }
.hava-gunler .ik{ width:18px; height:18px; color:var(--murekkep-3); stroke-width:1.4; }
.hava-gunler b{ font-family:var(--dar); font-size:14px; color:var(--murekkep); }

/* cetvel (namaz / piyasa), matbaa noktalı dolgu */
.cetvel > div{
  display:flex; align-items:baseline; gap:8px;
  padding:9px 0;
  font-size:14px;
}
.cetvel > div + div{ border-top:1px dotted var(--tel-koyu); }
.cetvel dt{ color:var(--murekkep-2); }
.cetvel > div::after{
  content:""; flex:1; height:0;
  border-bottom:1px dotted var(--tel-koyu);
  order:1; margin:0 4px 5px;
}
.cetvel dd{
  order:2; margin:0;
  font-family:var(--dar); font-weight:600; font-size:15px;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.cetvel .simdi dt{ color:var(--vurgu); font-weight:600; }
.cetvel .simdi dd{ color:var(--vurgu); }
.cetvel .simdi dt::after{
  content:"şimdi"; margin-left:8px; padding:2px 6px;
  background:var(--vurgu); color:#fff;
  font:600 9px/1 var(--dar); letter-spacing:.12em; text-transform:uppercase;
  vertical-align:middle;
}
.cetvel-piyasa dd b{
  font-size:11.5px; font-weight:600; margin-left:7px; letter-spacing:.02em;
}
.artis{ color:var(--yesil); }
.dusus{ color:var(--vurgu); }

/* e-gazete */
.egazete-kapak{
  display:block; position:relative;
  box-shadow:6px 7px 0 rgba(22,19,15,.09), inset 0 0 0 1px rgba(22,19,15,.12);
  transform:rotate(-.8deg);
  transition:transform 320ms var(--gecis), box-shadow 320ms var(--gecis);
}
.egazete-kapak:hover{ transform:rotate(0) translateY(-3px); box-shadow:8px 10px 0 rgba(22,19,15,.13), inset 0 0 0 1px rgba(22,19,15,.12); }
.egazete-kapak img{ width:100%; filter:saturate(.85) contrast(1.05); }
.egazete-oku{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 10px;
  background:var(--murekkep); color:#fff;
  font:600 11px/1 var(--dar); letter-spacing:.14em; text-transform:uppercase;
}
.egazete-oku .ik{ width:13px; height:13px; }

/* ==========================================================================
   YAZARLAR
   ========================================================================== */
.yazarlar{
  margin-top:56px;
  padding:44px 0 48px;
  background:var(--kagit-acik);
  border-top:1px solid var(--tel);
  border-bottom:1px solid var(--tel);
}
.yazar-izgara{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.yazar{ padding:0 26px; }
.yazar:first-child{ padding-left:0; }
.yazar:last-child{ padding-right:0; }
.yazar + .yazar{ border-left:1px solid var(--tel); }
.yazar a{ display:flex; gap:16px; align-items:flex-start; }
.yazar img{
  width:66px; height:78px; flex:none; object-fit:cover;
  filter:grayscale(1) contrast(1.08);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.14);
  transition:filter var(--gecis);
}
.yazar a:hover img{ filter:grayscale(0) contrast(1.02); }
.yazar-ad{
  display:block;
  font:600 13.5px/1.2 var(--sans); letter-spacing:.01em;
}
.yazar-unvan{
  display:block; margin-top:4px; padding-bottom:9px;
  border-bottom:2px solid var(--vurgu); width:fit-content;
  font:600 10px/1 var(--dar); letter-spacing:.16em; text-transform:uppercase; color:var(--soluk);
}
.yazar p{
  margin-top:11px;
  font-family:var(--baslik); font-style:italic; font-weight:500;
  font-size:16.5px; line-height:1.3; letter-spacing:-.01em;
  transition:color var(--gecis);
}
.yazar a:hover p{ color:var(--vurgu); }

/* ==========================================================================
   VİDEO
   ========================================================================== */
.video{ background:var(--murekkep); color:var(--kagit); padding:46px 0 50px; }
.blok-baslik-ters h2{ color:#fff; }
.blok-baslik-ters .blok-cizgi{ background:rgba(255,255,255,.18); }
.blok-baslik-ters .blok-tumu{ color:#a4adb8; }
.blok-baslik-ters .blok-tumu:hover{ color:#fff; }

.video-izgara{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:0 32px; }
.video-buyuk figure,
.video-kucuk figure{ margin:0; position:relative; overflow:hidden; background:#0d0b09; }
.video-buyuk figure{ aspect-ratio:16/10; }
.video-buyuk img,
.video-kucuk img{
  width:100%; height:100%; object-fit:cover; opacity:.82;
  transition:opacity var(--gecis), transform 700ms var(--gecis);
}
.video-buyuk a:hover img,
.video-kucuk a:hover img{ opacity:1; transform:scale(1.03); }
.oynat{
  position:absolute; left:0; bottom:0;
  width:58px; height:58px; display:grid; place-items:center;
  background:var(--vurgu); color:#fff;
  transition:width var(--gecis), height var(--gecis);
}
.oynat .ik{ width:20px; height:20px; }
.oynat.kucuk{ width:34px; height:34px; }
.oynat.kucuk .ik{ width:13px; height:13px; }
.video-buyuk h3{
  font-family:var(--baslik); font-weight:600; font-size:23px; line-height:1.2;
  letter-spacing:-.018em; margin-top:16px; color:#f2ede3;
  transition:color var(--gecis);
}
.video-buyuk a:hover h3{ color:#fff; }
.sure{
  display:inline-block; margin-top:14px;
  font:600 11px/1 var(--dar); letter-spacing:.14em; color:var(--vurgu);
}
.video-liste{ display:grid; align-content:start; }
.video-kucuk + .video-kucuk{ border-top:1px solid var(--tel-ters); }
.video-kucuk a{ display:flex; gap:15px; padding:13px 0; align-items:flex-start; }
.video-liste .video-kucuk:first-child a{ padding-top:0; }
.video-kucuk figure{ width:118px; height:74px; flex:none; }
.video-kucuk h4{
  font-family:var(--baslik); font-weight:500; font-size:16px; line-height:1.26;
  color:#e3e7ec; transition:color var(--gecis);
}
.video-kucuk a:hover h4{ color:#fff; }
.sure-yazi{
  display:block; margin-top:8px;
  font:500 11px/1 var(--dar); letter-spacing:.12em; color:#877f73;
}

/* ==========================================================================
   FOTO GALERİ
   ========================================================================== */
.foto{ padding:48px 0 56px; }
.foto-izgara{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.foto-kart{
  position:relative; overflow:hidden; display:block;
  aspect-ratio:4/5; background:var(--kagit-koyu);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.1);
}
.foto-kart img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) contrast(1.04);
  transition:transform 800ms var(--gecis);
}
.foto-kart:hover img{ transform:scale(1.06); }
.foto-yazi{
  position:absolute; inset:auto 0 0 0;
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px;
  padding:52px 20px 18px;
  background:linear-gradient(transparent, rgba(14,12,10,.9) 58%);
  color:#fff;
  font:600 10.5px/1 var(--dar); letter-spacing:.16em; text-transform:uppercase;
}
.foto-yazi .ik{ width:14px; height:14px; color:var(--vurgu); }
.foto-yazi b{
  grid-column:1/-1; margin-top:2px;
  font-family:var(--baslik); font-weight:600; font-size:17px; line-height:1.24;
  letter-spacing:-.012em; text-transform:none;
}

/* ==========================================================================
   ALT BİLGİ
   ========================================================================== */
.dipnot{ background:var(--murekkep); color:#a4adb8; }
/* Dipnot BEŞ sütun. Dördüncü sütunda iletişim + hızlı erişim + kurumsal
   üst üste duruyordu: o sütun 30 satırı geçiyor, dipnot 900 pikseli aşıyor,
   yanındaki iki sütun 250 pikselde bitip koca bir boşluk bırakıyordu.
   Listeler artık yan yana; iletişim künyenin altına, ait olduğu yere gitti. */
.dipnot-ust{
  display:grid; grid-template-columns:1.45fr .85fr .85fr 1.5fr .95fr; gap:32px;
  padding:48px 0 40px;
}
/* Marka sütunundaki iletişim listesi: sütun başlığı yok, ikonlar zaten
   ne olduğunu söylüyor. */
.dipnot-marka .dipnot-iletisim{ margin-top:18px; }
.dipnot-marka .dipnot-iletisim li{ padding:5px 0; font-size:13.5px; }
/* En uzun liste kendi hucresinde iki sutuna akar; yoksa tek basina
   dipnotun boyunu belirliyor. */
.dipnot-sutun.genis ul{ columns:2; column-gap:22px; }
.dipnot-sutun.genis li{ break-inside:avoid; }
.dipnot-marka .marka-isaret{ width:40px; height:40px; margin-bottom:14px; }
.dipnot-logo{ display:block; height:58px; width:auto; max-width:100%; margin-bottom:16px; }
@media (max-width:640px){ .dipnot-logo{ height:46px; } }
.dipnot-marka .marka-ad{ font-size:30px; color:#f2ede3; }
.dipnot-marka p{ margin-top:16px; font-size:13.5px; line-height:1.7; max-width:42ch; }
.dipnot-sosyal{ display:flex; gap:8px; margin-top:20px; }
.dipnot-sosyal a{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); color:#a4adb8;
  transition:all var(--gecis);
}
.dipnot-sosyal a:hover{ background:var(--vurgu); border-color:var(--vurgu); color:#fff; }
.dipnot-sosyal .ik{ width:15px; height:15px; }
.dipnot-sutun h3{
  font:700 11px/1 var(--dar); letter-spacing:.2em; text-transform:uppercase;
  color:#f2ede3; padding-bottom:12px; margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.dipnot-sutun li{ padding:6px 0; font-size:14px; }
.dipnot-sutun a{ transition:color var(--gecis); }
.dipnot-sutun a:hover{ color:#fff; }
.dipnot-iletisim li{ display:flex; gap:11px; align-items:flex-start; line-height:1.55; }
.dipnot-iletisim .ik{ width:15px; height:15px; margin-top:4px; color:var(--vurgu); }
.dipnot-iletisim i{ display:inline-block; width:3px; height:3px; background:#5c564c; border-radius:50%; margin:0 8px 3px; }
/* ------------------------------------------- yan sütun · mini trafik haritası
   Hava/namaz/puan gibi bir modül. Harita ETKİLEŞİMSİZ: üstündeki saydam
   bağlantı tıklamayı alır ve okuru büyük haritaya götürür. Yan sütunda
   kaydırılabilir bir harita olsaydı, telefonda sayfayı kaydırmak isteyen
   okurun parmağı haritaya takılırdı. */
.trafik-mini{ position:relative; aspect-ratio:4/3; background:var(--kagit-koyu); }
.trafik-mini iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  pointer-events:none;              /* tıklama üstteki bağlantıya geçsin */
}
.trafik-mini-ort{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  padding:10px; text-decoration:none;
  background:linear-gradient(to top, rgba(22,19,15,.72) 0%, rgba(22,19,15,0) 42%);
  opacity:0; transition:opacity .15s;
}
.trafik-mini-ort:hover, .trafik-mini-ort:focus-visible{ opacity:1; }
.trafik-mini-ort span{
  display:inline-flex; align-items:center; gap:6px; color:#fff;
  font:600 11.5px/1 var(--dar); letter-spacing:.12em; text-transform:uppercase;
}
.trafik-mini-ort .ik{ width:12px; height:12px; }
/* Dokunmatikte :hover yok; ipucu sürekli görünür, yoksa tıklanabilirliği
   anlaşılmaz. */
@media (hover:none){ .trafik-mini-ort{ opacity:1; } }

/* ----------------------------------------------------- trafik haritası
   Yandex widget'ı iframe olarak gelir; oran ve yükseklik burada verilir,
   yoksa 300x150 varsayılanında kalır. */
.trafik-harita{
  border:1px solid var(--tel); border-radius:3px; overflow:hidden;
  background:var(--kagit-koyu);
}
.trafik-harita iframe{
  width:100%; height:min(72vh, 620px); border:0; display:block;
}
.trafik-not{
  margin:12px 0 0; font-size:13.5px; line-height:1.6; color:var(--soluk);
}
.trafik-not a{ color:var(--vurgu); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:700px){
  .trafik-harita iframe{ height:min(62vh, 460px); }
}


/* ==========================================================================
   NÖBETÇİ ECZANE & VEFAT EDENLER
   Kaynaklar (Eczacı Odası, Belediye) metni TÜMÜ BÜYÜK HARF veriyor ve biz
   bilerek dokunmuyoruz — büyük "I"nın küçüğü "ı" mı "i" mi kestirilemiyor
   (inc/eczane.php). Bağırmasın diye punto küçük, harf aralığı hafif açık,
   satır aralığı geniş tutuldu: büyük harf dizi böyle okunur.
   ========================================================================== */

/* ---- yan sütun: nöbetçi eczane ---- */
.eczane-mini,
.vefat-mini{ display:flex; flex-direction:column; gap:11px; }
.eczane-mini li,
.vefat-mini li{
  display:flex; flex-direction:column; gap:3px;
  padding-bottom:11px; border-bottom:1px dotted var(--tel);
}
.eczane-mini li:last-child,
.vefat-mini li:last-child{ padding-bottom:0; border-bottom:0; }
.eczane-mini b,
.vefat-mini b{
  font:600 12.5px/1.35 var(--dar); letter-spacing:.03em; color:var(--murekkep);
}
.eczane-mini i,
.vefat-mini i{
  font:500 11px/1 var(--dar); font-style:normal; letter-spacing:.09em;
  text-transform:uppercase; color:var(--soluk);
}
.eczane-mini a{ font:500 12.5px/1.3 var(--sans); color:var(--vurgu); }
.eczane-mini a:hover{ text-decoration:underline; }
.vefat-mini time{ font:500 11.5px/1.3 var(--sans); color:var(--murekkep-3); }

/* ---- nöbetçi eczane sayfası ---- */
.eczane-liste{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.eczane-kart{
  padding:16px 17px; background:var(--kagit-acik);
  border:1px solid var(--tel); border-left:3px solid var(--vurgu);
}
.ek-ust{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ek-ust .ik{ width:17px; height:17px; color:var(--vurgu); flex:none; }
.ek-ust h2{
  margin:0; font:600 14.5px/1.3 var(--dar); letter-spacing:.03em; color:var(--murekkep);
}
.ek-ilce{
  margin-left:auto; padding:3px 7px; background:var(--kagit-koyu);
  font:600 10px/1 var(--dar); letter-spacing:.11em; text-transform:uppercase; color:var(--murekkep-3);
}
.ek-adres{
  margin:10px 0 0; font:400 13px/1.65 var(--sans); letter-spacing:.01em; color:var(--murekkep-3);
}
.ek-alt{ display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; }
.ek-dugme{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px; border:1px solid var(--tel-koyu);
  font:600 11px/1 var(--dar); letter-spacing:.07em;
  color:var(--murekkep-2); transition:all var(--gecis);
}
.ek-dugme .ik{ width:12px; height:12px; }
.ek-dugme:hover{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }

/* ---- vefat edenler sayfası ---- */
.vefat-liste{ display:flex; flex-direction:column; gap:13px; }
.vefat-kart{
  padding:16px 18px; background:var(--kagit-acik);
  border:1px solid var(--tel); border-left:3px solid var(--murekkep-2);
}
.vk-ust{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vk-ust .ik{ width:17px; height:17px; color:var(--murekkep-3); flex:none; }
.vk-ust h2{ margin:0; font:600 17px/1.3 var(--baslik); color:var(--murekkep); }
.vk-ust time{
  margin-left:auto; font:600 10.5px/1 var(--dar); letter-spacing:.11em;
  text-transform:uppercase; color:var(--soluk);
}
.vk-bilgi{
  display:grid; grid-template-columns:repeat(2,1fr); gap:9px 22px; margin:13px 0 0;
}
.vk-bilgi dt{
  font:600 10px/1 var(--dar); letter-spacing:.12em; text-transform:uppercase; color:var(--soluk);
}
.vk-bilgi dd{ margin:4px 0 0; font:400 13.5px/1.5 var(--sans); color:var(--murekkep-2); }
.vk-bilgi dd a{ color:var(--vurgu); }
.vk-bilgi dd a:hover{ text-decoration:underline; }

/* ---- ikisinin ortak dipnotu ve "veri yok" kutusu ---- */
.veri-kaynak{
  margin:22px 0 0; padding-top:14px; border-top:1px solid var(--tel);
  font:400 12.5px/1.7 var(--sans); color:var(--soluk);
}
.veri-kaynak a{ color:var(--vurgu); text-decoration:underline; text-underline-offset:2px; }
.veri-yok{
  padding:30px 26px; background:var(--kagit-acik); border:1px solid var(--tel); text-align:center;
}
.veri-yok h2{ margin:0 0 9px; font:600 20px/1.3 var(--baslik); color:var(--murekkep); }
.veri-yok p{
  margin:0 auto 16px; max-width:52ch; font:400 14px/1.7 var(--sans); color:var(--murekkep-3);
}

@media (max-width:640px){
  .eczane-liste,
  .vk-bilgi{ grid-template-columns:1fr; }
  .ek-ilce{ margin-left:0; }
  .vk-ust time{ margin-left:0; width:100%; }
}
.dipnot-alt{ border-top:1px solid rgba(255,255,255,.1); }
.dipnot-alt .kap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  min-height:56px;
  font:500 12px/1 var(--dar); letter-spacing:.06em; color:var(--silik);
}
.dipnot-alt i{ display:inline-block; width:3px; height:3px; background:#5c564c; border-radius:50%; margin:0 6px 3px; }
.dipnot-alt-linkler{ display:flex; gap:20px; }
.dipnot-alt-linkler a:hover{ color:#fff; }

/* Yapımcı künyesi: sayfanın en altı, ortalı, kendi satırında. Telif satırının
   yanına konulunca dar ekranda araya sıkışıyordu; ayrı şerit olarak duruyor. */
.dipnot-kredi{ border-top:1px solid rgba(255,255,255,.07); }
.dipnot-kredi .kap{
  padding:14px 0; text-align:center;
  font:500 12px/1.5 var(--dar); letter-spacing:.1em; color:#6f6960;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.dipnot-kredi a{ color:#a49b8c; font-weight:600; }
.dipnot-kredi a:hover{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
/* Yapımcı künyesi: adres · telefon · e-posta. Dar ekranda alt alta geçer;
   ayıraç ::before ile verilir ki satır başına düşen nokta kalmasın. */
.dipnot-kredi .kredi-kunye{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px;
  letter-spacing:.04em; font-size:11.5px; color:#5f5a52;
}
.dipnot-kredi .kredi-kunye > * + *::before{
  content:"·"; margin-inline-end:14px; color:#4a463f;
}

/* yukarı */
.yukari{
  position:fixed; right:22px; bottom:22px; z-index:130;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--murekkep); color:#fff;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all var(--gecis);
}
.yukari.gorunur{ opacity:1; visibility:visible; transform:none; }
.yukari:hover{ background:var(--vurgu); }
.yukari .ik{ width:18px; height:18px; }

/* ==========================================================================
   GİRİŞ ANİMASYONU
   ========================================================================== */
.ac{ opacity:0; transform:translateY(14px); }
.ac.gor{ opacity:1; transform:none; transition:opacity 620ms ease, transform 620ms cubic-bezier(.2,.7,.3,1); }

/* ==========================================================================
   İÇ SAYFALAR — ortak
   ========================================================================== */
.okuma-cubugu{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:150;
  background:transparent; pointer-events:none;
}
.okuma-cubugu span{ display:block; height:100%; width:0; background:var(--vurgu); }

.izyolu{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:18px 0 0;
  font:500 12px/1 var(--dar); letter-spacing:.06em; color:var(--soluk);
}
.izyolu a{ transition:color var(--gecis); }
.izyolu a:hover{ color:var(--vurgu); }
.izyolu span{ color:var(--tel-koyu); }
.izyolu b{ color:var(--murekkep); font-weight:600; }

/* ---------- haber detay ---------- */
.yazi-sutun{ max-width:none; }
.yazi-basi{ padding-bottom:24px; }
.yazi-basi h1{
  font-family:var(--baslik); font-weight:700;
  font-size:clamp(30px, 3.6vw, 46px); line-height:1.05; letter-spacing:-.026em;
  margin:6px 0 16px; max-width:22ch;
}
.spot{
  font-family:var(--baslik); font-style:italic; font-weight:400;
  font-size:19.5px; line-height:1.5; color:var(--murekkep-2);
  max-width:62ch;
  padding-left:18px; border-left:3px solid var(--vurgu);
}
.imza{
  display:flex; align-items:center; gap:14px;
  margin-top:26px; padding:16px 0;
  border-top:1px solid var(--tel); border-bottom:1px solid var(--tel);
}
.imza img{
  width:46px; height:46px; object-fit:cover; flex:none;
  filter:grayscale(1) contrast(1.06);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.14);
}
.imza-yazi{ flex:1; min-width:0; }
.imza-ad{ display:block; font-weight:600; font-size:14.5px; }
.imza-ust{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:5px;
  font:500 12px/1 var(--dar); letter-spacing:.03em; color:var(--soluk);
}
.imza-ust .ik{ width:13px; height:13px; }
.imza-ust i{ width:3px; height:3px; background:var(--tel-koyu); border-radius:50%; margin:0 3px; }
/* Bildirim şeridi mutlak konumlanacağı için sarmalayıcı konum verir. */
.paylas{ display:flex; gap:6px; position:relative; }
/* Facebook/X/WhatsApp birer bağlantı; e-posta ve Instagram birer <button>
   (ikisi de bir adrese gidemiyor, bkz. pages/detay.php'deki açıklamalar).
   Görünüşleri ayırt edilemez olmalı, o yüzden tek kural. */
.paylas a,
.paylas button{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--tel-koyu); color:var(--murekkep-2);
  background:none; cursor:pointer;
  transition:all var(--gecis);
}
.paylas a:hover,
.paylas button:hover{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }
/* Instagram düğmesi HTML'de gizli başlar, JS açar. Bu kural olmadan üstteki
   sınıf seçicisinin display:grid'i hidden niteliğinin tarayıcı stilini ezer;
   düğme JS kapalıyken de görünür, yani ölü bir düğme kalır. */
.paylas button[hidden]{ display:none; }
.paylas .ik{ width:15px; height:15px; }

/* MASAÜSTÜ INSTAGRAM KUTUSU
   Instagram'ı kendiliğinden yeni sekmede açmak işe yaramıyordu: sekme odağı
   alıyor, okur yalnızca Instagram'ın ana sayfasını görüyordu. Kutu paylaş
   satırının altına açılır; adres görünür ve seçili durur. */
.paylas-kutu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:6;
  width:min(340px, 84vw);
  padding:14px; background:var(--kagit-acik);
  border:1px solid var(--murekkep);
  box-shadow:0 10px 30px rgba(0,0,0,.20);
  text-align:left;
}
.paylas-kutu[hidden]{ display:none; }
.pk-giris{
  margin:0 0 10px; font:500 12.5px/1.5 var(--dar); color:var(--murekkep-2);
}
.pk-adres{
  width:100%; padding:8px 9px; margin:0 0 10px;
  border:1px solid var(--tel-koyu); background:#fff;
  font:400 12px/1.3 var(--dar); color:var(--murekkep);
}
.pk-alt{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Bu düğmeler paylaş satırındaki 36x36 ikon kutularıyla AYNI kuralın
   kapsamına girmemeli; ölçüleri burada sıfırlanıyor. */
.paylas-kutu button,
.paylas-kutu .pk-git{
  width:auto; height:auto; display:inline-flex; align-items:center;
  padding:7px 12px; border:1px solid var(--tel-koyu);
  font:600 10.5px/1 var(--dar); letter-spacing:.09em; text-transform:uppercase;
  color:var(--murekkep-2); background:none; cursor:pointer;
  transition:background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.paylas-kutu button:hover,
.paylas-kutu .pk-git:hover{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }
.paylas-kutu .pk-kapat{ margin-left:auto; border-color:transparent; }
/* Bildirim satırı: kutunun içinde, boşken yer kaplamaz. */
.paylas-not{
  display:block; margin-top:9px;
  font:500 11.5px/1.4 var(--dar); color:var(--yesil);
}
.paylas-not:empty{ display:none; }
.paylas-not.hata{ color:var(--vurgu); }

@media (max-width:640px){
  .paylas-kutu{ right:auto; left:0; width:100%; }
}

/* ==========================================================================
   HABER FOTOĞRAF SLIDER'I
   Birden fazla fotoğrafı olan haberlerde kapağın yerini alır: solda büyük
   kare, SAĞDA dikey küçük görsel şeridi. Tek fotoğraflı haberlerde slider hiç
   basılmaz; onlar aşağıdaki .yazi-gorsel ile eskisi gibi görünür.

   Şerit önce SOLDAYDI: okurun gözü soldan sağa gider, ilk gördüğü şey küçük
   ve kırpık kareler oluyordu. Sağa alındı, büyük kare öne geçti.

   Kareler üst üste YIĞILMIYOR, DOM'da sırayla duruyor ve görünmeyenler
   display:none. position:absolute ile yığsaydık sarmalın yüksekliği 0 kalır,
   JS yüklenene kadar sayfa zıplardı.
   ========================================================================== */
.foto-slider{
  display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:14px;
  margin:0 0 30px; align-items:start;
}
/* Şerit DOM'da önce geliyor (klavye ve ekran okuyucu sırası bozulmasın),
   ızgarada ikinci sütuna yerleşiyor. */
.fs-serit{ grid-column:2; grid-row:1; }
.fs-ana{ grid-column:1; grid-row:1; }

/* Şerit karelerden uzun olursa kendi içinde kayar, sayfayı uzatmaz.
   Kaydırma çubuğu inceltilip soluklaştırıldı: tarayıcının kalın gri çubuğu
   şeridin yanında kaba duruyordu. */
.fs-serit{
  display:flex; flex-direction:column; gap:9px;
  max-height:min(70vh, 520px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(22,19,15,.2) transparent;
}
.fs-serit::-webkit-scrollbar{ width:4px; }
.fs-serit::-webkit-scrollbar-track{ background:transparent; }
.fs-serit::-webkit-scrollbar-thumb{ background:rgba(22,19,15,.2); border-radius:2px; }

/* Etkin olmayan kareler soluk ve hafif renksiz; seçili olan tam renkli ve
   BÜYÜK KAREYE BAKAN kenarında kırmızı şeritle işaretli. Kutuyu çepeçevre
   çerçevelemek yerine tek kenar: sayfa daha sakin duruyor. */
.fs-kucuk{
  position:relative; display:block; flex:0 0 auto; line-height:0;
  border-radius:2px; overflow:hidden;
  opacity:.55; filter:grayscale(.3);
  transition:opacity .18s var(--gecis), filter .18s var(--gecis);
}
.fs-kucuk img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.fs-kucuk:hover{ opacity:.9; filter:none; }
.fs-kucuk.acik{ opacity:1; filter:none; }
.fs-kucuk.acik::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--vurgu);
}
.fs-kucuk:focus-visible{ outline:2px solid var(--vurgu); outline-offset:2px; }

.fs-ana{ position:relative; min-width:0; }
.fs-kare{ margin:0; display:none; }
.fs-kare.acik{ display:block; }
.fs-kare img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  filter:saturate(.94) contrast(1.03);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.08);
}
.fs-kare figcaption{
  display:flex; gap:9px; align-items:flex-start;
  margin-top:11px; padding-left:2px;
  font-size:13px; line-height:1.5; color:var(--soluk);
}
.fs-kare figcaption .ik{ width:15px; height:15px; flex:0 0 auto; margin-top:2px; color:var(--vurgu); }

/* Denetimler GÖRSELİN kutusuna oturur. Bu katman görselle aynı oranda
   olduğu için ok her karede tam ortada kalır; eskiden .fs-ana yüksekliğinin
   yüzdesiyle konumlanıyordu ve altyazı olan karede aşağı kayıyordu. */
.fs-ustkatman{
  position:absolute; left:0; right:0; top:0;
  aspect-ratio:16/10; pointer-events:none;
}
.fs-ustkatman > *{ pointer-events:auto; }
.fs-ok{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:grid; place-items:center;
  background:rgba(22,19,15,.42); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  color:#fff; border:0; border-radius:2px; cursor:pointer;
  opacity:0; transition:opacity .18s var(--gecis), background .18s var(--gecis);
}
.fs-ana:hover .fs-ok, .fs-ok:focus-visible{ opacity:1; }
.fs-ok:hover{ background:var(--vurgu); }
.fs-geri{ left:12px; }
.fs-ileri{ right:12px; }
.fs-ok .ik{ width:18px; height:18px; }

/* Sayaç sol üstte: şerit sağa alındığı için sağ üst köşe artık şeride komşu,
   orada durunca sıkışık görünüyordu. */
.fs-sayac{
  position:absolute; left:12px; top:12px;
  padding:6px 10px; border-radius:2px;
  background:rgba(22,19,15,.45); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  color:#fff; font:600 11px/1 var(--dar); letter-spacing:.09em;
}
.fs-sayac b{ color:#fff; }

/* Dokunmatikte :hover yok; oklar sürekli görünür yoksa kimse bulamaz. */
@media (hover:none){ .fs-ok{ opacity:1; } }

/* Dar ekranda şerit büyük karenin ALTINA, yatay diziye geçer. */
@media (max-width:700px){
  .foto-slider{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .fs-ana{ grid-column:1; grid-row:1; }
  .fs-serit{
    grid-column:1; grid-row:2;
    flex-direction:row; max-height:none;
    overflow-x:auto; overflow-y:hidden; padding-bottom:6px;
  }
  .fs-kucuk{ width:92px; }
  /* Şerit yataya dönünce kırmızı işaret de yatay olur: karenin altında. */
  .fs-kucuk.acik::after{ left:0; right:0; top:auto; bottom:0; width:auto; height:3px; }
  .fs-geri{ left:8px; }
  .fs-ileri{ right:8px; }
}

.yazi-gorsel{ margin:0 0 30px; }
.yazi-gorsel img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  filter:saturate(.94) contrast(1.03);
  transition:filter 320ms var(--gecis);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.08);
}
.yazi-gorsel figcaption{
  display:flex; gap:9px; align-items:flex-start;
  margin-top:11px; padding-left:2px;
  font-size:13px; line-height:1.5; color:var(--soluk);
  border-left:0;
}
.yazi-gorsel figcaption .ik{ width:14px; height:14px; margin-top:4px; color:var(--vurgu); flex:none; }
.yazi-gorsel figcaption b{ color:var(--murekkep-3); font-weight:600; }

.yazi-govde{
  max-width:68ch;
  /* A+/A− bu değeri değiştirir; gövdedeki punto ona göre ölçeklenir. */
  --punto:1;
  font-size:calc(17px * var(--punto, 1));
  line-height:1.78;
  color:var(--murekkep-2);
}

/* Eski editör (CKEditor) <p> yerine <div> üretmiş ve satır içine punto ile
   renk yazmış: arşivin %47'sinde hiç <p> yok, %93'ünde satır içi font-size
   var. Bu yüzden sitenin yazı tipografisi o haberlerin yarısında hiç
   uygulanmıyor, A+/A− de çalışmıyordu (kural yalnızca <p> hedefliyordu).
   Satır içi punto ve renk devre dışı bırakılır; metin gövdeden miras alır,
   böylece bütün arşiv aynı görünür ve punto her yerde çalışır.
   Satır içi bildirimi ancak !important ezebiliyor. */
.yazi-govde [style*="font-size"]{ font-size:inherit !important; }
.yazi-govde [style*="color"]{ color:inherit !important; }
/* Makale gövdesi SERIF. Sayfanın geri kalanı sans; uzun metin burada
   başlıyor ve yazı tipinin değişmesi okura "artık okuma alanındasın"
   diyor. Satır uzunluğu 68 karakterde tutuldu (ölçü: --olcu). */
.yazi-govde{ font-family:var(--metin); }
.yazi-govde p{
  font-size:calc(18px * var(--punto, 1)); line-height:1.72; color:var(--murekkep-2);
  margin-bottom:24px;
  max-width:68ch;
}
.yazi-govde > p:first-of-type::first-letter{
  float:left;
  font-family:var(--metin); font-weight:600;
  font-size:66px; line-height:.80;
  margin:7px 12px 0 0; color:var(--murekkep);
}
/* Künye, KVKK, çerez gibi belge sayfalarında ilk harf büyütülmez: orada
   okunan bir anlatı değil, bakılan bir metin var. */
.govde-belge > p:first-of-type::first-letter{
  float:none; font-size:inherit; line-height:inherit; margin:0;
}
.yazi-govde h2{
  font-family:var(--baslik); font-weight:600; font-size:calc(24px * var(--punto, 1)); line-height:1.2;
  letter-spacing:-.018em; margin:34px 0 14px;
  padding-top:16px; border-top:1px solid var(--tel);
}
/* Künye ve benzeri "etiket: değer" listeleri. Sayfa gövdesinde liste stili
   yoktu, düz <p> ile yazılınca künye okunmuyordu. Sınıf adı .kunye-liste:
   .kunye zaten üst şeritteki logo/künye bloğunun sınıfı. */
.yazi-govde .kunye-liste{
  /* clear: ilk paragrafın float'lı ilk harfi ilk satırı kaydırıyor */
  margin:0 0 26px; clear:both;
}
.yazi-govde .kunye-liste div{
  display:grid; grid-template-columns:190px 1fr; gap:4px 18px;
  padding:11px 0; border-bottom:1px solid var(--tel);
}
.yazi-govde .kunye-liste dt, .yazi-govde .kunye-liste b{
  font:600 11px/1.5 var(--dar); letter-spacing:.14em; text-transform:uppercase;
  color:var(--soluk); padding-top:3px;
}
.yazi-govde .kunye-liste dd, .yazi-govde .kunye-liste span{
  margin:0; font-size:16px; line-height:1.6; color:var(--murekkep-2);
}
.yazi-govde .kunye-liste a{ color:var(--murekkep); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:560px){
  .yazi-govde .kunye-liste div{ grid-template-columns:1fr; gap:2px; padding:9px 0; }
}
/* Gövdedeki düz listeler (reklam alanları gibi) */
.yazi-govde ul{ margin:0 0 22px; padding-left:20px; list-style:disc; }
.yazi-govde li{ font-size:calc(17px * var(--punto, 1)); line-height:1.7; color:var(--murekkep-2); margin-bottom:8px; }
.yazi-govde li b{ color:var(--murekkep); }

/* ------------------------------------------- gövde içi görsel ve video
   Editör araç çubuğundaki 🖼 düğmesi gövdeye <figure class="haber-gorsel">,
   ▶ düğmesi <div class="embed"> basıyor. İkisinin de CSS'i uzun süre HİÇ
   yoktu: eklenen ikinci fotoğraf biçimsiz, altyazısı sıradan paragraf gibi
   çıkıyordu; oynatıcı da YouTube'un verdiği sabit 560 piksellik ölçüyle
   kalıp telefonda sayfayı yana taşırıyordu. Kapak görselinin (.yazi-gorsel)
   diliyle aynı olsun diye ölçüler oradan alındı. */
.yazi-govde figure.haber-gorsel{
  margin:30px 0; padding:0; clear:both;   /* clear: ilk paragrafın float'lı ilk harfi */
}
.yazi-govde figure.haber-gorsel img{
  width:100%; height:auto; display:block;
  border-radius:3px; background:var(--tel);
}
.yazi-govde figure.haber-gorsel figcaption{
  margin-top:9px; font-size:13px; line-height:1.5; color:var(--soluk);
  padding-left:11px; border-left:2px solid var(--vurgu);
}
/* Gövde görseli: boyut ve hizalama (21.09.2026). Editörde görselin köşesinden
   sürüklenerek verilen genişlik figure'a `--gen:NN%` olarak yazılır (kayıtta
   yalnız bu değer korunur, bkz. inc/temizle.php). Değer yoksa tam genişlik.
   Dar görsel ortalanır; hiza-sol/hiza-sag ile yüzer ve yanından metin akar.
   clear yalnız kendi yanında, yoksa iki dar görsel yan yana duramaz. */
.yazi-govde figure.haber-gorsel{ width:var(--gen, 100%); margin-left:auto; margin-right:auto; }
.yazi-govde figure.haber-gorsel.hiza-sol{ float:left; clear:left; margin:6px 26px 16px 0; }
.yazi-govde figure.haber-gorsel.hiza-sag{ float:right; clear:right; margin:6px 0 16px 26px; }
/* Yüzen görsel yazının sonundaysa gövdenin dışına taşmasın. */
.yazi-govde::after{ content:""; display:table; clear:both; }
@media (max-width:700px){
  /* Telefonda yandan metin akacak yer yok: yüzme kalkar, görsel ortalanır ve
     en az %70 olur (masaüstünde %20'ye küçültülen görsel telefonda pul olurdu). */
  .yazi-govde figure.haber-gorsel{ width:max(var(--gen, 100%), 70%); }
  .yazi-govde figure.haber-gorsel.hiza-sol,
  .yazi-govde figure.haber-gorsel.hiza-sag{ float:none; clear:both; margin:26px auto; }
}
/* Haber önizlemesi şeridi (panelde "Önizle"; yalnız editör görür). */
.onizleme-serit{
  position:sticky; top:0; z-index:60; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
  justify-content:center; padding:10px 16px; background:#b8860b; color:#16130f;
  font:500 14px/1.4 var(--sans, system-ui, sans-serif); text-align:center;
}
.onizleme-serit b{ letter-spacing:.12em; }
.onizleme-serit .onizleme-uyari{ font-weight:700; color:#5c0a0f; }
.onizleme-serit button{
  padding:5px 12px; border:1px solid #16130f; border-radius:4px; background:transparent;
  color:#16130f; font:600 13px/1 var(--sans, system-ui, sans-serif); cursor:pointer;
}

/* Video gömme: ölçü İÇERİKTEN değil buradan gelir; iframe'in width/height
   nitelikleri kayıt anında sökülüyor (bkz. inc/temizle.php). */
.embed{ margin:30px 0; clear:both; }
.embed iframe{
  width:100%; aspect-ratio:16/9; height:auto;
  border:0; display:block; border-radius:3px; background:#000;
}
/* Dikey videolar (YouTube Shorts) 16:9'da siyah bantla dolar; kabul edilebilir
   ama okuma sütununu aşmasın diye üst sınır kapak görseliyle aynı. */
.embed iframe{ max-height:78vh; }
/* Sosyal medya oynatıcıları (21.09.2026): gömme sayfalarının kendi ölçüsü
   var; 16:9'a sıkıştırınca Instagram/TikTok/X gönderisi kesiliyordu. Genişlik
   sınırlanıp ortalanır, oran platformun gömme sayfasına göre verilir.
   max-height kaldırılır: genişlik sabitken yüksekliği kırpmak oranı bozar. */
.embed.embed-dikey iframe,
.embed.embed-instagram iframe,
.embed.embed-tiktok iframe,
.embed.embed-x iframe{ margin:0 auto; max-height:none; }
.embed.embed-dikey iframe{ max-width:360px; aspect-ratio:9/16; }
.embed.embed-instagram iframe{ max-width:400px; aspect-ratio:400/710; background:#fff; border:1px solid #dbdbdb; }
.embed.embed-tiktok iframe{ max-width:340px; aspect-ratio:340/760; background:#fff; }
.embed.embed-x iframe{ max-width:550px; aspect-ratio:550/620; background:transparent; }

/* Panelden yüklenen video dosyası */
.yazi-govde figure.haber-video{ margin:30px 0; clear:both; }
.yazi-govde figure.haber-video video{
  display:block; width:100%; max-height:78vh; border-radius:3px; background:#000;
}

/* ---------------------------------------------- ana sayfa · sosyal medya
   Hesaplar üst şeritte ve alt bilgide küçük simgelerle vardı ama okur fark
   etmiyordu; gazete ana sayfada açık ve büyük bir blok istedi. Düğmeler
   platformların kendi renkleriyle basılır, o yüzden zeminler burada sabit
   (marka renkleri temayla değişmez); yazı her ikisinde de beyaz kalsın diye
   renkler koyu tonlardan seçildi. */
.sosyal-blok{ margin:44px auto; }
/* TEK SATIR, EŞİT GENİŞLİK. Burada bir süre auto-fit + minmax kullanıldı ama
   blok gövde sütununun içinde (Gündem'in altında) durduğu için sütun genişliği
   ekrana göre değişiyor: 1280'de dört, 1150'de üç sütun çıkıyor ve dördüncü
   hesap tek başına alt satıra düşüyordu. Düğme sayısı sabit ve az (en çok dört
   hesap, iki hizmet bağlantısı), o yüzden eşik aramak yerine hepsi tek satıra
   eşit bölünüyor; kaç tane olursa olsun satır dolu görünür. */
.sosyal-dugmeler{
  display:grid; gap:12px;
  grid-auto-flow:column; grid-auto-columns:1fr;
}
/* Dar ekranda tek satır düğmeleri okunmaz hâle getirir: ikişerli ızgaraya
   dönülür (grid-auto-flow geri alınmalı, yoksa sütun akışı sürer). */
@media (max-width:1000px){
  .sosyal-dugmeler{ grid-auto-flow:row; grid-template-columns:repeat(2, 1fr); }
}
.sosyal-dugme{
  display:flex; align-items:center; justify-content:center; gap:11px;
  min-height:62px; padding:0 18px; border-radius:3px;
  color:#fff; text-decoration:none;
  font:600 14px/1 var(--dar); letter-spacing:.13em; text-transform:uppercase;
  transition:transform .12s ease, filter .12s ease;
}
.sosyal-dugme:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.sosyal-dugme .ik{ width:20px; height:20px; flex:0 0 auto; }
.sd-facebook { background:#1877f2; }
.sd-instagram{ background:linear-gradient(90deg,#f9ce34 0%,#ee2a7b 48%,#6228d7 100%); }
.sd-youtube  { background:#e60023; }
.sd-x        { background:#16130f; }
.sd-whatsapp { background:#1da851; }   /* markanın #25D366'sı beyaz yazıyı okutmuyor, koyultuldu */
@media (max-width:560px){
  .sosyal-dugme{ min-height:54px; font-size:13px; letter-spacing:.1em; }
  .sosyal-dugmeler{ grid-auto-flow:row; grid-template-columns:1fr; }
}

.alinti{
  margin:30px 0; padding:4px 0 4px 26px;
  border-left:3px solid var(--vurgu);
  font-family:var(--baslik); font-style:italic; font-weight:500;
  font-size:22px; line-height:1.42; letter-spacing:-.012em;
  color:var(--murekkep);
}
.alinti cite{
  display:block; margin-top:14px;
  font:600 11px/1 var(--dar); font-style:normal;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soluk);
}
.yazi-liste{ margin:0 0 24px; padding-left:2px; }
.yazi-liste li{
  position:relative; padding-left:22px; margin-bottom:9px;
  font-size:16px; line-height:1.6; color:var(--murekkep-2);
}
.yazi-liste li::before{
  content:""; position:absolute; left:0; top:11px;
  width:9px; height:2px; background:var(--vurgu);
}
.etiketler{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:34px 0 0; padding:22px 0;
  border-top:1px solid var(--tel); border-bottom:2px solid var(--murekkep);
}
.etiketler > span{
  font:700 10.5px/1 var(--dar); letter-spacing:.18em; text-transform:uppercase;
  color:var(--soluk); margin-right:4px;
}
.etiketler a{
  padding:8px 13px; border:1px solid var(--tel-koyu);
  font:500 12.5px/1 var(--dar); letter-spacing:.04em; color:var(--murekkep-2);
  transition:all var(--gecis);
}
.etiketler a:hover{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }
.yazi-sutun .blok{ margin-top:40px; }
.onecikan-uc{ grid-template-columns:repeat(3, minmax(0,1fr)); border-top:0; padding-top:0; }

/* ---------- kategori ---------- */
.kategori-basi{
  display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap;
  padding:22px 0 26px; margin-bottom:6px;
  border-bottom:2px solid var(--murekkep);
}
.kategori-etiket{
  display:block;
  font:700 10.5px/1 var(--dar); letter-spacing:.2em; text-transform:uppercase; color:var(--vurgu);
}
.kategori-basi h1{
  font-family:var(--baslik); font-weight:700; font-size:clamp(32px,4vw,50px);
  line-height:1; letter-spacing:-.028em; margin:10px 0 12px;
}
.kategori-basi p{ font-size:15px; line-height:1.6; color:var(--murekkep-3); max-width:58ch; }
.kategori-sayi{ text-align:right; }
.kategori-sayi b{
  display:block; font-family:var(--dar); font-weight:600; font-size:34px; line-height:1;
  letter-spacing:-.02em;
}
.kategori-sayi span{
  font:600 10.5px/1 var(--dar); letter-spacing:.18em; text-transform:uppercase; color:var(--soluk);
}

.kategori-one{ margin-bottom:30px; }
.kategori-one a{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 28px; align-items:center; }
.kategori-one figure{
  margin:0; overflow:hidden; aspect-ratio:16/10; background:var(--kagit-koyu);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.08);
}
.kategori-one img{
  width:100%; height:100%; object-fit:cover; filter:saturate(.94) contrast(1.03);
  transition:transform 700ms var(--gecis), filter 320ms var(--gecis);
}
.kategori-one a:hover img{ transform:scale(1.03); }
.kategori-one h2{
  font-family:var(--baslik); font-weight:700; font-size:30px; line-height:1.12;
  letter-spacing:-.022em; margin-bottom:12px;
  transition:color var(--gecis);
}
.kategori-one a:hover h2{ color:var(--vurgu); }
.kategori-one p{ font-size:15px; line-height:1.62; color:var(--murekkep-3); margin-bottom:12px; }

.siralama-cubugu{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 0; margin-bottom:6px;
  border-top:1px solid var(--tel); border-bottom:1px solid var(--tel);
  font:500 12px/1 var(--dar); letter-spacing:.05em; color:var(--soluk);
}
/* Lig seçici altı düğmeye çıkınca 360px ekranda satıra sığmıyordu ve
   sayfa 80 piksel yana kayıyordu (puan-durumu). Sarmalı açık; düğmeler
   zaten tek satır yüksekliğinde, alt satıra inince düzen bozulmuyor. */
.siralama-dugmeler{ display:flex; flex-wrap:wrap; gap:4px; }
.siralama-dugmeler button{
  padding:8px 13px;
  font:600 11px/1 var(--dar); letter-spacing:.12em; text-transform:uppercase;
  color:var(--soluk); border:1px solid transparent;
  transition:all var(--gecis);
}
.siralama-dugmeler button:hover{ color:var(--murekkep); border-color:var(--tel-koyu); }
.siralama-dugmeler button.acik{ background:var(--murekkep); color:#fff; border-color:var(--murekkep); }

.satir-genis + .satir-genis{ border-top:1px solid var(--tel); }
.satir-genis a{ gap:24px; padding:22px 0; align-items:flex-start; }
.satir-genis figure{ width:230px; height:154px; }
.satir-genis h3{
  font-family:var(--baslik); font-weight:600; font-size:22px; line-height:1.2;
  letter-spacing:-.018em; margin-bottom:9px;
  transition:color var(--gecis);
}
.satir-genis a:hover h3{ color:var(--vurgu); }
.satir-genis p{ font-size:14.5px; line-height:1.6; color:var(--murekkep-3); margin-bottom:10px; max-width:64ch; }

.sayfalama{
  display:flex; align-items:center; gap:6px;
  margin-top:34px; padding-top:26px; border-top:2px solid var(--murekkep);
}
.sayfalama a, .sayfalama span{
  min-width:40px; height:40px; display:grid; place-items:center; padding:0 8px;
  border:1px solid var(--tel-koyu);
  font:600 13px/1 var(--dar); letter-spacing:.04em; color:var(--murekkep-2);
  transition:all var(--gecis);
}
.sayfalama span{ border-color:transparent; color:var(--soluk); }
.sayfalama a:hover{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }
.sayfalama a.acik{ background:var(--vurgu); border-color:var(--vurgu); color:#fff; }
.sayfalama a.pasif{ opacity:.4; pointer-events:none; }
.sayfalama .ik{ width:15px; height:15px; }

.kategori-listesi li + li{ border-top:1px solid var(--tel); }
.kategori-listesi a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 0; font-size:15px;
  transition:color var(--gecis);
}
.kategori-listesi a:hover{ color:var(--vurgu); }
.kategori-listesi b{
  font:600 11.5px/1 var(--dar); letter-spacing:.06em; color:var(--soluk);
  padding:4px 8px; background:var(--kagit-koyu);
}

/* ==========================================================================
   DUYARLI
   ========================================================================== */
@media (max-width:1140px){
  .manset, .govde{ grid-template-columns:minmax(0,1fr) 310px; gap:0 28px; }
  .gunun-listesi, .yan{ padding-left:26px; }
  .dipnot-ust{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; }
  /* Marka tam genişliğe çıkıyor; İÇİ de yan yana dizilsin, yoksa logo,
     tanıtım yazısı ve iletişim alt alta uzayıp kazandığımızı geri veriyor. */
  .dipnot-marka{
    grid-column:1/-1;
    display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 40px;
  }
  .dipnot-logo{ flex:0 0 auto; margin-bottom:0; }
  .dipnot-marka p{ flex:1 1 260px; max-width:46ch; margin-top:0; }
  .dipnot-marka .dipnot-iletisim{ flex:1 1 250px; margin-top:0; }
  .dipnot-sosyal{ flex:0 0 100%; margin-top:2px; }
}
@media (max-width:980px){
  .kunye-ic{ grid-template-columns:auto auto; gap:20px; row-gap:18px; }
  .kusak-kunye{ grid-column:1/-1; order:3; max-width:none; }
  /* Mobilde açılır liste yok: tam gezinme hamburger panelinde. Kategori
     şeridi yatay kaydırılır, böylece bir dokunuşla kategoriye gidilir. */
  .menu-ic{ gap:0; }
  .menu-liste{
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .menu-liste::-webkit-scrollbar{ display:none; }
  .menu-liste a{ white-space:nowrap; padding:0 13px; }
  .menu-daha{ display:none; }
  .menu-dugme{ display:none; }
  /* Canlı düğmesi 375px'lik satırın yarısını yiyordu; mobilde hamburger
     panelinde duruyor, kategori şeridi tüm genişliği kullanıyor. */
  .menu{ position:relative; }
  .menu-ic{ position:relative; }

  .manset, .govde{ grid-template-columns:minmax(0,1fr); }
  .gunun-listesi, .yan{ border-left:0; padding-left:0; padding-top:34px; margin-top:34px; border-top:2px solid var(--murekkep); }
  .onecikan{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 0; }
  .oc-kart{ padding:0 20px; }
  .oc-kart:nth-child(odd){ padding-left:0; border-left:0; }
  .oc-kart:nth-child(even){ padding-right:0; }
  .yazar-izgara{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 0; }
  .yazar{ padding:0 22px; }
  .yazar:nth-child(odd){ padding-left:0; border-left:0; }
  .yazar:nth-child(even){ padding-right:0; }
  .foto-izgara{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .video-izgara{ grid-template-columns:minmax(0,1fr); gap:26px; }

  .kategori-one a{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .onecikan-uc{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .onecikan-uc .oc-kart:nth-child(3){ padding-left:0; border-left:0; }
}
@media (max-width:700px){
  .kap{ width:min(1280px, 100% - 28px); }

  /* TELEFONDA KÜNYE TEK SATIR.
     Önce üst üste üç şerit vardı: tarih+sosyal (36px), logo satırı ve eylem
     satırı (141px). Son dakika ve kategori şeridiyle birlikte başlık alanı
     375x812 ekranın %32'sini yiyordu, haber katlanın altında kalıyordu.
     Şimdi: üst şerit kalkar (sosyal bağlantılar zaten menü panelinde, tarih
     panele taşındı), künye tek satıra iner: solda logo, sağda E-Gazete,
     arama ve menü. Satır içi arama kutusu gizlenir; paneldeki aramayla
     mükerrerdi, düğmesi onu açıyor. Başlık 263px'ten ~150px'e iner. */
  .serit{ display:none; }
  .kunye-ic{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:12px; padding:11px 0;
  }
  .kunye-eylem{ gap:8px; }
  .ara{ display:none; }   /* arama panelde; .mp-tarih görünürlüğü kendi tanımında */
  .dugme-egazete{ padding:0 13px; letter-spacing:.08em; gap:7px; }
  /* Reklam tanımlıysa kendi satırına sarsın, tek satırı bozmasın */
  .kusak-kunye{ flex:1 0 100%; order:3; height:60px; }
  .blok-izgara{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .satir-liste{ padding-left:0; border-left:0; border-top:1px solid var(--tel); padding-top:6px; }
  .blok-izgara.ters > .satir-liste{ padding-right:0; border-right:0; border-top:1px solid var(--tel); }
  .blok-izgara.ters > .one-haber{ order:1; }
  .blok-izgara.ters > .satir-liste{ order:2; }
  /* ---------- mobil manşet (07haber / kayserianahaber düzeni) ----------
     Başlık görselin ÜSTÜNE biner, altına numaralı şerit gelir.
     Metin mutlak konumlandığı için her slayt aynı yükseklikte olur; eskiden
     .vitrin-cerceve en uzun slayta göre uzuyor, kısa slayt açıkken altta
     ekran boyu ölü boşluk kalıyordu. */
  .vitrin{ background:var(--murekkep); }
  .slayt{ position:relative; }
  .slayt-gorsel{ aspect-ratio:4/3; }
  .slayt-yazi{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    margin:0; padding:64px 16px 14px;
    background:linear-gradient(to top, rgba(9,7,5,.95) 0%, rgba(9,7,5,.78) 46%, rgba(9,7,5,0) 100%);
    border-top:0;
  }
  .slayt-yazi .etiket{
    background:var(--vurgu); color:#fff;
    padding:4px 9px; letter-spacing:.12em;
  }
  .slayt-yazi h1,
  .slayt-yazi h2{ font-size:21px; line-height:1.16; margin:9px 0 7px; }
  .slayt-yazi h1 a,
  .slayt-yazi h2 a{ color:#fbf9f5; background-image:none; }
  .slayt-yazi p{ display:none; }
  .slayt-yazi .ustveri{ color:rgba(251,249,245,.66); }

  .vitrin-kontrol{
    position:static; display:flex; align-items:center; gap:2px;
    padding:8px 6px; background:var(--murekkep); backdrop-filter:none;
  }
  .vitrin-ok{ width:28px; height:30px; flex:none; border-radius:5px; }
  /* justify-content:center taşan şeritte İLK ögeyi kırpar — 320px'te
     kaydırma kutusu soldan başlamadığı için "01" hiç görünmüyordu.
     flex-start ile şerit baştan başlar, fazlası sağa kayar. */
  .vitrin-sayac{
    flex:1; justify-content:flex-start; gap:3px;
    overflow-x:auto; scrollbar-width:none;
  }
  .vitrin-sayac::-webkit-scrollbar{ display:none; }
  .vitrin-sayac button{
    flex:none; width:auto; min-width:25px; height:30px; padding:0 4px;
    border-radius:5px; font:600 12px/1 var(--dar); letter-spacing:0;
    color:#b3aa9c; background:rgba(255,255,255,.07);
  }
  .vitrin-sayac button.acik{ background:var(--vurgu); color:#fff; }
  .vitrin-sayac button.acik::after{ display:none; }
  /* Masaüstünde sekmeler çizgi, telefonda NUMARA. Çizgiyi üreten ::before
     burada kapatılmazsa rakamın üstünde ince bir çubuk kalır. */
  .vitrin-sayac button::before{ display:none; }
  .onecikan{ grid-template-columns:minmax(0,1fr); }
  .oc-kart{ padding:0 !important; border-left:0 !important; }
  .oc-kart + .oc-kart{ padding-top:24px !important; border-top:1px solid var(--tel); }
  .yazar-izgara{ grid-template-columns:minmax(0,1fr); }
  .yazar{ padding:0 !important; border-left:0 !important; }
  .yazar + .yazar{ padding-top:22px !important; border-top:1px solid var(--tel); }
  .ilceler{ padding:22px; }
  /* Telefonda TEK sütun dipnotu gereksiz yere uzatıyordu: altı liste alt
     alta ekranlarca sürüyordu. İki sütun yüksekliği yarıya indiriyor. */
  .dipnot-ust{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 20px; padding:34px 0 28px; }
  /* Telefonda liste İÇİNDE iki sütun olmaz, 80 piksele sıkışır. Tek sütuna
     dönüyor ve normal hücresinde, Kurumsal'ın yanında kalıyor: iki hücreye
     yayıp Kurumsal'ı ayrı satıra itmek dipnotu 100 piksel UZATIYORDU. */
  .dipnot-sutun.genis ul{ columns:1; }
  .dipnot-sutun li{ padding:4px 0; }
  .dipnot-marka .dipnot-iletisim li{ padding:4px 0; }
  .foto-izgara{ gap:14px; }
  .satir-genis a{ flex-direction:column; gap:14px; }
  .satir-genis figure{ width:100%; height:auto; aspect-ratio:16/10; }
  .yazi-govde p{ font-size:calc(16px * var(--punto, 1)); }
  .yazi-govde > p:first-of-type::first-letter{ font-size:52px; }
  .spot{ font-size:17.5px; }
  .imza{ flex-wrap:wrap; }
  .paylas{ width:100%; }
  .kategori-basi{ align-items:flex-start; }
  .kategori-sayi{ text-align:left; }
  .onecikan-uc{ grid-template-columns:minmax(0,1fr); }
  .sondakika-ic{ height:auto; align-items:stretch; }
  .sd-oge span{ font-size:13px; }
  .sondakika-ic{ height:38px; }
  .sd-akis{ padding-left:10px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ac{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------------------
   YAZDIRMA
   Sayfadan yalnızca yazının kendisi çıkar: üst şerit, menü, son dakika, yan
   sütun, ilgili haberler, yorumlar ve araç çubuğu basılmaz. Bağlantılar
   kâğıtta işe yaramadığı için adresleri yazının yanına açılır.
--------------------------------------------------------------------------- */
@media print{

  html, body{ background:#fff !important; color:#000; font-size:11.5pt; }
  .kap, .govde, .sutun-ana, .yazi-sutun{
    display:block !important; width:auto !important; max-width:none !important;
    margin:0 !important; padding:0 !important; border:0 !important;
  }
  .yazi-govde{ max-width:none; }
  .yazi-govde p{ font-size:11.5pt; line-height:1.55; color:#000; orphans:3; widows:3; }
  .yazi-govde > p:first-of-type::first-letter{ float:none; font-size:inherit; margin:0; color:#000; }
  .yazi-basi h1{ font-size:20pt; line-height:1.15; }
  .yazi-gorsel{ break-inside:avoid; }
  .yazi-gorsel img{ max-width:100% !important; max-height:9cm; object-fit:contain; filter:none !important; }
  h1, h2, h3{ break-after:avoid; }

  /* kâğıtta tıklanamayan bağlantının adresi görünsün */
  .yazi-govde a[href^="http"]::after{
    content:" (" attr(href) ")"; font-size:9pt; color:#555; word-break:break-all;
  }
  .tts-okunuyor{ background:none; text-decoration:none; }
}

/* ==========================================================================
   CMS BİLEŞENLERİ — dinamik içerikle gelen ek parçalar
   ========================================================================== */

/* logo (panelden yüklendiyse yazı yerine görsel) */
/* Gazete künyesinden alınan OBJEKTİF logosu, en boy oranı 4:1 */
/* Tüm logo yükseklikleri burada, dardan genişe sırayla: bu kurallar künyenin
   kendi mobil bloğundan SONRA geldiği için sıralama önemli. */
.marka-logo{ height:64px; width:auto; max-width:100%; }
@media (max-width:980px){ .marka-logo{ height:50px; } }
@media (max-width:700px){ .marka-logo{ height:36px; } }
/* 320px'lik eski telefonlarda künye satırı alta sarmasın diye bir tık küçük */
@media (max-width:359px){
  .marka-logo{ height:30px; }
  .dugme-egazete{ padding:0 10px; letter-spacing:.05em; }
}

/* Kapağı olmayan içerik: 10 illüstrasyondan biri (bkz. inc/bootstrap.php ›
   yer_tutucu). Gerçek kapakla aynı kutuyu doldurur ki kart yükseklikleri
   şaşmasın. */
.yer-tutucu{ display:block; width:100%; height:100%; object-fit:cover; }

/* yalnız avatar gibi illüstrasyonun yakışmadığı yerlerde kullanılan sade desen */
.gorsel-yok{
  display:block; width:100%; height:100%; min-height:100%;
  background:repeating-linear-gradient(-45deg, var(--kagit-koyu) 0 12px, rgba(0,0,0,.02) 12px 24px);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.08);
}

/* 404 */
.bulunamadi{ padding:80px 0 100px; text-align:center; }
.dortyuzdort{
  font-family:var(--baslik); font-weight:700; font-size:clamp(70px,12vw,130px);
  line-height:.9; color:var(--vurgu); letter-spacing:-.04em;
}
.bulunamadi h1{ font-family:var(--baslik); font-size:26px; margin:14px 0 10px; }
.bulunamadi p{ color:var(--murekkep-3); margin-bottom:24px; }

.dugme-ana{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; background:var(--murekkep); color:var(--kagit-acik);
  font:600 12px/1 var(--dar); letter-spacing:.13em; text-transform:uppercase;
  border:0; cursor:pointer; transition:background var(--gecis);
}
.dugme-ana:hover{ background:var(--vurgu); }

/* boş durum */
.bos-durum{
  padding:56px 24px; text-align:center;
  border:1px solid var(--tel); background:var(--kagit-acik);
}
.bos-durum h2{ font-family:var(--baslik); font-size:22px; margin-bottom:8px; }
.bos-durum p{ color:var(--murekkep-3); font-size:14.5px; }

/* sıralama düğmeleri artık bağlantı */
.siralama-dugmeler a{
  padding:8px 13px;
  font:600 11px/1 var(--dar); letter-spacing:.12em; text-transform:uppercase;
  color:var(--soluk); border:1px solid transparent;
  transition:all var(--gecis);
}
.siralama-dugmeler a:hover{ color:var(--murekkep); border-color:var(--tel-koyu); }
.siralama-dugmeler a.acik{ background:var(--murekkep); color:#fff; border-color:var(--murekkep); }

/* yazar sayfası başlığı */
.yazar-basi{
  display:flex; gap:26px; align-items:flex-start;
  padding-bottom:26px; margin-bottom:30px; border-bottom:2px solid var(--murekkep);
}
.yazar-basi img{
  width:120px; height:142px; object-fit:cover; flex:none;
  filter:grayscale(1) contrast(1.06);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.14);
}
.yazar-basi h1{ font-family:var(--baslik); font-size:32px; letter-spacing:-.024em; }
.yazar-basi .yazar-unvan{ margin:6px 0 12px; }
.yazar-basi p{ font-size:15px; line-height:1.7; color:var(--murekkep-3); max-width:60ch; }
.yazar-sosyal{ display:flex; gap:7px; margin-top:14px; }
.yazar-sosyal a{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--tel-koyu); color:var(--murekkep-2);
  transition:all var(--gecis);
}
.yazar-sosyal a:hover{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }
.yazar-sayi{
  display:block; margin-top:9px;
  font:600 10.5px/1 var(--dar); letter-spacing:.14em; text-transform:uppercase; color:var(--soluk);
}
.yazar-izgara-genis{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0; }
.yazar-izgara-genis .yazar{
  padding:20px 24px !important; border-left:1px solid var(--tel); border-top:1px solid var(--tel);
}

/* e-gazete */
.egazete-tek{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:34px;
  align-items:start; padding-bottom:8px;
}
.egazete-kapak-buyuk img{
  width:100%; box-shadow:8px 9px 0 rgba(22,19,15,.1), inset 0 0 0 1px rgba(22,19,15,.14);
}
.egazete-bilgi h2{ font-family:var(--baslik); font-size:27px; letter-spacing:-.022em; margin:8px 0 12px; }
.egazete-bilgi .sayi-no{
  font:600 11px/1 var(--dar); letter-spacing:.16em; text-transform:uppercase; color:var(--soluk);
  margin-bottom:8px;
}
.egazete-bilgi p{ color:var(--murekkep-3); font-size:14.5px; margin-bottom:8px; }
.egazete-bilgi .dugme-ana{ margin-top:14px; }
.uyari-yumusak{
  padding:12px 14px; background:var(--kagit-koyu); border-left:3px solid var(--altin);
  font-size:13.5px; color:var(--murekkep-2);
}
.egazete-izgara{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:18px;
}
.egazete-oge{ display:block; }
.egazete-oge-kapak{
  display:block; aspect-ratio:3/4; overflow:hidden; background:var(--kagit-koyu);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.1);
  transition:transform var(--gecis), box-shadow var(--gecis);
}
.egazete-oge-kapak img{ width:100%; height:100%; object-fit:cover; }
.egazete-oge:hover .egazete-oge-kapak{
  transform:translateY(-3px); box-shadow:4px 6px 0 rgba(22,19,15,.12), inset 0 0 0 1px rgba(22,19,15,.1);
}
.egazete-oge.secili .egazete-oge-kapak{ box-shadow:0 0 0 2px var(--vurgu); }
.egazete-oge-tarih{
  display:block; margin-top:9px;
  font:600 12px/1 var(--dar); letter-spacing:.04em; color:var(--murekkep);
}
.egazete-oge-sayi{ display:block; margin-top:3px; font-size:11.5px; color:var(--soluk); }

/* galeri detay */
.galeri-izgara{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.galeri-oge{ margin:0; }
.galeri-oge img, .galeri-oge video{
  width:100%; height:auto; box-shadow:inset 0 0 0 1px rgba(22,19,15,.1);
}
.galeri-oge figcaption{
  margin-top:9px; font-size:13px; line-height:1.5; color:var(--soluk);
  padding-left:11px; border-left:2px solid var(--vurgu);
}
.galeri-embed iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; background:#000; }

/* Video kapağı (oynatıcı tıklayınca yüklenir)
   --------------------------------------------------------------------------
   Bir galeride 5-6 YouTube gömmesi doğrudan basılırsa her biri megabaytlarca
   JS çeker; sayfa daha okunmadan ağırlaşır. Önce kapak basılıyor, oynatıcı
   ancak tıklayınca geliyor. Oynat düğmesi ana sayfadaki video bloğuyla aynı
   (.oynat), böylece okur ne olduğunu ilk bakışta biliyor. */
.video-kapak{
  position:relative; display:block; line-height:0; overflow:hidden;
  background:#000; box-shadow:inset 0 0 0 1px rgba(22,19,15,.1);
}
.video-kapak img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; display:block;
  opacity:.88; transition:opacity var(--gecis), transform 700ms var(--gecis);
}
.video-kapak:hover img{ opacity:1; transform:scale(1.03); }
.video-kapak:hover .oynat{ width:66px; height:66px; }
.video-kapak:focus-visible{ outline:2px solid var(--vurgu); outline-offset:2px; }
/* Kaldırılmış/gizli videoda platform hiçbir kapak vermez, gri bir yer tutucu
   döner. Onu esnetip gerçek kapak gibi göstermek yerine gizliyoruz; geriye
   oynat düğmeli koyu bir kare kalıyor, bağlantı da çalışmayı sürdürüyor. */
.video-kapak.kapaksiz img{ visibility:hidden; }
.video-kapak.kapaksiz{ aspect-ratio:16/9; background:#16130f; }
@media (prefers-reduced-motion:reduce){
  .video-kapak img{ transition:none; }
  .video-kapak:hover img{ transform:none; }
}
/* Video galerilerin çoğu tek gömmeden ibaret; auto-fill tek öğeyi sayfa
   genişliğine yayıp 16:9 oranını devasa yapıyor. Oynatıcı okunur bir ende ortalanır. */
.galeri-izgara-video{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  max-width:960px; margin-inline:auto;
}

/* iletişim */
.iletisim-izgara{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0; }
.iletisim-kart{
  padding:26px 24px; border:1px solid var(--tel); margin-left:-1px; margin-top:-1px;
  background:var(--kagit-acik);
}
.iletisim-kart > .ik{ color:var(--vurgu); margin-bottom:14px; }
.iletisim-kart h3{
  font:600 10.5px/1 var(--dar); letter-spacing:.18em; text-transform:uppercase;
  color:var(--soluk); margin-bottom:9px;
}
.iletisim-kart p{ font-size:15px; line-height:1.6; }
.iletisim-kart a:hover{ color:var(--vurgu); }

/* yorumlar */
.yorumlar{ margin-top:44px; }
.yorum-form{
  padding:22px; border:1px solid var(--tel); background:var(--kagit-acik); margin-bottom:26px;
}
.yorum-form .fld{
  display:block; margin-bottom:6px;
  font:600 10.5px/1 var(--dar); letter-spacing:.13em; text-transform:uppercase; color:var(--soluk);
}
.yorum-form .fld span{ text-transform:none; letter-spacing:0; color:var(--tel-koyu); }
.yorum-form input[type=text], .yorum-form input[type=email], .yorum-form textarea{
  width:100%; padding:10px 12px; margin-bottom:14px;
  font-family:var(--sans); font-size:14.5px; color:var(--murekkep);
  background:var(--kagit); border:1px solid var(--tel-koyu); border-radius:0;
}
.yorum-form textarea{ min-height:110px; resize:vertical; line-height:1.6; }
.yorum-form input:focus, .yorum-form textarea:focus{ outline:none; border-color:var(--murekkep); }
.yorum-form .grid-iki{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 16px; }
/* Bal küpü alanı. `.yorum-form input` kuralı (sınıf+etiket) bu kuraldan
   daha özgül olduğu için genişlik/yükseklik eziliyor, kutu ekran dışında
   360px kalıyordu. Görünürlüğü etkilemiyor ama alan gerçekten 1px olsun. */
.yorum-form input.tuzak,
.tuzak{ position:absolute; left:-9999px; width:1px; height:1px; min-height:0; padding:0; border:0; opacity:0; }
.yorum-not{ margin:0 0 14px; font-size:13.5px; color:var(--vurgu); }
.yorum-listesi li{ padding:18px 0; border-top:1px solid var(--tel); }
.yorum-ust{ display:flex; align-items:baseline; gap:10px; margin-bottom:7px; }
.yorum-ust b{ font-size:14.5px; }
.yorum-ust span{ font:500 11.5px/1 var(--dar); color:var(--soluk); letter-spacing:.05em; }
.yorum-listesi p{ font-size:14.5px; line-height:1.65; color:var(--murekkep-2); }
.uyari{
  padding:12px 16px; margin-bottom:16px;
  background:var(--kagit-koyu); border-left:3px solid var(--vurgu); font-size:14px;
}

/* büyük arama kutusu */
.ara-buyuk{ height:54px; margin-bottom:26px; }
.ara-buyuk input{ width:100%; font-size:16px; padding:0 16px; }
.ara-buyuk button{ width:54px; }
.ara-buyuk .ik{ width:20px; height:20px; }

/* statik sayfa tarihi */
.sayfa-tarih{
  font:500 12px/1 var(--dar); letter-spacing:.05em; color:var(--soluk); margin-top:12px;
}

@media (max-width:820px){
  .egazete-tek{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .egazete-kapak-buyuk{ max-width:260px; }
  .yazar-basi{ flex-direction:column; gap:18px; }
  .yazar-basi img{ width:96px; height:114px; }
}

/* ============================================================ e-gazete okuyucu
   Baskı görsel olarak taranıyor. Solda sayfa şeridi, ortada okunan sayfa.
   Kimlik gereği yuvarlatma yok, gölge yerine matbaa gölgesi (kaydırılmış blok). */
.okur-basi{
  display:flex; flex-wrap:wrap; gap:18px 28px; align-items:flex-end;
  justify-content:space-between; padding:6px 0 20px; border-bottom:2px solid var(--murekkep);
}
.okur-basi h1{
  font-family:var(--baslik); font-size:clamp(26px,3.4vw,38px); letter-spacing:-.025em;
  margin:8px 0 4px; line-height:1.08;
}
.okur-basi p{ color:var(--murekkep-3); font-size:14px; margin:0; }

.okur-gezinme{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.okur-gezinme a,
.okur-gezinme span{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  font:600 12px/1 var(--dar); letter-spacing:.06em; text-transform:uppercase;
  color:var(--murekkep); border:1px solid var(--tel); background:var(--kagit-acik);
  transition:background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.okur-gezinme a:hover{ background:var(--murekkep); border-color:var(--murekkep); color:var(--kagit); }
.okur-gezinme .pasif{ color:var(--soluk); background:transparent; border-style:dashed; }
.okur-gezinme .okur-arsiv-bag{ background:var(--murekkep); border-color:var(--murekkep); color:var(--kagit); }
.okur-gezinme .okur-arsiv-bag:hover{ background:var(--vurgu); border-color:var(--vurgu); }
.okur-gezinme .ik{ width:13px; height:13px; }

.okuyucu{
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:26px;
  align-items:start; padding:28px 0 34px;
}

/* sayfa şeridi */
.okur-serit{
  display:flex; flex-direction:column; gap:12px;
  max-height:calc(100vh - 120px); overflow-y:auto; padding-right:6px;
  scrollbar-width:thin;
}
.okur-kucuk{ display:block; position:relative; }
.okur-kucuk img{
  display:block; width:100%; height:auto; background:var(--kagit-koyu);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.16);
  filter:saturate(.9); transition:box-shadow var(--gecis), transform var(--gecis);
}
.okur-kucuk b{
  position:absolute; left:0; bottom:0; min-width:22px; padding:3px 6px;
  font:600 11px/1 var(--dar); letter-spacing:.04em;
  background:var(--murekkep); color:var(--kagit);
}
.okur-kucuk:hover img{ transform:translateY(-2px); box-shadow:3px 4px 0 rgba(22,19,15,.15), inset 0 0 0 1px rgba(22,19,15,.16); }
.okur-kucuk.acik img{ box-shadow:0 0 0 2px var(--vurgu); }
.okur-kucuk.acik b{ background:var(--vurgu); }

/* okunan sayfa */
.okur-sahne{ min-width:0; }
/* Gazete sayfası dikey ve uzun. Ekrana sığdırılır ki kumanda hep görünsün;
   okumak isteyen sayfaya tıklayıp büyüteçte asıl taramayı açar. */
.okur-sayfa{ margin:0; display:grid; place-items:center; cursor:zoom-in; }
.okur-sayfa img{
  display:block; width:auto; max-width:100%; height:auto;
  max-height:calc(100vh - 190px); background:var(--kagit-acik);
  box-shadow:10px 12px 0 rgba(22,19,15,.11), inset 0 0 0 1px rgba(22,19,15,.16);
}

/* Sayfa uzun; kumanda ekranın altına yapışır ki okurken hep erişilebilir olsun. */
.okur-kumanda{
  position:sticky; bottom:0; z-index:5;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:18px; padding:12px 0;
  background:var(--kagit); border-top:1px solid var(--tel);
}
.okur-ok{
  display:inline-grid; place-items:center; width:40px; height:40px;
  border:1px solid var(--murekkep); background:var(--murekkep); color:var(--kagit);
  transition:background var(--gecis), border-color var(--gecis);
}
.okur-ok:hover{ background:var(--vurgu); border-color:var(--vurgu); }
.okur-ok.pasif{ background:transparent; color:var(--soluk); border-color:var(--tel); border-style:dashed; pointer-events:none; }
.okur-ok .ik{ width:16px; height:16px; }
.okur-durum{ font:600 13px/1 var(--dar); letter-spacing:.1em; color:var(--murekkep-3); }
.okur-durum b{ font-size:19px; color:var(--murekkep); letter-spacing:-.01em; }
.okur-tamboy{
  margin-left:auto; padding:9px 14px; border:1px solid var(--tel);
  font:600 11.5px/1 var(--dar); letter-spacing:.12em; text-transform:uppercase;
  color:var(--murekkep-2); background:var(--kagit-acik);
}
.okur-tamboy:hover{ background:var(--murekkep); border-color:var(--murekkep); color:var(--kagit); }
.okur-ipucu{ margin:12px 0 0; font-size:12.5px; color:var(--soluk); }

/* büyüteç */
.okur-buyutec{
  position:fixed; inset:0; z-index:200; background:rgba(22,19,15,.94);
  overflow:auto; padding:24px; cursor:zoom-out;
}
.okur-buyutec[hidden]{ display:none; }
.okur-buyutec img{ display:block; margin:0 auto; max-width:none; width:min(1600px,100%); height:auto; }
.okur-kapat{
  position:fixed; top:14px; right:18px; width:42px; height:42px; z-index:201;
  border:1px solid var(--tel-ters); background:transparent; color:#fff;
  font-size:28px; line-height:1; cursor:pointer;
}
.okur-kapat:hover{ background:var(--vurgu); border-color:var(--vurgu); }

/* yıl şeridi (e-gazete arşivi) */
.yil-serit{
  display:flex; flex-wrap:wrap; gap:0; margin-bottom:24px;
  border-top:1px solid var(--tel); border-left:1px solid var(--tel);
}
.yil-serit a{
  display:inline-flex; align-items:baseline; gap:6px; padding:10px 15px;
  border-right:1px solid var(--tel); border-bottom:1px solid var(--tel);
  font:600 13px/1 var(--dar); letter-spacing:.04em; color:var(--murekkep-2);
  transition:background var(--gecis), color var(--gecis);
}
.yil-serit a i{ font-style:normal; font-size:11px; color:var(--soluk); }
.yil-serit a:hover{ background:var(--kagit-koyu); }
.yil-serit a.acik{ background:var(--murekkep); color:var(--kagit); }
.yil-serit a.acik i{ color:rgba(243,239,230,.6); }

@media (max-width:900px){
  .okuyucu{ grid-template-columns:1fr; gap:16px; }
  .okur-serit{
    flex-direction:row; max-height:none; overflow-x:auto; overflow-y:hidden;
    padding:0 0 8px; order:2;
  }
  .okur-kucuk{ flex:0 0 92px; }
  .okur-sahne{ order:1; }
  .okur-tamboy{ margin-left:0; }
}

/* ---------------------------------------------------------------------------
   HABER GÖRSELLERİ: FAREYLE ÜSTÜNE GELİNCE SİYAH BEYAZ
   Kartlar zaten hafif doygunluğu düşük duruyor (gazete kâğıdı hissi); üstüne
   gelince tamamen griye iner. Yalnızca HABER görselleri: galeri, video,
   e-gazete kapağı ve yazar fotoğrafları kendi davranışlarını korur.
   .oc-kart hover'da doygunluğu artırıyordu, bu blok sonra geldiği için ezer.
--------------------------------------------------------------------------- */
.slayt:hover .slayt-gorsel img,
.oc-kart a:hover img,
.one-haber a:hover img,
.satir a:hover img,
.kategori-one a:hover img,
.yazi-gorsel:hover img{
  filter:grayscale(1) contrast(1.06);
}

/* Dokunmatik cihazda :hover takılı kalabiliyor; efekt yalnızca gerçek
   imleçli cihazlarda uygulanır. */
@media (hover:none){
  .slayt:hover .slayt-gorsel img,
  .oc-kart a:hover img,
  .one-haber a:hover img,
  .satir a:hover img,
  .kategori-one a:hover img,
  .yazi-gorsel:hover img{ filter:saturate(.9) contrast(1.03); }
}

/* ---------------------------------------------------------------------------
   PUAN DURUMU
   Yan sütunda dar (# / takım / O / Av / P), tam cetvelde geniş (G B M de var).
   Vurgulanan takım (Batman Petrolspor) kırmızı şeritle işaretlenir.
--------------------------------------------------------------------------- */
.puan-cetvel{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.puan-cetvel th{
  font:600 10px/1 var(--dar); letter-spacing:.14em; text-transform:uppercase;
  color:var(--soluk); text-align:right; padding:0 0 9px; border-bottom:1px solid var(--tel);
}
.puan-cetvel th:nth-child(2){ text-align:left; }
.puan-cetvel th.s{ text-align:center; width:26px; }
.puan-cetvel td{
  padding:8px 0; text-align:right; font-size:13px; color:var(--murekkep-2);
  border-bottom:1px solid var(--tel-acik, rgba(22,19,15,.07));
}
.puan-cetvel td.s{
  text-align:center; width:26px;
  font:600 11px/1 var(--dar); color:var(--soluk);
}
.puan-cetvel td.t{
  text-align:left; padding-left:8px; color:var(--murekkep); font-weight:500;
  max-width:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.puan-cetvel td.p{ font-weight:700; color:var(--murekkep); }
.puan-cetvel tbody tr:last-child td{ border-bottom:0; }
.puan-cetvel tr.bizim td{ background:rgba(0,132,198,.08); }
.puan-cetvel tr.bizim td.s{ color:var(--vurgu); font-weight:700; }
.puan-cetvel tr.bizim td.t{ color:var(--vurgu); font-weight:700; }
.puan-cetvel tr.ara td{
  text-align:center; color:var(--soluk); padding:2px 0; letter-spacing:.3em;
}

/* yan sütundaki "tüm cetvel" bağlantısı */
.puan-tumu{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--tel);
  font:600 10.5px/1 var(--dar); letter-spacing:.13em; text-transform:uppercase;
  color:var(--soluk);
}
.puan-tumu span{ display:inline-flex; align-items:center; gap:5px; color:var(--vurgu); }
.puan-tumu .ik{ width:11px; height:11px; }
.puan-tumu:hover span{ text-decoration:underline; }

/* tam cetvel sayfası */
.puan-sarmal{ overflow-x:auto; }
.puan-cetvel.genis{ min-width:460px; }
.puan-cetvel.genis td{ padding:11px 0; font-size:14px; }
.puan-cetvel.genis td.t{ max-width:none; white-space:normal; padding-left:10px; }
.puan-cetvel.genis th, .puan-cetvel.genis td{ padding-left:6px; }
.puan-not{
  margin-top:16px; font-size:12.5px; line-height:1.6; color:var(--soluk);
}
.puan-not b{ color:var(--vurgu); font-weight:600; }

/* ---------------------------------------------------------------------------
   FİKSTÜR
   Yan sütunda tek maç kartı (Batman Petrolspor), /fikstur sayfasında haftanın
   tamamı. Puan durumuyla aynı görsel dil: vurgulanan takım kırmızı.
--------------------------------------------------------------------------- */

/* --- yan sütundaki maç kartı --- */
.mac-kart{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  padding:12px 0 10px; text-align:center;
}
.mac-takim{
  font:600 12.5px/1.35 var(--sans); color:var(--murekkep-2);
  overflow-wrap:anywhere;
}
.mac-takim.bizim{ color:var(--vurgu); }
.mac-orta{ min-width:52px; }
.mac-skor, .mac-saat{
  display:block; font:700 17px/1 var(--dar); color:var(--murekkep);
  font-variant-numeric:tabular-nums;
}
.mac-saat{ font-size:15px; color:var(--soluk); }
.mac-gun{
  grid-column:1 / -1; margin-top:2px;
  font:600 10.5px/1 var(--dar); letter-spacing:.12em; text-transform:uppercase;
  color:var(--soluk);
}
.mac-kart:hover .mac-takim.bizim{ text-decoration:underline; }

/* --- hafta şeridi --- */
/* 38 hafta dar ekrana sığmaz; şerit kendi içinde yatay kayar, sayfa gövdesi
   yana taşmaz. Seçili hafta kırmızı. */
.hafta-serit{
  display:flex; gap:4px; overflow-x:auto; padding-bottom:8px; margin-bottom:16px;
  border-bottom:1px solid var(--tel); scrollbar-width:thin;
}
.hafta-serit a{
  flex:0 0 auto; min-width:30px; padding:6px 0; text-align:center;
  border:1px solid var(--tel); border-radius:2px;
  font:600 12px/1 var(--dar); color:var(--murekkep-2);
  font-variant-numeric:tabular-nums;
}
.hafta-serit a:hover{ border-color:var(--vurgu); color:var(--vurgu); }
.hafta-serit a.acik{
  background:var(--vurgu); border-color:var(--vurgu); color:#fff;
}

/* --- fikstür cetveli --- */
.fikstur-cetvel{
  width:100%; min-width:440px; border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.fikstur-cetvel th{
  font:600 10px/1 var(--dar); letter-spacing:.14em; text-transform:uppercase;
  color:var(--soluk); text-align:left; padding:0 6px 9px; border-bottom:1px solid var(--tel);
}
.fikstur-cetvel td{
  padding:11px 6px; font-size:14px; color:var(--murekkep-2);
  border-bottom:1px solid var(--tel-acik, rgba(22,19,15,.07));
  vertical-align:middle;
}
.fikstur-cetvel tbody tr:last-child td{ border-bottom:0; }
.fikstur-cetvel .tr-tarih{ width:132px; white-space:nowrap; }
.fikstur-cetvel td.tr-tarih b{
  display:block; font:600 11px/1.3 var(--dar); letter-spacing:.06em;
  text-transform:uppercase; color:var(--murekkep);
}
.fikstur-cetvel td.tr-tarih .saat{ font-size:12.5px; color:var(--soluk); }
.fikstur-cetvel .tr-ev{ text-align:right; }
.fikstur-cetvel .tr-skor{ width:62px; text-align:center; white-space:nowrap; }
.fikstur-cetvel td.tr-skor b{ font:700 15px/1 var(--dar); color:var(--murekkep); }
.fikstur-cetvel .oynanmadi{ color:var(--soluk); }
.fikstur-cetvel tr.bizim td{ background:rgba(0,132,198,.08); }
.fikstur-cetvel tr.bizim td.tr-ev,
.fikstur-cetvel tr.bizim td.tr-dep{ color:var(--vurgu); font-weight:700; }

@media (max-width:560px){
  .fikstur-cetvel{ min-width:360px; }
  .fikstur-cetvel td{ padding:9px 4px; font-size:13px; }
  .fikstur-cetvel .tr-tarih{ width:96px; }
}

/* ---------------------------------------------------------------------------
   HAMBURGER DÜĞMESİ VE MENÜ PANELİ
   Künye satırındaki düğme sağdan açılan tam menüyü getirir: arama,
   kategoriler, ilçeler, bölümler, sosyal. Üstteki kategori şeridi durur;
   panel onun yerine geçmez, kapsamı daha geniştir.
--------------------------------------------------------------------------- */
.hamburger{
  width:42px; height:42px; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--tel); background:var(--kagit);
  transition:border-color var(--gecis), background var(--gecis);
}
.hamburger span{
  display:block; width:18px; height:2px; background:var(--murekkep);
  transition:transform 260ms var(--gecis), opacity 180ms var(--gecis);
}
.hamburger:hover{ border-color:var(--murekkep); }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Üst şerit dar ekranda kalkıyor; gazetenin tarihi panel başlığında durur. */
.mp-tarih{
  display:none; align-items:center; gap:8px;
  margin:-6px 0 18px;
  font:600 11px/1 var(--dar); letter-spacing:.13em; text-transform:uppercase;
  color:var(--murekkep-3);
}
.mp-tarih .ik{ width:14px; height:14px; color:var(--altin); }
@media (max-width:700px){ .mp-tarih{ display:flex; } }

.menu-perde{
  position:fixed; inset:0; z-index:300;
  background:rgba(22,19,15,.55); backdrop-filter:blur(2px);
  opacity:0; transition:opacity 240ms var(--gecis);
}
.menu-perde.acik{ opacity:1; }

.menu-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:301;
  width:min(380px, 88vw); overflow-y:auto; overscroll-behavior:contain;
  background:var(--kagit); border-left:1px solid var(--tel);
  box-shadow:-14px 0 40px rgba(22,19,15,.18);
  padding:20px 24px 34px;
  transform:translateX(100%); transition:transform 260ms cubic-bezier(.2,.7,.3,1);
}
.menu-panel.acik{ transform:translateX(0); }

.mp-bas{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; }
.mp-logo{ height:40px; width:auto; }
.mp-ad{ font-family:var(--baslik); font-weight:700; font-size:20px; }
.mp-kapat{
  width:34px; height:34px; flex:0 0 auto; font-size:26px; line-height:1;
  color:var(--soluk); transition:color var(--gecis);
}
.mp-kapat:hover{ color:var(--vurgu); }

.mp-ara{ display:flex; border:1px solid var(--tel); background:var(--kagit-acik); margin-bottom:22px; }
.mp-ara input{ flex:1; min-width:0; padding:11px 13px; font-size:14px; background:none; border:0; }
.mp-ara button{ width:42px; display:grid; place-items:center; color:var(--soluk); }
.mp-ara button:hover{ color:var(--vurgu); }
.mp-ara .ik{ width:16px; height:16px; }

.mp-baslik{
  font:700 10.5px/1 var(--dar); letter-spacing:.2em; text-transform:uppercase;
  color:var(--soluk); margin:0 0 11px; padding-bottom:9px; border-bottom:1px solid var(--tel);
}
.mp-kat{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px; }
.mp-kat a{
  padding:7px 12px; border:1px solid var(--tel); background:var(--kagit-acik);
  font:600 11.5px/1 var(--dar); letter-spacing:.06em; text-transform:uppercase;
  color:var(--murekkep-2);
  transition:background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.mp-kat a:hover{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }

.mp-bolum{ display:grid; margin-bottom:22px; }
.mp-bolum a{
  padding:11px 2px; border-bottom:1px solid var(--tel);
  font-size:15px; color:var(--murekkep-2);
  transition:color var(--gecis), padding-left var(--gecis);
}
.mp-bolum a:hover{ color:var(--vurgu); padding-left:8px; }

.mp-sosyal{ display:flex; gap:6px; }
.mp-sosyal a{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--tel); color:var(--soluk);
  transition:background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.mp-sosyal a:hover{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }
.mp-sosyal .ik{ width:15px; height:15px; }

@media (prefers-reduced-motion:reduce){
  .menu-panel, .menu-perde, .hamburger span{ transition:none; }
}

/* ---------------------------------------------------------------------------
   OKUMA ARAÇLARI
   Punto, sesli dinleme, indirme, kopyalama, yazdırma. Gövdenin hemen üstünde,
   yazıdan ince bir çizgiyle ayrılır.
--------------------------------------------------------------------------- */
.okuma-araclari{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin:0 0 26px; padding:12px 0;
  border-top:1px solid var(--tel); border-bottom:1px solid var(--tel);
}
.oa-dugme{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border:1px solid var(--tel); background:var(--kagit-acik);
  font:600 11px/1 var(--dar); letter-spacing:.11em; text-transform:uppercase;
  color:var(--murekkep-2); white-space:nowrap;
  transition:background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.oa-dugme:hover{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }
.oa-dugme .ik{ width:14px; height:14px; }
.oa-ayrac{ width:1px; height:22px; background:var(--tel); margin:0 4px; }

.oa-ses{ border-color:var(--vurgu); color:var(--vurgu); }
.oa-ses:hover{ background:var(--vurgu); border-color:var(--vurgu); color:#fff; }
.oa-ses.okuyor{ background:var(--vurgu); color:#fff; }
.oa-ses.okuyor .ik{ animation:nabiz 1.2s infinite; }

/* Okunan cümle: kullanıcı isteği üzerine ALTI ÇİZİLİ. Arka plan yalnızca
   destekleyici; altı çizgi kalın ve kırmızı olduğu için satır kayması yok. */
.tts-c{ transition:background 160ms var(--gecis); }
.tts-okunuyor{
  background:rgba(0,132,198,.10);
  text-decoration:underline;
  text-decoration-color:var(--vurgu);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

@media (max-width:640px){
  .okuma-araclari{ gap:6px; }
  .oa-dugme{ padding:7px 10px; font-size:10.5px; letter-spacing:.08em; }
  .oa-ayrac{ display:none; }
}


/* ==========================================================================
   Arama önerileri (yazarken açılan liste)
   Kutu formun içine mutlak konumlandırılır; hem masaüstü .ara hem mobil
   paneldeki .mp-ara için aynı stil geçerli.
   ========================================================================== */
/* Öneri listesi menü şeridinin ÜSTÜNDE kalmalı. .menu sticky ve z-index:120;
   öneri kutusu da 120 olunca eşitlikte DOM sırası kazanıyor ve menü listeyi
   örtüyordu. 140: menünün (120) ve yukarı düğmesinin (130) üstünde, okuma
   çubuğunun (150) ve katmanların (200+) altında. */
.oneri-sarmal{ position:relative; z-index:140; }
.oneri-kutu{
  position:absolute; left:0; top:calc(100% + 6px); z-index:140;
  /* Künyedeki arama kutusu dar (~240px); liste onunla aynı genişlikte olunca
     başlıklar okunmaz hâlde kırpılıyordu. Kutudan taşmasına izin veriyoruz. */
  min-width:min(420px, calc(100vw - 32px));
  width:max(100%, 420px);
  max-width:calc(100vw - 32px);
  background:var(--kagit-acik); border:1px solid var(--tel-koyu);
  box-shadow:0 12px 34px rgba(22,19,15,.18);
  max-height:min(60vh, 400px); overflow-y:auto;
}
/* Mobil panelde ve arama sayfasındaki geniş kutuda taşmaya gerek yok */
.mp-ara .oneri-kutu,
.ara-buyuk .oneri-kutu{ width:100%; min-width:0; }
.oneri-kutu[hidden]{ display:none; }
.oneri-oge{
  display:flex; align-items:baseline; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--tel);
  color:var(--murekkep-2); text-decoration:none;
}
.oneri-oge:last-child{ border-bottom:0; }
.oneri-oge:hover,
.oneri-oge.acik{ background:var(--kagit-koyu); color:var(--murekkep); }
.oneri-baslik{
  flex:1; min-width:0; font-family:var(--baslik); font-size:14.5px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.oneri-baslik b{ color:var(--vurgu); font-weight:700; }
.oneri-tarih{
  flex:none; font:500 11px/1 var(--dar); letter-spacing:.03em; color:var(--soluk);
}
/* Mobil panelde kutu daha dar; tarihi gizleyip başlığa yer açıyoruz */
@media (max-width:700px){
  .oneri-tarih{ display:none; }
  .oneri-baslik{ font-size:15px; -webkit-line-clamp:3; }
}

/* ==========================================================================
   BURÇ — yan sütun kutusu ve tam sayfa
   Kaynak Mynet; metin bizim değil, bu yüzden kutu sakin tutuldu: renkli
   gradyan, yıldız deseni, emoji yığını yok. Simge tek süs.
   ========================================================================== */
.modul.burc .burc-secim label{
  display:block; margin-bottom:8px;
  font:500 13px/1.3 var(--sans); color:var(--murekkep-3);
}
.burc-satir{ display:flex; gap:8px; }
.burc-satir select{
  flex:1; min-width:0; height:44px; padding:0 12px;
  font:500 14px/1 var(--sans); color:var(--murekkep);
  background:var(--kagit); border:1px solid var(--tel-koyu);
  border-radius:0;   /* keskin = bilgi; yuvarlak yalnız eylemde */
}
.burc-satir select:focus-visible{ outline:2px solid var(--vurgu); outline-offset:2px; }
.burc-satir button{
  height:44px; padding:0 16px; flex:none;
  background:var(--vurgu); color:#fff;
  font:600 13.5px/1 var(--sans); border-radius:999px;
  transition:background var(--gecis);
}
.burc-satir button:hover{ background:var(--vurgu-koyu); }
.burc-satir button:disabled{ background:var(--soluk); cursor:default; }

.burc-sonuc{ margin-top:14px; padding-top:14px; border-top:1px solid var(--tel); }
.burc-sonuc-ust{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.burc-sonuc-ust h3{
  font-family:var(--baslik); font-weight:700; font-size:17px; letter-spacing:-.015em;
}
.burc-simge{ font-size:26px; line-height:1; color:var(--vurgu); }
.burc-metin{
  font-family:var(--metin); font-size:15px; line-height:1.68; color:var(--murekkep-2);
}
.burc-metin a{ color:var(--vurgu); text-decoration:underline; text-underline-offset:2px; }

/* Kaynak satırı: küçük ama gizli değil. Metin Mynet'in, bunu okur görsün. */
.burc-kaynak{
  margin-top:12px; font:500 11.5px/1.4 var(--dar); color:var(--soluk);
}
.burc-kaynak a{ color:var(--murekkep-3); text-decoration:underline; text-underline-offset:2px; }
.burc-kaynak a:hover{ color:var(--vurgu); }

/* ---------- tam sayfa (/burc/terazi) ---------- */
.burc-sayfa{ max-width:760px; padding-block:26px 48px; }
.burc-baslik{
  display:flex; align-items:center; gap:12px;
  font-family:var(--baslik); font-weight:700;
  font-size:clamp(24px,3.2vw,36px); line-height:1.08; letter-spacing:-.024em;
  margin:14px 0 6px;
}
.burc-baslik .burc-simge{ font-size:1.1em; }
.burc-aralik{ font:500 14px/1.4 var(--dar); color:var(--murekkep-3); margin-bottom:20px; }
.burc-yorum{
  font-family:var(--metin); font-size:18px; line-height:1.72; color:var(--murekkep-2);
  max-width:68ch;
  padding-left:18px; border-left:3px solid var(--vurgu);
}
.burc-yok{ border-left-color:var(--tel-koyu); color:var(--murekkep-3); }
.burc-uyari{
  margin-top:12px; font:500 13px/1.5 var(--sans); color:var(--altin);
}
.burc-sayfa .burc-kaynak{ margin-top:18px; }

/* Burç çipleri: tıklanabilir, yani yuvarlak. */
.burc-hepsi{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:28px; padding-top:22px; border-top:1px solid var(--tel);
}
.burc-cip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:0 14px;
  border:1px solid var(--tel-koyu); border-radius:999px;
  font:500 13.5px/1 var(--sans); color:var(--murekkep-2);
  transition:border-color var(--gecis), color var(--gecis), background var(--gecis);
}
.burc-cip span{ font-size:16px; color:var(--vurgu); }
.burc-cip:hover{ border-color:var(--vurgu); color:var(--vurgu); }
.burc-cip.acik{ background:var(--murekkep); border-color:var(--murekkep); color:#fff; }
.burc-cip.acik span{ color:var(--vurgu-ham); }

/* Yalın /burc sayfasında çipler tek içerik; tarih aralığı da gösterilir ve
   liste ızgaraya oturur. Üstteki ayırıcı çizgi burada gereksiz, çünkü
   çiplerin üstünde ayrılacak bir bölüm yok. */
.burc-hepsi-genis{
  border-top:0; padding-top:0; margin-top:22px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:10px;
}
.burc-hepsi-genis .burc-cip{
  justify-content:flex-start; border-radius:0; padding:12px 16px; min-height:56px;
}
.burc-hepsi-genis .burc-cip i{
  margin-left:auto; font-style:normal;
  font:500 12px/1 var(--dar); color:var(--soluk); white-space:nowrap;
}
.burc-hepsi-genis .burc-cip:hover i{ color:var(--vurgu); }

/* ==========================================================================
   ESKİ SİTEDEN GELEN YAN SÜTUN KUTULARI
   Köşe yazıları · son videolar · foto galeri · diğer sayfalar.
   Ortak dil: gölge yok, keskin köşe, ayrım ince çizgiyle.
   ========================================================================== */
/* Kutu başlığındaki "Tümü" bağlantısı sağa yaslanır. */
.modul-baslik a{
  margin-left:auto; font:600 12.5px/1 var(--sans); color:var(--vurgu);
  letter-spacing:0; text-transform:none;
}
.modul-baslik a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---- köşe yazıları ---- */
.yan-yazi-liste li + li{ border-top:1px solid var(--tel); }
.yan-yazi-liste a{
  display:flex; gap:11px; align-items:flex-start; padding:11px 0;
  border-left:3px solid transparent; transition:border-color var(--gecis), padding-left var(--gecis);
}
.yan-yazi-liste a:hover{ border-left-color:var(--vurgu); padding-left:10px; }
.yan-yazi-liste img,
.yan-yazi-harf{
  width:38px; height:38px; flex:none; object-fit:cover;
  border-radius:999px;          /* portre yuvarlak: yüz, kutu değil */
}
.yan-yazi-harf{
  display:grid; place-items:center; background:var(--kagit-koyu);
  font:700 16px/1 var(--baslik); color:var(--murekkep-3);
}
.yan-yazi-liste b{ display:block; font:600 12.5px/1.3 var(--sans); color:var(--vurgu); }
.yan-yazi-liste em{
  display:block; margin-top:3px; font-style:normal;
  font:500 14px/1.32 var(--baslik); color:var(--murekkep); letter-spacing:-.01em;
}

/* ---- son videolar ---- */
.yan-video-liste li + li{ margin-top:12px; }
.yan-video-liste a{ display:flex; gap:11px; align-items:center; }
.yan-video-liste figure{
  position:relative; margin:0; width:96px; flex:none;
  aspect-ratio:16/10; overflow:hidden; background:var(--kagit-koyu);
}
.yan-video-liste img{ width:100%; height:100%; object-fit:cover; }
/* Oynat işareti küçük bir rozet; 96×60'lık küçük resmi tüm yüzeyi karartan
   bir perdeyle örtmek görseli okunmaz yapıyordu. Rozetin arkasındaki daire
   yeterli kontrastı veriyor. */
.yan-video-oynat{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff;
}
.yan-video-oynat .ik{
  width:26px; height:26px; padding:6px; box-sizing:content-box;
  background:rgba(10,12,15,.62); border-radius:999px;
}
.yan-video-liste a > span{
  font:500 14px/1.32 var(--baslik); color:var(--murekkep); letter-spacing:-.01em;
}
.yan-video-liste a:hover > span{ color:var(--vurgu); }

/* ---- foto galeri ---- */
.yan-foto-izgara{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.yan-foto-izgara a{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--kagit-koyu); }
.yan-foto-izgara img{ width:100%; height:100%; object-fit:cover; transition:transform 420ms var(--gecis); }
.yan-foto-izgara a:hover img{ transform:scale(1.05); }

/* ---- diğer sayfalar ---- */
.yan-sayfa-liste{ display:flex; flex-wrap:wrap; gap:7px; }
.yan-sayfa-liste a{
  display:inline-flex; align-items:center; min-height:34px; padding:0 12px;
  border:1px solid var(--tel-koyu); border-radius:999px;
  font:500 13px/1 var(--sans); color:var(--murekkep-2);
  transition:border-color var(--gecis), color var(--gecis);
}
.yan-sayfa-liste a:hover{ border-color:var(--vurgu); color:var(--vurgu); }

/* ---------- resmi ilan ---------- */
.ilan-liste li + li{ border-top:1px solid var(--tel); }
.ilan-liste a{
  display:block; padding:16px 0;
  border-left:3px solid transparent; transition:border-color var(--gecis), padding-left var(--gecis);
}
.ilan-liste a:hover{ border-left-color:var(--vurgu); padding-left:14px; }
.ilan-liste h2{
  font-family:var(--baslik); font-weight:600; font-size:19px; line-height:1.26;
  letter-spacing:-.015em; margin-bottom:7px;
}
.ilan-liste a:hover h2{ color:var(--vurgu); }

.ilan-sayfa{ max-width:820px; padding-block:26px 48px; }
.ilan-baslik{
  font-family:var(--baslik); font-weight:700;
  font-size:clamp(23px,3vw,34px); line-height:1.1; letter-spacing:-.024em;
  margin:14px 0 18px;
}
/* Künye: etiket-değer çiftleri. İlanda bu bilgiler metnin kendisi kadar
   önemli (basın no ile aranıyor), bu yüzden gövdeden ÖNCE ve ayrı. */
.ilan-kunye{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  padding:14px 0; margin-bottom:22px;
  border-block:1px solid var(--tel);
}
.ilan-kunye dt{ font:500 11.5px/1.3 var(--dar); color:var(--murekkep-3); }
.ilan-kunye dd{ margin:2px 0 0; font:600 14.5px/1.3 var(--sans); color:var(--murekkep); }
.ilan-gorsel{ margin:0 0 22px; }
.ilan-geri{ margin-top:28px; padding-top:18px; border-top:1px solid var(--tel); }
.ilan-geri a{ color:var(--vurgu); font-weight:600; }
.ilan-geri a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- giriş pop-up'ı ---------- */
.popup-ortu{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; padding:20px;
  background:rgba(10,12,15,.62);
  opacity:0; transition:opacity 200ms var(--gecis);
}
.popup-ortu.acik{ opacity:1; }
.popup-kutu{
  position:relative; width:min(520px,100%); max-height:88vh; overflow:auto;
  background:var(--kagit); border-top:4px solid var(--vurgu);
  transform:translateY(10px); transition:transform 220ms var(--gecis);
}
.popup-ortu.acik .popup-kutu{ transform:none; }
.popup-kapat{
  position:absolute; top:8px; right:8px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:var(--murekkep); border-radius:999px;
}
.popup-kapat:hover{ background:var(--murekkep); color:#fff; }
.popup-kapat .ik{ width:18px; height:18px; }
.popup-gorsel img{ width:100%; height:auto; }
.popup-yazi{ padding:20px 22px 24px; }
.popup-yazi h2{
  font-family:var(--baslik); font-weight:700; font-size:22px; line-height:1.14;
  letter-spacing:-.02em; margin-bottom:8px;
}
.popup-yazi p{ font-family:var(--metin); font-size:15.5px; line-height:1.6; color:var(--murekkep-2); }
.popup-dugme{
  display:inline-flex; align-items:center; min-height:44px; margin-top:16px;
  padding:0 20px; border-radius:999px;
  background:var(--vurgu); color:#fff; font:600 14.5px/1 var(--sans);
}
.popup-dugme:hover{ background:var(--vurgu-koyu); }
@media (prefers-reduced-motion: reduce){
  .popup-ortu, .popup-kutu{ transition:none; }
}

/* ---------- hava durumu şehir seçici ---------- */
.hava-secim{ margin:0 0 12px; display:flex; gap:8px; }
.hava-secim select{
  flex:1; min-width:0; height:40px; padding:0 10px;
  font:500 13.5px/1 var(--sans); color:var(--murekkep);
  background:var(--kagit); border:1px solid var(--tel-koyu); border-radius:0;
}
.hava-secim select:focus-visible{ outline:2px solid var(--vurgu); outline-offset:2px; }
.hava-secim button{
  height:40px; padding:0 14px; background:var(--vurgu); color:#fff;
  font:600 13px/1 var(--sans); border-radius:999px;
}
#havaGovde[aria-busy="true"]{ opacity:.45; transition:opacity 120ms var(--gecis); }
.hava-yok{ font:500 14px/1.5 var(--sans); color:var(--murekkep-3); }
.hava-sayfa{ max-width:620px; padding-block:26px 48px; }
.hava-sayfa h1{
  font-family:var(--baslik); font-weight:700; font-size:clamp(23px,3vw,32px);
  letter-spacing:-.024em; margin:14px 0 20px;
}

/* ==========================================================================
   DOKUNMA HEDEFİ DÜZELTMELERİ (WCAG 2.5.8 — en az 24×24)
   --------------------------------------------------------------------------
   Yayın öncesi ölçümde 360px'te 57 öge 24 pikselin altındaydı: 39'u dipnot
   bağlantısı, 10'u kategori rozeti, gerisi "Tümü" ve sekme düğmeleri.

   İki ayrı yöntem, bilinçli:
   - BOŞLUK VARSA görünmez `::after` ile alan büyütülür; kutunun GÖRÜNEN
     boyutu değişmez (rozet, "Tümü" bağlantısı). Kutuyu büyütmek tasarımı
     bozardı.
   - DİZİ HÂLİNDEKİ bağlantılarda (dipnot listeleri) `::after` komşu
     bağlantının üstüne biner ve hangi satıra bastığı belirsizleşir; orada
     gerçek dolgu verilir. Satır yüksekliği artar, dipnot biraz uzar — doğru
     takas.
   ========================================================================== */

/* --- görünmez alan büyütme --- */
.etiket[href],
.modul-baslik a,
.burc-kaynak a,
.trafik-not a{ position:relative; }
.etiket[href]::after,
.modul-baslik a::after,
.trafik-not a::after,
.burc-kaynak a::after{
  content:""; position:absolute; left:0; right:0;
  top:50%; transform:translateY(-50%);
  height:44px; min-width:44px;
}

/* --- gerçek dolgu: dizi hâlindeki bağlantılar --- */
.dipnot-sutun li{ padding-block:0; }
.dipnot-sutun li a{ display:block; padding-block:6px; }
.dipnot-alt-linkler a{ display:inline-block; padding-block:6px; }
.dipnot-kredi .kredi-kunye a{ display:inline-block; padding-block:4px; }
.dipnot-marka .dipnot-iletisim li a{ display:inline-block; padding-block:4px; }

/* --- düğme ve sekmeler --- */
.sekme{ min-height:40px; }
.puan-tumu{ min-height:40px; display:flex; align-items:center; justify-content:center; }
/* Manşet üzerindeki rozet fotoğrafın üstünde; büyüyen alan başlığı
   kapatmasın diye yalnız kendi satırında genişler. */
.slayt-yazi .etiket[href]::after{ height:40px; }

/* Tablet genişliğinde (753px) ölçülen üç kalıntı:
   şerit ögeleri 14px, yapımcı bağlantısı 16px, manşet sekmesi 22px GENİŞ. */
.serit-oge{ padding-block:5px; }
.dipnot-kredi .kredi-satir a{ display:inline-block; padding-block:4px; }
.vitrin-sayac button{ width:24px; }

/* Kalan küçük hedefler: iz yolu (breadcrumb) ve iletişim satırları.
   İkisi de tek satırlık metin bağlantısı; dolgu satır yüksekliğini
   değiştirmiyor çünkü zaten blok akışının içindeler. */
.izyolu a, .kirinti a{ display:inline-block; padding-block:6px; }
/* Künye listesindeki telefon / e-posta / adres bağlantıları cümle içinde
   değil, tek başına duran hedefler; satır içi istisnası geçmez. */
.yazi-govde .kunye-liste a{ display:inline-block; padding-block:3px; }
.iletisim-kart p a, .iletisim-bilgi a, .iletisim-liste a{ display:inline-block; padding-block:5px; }

/* ===========================================================================
   REFERANS KAPLAMASI · malatyamuhabir.com tasarım diline taşıma
   13.10.2026 · müşteri isteği: "tasarım genel olarak o site gibi olsun"

   Referans bizim kardeş kod tabanımız: aynı Türkçe değişken sözlüğü, aynı
   yazı tipleri (Archivo + Source Serif 4), aynı "kırmızı yalnız acil" kuralı.
   Değişen tek şey AYIRMA YÖNTEMİ:

       önce  : beyaz sayfa, bölümler ÇİZGİYLE ayrılıyor
       sonra : gri sayfa, bölümler KART olarak yüzüyor

   Marka rengi taşınmadı. #0E4C63 Malatya Muhabir'in kimliği; Kayseri'nin
   logosu mavi olduğu için --vurgu ailesi ve acil kırmızısı olduğu gibi kaldı.

   Bu blok tek parça: geri almak için bu yorumdan dosya sonuna kadarını sil.
   Yedek: docs/site.css.referans-oncesi
   =========================================================================== */

/* --- bölümler artık kart --- */
.modul{
  background:var(--kagit);
  border:1px solid var(--tel);
  border-radius:var(--r-l);
  padding:20px;
  box-shadow:var(--golge);
}
/* kart kendi kenarını taşıdığı için çizgili ayraç gereksiz */
.modul + .modul,
.modul + .kusak{
  margin-top:24px;
  padding-top:20px;
  border-top:0;
}

/* yan sütun çizgiyle değil boşlukla ayrılır */
.yan{
  border-left:0;
  padding-left:0;
}

/* --- görseller yuvarlak --- */
.one-haber figure,
.bk-im,
.sira figure,
.video-kucuk figure,
.slayt-gorsel{
  border-radius:var(--r);
  overflow:hidden;
}

/* --- rozet ve etiketler --- */
.etiket,
.etiket-duz{
  border-radius:var(--r-s);
}

/* --- manşet vitrini de kart --- */
.vitrin-cerceve{
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--golge);
}

/* --- bölüm başlığı: kartın içinde, alt çizgi inceltildi --- */
.blok-baslik{
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--tel);
}

/* --- ana sütun blokları da kart --- */
.sutun-ana > .blok,
.sutun-ana > .sosyal-blok{
  background:var(--kagit);
  border:1px solid var(--tel);
  border-radius:var(--r-l);
  padding:20px;
  box-shadow:var(--golge);
}
.sutun-ana > * + *{ margin-top:24px; }

/* manşet yanındaki günün listesi */
.gunun-listesi{
  background:var(--kagit);
  border:1px solid var(--tel);
  border-radius:var(--r-l);
  padding:18px;
  box-shadow:var(--golge);
}

/* öne çıkan dörtlü şerit: her biri ayrı kart */
.oc-kart{
  background:var(--kagit);
  border:1px solid var(--tel);
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--golge);
  transition:box-shadow var(--gecis), transform var(--gecis);
}
.oc-kart:hover{
  box-shadow:var(--golge-yuksek);
  transform:translateY(-2px);
}
/* kart kendi iç boşluğunu taşır; görsel kenara yaslanır, yazı içeride durur */
.oc-kart > figure{ border-radius:0; }
.oc-kart > :not(figure){ padding-inline:14px; }
.oc-kart > :last-child{ padding-bottom:14px; }

/* yazarlar ve video bölümleri dış boşluk kazansın */
section.yazarlar,
section.video{ margin-top:24px; }

@media (prefers-reduced-motion: reduce){
  .oc-kart{ transition:none; }
  .oc-kart:hover{ transform:none; }
}

/* ilçeler bandı koyu kalır (kendi kimliği var), yalnız kart diline uyar */
.sutun-ana > .ilceler{
  border-radius:var(--r-l);
  box-shadow:var(--golge);
  margin-top:0;
}

/* --- iç sayfalar da kart diline uyar --- */
/* haber/yazı gövdesi: okuma yüzeyi beyaz kalmalı, gri zeminde yüzer */
.sutun-ana.yazi-sutun,
/* kategori sayfası: öne çıkan, liste, sıralama çubuğu, sayfalama */
.kategori-one,
.liste-izgara,
.siralama-cubugu,
.sayfalama{
  background:var(--kagit);
  border:1px solid var(--tel);
  border-radius:var(--r-l);
  padding:20px;
  box-shadow:var(--golge);
}
.sutun-ana.yazi-sutun{ padding:24px 28px 28px; }
.sayfalama{ padding:14px 20px; }
.siralama-cubugu{ padding:12px 16px; }
.sutun-ana > * + *{ margin-top:20px; }

/* kategori başlığı ve izyolu kart dışında, gri zeminde kalır */
.kategori-basi,
.izyolu{ background:transparent; border:0; box-shadow:none; padding-inline:0; }

/* --- sayfa üstü reklam bandı (referanstaki konum) --- */
.sayfa-ustu-kusak{
  background:var(--kagit);
  border-bottom:1px solid var(--tel);
  padding:10px 0;
}
.sayfa-ustu-kusak .kusak{
  border:0;
  background:none;
  max-width:100%;
}
.sayfa-ustu-kusak img{ display:block; margin-inline:auto; max-width:100%; height:auto; }
@media (max-width:700px){
  .sayfa-ustu-kusak{ padding:8px 0; }
}

/* ===========================================================================
   CANLI YAYIN DÜĞMELERİ (13.10.2026)
   Radio Life ve Life TV: üst şeritte iki hap düğme, yan sütunda kutu.
   Veri: canli_yayinlar() (inc/bootstrap.php), adresler panelden.
   Geri almak için bu bloğu sil. Yedek: docs/site.css.canli-oncesi
   =========================================================================== */
.serit-canli{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.canli-dugme{
  display:inline-flex; align-items:center; gap:8px;
  height:28px; padding:0 4px 0 3px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  color:#f0ece3; white-space:nowrap;
  font:600 12.5px/1 var(--dar); letter-spacing:.02em;
  transition:background var(--gecis), box-shadow var(--gecis);
}
.canli-dugme:hover{ background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }
.canli-dugme img{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; background:#fff; }
.canli-eylem{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  height:20px; padding:0 10px 0 8px;
  border-radius:999px;
  background:var(--acil); color:#fff;
  font:700 11.5px/1 var(--dar); letter-spacing:.05em; white-space:nowrap;
}
.canli-radyo .canli-eylem{ background:var(--vurgu); }
.canli-eylem i{
  width:6px; height:6px; border-radius:50%; background:#fff;
  animation:canli-nabiz 1.6s ease-in-out infinite;
}
@keyframes canli-nabiz{ 50%{ opacity:.25; } }

/* --- yan sütun kutusu --- */
.yan-canli-oge{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border:1px solid var(--tel); border-radius:var(--r);
  background:var(--kagit-acik); color:var(--murekkep);
  transition:border-color var(--gecis), background var(--gecis);
}
.yan-canli-oge + .yan-canli-oge{ margin-top:10px; }
.yan-canli-oge:hover{ border-color:var(--vurgu); background:var(--vurgu-sis); }
.yan-canli-oge img{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; background:#fff; }
.yan-canli-ad{ display:grid; gap:5px; flex:1; min-width:0; }
.yan-canli-ad b{ font:700 16px/1.1 var(--baslik); }
.yan-canli-ad small{ font:500 12px/1.2 var(--dar); color:var(--soluk); }
.yan-canli-oge .canli-eylem{ height:28px; padding:0 13px 0 11px; font-size:12.5px; }

/* Telefonda üst şerit gizli (bkz. 700px bloğu). Canlı yayın varsa şerit geri
   gelir ama yalnız iki düğmeyle: tarih, hava ve sosyal simgeler menü
   panelinde zaten var. İki düğme satırı eşit paylaşır. */
@media (max-width:700px){
  .serit.canlili{ display:block; }
  .serit.canlili .serit-sol,
  .serit.canlili .serit-sag{ display:none; }
  .serit.canlili .serit-ic{ min-height:0; padding:6px 0; gap:0; }
  .serit-canli{ margin:0; width:100%; }
  .canli-dugme{ flex:1 1 0; min-width:0; height:40px; justify-content:center; gap:7px; padding:0 6px; font-size:13.5px; }
  .canli-dugme img{ width:26px; height:26px; }
  .canli-ad{ overflow:hidden; text-overflow:ellipsis; }
  .canli-eylem{ height:24px; }
}
/* 360px altında ad + rozet satıra sığmıyor: nabız noktası kalkar, aralıklar daralır */
@media (max-width:359px){
  .canli-dugme{ gap:5px; padding:0 4px; font-size:12.5px; }
  .canli-dugme img{ width:22px; height:22px; }
  .canli-eylem{ padding:0 8px; }
  .canli-eylem i{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .canli-eylem i{ animation:none; } }
@media print{ .serit-canli, .yan-canli{ display:none; } }

/* ===========================================================================
   YERLEŞİM KATMANI · referans kompozisyonuna yaklaştırma
   13.10.2026 · "site hiç referans siteye benzememiş" geri bildirimi üzerine.

   İlk kaplama yalnız yüzeyi değiştirmişti (zemin, kart, köşe, gölge). Bir
   haber portalını başka bir portala benzeten şey bu değil; YERLEŞİM ve
   YOĞUNLUK. Aynı genişlikte ölçüldü:

       ölçüt                  referans   bizde (önce)
       haber bağlantısı         148         99
       görsel                   101         42
       kart başlığı (h3)         73         10
       manşet başlık puntosu     30px       50px
       baskın görsel oranı     16:9 ağırlıklı   5 ayrı oran karışık

   Bu katman ikisini düzeltiyor: tek görsel oranı ve manşet ölçeği.
   Yoğunluk (kategori bloğu sayısı) içerik tarafında, ayrıca ele alınacak.

   Geri alma: bu yorumdan dosya sonuna kadarını sil.
   Yedek: docs/site.css.yerlesim-oncesi
   =========================================================================== */

/* --- tek görsel oranı: 16/9, referansla aynı ---
   Önce .satir kare (1.00), .one-haber ve .oc-kart 1.50, videolar 1.59/1.60
   basıyordu. Beş ayrı oran ızgarayı dağıtıyordu. Yazar avatarları ve
   e-gazete kapakları hariç; onların oranı kasıtlı. */
.satir figure,
.satir-genis figure,
.one-haber figure,
.oc-kart > figure,
.video-kucuk figure,
.video-buyuk figure,
.sira figure{
  aspect-ratio:16/9;
  overflow:hidden;
}
.satir figure img,
.satir-genis figure img,
.one-haber figure img,
.oc-kart > figure img,
.video-kucuk figure img,
.video-buyuk figure img,
.sira figure img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* --- manşet ölçeği: referans 30px, bizde 50px'ti ---
   Devasa başlık manşeti tek haberlik bir afişe çeviriyordu; referansta
   manşet sayfanın yalnız bir parçası. */
.slayt-yazi h2,
.vitrin h2{
  font-size:clamp(22px, 2.1vw, 31px);
  line-height:1.12;
}

/* Sabit piksel ölçüsü aspect-ratio'yu eziyordu: .satir figure 88×88 kare,
   .video-kucuk benzeri. Genişliği koruyup yüksekliği orana bırakıyoruz. */
.satir figure{
  width:128px;
  height:auto;
}
.video-kucuk figure{
  height:auto;
}
@media (max-width:700px){
  .satir figure{ width:104px; }
}
.satir-genis figure{
  width:230px;
  height:auto;
}

/* ===========================================================================
   RENK KATMANI · "çok sönük" geri bildirimi (13.10.2026)

   Ölçüldü (1440px, zemin alanlarının yüzdesi):
       renkli alan   referans %18,3   bizde %12,8
       ton dağılımı  referans mavi 93k / yeşil 28k / kırmızı 28k
                     bizde    mavi 76k / yeşil 0,7k / kırmızı 13k
   Yani referansın renginin %38'i marka tonu DIŞINDA; bizimki tek renk.

   Sebep: her kategorinin kendi rengi var (--kat-renk şablondan iniyor) ama
   CSS onu yalnız küçük bir etikette ve 3px çizgide kullanıyordu. Referans
   aynı fikri bölümün TAMAMINA uyguluyor (orada sınıfın adı "zeminli").

   Bu katman kategori rengini bloğun başlık bandına ve hafif bir zemin
   tonuna taşıyor. Kırmızı hâlâ yalnız acil; renk kategoriden geliyor.
   Geri alma: bu yorumdan dosya sonuna kadarını sil.
   Yedek: docs/site.css.renk-oncesi
   =========================================================================== */

/* blok: kendi kategori renginden çok hafif bir zemin tonu */
.sutun-ana > .blok{
  background:color-mix(in srgb, var(--kat-renk, var(--vurgu)) 6%, #fff);
  border-color:color-mix(in srgb, var(--kat-renk, var(--vurgu)) 22%, var(--tel));
  padding:0;
  overflow:hidden;
}

/* başlık bandı: kategorinin rengi, dolu */
.sutun-ana > .blok > .blok-baslik{
  background:var(--kat-renk, var(--vurgu));
  margin:0;
  padding:13px 20px;
  border-bottom:0;
  border-radius:0;
  align-items:center;
}
.sutun-ana > .blok > .blok-baslik h2{ color:#fff; }
.sutun-ana > .blok > .blok-baslik .blok-cizgi{ background:rgba(255,255,255,.28); }
.sutun-ana > .blok > .blok-baslik .blok-tumu{ color:rgba(255,255,255,.92); }
.sutun-ana > .blok > .blok-baslik .blok-tumu:hover{ color:#fff; }

/* bandın altındaki içerik kendi iç boşluğunu alır */
.sutun-ana > .blok > :not(.blok-baslik){
  padding-inline:20px;
}
.sutun-ana > .blok > :last-child{ padding-bottom:20px; }
.sutun-ana > .blok > .blok-baslik + *{ padding-top:18px; }

/* köşe yazarları bandı: referansta lacivert dolu bir bölüm */
section.yazarlar{
  background:#182642;
  color:#fff;
}
section.yazarlar h2{ color:#fff; }
section.yazarlar .yazar-ad,
section.yazarlar a{ color:#fff; }
section.yazarlar .blok-cizgi{ background:rgba(255,255,255,.22); }

/* "Daha Fazla" açılır paneli sola açılsın.
   12 kategori menüye alınınca (13.10.2026) "Daha Fazla" sağa kaydı ve
   left:0 ile açılan 210px'lik panel ekranın dışına taşıyordu: 1280 ve
   1100 pikselde SAYFA yatay kayıyordu (ölçüldü, 129px taşma). Panel
   visibility ile gizlendiği için display:none gibi yer kaplamıyor değil;
   kapalıyken bile genişliğe katılıyor. Sağ kenara sabitlemek çözüyor. */
.menu-acilir{
  left:auto;
  right:0;
}

/* ===========================================================================
   TEMA NAKLI 2. ADIM: BASLIK, MENU SERIDI, SON DAKIKA
   malatyamuhabir.com stil dosyasindan ice aktarildi, degisken adlari
   bizim sozlugumuze cevrildi (scratchpad/ice-aktar.php).
   Geri alma: bu yorumdan dosya sonuna kadarini sil.
   =========================================================================== */

/* ---- .bas ---- */
.bas{background:var(--kagit);border-bottom:1px solid var(--tel);position:sticky;top:0;z-index:60}
.bas-ic{display:flex;align-items:center;gap:18px;height:74px}
.bas-arac{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.bas-ic{gap:20px}
.bas-ic[data-tasma="1"] .hamburger{display:grid}

/* ---- .logo ---- */
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo-im{width:42px;height:42px;border-radius:10px;background:linear-gradient(140deg,var(--vurgu),var(--vurgu-ham));
  display:grid;place-items:center;color:#fff;font-family:var(--sans);font-weight:800;font-size:1.15rem;letter-spacing:-.03em}
.logo-ad{font-family:var(--sans);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;line-height:1}
.logo-ad small{display:block;font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.22em;
  color:var(--soluk);text-transform:uppercase;margin-top:3px}
.logo{flex:0 0 auto;display:flex;align-items:center}
.logo img{height:46px;width:auto;display:block;border-radius:6px;background:#fff;padding:3px 6px}
.logo .logo-im-koyu{display:none}
[data-tema="koyu"] .logo .logo-im-acik{display:none}
[data-tema="koyu"] .logo .logo-im-koyu{display:block}

/* ---- .finans ---- */
.finans{display:flex;align-items:center;gap:0;margin-left:12px;flex:1 1 auto;min-width:0;overflow:hidden}
.finans-oge{display:flex;align-items:center;gap:8px;padding:0 16px;border-left:1px solid var(--tel);white-space:nowrap}
.finans-oge:first-child{border-left:none}
.finans-oge.eski{opacity:.5}

/* ---- .fn- ---- */
.fn-ok{display:grid;place-items:center;flex:0 0 auto}
.fn-ok.yukari{color:var(--yesil)}
.fn-ok.asagi{color:var(--acil)}
.fn-ok.duz{color:var(--silik)}
.fn-yazi{display:flex;flex-direction:column;line-height:1.15}
.fn-yazi b{font-family:var(--sans);font-weight:800;font-size:.82rem;letter-spacing:-.01em}
.fn-yazi span{font-family:var(--mono);font-size:.8rem;color:var(--soluk)}

/* ---- .hizli-bag ---- */
.hizli-bag{display:flex;align-items:center;gap:7px;flex:0 0 auto}
@media (max-width:1100px){
  .hizli-bag{display:none}
}

/* ---- .hb ---- */
.hb{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:99px;
  font-weight:700;font-size:.78rem;color:#fff;transition:.15s;white-space:nowrap}
.hb:hover{filter:brightness(1.15);transform:translateY(-1px)}
.hb.foto{background:#C43127}
.hb.video{background:#12617E}
.hb.yazar{background:var(--altin)}
.hb.sondakika{background:#fff;color:var(--acil);border:1.5px solid var(--acil)}
@media (max-width:1330px){
  .hb{padding:0 9px;font-size:.72rem}
}

/* ---- .bas-arac ---- */

/* ---- .hava ---- */
.bas-arac .hava{display:flex;align-items:center;gap:7px;padding:0 12px;color:var(--murekkep-2);white-space:nowrap}
.bas-arac .hava svg{color:var(--vurgu-ham);flex:0 0 auto}
.bas-arac .hava span{font-size:.84rem}
.bas-arac .hava b{font-weight:800}

/* ---- .ikon-btn ---- */
.ikon-btn{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--murekkep-2);
  border:1px solid var(--tel);background:var(--kagit);transition:.15s}
.ikon-btn:hover{background:var(--kagit-acik);border-color:var(--vurgu-ham);color:var(--vurgu)}
.cekmece-bas .ikon-btn{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.12)}
.cekmece-bas .ikon-btn:hover{background:rgba(255,255,255,.24);color:#fff}

/* ---- .hamburger ---- */
.hamburger{display:none}

/* ---- .menu-serit ---- */
.menu-serit{background:var(--kagit);border-bottom:2px solid var(--vurgu);position:sticky;top:0;z-index:60}

/* ---- .menu-ic ---- */
.menu-ic{display:flex;align-items:center;gap:14px;height:48px;overflow:hidden}

/* ---- .menu ---- */
.menu{display:flex;align-items:center;gap:2px;margin-left:26px}
.menu a{padding:10px 13px;border-radius:var(--r-s);font-weight:600;font-size:.92rem;color:var(--murekkep-2);
  transition:background .15s,color .15s;white-space:nowrap}
.menu a:hover{background:var(--kagit-acik);color:var(--vurgu)}
.menu a.aktif{color:var(--vurgu);background:var(--vurgu-sis)}
.menu{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden;flex-wrap:nowrap;margin-left:0}
.menu a{flex:0 0 auto;padding:9px 12px;border-radius:var(--r-s);font-weight:700;font-size:.9rem;
  color:var(--murekkep-2);white-space:nowrap;transition:background .15s,color .15s}
.menu a.aktif{color:#fff;background:var(--vurgu)}
.menu a.gizli-tasma{display:none}
.menu-sos{flex:0 0 auto;display:flex;gap:6px}

/* ---- .sos ---- */
.sos{display:flex;gap:6px}
.sos a{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.08)}
.sos a:hover{background:var(--vurgu-ham);color:#fff}
.cek-alt .sos{display:flex;gap:8px}
.cek-alt .sos a{width:44px;height:44px;border-radius:10px;background:var(--kagit);border:1px solid var(--tel);
  display:grid;place-items:center;color:var(--murekkep-2);transition:.15s}
.cek-alt .sos a:hover{background:var(--vurgu);border-color:var(--vurgu);color:#fff}

/* ---- .sd- ---- */
.sd-et{background:rgba(0,0,0,.22);padding:0 15px;height:100%;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;font-weight:700;flex:0 0 auto}
.sd-nokta{width:8px;height:8px;border-radius:50%;background:#fff;animation:nabiz 1.4s infinite}
.sd-akis{flex:1;min-width:0;overflow:hidden;position:relative;height:100%}
.sd-ray{display:flex;align-items:center;gap:44px;height:100%;white-space:nowrap;
  animation:kay 42s linear infinite;padding-left:20px}
.sd-akis:hover .sd-ray{animation-play-state:paused}
.sd-ray a{font-size:.9rem;font-weight:600}
.sd-ray a::before{content:"•";margin-right:14px;color:rgba(255,255,255,.5)}
.sd-nokta2{width:8px;height:8px;border-radius:50%;background:var(--acil);animation:sd-yanip 1.1s infinite}
.sd-serit{padding:10px 0}
.sd-serit .kap{max-width:var(--en);margin:0 auto;padding:0 18px}
.sd-ic{display:flex;align-items:stretch;height:46px;border-radius:10px;overflow:hidden;
  border:1px solid var(--tel);box-shadow:0 4px 14px -8px rgba(0,0,0,.18)}
.sd-etiket{display:flex;align-items:center;gap:9px;padding:0 16px;background:var(--sdr,#C4161C);
  color:var(--sde,#fff);font:800 .8rem var(--sans);letter-spacing:.05em;white-space:nowrap}
.sd-ok{width:26px;height:26px;border:none;border-radius:7px;background:rgba(0,0,0,.18);
  color:var(--sde,#fff);font-size:1rem;font-weight:800;cursor:pointer;display:grid;place-items:center;line-height:1;padding:0}
.sd-ok:hover{background:rgba(0,0,0,.32)}
.sd-orta{flex:1;min-width:0;background:var(--sdz,#fff);display:flex;align-items:center;padding:0 16px}
.sd-tumu{display:flex;align-items:center;padding:0 18px;background:var(--sdr,#C4161C);
  color:var(--sde,#fff);font:700 .82rem var(--sans);white-space:nowrap}
.sd-tumu:hover{filter:brightness(1.08);color:var(--sde,#fff)}
.sd-serit time{color:var(--sdr,#C4161C);font:700 var(--sdf,15px) var(--mono);margin-right:10px;flex:none}
.sd-kayan{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.sd-ray{display:inline-flex;gap:44px;white-space:nowrap;animation:sdkay 60s linear infinite}
.sd-ray:hover{animation-play-state:paused}
.sd-ray a{display:inline-flex;align-items:center;color:var(--sdy,#111820);
  font-size:var(--sdf,15px);font-weight:var(--sdw,600)}
.sd-tek{flex:1;min-width:0;position:relative;height:100%;display:flex;align-items:center}
.sd-tek a{position:absolute;inset:0;display:flex;align-items:center;color:var(--sdy,#111820);
  font-size:var(--sdf,15px);font-weight:var(--sdw,600);opacity:0;
  transition:opacity .7s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.sd-tek a.etkin{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .sd-nokta2{animation:none}
}
@media(max-width:700px){
  .sd-tumu{display:none}
}

/* ---- .kule ---- */
.kule-alan{position:fixed;inset:0;pointer-events:none;z-index:5}
.kule{position:absolute;top:var(--kule-ust,190px);width:160px;pointer-events:auto}
.kule img{width:160px;height:auto;border-radius:var(--r-s)}
.kule-sol{left:max(8px,calc(50% - var(--en)/2 - 176px))}
.kule-sag{right:max(8px,calc(50% - var(--en)/2 - 176px))}
@media (max-width:1560px){
  .kule-alan{display:none}
}

/* ---- .reklam-yuva ---- */
.reklam-yuva{display:block;margin:18px 0;text-align:center;overflow:hidden;border-radius:var(--r)}
.reklam-yuva img{width:100%;height:auto;border-radius:var(--r)}
.kenar .reklam-yuva{margin:0 0 18px}
.reklam-yuva{display:block;text-align:center;margin:14px auto;max-width:var(--en);overflow:hidden}
.reklam-yuva img{max-width:100%;height:auto;display:inline-block;border-radius:var(--r)}
body>.reklam-yuva{padding:0 18px}

/* ---- .kap ---- */
.kap>*,.izgara>*,.satir>*,.esnek>*{min-width:0}
.kap{max-width:var(--en);margin:0 auto;padding:0 18px}
.ust .kap{display:flex;align-items:center;gap:16px;height:38px;flex-wrap:nowrap;overflow:hidden}
.sondakika .kap{display:flex;align-items:center;gap:0;height:44px}
.cerez .kap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.medya-serit>.kap{max-width:none;padding:0}


/* ---- son dakika ogeleri: bizim .sd-oge, referansin .sd-tek a sozlesmesine ----
   Referansta her baslik mutlak konumlu ve JS ile sirayla gosteriliyor.
   Bizim isaretlememiz ayni mantikta (.sd-oge / .acik) ama eski konum
   referansi .sd-akis idi; o sinif kalkti, yerine .sd-orta geldi. */
.sd-orta{ position:relative; }
.sd-oge{
  position:absolute; inset:0;
  display:none; align-items:center; gap:10px;
  padding:0 16px; min-width:0;
}
.sd-oge.acik{ display:flex; }
.sd-oge time{
  flex:0 0 auto;
  font:700 var(--sdf,15px)/1 var(--mono);
  color:var(--sdr, var(--acil));
  letter-spacing:0;
}
.sd-oge span{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--sdf,15px); font-weight:var(--sdw,600);
  color:var(--sdy, var(--murekkep));
}
.sd-oge:hover span{ color:var(--vurgu); }
@media (max-width:700px){
  .sd-oge{ padding:0 12px; }
  .sd-oge time{ display:none; }
}

/* ---- .kap: referansin olculeri, bizim hesap yontemimiz ----
   Referans `max-width:1200px; padding:0 18px` kullaniyor. Bizim izgara ve
   kenar sutunu duzenlerimiz padding'siz genislige gore kurulmus; padding
   eklenince icerik alani 36px daraliyor ve hava modulunun sabit genislikli
   cocugu tasiyor (olculdu: sayfa 1480, ekran 1425). Ayni gorsel sonuc,
   tasmasiz hesap: */
.kap{
  max-width:none;
  width:min(var(--en, 1200px), 100% - 36px);
  margin-inline:auto;
  padding:0;
}

/* ---- eski menu kurallarinin artiklari ----
   Eski nav koyu zeminliydi (.menu{background:var(--murekkep)}) ve icinde
   ul.menu-liste vardi. Yeni yapida menu seridi referanstaki gibi BEYAZ,
   altinda marka rengi cizgi; baglantilar koyu metin. Eski bildirimler
   ayni ozgullukte ve once geldigi icin burada aciktan siliniyor. */
.menu{
  background:none;
  border-bottom:0;
  position:static;
}
.menu a{ color:var(--murekkep-2); }
.menu a.aktif{ color:var(--vurgu); background:var(--vurgu-sis); }
.menu a:hover{ background:var(--kagit-acik); color:var(--vurgu); }

/* ===========================================================================
   TEMA NAKLI 3-4. ADIM: UST SERIT, MANSET, KART AILESI
   malatyamuhabir.com'dan ice aktarildi, degisken adlari cevrildi.
   Geri alma: bu yorumdan sonraki blogu sil.
   =========================================================================== */

/* ---- .ust-serit ---- */
.ust-serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0;overflow-x:clip}
.ust-serit>*{min-width:0}
.ust-serit.sb-buyuk_alt,.ust-serit.sb-ozet_alt,.ust-serit.sb-bindirme{grid-template-columns:repeat(3,1fr)}
.ust-serit.sb-besli{grid-template-columns:repeat(5,1fr)}

/* ---- .st-mini ---- */
.st-mini{display:flex;flex-direction:column;background:var(--kagit);border:1px solid var(--tel);
  border-radius:var(--r);overflow:hidden;min-width:0;transition:.15s}
.st-mini:hover{transform:translateY(-2px)}
.st-mini .st-im{aspect-ratio:4/3}
.st-mini h3{padding:9px 11px 12px;font-family:var(--sans);font-weight:700;font-size:.84rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-mini:hover h3{color:var(--vurgu)}

/* ---- .st-im ---- */
.st-im{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--kagit-acik)}
.st-im img{width:100%;height:100%;object-fit:cover;display:block}
.st-im .serit-et{position:absolute;top:10px;left:10px}
.st-mini .st-im{aspect-ratio:4/3}

/* ---- .sb-besli ---- */
.ust-serit.sb-besli{grid-template-columns:repeat(5,1fr)}

/* ---- .manset ---- */
.manset{padding:22px 0}
.manset-izgara{display:grid;grid-template-columns:1fr 372px;gap:16px}
.manset-izgara{display:grid;grid-template-columns:1.62fr 1fr;gap:16px;overflow-x:clip}
.manset-izgara>*{min-width:0}
.manset-izgara.tek-kolon{grid-template-columns:1fr}
.manset-genis .ana-slayt .slayt-kutu{aspect-ratio:21/9}
.manset-izgara .yan-kolon:has(.yan-liste-kutu){height:0;min-height:100%}

/* ---- .manset-izgara ---- */
.manset-izgara{display:grid;grid-template-columns:1fr 372px;gap:16px}
.manset-izgara{display:grid;grid-template-columns:1.62fr 1fr;gap:16px;overflow-x:clip}
.manset-izgara>*{min-width:0}
.manset-izgara.tek-kolon{grid-template-columns:1fr}
.manset-izgara .yan-kolon:has(.yan-liste-kutu){height:0;min-height:100%}

/* ---- .ana-slayt ---- */
.ana-slayt,.yan-slayt{position:relative;background:var(--kagit);border-radius:var(--r-l);overflow:hidden}
.ana-slayt,.yan-slayt{border:1px solid var(--tel);
  box-shadow:0 1px 2px rgba(16,24,32,.05),0 10px 28px -20px rgba(16,24,32,.25)}
[data-tema="koyu"] .blok,[data-tema="koyu"] .yazar-blok,[data-tema="koyu"] .makale-liste, [data-tema="koyu"] .kat-akis,[data-tema="koyu"] .ana-slayt,[data-tema="koyu"] .yan-slayt{background:var(--kagit);border-color:var(--tel)}
.manset-genis .ana-slayt .slayt-kutu{aspect-ratio:21/9}

/* ---- .slayt-kutu ---- */
.slayt-kutu{position:relative;width:100%;aspect-ratio:16/9;background:var(--kagit-koyu)}
.yan-slayt .slayt-kutu{aspect-ratio:4/3}
.yan-slayt .slayt-kutu{aspect-ratio:16/10}
.manset-genis .ana-slayt .slayt-kutu{aspect-ratio:21/9}
.t3-slayt .slayt-kutu{aspect-ratio:16/9.6;height:100%}

/* ---- .slayt ---- */
.slayt{min-width:100%;position:relative;height:100%}
.slayt img{width:100%;height:100%;object-fit:cover}
.slayt-ic{position:absolute;inset:auto 0 0 0;padding:28px 30px 26px;
  background:linear-gradient(transparent,rgba(8,13,18,.55) 32%,rgba(8,13,18,.93));color:#fff}
.slayt h2{font-family:var(--sans);font-weight:800;font-size:clamp(1.3rem,2.9vw,2.15rem);line-height:1.13;
  margin:12px 0 8px;letter-spacing:-.02em;text-wrap:balance}
.slayt p{font-family:var(--metin);color:#D3DCE4;max-width:62ch;font-size:.98rem;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slayt-meta{display:flex;gap:14px;margin-top:12px;font-family:var(--mono);font-size:.68rem;color:#A9B8C6}
.slayt-kutu{position:relative;width:100%;aspect-ratio:16/9;background:var(--kagit-koyu)}
.yan-slayt .slayt-kutu{aspect-ratio:4/3}
.slayt{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s}
.slayt.etkin{opacity:1;visibility:visible}
.slayt img{width:100%;height:100%;object-fit:cover}
.slayt-ic{position:absolute;inset:auto 0 0 0;padding:22px;color:#fff;
  background:linear-gradient(transparent,rgba(8,14,20,.5) 40%,rgba(8,14,20,.9))}
.slayt-ic h2{font-family:var(--sans);font-weight:800;font-size:clamp(1.15rem,2.3vw,1.9rem);line-height:1.16;
  letter-spacing:-.02em;margin:8px 0 6px}
.slayt-ic h3{font-family:var(--sans);font-weight:700;font-size:clamp(.95rem,1.5vw,1.12rem);line-height:1.25;margin-top:6px}
.slayt-ic p{font-family:var(--metin);font-size:.92rem;color:#D6E0E8;max-width:60ch}
.slayt-meta{font-family:var(--mono);font-size:.68rem;color:#9FB4C4;margin-top:8px}
.slayt-sayilar{display:flex;flex-wrap:wrap;gap:2px;background:var(--koyu-yuzey);padding:4px}
.slayt-ok{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(8,14,20,.55);color:#fff;display:grid;place-items:center;z-index:3;transition:.15s}
.slayt-ok:hover{background:var(--vurgu)}
.slayt-ok.sol{left:10px}
.slayt-ok.sag{right:10px}
.slayt-noktalar{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:7px;z-index:3}
.slayt-sayilar{display:flex;flex-wrap:nowrap;gap:2px;padding:4px;flex:1 1 auto;min-width:0;overflow:hidden}
.yan-slayt .slayt-kutu{aspect-ratio:16/10}
.yan-slayt .slayt-ok{top:42%}
.manset-genis .ana-slayt .slayt-kutu{aspect-ratio:21/9}
.t3-slayt .slayt-kutu{aspect-ratio:16/9.6;height:100%}

/* ---- .slayt-ic ---- */
.slayt-ic{position:absolute;inset:auto 0 0 0;padding:28px 30px 26px;
  background:linear-gradient(transparent,rgba(8,13,18,.55) 32%,rgba(8,13,18,.93));color:#fff}
.slayt-ic{position:absolute;inset:auto 0 0 0;padding:22px;color:#fff;
  background:linear-gradient(transparent,rgba(8,14,20,.5) 40%,rgba(8,14,20,.9))}
.slayt-ic h2{font-family:var(--sans);font-weight:800;font-size:clamp(1.15rem,2.3vw,1.9rem);line-height:1.16;
  letter-spacing:-.02em;margin:8px 0 6px}
.slayt-ic h3{font-family:var(--sans);font-weight:700;font-size:clamp(.95rem,1.5vw,1.12rem);line-height:1.25;margin-top:6px}
.slayt-ic p{font-family:var(--metin);font-size:.92rem;color:#D6E0E8;max-width:60ch}

/* ---- .slayt-meta ---- */
.slayt-meta{display:flex;gap:14px;margin-top:12px;font-family:var(--mono);font-size:.68rem;color:#A9B8C6}
.slayt-meta{font-family:var(--mono);font-size:.68rem;color:#9FB4C4;margin-top:8px}

/* ---- .rozet ---- */
.rozet{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:5px;background:var(--acil);color:#fff}
.rozet.mavi{background:var(--vurgu-ham)}
.rozet.yesil{background:var(--yesil)}
.kart-im .rozet{position:absolute;top:10px;left:10px}
.rozet.kirmizi{background:var(--acil);color:#fff}

/* ---- .yan-kolon ---- */
.yan-kolon{display:flex;flex-direction:column;gap:12px;min-width:0}
.yan-kolon .yan-slayt{flex:0 0 auto}
.yan-kolon.yan4{display:grid;grid-template-rows:repeat(4,1fr);gap:10px;min-width:0;min-height:0}
.manset-izgara .yan-kolon:has(.yan-liste-kutu){height:0;min-height:100%}

/* ---- .yan4 ---- */
.yan-kolon.yan4{display:grid;grid-template-rows:repeat(4,1fr);gap:10px;min-width:0;min-height:0}
.yan4-kart{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:0;display:block;background:#1a232e}
.yan4-kart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.yan4-kart:hover img{transform:scale(1.05)}
.yan4-ic{position:absolute;left:0;right:0;bottom:0;padding:26px 13px 10px;
  background:linear-gradient(180deg,rgba(10,15,20,0) 0%,rgba(10,15,20,.82) 62%)}
.yan4-ic h3{color:#fff;font-family:var(--sans);font-weight:700;font-size:.92rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* ---- .sy-no ---- */
.sy-no{flex:1 1 auto;min-width:34px;min-height:34px;display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;font-weight:700;color:#B6C3D0;background:transparent;
  border-radius:4px;transition:.14s;cursor:pointer}
.sy-no:hover{background:#25323F;color:#fff}
.sy-no.etkin{background:var(--acil);color:#fff}
.sy-no{flex:0 0 auto;min-width:38px;min-height:36px;padding:0 6px;display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;font-weight:700;color:#B6C3D0;background:transparent;
  border-radius:4px;transition:.14s;cursor:pointer}
.sy-no:hover{background:#25323F;color:#fff}
.sy-no.etkin{background:var(--acil);color:#fff}
.sy-no.gizli-sayfa{display:none}
.sayi-serit.kucuk .sy-no{min-width:32px;min-height:30px;font-size:.7rem}
.sayi-serit.kucuk .sy-no.etkin{background:var(--vurgu)}

/* ---- .sy-ok ---- */
.sy-ok{flex:0 0 34px;display:grid;place-items:center;background:#1A242F;color:#B6C3D0;
  font-size:1.1rem;font-weight:700;transition:.14s;cursor:pointer}
.sy-ok:hover{background:var(--vurgu);color:#fff}
.sy-ok[hidden]{display:none}
.sayi-serit.kucuk .sy-ok{flex:0 0 28px;font-size:.95rem}

/* ---- 3-4. adim koprusu: eski kurallarin notrlenmesi ----
   .manset eskiden iki sutunlu izgaraydi (hero + metin listesi). Artik
   izgarayi .manset-izgara tasiyor; .manset yalnizca sarmalayici. */
.manset{
  display:block;
  grid-template-columns:none;
  gap:0;
}

/* Kaydirici mekanigi: referans .etkin kullaniyor, bizim site.js .acik
   siniflarini tasiyor. Ikisi de gorunur olsun ki hem referansin CSS'i
   hem bizim JavaScript'imiz calissin. */
.slayt.acik{ opacity:1; visibility:visible; }

/* Yan sutun kartlari: referansin .yan4-kart'i gorsel + ustune binen baslik */
.yan4-kart{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r); background:var(--kagit-koyu);
  min-height:0;
}
.yan4-kart img{ width:100%; height:100%; object-fit:cover; display:block; }
.yan4-ic{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:26px 12px 10px;
  background:linear-gradient(to top, rgba(17,24,32,.92), rgba(17,24,32,.55) 55%, transparent);
}
.yan4-ic h3{
  margin:0; color:#fff;
  font-family:var(--sans); font-weight:700; font-size:.88rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yan4-kart:hover .yan4-ic h3{ text-decoration:underline; text-underline-offset:3px; }

/* .st-im: ust serit kart gorseli */
.st-im{ display:block; overflow:hidden; background:var(--kagit-koyu); }
.st-im img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== TEMA NAKLI 5. ADIM: KATEGORI BLOKLARI ===== */

/* ---- .blok ---- */
.blok{margin-bottom:30px}
.blok-bas{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.blok-bas h2{font-family:var(--sans);font-weight:800;font-size:1.22rem;letter-spacing:-.01em;display:flex;
  align-items:center;gap:11px}
.blok-bas h2::before{content:"";width:5px;height:22px;border-radius:3px;background:var(--kat,var(--vurgu))}
.blok-bas .tumu{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--soluk);display:flex;align-items:center;gap:5px}
.blok-bas .tumu:hover{color:var(--vurgu)}
.video-bant .blok-bas h2{color:#fff}
.video-bant .blok-bas h2::before{background:var(--acil)}
.video-bant .blok-bas .tumu{color:var(--tel-koyu)}
.video-bant .blok-bas .tumu:hover{color:#fff}
.iki-sutun>*,.kenar>*,.blok>*,.duzen-karma>*,.mini-liste>*,.video-bant>*{min-width:0}
.blok,.duzen,.kutu{max-width:100%}
.blok.zeminli .kat-blok,.blok.zeminli .kat-liste,.blok.zeminli .kat-izgara, .blok.zeminli .kat-ikili,.blok.zeminli .kat-serit,.blok.zeminli .kat-basliklar, .blok.zeminli .kat-buyuk-yan{background:var(--blok-zemin)}
.blok-tema-koyu .blok-bas h2{color:#E6EDF4}
.blok-tema-koyu .kat-blok,.blok-tema-koyu .kat-liste,.blok-tema-koyu .kat-izgara, .blok-tema-koyu .kat-ikili,.blok-tema-koyu .kat-serit,.blok-tema-koyu .kat-basliklar, .blok-tema-koyu .kat-buyuk-yan{background:var(--koyu-yuzey);border-color:var(--koyu-cizgi)}
.blok-tema-koyu h3,.blok-tema-koyu .baslik-satir b{color:#E6EDF4}
.blok-tema-koyu .zaman,.blok-tema-koyu p{color:var(--tel-koyu)}
.blok-tema-renkli .kat-blok,.blok-tema-renkli .kat-liste,.blok-tema-renkli .kat-izgara, .blok-tema-renkli .kat-ikili,.blok-tema-renkli .kat-serit,.blok-tema-renkli .kat-basliklar, .blok-tema-renkli .kat-buyuk-yan{background:color-mix(in srgb,var(--kat) 8%,var(--kagit));
  border-color:color-mix(in srgb,var(--kat) 26%,var(--tel))}
.blok-tema-sade .kat-blok,.blok-tema-sade .kat-liste,.blok-tema-sade .kat-izgara, .blok-tema-sade .kat-ikili,.blok-tema-sade .kat-serit,.blok-tema-sade .kat-basliklar, .blok-tema-sade .kat-buyuk-yan{background:transparent;border:none;padding-left:0;padding-right:0}
.blok{margin-bottom:30px}
.blok>.blok-bas{display:flex;align-items:flex-end;gap:14px;padding:0 0 10px;margin-bottom:16px;
  border-bottom:1px solid var(--tel);position:relative}
.blok>.blok-bas h2{font-family:var(--sans);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;
  color:var(--murekkep);line-height:1}
.blok>.blok-bas::after{content:"";position:absolute;left:0;bottom:-2px;width:56px;height:3px;
  background:var(--kat,var(--acil));border-radius:2px}
.blok>.blok-bas .tumu{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soluk);white-space:nowrap}
.blok>.blok-bas .tumu:hover{color:var(--vurgu)}
.blok.zeminli .kat-buyuk-sag4,.blok.zeminli .kat-uclu,.blok.zeminli .kat-dortlu, .blok.zeminli .kat-metin,.blok.zeminli .kat-izgara,.blok.zeminli .kat-liste, .blok.zeminli .kat-serit,.blok.zeminli .kat-basliklar{background:var(--blok-zemin);border-radius:var(--r-l);padding:18px}
.blok-tema-koyu .kat-buyuk-sag4,.blok-tema-koyu .kat-uclu,.blok-tema-koyu .kat-dortlu, .blok-tema-koyu .kat-metin,.blok-tema-koyu .kat-izgara,.blok-tema-koyu .kat-liste, .blok-tema-koyu .kat-serit,.blok-tema-koyu .kat-basliklar{background:var(--koyu-yuzey);border-radius:var(--r-l);padding:18px}
.blok-tema-koyu .bk-buyuk h3,.blok-tema-koyu .bk-kucuk h3,.blok-tema-koyu .mt-oge h3, .blok-tema-koyu .blok-bas h2{color:#E6EDF4}
.blok-tema-koyu .bk-buyuk p,.blok-tema-koyu .zaman{color:var(--tel-koyu)}
.blok-tema-koyu .mt-oge{border-color:var(--koyu-cizgi)}
.blok-tema-renkli .kat-buyuk-sag4,.blok-tema-renkli .kat-uclu,.blok-tema-renkli .kat-dortlu, .blok-tema-renkli .kat-metin,.blok-tema-renkli .kat-izgara,.blok-tema-renkli .kat-liste, .blok-tema-renkli .kat-serit,.blok-tema-renkli .kat-basliklar{background:color-mix(in srgb,var(--kat) 7%,var(--kagit));border-radius:var(--r-l);padding:18px}
.blok{background:var(--kagit);border:1px solid var(--tel);border-radius:14px;
  padding:18px 20px 20px;margin-bottom:26px;
  box-shadow:0 1px 2px rgba(16,24,32,.05),0 8px 24px -18px rgba(16,24,32,.18)}
.blok>.blok-bas{padding:0 0 12px;margin-bottom:16px}
.blok.zeminli{background:var(--blok-zemin)}
.blok.zeminli .kat-buyuk-sag4,.blok.zeminli .kat-uclu,.blok.zeminli .kat-dortlu, .blok.zeminli .kat-metin,.blok.zeminli .kat-izgara,.blok.zeminli .kat-liste, .blok.zeminli .kat-serit,.blok.zeminli .kat-basliklar{background:transparent;padding:0}
.blok-tema-koyu{background:var(--koyu-yuzey);border-color:var(--koyu-cizgi)}
.blok-tema-koyu .kat-buyuk-sag4,.blok-tema-koyu .kat-uclu,.blok-tema-koyu .kat-dortlu, .blok-tema-koyu .kat-metin,.blok-tema-koyu .kat-izgara,.blok-tema-koyu .kat-liste, .blok-tema-koyu .kat-serit,.blok-tema-koyu .kat-basliklar{background:transparent;padding:0}
.blok-tema-koyu>.blok-bas{border-color:var(--koyu-cizgi)}
.blok-tema-renkli{background:color-mix(in srgb,var(--kat) 7%,var(--kagit));
  border-color:color-mix(in srgb,var(--kat) 25%,var(--tel))}
.blok-tema-renkli .kat-buyuk-sag4,.blok-tema-renkli .kat-uclu,.blok-tema-renkli .kat-dortlu, .blok-tema-renkli .kat-metin,.blok-tema-renkli .kat-izgara,.blok-tema-renkli .kat-liste, .blok-tema-renkli .kat-serit,.blok-tema-renkli .kat-basliklar{background:transparent;padding:0}
.blok-tema-sade{background:transparent;border:none;box-shadow:none;padding:0}
[data-tema="koyu"] .blok,[data-tema="koyu"] .yazar-blok,[data-tema="koyu"] .makale-liste, [data-tema="koyu"] .kat-akis,[data-tema="koyu"] .ana-slayt,[data-tema="koyu"] .yan-slayt{background:var(--kagit);border-color:var(--tel)}

/* ---- .blok-bas ---- */
.blok-bas{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.blok-bas h2{font-family:var(--sans);font-weight:800;font-size:1.22rem;letter-spacing:-.01em;display:flex;
  align-items:center;gap:11px}
.blok-bas h2::before{content:"";width:5px;height:22px;border-radius:3px;background:var(--kat,var(--vurgu))}
.blok-bas .tumu{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--soluk);display:flex;align-items:center;gap:5px}
.blok-bas .tumu:hover{color:var(--vurgu)}
.video-bant .blok-bas h2{color:#fff}
.video-bant .blok-bas h2::before{background:var(--acil)}
.video-bant .blok-bas .tumu{color:var(--tel-koyu)}
.video-bant .blok-bas .tumu:hover{color:#fff}
.blok-tema-koyu .blok-bas h2{color:#E6EDF4}
.blok>.blok-bas{display:flex;align-items:flex-end;gap:14px;padding:0 0 10px;margin-bottom:16px;
  border-bottom:1px solid var(--tel);position:relative}
.blok>.blok-bas h2{font-family:var(--sans);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;
  color:var(--murekkep);line-height:1}
.blok>.blok-bas::after{content:"";position:absolute;left:0;bottom:-2px;width:56px;height:3px;
  background:var(--kat,var(--acil));border-radius:2px}
.blok>.blok-bas .tumu{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soluk);white-space:nowrap}
.blok>.blok-bas .tumu:hover{color:var(--vurgu)}
.blok-tema-koyu .bk-buyuk h3,.blok-tema-koyu .bk-kucuk h3,.blok-tema-koyu .mt-oge h3, .blok-tema-koyu .blok-bas h2{color:#E6EDF4}
.blok>.blok-bas{padding:0 0 12px;margin-bottom:16px}
.blok-tema-koyu>.blok-bas{border-color:var(--koyu-cizgi)}

/* ---- .kat-buyuk-sag4 ---- */
.kat-buyuk-sag4{display:grid;grid-template-columns:1.32fr 1fr;gap:24px;overflow-x:clip}
.kat-buyuk-sag4>*{min-width:0}
.blok.zeminli .kat-buyuk-sag4,.blok.zeminli .kat-uclu,.blok.zeminli .kat-dortlu, .blok.zeminli .kat-metin,.blok.zeminli .kat-izgara,.blok.zeminli .kat-liste, .blok.zeminli .kat-serit,.blok.zeminli .kat-basliklar{background:var(--blok-zemin);border-radius:var(--r-l);padding:18px}
.blok-tema-koyu .kat-buyuk-sag4,.blok-tema-koyu .kat-uclu,.blok-tema-koyu .kat-dortlu, .blok-tema-koyu .kat-metin,.blok-tema-koyu .kat-izgara,.blok-tema-koyu .kat-liste, .blok-tema-koyu .kat-serit,.blok-tema-koyu .kat-basliklar{background:var(--koyu-yuzey);border-radius:var(--r-l);padding:18px}
.blok-tema-renkli .kat-buyuk-sag4,.blok-tema-renkli .kat-uclu,.blok-tema-renkli .kat-dortlu, .blok-tema-renkli .kat-metin,.blok-tema-renkli .kat-izgara,.blok-tema-renkli .kat-liste, .blok-tema-renkli .kat-serit,.blok-tema-renkli .kat-basliklar{background:color-mix(in srgb,var(--kat) 7%,var(--kagit));border-radius:var(--r-l);padding:18px}
.blok.zeminli .kat-buyuk-sag4,.blok.zeminli .kat-uclu,.blok.zeminli .kat-dortlu, .blok.zeminli .kat-metin,.blok.zeminli .kat-izgara,.blok.zeminli .kat-liste, .blok.zeminli .kat-serit,.blok.zeminli .kat-basliklar{background:transparent;padding:0}
.blok-tema-koyu .kat-buyuk-sag4,.blok-tema-koyu .kat-uclu,.blok-tema-koyu .kat-dortlu, .blok-tema-koyu .kat-metin,.blok-tema-koyu .kat-izgara,.blok-tema-koyu .kat-liste, .blok-tema-koyu .kat-serit,.blok-tema-koyu .kat-basliklar{background:transparent;padding:0}
.blok-tema-renkli .kat-buyuk-sag4,.blok-tema-renkli .kat-uclu,.blok-tema-renkli .kat-dortlu, .blok-tema-renkli .kat-metin,.blok-tema-renkli .kat-izgara,.blok-tema-renkli .kat-liste, .blok-tema-renkli .kat-serit,.blok-tema-renkli .kat-basliklar{background:transparent;padding:0}

/* ---- .bs4-izgara ---- */
.bs4-izgara{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px;align-content:start}
.bs4-izgara>*{min-width:0}

/* ---- .bk-buyuk ---- */
.bk-buyuk:hover .bk-im img,.bk-kucuk:hover .bk-im img{transform:scale(1.04)}
.bk-buyuk{display:block;min-width:0}
.bk-buyuk h3{font-family:var(--sans);font-weight:800;font-size:clamp(1.08rem,1.9vw,1.42rem);
  line-height:1.22;letter-spacing:-.02em;margin:12px 0 7px;color:var(--murekkep)}
.bk-buyuk p{font-family:var(--metin);color:var(--soluk);font-size:.95rem;line-height:1.55}
.bk-buyuk:hover h3{color:var(--vurgu)}
.blok-tema-koyu .bk-buyuk h3,.blok-tema-koyu .bk-kucuk h3,.blok-tema-koyu .mt-oge h3, .blok-tema-koyu .blok-bas h2{color:#E6EDF4}
.blok-tema-koyu .bk-buyuk p,.blok-tema-koyu .zaman{color:var(--tel-koyu)}

/* ---- .bk-kucuk ---- */
.bk-buyuk:hover .bk-im img,.bk-kucuk:hover .bk-im img{transform:scale(1.04)}
.bk-kucuk{display:block;min-width:0}
.bk-kucuk h3{font-family:var(--sans);font-weight:700;font-size:.98rem;line-height:1.3;
  margin-top:10px;color:var(--murekkep)}
.bk-kucuk:hover h3{color:var(--vurgu)}
.blok-tema-koyu .bk-buyuk h3,.blok-tema-koyu .bk-kucuk h3,.blok-tema-koyu .mt-oge h3, .blok-tema-koyu .blok-bas h2{color:#E6EDF4}

/* ---- .bk-im ---- */
.bk-im{display:block;border-radius:var(--r);overflow:hidden;background:var(--kagit-koyu);aspect-ratio:16/9}
.bk-im img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.bk-buyuk:hover .bk-im img,.bk-kucuk:hover .bk-im img{transform:scale(1.04)}

/* ---- .tumu ---- */
.blok-bas .tumu{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--soluk);display:flex;align-items:center;gap:5px}
.blok-bas .tumu:hover{color:var(--vurgu)}
.video-bant .blok-bas .tumu{color:var(--tel-koyu)}
.video-bant .blok-bas .tumu:hover{color:#fff}
.blok>.blok-bas .tumu{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soluk);white-space:nowrap}
.blok>.blok-bas .tumu:hover{color:var(--vurgu)}

/* ===== TEMA NAKLI 6-8. ADIM: KENAR SUTUNU, KOSE YAZARLARI, DIPNOT ===== */

/* ---- .kutu ---- */
.kutu{background:var(--kagit);border:1px solid var(--tel);border-radius:var(--r-l);padding:16px}
.kutu-bas{font-family:var(--sans);font-weight:800;font-size:1rem;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.kutu-bas::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--vurgu)}
.blok,.duzen,.kutu{max-width:100%}
.kenar .kutu{box-shadow:0 1px 2px rgba(16,24,32,.05)}

/* ---- .sira-liste ---- */
.sira-liste{display:flex;flex-direction:column;gap:11px;counter-reset:s}
.sira-liste a{display:flex;gap:12px;align-items:flex-start;counter-increment:s;padding-bottom:11px;
  border-bottom:1px solid var(--tel)}
.sira-liste a:last-child{border:none;padding-bottom:0}
.sira-liste a::before{content:counter(s);font-family:var(--sans);font-weight:800;font-size:1.15rem;color:var(--vurgu);
  opacity:.42;line-height:1;flex:0 0 22px}
.sira-liste h4{font-size:.9rem;font-weight:600;line-height:1.32}
.sira-liste a:hover h4{color:var(--vurgu)}

/* ---- .yazar-blok ---- */
.yazar-blok{background:var(--kagit);border:1px solid var(--tel);border-radius:var(--r-l);
  padding:18px 20px;margin:22px 0;overflow-x:clip}
.yazar-blok>*{min-width:0}
.yazar-blok{box-shadow:0 1px 2px rgba(16,24,32,.05),0 8px 24px -18px rgba(16,24,32,.18)}
[data-tema="koyu"] .blok,[data-tema="koyu"] .yazar-blok,[data-tema="koyu"] .makale-liste, [data-tema="koyu"] .kat-akis,[data-tema="koyu"] .ana-slayt,[data-tema="koyu"] .yan-slayt{background:var(--kagit);border-color:var(--tel)}
.yazar-blok{background:#182642;border:1px solid #223258;border-radius:16px;box-shadow:0 10px 30px -18px rgba(6,12,28,.6)}
[data-tema="koyu"] .yazar-blok{background:#131F38;border-color:#1E2C4E}

/* ---- .yb- ---- */
.yb-bas{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative;
  padding-bottom:10px;border-bottom:1px solid var(--tel)}
.yb-bas h2{font-family:var(--sans);font-weight:800;font-size:1.22rem;letter-spacing:-.02em}
.yb-bas::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;
  background:var(--altin);border-radius:2px}
.yb-ikon{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:var(--vurgu-sis);
  color:var(--vurgu);display:grid;place-items:center}
.yb-tumu{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soluk)}
.yb-tumu:hover{color:var(--vurgu)}
.yb-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.yb-izgara>*{min-width:0}
.yb-kart{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--tel);
  border-radius:var(--r);background:var(--kagit-acik);transition:.16s;min-height:48px}
.yb-kart:hover{border-color:var(--altin);background:var(--kagit);transform:translateY(-2px)}
.yb-foto{flex:0 0 54px;width:54px;height:54px;border-radius:50%;overflow:hidden;background:var(--vurgu);
  display:grid;place-items:center}
.yb-foto img{width:100%;height:100%;object-fit:cover}
.yb-harf{color:#fff;font-family:var(--sans);font-weight:800;font-size:1.2rem}
.yb-ic{min-width:0;display:flex;flex-direction:column;gap:2px}
.yb-ic b{font-family:var(--sans);font-weight:700;font-size:.95rem;line-height:1.25}
.yb-unvan{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silik)}
.yb-yazi{font-family:var(--metin);font-size:.86rem;color:var(--soluk);line-height:1.4;margin-top:3px}
.yb-kart:hover .yb-yazi{color:var(--murekkep-2)}
.yb-foto{border:2px solid var(--altin)}
.yb-bas{border-bottom:0;margin-bottom:14px}
.yb-bas::after{display:none}
.yb-cizgi{width:44px;height:6px;border-radius:4px;background:#E9A13B;flex:0 0 44px}
.yb-bas h2{color:#fff}
.yb-tumu{color:#C7D2E8}
.yb-tumu:hover{color:#E9A13B}
.yb-kart{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 16px 18px;
  background:#20304F;border:1px solid #2B3C60;border-radius:12px}
.yb-kart:hover{border-color:#E9A13B;background:#243756;transform:translateY(-2px)}
.yb-foto{flex:0 0 auto;width:84px;height:84px;margin-bottom:8px;border:0;
  background:linear-gradient(135deg,#E2452B,#F0862F)}
.yb-harf{font-size:1.5rem}
.yb-ad{font-family:var(--sans);font-weight:800;font-size:1.02rem;line-height:1.25;color:#fff}
.yb-kart .yb-unvan{color:#9FB0CC}
.yb-kart .yb-yazi{font-style:italic;color:#E7EDF8;font-size:.92rem;margin-top:8px}
.yb-kart:hover .yb-yazi{color:#fff}
.yb-zaman{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:#E9A13B;font-weight:700;margin-top:8px}
.yb-alt{display:block;margin-top:14px;padding:13px;text-align:center;border:1px solid #2B3C60;
  border-radius:12px;background:#20304F;color:#fff;font-family:var(--sans);font-weight:700;font-size:.95rem}
.yb-alt:hover{border-color:#E9A13B;color:#E9A13B}
.yb-bas{display:flex;align-items:center;gap:12px}
.yb-oklar{margin-left:auto;display:flex;gap:6px}
.yb-ok{width:30px;height:30px;border-radius:50%;border:1px solid var(--tel);
  background:var(--kagit);color:var(--murekkep);font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.15s}
.yb-ok:hover{background:var(--vurgu);color:#fff;border-color:var(--vurgu)}
.yb-ok[disabled]{opacity:.35;cursor:default}
.yb-ok[disabled]:hover{background:var(--kagit);color:var(--murekkep);border-color:var(--tel)}
.yb-izgara.yb-kaydir{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.yb-izgara.yb-kaydir::-webkit-scrollbar{height:6px}
.yb-izgara.yb-kaydir::-webkit-scrollbar-thumb{background:var(--tel);border-radius:3px}
.yb-izgara.yb-kaydir>.yb-kart{flex:0 0 clamp(210px,23%,260px);scroll-snap-align:start}
@media (max-width:640px){
  .yb-izgara.yb-kaydir>.yb-kart{flex:0 0 78%}
}

/* ---- .kenar ---- */
.kenar{position:sticky;top:92px;display:flex;flex-direction:column;gap:18px}
.iki-sutun>*,.kenar>*,.blok>*,.duzen-karma>*,.mini-liste>*,.video-bant>*{min-width:0}
.kenar .reklam-yuva{margin:0 0 18px}
.kenar .kutu{box-shadow:0 1px 2px rgba(16,24,32,.05)}

/* ---- .iki-sutun ---- */
.iki-sutun{display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start}
.iki-sutun>*,.kenar>*,.blok>*,.duzen-karma>*,.mini-liste>*,.video-bant>*{min-width:0}
.iki-sutun>div{min-width:0;max-width:100%}

/* ---- .medya-serit ---- */
.medya-serit{padding:30px 0;margin:26px 0}
.medya-serit.foto{background:linear-gradient(140deg,#8E1D17,#C43127 55%,#D6382E)}
.medya-serit.video{background:linear-gradient(140deg,#0A3A4C,#12617E 55%,#1B7FA8)}
.medya-serit .mb-bas{display:flex;align-items:center;gap:13px;margin-bottom:18px;color:#fff}
.medya-serit .mb-bas h2{font-family:var(--sans);font-weight:800;font-size:1.45rem;letter-spacing:-.02em}
.medya-serit .mb-ikon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:rgba(255,255,255,.18);display:grid;place-items:center}
.medya-serit .mb-tumu{margin-left:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  color:#fff;background:rgba(255,255,255,.16);padding:9px 16px;border-radius:99px;min-height:40px;
  display:inline-flex;align-items:center;transition:.15s}
.medya-serit .mb-tumu:hover{background:rgba(255,255,255,.32)}
.medya-serit{max-width:var(--en);margin:0 auto 26px;border-radius:16px;
  padding:22px 22px 24px;box-shadow:0 10px 30px -20px rgba(16,24,32,.35)}
.medya-serit>.kap{max-width:none;padding:0}

/* ---- .mb- ---- */
.mb-ikon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;flex:0 0 44px}
.mb-sayi{margin-left:auto;font-family:var(--mono);font-size:.7rem;background:rgba(255,255,255,.16);
  padding:6px 12px;border-radius:99px;flex:0 0 auto}
.mb-bas{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#fff}
.mb-bas h2{font-family:var(--sans);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.mb-bas .mb-ikon{width:38px;height:38px;flex:0 0 38px;border-radius:10px}
.mb-tumu{margin-left:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:#fff;
  background:rgba(255,255,255,.16);padding:8px 14px;border-radius:99px;min-height:36px;
  display:inline-flex;align-items:center;transition:.15s}
.mb-tumu:hover{background:rgba(255,255,255,.3)}
.mb-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mb-izgara>*{min-width:0}
.mb-kart{display:block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);overflow:hidden;transition:.18s}
.mb-kart:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.mb-im{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(0,0,0,.2)}
.mb-im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mb-kart:hover .mb-im img{transform:scale(1.06)}
.mb-rozet{position:absolute;right:8px;bottom:8px;background:rgba(10,16,22,.8);color:#fff;
  font-family:var(--mono);font-size:.64rem;padding:3px 8px;border-radius:99px}
.mb-oynat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;
  border-radius:50%;background:rgba(255,255,255,.9);color:#0E4C63;display:grid;place-items:center}
.mb-kart h3{padding:11px 12px 13px;font-family:var(--sans);font-weight:700;font-size:.9rem;
  line-height:1.28;color:#fff}
.medya-serit .mb-bas{display:flex;align-items:center;gap:13px;margin-bottom:18px;color:#fff}
.medya-serit .mb-bas h2{font-family:var(--sans);font-weight:800;font-size:1.45rem;letter-spacing:-.02em}
.medya-serit .mb-ikon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:rgba(255,255,255,.18);display:grid;place-items:center}
.medya-serit .mb-tumu{margin-left:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  color:#fff;background:rgba(255,255,255,.16);padding:9px 16px;border-radius:99px;min-height:40px;
  display:inline-flex;align-items:center;transition:.15s}
.medya-serit .mb-tumu:hover{background:rgba(255,255,255,.32)}

/* ---- .alt ---- */
.alt{background:var(--koyu-yuzey);color:var(--tel-koyu);margin-top:40px;padding:40px 0 0}
.alt-izgara{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:32px;padding-bottom:32px}
.alt h4{font-family:var(--sans);color:#fff;font-size:.95rem;margin-bottom:13px;font-weight:700}
.alt ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.alt a:hover{color:#fff}
.alt-logo{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.alt p{font-size:.88rem;line-height:1.6;max-width:44ch}
.alt-kredi{border-top:1px solid var(--koyu-cizgi);padding:18px 0;display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap;font-size:.83rem}
.alt-kredi a{color:#F0C98A;font-weight:700}
.alt-kredi a:hover{text-decoration:underline}
.alt-logo img{height:44px;width:auto;border-radius:6px;background:#fff;padding:4px 7px}
.puan-anahtar .ku.alt{background:var(--puan-alt,#dc2626)}

/* ---- kenar sutunu: bizim .modul'u referansin .kutu'su gibi goster ----
   Sablonlari yeniden yazmak yerine takma ad. Bizde on ayri pencere ogesi
   var (burc, hava, puan, eczane, namaz, vefat, e-gazete...) ve referansin
   CSS'inde hicbirinin karsiligi yok; isaretlemeyi degistirmek hepsini
   tek tek elden gecirmek demekti. Gorsel sonuc ayni. */
.yan > .modul{
  background:var(--kagit);
  border:1px solid var(--tel);
  border-radius:var(--r-l);
  padding:16px;
  box-shadow:none;
}
.yan > .modul + .modul{ margin-top:16px; padding-top:16px; }
.modul-baslik{
  font-family:var(--sans); font-weight:800; font-size:1rem;
  margin-bottom:12px; display:flex; align-items:center; gap:9px;
  border:0; padding:0;
}
.modul-baslik::before{
  content:""; width:4px; height:18px; border-radius:2px;
  background:var(--kat-renk, var(--vurgu)); flex:0 0 auto;
}

/* ---- kose yazarlari: referansta lacivert bant ---- */
.yazar-blok{
  background:#182642;
  border-radius:var(--r-l);
  padding:20px;
  margin:24px 0;
}
.yazar-blok h2,
.yazar-blok .yb-ad{ color:#fff; }
.yazar-blok .yb-tumu{ color:rgba(255,255,255,.78); }
.yazar-blok .yb-tumu:hover{ color:#fff; }
.yb-kart{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12) !important;
  border-radius:var(--r);
  flex-direction:column; align-items:center; text-align:center;
}
.yb-kart:hover{ background:rgba(255,255,255,.1); }
.yb-foto img{
  width:62px; height:62px; border-radius:50%; object-fit:cover; display:block;
}
.yb-ad{ font-family:var(--sans); font-weight:700; font-size:.92rem; }
.yb-unvan{ font-size:.72rem; color:rgba(255,255,255,.6); }
.yb-yazi{
  font-family:var(--metin); font-style:italic; font-size:.84rem; line-height:1.4;
  color:rgba(255,255,255,.85);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yb-zaman{ font-family:var(--mono); font-size:.64rem; color:rgba(255,255,255,.5); }
.yb-izgara{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .yb-izgara{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .yb-izgara{ grid-template-columns:1fr; } }

/* ===== TEMA NAKLI 9. ADIM: IC SAYFALAR ===== */

/* ---- .makale ---- */
.makale{background:var(--kagit);border:1px solid var(--tel);border-radius:var(--r-l);padding:clamp(20px,3vw,38px)}
.makale h1{font-family:var(--sans);font-weight:800;font-size:clamp(1.55rem,3.6vw,2.45rem);line-height:1.13;
  letter-spacing:-.022em;margin:12px 0;text-wrap:balance}
.makale .ozet{font-family:var(--metin);font-size:1.1rem;color:var(--murekkep-2);line-height:1.6;
  padding-left:16px;border-left:3px solid var(--vurgu);margin-bottom:20px}
.makale-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;
  border-top:1px solid var(--tel);border-bottom:1px solid var(--tel);font-size:.83rem;color:var(--soluk)}
.makale-meta .yz{display:flex;align-items:center;gap:9px}
.makale-meta .yz img{width:34px;height:34px;border-radius:50%}
.makale-meta b{color:var(--murekkep)}
.makale-govde{font-family:var(--metin);font-size:var(--yz,1.06rem);line-height:1.78;color:var(--murekkep);margin-top:22px}
.makale-govde p{margin-bottom:18px}
.makale-govde h2{font-family:var(--sans);font-size:1.32em;font-weight:800;margin:28px 0 12px;letter-spacing:-.01em}
.makale-govde h3{font-family:var(--sans);font-size:1.14em;font-weight:700;margin:24px 0 10px}
.makale-govde figure{margin:22px 0}
.makale-govde figure img{border-radius:var(--r)}
.makale-govde figcaption{font-family:var(--sans);font-size:.8rem;color:var(--soluk);padding-top:8px;text-align:center}
.makale-govde blockquote{border-left:4px solid var(--vurgu);background:var(--kagit-acik);padding:16px 20px;
  border-radius:0 var(--r) var(--r) 0;margin:22px 0;font-style:italic;color:var(--murekkep-2)}
.makale-govde ul,.makale-govde ol{margin:0 0 18px 22px}
.makale-govde li{margin-bottom:7px}
.makale-kapak{margin:18px 0}
.makale-kapak img{width:100%;border-radius:var(--r);display:block}
.makale-kapak figcaption{font-family:var(--mono);font-size:.72rem;color:var(--silik);padding-top:7px}
.makale-liste{display:flex;flex-direction:column;gap:0}
.makale-liste{background:var(--kagit);border:1px solid var(--tel);border-radius:14px;
  padding:6px 20px;box-shadow:0 1px 2px rgba(16,24,32,.05)}
[data-tema="koyu"] .blok,[data-tema="koyu"] .yazar-blok,[data-tema="koyu"] .makale-liste, [data-tema="koyu"] .kat-akis,[data-tema="koyu"] .ana-slayt,[data-tema="koyu"] .yan-slayt{background:var(--kagit);border-color:var(--tel)}
.makale-govde figure{margin:18px 0}
.makale-govde figure img{border-radius:var(--r);height:auto}
.makale-govde figure.g-sol{float:left;max-width:46%;margin:6px 20px 12px 0}
.makale-govde figure.g-sag{float:right;max-width:46%;margin:6px 0 12px 20px}
.makale-govde figure.g-orta{text-align:center;clear:both}
.makale-govde figure.g-orta img{margin:0 auto}
.makale-govde figure.g-tam{clear:both}
.makale-govde figure.g-tam img{width:100%}
.makale-govde figcaption{font-family:var(--mono);font-size:.72rem;color:var(--silik);
  border-left:3px solid var(--vurgu);padding:5px 11px;margin-top:7px;background:var(--kagit-acik);text-align:left}
.makale-govde::after{content:"";display:block;clear:both}

/* ---- .makale-meta ---- */
.makale-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;
  border-top:1px solid var(--tel);border-bottom:1px solid var(--tel);font-size:.83rem;color:var(--soluk)}
.makale-meta .yz{display:flex;align-items:center;gap:9px}
.makale-meta .yz img{width:34px;height:34px;border-radius:50%}
.makale-meta b{color:var(--murekkep)}

/* ---- .makale-kapak ---- */
.makale-kapak{margin:18px 0}
.makale-kapak img{width:100%;border-radius:var(--r);display:block}
.makale-kapak figcaption{font-family:var(--mono);font-size:.72rem;color:var(--silik);padding-top:7px}

/* ---- .ozet ---- */
.makale .ozet{font-family:var(--metin);font-size:1.1rem;color:var(--murekkep-2);line-height:1.6;
  padding-left:16px;border-left:3px solid var(--vurgu);margin-bottom:20px}

/* ---- .kirinti ---- */
.kirinti{font-family:var(--mono);font-size:.68rem;color:var(--soluk);padding:16px 0;display:flex;gap:8px;flex-wrap:wrap}
.kirinti a:hover{color:var(--vurgu)}

/* ---- .ilerleme ---- */
.ilerleme{position:fixed;top:0;left:0;height:3px;background:var(--acil);z-index:100;width:0}

/* ---- .arac-cubuk ---- */
.arac-cubuk{margin-left:auto;display:flex;gap:6px}

/* ---- .mini-btn ---- */
.mini-btn{padding:7px 11px;border:1px solid var(--tel);border-radius:8px;font-size:.78rem;font-weight:600;
  display:flex;align-items:center;gap:6px;min-height:38px;transition:.15s}
.mini-btn:hover{background:var(--vurgu);color:#fff;border-color:var(--vurgu)}
.mini-btn.etkin{background:var(--vurgu);color:#fff;border-color:var(--vurgu)}
.mini-btn.aktif{background:var(--vurgu);color:#fff;border-color:var(--vurgu)}
.mini-btn{background:var(--kagit-acik);color:var(--murekkep-2)}
.mini-btn:hover{background:var(--vurgu);color:#fff;border-color:var(--vurgu)}

/* ---- haber sayfasi: bizim siniflari referansin gorunumune bagla ----
   Yapilar birebir ortusuyor, yalniz adlar farkli. Isaretlemeyi degistirmek
   yerine takma ad: haber sayfamizda referansta olmayan parcalar var
   (fotograf kaydiricisi, paylasim kutusu, okuma araclari, yorumlar) ve
   477 satiri yeniden yazmak gereksiz risk olurdu.

     bizde                referansta
     .yazi-sutun          .makale
     .izyolu              .kirinti
     .okuma-cubugu        .ilerleme
     .spot                .ozet
     .yazi-gorsel         .makale-kapak
     .yazi-govde          .metin.makale-govde
     .imza                .makale-meta
     .okuma-araclari      .arac-cubuk
*/
.sutun-ana.yazi-sutun{
  background:var(--kagit);
  border:1px solid var(--tel);
  border-radius:var(--r-l);
  padding:clamp(20px,3vw,38px);
}
.izyolu{
  font-family:var(--mono); font-size:.68rem; color:var(--soluk);
  padding:16px 0; display:flex; gap:8px; flex-wrap:wrap;
}
.izyolu a:hover{ color:var(--vurgu); }
.yazi-sutun h1{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(1.55rem,3.6vw,2.45rem); line-height:1.13;
  letter-spacing:-.02em;
}
.spot{
  font-family:var(--metin); font-size:1.1rem;
  color:var(--murekkep-2); line-height:1.6;
}
.yazi-gorsel{
  border-radius:var(--r); overflow:hidden; margin:18px 0;
}
.yazi-gorsel img{ width:100%; height:auto; display:block; }

/* ---- kategori sayfasi ---- */
.kategori-one,
.liste-izgara,
.siralama-cubugu,
.sayfalama{
  background:var(--kagit);
  border:1px solid var(--tel);
  border-radius:var(--r-l);
  box-shadow:none;
}
.kategori-basi h1{
  font-family:var(--sans); font-weight:800;
  letter-spacing:-.025em;
}

/* ---- 9. adim kontrast duzeltmeleri (olculdu, 164 metinden 2'si kaliyordu) ----
   1) Canli yayin kutusu eskiden KOYU zeminde dururdu, yazisi krem (#f0ece3).
      Yeni kutu beyaz; krem yazi 1,18:1 veriyordu. Mureккep'e cekildi.
   2) Izyolu --soluk ile 3,99:1 veriyordu (11px, esik 4,5). Bir ton koyu. */
.yan > .modul .canli-ad,
.yan > .modul .canli-dugme,
.canli-serit .canli-ad{
  color:var(--murekkep);
}
.yan > .modul .canli-eylem{ color:var(--soluk); }
.izyolu,
.kirinti{ color:var(--murekkep-3); }
/* Canli yayin dugmesi beyaz kartta: beyaz ic kenarlik ve krem yazi
   gorunmuyordu. Acik zemin surumu. */
.yan > .modul .canli-dugme{
  background:var(--kagit-acik);
  box-shadow:inset 0 0 0 1px var(--tel);
  color:var(--murekkep);
}
.yan > .modul .canli-dugme:hover{
  background:var(--kagit-koyu);
  box-shadow:inset 0 0 0 1px var(--tel-koyu);
}

/* Gri zemin uzerinde duran (kart disindaki) soluk metinler */
.izyolu,
.kirinti,
.kategori-basi .sub,
.kategori-basi small,
.kategori-sayi small{
  color:var(--soluk-zemin);
}
.kategori-sayi span{ color:var(--soluk-zemin); }

/* ---- kucuk puntoda kontrast duzeltmeleri (11px, esik 4,5) ----
   Olculdu: "Haberi dinle" 4,38:1 (--vurgu acik gri yuzeyde),
   "(yayimlanmaz)" 1,63:1 (etiketin yani sira notu fazla soluktu). */
.oa-ses{ color:var(--vurgu-koyu); border-color:var(--vurgu-koyu); }
.oa-ses:hover,
.oa-ses.okuyor{ color:#fff; }
.fld span{ color:var(--murekkep-3); opacity:1; }

/* ---- yorum formu etiket notu: --tel-koyu artik acik bir ton (#b6c3d0),
        beyaz uzerinde 1,63:1 veriyordu. Ayni ozgullukte duzeltme. ---- */
.yorum-form .fld span{ color:var(--murekkep-3); }

/* ===========================================================================
   TEMA NAKLI: DAR EKRAN
   Referans 1100px altinda yalniz .hizli-bag'i gizliyor. Bizde ek olarak
   doviz seridi tasiyordu (375px ekranda sayfa 433px): .finans-oge kendi
   ic genisligini dayatiyor ve 1fr sutunlar kuculemiyordu. Olculdu ve
   asagidaki esiklerle kapatildi.
   =========================================================================== */
@media (max-width:1100px){
  .hizli-bag{ display:none; }
}
@media (max-width:860px){
  /* doviz seridi: tasmak yerine kendi icinde yatay kaysin */
  .finans{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    min-width:0;
    flex:1 1 auto;
  }
  .finans::-webkit-scrollbar{ display:none; }
  .finans-oge{ flex:0 0 auto; }
  .bas-ic{ gap:12px; height:auto; padding:10px 0; flex-wrap:wrap; }
  .ust-serit.sb-besli{ grid-template-columns:repeat(3,1fr); }
  .manset-izgara{ grid-template-columns:1fr; }
  .yan-kolon.yan4{ grid-template-rows:none; grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  /* telefonda doviz seridi tamamen kalksin: bas satiri logo + arac kalsin */
  .finans{ display:none; }
  .ust-serit.sb-besli{ grid-template-columns:repeat(2,1fr); }
  .yan-kolon.yan4{ grid-template-columns:1fr; }
  .kat-buyuk-sag4{ grid-template-columns:1fr; }
  .bs4-izgara{ grid-template-columns:repeat(2,1fr); }
}

/* ===========================================================================
   TEMA NAKLI · PALET DUZELTMESI (17.10.2026)

   ONCEKI ALIM YANLISTI. Referansin stil dosyasindaki :root blogunu almistim,
   ama o blogun basinda su yaziyor: "Tema paleti (JS bunlari kok elemana
   INLINE yazar)". Yani dosyadaki degerler VARSAYILAN; canli sitede
   JavaScript bambaska bir palet yaziyor. Olculdu:

       deger          dosyada (aldigim)   CANLIDA (dogrusu)
       --bg           #D7DDE3 gri         #FFFFFF beyaz
       --marka        #0E4C63 petrol      #A91D1D koyu kirmizi
       --cizgi        #CBD4DC serin gri   #CFC6AC sicak bej
       --soluk        #5D6B7A serin       #6D6552 sicak
       --murekkep     #111820 serin       #191712 sicak

   Ayrica ikinci bir katman var: --g-* (panelden ayarlanan gorunum).
   Menu seridinin koyu olmasini bu sagliyor, temel kural degil.

   MARKA RENGI: referansta kirmizi. Onceki turda "Kayseri mavisi kalsin"
   demistim; musteri "aynisi olsun" dedigi ve logoda zaten kirmizi oldugu
   icin bu sefer referansinki aliniyor. Tek degiskenle geri donulur.
   =========================================================================== */
:root{
  /* --- zemin ve yuzeyler: hepsi beyaz, ayrimi CIZGI yapiyor --- */
  --zemin:        #ffffff;
  --kagit:        #ffffff;
  --kagit-acik:   #ffffff;
  --kagit-koyu:   #f3f0e9;   /* gorsel yer tutucu; referansta yuzey3 beyaz ama
                                bos gorsel kutusu gorunmeli */

  /* --- sicak siyah ve sicak griler --- */
  --murekkep:     #191712;
  --murekkep-2:   #2c3844;
  --murekkep-3:   #4a4336;
  --soluk:        #6d6552;
  --silik:        #8e9ba8;
  --soluk-zemin:  #6d6552;   /* zemin artik beyaz, ayri tona gerek kalmadi */

  /* --- cizgiler: sicak bej --- */
  --tel:          #cfc6ac;
  --tel-koyu:     #d8d2c0;

  /* --- marka: koyu kirmizi --- */
  --vurgu:        #a91d1d;
  --vurgu-koyu:   #7e1515;
  --vurgu-ham:    #a91d1d;
  --vurgu-sis:    #f3dfdf;

  /* --- acil: referansta marka ile ayni --- */
  --acil:         #a91d1d;
  --acil-koyu:    #7e1515;
  --acil-sis:     #f5e4e4;

  --altin:        #b8862f;
  --yesil:        #177245;

  --koyu-yuzey:   #191712;
  --koyu-cizgi:   #253240;

  /* --- gorunum katmani: referansta panelden ayarlanan degerler --- */
  --g-menu-zemin:  #191712;
  --g-menu-yazi:   #f4efe2;
  --g-blok-baslik: #191712;
  --g-kart-baslik: #191712;
  --g-kart-ozet:   #6d6552;

  /* son dakika seridi, yeni palete gore */
  --sdr: var(--acil);
  --sdz: #ffffff;
  --sdy: var(--murekkep);
}

/* --- menu seridi: referansta KOYU, alt cizgisi marka rengi --- */
.menu-serit{
  background:var(--g-menu-zemin);
  border-bottom:2px solid var(--vurgu);
}
.menu a{ color:var(--g-menu-yazi); }
.menu a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.menu a.aktif{ background:var(--vurgu); color:#fff; }
.menu-sos a{ color:var(--g-menu-yazi); opacity:.75; }
.menu-sos a:hover{ opacity:1; color:#fff; }

/* zemin beyaza dondu: kart ile zemin arasindaki ayrimi cizgi yapiyor,
   golge degil. Referansta kartlarda golge yok. */
.sutun-ana > .blok,
.sutun-ana > .sosyal-blok,
.yan > .modul,
.oc-kart,
.gunun-listesi,
.sutun-ana.yazi-sutun,
.kategori-one,
.liste-izgara,
.siralama-cubugu,
.sayfalama{
  box-shadow:none;
}

/* Nakilde ceviriden kacan dort degisken. Ucunun yedek degeri vardi,
   --blok-zemin yedeksizdi (yalnizca .blok.zeminli icinde, o sinifi
   basmiyoruz, ama acikta kalmasin). Degerler referans paletinden. */
:root{
  --blok-zemin: #f6f3ec;
  --puan-alt:   var(--acil);
  --tel-acik:   rgba(25,23,18,.07);
  --yz:         1.06rem;
}

/* ===========================================================================
   TEMA NAKLI · ADIM 11 — YAZI KARAKTERI VE KALAN BILESEN FARKLARI (17.10.2026)

   Iki sitenin hesaplanmis stilleri secici secici karsilastirildi. Kalan
   farklar ve sebepleri:

   1) YAZI KARAKTERI ROLLERI TERSTI. Referansta baslik ve arayuz serif,
      okuma metni sans:
          baslik + arayuz : "Source Serif 4" 600/800
          okuma metni     : "PT Sans" 400/700
          sayi + etiket   : "JetBrains Mono"
      Bizde tam tersiydi (Archivo baslikta, Source Serif 4 metinde).
      Dogrulandi: referansin haber sayfasinda govde PT Sans 17.6px/28.16px,
      h1 Source Serif 4 800 39.2px.
      Archivo ve Archivo Narrow artik kullanilmiyor, head.php'deki Google
      Fonts baglantisindan da cikarildi.

   2) .sutun-ana > .blok eski kuralimiz bloga kategori renginin %6'sini
      karistiriyordu (color-mix). Ozgullugu 0,2,0 oldugu icin nakledilen
      .blok kuralini (0,1,0) eziyordu. Referansta blok duz beyaz, cercevesi
      sicak bej. Ton kaldirildi.

   3) .yan4-kart bizde acik zeminliydi ama basligi beyazdi; beyaz yazi acik
      zeminde okunmuyordu. Referansta kart koyu (#1a232e). Duzeltildi.

   4) Kucuk olculer referanstan birebir alindi: blok 14px kose / 18px 20px
      20px dolgu, yazar blogu 16px kose / 18px 20px dolgu, rozet --marka2.
   =========================================================================== */
:root{
  --baslik: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:   "Source Serif 4", Georgia, serif;
  --dar:    "Source Serif 4", Georgia, serif;
  --metin:  "PT Sans", Arial, Helvetica, sans-serif;
}

/* 2) blok: kategori tonu yok, duz beyaz, sicak cerceve */
.sutun-ana > .blok,
.sutun-ana > .sosyal-blok,
.blok{
  background:var(--kagit);
  border:1px solid var(--tel);
  border-radius:14px;
  padding:18px 20px 20px;
  box-shadow:none;
}
.sutun-ana > .blok{ border-color:var(--tel); }
.blok-bas{ padding:0 0 12px; }

/* 3) yan sutun karti: koyu zemin, beyaz yazi okunur olsun */
.yan4-kart{
  background:#1a232e;
  border-radius:18px;
}

/* 4) referanstan birebir kucuk olculer */
.yazar-blok{ border-radius:16px; padding:18px 20px; }
.rozet{ background:var(--vurgu-koyu); }

/* Archivo'nun degisken genislik ekseni (wdth) icin yazilmis iki kural vardi.
   Source Serif 4'te wdth ekseni yok, referansta da font-variation-settings
   "normal". Eksen kapatildi; optik boyut (opsz) otomatik kalsin diye deger
   olarak normal veriliyor. */
h1,h2,h3,h4,.baslik-dar,.manset-baslik{ font-variation-settings:normal; }

/* Manset basligi referansla ayni olculere getirildi.
   Referans: h2 icinde .slayt-ic, Source Serif 4, 30.4px / 800 / 1.16,
   beyaz, font-variation-settings normal.
   Bizde 50px / 700 ve wdth 86 vardi, cok daha iriydi. */
.slayt-yazi h1,
.slayt-yazi h2{
  font-variation-settings:normal;
  font-size:clamp(21px, 2.1vw, 30.4px);
  font-weight:800;
  line-height:1.16;
}

/* ===========================================================================
   TEMA NAKLI · ADIM 12 — TELAFI KURALLARININ GERI ALINMASI (17.10.2026)

   Iki sitenin TUM ortak sinif adlari (140 sinif, 11 ozellik) makine ile
   karsilastirildi. Kalan farklarin hepsi, .blok dolgusu sifirken yazdigim
   telafi kurallarindan geliyordu; dolgu adim 11'de referanstaki degerine
   donunce bu telafiler fazlalik oldu.
   =========================================================================== */

/* .blok artik kendi dolgusunu tasiyor; cocuklara ayrica yan dolgu verilmiyor.
   Referans: .blok-bas 0 0 12px, .kat-buyuk-sag4 0. */
.sutun-ana > .blok > :not(.blok-baslik){ padding-inline:0; }
.sutun-ana > .blok > :last-child{ padding-bottom:0; }

/* Gorsel yer tutucu referansta beyaz, bizde bej kalmisti. */
.st-im, .slayt-kutu, .bk-im{ background:var(--kagit); }

/* Yazar kartinda ad ve zaman: nakledilen degerler sonradan ezilmisti.
   Referans: ad 1.02rem/800, zaman 0.7rem altin (#E9A13B) 0.04em. */
.yb-ad{ font-weight:800; font-size:1.02rem; }
.yb-zaman{ font-size:.7rem; letter-spacing:.04em; color:#e9a13b; }
.yb-tumu{ color:#c7d2e8; }
.yb-izgara{ padding-left:6px; }

/* Son dakika "Tumu" dugmesi referansta buyuk harfe cevrilmiyor. */
.sd-tumu{ text-transform:none; letter-spacing:normal; }

/* Dipnot yazisi serin griydi, referansin sicak kremine cevrildi. */
.dipnot{ color:#d8d2c0; }

/* Baslik araclarindaki ikon dugmeleri referansta dolgusuz. */
.bas-arac .ikon-btn, .bas-arac #hamburger{ padding:0; }

/* Facebook dugmesinde beyaz yazi, markanin resmi mavisi (#1877F2) uzerinde
   4.23:1 kaliyordu; WCAG AA normal metin icin 4.5:1 ister. Mavi bir tik
   koyultuldu, olculen yeni oran 5.4:1. Renk hala Facebook mavisi olarak
   taniniyor. Bu modul bizim eklemmiz, referansta karsiligi yok. */
.sosyal-dugme.sd-facebook{ background:#1565d8; }

/* ===========================================================================
   TEMA NAKLI · ADIM 13 — MOBIL MENU DAVRANISI (17.10.2026)

   Yayin sonrasi testte bulundu: 375px'te menunun son ogesi ("Dunya")
   kirpiliyordu ve kapsayicinin overflow-x degeri hidden oldugu icin
   kaydirilamiyordu da, yani o kategoriye mobilden ulasilamiyordu.

   Referansta olculen davranis: .menu 861px'ten itibaren gorunur, 860px ve
   altinda tamamen gizleniyor, yerini hamburger aliyor. Kirilma noktasi tek
   tek olculerek bulundu (861 flex, 860 none).

   Ayrica referansta hamburger HER genislikte duruyor (masaustunde de tum
   kategori cekmecesini aciyor). Bizde yalnizca JS tasma tespit edince
   (data-tasma="1") goruntuleniyordu. Referanstaki gibi surekli gorunur
   yapildi; boylece 860 altinda menu gizlenince kategorilere erisim kopmuyor.
   =========================================================================== */
.hamburger{ display:grid; }
@media (max-width:860px){
  .menu-serit .menu{ display:none; }
}

/* Canli yayin seridi bizim ek modulumuz, referansta karsiligi yok.
   375px'te iki ogesi alt alta duserek baslige 80px ekliyordu. Mobilde
   tek satira alindi; sigmazsa yatay kaydirilir, sayfaya tasma yapmaz. */
@media (max-width:640px){
  /* dugmeler .canli-serit'in degil, icindeki .kap sarmalinin cocugu */
  .canli-serit > .kap{
    display:flex; flex-wrap:nowrap; gap:8px; align-items:center;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .canli-serit > .kap::-webkit-scrollbar{ display:none; }
  .canli-serit .canli-dugme{ flex:0 0 auto; }
}

/* WCAG 2.5.8 (AA) dokunma hedefi 24x24 ister. 375px'te dort baglanti
   16-21px yuksekliginde kaliyordu: .tumu, .yb-tumu, .bas-arac .hava,
   .burc-kaynak a. (Referansta ayni sorun 6 ogede var, yani bu bizim
   nakil hatamiz degil; yine de duzeltiliyor.)

   Dolgu eklemek blok basligini buyutup referanstan ayirirdi. Onun yerine
   gorunmez bir ardil ile tiklama alani 24px'e cikariliyor: yerlesim ve
   gorunum degismiyor, yalnizca hedef buyuyor. */
.tumu, .yb-tumu, .bas-arac .hava, .burc-kaynak a{ position:relative; }
.tumu::after, .yb-tumu::after, .bas-arac .hava::after, .burc-kaynak a::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:24px; min-width:24px;
}

/* ===========================================================================
   ARAMA KATMANI (17.10.2026)

   Yayin sonrasi testte bulundu: basliktaki buyutec dugmesi (#aramaAc)
   gorunuyordu ama hicbir sey yapmiyordu. Tema nakli sirasinda dugmeyi ve
   hedef kutuyu yazmisim, baglayan kodu ve bicimi yazmamisim.

   Referanstaki davranis ve olculer birebir alindi:
     .arama-kat   fixed, inset 0, rgba(10,16,22,.6), z-index 200,
                  flex, ustten hizali, dolgu 112px 18px
     .arama-kutu  beyaz, 18px kose, 22px dolgu, en fazla 620px,
                  golge 0 20px 50px -20px rgba(17,24,32,.35)
     input        60px yuksek, 2px sicak cerceve, 12px kose, 16.8px yazi
   =========================================================================== */
.arama-kat{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-start; justify-content:center;
  padding:112px 18px;
  background:rgba(10,16,22,.6);
  opacity:0; transition:opacity 180ms ease;
}
.arama-kat[hidden]{ display:none; }
.arama-kat.acik{ opacity:1; }

.arama-kutu{
  width:100%; max-width:620px;
  background:var(--kagit);
  border-radius:18px;
  padding:22px;
  box-shadow:0 20px 50px -20px rgba(17,24,32,.35);
}
.arama-kutu form{ display:block; }
.arama-kutu input[type="search"]{
  width:100%; box-sizing:border-box;
  padding:15px 16px;
  font-family:var(--baslik);
  font-size:1.05rem;
  color:var(--murekkep);
  background:var(--kagit);
  border:2px solid var(--tel);
  border-radius:12px;
}
.arama-kutu input[type="search"]:focus{
  outline:none;
  border-color:var(--vurgu);
}

@media (max-width:640px){
  .arama-kat{ padding:72px 14px; }
}
@media (prefers-reduced-motion:reduce){
  .arama-kat{ transition:none; }
}