/* ==========================================================================
   Dergi Anadolu — index2 ek katmanı
   1) logo animasyonu  2) kaydırma belirmesi  3) reklam slaytı
   4) manşette yavaş yakınlaşma  5) küçük etkileşim iyileştirmeleri
   stil.css'in ÜSTÜNE yüklenir.
   ========================================================================== */

/* --- 1. Logo animasyonu --------------------------------------------------
   Logo iki parçaya ayrıldı: dikey "DERGİ" ve "ANADOLU".
   Açılışta DERGİ soldan kayar, ANADOLU soldan sağa silinerek belirir.        */
.marka{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.marka__dergi{width:16px;flex-shrink:0}
.marka__anadolu{width:180px}
.marka img{width:100%}
@media (max-width:880px){.marka{gap:6px}.marka__dergi{width:14px}.marka__anadolu{width:150px}}
@media (max-width:600px){.marka__dergi{width:12px}.marka__anadolu{width:134px}}

/* Durgun hâl GÖRÜNÜR; animasyon .oynat sınıfıyla tetiklenir ve JS bunu belirli
   aralıklarla yeniden çalar ("son eklenen" şeridindeki mantık). */
.marka__dergi{opacity:1;transform:none}
.marka__anadolu{clip-path:inset(0 0 0 0)}
.marka.oynat .marka__dergi{animation:dergiGir 560ms cubic-bezier(.22,.9,.3,1) 60ms both}
.marka.oynat .marka__anadolu{animation:anadoluAc 820ms cubic-bezier(.62,.05,.2,1) 200ms both}
@keyframes dergiGir{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes anadoluAc{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* imleçle üstüne gelince DERGİ hafifçe yukarı zıplar */
.marka:hover .marka__dergi{animation:none;opacity:1;transform:translateY(-2px);transition:transform 220ms cubic-bezier(.34,1.56,.64,1)}

/* gezintideki mini logo, belirirken aynı silme hareketini yapar */
.gezinti__mini img{clip-path:inset(0 100% 0 0);transition:clip-path 480ms cubic-bezier(.62,.05,.2,1) 60ms}
.gezinti.kaydi .gezinti__mini img{clip-path:inset(0 0 0 0)}

/* --- 2. Kaydırınca beliren bloklar ---------------------------------------
   Gizleme yalnızca .js varken uygulanır: betik çalışmazsa (hata, engelli JS)
   içerik görünmez kalmasın.                                                 */
.js .bel{opacity:0;transform:translateY(16px);transition:opacity 620ms ease,transform 620ms cubic-bezier(.22,.7,.3,1)}
.js .bel.gorundu{opacity:1;transform:none}
/* ızgara çocukları sırayla gelsin */
.js .bel-sira > *{opacity:0;transform:translateY(14px)}
.js .bel-sira.gorundu > *{animation:sirayla 560ms cubic-bezier(.22,.7,.3,1) forwards}
.bel-sira.gorundu > *:nth-child(1){animation-delay:0ms}
.bel-sira.gorundu > *:nth-child(2){animation-delay:60ms}
.bel-sira.gorundu > *:nth-child(3){animation-delay:120ms}
.bel-sira.gorundu > *:nth-child(4){animation-delay:180ms}
.bel-sira.gorundu > *:nth-child(5){animation-delay:240ms}
.bel-sira.gorundu > *:nth-child(6){animation-delay:300ms}
.bel-sira.gorundu > *:nth-child(7){animation-delay:360ms}
.bel-sira.gorundu > *:nth-child(8){animation-delay:420ms}
@keyframes sirayla{to{opacity:1;transform:none}}

/* bölüm başlığındaki kırmızı çizgi soldan çizilir */
.bolum-basi h2{border-bottom-color:transparent;position:relative}
.bolum-basi h2::after{
  content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;
  background:var(--kirmizi);transform:scaleX(0);transform-origin:left;
  transition:transform 620ms cubic-bezier(.22,.7,.3,1) 120ms;
}
.bel.gorundu .bolum-basi h2::after,.gorundu > .bolum-basi h2::after{transform:scaleX(1)}

/* --- 3. Reklam slaytı ---------------------------------------------------- */
.reklam-slayt{padding-block:20px}
.reklam-slayt__etiket{
  display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#a7adb6;margin-bottom:6px;text-align:center;
}
/* Banner oranları çok farklı (2.9 ile 5.1 arası). Sabit kadraj hepsini
   kırpıyordu; kutu en yaygın orana kuruldu ve görseller içeri sığdırılıyor. */
.reklam-slayt__kutu{
  position:relative;border-radius:var(--yaricap);overflow:hidden;
  background:#fff;aspect-ratio:1140/250;
  border:1px solid var(--cizgi);
}
/* geçiş: gelen sağdan kayar, giden sola çıkar */
.reklam-slayt__oge{
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(32px);
  transition:opacity 520ms ease,transform 640ms cubic-bezier(.22,.7,.3,1),visibility 520ms;
}
.reklam-slayt__oge.aktif{opacity:1;visibility:visible;transform:none}
.reklam-slayt__oge.cikan{transform:translateX(-32px)}
.reklam-slayt__oge img{width:100%;height:100%;object-fit:contain}
.reklam-slayt__nokta{
  position:absolute;right:10px;bottom:10px;z-index:3;display:flex;gap:6px;
  background:rgba(0,0,0,.4);padding:6px 8px;border-radius:20px;
}
.reklam-slayt__nokta button{
  position:relative;overflow:hidden;
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background var(--gecis),width 260ms cubic-bezier(.22,.7,.3,1),border-radius var(--gecis);
}
.reklam-slayt__nokta button[aria-current="true"]{background:rgba(255,255,255,.4);width:28px;border-radius:4px}
/* aktif noktada geçişe kalan süre dolar */
.reklam-slayt__dolgu{
  position:absolute;inset:0;background:#fff;
  transform:scaleX(0);transform-origin:left;
}

/* --- 4. Manşette yavaş yakınlaşma ---------------------------------------- */
.slayt__oge img{transform:scale(1.06);transition:transform 800ms ease}
.slayt__oge.aktif img{animation:yavasYakin 7200ms ease-out forwards}
@keyframes yavasYakin{from{transform:scale(1.005)}to{transform:scale(1.075)}}

/* slayt yazısı da hafifçe yükselerek gelsin */
.slayt__oge .slayt__yazi > *{opacity:0;transform:translateY(12px)}
.slayt__oge.aktif .slayt__yazi > *{animation:sirayla 520ms cubic-bezier(.22,.7,.3,1) forwards}
.slayt__oge.aktif .slayt__yazi > *:nth-child(1){animation-delay:80ms}
.slayt__oge.aktif .slayt__yazi > *:nth-child(2){animation-delay:160ms}
.slayt__oge.aktif .slayt__yazi > *:nth-child(3){animation-delay:240ms}

/* --- 4b. İlk ekran girişi ------------------------------------------------
   Şerit → reklam → slayt → yan kartlar sırayla yerine oturur. Bunlar
   kaydırmayla değil, sayfa açılışında oynar.                               */
.js .giris{opacity:0;transform:translateY(16px);animation:girisGel 720ms cubic-bezier(.22,.7,.3,1) both}
.js .giris--1{animation-delay:40ms}
.js .giris--2{animation-delay:150ms}
.js .giris--3{animation-delay:260ms}
.js .giris--4{animation-delay:370ms}
@keyframes girisGel{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* --- 5. Küçük dokunuşlar ------------------------------------------------- */
.kart .gorsel::after,.mini .gorsel::after,.kategori__lider .gorsel::after{
  content:"";position:absolute;inset:0;background:var(--kirmizi);
  opacity:0;transition:opacity var(--gecis);mix-blend-mode:multiply;
}
a:hover > .gorsel::after{opacity:.07}

.g-bag,.ust__dugme,.menu-dugme{-webkit-tap-highlight-color:transparent}

/* şerit etiketi nabız gibi atsın (dikkat çekici ama sessiz) */
.serit__etiket{position:relative;overflow:hidden}
.serit__etiket::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.38) 50%,transparent 80%);
  transform:translateX(-120%);animation:parla 4.5s ease-in-out 1.5s infinite;
}
@keyframes parla{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* --- Hareket azaltma ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .marka.oynat .marka__dergi,.marka.oynat .marka__anadolu{animation:none}
  .marka__dergi{opacity:1;transform:none}
  .marka__anadolu{clip-path:none}
  .js .giris{opacity:1;transform:none;animation:none}
  .reklam-slayt__oge{transform:none}
  .reklam-slayt__oge.cikan{transform:none}
  .gezinti__mini img{clip-path:none;transition:none}
  .bel,.bel-sira > *{opacity:1;transform:none;animation:none}
  .bolum-basi h2::after{transform:scaleX(1);transition:none}
  .slayt__oge img,.slayt__oge.aktif img{animation:none;transform:none}
  .slayt__oge .slayt__yazi > *{opacity:1;transform:none;animation:none}
  .serit__etiket::after{display:none}
}