@charset "UTF-8";
/* ============================================================================
   HASANKEYF GAZETESİ — v5.0  "AKIŞ"
   Modern editoryal. v4'ün "keskin gazete" yorumu fazla harfi harfineydi ve
   eski duruyordu. Modern hissi öldüren şeyler ve karşılıkları:

     ESKİ (v4)                          →  YENİ (v5)
     her yerde 1px kılcal çizgi         →  boşluk ayırır; çizgi neredeyse yok
     13px metin, 15px başlık            →  17px metin, 20-56px başlık
     minik aralıklı BÜYÜK HARF bölüm    →  büyük, kalın, normal yazım bölüm adı
     keskin köşe (0px)                  →  14px kart / 999px çip
     dolgu yok, hep beyaz               →  tonlu yüzey blokları, dolu çipler
     görsel üstünde scrim + başlık      →  görsel üstte, başlık ALTINDA, büyük
     nav hamburgerde gizli              →  yatay kaydırmalı çip nav, her ekranda
     yan sütun kılcal tablo             →  yuvarlak tonlu modül blokları

   Değişmeyen: mobile-first, 320px tabanı, test belirteçleri, erişilebilirlik.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKEN */

:root {
  --zemin:       #ffffff;
  --yuzey:       #f1f5f6;   /* tonlu blok — kartlar, modüller */
  --yuzey-2:     #e4eaec;
  --zemin-ters:  #0d1417;

  --metin:       #0d1417;   /* 18.4:1 */
  --metin-2:     #5c6b70;   /* 5.7:1  */
  --metin-3:     #949a9e;   /* nötr gri — yeşil/mavi cast yok */
  --metin-ters:  #ffffff;

  --ayrac:       #e6ebec;

  /* Marka — canlı turkuaz. İki ton: metin için AA'lı, dolgu için parlak. */
  --marka:        #0b8f9c;   /* 4.6:1 — bağlantı/metin */
  --marka-koyu:   #06626c;
  --marka-parlak: #12bac8;   /* dolgu, grafik, vurgu şeridi */
  --marka-zemin:  #e4f6f8;

  --acil:        #e8342a;

  --yazi: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;

  --r:    14px;   /* kart, görsel */
  --r-sm: 10px;
  --r-pill: 999px;

  --b1:4px; --b2:8px; --b3:12px; --b4:16px; --b5:20px;
  --b6:24px; --b7:32px; --b8:40px; --b9:48px; --b10:64px; --b11:80px;

  --kap-bosluk: 16px;
  --kap-en: 1400px;
  --yapiskan-ust: 0px;

  --golge:    0 1px 2px rgba(13,20,23,.05);
  --golge-lg: 0 4px 12px rgba(13,20,23,.07), 0 14px 34px rgba(13,20,23,.07);

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

@media (max-width: 359px) { :root { --kap-bosluk: 14px; } }
@media (min-width: 768px)  { :root { --yapiskan-ust: 56px; } }
@media (min-width: 1024px) { :root { --kap-bosluk: 28px; } }

/* ------------------------------------------------------------- 2. SIFIRLA */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--yapiskan-ust) + 12px); }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi);
  font-size: 1.0625rem;      /* 17px — v4'te 16 idi */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure { margin: 0; }
table { border-collapse: collapse; }
:lang(tr) { hyphens: none; }
:focus-visible { outline: 3px solid var(--metin); outline-offset: 3px; border-radius: 4px; }

.gizli { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.atla {
  position:absolute; left:var(--b4); top:-72px; z-index:100;
  background:var(--metin); color:#fff; padding:var(--b3) var(--b5);
  border-radius:var(--r-sm); font-weight:600; transition:top var(--gecis);
}
.atla:focus { top:var(--b3); }

.kap { width:100%; max-width:var(--kap-en); margin-inline:auto; padding-inline:var(--kap-bosluk); }

/* --------------------------------------------------------- 3. TİP ÖLÇEĞİ */
/* v4'ten belirgin biçimde BÜYÜK. Modern hissin en büyük tek kaynağı bu. */

.ana, .yan { container-type: inline-size; }

.d-hero {
  font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 2.3cqi, 2.875rem);  /* 28 → 46px */
  line-height: 1.08;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.d-sayfa {
  font-weight: 800;
  font-size: clamp(1.625rem, 1.25rem + 2.1cqi, 2.75rem);
  line-height: 1.12; letter-spacing: -.03em; text-wrap: balance;
}
/* Bölüm başlığı: BÜYÜK, KALIN, NORMAL YAZIM.
   Minik aralıklı büyük harf (v4) modern hissi öldüren şeydi. */
.d-bolum {
  font-weight: 800;
  font-size: clamp(1.375rem, 1.2rem + .8cqi, 1.875rem);  /* 22 → 30px */
  line-height: 1.15; letter-spacing: -.028em;
}
.d-kart {
  font-weight: 700;
  font-size: clamp(1.125rem, 1.02rem + .78cqi, 1.5rem);  /* 18 → 24px */
  line-height: 1.22; letter-spacing: -.022em; text-wrap: balance;
}
.d-liste {
  font-weight: 650;
  font-size: clamp(1.0625rem, 1rem + .3cqi, 1.1875rem);
  line-height: 1.3; letter-spacing: -.016em; text-wrap: balance;
}
.d-ozet { font-size: 1rem; line-height: 1.55; color: var(--metin-2); text-wrap: pretty; }
.d-meta { font-size: .8125rem; font-weight: 500; color: var(--metin-3); letter-spacing: 0; }

@supports not (container-type: inline-size) {
  .d-hero { font-size: clamp(1.9rem, 6.4vw, 3.4rem); }
  .d-kart { font-size: clamp(1.125rem, 2.1vw, 1.5rem); }
}

/* Rakam dili — tabular, marka renginde */
.rakam { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--marka); }

/* ------------------------------------------------------------ 4. ÇİP */
/* Kategori etiketi artık aralıklı büyük harf değil — dolgulu, yuvarlak çip. */

.cip {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--yuzey);
  color: var(--metin-2);
  font-size: .75rem; font-weight: 700; letter-spacing: -.005em;
  line-height: 1.3;
  white-space: nowrap;
}
.cip-ters { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(6px); }
.cip-dolu { background: var(--marka); color: #fff; }

/* --------------------------------------------------------- 5. MASTHEAD */

.masthead { background: var(--zemin); position: relative; }
.masthead .kap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--b4); padding-block: var(--b4) var(--b3);
}

.marka { display: inline-flex; align-items: baseline; gap: .34em; min-height: 44px; }
.marka .marka-ad {
  font-weight: 800;
  font-size: clamp(1.5rem, 6.2vw, 2.125rem);
  letter-spacing: -.042em;
  line-height: 1;
  color: var(--metin);
}
.marka .ince {
  font-weight: 600;
  font-size: clamp(.72rem, 2.5vw, .9375rem);
  letter-spacing: -.01em;
  color: var(--marka);
  line-height: 1;
}
.marka:hover .marka-ad { color: var(--metin-2); }

/* Masthead wordmark — amblemli, iki satırlı (footer sade kalır) */
.masthead .marka { align-items: center; gap: .55em; }
.masthead .marka-amblem { width: clamp(29px, 7.5vw, 39px); height: auto; flex-shrink: 0; color: var(--marka); transition: color var(--gecis); }
.masthead .marka-yazi { display: inline-flex; flex-direction: column; gap: .1em; }
.masthead .marka-ad { font-size: clamp(1.4rem, 5.6vw, 1.95rem); letter-spacing: -.046em; line-height: .88; }
.masthead .marka-alt {
  font-weight: 700; font-size: clamp(.55rem, 1.7vw, .7rem);
  letter-spacing: .3em; color: var(--marka); line-height: 1;
  padding-inline-start: .14em;
}
.masthead .marka:hover .marka-ad,
.masthead .marka:hover .marka-amblem { color: var(--marka-koyu); }

.masthead-sag { display: flex; align-items: center; gap: var(--b2); flex-shrink: 0; }

.mh-tarih {
  display: none;
  font-size: .875rem; color: var(--metin-2); font-weight: 500;
}
/* Tarih/hava yalnız inline arama + E-Gazete + hamburger'a yer kaldığında (≥1040) */
@media (min-width: 1040px) { .mh-tarih { display: flex; align-items: center; gap: var(--b3); margin-inline-end: var(--b4); } }
.mh-tarih .derece { display:inline-flex; align-items:center; gap:5px; color: var(--metin); font-weight: 700; }

