/* ==========================================================================
   Dergi Anadolu — ANASAYFA B (index2)
   Referanslar:
     sondakika.com  → iki katlı başlık: üstte marka renginde kurumsal bant,
                      altta koyu kategori bandı
     ankahaber.net  → manşet serimi (büyük slayt + sağda dikey video rayı),
                      altındaki hava durumu + kayan şerit, kart kurgusu
   stil.css'in ÜSTÜNE yüklenir; ortak bileşenler oradan gelir.
   ========================================================================== */

/* --- 1. Başlık B — marka renginde kurumsal bant --------------------------- */
.basB{background:var(--kirmizi);color:#fff}
.basB__ic{display:flex;align-items:center;gap:28px;height:74px}
.basB__logo{flex-shrink:0}
.basB__logo img{width:196px}
.basB__menu{display:flex;align-items:center;gap:24px;min-width:0;overflow-x:auto;scrollbar-width:none}
.basB__menu::-webkit-scrollbar{display:none}
.basB__menu a{
  font-size:14px;font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap;
  padding-block:6px;border-bottom:2px solid transparent;transition:color var(--gecis),border-color var(--gecis);
}
.basB__menu a:hover{color:#fff;border-bottom-color:#fff}

.basB__sag{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}
.basB__hava{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;white-space:nowrap}
.basB__hava svg{width:19px;height:19px;opacity:.9}
.basB__hava small{display:block;font-size:11px;font-weight:500;opacity:.72}
.basB__ara{
  display:flex;align-items:center;height:38px;border-radius:var(--yaricap);
  background:rgba(255,255,255,.16);overflow:hidden;
}
.basB__ara input{
  width:150px;border:0;background:none;color:#fff;padding-inline:14px;height:100%;
  font:inherit;font-size:13px;
}
.basB__ara input::placeholder{color:rgba(255,255,255,.66)}
.basB__ara input:focus{outline:none}
.basB__ara button{width:40px;display:grid;place-items:center;color:#fff;height:100%}
.basB__ara svg{width:16px;height:16px}
.basB__uye{
  display:inline-flex;align-items:center;height:38px;padding-inline:18px;
  border:1px solid rgba(255,255,255,.55);border-radius:var(--yaricap);
  font-size:13px;font-weight:700;white-space:nowrap;
  transition:background var(--gecis),color var(--gecis);
}
.basB__uye:hover{background:#fff;color:var(--kirmizi)}

/* Atatürk — sağ üst köşede, kırmızı başlık ile koyu menü barını birlikte
   kaplayan oval portre (yayıncının taslağı). Başlık, yapışkan menü barının
   (z-index 60) üstüne çıkar ki oval barın üzerinde görünsün. */
/* Ölçüler kökte: koyu menü barı başlığın kardeşi, değişkeni oradan göremiyordu */
:root{--ataturk-y:106px;--ataturk-g:87px}
.basB{position:relative;z-index:61}
.basB__ic{position:relative}
/* .kap genişlikle çalışır (iç dolgusu yok): dolgu yalnız ovalin payı */
.basB__ic:has(.basB__ataturk){padding-right:calc(var(--ataturk-g) + 16px)}
.basB__ataturk{
  position:absolute;right:0;top:7px;
  height:var(--ataturk-y);width:var(--ataturk-g);object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.28));pointer-events:none;
}
/* Menü barının sağ ucu ovalin altında kalmasın */
body:has(.basB__ataturk) .gezB__ic{padding-right:calc(var(--ataturk-g) + 16px)}

/* --- 2. Gezinti B — koyu kategori bandı ---------------------------------- */
.gezB{position:sticky;top:0;z-index:60;background:var(--murekkep)}
.gezB.kaydi{box-shadow:0 6px 18px -10px rgba(0,0,0,.6)}
.gezB__ic{display:flex;align-items:center;height:46px;gap:0}
.gezB__mini{display:none;align-items:center;padding-right:16px;flex-shrink:0}
.gezB__mini img{width:124px}
.gezB.kaydi .gezB__mini{display:flex}
.gezB__kaydir{display:flex;align-items:center;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.gezB__kaydir::-webkit-scrollbar{display:none}
.gezB a.g2{
  display:flex;align-items:center;height:46px;padding-inline:15px;
  font-size:14px;font-weight:700;color:rgba(255,255,255,.86);white-space:nowrap;
  transition:background var(--gecis),color var(--gecis);
}
.gezB a.g2:hover{background:rgba(255,255,255,.09);color:#fff}
.gezB a.g2[aria-current="page"]{background:var(--kirmizi);color:#fff}
.gezB__menu{
  flex-shrink:0;display:flex;align-items:center;gap:9px;margin-left:8px;
  height:32px;padding-inline:13px;border-radius:var(--yaricap);
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  transition:background var(--gecis);
}
.gezB__menu:hover{background:rgba(255,255,255,.12)}
.gezB__menu svg{width:17px;height:17px}

/* --- 3. Manşet B — büyük slayt + sağda dikey ray ------------------------- */
.mansetB{padding-block:22px}
.mansetB__ic{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,1fr);gap:var(--ara);align-items:stretch}

/* Yüksekliği SAĞDAKİ sütun belirler: abone düğmesi + tam sığan 3/4 dergi
   kapağı. Slayt da o yüksekliğe uzar, böylece iki alan aynı hizada biter.
   (Slayt 16:9'a sabitlenince sağ sütun 16px taşıyordu.) */
.slayt--nokta{position:relative;align-self:stretch;display:flex;flex-direction:column}
.slayt--nokta .slayt__kutu{border-radius:var(--yaricap);flex:1;min-height:0}
.slayt--nokta .slayt__nokta{
  position:absolute;left:0;right:0;bottom:14px;z-index:4;
  background:none;padding:0;justify-content:center;gap:7px;
}
.slayt--nokta .slayt__nokta button{
  flex:0 0 9px;width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.45);
}
.slayt--nokta .slayt__nokta button span{display:none}
.slayt--nokta .slayt__nokta button:hover{background:rgba(255,255,255,.7)}
.slayt--nokta .slayt__nokta button[aria-current="true"]{
  flex-basis:28px;width:28px;border-radius:5px;background:rgba(255,255,255,.4);
}
.slayt--nokta .slayt__ilerleme{background:#fff}
.slayt--nokta .slayt__yazi{padding-bottom:44px}

/* sağdaki dikey ray */
/* Ray, satır yüksekliğini BÜYÜTMEMELİ — yükseklik slayttan gelir. Kutu mutlak
   konumlandırılınca akışa yüksekliğiyle katılmıyor, kalan alanı doldurup
   kendi içinde kayıyor. */
.yanRay{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.yanRay__basi{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.yanRay__basi>a{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--metin);
}
.yanRay__basi>a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kirmizi)}
.yanRay__oklar{margin-left:auto;display:flex;gap:6px}
.yanRay__ok{
  width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--cizgi);color:var(--metin-2);
  transition:background var(--gecis),color var(--gecis),border-color var(--gecis),opacity var(--gecis);
}
.yanRay__ok:hover{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff}
.yanRay__ok[disabled]{opacity:.35;pointer-events:none}
.yanRay__ok svg{width:14px;height:14px}
.yanRay__kutu{
  position:absolute;top:48px;left:0;right:0;bottom:0;
  display:grid;grid-auto-rows:150px;gap:12px;
  overflow-y:auto;scrollbar-width:none;scroll-snap-type:y proximity;
}
.yanRay__kutu::-webkit-scrollbar{display:none}
.yanKart{
  position:relative;border-radius:var(--yaricap);overflow:hidden;background:#000;
  scroll-snap-align:start;
}
/* mutlak konum şart: height:100% belirsiz yükseklikte auto'ya düşüp
   kartı görselin doğal boyuna büyütüyordu */
.yanKart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78;transition:transform 500ms cubic-bezier(.2,.6,.3,1),opacity var(--gecis)}
.yanKart:hover img{transform:scale(1.05);opacity:.9}
.yanKart__oynat{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.yanKart__oynat i{
  width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.5);
  border:1.5px solid rgba(255,255,255,.85);display:grid;place-items:center;
  transition:background var(--gecis);
}
.yanKart:hover .yanKart__oynat i{background:var(--kirmizi);border-color:var(--kirmizi)}
.yanKart__oynat svg{width:15px;height:15px;color:#fff;margin-left:2px}
.yanKart__yazi{
  position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.35) 55%,transparent);
}
.yanKart__yazi h3{
  font-size:13.5px;font-weight:700;line-height:1.38;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.yanKart__yazi time{display:block;margin-top:5px;font-size:11px;color:rgba(255,255,255,.7);font-weight:500}

/* --- 4. Hava durumu + kayan "Arşivden Bugün" şeridi ---------------------- */
.durumB{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  background:var(--zemin);border:1px solid var(--cizgi);border-radius:var(--yaricap);
  overflow:hidden;
}
.durumB__hava{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:14px 26px 14px 24px;border-right:1px solid var(--cizgi);flex-shrink:0;
}
.durumB__hava::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--kirmizi)}
.durumB__hava svg{width:30px;height:30px;color:var(--kirmizi);flex-shrink:0}
.durumB__derece{font-size:20px;font-weight:800;line-height:1}
.durumB__yer{font-size:13px;font-weight:700;margin-top:3px}
.durumB__hal{font-size:12px;color:var(--soluk);font-weight:500;margin-top:2px}

