/* ============================================================
   HURMİLLET — Dergi Kapağı (magazine cover)
   Sol: sabit dergi kapağı paneli (tüm sayfalar) • Orta: arka plan slaytı +
   dönen başlıklar (yalnız ana sayfa) • SON DAKİKA altı Piyasalar şeridi
   İç sayfalar .mag-sub gövdesiyle aynı dergi mantığında açılır
   Font: Rubik (başlık) + Roboto (gövde)
   ============================================================ */

/* ---------- 1. Temel değişkenler ---------- */
body.mag-home,
body.mag-sub{
  --mag-w:320px;
  --mg-ink:#0b0d12;
  --mg-ink-2:#12151d;
  --font-display:'Rubik','Roboto',Arial,sans-serif;
}
body.mag-home,body.mag-sub{background:var(--mg-ink)}

/* ---------- 2. SOL PANEL — sabit dergi kapağı (mobil: üst şerit) ---------- */
.mag-panel{
  position:fixed;top:0;bottom:0;left:0;width:var(--mag-w);z-index:1000;
  background:linear-gradient(168deg,var(--mg-ink-2) 0%,var(--mg-ink) 58%);
  color:#fff;display:none;
}
.mag-panel::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--primary),var(--primary-dark));
}
.mag-panel-in{display:flex;flex-direction:column;height:100%;padding:30px 24px 20px 30px;gap:20px;overflow-y:auto;scrollbar-width:none}
.mag-panel-in::-webkit-scrollbar{display:none}

.mag-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:9.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.mag-eyebrow::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.14)}

.mag-mast{flex:0 0 auto}
.mag-masthead{display:inline-block;margin-top:14px;max-width:100%}
.mag-masthead img{max-height:60px;width:auto;max-width:100%}
.mag-mast-title{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:38px;line-height:.98;letter-spacing:-.5px;color:#fff;
}
.mag-mast-title em{font-style:normal;color:var(--primary);letter-spacing:0;font-weight:900}
.mag-dateline{margin-top:13px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.74)}
.mag-issue{
  margin-top:9px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);
  /* Task 152 — TEK SATIR GARANTİSİ: sayılar büyüse bile alan adı alta düşmez.
     flex-wrap kaldırıldı; istatistik metni gerekirse harf aralığı/punto küçülür
     (main.js hmStatsFit) ve son çare '…' ile kırpılır; alan adı DAIMA tam görünür. */
  display:flex;justify-content:space-between;flex-wrap:nowrap;align-items:baseline;gap:0 10px;
  font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
/* Task 150/152 — canlı istatistik satırı: tek satır + sıkışınca daral */
.mag-issue #mag-stats{letter-spacing:.16em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.mag-issue #mag-stats b{font-variant-numeric:tabular-nums}
.mag-issue > span:last-child{flex:0 0 auto;white-space:nowrap}

.mag-burger{display:none} /* artık kullanılmıyor — menü yatay şeride taşındı */

/* Mobil menü düğmesi — yalnız ≤899px'te görünür (Task 56) */
.mag-navtoggle{display:none}

/* İçindekiler (dergi künyesi havası)
   v259 — KULLANICI TALEBİ: "geniş ekranda dergi kapağının alt kısmı boşalıyor"
   — kapak içeriği (masthat + içindekiler + arama + dip) uzun görüntü alanında
   yalnız üst kısmı dolduruyor, ©/barkod margin-top:auto ile en dibe yapışık
   kalıyor ama ARADA büyük ölü alan kalıyordu. İçindekiler artık kalan
   yüksekliği KENDİ ÇEKER (flex:1) ve ol listesi öğelerini (justify-content:
   space-evenly) kapak boyunca dengeli yayar — kapak her yükseklikte baştan
   dibe dolu görünür. Kısa pencerede min-height:auto (içerik minimumu)
   korunduğundan liste sıkışmaz, .mag-panel-in overflow-y:auto ile akar. */
.mag-toc{flex:1 1 auto;display:flex;flex-direction:column}
.mag-toc-title{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-head);font-size:10px;font-weight:800;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.mag-toc-title::before{content:"";width:18px;height:2px;background:var(--primary)}
.mag-toc ol{margin-top:4px;flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly}
.mag-toc li{border-bottom:1px solid rgba(255,255,255,.08)}
.mag-toc a{
  display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:10px 0;
}
.mag-toc i{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:15px;line-height:1.45;color:var(--primary);
}
.mag-toc span{
  font-family:var(--font-head);font-weight:600;font-size:12.5px;line-height:1.5;
  color:rgba(255,255,255,.82);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s var(--tr);
}
.mag-toc a:hover span{color:#fff}

/* ---------- Yatay bölüm menüsü — mag-site üstü şerit.
   Arkaplan BANDI YOKTUR: iç sayfalarda şerit sayfanın kendi zemininde,
   ANA SAYFADA (≥900px) kapak fotoğrafının ÜZERİNE bindirilir (position:absolute)
   — böylece menünün arkasında/altında siyah blok görünmez, fotoğraf akar.
   Cam zemin SON DAKİKA bandının kayan haber alanıyla AYNI: koyu mürekkep
   rgba(11,13,18,.55) — %55 opaklıkta ŞEFFAF, arkasındaki görüntü seçilir (Task 57).
   Öğeler sığmazsa ikinci satıra SARAR — taşma olmaz. ---------- */
.mag-hnav{background:none;padding:12px 0}
.mag-hnav-in{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:2px 4px;
  margin:0 22px;padding:4px 10px;
  background:rgba(11,13,18,.55);
  border:1px solid rgba(255,255,255,.22);
  border-radius:11px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mag-hnav a{
  white-space:nowrap;padding:10px 12px;border-radius:8px;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:background .2s var(--tr),color .2s var(--tr);
}
.mag-hnav a:hover{background:rgba(255,255,255,.18);color:#fff}
.mag-hnav a.active{background:#fff;color:var(--primary);text-shadow:none}

/* ============================================================
   İÇ SAYFA ÜST BANDI — Task 61 (mag-sub: tarif, tarifler, haber
   detay, ansiklopedi…). Eskiden menü şeffaf zeminde yüzen ince
   bir hapdı → iç sayfaların tepesi zayıf/kalitesiz duruyordu.
   Artık TAM GENİŞLİK yapısal koyu bant: kırmızı üst vurgu çizgisi,
   cam menü ve sayfa kayınca ÜSTTE YAPIŞAN menü (Task 63: marka
   çipi kaldırıldı, gölge yumuşatıldı — bant ile içerik arası sıkı).
   Ana sayfa/kategori (sahneli) düzeni ETKİLENMEZ — orada menü
   fotoğrafın üstünde yüzen hap olarak kalır.
   ---------- */
@media(min-width:900px){
  body.mag-sub .mag-hnav{
    position:sticky;top:0;z-index:60;
    padding:10px 0 12px;
    background:linear-gradient(168deg,var(--mg-ink-2) 0%,var(--mg-ink) 62%);
    border-bottom:1px solid rgba(255,255,255,.14);
    box-shadow:0 6px 16px rgba(0,0,0,.18);
  }
  body.mag-sub .mag-hnav::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--primary-dark),var(--primary) 52%,rgba(216,25,32,0));
  }
  body.mag-sub .mag-hnav-in{
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.16);
  }
}
/* Task 63: bant ile içerik arasındaki "garip boşluk" kapatıldı.
   Eskiden: bant altı + .mg-inner 34px + .rec-detail 34px = ~68px boşluk
   (tarif/ansiklopedi), tarifler listesinde +.mg-catsec 38px = ~72px.
   Artık iç sayfalarda üst boşluk sıkı bir ritimde; tarifler LİSTESİ'nde
   (mag-tariflist) koyu bant doğrudan koyu bölümle BİRLEŞİR — arada beyaz
   şerit kalmaz. */
@media(min-width:900px){
  body.mag-sub .mg-inner{padding-top:20px}
  body.mag-sub .rec-detail{padding-top:20px}
  body.mag-sub:not(.mag-catpage) .mg-catsec{padding-top:22px}
  body.mag-tariflist .mg-inner{padding-top:0}
}
@media(max-width:899px){
  body.mag-sub .rec-detail{padding-top:18px}
  body.mag-tariflist .mg-inner{padding-top:0}
}

/* ============================================================
   FOOTER ÜSTÜ BOŞLUKLAR — Task 64. Kullanıcı raporu: tarifler listesi
   ve tarif detayında footer'ın HEMEN ÜSTÜNDE gereksiz boşluklar.
   Kök neden: .mg-inner alt dolgusu 72px (mobil 50px) + .rec-detail alt
   dolgusu 60px + .hm-footer margin-top:44px ≈ 116-176px beyaz ölü alan.
   Yeni ritim: genel iç sayfada 30px; detay sayfaları KENDİ alt dolgusuyla
   nefes alır (46px); koyu bölümle biten sayfalarda (tarifler listesi,
   ansiklopedi) koyu bölüm footer'a DOĞRUDAN yapışır; footer margin'i
   magazin sayfalarında sıfır — beyaz şerit kalmaz.
   ---------- */