.ikon-dugme {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  color: var(--metin); background: var(--yuzey);
  transition: background var(--gecis), color var(--gecis);
  flex-shrink: 0;
}
.ikon-dugme:hover { background: var(--metin); color: #fff; }
.ikon-dugme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Inline arama (Batman tarzı: masthead'de yerinde açılır, ayrı sayfaya atmaz) */
.mh-ara {
  display: flex; align-items: center; gap: 2px;
  height: 42px; padding-inline: 14px 3px;
  background: var(--yuzey); border: 1px solid var(--ayrac);
  border-radius: var(--r-pill);
  transition: border-color var(--gecis), background var(--gecis);
}
.mh-ara:focus-within { border-color: var(--marka); background: var(--zemin); }
.mh-ara input[type="search"] {
  border: 0; background: transparent; outline: 0;
  width: 210px; max-width: 38vw; height: 100%;
  font: inherit; font-size: .9rem; color: var(--metin);
  -webkit-appearance: none; appearance: none;
}
.mh-ara input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.mh-ara input::placeholder { color: var(--metin-3); }
.mh-ara button {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--metin); color: #fff; transition: background var(--gecis);
}
.mh-ara button:hover { background: var(--marka); }
.mh-ara button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.mh-ara-ac { display: none; }   /* mobil aç ikonu — masaüstünde gizli */

@media (max-width: 739px) {
  .mh-ara { display: none; }
  .mh-ara-ac { display: inline-grid; }
  .masthead.ara-acik .mh-ara {
    display: flex; position: absolute; inset-inline: 0; top: 100%; z-index: 40;
    height: 54px; margin: 0; border-radius: 0;
    border-inline: 0; border-block: 1px solid var(--ayrac);
    padding-inline: clamp(16px, 5vw, 24px);
  }
  .masthead.ara-acik .mh-ara input[type="search"] { width: auto; max-width: none; flex: 1; }
  .masthead.ara-acik .mh-ara-ac { background: var(--metin); color: #fff; }
}

.eg-dugme {
  display: none; align-items: center; gap: var(--b2);
  min-height: 44px; padding-inline: var(--b5);
  border-radius: var(--r-pill);
  background: var(--metin); color: #fff;
  font-size: .875rem; font-weight: 700; letter-spacing: -.01em;
  transition: background var(--gecis);
}
.eg-dugme:hover { background: var(--metin-2); }
.eg-dugme svg { width: 17px; height: 17px; fill: currentColor; }
@media (min-width: 620px) { .eg-dugme { display: inline-flex; } }

.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--yuzey); flex-shrink: 0;
}
.hamburger span { display:block; height:2px; width:100%; background:var(--metin); border-radius:2px; transition:transform var(--gecis), opacity var(--gecis); }
.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); }
@media (min-width: 1024px) { .hamburger { display: none; } }

/* --------------------------------------------------------------- 6. NAV */
/* Yatay kaydırmalı ÇİP nav — HER ekranda görünür.
   v4'te mobilde tamamen hamburgere gömülüydü; modern haber arayüzleri
   kategoriyi doğrudan gösterir. */

.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(12px); border-block-end: 1px solid var(--ayrac); }
.nav .kap { display: flex; align-items: center; gap: var(--b3); }