/* Etiket kırpma kabının DIŞINDA durmalı: aynı kabın içindeyken kayan maddeler
   etiketin altından geçip üst üste biniyordu. */
.durumB__akis{position:relative;display:flex;align-items:stretch;min-width:0}
.arsiv-pencere{position:relative;flex:1;min-width:0;overflow:hidden;display:flex;align-items:center}
.arsiv-pencere::after{                    /* sağ kenarda yumuşama */
  content:"";position:absolute;right:0;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;
  background:linear-gradient(to left,var(--zemin),transparent);
}
.arsiv-ray{display:flex;flex:0 0 auto;width:max-content;animation:arsivKay 46s linear infinite}
.arsiv-pencere:hover .arsiv-ray{animation-play-state:paused}
@keyframes arsivKay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.arsiv-oge{
  display:flex;align-items:center;gap:11px;white-space:nowrap;
  padding:16px 26px;border-right:1px solid var(--cizgi-2);
  transition:background var(--gecis);
}
.arsiv-oge:hover{background:var(--zemin-2)}
.arsiv-oge b{
  font-size:12px;font-weight:800;color:var(--kirmizi);
  padding:3px 8px;border-radius:2px;background:rgba(230,58,48,.1);
  font-variant-numeric:tabular-nums;
}
.arsiv-oge span{font-size:13.5px;font-weight:700}
.arsiv-etiket{
  display:flex;align-items:center;gap:8px;padding:16px 20px;flex-shrink:0;
  border-right:1px solid var(--cizgi);background:var(--zemin-2);
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--metin);
}
.arsiv-etiket svg{width:16px;height:16px;color:var(--kirmizi)}

