/* ═══════════════════════════════════════════════════════════════════
   İslam ve Hayat — /yeni  ·  sürüm 3  "GAZETE"
   Beyribey Bilişim · saf CSS, framework yok (kural 1)

   HEDEF: El Cezire / NYT ölçeğinde YOĞUN bir haber sitesi.
   v2 blog gibiydi — az içerik, çok boşluk. Bu sürümde:
     · Ekranın üstünde 20+ başlık görünür (paket mantığı).
     · Hiyerarşi süslemeyle değil TİPOGRAFİK ÖLÇEKLE kurulur (h1…h6).
     · Sütunlar arası DİKEY ÇİZGİ — gazete sayfası dokusu.
     · Kuşaklar farklı zeminlerde (kâğıt / beyaz sayfa / koyu blok) → ritim.
     · Kickerlar okre, "Son dakika/Canlı" kırmızı, marka rengi zümrüt.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --kagit:#e9e5dc;        /* sayfa zemini — kâğıt, beyaz değil (kural 5) */
  --sayfa:#ffffff;        /* içerik tabakası */
  --sayfa-2:#f6f3ec;      /* ikincil yüzey */
  --koyu:#14120f;         /* koyu kuşak + menü çubuğu */
  --koyu-2:#211d18;

  --murekkep:#14120f;
  --murekkep-2:#3a342b;
  --soluk:#6b6355;
  --cok-soluk:#948b79;

  --cizgi:#ddd6c7;        /* kılcal */
  --cizgi-2:#eae4d8;      /* daha soluk */
  --cizgi-guclu:#14120f;  /* bölüm kuralı */

  --marka:#0e4d40;        /* zümrüt — kimlik */
  --vurgu:#a4741a;        /* okre — kicker, bölüm etiketi */
  --canli:#b4231f;        /* son dakika / canlı */

  --r:3px;
  --en:1320px;

  --serif:"Source Serif 4",Cambria,Georgia,"Times New Roman",serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}

:root[data-tema="koyu"]{
  --kagit:#100e0c;
  --sayfa:#17150f;
  --sayfa-2:#1e1b15;
  --koyu:#0a0908;
  --koyu-2:#17150f;
  --murekkep:#f1ecdf;
  --murekkep-2:#d5cdba;
  --soluk:#a19885;
  --cok-soluk:#7d7565;
  --cizgi:#332e25;
  --cizgi-2:#26221b;
  --cizgi-guclu:#5c5445;
  --marka:#4fb098;
  --vurgu:#cfa14c;
  --canli:#e2685c;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip;max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--kagit);color:var(--murekkep);font:400 17px/1.6 var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.satir>*,.izgara>*,.esnek>*{min-width:0}          /* kural 25 */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.kap{width:100%;max-width:var(--en);margin-inline:auto;padding-inline:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:absolute;left:12px;top:-60px;z-index:300;background:var(--marka);color:#fff;
  padding:11px 17px;font:600 15px var(--sans)}
.atla:focus{top:0}

/* ═══════════════════════════════════════════════════════════════════
   TİPOGRAFİK ÖLÇEK — hiyerarşi burada kurulur
   ═══════════════════════════════════════════════════════════════════ */
.h1{font:700 clamp(34px,3.9vw,52px)/1.06 var(--serif);letter-spacing:-.032em}
.h2{font:700 clamp(26px,2.5vw,34px)/1.12 var(--serif);letter-spacing:-.026em}
.h3{font:700 22px/1.18 var(--serif);letter-spacing:-.02em}
.h4{font:600 19px/1.24 var(--serif);letter-spacing:-.014em}
.h5{font:600 17px/1.3 var(--serif);letter-spacing:-.01em}
.h6{font:600 15.5px/1.36 var(--serif);letter-spacing:-.006em}
.h1 a:hover,.h2 a:hover,.h3 a:hover,.h4 a:hover,.h5 a:hover,.h6 a:hover{color:var(--marka)}

.kicker{display:inline-block;font:700 11px var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--vurgu);margin-bottom:7px}
.kicker--canli{color:var(--canli)}
.kicker--marka{color:var(--marka)}