.nav-liste {
  display: flex; align-items: center; gap: var(--b2);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-block: var(--b3);
  min-width: 0; flex: 1 1 auto;
}
.nav-liste::-webkit-scrollbar { display: none; }
.nav-liste > li { flex: 0 0 auto; }
.nav-liste a, .nav-diger-ac {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--b4);
  border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 650; letter-spacing: -.014em;
  color: var(--metin-2); white-space: nowrap;
  transition: background var(--gecis), color var(--gecis);
}
.nav-liste a:hover, .nav-diger-ac:hover { background: var(--yuzey); color: var(--metin); }
.nav-liste .aktif > a { background: var(--metin); color: #fff; }

.nav-diger { position: relative; flex: 0 0 auto; }
.nav-alt {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 200px; background: var(--zemin);
  border-radius: var(--r); box-shadow: var(--golge-lg);
  padding: var(--b2); display: none;
}
.nav-diger.acik .nav-alt { display: block; }
.nav-alt a { min-height: 44px; width: 100%; border-radius: var(--r-sm); }

.nav-radyo {
  display: none; align-items: center; gap: var(--b2);
  min-height: 44px; padding-inline: var(--b4); border-radius: var(--r-pill);
  background: var(--acil); color: #fff;
  font-size: .8125rem; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; flex-shrink: 0;
}
.nav-radyo .nokta { width:7px; height:7px; border-radius:50%; background:#fff; animation:nabiz 2s ease-in-out infinite; }
@keyframes nabiz { 0%,100%{opacity:1} 50%{opacity:.3} }
@media (min-width: 1100px) { .nav-radyo { display: inline-flex; } }

/* ------------------------------------------------------------- 7. FLAŞ */

.flas { margin-block: var(--b5) 0; }
/* Zaten sayfa .kap'ının içinde durur; ikinci kez daraltmasın. */
.flas .kap { display: flex; align-items: center; gap: var(--b3);
  max-width: none;
  background: var(--metin); color: #fff; border-radius: var(--r);
  padding: var(--b2) var(--b2) var(--b2) var(--b4); min-height: 60px; }
.flas-etiket {
  display: inline-flex; align-items: center; gap: var(--b2);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--acil);
  font-size: .75rem; font-weight: 800; letter-spacing: -.005em;
  white-space: nowrap; flex-shrink: 0;
}
.flas-etiket .nokta { width:6px; height:6px; border-radius:50%; background:#fff; animation:nabiz 1.6s ease-in-out infinite; }

.flas-metin { position: relative; flex: 1 1 auto; min-width: 0; align-self: stretch; }
.flas-metin a {
  position: absolute; inset: 0; display: flex; align-items: center;
  font-size: 1rem; font-weight: 650; letter-spacing: -.016em; line-height: 1.25;
  color: #fff; opacity: 0; transform: translateY(70%);
  transition: transform 420ms cubic-bezier(.22,.9,.3,1), opacity 240ms linear;
  overflow: hidden;
}
.flas-metin a.acik { opacity: 1; transform: translateY(0); }
.flas-metin a.cikan { opacity: 0; transform: translateY(-70%); }
.flas-metin a span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.flas-oklar { display: flex; gap: var(--b1); flex-shrink: 0; }
.flas-ok {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: rgba(255,255,255,.12); color: #fff;
  transition: background var(--gecis);
}
.flas-ok:hover { background: rgba(255,255,255,.26); }
.flas-ok svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.4; }
@media (max-width: 479px) { #flasOnceki { display: none; } .flas .kap { padding-inline: var(--b3) var(--b2); } }

/* -------------------------------------------------- 8. MANŞET (ymn) */
/* Test belirteçleri: .ymn / .ymn-sahne / data-ymn — DEĞİŞTİRİLMEZ.
   Kurgu değişti: görsel üstte, başlık ALTINDA (scrim overlay eskimişti). */

.ymn { margin-block-start: var(--b5); }

.ymn-sahne { position: relative; display: block; }

/* Banner TEK PARÇA: başlık görselin üzerinde, rakamlar görselin hemen altında.
   Önceki kurgu görsel → 46px başlık → özet → meta → rakamlar şeklindeydi;
   rakamlar görselden ~400px aşağı düşüyor ve aralar boş kalıyordu. */
.ymn-gorsel {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--r); background: var(--yuzey-2);
}
@media (min-width: 560px) { .ymn-gorsel { aspect-ratio: 16/10; } }
.ymn-gorsel img { width:100%; height:100%; object-fit:cover; object-position:center 36%; }
.ymn-gorsel::after {
  content:''; position:absolute; inset-inline:0; bottom:0; height:78%;
  background:linear-gradient(180deg, rgba(10,14,17,0) 0%, rgba(10,14,17,.30) 38%, rgba(10,14,17,.88) 100%);
}
.ymn-gorsel .cip { position: absolute; left: var(--b4); top: var(--b4); z-index:2; }

.ymn-yazi {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: var(--b5) var(--b4) var(--b4);
  color: #fff;
}
.ymn-bas { color:#fff; margin-block-end: var(--b2); }
.ymn-ozet {
  display:none; max-width:60ch; margin-block-end: var(--b2);
  color: rgba(255,255,255,.86);
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (min-width:768px) { .ymn-ozet { display:-webkit-box; } }
.ymn-im { display:flex; align-items:center; gap:var(--b2); color:rgba(255,255,255,.74); }

/* Numaralar — çip biçimli, tek satır kaydırmalı */
.ymn-sarmal { position: relative; margin-block-start: var(--b2); }
  /* Banner'a yapışık dursun */
.ymn-rakamlar {
  display: flex; gap: var(--b2);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-block: var(--b1);
}
.ymn-rakamlar::-webkit-scrollbar { display: none; }
.ymn-no {
  flex: 0 0 auto; min-inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--yuzey);
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9375rem;
  color: var(--metin-2); scroll-snap-align: start;
  transition: background var(--gecis), color var(--gecis);
}
.ymn-no:hover { background: var(--yuzey-2); color: var(--metin); }
.ymn-no.secili { background: var(--metin); color: #fff; }
.ymn-tumu {
  flex: 0 0 auto; min-inline-size: 72px; block-size: 44px;
  display: inline-grid; place-items: center; padding-inline: var(--b4);
  border-radius: var(--r-pill); background: var(--metin); color: #fff;
  font-size: .8125rem; font-weight: 700; letter-spacing: -.01em;
  scroll-snap-align: start;
}
.ymn-tumu:hover { background: var(--metin-2); }

.ymn-perde { position:absolute; top:0; bottom:0; width:32px; pointer-events:none; z-index:2; transition:opacity var(--gecis); }
.ymn-perde.sol { left:0; background:linear-gradient(90deg, var(--zemin) 0, transparent 100%); }
.ymn-perde.sag { right:0; background:linear-gradient(270deg, var(--zemin) 0, transparent 100%); }
.ymn-perde[data-gizli="1"] { opacity: 0; }

@media (min-width: 768px) { .ymn-gorsel { aspect-ratio: 2/1; } }
@media (min-width: 1024px) {
  .ymn { display: grid; grid-template-columns: minmax(0,1fr) 320px; column-gap: var(--b6); row-gap: 0; align-items: start; }
  /* DOM sırası mobil için: görsel → rakamlar → liste.
     Masaüstünde açık yerleşimle sol sütun = görsel + rakamlar,
     sağ sütun = liste (iki satırı da kaplar). */
  /* Görsel + rakamlar TEK ızgara öğesi (.ymn-sol). Ayrı satırlar olduğunda
     .ymn-yan iki satırı kaplayıp fazla yüksekliği satırlara dağıtıyor ve
     rakamları görselden 75px koparıyordu. Tek kapta bu mümkün değil. */
  .ymn { grid-template-rows: auto; }
  .ymn-sol { grid-column: 1; grid-row: 1; }
  .ymn-yan { grid-column: 2; grid-row: 1; align-self: start; }
  /* Kahraman gorsel alcaltildi: 16/10'da 944px genislikte 590px yukseklik
     tek habere gidiyordu ve yanindaki liste bosluk birakiyordu. */
  .ymn-gorsel { aspect-ratio: 16/9; }
}
@media (min-width: 1280px) { .ymn { grid-template-columns: minmax(0,1fr) 380px; } .ymn-gorsel { aspect-ratio: 2/1; } }

/* Manşet listesi — çizgi yok, boşluk ayırır.
   MOBİLDE DE GÖRÜNÜR: eskiden <1024'te gizliydi ve mobilde manşet bloğundan
   tek habere ulaşılıyordu (masaüstünde 8'e). Yoğunluk kaybının ana sebebi buydu.
   Mobilde "Günün Manşetleri" listesi gibi davranır. */
.ymn-yan { display: grid; gap: 2px; margin-block-start: var(--b4); }
@media (min-width: 1024px) { .ymn-yan { margin-block-start: 0; } }
.ymn-yan a {
  display: grid; grid-template-columns: 26px minmax(0,1fr); gap: var(--b2);
  align-items: start; padding: var(--b2) var(--b2) var(--b2) 0; border-radius: var(--r-sm);
  transition: background var(--gecis);
}
.ymn-yan a:hover { background: var(--yuzey); }
.ymn-yan .no { font-variant-numeric:tabular-nums; font-weight:800; font-size:1.0625rem; color:var(--metin-3); line-height:1.35; }
.ymn-yan h3 { font-size:1rem; font-weight:650; line-height:1.26; letter-spacing:-.018em; text-wrap:balance; }
.ymn-yan .im { display:block; margin-block-start: 6px; }

/* --------------------------------------------------- 9. GÖVDE IZGARASI */

.govde { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--b7); align-items: start; }
@media (min-width: 1024px) { .govde { grid-template-columns: minmax(0,1fr) 320px; gap: var(--b8); } }
@media (min-width: 1280px) { .govde { grid-template-columns: minmax(0,1fr) 340px; gap: var(--b8); } }

/* ---------------------------------------------- 10. BÖLÜM BAŞLIĞI */
/* Çizgi yok. Büyük kalın başlık + yuvarlak "Tümü" düğmesi. */

.bolum { margin-block: var(--b8); }
.bolum:first-of-type { margin-block-start: var(--b7); }
.bolum-bas { display:flex; align-items:center; justify-content:space-between; gap:var(--b4); margin-block-end:var(--b5); }
.bolum-bas .tumu {
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding-inline:var(--b4); border-radius:var(--r-pill);
  background:var(--yuzey); color:var(--metin);
  font-size:.875rem; font-weight:650; letter-spacing:-.012em; white-space:nowrap;
  transition:background var(--gecis), color var(--gecis);
}
.bolum-bas .tumu:hover { background: var(--metin); color: #fff; }
.bolum-bas .tumu svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; }

/* --------------------------------------------------------- 11. KARTLAR */
/* Çerçeve yok, gölge yok. Yuvarlak görsel + büyük başlık + boşluk. */

/* 248px eşiği ölçümle seçildi: 1440'ta ana kolon 820px → 3 sütun,
   1024'te 593px → 2 sütun, 768'de 721px → 2 sütun. 272px'te 1440 bile
   2 sütunda kalıyordu. */
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(224px,100%),1fr)); gap: var(--b7) var(--b5); }
.kart { min-width: 0; }
.kart-gorsel { position:relative; aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden; background: var(--yuzey-2); margin-block-end: var(--b3); }
.kart-gorsel img { width:100%; height:100%; object-fit:cover; object-position:center 36%; transition:transform 500ms cubic-bezier(.2,.7,.3,1); }
.kart:hover .kart-gorsel img { transform: scale(1.04); }
.kart .cip { position:absolute; left:var(--b3); top:var(--b3); z-index:2;
  background:rgba(13,20,23,.72); color:#fff; backdrop-filter:blur(6px); }
.kart a:hover h3 { color: var(--metin-2); }
.kart-ozet { margin-block-start: var(--b2); font-size:.9375rem; line-height:1.5; color:var(--metin-2); text-wrap:pretty; }
.kart .im { margin-block-start: var(--b3); }

/* ------------------------------------------- 12. SON HABERLER */
/* Kılcal çizgi yok — tıklanınca vurgulanan yuvarlak satırlar. */

.saatli { display: grid; gap: var(--b1); }
.saatli a {
  display: grid; grid-template-columns: 58px minmax(0,1fr); gap: var(--b4);
  align-items: baseline; padding: var(--b4); border-radius: var(--r-sm);
  min-height: 44px; transition: background var(--gecis);
}
.saatli a:hover { background: var(--yuzey); }
.saatli .saat { font-variant-numeric:tabular-nums; font-weight:700; font-size:.875rem; color:var(--metin-3); }
.saatli a:hover h3 { color: var(--metin-2); }
.saatli .kat { display:block; margin-block-start:5px; }

/* ------------------------------------- 13. ÇOK OKUNANLAR (ozet-kusak) */
/* Mevcut özellik. Tonlu blok + büyük numara. */

.ozet-kusak { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:var(--b3); }
.ozet-oge {
  display:flex; gap:var(--b4); align-items:flex-start; min-width:0;
  background:var(--yuzey); border-radius:var(--r); padding:var(--b5);
  transition:background var(--gecis);
}
.ozet-oge:hover { background: var(--yuzey-2); }
.ozet-no { flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:800; font-size:2rem; line-height:.9; color:var(--metin-3); letter-spacing:-.05em; }
.ozet-oge > a { display:block; min-height:44px; min-width:0; }
.ozet-oge h4 { font-size:1.0625rem; font-weight:650; line-height:1.28; letter-spacing:-.018em; }
.ozet-oge .kat { display:block; margin-block-start:6px; }

/* ------------------------------------------------------- 14. YAN SÜTUN */
/* Kılcal tablo değil — yuvarlak tonlu bloklar. */

.yan { min-width: 0; display: grid; gap: var(--b4); }
/* Yan sütun sticky DEĞİL — istek üzerine tüm sayfalarda içerikle birlikte akar */

.modul { background: var(--yuzey); border-radius: var(--r); padding: var(--b4); }
.modul-bas { display:flex; align-items:baseline; justify-content:space-between; gap:var(--b3); margin-block-end:var(--b4); }
.modul-bas h2 { font-size:1.0625rem; font-weight:750; letter-spacing:-.022em; }
.modul-bas .kucuk { font-size:.75rem; color:var(--metin-3); font-weight:500; white-space:nowrap; }
/* Modül başlığındaki "Tümü" bir bağlantıysa 44px dokunma hedefi alır */
.modul-bas a.kucuk { display:inline-flex; align-items:center; min-height:44px; padding-inline:var(--b2);
  margin-block:-12px; color:var(--metin-2); font-weight:650; }
.modul-bas a.kucuk:hover { color:var(--metin); }

/* Hava */
.hava-simdi { display:flex; align-items:center; gap:var(--b4); }
.hava-derece { font-variant-numeric:tabular-nums; font-weight:800; font-size:3.25rem; line-height:.9; letter-spacing:-.05em; color:var(--metin); }
.hava-derece sup { font-size:.34em; vertical-align:super; font-weight:700; color:var(--metin-3); letter-spacing:0; }
.hava-ack { font-size:1rem; font-weight:650; letter-spacing:-.014em; }
.hava-hiss { font-size:.8125rem; color:var(--metin-2); margin-block-start:2px; }
.hava-gunler { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--b2); margin-block-start:var(--b5); text-align:center; }
.hava-gunler > div { background:var(--zemin); border-radius:var(--r-sm); padding:var(--b3) var(--b1); }
.hava-gunler b { display:block; font-size:.6875rem; font-weight:700; color:var(--metin-2); margin-block-end:5px; }
.hava-gunler .dd { font-variant-numeric:tabular-nums; font-size:.875rem; font-weight:750; color:var(--metin); }
.hava-gunler .dd i { font-style:normal; color:var(--metin-3); font-weight:500; }