body.mag-sub .mg-inner{padding-bottom:30px}
body.mag-tariflist .mg-inner,
body.mag-encpage .mg-inner,
body.mag-recdetail .mg-inner{padding-bottom:0}
body.mag-sub .rec-detail{padding-bottom:46px}
body.mag-sub .hm-footer{margin-top:0}
@media(max-width:899px){
  body.mag-sub .mg-inner{padding-bottom:22px}
  body.mag-sub .rec-detail{padding-bottom:36px}
}

/* ≥900px ANA SAYFA: menü şeridi Task 150'de KALDIRILDI → SON DAKİKA +
   Piyasalar için ayrılmış 76/142px üst boşluk artık gereksizdi (Task 152:
   yönetici "üstü boş duruyor" arızası bildirdi). Bantlar eski sıkı konumuna
   (20px/86px) döndü; artık sahne tepesinde boşluk oluşmaz. */
@media(min-width:900px){
  body.mag-home .mag-hnav,body.mag-catpage .mag-hnav{position:absolute;top:0;left:0;right:0;z-index:6;padding:14px 22px 0}
  body.mag-home .mag-hnav-in,body.mag-catpage .mag-hnav-in{margin:0}
}

/* Panel arama */
.mag-search{
  display:flex;align-items:stretch;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;overflow:hidden;
}
.mag-search input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  padding:11px 14px;font-size:12.5px;
}
.mag-search input::placeholder{color:rgba(255,255,255,.38)}
.mag-search button{
  width:42px;border:0;border-left:1px solid rgba(255,255,255,.12);
  background:none;color:#fff;display:grid;place-items:center;transition:.25s var(--tr);
}
.mag-search button:hover{background:var(--primary)}

/* Panel altı */
.mag-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:12px}
.mag-userlinks{display:flex;gap:7px;flex-wrap:wrap}
.mag-userlinks a{
  font-size:11.5px;font-weight:700;color:rgba(255,255,255,.78);
  padding:7px 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  transition:.25s var(--tr);
}
.mag-userlinks a:hover{color:#fff;border-color:rgba(255,255,255,.55)}
.mag-userlinks .mag-join{background:var(--primary);border-color:var(--primary);color:#fff}
.mag-userlinks .mag-join:hover{background:var(--primary-dark)}
.mag-social{display:flex;gap:13px;flex-wrap:wrap}
.mag-social a{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.42);transition:.25s var(--tr);
}
.mag-social a:hover{color:#fff}
.mag-copy{font-size:10.5px;color:rgba(255,255,255,.32)}

/* ---------- 3. KAPAK SAHNESİ (mobil: üstte tek blok) ---------- */
.mag-site{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative}
/* Ana sayfada footer, koyu kapak sahnesine YAPIŞIK durmalı: genel .hm-footer
   margin-top:44px beyaz gövde arka planıyla manşet ile footer arasında beyaz
   boşluk şeridi oluşturuyordu — ana sayfada sıfırlanır. */
body.mag-home .hm-footer,body.mag-catpage .hm-footer{margin-top:0}
.mg-cover{flex:1;display:flex;flex-direction:column;background:var(--mg-ink)}
.mg-stage{
  position:relative;overflow:hidden;background:var(--mg-ink);
  /* Task 150 — yükseklik panelden --msh-mo-h ile yönetilir (mobil <1100px);
     değişken yoksa eski davranış aynen: ekranın %70'i, en az 400px */
  height:var(--msh-mo-h,70vh);height:var(--msh-mo-h,70dvh);
  min-height:var(--msh-mo-min,400px);
}
.mg-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease;z-index:0}
.mg-slide.on{opacity:1;z-index:1}
.mg-slide img{width:100%;height:100%;object-fit:cover;display:block}
.mg-slide.on img{animation:mgKB 8.5s cubic-bezier(.2,.5,.4,1) forwards}
.mg-slide.noimg,.mg-slide.noimg img{
  background:radial-gradient(120% 120% at 20% 15%,#1c2230 0%,var(--mg-ink) 62%);
}
/* Task 121 — görselsiz manşet slaytı boş görünmesin: filigran TİPOGRAFİK yazı.
   Task 184 — içerik kategori adından SABİT 'Trend Haber'e çevrildi ve Daha BÜYÜK
   punto (34/6.5vw/86 → 44/9vw/118); görsel üretilmez/istenmez; yönetici dilediğinde
   panelden haberin görselini ekler, filigran kendiliğinden kalkar. */
.mg-noimg-mark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:0;pointer-events:none;padding:0 6%;text-align:center;
  font-family:var(--font-display);font-size:clamp(44px,9vw,118px);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.05;
  color:rgba(255,255,255,.06);user-select:none;-webkit-user-select:none;
}
@keyframes mgKB{from{transform:scale(1.05)}to{transform:scale(1.15) translate(-1.2%,-1%)}}

/* Task 93 — Manşet video kesit slaydı: poster görselin üstünde sessiz oynayan kesit.
   mp4 doğrudan <video object-fit:cover>; YouTube iframe'i JS ile cover boyutlanır
   (.mg-yt taşmayı kırpar → siyah bant yok), tıklamalar manşete geçer. */
.mg-video,.mg-yt{position:absolute;inset:0;z-index:1}
.mg-video{width:100%;height:100%;object-fit:cover;background:var(--mg-ink)}
.mg-yt{overflow:hidden;pointer-events:none}
.mg-yt iframe{pointer-events:none}
/* VIDEO rozeti — başlık şeridinde (mg-kicker) */
.mg-vb{
  font-style:normal;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  padding:5px 11px;border-radius:6px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.mg-vb::before{
  content:'';width:0;height:0;
  border-left:7px solid var(--primary);
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
}
@media(prefers-reduced-motion:reduce){.mg-video,.mg-yt{display:none}/* poster kalır */}

.mg-shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(9,11,16,.44) 0%,rgba(9,11,16,0) 26%,rgba(9,11,16,0) 52%,rgba(9,11,16,.88) 100%),
    linear-gradient(80deg,rgba(9,11,16,.8) 0%,rgba(9,11,16,.4) 44%,rgba(9,11,16,.06) 76%);
}

/* Son dakika bantı (saatte cam yüzey) — Piyasalar şeridiyle AYNI genişlikte:
   max-width yok, aynı sol/sağ kenar boşluklarıyla tam şerit kaplar */