.dek{font:400 17.5px/1.55 var(--serif);color:var(--murekkep-2);margin-top:9px}
.meta{font:500 12.5px var(--sans);color:var(--cok-soluk);margin-top:9px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.meta .nokta::before{content:"·";margin-inline-end:10px}

/* ═══════════════════════════════════════════════════════════════════
   ÜST — hizmet şeridi · logo · menü
   ═══════════════════════════════════════════════════════════════════ */
.hizmet{background:var(--koyu);color:#cfc7b6}
.hizmet .kap{display:flex;align-items:center;gap:18px;min-height:34px;flex-wrap:wrap;
  font:500 12px var(--sans)}
.hizmet__vakit{margin-inline-start:auto;display:flex;gap:13px;flex-wrap:wrap}
.hizmet__vakit b{color:#e8c98a;font-weight:600}
.hizmet a:hover{color:#e8c98a}

.mast{background:var(--kagit);border-bottom:1px solid var(--cizgi)}
.mast .kap{display:flex;align-items:center;gap:18px;min-height:88px}
/* arama kutusu varsayılan gizli — .kap'ın display:flex'i hidden'ı ezmesin
   (mercek düğmesi data-ara-kutu'yu açıp kapatır) */
.mast .kap[hidden]{display:none}
.logo{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0}
.logo>span{min-width:0}
.logo__im{width:44px;height:44px;flex:none;background:var(--marka);color:#e8c98a;
  display:grid;place-items:center;font:400 22px/1 var(--serif)}
.logo__ad{display:block;font:700 32px/1 var(--serif);letter-spacing:-.035em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo__alt{display:block;font:600 10px/1 var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--cok-soluk);margin-top:7px}
.mast__sag{margin-inline-start:auto;display:flex;align-items:center;gap:8px;flex:none}

.simge{width:42px;height:42px;flex:none;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--murekkep-2)}
.simge:hover{color:var(--marka)}
.simge svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hamburger{display:none}
.abone{background:var(--marka);color:#fff;font:600 13.5px var(--sans);
  padding:11px 18px;border:0;cursor:pointer;white-space:nowrap}
.abone:hover{background:var(--koyu);color:#e8c98a}

/* ana menü — koyu çubuk, yapışkan */
.menu{background:var(--koyu);position:sticky;top:0;z-index:120;border-bottom:3px solid var(--vurgu)}
.menu .kap{display:flex;align-items:stretch;gap:0;min-height:46px}
/* Bağlantılar kendi rayında kayar; hamburger sabit kalır.
   .kap'a overflow verilseydi hamburger de kayıp giderdi. */
.menu__ray{display:flex;align-items:center;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;overscroll-behavior-x:contain}
.menu__ray::-webkit-scrollbar{display:none}
.menu a{color:#e6dfd0;font:600 14px var(--sans);padding:13px 14px;white-space:nowrap;
  text-transform:uppercase;border-bottom:3px solid transparent;margin-bottom:-3px}
.menu a:hover{color:#fff;background:var(--koyu-2)}
.menu a[aria-current]{color:#fff;border-bottom-color:var(--vurgu)}
.menu__mini{flex:none;display:flex;align-items:center;gap:4px;padding-inline-start:10px;
  position:relative;background:var(--koyu)}
/* raydan gelen yazının altına girmesin diye sola doğru sönümlenen perde */
.menu__mini::before{content:"";position:absolute;inset-block:0;inset-inline-start:-26px;width:26px;
  background:linear-gradient(to right,rgba(20,18,15,0),var(--koyu));pointer-events:none}
[dir="rtl"] .menu__mini::before{background:linear-gradient(to left,rgba(20,18,15,0),var(--koyu))}
.menu__mini .simge{color:#cfc7b6;width:38px;height:38px}
.menu__mini .simge:hover{color:#e8c98a}

.cekmece{position:fixed;inset:0 0 0 auto;width:min(88vw,340px);z-index:310;background:var(--sayfa);
  border-inline-start:1px solid var(--cizgi);transform:translateX(101%);transition:transform .24s;
  padding:22px;overflow-y:auto}
.cekmece[data-acik]{transform:translateX(0)}
.cekmece a{display:block;padding:13px 4px;font:600 16px var(--sans);border-bottom:1px solid var(--cizgi-2)}
.cekmece a:hover{color:var(--marka)}
.perde{position:fixed;inset:0;background:rgba(10,8,6,.55);z-index:305;opacity:0;pointer-events:none;transition:opacity .24s}
.perde[data-acik]{opacity:1;pointer-events:auto}

/* son dakika şeridi */
.sondakika{background:var(--sayfa);border-bottom:1px solid var(--cizgi-guclu)}
.sondakika .kap{display:flex;align-items:center;gap:16px;min-height:48px}
.sondakika__et{font:700 11.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--canli);padding:6px 11px;flex:none;display:flex;align-items:center;gap:7px}
.sondakika__et::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;
  animation:nabiz 1.8s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.25}}
.sondakika__ic{flex:1;min-width:0;font:600 16px var(--serif);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sondakika__ic:hover{color:var(--canli)}
.sondakika__saat{flex:none;font:500 12.5px var(--sans);color:var(--cok-soluk)}

/* ═══════════════════════════════════════════════════════════════════
   SAYFA TABAKASI — içerik beyaz sayfada durur, kâğıt zemin çerçeveler
   ═══════════════════════════════════════════════════════════════════ */
.tabaka{background:var(--sayfa);border-inline:1px solid var(--cizgi)}
.tabaka>.kap{padding-block:0}

/* ═══════════════════════════════════════════════════════════════════
   HERO PAKETİ — üç sütun, aralarında dikey çizgi
   ═══════════════════════════════════════════════════════════════════ */
.hero{display:grid;grid-template-columns:258px minmax(0,1fr) 306px;
  padding-block:26px 32px;gap:0}
/* KURAL 25 — ızgara çocuğuna min-width:0 verilmezse sütun İÇERİĞE göre şişer.
   Manşet slider'ı flex olduğu için mobilde sütunu 375 → 616 px'e çıkarmıştı;
   overflow-x:clip taşmayı gizlediği için hata sessiz kalıyordu. */
.hero>*{min-width:0}
.manset,.manset__ray{min-width:0}
.hero__sol{padding-inline-end:24px}
.hero__orta{padding-inline:28px;border-inline:1px solid var(--cizgi)}
.hero__sag{padding-inline-start:24px}

/* ═══════════ MANŞET SLIDER ═══════════
   Kaydırma yerel scroll-snap ile (parmakla swipe bedava, kural S-07);
   oklar/noktalar/otomatik geçiş üstüne biniyor (kural S-08).
   Slaytların yapısı AYNI → yükseklik zıplamaz. */
.manset{position:relative}
.manset__ray{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
}
.manset__ray::-webkit-scrollbar{display:none}
.manset__slayt{flex:0 0 100%;scroll-snap-align:start;min-width:0}

.lider .lider__res{display:block;overflow:hidden;background:var(--sayfa-2);aspect-ratio:16/9;margin-bottom:16px}
.lider .lider__res img{width:100%;height:100%;object-fit:cover}
.lider .dek{font-size:19px;max-width:60ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Oklar görselin dikey ortasına oturur.
   TUZAK: `top:%` kapsayıcının YÜKSEKLİĞİNE göre çözülür, genişliğine değil —
   yani "görselin yarısı" diye yüzde vermek işe yaramaz. Çözüm: ok şeridine
   görselle AYNI aspect-ratio'yu ver, içinde ortala. Ölçü kendiliğinden tutar. */
.manset__oklar{
  position:absolute;inset-inline:0;top:0;aspect-ratio:16/9;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;
}
.manset__ok{
  pointer-events:auto;width:46px;height:64px;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:rgba(18,16,13,.55);
  transition:background .15s;
}
.manset__ok:hover{background:var(--marka)}
.manset__ok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* nokta göstergesi + sayaç */
.manset__cubuk{display:flex;align-items:center;gap:14px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--cizgi)}
/* .manset__nokta biçemi sesli.css içine taşındı (nokta göstergesi) */



.manset__sayac{margin-inline-start:auto;font:600 12px var(--sans);
  letter-spacing:.1em;color:var(--cok-soluk);flex:none}
.manset__dur{width:30px;height:30px;flex:none;border:1px solid var(--cizgi);background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--soluk)}
.manset__dur:hover{border-color:var(--marka);color:var(--marka)}
.manset__dur svg{width:13px;height:13px;fill:currentColor}
.lider__baglar{margin-top:18px;padding-top:16px;border-top:1px solid var(--cizgi)}
.lider__baglar li{list-style:none;padding:7px 0 7px 16px;position:relative;
  font:600 16px/1.35 var(--serif)}
.lider__baglar li::before{content:"";position:absolute;inset-inline-start:0;top:15px;
  width:5px;height:5px;background:var(--vurgu)}
.lider__baglar a:hover{color:var(--marka)}

/* yığın liste — sol sütun */
.yigin{display:flex;flex-direction:column}
.yigin>*{padding-block:16px;border-bottom:1px solid var(--cizgi-2)}
.yigin>*:first-child{padding-top:0}
.yigin>*:last-child{border-bottom:0;padding-bottom:0}

.oge{display:grid;grid-template-columns:1fr 82px;gap:12px;align-items:start}
.oge--resimsiz{grid-template-columns:1fr}
.oge__res{overflow:hidden;background:var(--sayfa-2);aspect-ratio:1}
.oge__res img{width:100%;height:100%;object-fit:cover}
.oge .meta{margin-top:6px}

/* canlı akış — sağ sütun */
.canli__bas{display:flex;align-items:center;gap:9px;padding-bottom:11px;
  border-bottom:2px solid var(--cizgi-guclu);margin-bottom:4px}
.canli__bas h2{font:700 13px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.canli__nokta{width:8px;height:8px;border-radius:50%;background:var(--canli);
  animation:nabiz 1.8s ease-in-out infinite;flex:none}
.akis{list-style:none;position:relative;padding-inline-start:18px;margin-top:14px}
.akis::before{content:"";position:absolute;inset-inline-start:3px;top:6px;bottom:6px;
  width:1px;background:var(--cizgi)}
.akis li{position:relative;padding:0 0 18px}
.akis li::before{content:"";position:absolute;inset-inline-start:-18px;top:6px;
  width:7px;height:7px;border-radius:50%;background:var(--vurgu);
  box-shadow:0 0 0 3px var(--sayfa)}
.akis time{display:block;font:600 11.5px var(--sans);color:var(--canli);
  letter-spacing:.06em;margin-bottom:4px}
.akis a{font:600 15.5px/1.36 var(--serif)}
.akis a:hover{color:var(--marka)}

/* ═══════════════════════════════════════════════════════════════════
   BÖLÜM BAŞLIĞI — tek dil, her yerde aynı
   ═══════════════════════════════════════════════════════════════════ */
.bolum{padding-block:34px;border-top:1px solid var(--cizgi-guclu)}
.bolum__bas{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.bolum__bas h2{font:700 20px var(--serif);letter-spacing:-.02em}
.bolum__bas h2 span{color:var(--vurgu)}
.bolum__bas .tum{margin-inline-start:auto;font:600 12.5px var(--sans);color:var(--soluk);flex:none}
.bolum__bas .tum:hover{color:var(--marka)}

/* dörtlü kuşak — sütunlar arasında çizgi */
.dortlu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.dortlu>*{padding-inline:20px;border-inline-start:1px solid var(--cizgi)}
.dortlu>*:first-child{padding-inline-start:0;border-inline-start:0}
.dortlu>*:last-child{padding-inline-end:0}
.uclu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.uclu>*{padding-inline:22px;border-inline-start:1px solid var(--cizgi)}
.uclu>*:first-child{padding-inline-start:0;border-inline-start:0}
.uclu>*:last-child{padding-inline-end:0}

.kart__res{display:block;overflow:hidden;background:var(--sayfa-2);aspect-ratio:3/2;margin-bottom:12px}
.kart__res img{width:100%;height:100%;object-fit:cover}

/* bölüm düzeni: solda büyük + sağda liste */
.bolum-ikili{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0}
.bolum-ikili__sol{padding-inline-end:30px}
.bolum-ikili__sag{padding-inline-start:30px;border-inline-start:1px solid var(--cizgi)}

/* ═══════════════════════════════════════════════════════════════════
   GÖRÜŞ / KÖŞE YAZARLARI — okre zeminli kuşak
   ═══════════════════════════════════════════════════════════════════ */
.gorus{background:var(--sayfa-2);border-block:1px solid var(--cizgi-guclu)}
.gorus .bolum{border-top:0}
.gorus-izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.gorus-izgara>*{padding-inline:22px;border-inline-start:1px solid var(--cizgi)}
.gorus-izgara>*:first-child{padding-inline-start:0;border-inline-start:0}
.gorus-izgara>*:last-child{padding-inline-end:0}
.yazar-oge{display:flex;flex-direction:column;gap:11px}
.yazar-oge__ust{display:flex;align-items:center;gap:11px}
.yazar-oge img{width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover;
  filter:grayscale(1);transition:filter .2s}
.yazar-oge:hover img{filter:none}
.yazar-oge b{display:block;font:700 14px var(--sans)}
.yazar-oge small{display:block;font:500 12px var(--sans);color:var(--cok-soluk);margin-top:2px}
.yazar-oge p{font:400 17px/1.4 var(--serif);font-style:italic;color:var(--murekkep-2)}

/* ═══════════════════════════════════════════════════════════════════
   VİDEO KUŞAĞI — koyu blok, ritim kırar
   ═══════════════════════════════════════════════════════════════════ */
.koyu-kusak{background:var(--koyu);color:#eee7d8}
.koyu-kusak .bolum{border-top:0}
.koyu-kusak .bolum__bas h2{color:#fff}
.koyu-kusak .bolum__bas .tum{color:#bdb4a2}
.koyu-kusak .bolum__bas .tum:hover{color:#e8c98a}
.koyu-kusak a:hover{color:#e8c98a}
.koyu-kusak .meta{color:#948b78}
.koyu-kusak .dortlu>*,.koyu-kusak .uclu>*,.koyu-kusak .video-izgara>*{border-inline-start-color:#2e281f}
.video-izgara{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0}
.video-izgara__sol{padding-inline-end:28px}
.video-izgara__sag{padding-inline-start:28px;border-inline-start:1px solid #2e281f;
  display:flex;flex-direction:column}
.video-izgara__sag>*{padding-block:15px;border-bottom:1px solid #2e281f}
.video-izgara__sag>*:first-child{padding-top:0}
.video-izgara__sag>*:last-child{border-bottom:0}
.oynat{position:relative;display:block;overflow:hidden;background:#000;aspect-ratio:16/9}
.oynat img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .2s}
.oynat:hover img{opacity:1}
.oynat::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.85)}
.oynat::before{content:"";position:absolute;left:50%;top:50%;z-index:1;
  transform:translate(-38%,-50%);border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff}
.oynat--kucuk::after{width:38px;height:38px;border-width:1.5px}
.oynat--kucuk::before{border-width:6px 0 6px 10px}
.sure{position:absolute;inset-inline-end:8px;bottom:8px;z-index:2;background:rgba(0,0,0,.78);
  color:#fff;font:600 11.5px var(--sans);padding:3px 7px}

/* ═══════════════════════════════════════════════════════════════════
   ÇOK OKUNANLAR — iri rakamlar
   ═══════════════════════════════════════════════════════════════════ */
.sirali{list-style:none;counter-reset:s}
.sirali li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:14px;
  padding:15px 0;border-bottom:1px solid var(--cizgi-2);align-items:start}
.sirali li:last-child{border-bottom:0}
.sirali li::before{content:counter(s);font:700 34px/.9 var(--serif);color:var(--cizgi);
  letter-spacing:-.04em}
.sirali a{font:600 16.5px/1.36 var(--serif)}
.sirali a:hover{color:var(--marka)}

/* ═══════════════════════════════════════════════════════════════════
   DOSYA / ÖZEL DİZİ
   ═══════════════════════════════════════════════════════════════════ */
.dosya{position:relative;overflow:hidden;background:var(--koyu);min-height:340px;
  display:flex;align-items:flex-end}
.dosya img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}
.dosya__ic{position:relative;padding:38px 40px;color:#fff;max-width:64ch}
.dosya__ic .kicker{color:#e8c98a}
.dosya__ic .h2{color:#fff}
.dosya__ic .dek{color:#ddd5c4}

/* ═══════════════════════════════════════════════════════════════════
   HABER DETAY
   ═══════════════════════════════════════════════════════════════════ */
.okuma-cubuk{position:fixed;top:0;left:0;height:3px;background:var(--vurgu);z-index:200;width:0}
.iz{font:500 12.5px var(--sans);color:var(--cok-soluk);padding-block:18px 0;display:flex;gap:8px;flex-wrap:wrap}
.iz a:hover{color:var(--marka)}

.detay-izgara{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:0;padding-block:8px 40px}
/* İçerik sütunu ızgarayı tam doldurur — 760px sınırı sağda ölü boşluk
   bırakıyordu (kullanıcı isteği: başlık/metin yan sütuna kadar yayılsın) */
.detay{padding-inline-end:44px}
.detay-yan{padding-inline-start:28px;border-inline-start:1px solid var(--cizgi);
  position:sticky;top:70px;align-self:start;display:flex;flex-direction:column;gap:34px}

.detay h1{font:700 clamp(30px,3.6vw,46px)/1.1 var(--serif);letter-spacing:-.032em;margin:10px 0 16px}
.detay__spot{font:400 20px/1.55 var(--serif);color:var(--murekkep-2);margin-bottom:22px}
.detay__meta{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;padding:14px 0;
  border-block:1px solid var(--cizgi);font:500 13px var(--sans);color:var(--soluk);margin-bottom:24px}
.detay__kapak{overflow:hidden;margin-bottom:10px}
.kapak-alt{font:500 12.5px var(--sans);color:var(--cok-soluk);margin-bottom:28px}

.araclar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:28px;
  padding-bottom:16px;border-bottom:1px solid var(--cizgi-2)}
.arac{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;
  min-height:40px;border:1px solid var(--cizgi);background:transparent;font:600 13px var(--sans);
  cursor:pointer;color:var(--soluk)}
.arac:hover{border-color:var(--marka);color:var(--marka)}
.arac[aria-pressed="true"]{background:var(--marka);border-color:var(--marka);color:#fff}
.arac svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── GÖVDE: editör çıktısı burada basılır; önizleme bunu okur (kural 29) ── */
.govde{font-size:calc(19px * var(--yb,1));line-height:1.75}
.govde>*+*{margin-top:1.15em}
.govde p:first-of-type::first-letter{float:inline-start;font:700 3.6em/.82 var(--serif);
  color:var(--marka);padding-inline-end:.08em;padding-top:.06em}
.govde h2{font:700 1.34em/1.26 var(--serif);margin-top:1.8em;letter-spacing:-.02em}
.govde h3{font:600 1.14em/1.34 var(--serif);margin-top:1.5em}
.govde a{color:var(--marka);text-decoration:underline;text-underline-offset:3px}
.govde ul,.govde ol{padding-inline-start:1.4em}
.govde li+li{margin-top:.4em}
.govde blockquote{border-inline-start:3px solid var(--vurgu);padding-inline-start:22px;
  font:italic 400 1.12em/1.5 var(--serif);color:var(--murekkep);margin-block:1.7em}
.govde hr{border:0;border-top:1px solid var(--cizgi);margin-block:2.2em}
.govde table{width:100%;border-collapse:collapse;font-size:.92em}
.govde th,.govde td{border-bottom:1px solid var(--cizgi);padding:10px 12px;text-align:start}
.govde th{font:600 .84em var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--soluk)}
.govde .kaydir{overflow-x:auto}
.govde figure{margin-block:1.9em}
.govde figure img{width:100%}
.govde figcaption{font:500 12.5px var(--sans);color:var(--cok-soluk);margin-top:9px;
  padding-top:8px;border-top:1px solid var(--cizgi-2)}
.govde figure.g-sol{float:inline-start;margin:.3em 2em 1.3em 0}
.govde figure.g-sag{float:inline-end;margin:.3em 0 1.3em 2em}
.govde figure.g-orta{margin-inline:auto}
.govde iframe{width:100%;aspect-ratio:16/9;border:0}
.govde video{width:100%}

.etiketler{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:38px;
  padding-top:20px;border-top:1px solid var(--cizgi)}
.etiket{font:500 12.5px var(--sans);color:var(--soluk);border:1px solid var(--cizgi);padding:5px 12px}
.etiket:hover{border-color:var(--marka);color:var(--marka)}
.paylas{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:22px}
.paylas b{font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cok-soluk);margin-inline-end:8px}
.pay{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--cizgi);
  background:transparent;cursor:pointer;color:var(--soluk)}
.pay:hover{border-color:var(--marka);color:var(--marka)}
.pay svg{width:17px;height:17px;fill:currentColor}

/* ═══════════════════════════════════════════════════════════════════
   ALT
   ═══════════════════════════════════════════════════════════════════ */
.alt{background:var(--koyu);color:#cdc5b3;margin-top:0;padding-top:46px}
.alt a:hover{color:#e8c98a}
.alt__ust{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:38px;
  border-bottom:1px solid #2e281f}
.alt h4{font:700 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:#e8c98a;margin-bottom:15px}
.alt ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px}
.alt p{font-size:15px;line-height:1.62;color:#a89f8d;max-width:40ch}
.alt__logo{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.alt__logo span:first-child{width:38px;height:38px;flex:none;background:var(--marka);color:#e8c98a;
  display:grid;place-items:center;font:400 19px/1 var(--serif)}
.alt__logo b{font:700 22px/1 var(--serif);letter-spacing:-.03em;color:#fff}
.alt__kredi{padding:20px 0 40px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font:500 12.5px var(--sans);color:#8d846f}
.alt__kredi a{color:#e8c98a;font-weight:600}

#yukari{position:fixed;inset-inline-end:22px;bottom:22px;width:46px;height:46px;
  border:1px solid var(--cizgi);background:var(--sayfa);color:var(--murekkep-2);cursor:pointer;
  z-index:150;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s}
#yukari[data-gor]{opacity:1;pointer-events:auto}
#yukari:hover{border-color:var(--marka);color:var(--marka)}
#yukari svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.cerez{position:fixed;inset-inline:0;bottom:0;z-index:160;background:var(--koyu);color:#ddd5c4;
  padding:15px 22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}
.cerez p{font-size:14.5px;max-width:60ch}
.cerez a{color:#e8c98a;text-decoration:underline}
.cerez .dg{display:flex;gap:8px;flex-wrap:wrap}
.dg button{min-height:42px;padding:10px 18px;cursor:pointer;font:600 13.5px var(--sans);
  border:1px solid #3d362b;background:transparent;color:#ddd5c4}
.dg .kabul{background:var(--vurgu);border-color:var(--vurgu);color:#14120f}
.dg button:hover{border-color:#e8c98a}

.sayfalama{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding-block:34px;
  border-top:1px solid var(--cizgi)}
.sayfalama a,.sayfalama span{min-width:42px;min-height:42px;display:grid;place-items:center;
  padding:0 12px;border:1px solid transparent;font:600 14.5px var(--sans);color:var(--soluk)}
.sayfalama a:hover{border-color:var(--cizgi);color:var(--marka)}
.sayfalama .simdiki{background:var(--marka);color:#fff}

/* eski sınıf adları — diğer sayfalar bozulmasın */
.kart{display:flex;flex-direction:column}
.kart h3{font:600 18px/1.3 var(--serif);letter-spacing:-.014em}
.kart p{font-size:16px;color:var(--soluk);margin-top:7px}
.kart__ic{display:flex;flex-direction:column}
.kart__kat{font:700 11px var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--vurgu);margin-bottom:6px}
.kart__meta{font:500 12.5px var(--sans);color:var(--cok-soluk);margin-top:8px;display:flex;gap:10px;flex-wrap:wrap}
.blk{padding-block:34px;border-top:1px solid var(--cizgi-guclu)}
.blk__bas{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.blk__bas h2{font:700 20px var(--serif);letter-spacing:-.02em}
.blk__bas .tum{margin-inline-start:auto;font:600 12.5px var(--sans);color:var(--soluk)}
.kutu__bas{font:700 13px var(--sans);letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:11px;border-bottom:2px solid var(--cizgi-guclu);margin-bottom:6px}
.yazar-sat{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--cizgi-2)}
.yazar-sat:last-child{border-bottom:0}
.yazar-sat img{width:46px;height:46px;flex:none;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.yazar-sat b{display:block;font:700 12.5px var(--sans);color:var(--soluk);letter-spacing:.04em;text-transform:uppercase}
.yazar-sat span{font:600 15.5px/1.38 var(--serif);display:block;margin-top:3px}
.sira-sat{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--cizgi-2);align-items:baseline}
.sira-sat:last-child{border-bottom:0}
.sira-sat i{font:700 15px/1 var(--serif);font-style:normal;color:var(--cizgi);width:18px;flex:none}
.sira-sat span{font:600 15.5px/1.4 var(--serif)}
.ayet{border-block:2px solid var(--cizgi-guclu);padding:22px 0}
.ayet__et{font:700 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--vurgu);margin-bottom:11px}
.ayet p{font:italic 400 19px/1.55 var(--serif)}
.ayet cite{display:block;margin-top:11px;font:600 12.5px var(--sans);font-style:normal;color:var(--soluk)}
.reklam{background:var(--sayfa-2);border:1px solid var(--cizgi);min-height:250px;display:grid;
  place-items:center;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cok-soluk)}
.izgara{display:grid;gap:26px}
.ana-izgara{grid-template-columns:minmax(0,1fr) 306px;gap:44px;align-items:start}
.yan{display:flex;flex-direction:column;gap:34px;position:sticky;top:70px}

/* ═══════════════════════════════════════════════════════════════════
   DUYARLI
   ═══════════════════════════════════════════════════════════════════ */
/* Eşik 1180→1020: yakınlaştırılmış / küçük pencerede de üç sütunlu
   gazete düzeni korunur (kullanıcı sol yığının inmesini istemedi). */
@media (max-width:1020px){
  .hero{grid-template-columns:minmax(0,1fr) 290px}
  .hero__sol{grid-column:1/-1;order:3;padding-inline-end:0;padding-top:24px;
    border-top:1px solid var(--cizgi);margin-top:24px}
  .hero__sol .yigin{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .hero__sol .yigin>*{padding:0 18px;border-bottom:0;border-inline-start:1px solid var(--cizgi)}
  .hero__sol .yigin>*:first-child{padding-inline-start:0;border-inline-start:0}
  .hero__orta{padding-inline-start:0;border-inline-start:0}
  .dortlu{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .dortlu>*:nth-child(odd){padding-inline-start:0;border-inline-start:0}
  .gorus-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .gorus-izgara>*:nth-child(odd){padding-inline-start:0;border-inline-start:0}
}

@media (max-width:900px){
  /* Kullanıcı isteği: mobilde HEM kaydırılabilir yatay menü HEM hamburger dursun */
  .hamburger{display:grid}
  .hero{grid-template-columns:1fr}
  .hero__orta{padding-inline:0;border-inline:0}
  .hero__sag{padding-inline-start:0;padding-top:26px;margin-top:26px;border-top:1px solid var(--cizgi)}
  .bolum-ikili,.video-izgara,.detay-izgara,.ana-izgara{grid-template-columns:1fr}
  .bolum-ikili__sol,.video-izgara__sol,.detay{padding-inline-end:0}
  .bolum-ikili__sag,.video-izgara__sag,.detay-yan{padding-inline-start:0;border-inline-start:0;
    padding-top:26px;margin-top:26px;border-top:1px solid var(--cizgi);position:static}
  .uclu{grid-template-columns:1fr;gap:0}
  .uclu>*{padding-inline:0;border-inline-start:0;padding-block:20px;border-top:1px solid var(--cizgi-2)}
  .uclu>*:first-child{padding-top:0;border-top:0}
  .alt__ust{grid-template-columns:1fr 1fr 1fr;gap:26px}
}

@media (max-width:640px){
  body{font-size:16.5px}
  .kap{padding-inline:16px}
  .hizmet__vakit{display:none}
  .mast .kap{min-height:64px}
  .logo__im{width:36px;height:36px;font-size:18px}
  .logo__ad{font-size:24px}
  .logo__alt{display:none}
  .abone,.mast__sag [data-ara-dugme]{display:none}
  .tabaka{border-inline:0}

  .hero{padding-block:20px 24px}
  .lider .dek{font-size:17px}
  .hero__sol .yigin{grid-template-columns:1fr}
  .hero__sol .yigin>*{padding:16px 0;border-inline-start:0;border-bottom:1px solid var(--cizgi-2)}
  .hero__sol .yigin>*:first-child{padding-top:0}
  .hero__sol .yigin>*:last-child{border-bottom:0}

  .dortlu,.gorus-izgara{grid-template-columns:1fr;gap:0}
  .dortlu>*,.gorus-izgara>*{padding:20px 0;border-inline-start:0;border-top:1px solid var(--cizgi-2)}
  .dortlu>*:first-child,.gorus-izgara>*:first-child{padding-top:0;border-top:0}

  .dosya__ic{padding:26px 20px}
  .detay__spot{font-size:18px}
  .govde{font-size:calc(17.5px * var(--yb,1))}
  .govde p:first-of-type::first-letter{font-size:3.1em}
  .govde figure.g-sol,.govde figure.g-sag{float:none;margin-inline:0;width:auto!important;max-width:100%!important}

  /* dokunma hedefleri ≥48 (kural 9) */
  .simge{width:48px;height:48px}
  .arac{min-height:48px;min-width:48px}
  .pay{width:48px;height:48px}
  .dg button{min-height:48px}
  #yukari{width:48px;height:48px;inset-inline-end:14px;bottom:14px}
  .menu__mini .simge{width:48px;height:48px}
  .manset__ok{width:48px;height:68px}
  .manset__dur{width:48px;height:48px}

  .alt__ust{grid-template-columns:1fr 1fr;gap:24px}   /* footer mobilde 2 blok (kural 5) */
  .alt__kredi{flex-direction:column;gap:8px;text-align:center;justify-content:center}
}

@media print{
  /* YALNIZ yazı yazdırılır (ydh hyazdir.php davranışı): çatı, menüler,
     yan sütunlar, yorumlar, ilgili haberler, reklamlar ve gezinme gizlenir */
  .hizmet,.mast,.menu,.sondakika,.detay-yan,.alt,#yukari,.cerez,.araclar,.paylas,.iz,.reklam,
  .kirinti,.perde,.cekmece,.atla,.etiketler,.bolum,.kenar,.kutu,.koyu-kusak,
  .reklam-yuva,.reklam-icerik,.mast__reklam,.yorumlar,.yorum-bolge,
  .daha-fazla-kap,.sayfa-baglari,.makale-kapak--yok{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .detay-izgara,.iki-sutun{display:block!important}
  .detay,.makale{max-width:none;padding-inline-end:0}
  .govde,.metin{font-size:12.5pt;line-height:1.65}
  a{color:#000!important;text-decoration:none}
  .detay h1,.mk-detay h1{font-size:22pt}
}

/* ═══════════ ÇİFT LOGO DÜZELTMESİ + REKLAM YUVALARI ═══════════
   ust.php iki logo basar (açık + koyu tema sürümü); görünürlük anahtarı
   BU kurallardır. Kural yazılmadığı için ikisi birden görünüyordu —
   ekran görüntüsündeki "ikinci İslam ve Hayat" buydu. */
.logo-im-koyu{display:none}
:root[data-tema="koyu"] .logo-im-acik{display:none}
:root[data-tema="koyu"] .logo-im-koyu{display:inline-block}

/* logo yanındaki üst banner alanı (panel › Reklamlar › ust_banner) */
.mast__reklam{flex:1 1 auto;min-width:0;display:flex;justify-content:center;
  align-items:center;padding-inline:20px}
.mast__reklam .reklam-yuva{display:block;max-width:728px;min-width:0}
.mast__reklam img{max-height:84px;width:auto;max-width:100%;display:block}
@media (max-width:900px){.mast__reklam{display:none}}

/* genel reklam yuvası — sayfa_ustu / alt_banner tam genişlikte ortalanır */
.reklam-yuva{display:block;text-align:center;min-width:0}
.reklam-yuva img{max-width:100%;height:auto;margin-inline:auto;display:inline-block}
body>.reklam-yuva{max-width:var(--en);margin:10px auto 0;padding-inline:22px}
/* haber gövdesine gömülen içerik-içi reklam */
.reklam-icerik{margin-block:1.5em;padding:12px 0;border-block:1px solid var(--cizgi-2);text-align:center}