/* Namaz */
.namaz { display:grid; gap:2px; }
.namaz li { display:flex; align-items:center; justify-content:space-between; gap:var(--b3); min-height:42px; padding-inline:var(--b3); border-radius:var(--r-sm); font-size:.9375rem; }
.namaz li.simdi { background:var(--zemin); box-shadow:inset 3px 0 0 var(--metin); font-weight:700; }
.namaz .saat { font-variant-numeric:tabular-nums; font-weight:700; }
.namaz li.simdi .saat { color:var(--metin); }
.namaz-kalan { margin-block-start:var(--b3); font-size:.8125rem; color:var(--metin-2); }

/* Puan durumu */
/* Tablo kabı her genişlikte kendi içinde yatay kayar; sayfa gövdesi taşmaz.
   Kompakt yan sütun tablosu zaten sığar (G/B/M dar ekranda gizli), kaydırma
   çıkmaz; tam cetvel sayfasında ise mobilde tablo bu kabın içinde kayar. */
.tablo-sarmal { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.puan { width:100%; font-size:.875rem; }
.puan th, .puan td { padding:var(--b2) var(--b1); text-align:center; }
.puan thead th { font-size:.6875rem; font-weight:700; color:var(--metin-3); padding-block-end:var(--b2); }
.puan tbody tr { background:var(--zemin); }
.puan tbody tr td:first-child { border-start-start-radius:var(--r-sm); border-end-start-radius:var(--r-sm); }
.puan tbody tr td:last-child  { border-start-end-radius:var(--r-sm);  border-end-end-radius:var(--r-sm); }
.puan tbody tr + tr { border-block-start: 4px solid var(--yuzey); }
.puan .s { width:24px; }
.puan td.s { font-variant-numeric:tabular-nums; font-weight:700; color:var(--metin-3); }
.puan .t { text-align:left; }
.puan td.t { font-weight:650; letter-spacing:-.014em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:0; }
.puan td { font-variant-numeric:tabular-nums; }
.puan td.p { font-weight:800; }
.puan tr.bizim { background:var(--yuzey-2); box-shadow:inset 3px 0 0 var(--metin); }
.puan tr.bizim td { color:var(--metin); }
.puan tr.bizim td.s { color:var(--metin); }
.puan tr.kopuk { position: relative; }
/* Dar ekranda G/B/M GÖRSEL olarak gizlenir ama DOM'da kalır (WCAG 1.3.2) */
.puan .ops { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (min-width:480px) { .puan .op-g { position:static; width:auto; height:auto; overflow:visible; clip-path:none; } }
@media (min-width:768px) { .puan .ops  { position:static; width:auto; height:auto; overflow:visible; clip-path:none; } }
.puan-not { margin-block-start:var(--b3); font-size:.75rem; line-height:1.45; color:var(--metin-3); }

/* Döviz */
.doviz { display:grid; gap:2px; }
.doviz li { display:grid; grid-template-columns:minmax(0,1fr) auto 20px; align-items:center; gap:var(--b2);
  min-height:42px; padding-inline:var(--b3); border-radius:var(--r-sm); background:var(--zemin); font-size:.9375rem; }
.doviz .ad { font-weight:600; letter-spacing:-.012em; }
.doviz .deger { font-variant-numeric:tabular-nums; font-weight:750; }
.doviz .yon { text-align:center; font-size:.6875rem; }
.doviz .yon.artis { color:var(--metin); font-weight:800; }
.doviz .yon.dusus { color:var(--metin-2); font-weight:800; }
.doviz .yon.sabit { color:var(--metin-3); }
.veri-yas { margin-block-start:var(--b3); font-size:.75rem; color:var(--metin-3); }

/* ---------------------------------------------------------- 15. FOOTER */

.footer { margin-block-start: var(--b9); background: var(--zemin-ters); color: rgba(255,255,255,.72); }
.footer .kap { padding-block: var(--b10) var(--b7); }
.footer-ust { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--b8); padding-block-end:var(--b8); }
@media (min-width:600px)  { .footer-ust { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) { .footer-ust { grid-template-columns:1.7fr repeat(3,minmax(0,1fr)); gap:var(--b9); } }
.footer h3 { color:#fff; font-size:.9375rem; font-weight:750; letter-spacing:-.018em; margin-block-end:var(--b4); }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color:#fff; }
.footer li a { display:flex; align-items:center; width:100%; min-height:44px; font-size:.9375rem; }
.footer .marka .marka-ad { color:#fff; font-size:1.75rem; }
.footer .marka .ince { color: rgba(255,255,255,.55); }
.footer-slogan { margin-block-start:var(--b4); font-size:.9375rem; line-height:1.6; max-width:40ch; color:rgba(255,255,255,.6); }
.footer-sosyal { display:flex; gap:var(--b2); margin-block-start:var(--b5); }
.footer-sosyal a { display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-pill); background:rgba(255,255,255,.09); transition:background var(--gecis); }
.footer-sosyal a:hover { background:rgba(255,255,255,.2); }
.footer-sosyal svg { width:17px; height:17px; fill:currentColor; }
.footer-alt { padding-block-start:var(--b6); border-block-start:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:var(--b3) var(--b6); justify-content:space-between; font-size:.8125rem; color:rgba(255,255,255,.5); }
.footer-altlnk { display:flex; flex-wrap:wrap; gap:var(--b2) var(--b4); }
.footer-altlnk a { color:rgba(255,255,255,.6); }
.footer-altlnk a:hover { color:#fff; }
.footer-kredi { padding-block:var(--b4) var(--b2); font-size:.8125rem; color:rgba(255,255,255,.5); }
.footer-kredi a { color:rgba(255,255,255,.82); font-weight:700; }
.footer-kredi a:hover { color:#fff; text-decoration:underline; }

/* ------------------------------------------------------ 16. YUKARI ÇIK */

.yukari {
  position:fixed; right:var(--b5); bottom:var(--b5); z-index:45;
  width:48px; height:48px; display:grid; place-items:center;
  border-radius:var(--r-pill); background:var(--metin); color:#fff;
  box-shadow:var(--golge-lg);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--gecis), visibility var(--gecis), transform var(--gecis), background var(--gecis);
}
.yukari.gorunur { opacity:1; visibility:visible; transform:translateY(0); }
.yukari:hover { background:var(--metin-2); }
.yukari svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; }

/* --------------------------------------------------- 17. REKLAM YUVASI */
/* Yuva panelden yönetilir; reklam() boşsa PHP hiç yuva basmaz (boş kutu yok).
   Banner kırpılmaz (object-fit:contain / doğal oran): reklam ölçüleri değişken,
   zorla oran dayatmak tasarımı bozar. Üstte küçük "Reklam" etiketi (şeffaflık). */

.reklam-yuva { margin-block: var(--b7); }
.reklam-yuva::before {
  content: "Reklam"; display: block; margin-block-end: 6px;
  font-size: .625rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--metin-3); text-align: center;
}
.reklam-yuva.yan { margin-block: 0 var(--b6); }
.reklam-yuva.yan::before { text-align: start; }

.kusak {
  display: grid; place-items: center;
  background: var(--yuzey); border-radius: var(--r); overflow: hidden;
}
.kusak img { display: block; width: 100%; height: auto; }
/* Gömme kod (AdSense/iframe) taşmasın */
.kusak :is(iframe, ins, img, embed) { max-width: 100%; }
.kusak iframe { border: 0; }

/* Yan sütun reklamı en fazla 300px; üstteki modüllerle aynı hizada */
.reklam-yuva.yan .kusak { max-width: 300px; margin-inline: auto; }

/* Yan banner (300x600) — istek üzerine yapışkan değil, içerikle akar */

/* Mobil yapışkan alt bant — ekranın dibine sabitlenir, kapatılabilir */
.reklam-yapiskan {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: var(--b2); padding-block-end: max(var(--b2), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--zemin) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 -1px 0 var(--ayrac), 0 -8px 20px rgba(13,20,23,.06);
}
@media (min-width: 1024px) { .reklam-yapiskan { display: none; } }  /* yalnız mobil/tablet */
.reklam-yapiskan .kusak { background: none; }
.reklam-yapiskan .kusak img { width: auto; max-height: 60px; }
.ry-kapat {
  position: absolute; inset-block-start: -30px; inset-inline-end: var(--b3);
  width: 28px; height: 28px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--metin); color: #fff; font-size: 1.125rem; line-height: 1;
}

/* --------------------------------------------------- 18. HAREKET AZALT */

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

/* ==========================================================================
   19. YOĞUNLUK BLOKLARI — canlı ana sayfada olup önizlemede eksik olanlar
   Canlı sitede 13 blok var (Günün Manşetleri · E-Gazete · Köşe Yazıları ·
   Öne Çıkanlar · Foto Galeri · Video Galeri · Son Dakika · 4 kategori bloğu
   · Hava · Namaz). Alan kullanımı şikâyetinin yarısı bu blokların eksikliğiydi.
   ========================================================================== */

/* --- Kategori bloğu: 1 büyük + N kompakt satır --- */
.kat-blok { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--b5); }
@media (min-width: 620px)  { .kat-blok { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--b6); } }

.kat-lider .kart-gorsel { aspect-ratio: 16/9; margin-block-end: var(--b3); }
.kat-lider h3 { font-size: clamp(1.125rem,1.02rem + .7cqi,1.375rem); font-weight: 750; line-height: 1.22; letter-spacing: -.022em; text-wrap: balance; }
.kat-lider:hover h3 { color: var(--metin-2); }