/* --- 5. Anka kart bloğu -------------------------------------------------- */
.blokA{padding-block:28px}
.blokA__basi{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.blokA__basi::before{content:"";width:4px;height:24px;background:var(--kirmizi);border-radius:2px;flex-shrink:0}
.blokA__basi h2{font-size:21px;font-weight:800;letter-spacing:-.01em}
.blokA__basi a{
  margin-left:auto;font-size:13px;font-weight:700;color:var(--soluk);
  display:inline-flex;align-items:center;gap:6px;transition:color var(--gecis);
}
.blokA__basi a:hover{color:var(--kirmizi)}
.blokA__basi a svg{width:12px;height:12px}

.blokA__ic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.blokA__lider .gorsel{aspect-ratio:4/3}
.blokA__lider h3{font-size:20px;font-weight:800;line-height:1.3;margin-top:15px}
.blokA__lider p{
  margin-top:10px;font-size:14px;color:var(--soluk);line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blokA__lider .tarih{display:block;margin-top:11px}

.blokA__kucuk{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-content:start}
.kartA .gorsel{aspect-ratio:16/9}
.kartA h3{
  font-size:15px;font-weight:700;line-height:1.36;margin-top:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kartA .tarih{display:block;margin-top:6px}
.blokA__tum{
  display:block;text-align:center;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--cizgi);
  font-size:13px;font-weight:700;color:var(--soluk);transition:color var(--gecis);
}
.blokA__tum:hover{color:var(--kirmizi)}

/* dörtlü Anka kart ızgarası */
.izgaraA{display:grid;grid-template-columns:repeat(4,1fr);gap:26px var(--ara)}

/* --- 6. Duyarlılık ------------------------------------------------------- */
@media (max-width:1180px){
  .basB__menu{gap:18px}
  .basB__ara input{width:110px}
}
@media (max-width:1024px){
  .basB__ic{height:66px;gap:18px}
  .basB__logo img{width:168px}
  .basB__hava{display:none}
  .mansetB__ic{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr)}
  .izgaraA{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:880px){
  .basB__menu{display:none}
  /* kayan kategori şeridi MENÜ düğmesinin altına girmesin */
  .gezB__menu{
    margin-left:0;padding-inline:13px;border-radius:0;height:46px;
    background:var(--murekkep);border-left:1px solid rgba(255,255,255,.18);
  }
  .mansetB__ic{grid-template-columns:1fr}
  .slayt--nokta{align-self:stretch}
  /* Tek sütunda satır yüksekliği kalmadığı için slayt kendi oranına döner */
  .slayt--nokta .slayt__kutu{aspect-ratio:16/9;flex:0 0 auto}
  .yanRay__kutu{
    position:static;grid-auto-rows:150px;grid-auto-flow:column;
    grid-auto-columns:minmax(220px,1fr);overflow-x:auto;overflow-y:hidden;
  }

  .blokA__ic{grid-template-columns:1fr}
  .durumB{grid-template-columns:1fr}
  .durumB__hava{border-right:0;border-bottom:1px solid var(--cizgi)}
  .izgaraA{grid-template-columns:repeat(2,1fr)}
  .arsiv-etiket{display:none}
}
@media (max-width:600px){
  .basB__ic{height:60px}
  .basB__logo img{width:150px}
  .basB__ara input{display:none}
  .basB__ara{background:none}
  .basB__ara button{width:36px}
  .basB__uye{display:none}
  .blokA__kucuk{grid-template-columns:1fr 1fr;gap:16px}
  .blokA__lider h3{font-size:18px}
  .izgaraA{grid-template-columns:1fr}
  .slayt--nokta .slayt__nokta button:nth-child(n+6){display:none}
}

@media (prefers-reduced-motion:reduce){
  .arsiv-ray{animation:none}
}

/* --- Manşetin yanındaki dergi kapağı ------------------------------------
   Bölüm ayarında "Yan alan: Dergi kapağı" seçilince video rayı yerine gelir. */
/* Yüksekliği slayt belirler: kapak kendi boyunu satıra dayatmasın diye
   görsel mutlak konumlanır (video rayındaki ile aynı çözüm). */
.yanKapak{
  position:relative;display:block;border-radius:var(--yaricap);overflow:hidden;
  background:var(--murekkep);box-shadow:0 18px 40px -22px rgba(0,0,0,.6);
  transition:transform 320ms cubic-bezier(.2,.6,.3,1);
  min-height:0;
}
.yanKapak:hover{transform:translateY(-4px)}
/* Dergi kapakları hep aynı oranda (3/4) olduğu için kutu da 3/4 tutulur:
   kapak kutuyu tam doldurur, bulanık zemine gerek kalmaz. (Yayıncı isteği:
   "arkaplanın blurlu olması iyi durmuyor".) */
.yanKapak{aspect-ratio:3/4}
.yanKapak img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yanKapak .gorsel--bos{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.yanKapak__yazi{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(10,12,16,.88));
}
.yanKapak__yazi b{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--kirmizi-acik,#ff8a80);margin-bottom:3px;
}
.yanKapak__yazi span{display:block;font-size:14px;font-weight:700;line-height:1.35}
@media (max-width:880px){
  /* Tek sütuna düşünce kapak kendi oranında dursun */
  .yanKapak{aspect-ratio:3/4;max-height:520px;margin-inline:auto;width:min(100%,360px)}
}

/* ==========================================================================
   TASLAK DÜZENİ — 12'lik satır ızgarası ve genel amaçlı kutu
   Bölümler panelden "genişlik" alır; ardışık dar bölümler tek satırda
   yan yana dizilir (bkz. SiteController::satirlar).
   ========================================================================== */
.satir{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--ara);align-items:stretch;margin-block:26px;
}

/* Görsel/anket/bülten kutuları satırdaki en uzun kutuya kadar uzar —
   yan yana duran ilan alanları aynı hizada bitsin diye. */
.kutu--esitle{display:flex;flex-direction:column}
/* flex:1 0 auto → temel yükseklik en/boy oranından gelir, satır daha uzunsa
   kutu ona kadar uzar. flex-basis:0 verilirse iki görsel kutusunun olduğu
   satırda ikisinin de doğal yüksekliği kalmıyor ve satır çöküyor. */
.kutu--esitle .kutu__govde{flex:1 0 auto;aspect-ratio:var(--oran-govde,var(--oran,16/9))}
.kutu--esitle .kutu__oge{position:relative;height:100%}
.kutu--esitle .anket{height:100%}
/* Kare mutlak konumlanır: yüksekliği kutunun oranı belirlesin. Akışta
   kalırsa görselin KENDİ oranı kazanıyor ve kutu istenenden uzun çıkıyor
   (geniş ilan alanı 446 yerine 595px oluyordu). */
.kutu--esitle .kutu__kare{position:absolute;inset:0}
.kutu--esitle .kutu__kare > img,
.kutu--esitle .kutu__kare--yer-tutucu{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
/* Dönen görsel kutusunda kareler üst üste yığılı; oran gövdede tutuluyor */
.kutu--esitle .donen{aspect-ratio:var(--oran,16/9)}
.kutu--tam{grid-column:span 12}
.kutu--ucte-iki{grid-column:span 8}
.kutu--yarim{grid-column:span 6}
.kutu--ucte-bir{grid-column:span 4}

.kutu__basi{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.kutu__basi::before{content:"";width:4px;height:21px;background:var(--kirmizi);border-radius:2px;flex-shrink:0}
.kutu__basi h2{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.kutu__basi a{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;color:var(--soluk);white-space:nowrap;
}
.kutu__basi a:hover{color:var(--kirmizi)}
.kutu__basi a svg{width:12px;height:12px}

/* Gövde: sabit kutuda tek kare, dönen kutuda kareler üst üste yığılır.
   Izgara ile yığmak yüksekliği en uzun kareye göre ayarlar — mutlak
   konumlamada olduğu gibi kırpılma olmaz. */
.kutu__govde{
  position:relative;display:grid;gap:var(--ara);
  grid-template-columns:repeat(var(--sutun,1),minmax(0,1fr));
}
.kutu__govde > .kutu__oge{min-width:0}
/* Dönen kutuda kareler tek hücrede üst üste yığılır */
.donen{grid-template-columns:1fr}
.donen > .kutu__oge{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity 520ms ease}
.donen > .kutu__oge.aktif{opacity:1;visibility:visible}

.kutu__kare{display:block;position:relative;overflow:hidden;border-radius:var(--yaricap)}
.kutu__kare > img{
  width:100%;height:100%;display:block;object-fit:cover;
  aspect-ratio:var(--oran,16/9);background:var(--cizgi-2);
}
.kutu__kare .gorsel--bos{aspect-ratio:var(--oran,16/9);border-radius:var(--yaricap)}
.kutu__gorsel{aspect-ratio:var(--oran,16/9)}

.kutu__yazi{display:block;padding:11px 2px 2px}
.kutu__yazi .us{
  display:block;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--kirmizi);margin-bottom:5px;
}
.kutu__yazi b{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px;font-weight:700;line-height:1.36;
}
.kutu__yazi .tarih{display:block;margin-top:6px}
.kutu__kare--yazi:hover .kutu__yazi b{color:var(--kirmizi)}

/* Video karesi: oynat düğmesi ve başlık görselin üstünde */
.kutu__kare--video .kutu__yazi{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.78));
}
.kutu__kare--video .kutu__yazi b{-webkit-line-clamp:2;font-size:14px}
.kutu__oynat{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;transition:background var(--gecis);
}
.kutu__kare--video:hover .kutu__oynat{background:var(--kirmizi)}
.kutu__oynat svg{width:20px;height:20px;margin-left:2px}

/* Dergi kapağı karesi: altında "SAYI 112" */
.kutu__kare--kapak > img,.kutu__kare--kapak .gorsel--bos{aspect-ratio:var(--oran,3/4);object-fit:contain;background:var(--zemin-2)}
.kutu__sayi{
  position:absolute;left:0;right:0;bottom:0;padding:20px 10px 9px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-align:center;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
}

/* Dergiye Abone Ol düğmesi */
.kutu__abone{
  display:grid;place-items:center;min-height:64px;padding:14px 16px;
  border-radius:var(--yaricap);background:var(--kirmizi);color:#fff;
  font-size:15px;font-weight:800;text-align:center;transition:background var(--gecis);
}
.kutu__abone:hover{background:var(--kirmizi-koyu)}

.kutu__bulten{
  display:flex;flex-direction:column;justify-content:center;height:100%;
  padding:22px 20px;border-radius:var(--yaricap);
  background:var(--murekkep);color:#fff;
}
.kutu__bulten p{font-size:15px;font-weight:700;line-height:1.45;margin-bottom:14px}
.kutu__bulten form{display:flex;gap:8px;flex-wrap:wrap}
.kutu__bulten input[type=email]{
  flex:1;min-width:0;height:42px;padding:0 13px;border-radius:var(--yaricap);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  color:#fff;font:inherit;font-size:14px;
}
.kutu__bulten input[type=email]::placeholder{color:rgba(255,255,255,.55)}
.kutu__bulten input[type=email]:focus{outline:0;border-color:var(--kirmizi);background:rgba(255,255,255,.14)}
.kutu__bulten button{
  height:42px;padding:0 18px;border:0;border-radius:var(--yaricap);cursor:pointer;
  background:var(--kirmizi);color:#fff;font:inherit;font-size:14px;font-weight:800;
  transition:background var(--gecis);
}
.kutu__bulten button:hover{background:var(--kirmizi-koyu)}
.kutu__bulten small{display:block;width:100%;margin-top:9px;font-size:12px;color:rgba(255,255,255,.7)}

/* --- Dönen kutunun okları ve noktaları ---------------------------------
   Denetimler doğrudan kutuya değil, GÖRSEL alanıyla aynı ölçüdeki bu kaba
   konur. Yazı kutusunda kare, görselin altındaki başlığı da kapsıyor;
   denetimler kutuya bağlanınca noktalar tarihin üstüne biniyordu. */
.donen__araclar{
  position:absolute;top:0;left:0;right:0;z-index:4;pointer-events:none;
  aspect-ratio:var(--oran,16/9);
}
.donen__araclar > *{pointer-events:auto}
/* Görsel kutusu satır boyunca uzuyor; kap da onunla uzasın. En/boy oranı
   BURADA açıkça iptal edilmeli: mutlak konumda üst+alt verilse bile
   tarayıcı oranı uygulamaya devam ediyor ve noktalar ortada kalıyordu. */
.kutu--esitle .donen__araclar{aspect-ratio:auto;bottom:0}

.donen__ok{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.42);color:#fff;border:0;cursor:pointer;
  opacity:0;transition:opacity var(--gecis),background var(--gecis);
}
.donen:hover .donen__ok,.donen:focus-within .donen__ok{opacity:1}
.donen__ok:hover{background:var(--kirmizi)}
.donen__ok--geri{left:8px}
.donen__ok--ileri{right:8px}
.donen__ok svg{width:15px;height:15px}
@media (hover:none){.donen__ok{display:none}}