.mg-breaking{
  position:absolute;top:20px;left:22px;right:22px;z-index:4;
  display:flex;align-items:stretch;
  background:rgba(11,13,18,.55);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mg-breaking .tk-label{
  background:var(--primary);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;padding:0 14px;white-space:nowrap;
}
.mg-breaking .tk-track{background:transparent;height:44px;min-width:0}
/* Task 150 — bant başlıkları tek satırda tutulur: taşan metin '…' ile kesilir
   (PHP kısaltması 64 karakter + bu CSS yedeği; mobilde tam görünürlük) */
.mg-breaking .tk-track a,.mg-breaking .tk-track span{
  color:#f2f4f8;font-size:13px;line-height:44px;padding-left:16px;padding-right:16px;
  max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;
}
.mg-breaking .tk-track a:hover{color:#fff}

/* Başlık blokları — kapak manşeti */
/* v215 — başlık bloğu sahneye DİKEY ORTALANIR (top:50% + translateY):
   alan yüksekliği azaltıldığında yukarı yapışmaz, her yükseklikte ortada.
   Sağ boşluk, dikey kontrol kümesinin (oklar + sayaç) genişliğini aşar —
   başlık/özet okların altına girmez. */
.mg-heads{position:absolute;left:18px;right:76px;top:50%;bottom:auto;transform:translateY(-50%);z-index:3;max-width:780px}/* v250 — sola hizalama: bölüm başlıkları (.hsec-head 18px) hattı */
.mg-head{display:none}
.mg-head.on{display:block}
.mg-head.on > *{animation:mgHeadIn .65s cubic-bezier(.2,.7,.3,1) backwards}
.mg-head.on > :nth-child(1){animation-delay:.05s}
.mg-head.on > :nth-child(2){animation-delay:.16s}
.mg-head.on > :nth-child(3){animation-delay:.27s}
.mg-head.on > :nth-child(4){animation-delay:.38s}
@keyframes mgHeadIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.mg-kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mg-cat{
  display:inline-block;background:var(--msh-mo-kc,var(--primary));color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 11px;border-radius:6px;
}
.mg-kicker time{font-size:12px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.mg-title{
  /* Task 150 — punto/kalınlık/renk/gölge panelden --msh-mo-* ile yönetilir */
  font-family:var(--font-display);font-weight:var(--msh-mo-tw,800);
  font-size:var(--msh-mo-ts,clamp(26px,4.4vw,52px));line-height:1.08;letter-spacing:-.4px;
  color:var(--msh-mo-tc,#fff);text-shadow:var(--msh-mo-tsh,none);text-wrap:balance;
  /* Task 119 — PHP kısaltmasına (hm_headline 90 harf) ikinci katman: en fazla
     3 satır; uzun başlık sahne yapısını asla itemez. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mg-title a{color:inherit;transition:.25s var(--tr)}
.mg-title a:hover{text-decoration:underline;text-decoration-color:var(--primary);text-decoration-thickness:3px;text-underline-offset:7px}
/* v218 — .mg-spot (başlık altı özet) KALDIRILDI: markup + tüm kuralları
   silindi; manşette yalnız etiket/saat + başlık kalır */
.mg-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:19px;
  padding:11px 22px;border:1px solid rgba(255,255,255,.34);border-radius:999px;
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.03em;
  background:rgba(11,13,18,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:.3s var(--tr);
}
.mg-cta span{transition:transform .3s var(--tr)}
.mg-cta:hover{background:var(--primary);border-color:var(--primary)}
.mg-cta:hover span{transform:translateX(4px)}

/* — Task 176 — Video ÖNDE manşet slaytı (mv_front = 'video') —
 * Panelde habere video seçip "Video önde" derseniz manşette başlık/spot/
 * kategori GÖSTERİLMEZ; yalnız video oynar, kesit bitmeye 8 sn kala
 * "Habere Git" bağlantısı belirir. JS videoyu oynatabildiğinde .video-on
 * ekler — oynatamazsa (reduced-motion, hata, JS kapalı) başlık aynen görünür. */
.mg-head.mv-front-head.video-on .mg-kicker,
.mg-head.mv-front-head.video-on .mg-title{display:none}
.mg-head.mv-front-head .mg-vlink{opacity:1;pointer-events:auto;transform:none}
.mg-head.mv-front-head.video-on .mg-vlink{
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .7s var(--tr,.2s,.7,.3,1),transform .7s var(--tr,.2s,.7,.3,1);
}
.mg-head.mv-front-head.video-on.vlink-on .mg-vlink{opacity:1;pointer-events:auto;transform:none}
.mg-head.mv-front-head.video-on.vlink-on .mg-vlink:hover{background:var(--primary);border-color:var(--primary)}

/* Slayt kontrolleri — v214: sahnenin İÇİNDE, sağ kenarda DİKEY küme
   (önceki ↑ / numaralı sayaç / sonraki ↓). Eski sahne-altı şerit, ilerleme
   çubuğu ve .mg-arrows sarmalayıcısı kalktı. Panel > Ana Sayfa Bölümleri
   'ctrl' ayarı (.mg-ctrlbar{display:none!important}) aynen çalışır. */
.mg-ctrlbar{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0;margin:0;min-height:0;color:#fff;background:none;border:0;
}
.mg-count{display:flex;align-items:baseline;gap:3px;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.mg-count b{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.mg-count span{font-size:11px;font-weight:600;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.mg-arrow{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(11,13,18,.44);color:#fff;font-size:16px;line-height:1;
  display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:.25s var(--tr);
}
.mg-arrow:hover{background:var(--primary);border-color:var(--primary)}

/* — v214 — MANŞET IZGARASI + SAĞ KOLON —
   Sol kolon: sahne (kontroller içeride, sağda dikey) (%70).
   Sağ kolon (.mg-tvcol, yalnız ana sayfada): Video Haber dönen alanı —
   ≥1100px sağ kolonda (%30-35), <1100px manşetin ALTINDA tam genişlik (v219).
   (v213: HÜR TV ekranı kaldırıldı; v214: kontroller sahne içine alındı.)
   İçerik yoksa .mg-solo tek kolona döner. */
.mg-grid{display:grid;grid-template-columns:1fr;min-width:0}
.mg-main{display:flex;flex-direction:column;min-width:0}
/* v219 — KULLANICI TALEBİ: Video bölümü <1100px'te artık GİZLENMEZ; manşetin
   ALTINDA tam genişlik akar (masaüstü ≥1100px sağ kolon kuralı aynen geçerli.
   Bölüm yalnız ana sayfada basılır — index.php case 'kapak' 'tv' => true) */
.mg-tvcol{display:block;margin:16px 0 0;padding:0 12px;min-width:0}
/* döngü geçişi (Videolar kartı — v213: TV ekranı kalktı, kural kart için) */
@keyframes msSwap{from{opacity:.22;transform:translateY(5px)}to{opacity:1;transform:none}}
.ms-swap{animation:msSwap .4s var(--tr,.2s,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.ms-swap{animation:none}}
/* Video Haber dönen alanı — v214: başlık görselin ÜZERİNDE (alt gradyan
   bant), numaralı oklar görselin alt-sağında YATAY (← 01/12 →); sayaç
   başlıkta değil oklarla birlikte. Kart kolon içinde dikey ortalanır. */
/* v216 — border-top GRİ ÇİZGİ KALDIRILMIŞTI (kullanıcı: "Video Haber
   başlığının üzerindeki gereksiz gri çizgi") */
/* v217 — BAŞLIK TAMAMEN KALDIRILDI (kullanıcı: "üstündeki Video Haber
   başlığını kaldıralım"): h3.ms-videos-h + kuralları silindi; kart kolon
   içinde margin:auto ile tam DİKEY ORTALANIR — üstte 16px dolgu kalktı */
.ms-videos{margin:auto 0;padding:0}
.ms-videos .mv-card{width:100%}
/* v254 — KULLANICI TALEBİ: "videolar bölümünün kenar kıvrımlarını kaldırıp
 * düz yani keskin hatlar yapalım" → Video Haber kartının köşe yumuşatması
 * (12px) KALDIRILDI — mini manşet (v253) gibi KESKİN hat. */
.ms-videos .mv-thumb{border-radius:0}
/* v216 — video başlığı TEK SATIR + '…': uzun başlıklar görseli kapatıp
   tasarımı bozuyordu; satır sayısı sınırlandı, taşma üç noktayla kırpılır.
   v222 — KULLANICI TALEBİ: başlık BÜYÜTÜLDÜ (12.5px → 16px); sağ koridor
   100px'ten 60px'e indi — oklar artık sağ kenarda DİKEY küme (aşağıda),
   başlık yalnız o dar koridordan kaçınır, genişçe yazılır. */
.ms-videos .mv-name{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:26px 60px 10px 12px;
  background:linear-gradient(180deg,rgba(11,13,18,0) 0%,rgba(11,13,18,.9) 72%);
  font-family:var(--font-head);font-weight:600;font-size:16px;line-height:1.4;
  color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-radius:0; /* v254 — alt köşe yumuşatması da kalktı (keskin hat) */
  transition:color .2s var(--tr);
}
.ms-videos .mv-card:hover .mv-name{color:#fff}
/* v222 — numaralı oklar: manşet kontrol kümesindeki gibi SAĞ KENARDA DİKEY
   küme — önceki (yukarı) / sayaç / sonraki (aşağı), dikey ortalı. Eski
   alt-sağ YATAY küme (← 01/12 →) kalktı; cam hap görünümü aynen korundu. */
.ms-vid-ctrl{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:rgba(11,13,18,.62);border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:3px 2px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ms-vid-btn{
  width:24px;height:24px;border-radius:6px;border:0;background:none;color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .15s var(--tr);
}
.ms-vid-btn:hover{background:rgba(216,25,32,.85)}
.ms-vid-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.ms-vid-n{font-size:10.5px;font-weight:800;color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums;letter-spacing:.04em;padding:0 3px;min-width:36px;text-align:center}

/* Haber yoksa */
.mg-nocover{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;padding:40px;color:#fff}
.mg-nocover h2{font-family:var(--font-display);font-weight:800;font-size:32px;margin:14px 0 8px}
.mg-nocover p{color:rgba(255,255,255,.65)}

/* ---------- 4. PİYASALAR ŞERİDİ — SON DAKİKA bandının hemen altında, başlıksız cam çipler ---------- */
.mg-markets{
  position:absolute;top:86px;left:22px;right:22px;z-index:4;
  display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;
}
.mg-markets--solo{top:20px}
.mg-mkt{
  display:flex;align-items:center;gap:9px;
  height:40px;padding:0 14px;border-radius:10px;
  background:rgba(11,13,18,.55);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;white-space:nowrap;transition:.25s var(--tr);
}
.mg-mkt:hover{border-color:rgba(255,255,255,.34)}
.mg-mkt b{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.mg-mkt span{font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mg-mkt i{font-style:normal;font-weight:800;font-size:11px;font-variant-numeric:tabular-nums}
.mg-mkt i.up{color:#57d98d}
.mg-mkt i.down{color:#ff8080}

/* İç sayfa gövdesi — dergi mantığıyla açılan her sayfanın beyaz içeriği */
.mg-inner{background:var(--bg);min-height:100vh;min-height:100dvh;padding:34px 0 72px}

/* ============================================================
   ≥900px — panel içi menü ızgarası (yukarıda), diğerleri mobilde kalır
   ============================================================ */

/* ============================================================
   ≥1100px — GERÇEK DERGİ MODU: sol sabit kapak + tam genişlik sahne.
   Sahne ilk açılışta ekranı baştan aşağıya kaplar; altında yalnız footer var.
   ============================================================ */
@media(min-width:1100px){
  body.mag-home,
  body.mag-sub{
    padding-left:var(--mag-w);
    background:var(--bg);
  }
  .mag-panel{display:block}
  /* Task 133 — alt sabit RADYO oynatıcı bandı açıkken (body.hm-radyo-on)
     panel alttan 58px yukarı çekilir: bandın sol başındaki çalma düğmeleri
     "Giriş Yap / Üye Ol / ©" bloğunun ALTINA girmesin, ikisi de görünsün. */
  body.hm-radyo-on .mag-panel{bottom:58px}
  .mg-cover{
    height:auto;
  }
  /* Task 150 — GENİŞ EKRAN (PC) manşet ayarları: panelden --msh-pc-* ile.
     v259 — SAHNE ARTIK SATIRI DOLDURUR: eski height:var(--msh-pc-h,100vh)
     sabit boyuydu; ızgara satırı panelde küçük bir px verilmişse (ör. 260px)
     KİLİTLENİYOR ve sağ kolon içeriği (video + 2 mini manşet) satıra sığmayıp
     overflow:hidden ile KIRPILIYORDU ("mini manşetin yarısından çoğu
     görünmüyor"). Sahne artık flex:1 1 auto — ızgara satırı ne kadarsa o
     kadar uzar; poster object-fit:cover ile tam doldurur, sahne altında asla
     boşluk kalmaz (v255 kuralı korunur). */
  .mg-stage{flex:1 1 auto;height:auto;min-height:var(--msh-pc-min,514px)}

  body.mag-home .mag-hnav,body.mag-catpage .mag-hnav{padding-left:46px;padding-right:22px}
  /* Task 152 — menü kalkınca 76/142px üst boşluk da kalktı: bantlar sıkı konum,
     yalnız sol hizalama (mg-heads ile aynı 46px çizgisi) korunur */
  body.mag-home .mg-breaking,body.mag-catpage .mg-breaking{left:46px}
  body.mag-home .mg-markets,body.mag-catpage .mg-markets{left:46px}

  /* v215 — başlık sağı: dikey kontrol kümesinden (≈70px) genişçe kaçınır; bottom KALKTI (ortalanır)
     v250 — KULLANICI TALEBİ: "manşet başlığını üstündeki kategoriyi bölüm
     başlıklarına hizalayalım, yani sola doğru kaydıralım" → sol kenar 46px'ten
     18px'e çekildi — .hsec-title ile AYNI çizgi (kapak ve standart tasarımda
     .mg-cover ile .hsec aynı soldan başladığından tek değer iki kipte de birebir
     hizalar). Sahne içi mg-breaking/mg-markets bantları 46px'te kalır. */
  .mg-heads{left:18px;right:84px;max-width:820px}
  /* Task 150 — PC başlık/etiket ayarları (panelden); v218: özet satırı (mg-spot) kalktı */
  .mg-title{font-size:var(--msh-pc-ts,clamp(30px,3.2vw,54px));font-weight:var(--msh-pc-tw,800);color:var(--msh-pc-tc,#fff);text-shadow:var(--msh-pc-tsh,none)}
  .mg-cat{background:var(--msh-pc-kc,var(--primary))}
  /* v216 — MANŞET IZGARASI: sol %62 + sağ %38. v216'da 65/35 idi; v252'de
     kullanıcı "video, reklam ve mini manşet bölümlerini genişletelim, kenarları
     fazla boş kalıyor" dedi → yan kolon %38'e genişletildi.
     MANUEL AYAR: aşağıdaki 62/38 sayılarını değiştirin — 1. sayı manşet
     genişliği, 2. sayı yan bölümler kolonu (ör. 60/40). */
  .mg-grid{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
  .mg-grid.mg-solo{grid-template-columns:1fr}
  /* v258 — EKRAN GENİŞLEDİKÇE KAPAK BÖLÜMÜ GENİŞLER (kullanıcı talebi:
     "ekran genişledikçe dergi kapağının bulunduğu bölüm genişlesin"):
     geniş ekranda manşet sahnesi daha fazla pay alır, yan kolon daralır —
     video kartı ve mini manşet kartları aşırı genişleyip fotoğrafı dar bir
     banda sıkıştırmaz. 1100-1599px arası (normal ekranlar) 62/38 ile aynen
     kalır; .mg-solo (tek kolon) etkilenmez. */
  @media(min-width:1600px){
    .mg-grid:not(.mg-solo){grid-template-columns:minmax(0,66fr) minmax(0,34fr)}
  }
  @media(min-width:1920px){
    .mg-grid:not(.mg-solo){grid-template-columns:minmax(0,70fr) minmax(0,30fr)}
  }
  @media(min-width:2560px){
    .mg-grid:not(.mg-solo){grid-template-columns:minmax(0,73fr) minmax(0,27fr)}
  }
  .mg-tvcol{
    display:flex;flex-direction:column;gap:18px;min-width:0;
    /* v253 — KULLANICI TALEBİ: "videoların ve mini manşetlerin olduğu bölümün
     * üst kısmı yani son dakika bandıyla arasında sanki boşluk varmış gibi
     * ayrık duruyor. boşluk varsa kaldıralım. yoksa o aralığı bir şekilde
     * kapatalım." Ölçüm (v253 probe): kolon, manşetin 16px ALTINDA başlıyordu
     * (eski margin:16px 0 0 kalıntısı) + üst dolgu 24px → bandın altında
     * ~44px ölü alan; kart banda yapışık değildi. Kolon artık sahneyle AYNI
     * üst çizgiden başlar (margin:0) ve üst dolgusuz açılır (üst 0, yan 10,
     * alt 12) — video kartı bandın HEMEN ALTINDA, manşetle tek hat. */
    margin:0;
    padding:0 10px 12px;
    border-left:1px solid rgba(255,255,255,.07);
    background:linear-gradient(165deg,#0e1219 0%,#0b0e14 74%);
  }
  /* v255 — KULLANICI TALEBİ: "mini manşeti büyük manşetin alt kısmına
     ayarlamaya çalışıyorum. fakat ne zaman eşitlemeye yakın olsun
     manşetlerin alt kısmında yeni bir boşluk oluşuyor" — KÖK NEDEN: yan
     kolon içeriği sahne yüksekliğini 1-2px geçince ızgara satırı da
     büyüyor, büyük manşetin altı açık kalıyordu. v255'in çözümü satırı
     kilitlemekti (taşan kısım kırpılır); v259'da kilit TABANA dönüştü ve
     sahne satırı doldurur — eşitleme artık otomatik: son kart sahne dibiyle
     birebir kapanır, ne taşma ne boşluk kalır (aşağıdaki v259 notu). */
  /* v259 — SATIR TABAN SEMANTİĞİ: --msh-pc-h ARTIK TAVAN DEĞİL TABAN.
     Eski minmax(min,var(--msh-pc-h)) satırı panel px'ine KİLİTLİYORDU; kolon
     içeriği (16:9 video + 2×min 150px kart + boşluklar ≈ 530px) 260px'lik
     satıra sığamayıp kırpılıyordu ve v258 kolon bütçesi de min-height
     tabanları yüzünden bu durumda hiçbir şey değiştirmiyordu (kullanıcının
     "değişen bir şey olmadı" sızıntısının kökü).
     1fr TAVANI: .mg-cover flex:1 ile görüntü alanı artığınıda satır da
     kaplaçla birlikte büyür — sahne/kolon/bölüm dibi TEK ÇİZGİ olur (kapak
     altındaki küçük boşluk DAİMA biter; kullanıcının 2. talebi). Panel px
     vermişse satır o px'ten AŞAĞI inmez (taban), içerik çoksa YUKARI büyür.
     NOT: .mg-tvcol .yanhaber flex-basis'i auto'dur (aşağıda) — min 150px
     tabanları satır ölçüsüne KATILIR; 1fr/basis:0 kombinasyonunda kartlar
     satır ölçüsüne görünmez olacağından satır hiç büyümezdi. */
  .mg-grid{grid-template-rows:minmax(var(--msh-pc-h,100vh),1fr)}
  .mg-cover .mg-grid{flex:1 1 auto}
  .mg-tvcol{min-height:0;overflow:hidden;padding-bottom:0}
  /* v258 — KOLON BÜTÇESİ (kullanıcı talebi: "geniş ekranda dergi kapağının
     alt kısmı boşalıyor. mini manşetin yarısından çoğu görünmüyor" +
     "normal ekranda kapağın altında küçük bir boşluk var. o boşluğu
     kapatalım"). KÖK NEDEN: sağ kolon içeriği sahne yüksekliğine bağlı
     değildi — 16:9 video kartı kolon genişliğiyle uzuyor (2560px'te 460px),
     mini manşetler sabit 236px kalıyordu; kolon dibinde normal ekranda
     küçük, geniş ekranda ~440px'e çıkan ÖLÜ KOYU ŞERİT kalıyordu, kolon
     taşınca da mini manşet kırpılıyordu. ARTIK KOLON KENDİNİ DENGELER:
     mini manşet bölümleri kalan yüksekliği EŞİT paylaşır — son kart
     sahnenin alt kenarına birebir kapanır (şerit asla kalmaz), taşma
     olmaz; kart yükseklikleri kolon daraldıkça kendiliğinden küçülür
     (fotoğraf daha az kırpılır). yh-fit ve elle px yükseklik aynen sayılır:
     px verilmiş kart sabit kalır, kalan boşluğu kardeş mini manşet doldurur.
     v259 — flex-basis 0→auto: taban yükseklikler (min 150px / panel px)
     satır ölçüsüne katılır; basis:0 satır ölçüsünde kartları GÖRMEZ ve
     satır içerik kadar büyümezdi. */
  .mg-tvcol .yanhaber{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
  .mg-tvcol .yanhaber .hsec-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;max-height:none}
  .mg-tvcol .yanhaber .yh-rot{flex:1 1 auto;height:auto;min-height:150px}
  .mg-tvcol .yanhaber .yh-rot[style]{flex:0 0 auto}/* panelde sabit px var: kart boyu korunur */
  .mg-tvcol .yanhaber:has(.yh-rot[style]){flex:0 0 auto}/* px'li kartın bölümü uzamaz (:has olmayan tarayıcıda bölüm uzar ama kart boyu yine korunur) */
  /* video kartı tavanı: çok geniş kolonda 16:9 kart sahne yüksekliğini
     yutmasın; görsel object-fit:cover ile güvenle kırpılır */
  .mg-tvcol .mv-thumb{max-height:44vh}
}

@media(min-width:1280px){
  body.mag-home,body.mag-sub{--mag-w:352px}
  .mag-panel-in{padding:34px 26px 22px 32px}
  .mag-mast-title{font-size:42px}
}

/* ============================================================
   ≤1099px — panel üst şeride döner (dergi kapağı kompakt)
   ============================================================ */
@media(max-width:1099px){
  .mag-panel{
    position:static;width:auto;display:block;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mag-panel::before{
    left:0;right:0;bottom:auto;top:0;width:100%;height:4px;
    background:linear-gradient(90deg,var(--primary-dark),var(--primary));
  }
  .mag-panel-in{padding:20px 18px 14px;gap:14px;overflow:visible;height:auto}
  .mag-masthead{margin-top:10px}
  .mag-mast-title{font-size:29px}
  .mag-dateline{margin-top:7px;font-size:11.5px}
  .mag-issue{display:none}
  .mag-toc,.mag-search,.mag-social,.mag-copy{display:none}
  /* v188 — misafirde mag-foot tamamen boş (Giriş/Üye Ol kalktı): çizgi + boşluk kalıntısı olmasın */
  .mag-foot{margin-top:0;padding:0;border:0}
  .mag-userlinks a{padding:6px 11px;font-size:11px}
  /* v214 — kontrol kümesi sahne içinde sağ kenarda dikey; TV/video kolonu gizli.
     v215 — başlık sağ boşluğu kümeden kaçınır (ortalamadan) */
  .mg-heads{right:76px}
  .mg-markets{left:22px;top:86px}
  /* v220 — KULLANICI TALEBİ: mobilde (<1100px) Video bölümü (.mg-tvcol)
     altındaki bölümlere YAPIŞMASIN — manşet tarafındaki 16px boşluğun
     aynısı altına da konur (simetrik nefes payı). Kural YALNIZ ≤1099px'te:
     ≥1100px PC'de kolon ızgarada sahnenin YANINDA yaşar; orada alt boşluk
     ızgara satırını şişirip kapağın altında çürük boşluk bırakırdı.
     Not: stüdyo bölüm arası boşluğu (.hm-secw + .hm-secw) bundan bağımsız
     çalışmayı sürdürür — bu kural yalnız kapak (Video) ile sonraki ilk
     bölüm ARASINDAKİ boşluğu garanti eder. */
  .mg-tvcol{margin-bottom:16px}
  .mg-inner{padding:22px 0 50px}
}

/* v250 — 560-759px arası: .hsec-head sol dolgusu 14px (≤759 kuralı); manşet
 * başlığı da aynı hatta. (≤560 kuralı aynı değeri zaten verir.) */
@media(max-width:759px){
  .mg-heads{left:14px}
}

/* ============================================================
   ≤899px — MOBİL ÜST BAR (Task 56): TEK SIRA
   v219 — KULLANICI TALEBİ: mast 3 satırlık künye oldu — üstte "Trend
   Haberler Bloğu" tam genişlik şerit, ortada logo solda + tarih (mag-
   dateline, örn. "Perşembe, 15 Ekim 2026") SAĞA YASLI, altında canlı
   istatistik satırı ("Bugün X giriş · Y gösterim") — masaüstü sol
   paneldeki sıralamanın aynısı. (v188: misafirde üyelik düğmeleri yok;
   oturum açmış üyede ad/Çıkış foot hücresinde kalır.) Altında ince çizgi
   + Menü düğmesi — bölümler düğmenin altında koyu zincir liste açılır.
   Masaüstü (≥900px) sol panel + yüzen şerit aynen korunur.
   ============================================================ */
@media(max-width:899px){
  .mag-panel{position:relative}
  .mag-panel-in{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "mast foot"
      "toggle toggle";
    align-items:center;gap:0 12px;
    padding:12px 16px 0;
  }
  /* 1. satır: künye bloğu solda (3 satır), üyelik düğmeleri sağda */
  .mag-mast{grid-area:mast;margin:0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
  .mag-eyebrow{display:flex;width:100%;margin:0 0 9px;font-size:10px}
  .mag-masthead{margin-top:0}
  .mag-masthead img{max-height:38px;width:auto;max-width:min(56vw,250px)}
  .mag-mast-title{font-size:24px;white-space:nowrap}
  .mag-dateline{display:block;margin:0 0 0 auto;font-size:11px;letter-spacing:.02em;white-space:nowrap}
  .mag-issue{display:flex;width:100%;margin:8px 0 0}
  .mag-foot{grid-area:foot;justify-self:end;margin:0;padding:0;border:0;align-self:center}
  .mag-userlinks{justify-content:flex-end;gap:8px}
  .mag-userlinks a{padding:8px 13px;font-size:12px}
  /* 2. satır: Menü düğmesi — üstündeki ince çizgi ayırıcıdır */
  .mag-navtoggle{
    grid-area:toggle;
    display:flex;align-items:center;gap:12px;
    width:calc(100% + 32px);margin:11px -16px 0;
    padding:13px 16px;
    background:rgba(255,255,255,.028);
    border:0;border-top:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.88);cursor:pointer;
    font-family:var(--font-head);font-size:11px;font-weight:800;
    letter-spacing:.3em;text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
  }
  .mag-navtoggle-bars{display:flex;flex-direction:column;justify-content:center;gap:4px;width:19px;height:14px;flex:0 0 auto}
  .mag-navtoggle-bars i{display:block;width:100%;height:2px;border-radius:2px;background:#fff;transition:transform .28s var(--tr),opacity .2s var(--tr)}
  body.mag-menu-open .mag-navtoggle-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.mag-menu-open .mag-navtoggle-bars i:nth-child(2){opacity:0}
  body.mag-menu-open .mag-navtoggle-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* Açılır bölüm menüsü — panelle aynı koyu zeminde zincir liste */
  .mag-hnav{
    display:none;padding:6px 0 10px;
    background:linear-gradient(168deg,var(--mg-ink-2) 0%,var(--mg-ink) 58%);
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  body.mag-menu-open .mag-hnav{display:block;animation:mgNavIn .24s ease-out}
  .mag-hnav-in{
    display:block;margin:0;padding:0;
    background:none;border:0;border-radius:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .mag-hnav a{
    display:block;padding:13px 18px;border-radius:0;
    font-size:13px;letter-spacing:.07em;text-shadow:none;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .mag-hnav a:last-child{border-bottom:0}
  .mag-hnav a:hover{background:rgba(255,255,255,.05);color:#fff}
  .mag-hnav a.active{
    background:rgba(216,25,32,.2);
    background:color-mix(in srgb, var(--primary) 22%, transparent);
    color:#fff;
    box-shadow:inset 3px 0 0 var(--primary);
  }
}
@keyframes mgNavIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body.mag-menu-open .mag-hnav{animation:none}}

/* ============================================================
   ≤560px — sıkı mobil
   ============================================================ */
@media(max-width:560px){
  /* Task 150 — mobil yükseklik ayarı verildiyse KÜÇÜK telefonda da aynı px;
     verilmediyse eski davranış: ekranın %62'si, en az 340px */
  .mg-stage{height:var(--msh-mo-h,62dvh);min-height:var(--msh-mo-min,340px)}
  .mag-hnav{padding:8px 0}
  .mag-hnav-in{margin:0 12px}
  .mg-heads{left:14px;right:56px}/* v250 — mobil bölüm başlığı hattı (.hsec-head 14px) */
  .mg-cta{padding:9px 17px;font-size:12.5px;margin-top:15px}
  .mg-kicker{margin-bottom:10px}
  .mg-breaking{top:12px;left:12px;right:12px}
  .mg-breaking .tk-track{height:40px}
  .mg-breaking .tk-track a,.mg-breaking .tk-track span{line-height:40px;font-size:12.5px}
  .mg-markets{
    top:64px;left:12px;right:12px;
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;
  }
  .mg-markets::-webkit-scrollbar{display:none}
  .mg-markets--solo{top:12px}
  .mg-mkt{height:34px;padding:0 11px;gap:7px;border-radius:9px}
  .mg-mkt b{font-size:9px;letter-spacing:.1em}
  .mg-mkt span{font-size:12.5px}
  .mg-mkt i{font-size:10px}
  /* v214 — kontrol kümesi küçük telefonda biraz küçülür; sayaç GÖRÜNÜR kalır */
  .mg-ctrlbar{right:9px;gap:7px}
  .mg-count b{font-size:15px}
  .mg-count span{font-size:9.5px}
  .mg-arrow{width:34px;height:34px;font-size:14px}
}

/* ============================================================
   VIDEO BÖLÜMÜ — Task 155 (v134): kategorili bölümler; Task 158
   (v137) ile yönetici talebi üzerine düzen değişti: AYRI bölümler
   yerine TEK açılır kategori menüsü (.mv-select) + hemen altında
   yalnız seçili kategorinin kart satırı (scroll-snap). Oklar,
   ikon-adet başlığı ve elle kaydırma aynen korundu. Dergi
   tasarımıyla aynı dil: koyu zemin (mg-ink), kırmızı vurgu
   (primary), ince beyaz çerçeveler, cam rozetler.
   ============================================================ */
.mv-cats{
  /* v202 — diğer bölümlerle AYNI çerçeve: koyu gradyan zemin + üstte kırmızı
     2px çizgi + altta ince gri çizgi (hsec dilindeki bölüm kromu) */
  background:var(--sw-bg,linear-gradient(130deg,#0d1118 0%,#10161f 48%,#131019 100%));
  padding:26px 0 6px;
  border-top:2px solid var(--sw-accent,var(--primary,#d81920));
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:28px;
}
.mv-cat{min-width:0}
.mv-cat-h{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 26px;margin-bottom:13px;
}
.mv-cat-t{
  display:flex;align-items:center;gap:10px;min-width:0;margin:0;
  font-family:var(--font-head);
}
/* v202 — diğer bölüm başlıklarındaki nabızlı kırmızı nokta (hsec-dot dili) */
.mv-cat-t::before{
  content:"";width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:var(--sw-accent,#ff4d55);
  box-shadow:0 0 0 0 rgba(255,77,85,.45);
  animation:mvsecdot 1.8s infinite;
}
@keyframes mvsecdot{0%{box-shadow:0 0 0 0 rgba(255,77,85,.45)}70%{box-shadow:0 0 0 9px rgba(255,77,85,0)}100%{box-shadow:0 0 0 0 rgba(255,77,85,0)}}
@media(prefers-reduced-motion:reduce){.mv-cat-t::before{animation:none}}
/* Task 174 — bölümün görünür adı ("Videolar"/"Tarifler"): kategori
 * menüsünden AYRI, sade uppercase etiket; sağında ince ayırıcı çizgi.
 * Task 176 — punto HÜR TV / HÜR RADYO bantlarıyla AYNI: 20px (mobil 17px).
 * v188 — Mobil Tasarım Stüdyosu: --sw-fs (punto ölçeği), --sw-ff (yazı
 * tipi), --sw-accent (ayırıcı çizgi rengi) sarmalayıcıdan gelir.
 * v252 — BÖLÜM BAŞLIĞI TİPOGRAFİSİ: Son Depremler, Tarifler (ve aynı
 * sınıfı paylaşan Videolar/Trend Videolar şerit adları) artık panel >
 * "Bölüm Başlıkları — Tipografi" ayarını izler (--hst-* değişkenleri;
 * boş alan eski değer — kullanıcı "diğer bölüm başlıklarının ölçülerini
 * belirlediğim hâlde değişmedi" bildiriminin düzeltmesi). */
.mv-strip-name{
  flex:0 0 auto;font-size:var(--hst-fs,calc(20px * var(--sw-fs,1)));font-weight:var(--hst-fw,900);font-style:var(--hst-it,normal);letter-spacing:var(--hst-ls,.09em);
  text-transform:uppercase;color:var(--hst-c,#fff);line-height:1;
  font-family:var(--sw-ff,var(--font-head));
  padding-right:12px;border-right:1px solid var(--sw-accent,rgba(255,255,255,.16));
}
/* — Açılır kategori menüsü (v137): koyu hap, ince çerçeve, özel ok — */
.mv-selwrap{position:relative;min-width:0}
.mv-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  max-width:250px;padding:7px 34px 7px 14px;
  font-family:var(--font-head);font-size:14px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);border-radius:10px;
  cursor:pointer;text-overflow:ellipsis;
  transition:border-color .2s var(--tr),background .2s var(--tr),box-shadow .2s var(--tr);
}
.mv-select:hover{border-color:rgba(216,25,32,.75);background:rgba(255,255,255,.1)}
.mv-select:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mv-select option{background:#14171f;color:#fff;font-weight:600}
.mv-selwrap::after{
  content:'';position:absolute;top:50%;right:14px;width:7px;height:7px;
  border-right:2px solid rgba(255,255,255,.78);border-bottom:2px solid rgba(255,255,255,.78);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.mv-cat-n{
  flex:0 0 auto;font-size:11px;font-weight:800;color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  padding:2px 8px;border-radius:20px;
}
.mv-nav{display:flex;gap:8px;flex:0 0 auto}
.mv-arrow{
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  transition:background .2s var(--tr),border-color .2s var(--tr),transform .2s var(--tr),opacity .2s var(--tr);
}
.mv-arrow:hover:not(:disabled){background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.06)}
.mv-arrow:active:not(:disabled){transform:scale(.96)}
.mv-arrow:disabled{opacity:.32;cursor:default}
.mv-arrow:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.mv-panes{min-width:0}
.mv-row[hidden]{display:none}
/* v216 — İLK KART SOL KENARA GÖMÜLMESİN (kullanıcı: "Tarifler bölümündeki
   ilk görsel sol tarafın altında kalıyor"): scroll-padding ile kartlar
   kaydırınca İÇERİĞİN başlangıç çizgisine (26px) hizalanır — padding/fade
   bölgesine sığamaz; maske soluklaşma aralığı da padding genişliğine (26px)
   taşındı — dinlenen ilk kart artık soluk solmaz. */
.mv-row{
  display:flex;gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scroll-padding-left:26px;scroll-padding-right:26px;
  padding:4px 26px 18px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
}
.mv-row::-webkit-scrollbar{display:none}
.mv-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.mv-card{
  flex:0 0 auto;scroll-snap-align:start;width:252px;display:block;
  text-decoration:none;
}
.mv-thumb{
  position:relative;display:block;aspect-ratio:16/9;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(150deg,#191d28 0%,#0e1118 100%);
  transition:border-color .25s var(--tr),transform .25s var(--tr),box-shadow .25s var(--tr);
}
.mv-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--tr);
}
.mv-card:hover .mv-thumb{
  border-color:rgba(216,25,32,.75);
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
.mv-card:hover .mv-thumb img{transform:scale(1.06)}
.mv-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--primary);color:#fff;
  box-shadow:0 6px 18px rgba(216,25,32,.5),0 0 0 4px rgba(255,255,255,.12);
  transition:transform .25s var(--tr),background .25s var(--tr);
}
.mv-play svg{margin-left:2px}
.mv-card:hover .mv-play{transform:translate(-50%,-50%) scale(1.12);background:#e5222b}
.mv-badge{
  position:absolute;top:8px;left:8px;
  font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(11,13,18,.72);
  border:1px solid rgba(255,255,255,.18);
  padding:3px 8px;border-radius:6px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.mv-name{
  display:block;margin-top:9px;
  font-family:var(--font-head);font-weight:600;font-size:12.5px;line-height:1.45;
  color:rgba(255,255,255,.82);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .2s var(--tr);
}
.mv-card:hover .mv-name{color:#fff}

/* — Task 194/196: TREND şeridi ekleri — CANLI rozeti + meta satırı.
   Açıklama metni/sayısı gösterilmez; yalnız kart üstü CANLI etiketi ve
   kart altı "kanal · zaman" mini satırı. — */
.mv-badge-live{
  background:rgba(216,25,32,.92);border-color:rgba(255,255,255,.28);
  display:inline-flex;align-items:center;gap:4px;
}
.mv-badge-live i{
  width:6px;height:6px;border-radius:50%;background:#fff;display:inline-block;
  animation:mvLivePulse 1.4s ease-in-out infinite;
}
@keyframes mvLivePulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.mv-badge-live i{animation:none}}
.mv-meta{
  display:block;margin-top:3px;
  font-size:11px;line-height:1.4;font-weight:500;
  color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* — Işık kutusu (YouTube / Vimeo / mp4) —
   v188: z-index 4000 → 9500. .radyo-in / .tv-in bant içi bağlamları kalıcı
   z-5000 taşıdığından ışık kutusu bandın ALTINDA açılıyordu — koyu perdenin
   üzerinde HÜR RADYO/HÜR TV bantları yüzüyordu. Açık açılır menü katmanı
   (9000) ile mobil dok (99995) arasında: perde her şeyi örter, dok erişilebilir kalır. */
.mv-lb{
  position:fixed;inset:0;z-index:9500;
  display:grid;place-items:center;padding:22px;
  background:rgba(5,6,10,.88);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:mv-lb-in .18s ease-out;
}
@keyframes mv-lb-in{from{opacity:0}to{opacity:1}}
.mv-lb-box{position:relative;width:min(940px,94vw)}
.mv-lb-stage{
  aspect-ratio:16/9;background:#000;
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.mv-lb-stage iframe,.mv-lb-stage video{width:100%;height:100%;border:0;display:block}
.mv-lb-x{
  position:absolute;top:-42px;right:0;
  width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;font-size:14px;cursor:pointer;
}
.mv-lb-x:hover{background:var(--primary);border-color:var(--primary)}

/* — Hareket azaltma: yumuşak kaydırma yok, ok atışları anında — */
@media(prefers-reduced-motion:reduce){
  .mv-row{scroll-behavior:auto}
}

/* — Mobil: daha kompakt kartlar + menü — */
@media(max-width:560px){
  .mv-cats{padding:22px 0 2px;gap:22px}
  .mv-cat-h{padding:0 16px;margin-bottom:11px;gap:10px}
  .mv-row{padding:4px 16px 14px;gap:11px;scroll-padding-left:16px;scroll-padding-right:16px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
  .mv-card{width:216px}
  .mv-play{width:38px;height:38px}
  .mv-select{max-width:160px;font-size:12.5px;padding:6px 30px 6px 11px}
  .mv-arrow{width:32px;height:32px}
  /* Task 176 — şerit adı mobilde TV/Radyo puntolarıyla aynı (17px) */
  .mv-strip-name{font-size:var(--hst-fs,calc(17px * var(--sw-fs,1)));padding-right:8px}
}

/* ============================================================
   KATEGORİ SAYFASI — manşet sahnesiyle birebir aynı tasarım dili:
   koyu zemin üzerinde seçki ızgarası (yan yana 6) + sonsuz haber akışı.
   Kartlar video şeridi kartlarıyla aynı gramer: ince beyaz çerçeve,
   hover'da kırmızı çerçeve + kalkma + görsel yakınlaşması.
   ============================================================ */
body.mag-catpage{background:var(--mg-ink)}

.mg-catsec{
  background:var(--mg-ink);
  padding:36px 22px 8px;
  border-top:1px solid rgba(255,255,255,.06);
}
.mg-catwrap{margin:0 auto}/* v194 — %100 genişlik */

/* Kategori başlığı — dergi künyesi havası (kırmızı bar + büyük ad + sayı) */
.mg-cathead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.mg-catname{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.3px;
  color:#fff;text-transform:uppercase;
}
.mg-catname::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--primary);flex:0 0 auto}
.mg-catcount{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.42);white-space:nowrap;
}
/* Task 64: tarifler listesi başlığı altı tanıtım satırı — kendi satırına iner */
.mg-catsub{
  flex-basis:100%;margin:2px 0 0;
  font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.55);max-width:640px;
}

/* Seçki ızgarası (yan yana 6) + akış ızgarası */
.mg-grid6{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mg-stream{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
@media(min-width:1100px){
  .mg-grid6,.mg-stream{grid-template-columns:repeat(3,1fr)}
  .mg-catsec{padding:38px 46px 8px}
  .mg-catwrap{max-width:none}
}
@media(max-width:560px){
  .mg-catsec{padding:26px 14px 4px}
  .mg-grid6,.mg-stream{gap:12px}
}

/* Kart */
.mg-ccard{
  display:block;text-decoration:none;
  border:1px solid rgba(255,255,255,.13);border-radius:13px;overflow:hidden;
  background:linear-gradient(150deg,#171b25 0%,#0e1118 100%);
  transition:border-color .25s var(--tr),transform .25s var(--tr),box-shadow .25s var(--tr);
  animation:mgCardIn .5s cubic-bezier(.2,.7,.3,1) backwards;
}
.mg-ccard:hover{
  border-color:rgba(216,25,32,.75);
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
@keyframes mgCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .mg-ccard{animation:none}
  .mg-ccard:hover{transform:none}
}
.mg-ccimg{
  display:block;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(120% 120% at 20% 15%,#1c2230 0%,var(--mg-ink) 62%);
}
.mg-ccimg img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--tr);
}
.mg-ccard:hover .mg-ccimg img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.mg-ccard:hover .mg-ccimg img{transform:none}}
.mg-ccbody{display:block;padding:13px 15px 15px}
.mg-cckick{display:flex;align-items:center;gap:9px}
.mg-cckick b{
  font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--primary);padding:3px 8px;border-radius:5px;
}
.mg-cckick time{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums;
}
.mg-cctitle{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:9px;
  font-family:var(--font-display);font-weight:700;
  font-size:14.5px;line-height:1.42;color:#fff;
  transition:color .2s var(--tr);
}
.mg-ccard:hover .mg-cctitle{text-decoration:underline;text-decoration-color:var(--primary);text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:560px){
  .mg-ccbody{padding:11px 12px 13px}
  .mg-cctitle{font-size:13.5px}
}

/* Sonsuz akış yakalayıcısı */
.mg-more{
  display:flex;align-items:center;justify-content:center;gap:13px;
  padding:30px 0 46px;min-height:44px;
}
.mg-morebtn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 26px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.32);background:rgba(11,13,18,.3);
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.03em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:.3s var(--tr);
}
.mg-morebtn:hover{background:var(--primary);border-color:var(--primary)}
.mg-morebtn:disabled{opacity:.55;cursor:wait}
.mg-spin{
  width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(255,255,255,.16);border-top-color:var(--primary);
  display:inline-block;animation:mgSpin .8s linear infinite;
}
@keyframes mgSpin{to{transform:rotate(360deg)}}
.mg-done{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.36)}

/* ============================================================
   GÖRSEL STÜDYO VİTRİNİ — manşetin hemen altı, video şeridinin üstü.
   Yazısız reklam mantığında 3'lü görsel alanı: yazılar tasarımın
   İÇİNDE olduğu için burada ek metin/ok yok. Her kart bir habere
   gider; 4. tasarım yayımlanınca en eski kendiliğinden düşer.
   ============================================================ */
.hs-shelf{
  background:var(--mg-ink);
  padding:26px 0 4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.hs-in{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  padding:0 26px;
}
.hs-card{
  display:block;overflow:hidden;border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  background:var(--mg-ink-2);
  aspect-ratio:16/9;
  transition:transform .25s var(--tr,.2s),border-color .25s ease,box-shadow .25s ease;
}
.hs-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.hs-card:hover{
  transform:translateY(-3px);
  border-color:var(--primary);
  box-shadow:0 14px 34px rgba(216,25,32,.16);
}
.hs-card:hover img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){
  .hs-card,.hs-card img{transition:none}
  .hs-card:hover{transform:none}
}
@media(max-width:760px){
  .hs-shelf{padding:18px 0 2px}
  .hs-in{grid-template-columns:1fr;padding:0 16px;gap:12px}
}

/* ============================================================
   YEMEK TARİFLERİ + ANSİKLOPEDİ (Task 58)
   Listeler .mg-catsec/.mg-ccard tasarımını yeniden kullanır;
   aşağısı detay sayfası ve liste ek bileşenleri.
   ============================================================ */
.mg-catadd{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:999px;
  background:var(--primary);color:#fff;
  font-family:var(--font-head);font-size:12px;font-weight:800;letter-spacing:.06em;
  transition:.25s var(--tr);
}
.mg-catadd:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px)}
.rec-empty{
  border:1px dashed rgba(255,255,255,.2);border-radius:14px;
  padding:44px 20px;text-align:center;color:rgba(255,255,255,.66);
  display:grid;justify-items:center;gap:16px;
}

/* — Detay sayfası (tarif + ansiklopedi ortak) — */
.rec-detail{max-width:880px;margin:0 auto;padding:34px 20px 60px}
.rec-back{
  display:inline-block;margin-bottom:18px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);transition:.2s var(--tr);
}
.rec-back:hover{color:var(--primary)}
.enc-detail{max-width:820px}
.enc-secchip{margin-bottom:10px;display:inline-block}
.rec-headline h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(26px,3.4vw,40px);line-height:1.14;letter-spacing:-.4px;
  color:var(--ink);text-wrap:balance;
}
.rec-spot{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:640px}
.rec-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.rec-meta span{
  display:flex;flex-direction:column;gap:2px;
  padding:9px 15px;border:1px solid var(--line);border-radius:11px;
  font-size:13.5px;font-weight:700;color:var(--txt);background:var(--bg-soft);
}
.rec-meta span b{
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.rec-photo{margin:26px 0 0}
.rec-photo img{
  width:100%;display:block;border-radius:16px;
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  aspect-ratio:16/9;object-fit:cover;
}
.rec-cols{display:grid;grid-template-columns:300px 1fr;gap:30px;margin-top:32px;align-items:start}
.rec-cols h2{
  font-family:var(--font-head);font-size:13px;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.rec-cols h2::before{content:"";width:20px;height:3px;border-radius:2px;background:var(--primary)}
.rec-ings ul{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rec-ings li{
  padding:11px 16px;font-size:14px;color:var(--txt);
  border-bottom:1px solid var(--line);background:#fff;
  display:flex;gap:9px;align-items:baseline;
}
.rec-ings li:last-child{border-bottom:0}
.rec-ings li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--primary);transform:translateY(-2px)}
.rec-steps ol{counter-reset:rs;list-style:none;display:grid;gap:14px}
.rec-steps li{
  counter-increment:rs;position:relative;
  padding:15px 17px 15px 56px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:13px;
  font-size:14.5px;line-height:1.65;color:var(--txt);
}
.rec-steps li::before{
  content:counter(rs);position:absolute;left:15px;top:14px;
  width:27px;height:27px;border-radius:50%;
  background:var(--primary);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:13.5px;
  display:grid;place-items:center;
}
.rec-steps--full{grid-column:1/-1}
.rec-source{margin-top:18px;font-size:12.5px;color:var(--muted)}
.rec-source a{color:var(--primary);font-weight:700}
.rec-cta{
  margin-top:40px;padding:22px 24px;border-radius:16px;
  background:linear-gradient(150deg,#171b25 0%,#0e1118 100%);
  color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.rec-cta b{display:block;font-family:var(--font-head);font-size:16px;margin-bottom:4px}
.rec-cta span{font-size:13.5px;color:rgba(255,255,255,.66)}
.rec-similar{margin-top:44px}
.rec-similar h2{
  font-family:var(--font-head);font-size:13px;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.rec-similar h2::before{content:"";width:20px;height:3px;border-radius:2px;background:var(--primary)}

/* — Ansiklopedi detay gövdesi — */
.enc-body{margin-top:26px;font-size:15.5px;line-height:1.78;color:var(--txt)}
.enc-body p{margin:0 0 14px}
.enc-body h3{
  margin:26px 0 10px;font-family:var(--font-head);
  font-size:17px;font-weight:800;color:var(--ink);
}
.enc-body ul{margin:0 0 14px 20px;list-style:disc}
.enc-body a{color:var(--primary)}
.enc-attrib{
  margin-top:26px;padding:13px 16px;border-radius:11px;
  background:var(--bg-soft);border:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.enc-attrib a{color:var(--primary);font-weight:700}
.enc-related{padding-top:30px}
.enc-related .mg-catname{margin-bottom:18px}

/* — Liste ekleri: bölüm çipleri + arama + sayfalama — */
.enc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.enc-chip{
  padding:7px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.78);
  font-size:12px;font-weight:700;letter-spacing:.04em;transition:.2s var(--tr);
}
.enc-chip:hover{border-color:rgba(255,255,255,.5);color:#fff}
.enc-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.enc-search{
  margin-left:auto;display:flex;align-items:stretch;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:11px;overflow:hidden;
}
.enc-search input{
  width:200px;max-width:52vw;background:none;border:0;outline:none;color:#fff;
  padding:9px 13px;font-size:13px;
}
.enc-search input::placeholder{color:rgba(255,255,255,.4)}
.enc-search button{
  width:40px;border:0;border-left:1px solid rgba(255,255,255,.12);
  background:none;color:#fff;display:grid;place-items:center;cursor:pointer;
}
.enc-search button:hover{background:var(--primary)}
.enc-pager{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:30px}
.enc-pg{
  min-width:36px;padding:9px 13px;border-radius:10px;text-align:center;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.82);
  font-size:13px;font-weight:700;transition:.2s var(--tr);
}
.enc-pg:hover{border-color:var(--primary);color:#fff}
.enc-pg.on{background:var(--primary);border-color:var(--primary);color:#fff}
.enc-dots{align-self:center;color:rgba(255,255,255,.4);padding:0 2px}
@media(max-width:820px){
  .rec-cols{grid-template-columns:1fr;gap:24px}
  .mg-cathead .enc-search{margin-left:0;flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .mg-catadd:hover{transform:none}
}

/* ============================================================
   Task 188 — TAM KOYU GÖVDE (v162)
   Kullanıcı talebi: "bu sayfanın tasarımı ana sayfanın tasarımına uygun
   olmalı. yani hiçbir sayfanın arkaplanı beyaz olmasın."
   Tüm dergi (mag-sub) sayfalarının gövdesi ana sayfa paletine (--mg-ink)
   alınır; açık yüzeyler koyu kartlara, metinler açık tona çevrilir.
   (Yönetim paneli /admin — kendi açık temasıyla — kapsam DIŞIDIR.)
   ============================================================ */
body.mag-sub{background:var(--mg-ink);color:rgba(255,255,255,.82)}
.mg-inner{background:transparent}
body.mag-sub h1,body.mag-sub h2,body.mag-sub h3,body.mag-sub h4{color:#fff}
body.mag-sub .block-head h2,body.mag-sub .comments h3{color:#fff}
body.mag-sub .block-head h2::after{background:rgba(255,255,255,.14)}
body.mag-sub .all-link{color:rgba(255,255,255,.6)}
body.mag-sub .breadcrumb{color:rgba(255,255,255,.5)}
body.mag-sub .breadcrumb a{color:rgba(255,255,255,.72)}
body.mag-sub .page-title small{color:rgba(255,255,255,.5)}
body.mag-sub time{color:rgba(255,255,255,.55)}
/* Haber detay */
body.mag-sub .news-head,body.mag-sub .news-meta,body.mag-sub .news-spot{color:rgba(255,255,255,.8)}
body.mag-sub .news-meta{color:rgba(255,255,255,.55)}
body.mag-sub .hm-content{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.85);box-shadow:none}
body.mag-sub .hm-content p,body.mag-sub .hm-content li{color:rgba(255,255,255,.85)}
body.mag-sub .news-imgcap,body.mag-sub .hm-gal figcaption{color:rgba(255,255,255,.5)}
body.mag-sub .hm-take{background:rgba(216,25,32,.1);border-color:rgba(216,25,32,.4);color:rgba(255,255,255,.85)}
body.mag-sub .hm-take-head{color:#fff}
body.mag-sub .hm-empty{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.2);color:rgba(255,255,255,.6)}
body.mag-sub .hm-alert{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
body.mag-sub .hm-alert.ok{border-color:rgba(14,159,95,.5)}
body.mag-sub .hm-alert.err{border-color:rgba(224,52,43,.5)}
body.mag-sub .ncard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
body.mag-sub .ncard-title{color:rgba(255,255,255,.88)}
body.mag-sub .ncard-cat{color:rgba(255,255,255,.55)}
body.mag-sub .related-grid .ncard:hover{border-color:rgba(216,25,32,.45)}
/* Liste blokları */
body.mag-sub .nl-list,body.mag-sub .nl-numbered,body.mag-sub .mr-numbered{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);box-shadow:none}
/* Task 196 — En Çok Okunanlar başlıkları: koyu zemin üstünde --txt (koyu) kalıyordu,
   "okunmuyor" şikâyeti → beyaz; hover'da tema rengi korunur. */
body.mag-sub .mr-numbered a{color:#fff}
body.mag-sub .mr-numbered a:hover{color:var(--primary)}
body.mag-sub .nl-list li{border-bottom-color:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
body.mag-sub .nl-list li a{color:rgba(255,255,255,.85)}
body.mag-sub .nl-numbered li,body.mag-sub .mr-numbered li{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.07)}
body.mag-sub .nl-numbered li::before{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65)}
body.mag-sub .mr-numbered li::before{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65)}
/* Ekonomi yüzeyleri */
body.mag-sub .eco-strip{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
body.mag-sub .eco-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
body.mag-sub .eco-item b,body.mag-sub .eco-card b{color:#fff}
body.mag-sub .eco-item i,body.mag-sub .eco-card span{color:rgba(255,255,255,.6)}
body.mag-sub .rates-table{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
body.mag-sub .rates-table th{background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.1)}
body.mag-sub .rates-table td{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.08)}
/* Sayfalama, formlar, düğmeler, etiketler */
body.mag-sub .hm-pagination a,body.mag-sub .hm-pagination span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
body.mag-sub .hm-pagination .on{background:var(--primary);border-color:var(--primary);color:#fff}
body.mag-sub .hm-form{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
body.mag-sub .hm-form label{color:rgba(255,255,255,.75)}
body.mag-sub .hm-form small{color:rgba(255,255,255,.45)}
body.mag-sub input[type=text],body.mag-sub input[type=password],body.mag-sub input[type=email],
body.mag-sub input[type=number],body.mag-sub input[type=url],body.mag-sub input[type=date],
body.mag-sub input[type=tel],body.mag-sub input[type=search],body.mag-sub select,body.mag-sub textarea{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff}
body.mag-sub input::placeholder,body.mag-sub textarea::placeholder{color:rgba(255,255,255,.38)}
body.mag-sub .btn.ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.2)}
body.mag-sub .tag-row a{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.12)}
/* Yorumlar */
body.mag-sub .comment{border-bottom-color:rgba(255,255,255,.08)}
body.mag-sub .comment .chead b{color:#fff}
body.mag-sub .comment p{color:rgba(255,255,255,.8)}
body.mag-sub .cavatar{background:rgba(216,25,32,.25);color:#fff}
/* Yan sütun blokları */
body.mag-sub .hm-block{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.09)}
/* Kayan/pop-up yüzeyler */
body.mag-sub .enc-card{background:#141824;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
body.mag-sub .enc-card b{color:#fff}
.hm-a11y-panel{background:#141824;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.hm-a11y-t{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.8)}
/* medya oynatıcı kutusu */
body.mag-sub .hm-audio{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
body.mag-sub .hm-audio-label{color:rgba(255,255,255,.7)}
/* dergi alt sayfa ana sütun boşlukları koyu zeminde akar */
body.mag-sub .mag-site{background:var(--mg-ink)}