/* Kompakt satır: küçük kare görsel + başlık. Dikeyde çok verimli. */
.mini { display: grid; gap: var(--b1); align-content: start; }
.mini a { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: var(--b3); align-items: center;
  padding: var(--b2); border-radius: var(--r-sm); min-height: 44px; transition: background var(--gecis); }
.mini a:hover { background: var(--yuzey); }
.mini .g { display: block; aspect-ratio: 4/3; border-radius: var(--r-sm); overflow: hidden; background: var(--yuzey-2); }
.mini .g img { width:100%; height:100%; object-fit:cover; object-position:center 36%; }
.mini h4 { font-size: .9375rem; font-weight: 650; line-height: 1.26; letter-spacing: -.016em; }
.mini a:hover h4 { color: var(--metin-2); }
.mini .im { margin-block-start: 3px; font-size: .75rem; color: var(--metin-3); }

/* --- Köşe yazıları: yazar foto + ad + yazı başlığı --- */
.yazarlar-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: var(--b4); }
.yazar-kart { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: var(--b4); align-items: start;
  background: var(--yuzey); border-radius: var(--r); padding: var(--b4); min-height: 44px; transition: background var(--gecis); }
.yazar-kart:hover { background: var(--yuzey-2); }
.yazar-kart .foto { display:block; width:64px; height:64px; border-radius:var(--r-pill); overflow:hidden; background:var(--yuzey-2); }
/* Vesikalık fotoğraflar gri; imleç üstündeyken renkleniyor — canlıdaki desen */
.yazar-kart .foto img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%); transition:filter var(--gecis); }
.yazar-kart:hover .foto img { filter:none; }
.yazar-kart .bilgi { display:grid; gap:2px; }
.yazar-kart .ad { font-size:1.0625rem; font-weight:750; letter-spacing:-.02em; line-height:1.2; }
.yazar-kart .unvan { font-size:.75rem; font-weight:650; color:var(--marka); }
.yazar-kart .son { margin-block-start:var(--b2); font-size:.875rem; font-weight:500; line-height:1.35;
  color:var(--metin-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yazar-kart .sayi { margin-block-start:var(--b2); font-size:.75rem; font-weight:600; color:var(--metin-3); }

/* --- Galeri / video mozaiği --- */
.mozaik { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px,100%),1fr)); gap: var(--b5) var(--b4); }
/* Orijinaldeki düzen: başlık görselin ÜZERİNE bindirilmez, ALTINDA durur.
   Modernleştirme yalnız yuvarlak köşe, temiz tipografi ve hover. */
.mozaik a { display: block; }
.mozaik .g { display: block; position: relative; aspect-ratio: 4/3; border-radius: var(--r-sm); overflow: hidden; background: var(--yuzey-2); }
.mozaik img { width:100%; height:100%; object-fit:cover; transition: transform 500ms cubic-bezier(.2,.7,.3,1); }
.mozaik a:hover img { transform: scale(1.05); }
.mozaik .kaplama { display:block; margin-block-start:var(--b2);
  font-size:.9375rem; font-weight:650; line-height:1.3; letter-spacing:-.016em; color:var(--metin); }
.mozaik a:hover .kaplama { color:var(--metin-2); }
.mozaik .im { display:block; margin-block-start:3px; }
.mozaik .oynat { position:absolute; inset:0; display:grid; place-items:center; }
.mozaik .oynat span { width:46px; height:46px; border-radius:var(--r-pill); background:rgba(255,255,255,.92);
  display:grid; place-items:center; box-shadow:var(--golge-lg); }
.mozaik .oynat svg { width:18px; height:18px; fill:var(--metin); margin-inline-start:3px; }

/* --- E-Gazete kiosku --- */
.kiosk { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px,100%),1fr)); gap: var(--b3); }
.kiosk a { display:block; border-radius:var(--r-sm); overflow:hidden; background:var(--yuzey-2); aspect-ratio:3/4;
  box-shadow:var(--golge); transition:transform var(--gecis), box-shadow var(--gecis); }
.kiosk a:hover { transform: translateY(-3px); box-shadow: var(--golge-lg); }
.kiosk img { width:100%; height:100%; object-fit:cover; }

/* --- İki bloğu yan yana koymak için (dar alanlarda alt alta) --- */
/* Foto ve video galeri ALT ALTA (ana sitedeki gibi) — yan yana dar kalıyordu. */
.ikili { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--b8); }


/* ==========================================================================
   20. SEKMELİ GALERİ / VİDEO
   Canlı sitedeki desen: üstte küçük resimli kategori sekmeleri şeridi,
   altında tek büyük önizleme. Modernleştirme yalnız yuvarlak köşe, temiz
   tipografi, kaydırılabilir şerit ve net seçili durum.
   ========================================================================== */

.sekmeli { display: grid; gap: var(--b4); }

.sekme-serit {
  display: flex; gap: var(--b2);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding-block-end: var(--b1);
}
.sekme-serit::-webkit-scrollbar { display: none; }

.sekme {
  flex: 0 0 auto; inline-size: 108px;
  display: grid; gap: 6px; padding: 6px; border-radius: var(--r-sm);
  background: transparent; scroll-snap-align: start;
  transition: background var(--gecis);
  text-align: left;
}
.sekme:hover { background: var(--yuzey); }
.sekme .t {
  display: block; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden;
  background: var(--yuzey-2); position: relative;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--gecis);
}
.sekme .t img { width:100%; height:100%; object-fit:cover; }
.sekme .e {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.75rem; font-weight:650; line-height:1.25; letter-spacing:-.012em;
  color: var(--metin-2);
}
.sekme[aria-selected="true"] { background: var(--yuzey); }
.sekme[aria-selected="true"] .t { box-shadow: inset 0 0 0 2px var(--metin); }
.sekme[aria-selected="true"] .e { color: var(--metin); }

.sekme-panel { position: relative; }
.onizleme { display: block; }
.onizleme .g {
  display:block; position: relative; aspect-ratio: 16/9;
  border-radius: var(--r); overflow: hidden; background: var(--yuzey-2);
}
.onizleme .g img { width:100%; height:100%; object-fit:cover; }
.onizleme .bilgi { display: block; margin-block-start: var(--b3); }
.onizleme .bilgi b {
  display:block; font-size:clamp(1.0625rem,1rem + .5cqi,1.25rem); font-weight:750;
  line-height:1.25; letter-spacing:-.02em;
}
.onizleme .bilgi span { display:block; margin-block-start:4px; font-size:.8125rem; color:var(--metin-3); }
.onizleme:hover .bilgi b { color: var(--metin-2); }

.onizleme .oynat { position:absolute; inset:0; display:grid; place-items:center; }
.onizleme .oynat span {
  width:64px; height:64px; border-radius:var(--r-pill); background:rgba(255,255,255,.94);
  display:grid; place-items:center; box-shadow:var(--golge-lg);
  transition: transform var(--gecis);
}
.onizleme:hover .oynat span { transform: scale(1.06); }
.onizleme .oynat svg { width:24px; height:24px; fill:var(--metin); margin-inline-start:4px; }

@media (min-width: 700px) { .sekme { inline-size: 128px; } }


/* ==========================================================================
   21. YAN SÜTUN EDİTORYAL BLOKLARI
   Canlı sitede sağ sütun (#sitesag, 300px) widget yığını değil: içinde
   `sagyazarlar` (61x61 foto + yazı başlığı + yazar adı) ve `sitesaghaber`
   (300x115 görselli haber) var. Yan sütun burada da içerik taşır.
   ========================================================================== */