/* Noktalar kutunun en altında durur. Yazı kutularında kare, görselin
   altındaki başlığı da kapsadığı için "ortada kalıyor" görünüyordu. */
.donen__nokta{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;gap:5px;justify-content:center;
  padding:9px 0 7px;background:linear-gradient(transparent,rgba(0,0,0,.28));
  border-radius:0 0 var(--yaricap) var(--yaricap);
}
.donen__nokta button{background:rgba(0,0,0,.28)}
.kutu--gorsel .donen__nokta,.kutu--kapak .donen__nokta{background:linear-gradient(transparent,rgba(0,0,0,.4))}
.kutu--gorsel .donen__nokta button{background:rgba(255,255,255,.45)}
.donen__nokta button{
  width:22px;height:4px;border-radius:2px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.42);position:relative;overflow:hidden;
}
.donen__nokta button[aria-current="true"]{background:rgba(255,255,255,.75)}
.donen__nokta .donen__dolgu{
  position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;
}

@media (max-width:1024px){
  .kutu--ucte-iki{grid-column:span 12}
  .kutu--yarim{grid-column:span 6}
  .kutu--ucte-bir{grid-column:span 6}
}
@media (max-width:700px){
  .satir{gap:18px}
  .kutu--yarim,.kutu--ucte-bir,.kutu--ucte-iki{grid-column:span 12}
  .kutu__govde{grid-template-columns:repeat(min(var(--sutun,1),2),minmax(0,1fr))}
}