/* Köşe yazarı satırı — canlıdaki #sagyazar/#sagmakalebaslik deseni */
.yan-yazar { display: grid; gap: 2px; }
.yan-yazar a {
  display: grid; grid-template-columns: 52px minmax(0,1fr); gap: var(--b3);
  align-items: center; padding: var(--b2); border-radius: var(--r-sm);
  min-height: 44px; transition: background var(--gecis);
}
.yan-yazar a:hover { background: var(--zemin); }
.yan-yazar .foto {
  display:block; width:52px; height:52px; border-radius:var(--r-pill);
  overflow:hidden; background:var(--yuzey-2);
}
.yan-yazar .foto img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%); transition:filter var(--gecis); }
.yan-yazar a:hover .foto img { filter:none; }
.yan-yazar h4 { font-size:.875rem; font-weight:650; line-height:1.28; letter-spacing:-.016em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yan-yazar .ad { display:block; margin-block-start:3px; font-size:.75rem; color:var(--metin-3); font-weight:600; }

/* Kompakt görselli haber satırı — canlıdaki #sitesaghaber deseni */
.yan-haber { display: grid; gap: var(--b2); }
.yan-haber a {
  display: grid; grid-template-columns: 92px minmax(0,1fr); gap: var(--b3);
  align-items: start; padding: var(--b2); border-radius: var(--r-sm);
  min-height: 44px; transition: background var(--gecis);
}
.yan-haber a:hover { background: var(--zemin); }
.yan-haber .g { display:block; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--yuzey-2); }
.yan-haber .g img { width:100%; height:100%; object-fit:cover; object-position:center 36%; }
.yan-haber h4 { font-size:.875rem; font-weight:650; line-height:1.3; letter-spacing:-.016em;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.yan-haber .im { display:block; margin-block-start:4px; font-size:.75rem; color:var(--metin-3); }

/* Yan sütundaki modüller içerik taşıyınca dolgu biraz azalsın */
.modul.genis { padding: var(--b3); }

/* ================================================ 22. HAMBURGER MENÜ PANELİ */
/* Sağdan kayan tam boy panel. v5 dili: yuvarlak çip kategoriler, tonlu
   yüzeyler, kılcal çizgi yok. Nav çubuğu her ekranda görünür olduğu için
   panel bir yedek değil, GENİŞLETİLMİŞ gezinti: arama + tüm kategoriler +
   bölümler + canlı radyo tek yerde. */

.menu-perde {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(13,20,23,.5);
  opacity: 0; transition: opacity var(--gecis);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.menu-perde.acik { opacity: 1; }

.menu-panel {
  position: fixed; z-index: 91; inset-block: 0; inset-inline-end: 0;
  width: min(400px, 92vw);
  background: var(--zemin);
  display: flex; flex-direction: column; gap: var(--b5);
  padding: var(--b5) var(--b5) var(--b8);
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: var(--golge-lg);
  transform: translateX(101%);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1);
}
.menu-panel.acik { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-perde { transition: none; }
}

.mp-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--b3); }
.mp-logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  display: inline-flex; align-items: center; min-height: 44px; }
.mp-logo .ince { color: var(--marka); margin-inline-start: .28em; font-weight: 700; }
.mp-kapat {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: var(--yuzey);
  font-size: 1.5rem; line-height: 1; color: var(--metin-2);
  transition: background var(--gecis), color var(--gecis);
}
.mp-kapat:hover { background: var(--metin); color: #fff; }

.mp-tarih { font-size: .8125rem; color: var(--metin-3); font-weight: 600; margin-block-start: calc(var(--b5) * -1 + var(--b2)); }

.mp-ara { display: flex; gap: var(--b2); }
.mp-ara input {
  flex: 1; min-width: 0; height: 48px;
  padding-inline: var(--b4); border: 0; border-radius: var(--r-sm);
  background: var(--yuzey); color: var(--metin);
  font: inherit; font-size: .9375rem;
}
.mp-ara input::placeholder { color: var(--metin-3); }
.mp-ara button {
  width: 48px; height: 48px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--metin); color: #fff;
  transition: background var(--gecis);
}
.mp-ara button:hover { background: var(--marka-koyu); }

.mp-baslik {
  font-size: .75rem; font-weight: 700; color: var(--metin-3);
  margin-block-end: calc(var(--b5) * -1 + var(--b3));
}

.mp-kat { display: flex; flex-wrap: wrap; gap: var(--b2); }
.mp-kat a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--b4); border-radius: var(--r-pill);
  background: var(--yuzey); color: var(--metin);
  font-size: .9375rem; font-weight: 650; letter-spacing: -.012em;
  transition: background var(--gecis), color var(--gecis);
}
.mp-kat a:hover { background: var(--metin); color: #fff; }

.mp-bolum { display: grid; }
.mp-bolum a {
  display: flex; align-items: center; min-height: 48px;
  font-size: 1rem; font-weight: 600; color: var(--metin-2);
  transition: color var(--gecis), padding-inline-start var(--gecis);
}
.mp-bolum a:hover { color: var(--metin); padding-inline-start: var(--b2); }

.mp-canli {
  display: flex; align-items: center; gap: var(--b2);
  min-height: 48px; padding-inline: var(--b4);
  border-radius: var(--r-sm); background: var(--zemin-ters); color: #fff;
  font-size: .9375rem; font-weight: 650;
}
.mp-canli b { margin-inline-start: auto; font-size: .6875rem; font-weight: 800;
  padding: 4px 9px; border-radius: var(--r-pill); background: var(--acil); }
.mp-canli .canli-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--acil);
  animation: nabiz 1.6s ease-in-out infinite; }

.mp-sosyal { display: flex; gap: var(--b2); margin-block-start: auto; padding-block-start: var(--b4); }
.mp-sosyal a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: var(--yuzey); color: var(--metin-2);
  transition: background var(--gecis), color var(--gecis);
}
.mp-sosyal a:hover { background: var(--metin); color: #fff; }
.mp-sosyal svg { width: 17px; height: 17px; fill: currentColor; }

/* "Öne çıkanlar" tek sütun değil, genişlik yettikçe çoklu sütun.
   Kolon sayısı gerçek kolon genişliğinden türer, ekran genişliğinden değil. */
.mini.genis { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--b2); }

/* ============================================================ 23. MİRAS BANDI */
/* Kültür/tarih editoryal bandı. Tam genişlik şerit değil: v5 dilinde tonlu,
   yuvarlak bir blok — sayfanın geri kalanıyla aynı ritimde durur. */

.miras {
  margin-block: var(--b8);
  display: grid; gap: var(--b6);
  padding: var(--b6);
  border-radius: var(--r);
  background: var(--yuzey);
}
/* İki sütuna GERÇEK sütun genişliğine göre geçer, ekran genişliğine göre değil:
   .ana 1024px'te yan sütun yüzünden ~590px kalıyor, orada iki sütun ezik durur. */
@container (min-width: 760px) {
  .miras { grid-template-columns: minmax(0,1fr) minmax(0,.92fr); align-items: center; gap: var(--b7); padding: var(--b7); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .miras { grid-template-columns: minmax(0,1fr) minmax(0,.92fr); align-items: center; gap: var(--b7); padding: var(--b7); }
  }
}

.miras-yazi { display: grid; gap: var(--b4); align-content: start; justify-items: start; }
.miras-yazi p { color: var(--metin-2); max-width: 56ch; }

.miras-sayi { display: flex; flex-wrap: wrap; gap: var(--b3) var(--b7); }
/* tabular-nums yok: bunlar sütun hâlinde hizalanan rakamlar değil,
   binlik ayracını da tablo genişliğine çekip "12 . 000" gibi gösteriyordu. */
.miras-sayi strong {
  display: block;
  font-size: clamp(1.5rem, 1.2rem + 1.4cqi, 2rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  color: var(--marka-koyu);
}
.miras-sayi span { display: block; margin-block-start: 2px; font-size: .8125rem; color: var(--metin-3); font-weight: 600; }

.miras-dugme {
  display: inline-flex; align-items: center; gap: var(--b2);
  min-height: 48px; padding-inline: var(--b5);
  border-radius: var(--r-pill);
  background: var(--metin); color: #fff;
  font-size: .9375rem; font-weight: 700; letter-spacing: -.012em;
  transition: background var(--gecis);
}
.miras-dugme:hover { background: var(--marka-koyu); }
.miras-dugme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.miras-gorsel { border-radius: var(--r); overflow: hidden; background: var(--zemin-ters); }
.miras-gorsel svg { width: 100%; height: auto; display: block; }
.miras-gorsel img { display: block; width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* ############################################################################
   İÇ SAYFALAR
   Ana sayfayla aynı dil: tonlu blok, 14px köşe, kılcal çizgi yok, büyük tip.
   Eski ic.css'teki "elmas + çift çizgi" bölüm başlığı ve kılcal tablo düzeni
   bilinçli olarak taşınmadı — v5'te bölüm adı büyük ve kalın, ayraç boşluk.
   ######################################################################### */

/* ------------------------------------------------------- 24. SAYFA BAŞLIĞI */

.sayfa-bas {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--b3) var(--b4);
  margin-block: var(--b7) var(--b6);
}
.sayfa-bas .geri {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-inline: var(--b4);
  border-radius: var(--r-pill); background: var(--yuzey);
  font-size: .875rem; font-weight: 650; color: var(--metin-2);
  transition: background var(--gecis), color var(--gecis);
}
.sayfa-bas .geri:hover { background: var(--metin); color: #fff; }
.sayfa-bas .geri svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sayfa-bas .adet { font-size: .875rem; color: var(--metin-3); font-weight: 600; }

/* İç sayfa gövde ızgarası — ana sayfadaki .govde ile aynı oran */
.ic-izgara { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--b7); align-items: start; }
@media (min-width: 1024px) { .ic-izgara { grid-template-columns: minmax(0,1fr) 320px; gap: var(--b8); } }
@media (min-width: 1280px) { .ic-izgara { grid-template-columns: minmax(0,1fr) 340px; gap: var(--b8); } }

/* --------------------------------------------------------- 25. MAKALE */

.makale { container-type: inline-size; padding-block-end: var(--b8); }
.makale > .cip { margin-block-end: var(--b4); }
.makale h1 {
  font-weight: 800;
  font-size: clamp(1.75rem, 1.35rem + 2.2cqi, 3rem);   /* 28 -> 48px */
  line-height: 1.08; letter-spacing: -.034em; text-wrap: balance;
}
.makale .girdi {
  margin-block-start: var(--b4);
  font-size: clamp(1.0625rem, 1rem + .35cqi, 1.25rem);
  line-height: 1.5; color: var(--metin-2); font-weight: 500;
  text-wrap: pretty; max-width: 62ch;
}

.makale-bilgi {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2) var(--b4);
  margin-block-start: var(--b5);
  font-size: .8125rem; color: var(--metin-3);
}
.makale-bilgi > span { display: inline-flex; align-items: center; gap: 6px; }
.makale-bilgi > span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--metin-3); margin-inline-end: 6px; opacity: .7;
}
.makale-bilgi strong { color: var(--metin); font-weight: 700; }