/* --- Anket -------------------------------------------------------------- */
.anket{padding:16px;border:1px solid var(--cizgi);border-radius:var(--yaricap);background:var(--zemin)}
.anket__soru{font-size:15px;font-weight:800;line-height:1.4;margin-bottom:13px}
.anket__sik{display:flex;flex-direction:column;gap:8px}
.anket__dugme{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 12px;border:1px solid var(--cizgi);border-radius:var(--yaricap);
  background:var(--zemin);cursor:pointer;overflow:hidden;text-align:left;
  transition:border-color var(--gecis);
}
.anket__dugme:hover{border-color:var(--kirmizi)}
.anket__dugme.secili{border-color:var(--kirmizi)}
.anket__dolgu{
  position:absolute;left:0;top:0;bottom:0;background:rgba(230,58,48,.12);
  transition:width 420ms ease;width:0;
}
.anket__ad{position:relative;font-size:14px;font-weight:600;flex:1;min-width:0}
.anket__yuzde{position:relative;font-size:13px;font-weight:800;color:var(--kirmizi);opacity:0}
.anket--sonuc .anket__yuzde{opacity:1}
.anket--sonuc .anket__dugme{cursor:default}
.anket__alt{display:flex;gap:10px;align-items:baseline;margin-top:11px;font-size:12px;color:var(--soluk)}
.anket__alt[hidden]{display:none}
.anket__not{flex:1;min-width:0}