.makale > figure { margin-block: var(--b6); }
.makale > figure img { width: 100%; border-radius: var(--r); background: var(--yuzey-2); }
.makale > figure figcaption {
  margin-block-start: var(--b3); font-size: .8125rem; color: var(--metin-3);
  line-height: 1.45; max-width: 68ch;
}

/* Gövde metni — okunabilirlik için tek sütun ve sınırlı satır uzunluğu.
   --punto: okuma araçlarındaki A−/A+ ile ölçeklenir (localStorage'da hatırlanır).
   Kapsayıcıya font-size vermek yetmiyor; alt öğeler rem ile ezerdi, calc ile miras. */
.makale-govde {
  margin-block-start: var(--b6);
  font-size: calc(1.125rem * var(--punto, 1)); line-height: 1.68; color: var(--metin);
  max-width: 68ch;
}
/* ESKİ EDİTÖR TUZAĞI (Batman'da da vardı): arşivin %90'ı gövdeye satır içi
   font-size/color/font-family yazmış (eski CKEditor/Word). Bunlar v5 tipografisini
   ve rengini eziyordu — metin rastgele puntolarda ve lacivert/gri çıkıyordu.
   VERİYE DOKUNMADAN, salt görünümde nötrlüyoruz; miras ile v5 rengi/boyutu geçer. */
.makale-govde [style*="font-size"] { font-size: inherit !important; }
.makale-govde [style*="color"]     { color: inherit !important; }
.makale-govde [style*="font-family"]{ font-family: inherit !important; }
.makale-govde [style*="background"]{ background: transparent !important; }
/* Eski <div> paragrafları (arşivde <p> yerine div var) paragraf gibi aralıklansın */
.makale-govde div { margin: 0; }
.makale-govde > * + * { margin-block-start: var(--b5); }
.makale-govde > div + div { margin-block-start: var(--b4); }
.makale-govde p { text-wrap: pretty; }
.makale-govde a { color: var(--marka); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.makale-govde a:hover { color: var(--marka-koyu); }
.makale-govde strong, .makale-govde b { font-weight: 700; }
.makale-govde h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.026em; line-height: 1.2; margin-block-start: var(--b8); }
.makale-govde h3 { font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; margin-block-start: var(--b7); }
.makale-govde ul, .makale-govde ol { padding-inline-start: 1.4em; }
.makale-govde ul { list-style: disc; }
.makale-govde ol { list-style: decimal; }
.makale-govde li + li { margin-block-start: var(--b2); }
.makale-govde img { border-radius: var(--r-sm); margin-inline: auto; background: var(--yuzey-2); }
.makale-govde iframe { border-radius: var(--r-sm); width: 100%; aspect-ratio: 16/9; height: auto; border: 0; }
.makale-govde blockquote {
  padding: var(--b5); border-radius: var(--r);
  background: var(--yuzey); font-size: 1.1875rem; line-height: 1.5; font-weight: 500;
}
.makale-govde table { width: 100%; font-size: .9375rem; }
.makale-govde th, .makale-govde td { padding: var(--b2) var(--b3); text-align: start; }
.makale-govde thead th { background: var(--yuzey); font-weight: 700; }
.makale-govde tbody tr + tr td { box-shadow: inset 0 1px 0 var(--ayrac); }

.makale-paylas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2);
  margin-block-start: var(--b7);
}
.makale-paylas > span { font-size: .8125rem; color: var(--metin-3); font-weight: 650; margin-inline-end: var(--b2); }
.makale-paylas a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding-inline: var(--b4);
  border-radius: var(--r-pill); background: var(--yuzey);
  font-size: .875rem; font-weight: 650;
  transition: background var(--gecis), color var(--gecis);
}
.makale-paylas a:hover { background: var(--metin); color: #fff; }
.makale-paylas svg { width: 15px; height: 15px; fill: currentColor; }

/* -------------------------------------------------- 26. HABER LİSTE SATIRI */
/* Kategori, arama, yazar sayfalarının ortak satırı. */

.haber-liste { display: grid; gap: var(--b3); container-type: inline-size; }
.haber-satir {
  display: grid; grid-template-columns: minmax(0,1fr); gap: var(--b3);
  padding: var(--b3); border-radius: var(--r);
  transition: background var(--gecis);
}
@container (min-width: 540px) {
  .haber-satir { grid-template-columns: 208px minmax(0,1fr); gap: var(--b5); align-items: start; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 620px) { .haber-satir { grid-template-columns: 208px minmax(0,1fr); gap: var(--b5); align-items: start; } }
}
.haber-satir:hover { background: var(--yuzey); }
.haber-satir .g { display: block; aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden; background: var(--yuzey-2); }
.haber-satir .g img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transition: transform 420ms cubic-bezier(.2,.7,.3,1); }
.haber-satir:hover .g img { transform: scale(1.03); }
.haber-satir .cip { margin-block-end: var(--b2); }
.haber-satir h3 {
  font-weight: 700;
  font-size: clamp(1.125rem, 1.05rem + .55cqi, 1.375rem);
  line-height: 1.24; letter-spacing: -.022em; text-wrap: balance;
}
.haber-satir p { margin-block-start: var(--b2); font-size: .9375rem; line-height: 1.5; color: var(--metin-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.haber-satir .im { display: block; margin-block-start: var(--b3); font-size: .8125rem; color: var(--metin-3); }

/* Görselsiz varyant (köşe yazısı listesi) */
.haber-satir.gorselsiz { grid-template-columns: minmax(0,1fr); }

/* ------------------------------------------------------- 27. SAYFALAMA */

.sayfalama { display: flex; flex-wrap: wrap; gap: var(--b2); margin-block-start: var(--b8); }
.sayfalama a, .sayfalama .acik {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: var(--b3);
  border-radius: var(--r-pill); font-size: .9375rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background var(--gecis), color var(--gecis);
}
.sayfalama a { background: var(--yuzey); color: var(--metin-2); }
.sayfalama a:hover { background: var(--metin); color: #fff; }
.sayfalama .acik { background: var(--metin); color: #fff; }

/* ----------------------------------------------------------- 28. UYARI */

.uyari {
  padding: var(--b4) var(--b5); border-radius: var(--r);
  background: var(--yuzey); color: var(--metin-2);
  font-size: .9375rem; line-height: 1.5;
}
.uyari.hata { background: #fdecea; color: #a3190f; }
.uyari strong { color: var(--metin); }

/* ------------------------------------------------------------ 29. FORM */

.form-izgara { display: grid; gap: var(--b4); }
@media (min-width: 640px) { .form-izgara { grid-template-columns: 1fr 1fr; } .form-alan.genis { grid-column: 1 / -1; } }
.form-alan { display: grid; gap: var(--b2); }
.form-alan label { font-size: .8125rem; font-weight: 700; color: var(--metin-2); }
.form-alan input, .form-alan textarea, .form-alan select {
  width: 100%; min-height: 48px; padding: var(--b3) var(--b4);
  border: 0; border-radius: var(--r-sm);
  background: var(--yuzey); color: var(--metin);
  font: inherit; font-size: 1rem;
}
.form-alan textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.form-alan input::placeholder, .form-alan textarea::placeholder { color: var(--metin-3); }
.gonder-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b2);
  justify-self: start;   /* ızgara hücresinde esneyip tam genişliğe yayılmasın */
  min-height: 48px; padding-inline: var(--b6);
  border-radius: var(--r-pill); background: var(--metin); color: #fff;
  font-size: .9375rem; font-weight: 700; letter-spacing: -.012em;
  transition: background var(--gecis);
}
.gonder-btn:hover { background: var(--marka-koyu); }

/* -------------------------------------------------------- 30. YAZAR İMZASI */

.yazar-imza {
  display: flex; align-items: center; gap: var(--b4);
  padding: var(--b4); border-radius: var(--r); background: var(--yuzey);
  margin-block-end: var(--b6);
}
.yazar-imza .foto { display: block; width: 68px; height: 68px; flex-shrink: 0;
  border-radius: var(--r-pill); overflow: hidden; background: var(--yuzey-2); }
.yazar-imza .foto img { width: 100%; height: 100%; object-fit: cover; }
.yazar-imza h1, .yazar-imza h2, .yazar-imza h3 { font-size: 1.125rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.yazar-imza .unvan { margin-block-start: 3px; font-size: .8125rem; color: var(--marka); font-weight: 650; }
.yazar-imza .bio { margin-block-start: var(--b2); font-size: .875rem; line-height: 1.5; color: var(--metin-2); max-width: 60ch; }

/* -------------------------------------------------- 31. GALERİ / VİDEO / E-GAZETE */

.gfoto-izg { display: grid; gap: var(--b4); grid-template-columns: repeat(auto-fill, minmax(min(300px,100%), 1fr)); }
.gfoto-izg figure { border-radius: var(--r); overflow: hidden; background: var(--yuzey); }
.gfoto-izg img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--yuzey-2); }
.gfoto-izg figcaption { padding: var(--b3) var(--b4); font-size: .875rem; line-height: 1.45; color: var(--metin-2); }

.video-izg { display: grid; gap: var(--b5); grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr)); }
.video-oge .kapak {
  display: block; position: relative; width: 100%;
  aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden;
  background: var(--zemin-ters); padding: 0;
}
.video-oge .kapak img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(.2,.7,.3,1); }
.video-oge .kapak:hover img { transform: scale(1.04); }
.video-oge .oynat-yuvarlak { position: absolute; inset: 0; display: grid; place-items: center; }
.video-oge .oynat-yuvarlak > span {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--metin);
  box-shadow: var(--golge-lg); transition: transform var(--gecis);
}
.video-oge .kapak:hover .oynat-yuvarlak > span { transform: scale(1.08); }
.video-oge .oynat-yuvarlak svg { width: 24px; height: 24px; fill: currentColor; margin-inline-start: 2px; }
.video-oge .sure {
  position: absolute; inset-block-end: var(--b2); inset-inline-end: var(--b2);
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(13,20,23,.78); color: #fff;
  font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.video-oge h3 { margin-block-start: var(--b3); font-size: 1.0625rem; font-weight: 700;
  line-height: 1.28; letter-spacing: -.018em; text-wrap: balance; }
.video-cerceve { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--r); background: var(--zemin-ters); }