/* --- Manşet yanı: abone düğmesi + dönen dergi kapakları ------------------ */
.yanSutun{display:flex;flex-direction:column;gap:12px;min-width:0}
.yanAbone{
  display:grid;place-items:center;padding:13px 14px;border-radius:var(--yaricap);
  background:var(--kirmizi);color:#fff;font-size:14px;font-weight:800;
  text-align:center;transition:background var(--gecis);
}
.yanAbone:hover{background:var(--kirmizi-koyu)}
.yanKapaklar{position:relative;display:grid;flex:1;min-height:0}
.yanKapaklar > .yanKapak{grid-area:1/1;min-width:0}
.yanKapaklar.donen > .yanKapak{opacity:0;visibility:hidden;transition:opacity 520ms ease}
.yanKapaklar.donen > .yanKapak.aktif{opacity:1;visibility:visible}

/* Yayınlar kartındaki sayı açıklaması. (Bu alan panelde girilebiliyordu ama
   Son Sayı bölümü taslak düzeninde kapandığı için sitede hiç görünmüyordu.) */
.sayi-kart__aciklama{
  font-size:13px;line-height:1.5;color:var(--metin-2);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* İçeriği henüz girilmemiş kutu: alanın yeri kırmızıyla durur. */
.kutu__kare--yer-tutucu{
  display:block;width:100%;height:100%;aspect-ratio:var(--oran,16/9);
  background:var(--kirmizi);border-radius:var(--yaricap);
}

/* Kutudaki görsel kareyi tam doldursun (kenarları kırpılır). Panelden
   seçilir; varsayılan, yayıncının önceki isteği gereği kırpmadan
   sığdırmaktır — o zaman boşluğu görselin bulanık kopyası doldurur. */
.kutu__gorsel--doldur::before{display:none}
.kutu__gorsel--doldur img{object-fit:cover}

/* Görsel (ilan) kutusunda da aynı seçim var. Kırpılmadan sığdırılınca
   afişin tamamı görünür; kalan boşluk düz koyu zeminle dolar (bulanık
   zemini yayıncı kapaklarda beğenmemişti). Tek sütunda yan kutuyla boy
   eşitlemesi olmadığından görsel kendi oranında durur, küçülüp iki yanında
   koca şeritler kalmaz. */
.kutu--esitle .kutu__kare--sigdir > img{object-fit:contain;background:var(--murekkep)}
@media (max-width:700px){
  .kutu--esitle .kutu__govde:has(.kutu__kare--sigdir){aspect-ratio:auto}
  .kutu--esitle .kutu__kare--sigdir{position:relative}
  .kutu--esitle .kutu__kare--sigdir > img{height:auto}
}

/* --- Yayınlar sayfası: abonelik kutusu ----------------------------------- */
.abone{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;
  margin:28px 0 6px;padding:24px 28px;border-radius:var(--yaricap);
  background:var(--murekkep);color:#fff;scroll-margin-top:90px;
}
.abone__yazi{flex:1 1 320px;min-width:0}
.abone__yazi h2{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.abone__yazi p{margin-top:7px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);max-width:58ch}
.abone__dugme{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  padding:13px 20px;border-radius:var(--yaricap);background:var(--kirmizi);color:#fff;
  font-size:15px;font-weight:800;transition:background var(--gecis);word-break:break-all;
}
.abone__dugme:hover{background:var(--kirmizi-koyu)}
.abone__dugme svg{width:19px;height:19px;flex-shrink:0}
.abone:target{box-shadow:0 0 0 3px var(--kirmizi)}
@media (max-width:600px){ .abone{padding:20px} .abone__dugme{width:100%;justify-content:center} }

/* Atatürk ovali: tablette barlarla birlikte küçülür; menü gizlenince
   (≤880px) yalnız kırmızı başlığın içinde durur. */
@media (max-width:1024px){
  :root{--ataturk-y:100px;--ataturk-g:82px}
  /* Sağ blok tablet aralığında sıkılaşır, menü yazısı küçülür: oval yer
     kapladığı için menünün son bağlantısı (İletişim) kırpılıyordu */
  .basB__sag{gap:8px}
  .basB__ara input{width:94px}
  .basB__menu{gap:15px}
  .basB__menu a{font-size:13px}
}
@media (min-width:1025px) and (max-width:1100px){
  /* hava durumu da göründüğü için sağ blok ve menü biraz sıkılaşır */
  .basB__ic{gap:22px}
  .basB__menu{gap:16px}
  .basB__ara input{width:96px}
}
@media (max-width:960px){
  /* 881–960px: logo, arama ve boşluklar biraz daralır, İletişim kırpılmaz */
  .basB__ic{gap:14px}
  .basB__logo img{width:152px}
  .basB__menu{gap:12px}
  .basB__ara input{width:84px}
}
@media (max-width:880px){
  :root{--ataturk-y:54px;--ataturk-g:45px}
  .basB__ataturk{top:6px}
  body:has(.basB__ataturk) .gezB__ic{padding-right:0}
}
@media (max-width:600px){ :root{--ataturk-y:48px;--ataturk-g:40px} .basB__ataturk{top:6px} }