.egazete-izg { display: grid; gap: var(--b5); grid-template-columns: repeat(auto-fill, minmax(min(180px,100%), 1fr)); }
.egazete-oge { display: block; }
.egazete-oge img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: var(--r-sm); background: var(--yuzey-2);
  box-shadow: var(--golge); transition: transform var(--gecis), box-shadow var(--gecis);
}
.egazete-oge:hover img { transform: translateY(-3px); box-shadow: var(--golge-lg); }
.egazete-oge .t { margin-block-start: var(--b3); font-size: .9375rem; font-weight: 700; letter-spacing: -.016em; }
.egazete-oge .s { margin-block-start: 2px; font-size: .8125rem; color: var(--metin-3); }

/* ------------------------------------------------- 32. E-GAZETE OKUYUCUSU */

.eg-baslik { font-weight: 800; font-size: clamp(1.5rem, 1.25rem + 1.6vw, 2.25rem);
  line-height: 1.1; letter-spacing: -.03em; }
.eg-meta { margin-block-start: 6px; font-size: .875rem; color: var(--metin-3); }

.eg-okuyucu { display: grid; gap: var(--b4); }
.eg-sahne { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: var(--b2); align-items: center; }
.eg-goruntu { border-radius: var(--r); overflow: hidden; background: var(--yuzey); }
.eg-goruntu img { width: 100%; height: auto; display: block; }
.eg-goruntu.tekil { max-width: 620px; margin-inline: auto; }
.eg-ok {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--yuzey); color: var(--metin-2); font-size: 1.375rem; line-height: 1;
  transition: background var(--gecis), color var(--gecis);
}
.eg-ok:hover { background: var(--metin); color: #fff; }

.eg-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b3); }
.eg-sayac { font-size: .875rem; font-weight: 700; color: var(--metin-2); font-variant-numeric: tabular-nums; }
.eg-tam {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding-inline: var(--b4);
  border-radius: var(--r-pill); background: var(--yuzey);
  font-size: .875rem; font-weight: 650;
  transition: background var(--gecis), color var(--gecis);
}
.eg-tam:hover { background: var(--metin); color: #fff; }

.eg-serit {
  display: flex; gap: var(--b2); overflow-x: auto; padding-block-end: var(--b2);
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.eg-serit::-webkit-scrollbar { height: 4px; }
.eg-kucuk {
  position: relative; flex: 0 0 auto; width: 74px; padding: 0;
  border-radius: 8px; overflow: hidden; background: var(--yuzey-2);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color var(--gecis), opacity var(--gecis);
  opacity: .62;
}
.eg-kucuk:hover { opacity: 1; }
.eg-kucuk.secili { opacity: 1; outline-color: var(--metin); }
.eg-kucuk img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.eg-kucuk-no {
  position: absolute; inset-block-end: 3px; inset-inline-end: 3px;
  min-width: 18px; padding: 1px 5px; border-radius: var(--r-pill);
  background: rgba(13,20,23,.78); color: #fff;
  font-size: .625rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- 33. BİLGİ SATIRI (künye) */

.bilgi-liste { display: grid; gap: var(--b1); margin-block-start: var(--b4); }
.bilgi-satir {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--b3); padding: var(--b3) var(--b4);
  border-radius: var(--r-sm); background: var(--yuzey);
  font-size: .9375rem;
}
.bilgi-satir > span { color: var(--metin-3); font-weight: 600; }
.bilgi-satir > strong { font-weight: 700; text-align: end; }
.bilgi-satir a { color: var(--marka); }
.bilgi-satir a:hover { color: var(--marka-koyu); }

/* ------------------------------------------- 34. DOKUNMA HEDEFİ GENİŞLETME */
/* Görsel olarak küçük kalması gereken bağlantılar (çip, satır içi telefon /
   e-posta) 44x44'e görünmez bir ::after ile ulaşır. Kutuyu büyütmek düzeni
   bozacağı için hedef alanı büyütülür, öğe değil — WCAG 2.5.8'in kabul ettiği
   yöntem. Kapsayıcının `position` alması gerekiyor, o yüzden relative. */
.makale > a.cip,
.bilgi-satir a { position: relative; }
.makale > a.cip::after,
.bilgi-satir a::after {
  content: ""; position: absolute;
  inset-block: -9px; inset-inline: -6px;
  min-height: 44px;
}

/* ============================================================ 35. PUAN DURUMU SAYFASI */

.lig-sekme { display:flex; flex-wrap:wrap; gap:var(--b2); margin-block-end:var(--b6); }
.lig-sekme a {
  display:inline-flex; align-items:center; min-height:44px; padding-inline:var(--b4);
  border-radius:var(--r-pill); background:var(--yuzey); color:var(--metin-2);
  font-size:.9375rem; font-weight:700; letter-spacing:-.012em;
  transition:background var(--gecis), color var(--gecis);
}
.lig-sekme a:hover { background:var(--yuzey-2); color:var(--metin); }
.lig-sekme a.aktif { background:var(--metin); color:#fff; }

.puan-blok { padding:var(--b4); }

/* Tam cetvel: kompakt yan sütun tablosunun aksine tüm kolonlar her ekranda
   görünür; dar ekranda tablo .tablo-sarmal içinde yatay kayar. */
.puan-tam .ops { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
.puan-tam th, .puan-tam td { padding-inline:var(--b3); }
.puan-tam td.t { max-width:none; white-space:nowrap; }
/* Rozet siyah: aktif/vurgu durum rengi siyah (turkuaz yalnız logoda). */
.puan-tam .rozet {
  display:inline-block; margin-inline-start:var(--b2); vertical-align:middle;
  padding:2px 8px; border-radius:var(--r-pill);
  background:var(--metin); color:#fff; font-size:.625rem; font-weight:800;
  letter-spacing:.01em; white-space:nowrap;
}

/* Yan sütun modülü altındaki "tümü/tam cetvel" bağlantısı */
.modul-tumu {
  display:inline-flex; align-items:center; gap:6px;
  margin-block-start:var(--b3); min-height:44px;
  font-size:.875rem; font-weight:700; color:var(--marka);
  transition:color var(--gecis);
}
.modul-tumu:hover { color:var(--marka-koyu); }
.modul-tumu svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ======================================================== 36. OKUMA ARAÇLARI */
/* Haber/köşe yazısı: A−/A+ punto, sesli dinle (cümle cümle), kopyala, indir,
   yazdır. Aktif/vurgu rengi nötr-dark (turkuaz yalnız logoda kuralı). */
.okuma-araclari {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2);
  margin-block: var(--b5); padding-block: var(--b3);
  border-block: 1px solid var(--ayrac);
}
.oa-dugme {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding-inline: var(--b3);
  border: 1px solid var(--ayrac); border-radius: var(--r-pill);
  background: var(--zemin); color: var(--metin-2);
  font-size: .8125rem; font-weight: 650; letter-spacing: -.01em;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.oa-dugme:hover { background: var(--metin); border-color: var(--metin); color: #fff; }
.oa-dugme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.oa-ayrac { width: 1px; height: 22px; background: var(--ayrac); margin-inline: var(--b1); }
.oa-ses.okuyor { background: var(--metin); border-color: var(--metin); color: #fff; }

/* Sesli dinlemede okunan cümlenin vurgusu — nötr tint + koyu altı çizgi */
.tts-c { transition: background 160ms var(--gecis); }
.tts-okunuyor {
  background: var(--yuzey);
  text-decoration: underline; text-decoration-color: var(--metin);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* -------------------------------------------------------------- BASKI */
@media print {
  .masthead, .nav, .flas, .menu-panel, .menu-perde, .footer, .yukari,
  .yan, .okuma-araclari, .makale-paylas, .reklam-yuva, .reklam-yapiskan,
  .bolum, .atla { display: none !important; }
  html, body { background: #fff !important; color: #000; font-size: 11.5pt; }
  .ic-izgara { display: block !important; }
  .makale { padding: 0 !important; }
  .makale h1 { font-size: 20pt; line-height: 1.15; }
  .makale-govde { max-width: none; font-size: 11.5pt; line-height: 1.55; color: #000; }
  .makale-govde p { orphans: 3; widows: 3; }
  .makale > figure img { max-height: 9cm; object-fit: contain; }
  h1, h2, h3 { break-after: avoid; }
  /* kâğıtta tıklanamayan bağlantının adresi görünsün */
  .makale-govde a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }
  .tts-okunuyor { background: none; text-decoration: none; }
}