/* ============================================================
   Orbimeet hareket katmanı
   Kural: hareket dikkat çekmek için değil, yönlendirmek için.
   Her şey prefers-reduced-motion ile kapanır.
   ============================================================ */

:root {
  --an-yay:  cubic-bezier(.22, 1, .36, 1);
  --an-yumu: cubic-bezier(.4, 0, .2, 1);
}

/* Sticky menü altında kalan çapaları düzelt */
section[id], div[id].hero { scroll-margin-top: 92px; }
html { scroll-behavior: smooth; }

/* ---------- 1. Kaydırınca beliren ögeler ---------- */

[data-an] {
  opacity: 0;
  transition: opacity .72s var(--an-yay), transform .72s var(--an-yay), filter .72s var(--an-yay);
  transition-delay: var(--an-gec, 0ms);
  will-change: opacity, transform;
}
[data-an="yukari"]  { transform: translate3d(0, 30px, 0); }
[data-an="sol"]     { transform: translate3d(-34px, 0, 0); }
[data-an="sag"]     { transform: translate3d(34px, 0, 0); }
[data-an="buyu"]    { transform: scale(.94); }
[data-an="sonuk"]   { filter: blur(9px); transform: translate3d(0, 16px, 0); }
[data-an].an-geldi  { opacity: 1; transform: none; filter: none; will-change: auto; }

/* ---------- 2. Hero giriş sırası ---------- */

.an-giris > * { animation: an-yukselt .82s var(--an-yay) backwards; }
.an-giris > *:nth-child(1) { animation-delay: .06s }
.an-giris > *:nth-child(2) { animation-delay: .14s }
.an-giris > *:nth-child(3) { animation-delay: .22s }
.an-giris > *:nth-child(4) { animation-delay: .30s }
.an-giris > *:nth-child(5) { animation-delay: .38s }
@keyframes an-yukselt {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
}

/* Hero görseli biraz daha geç ve derinden gelsin */
.an-sahne { animation: an-sahne 1.1s var(--an-yay) .28s backwards; }
@keyframes an-sahne {
  from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.96); }
}

/* Hero'daki ışık yavaşça nefes alsın */
.hero::before { animation: an-nefes 13s ease-in-out infinite; }
.kapanis::before { animation: an-nefes 17s ease-in-out infinite reverse; }
@keyframes an-nefes {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50%      { transform: translate(-34px, 26px) scale(1.14); opacity: .82; }
}

/* ---------- 3. Fareyle hafif eğilen görsel ---------- */

.an-egik {
  transform-style: preserve-3d;
  transition: transform .5s var(--an-yay);
}
.an-egik .yigin-foto, .an-egik .yigin-urun, .an-egik .canli-rozet {
  transition: transform .5s var(--an-yay), box-shadow .5s var(--an-yay);
}
.an-egik:hover .yigin-urun { transform: translate3d(0, -10px, 40px); }
.an-egik:hover .canli-rozet { transform: translate3d(-6px, -4px, 60px); }

/* ---------- 4. Kart etkileşimleri ---------- */

.urun, .fark-kart, .hkart, .kkart, .fiyat-kart, .paket {
  transition: transform .34s var(--an-yay), box-shadow .34s var(--an-yay),
              border-color .34s var(--an-yay);
}
.urun:hover, .hkart:hover, .kkart:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(10, 16, 32, .1);
}
.fark-kart:hover { transform: translateY(-4px); }

/* İkon kutusu kartla birlikte canlansın */
.urun .urun-simge { transition: transform .38s var(--an-yay), background .25s ease, color .25s ease; }
.urun:hover .urun-simge { transform: rotate(-7deg) scale(1.1); }

/* "Devamını oku" oku ilerlesin */
.urun-oku svg, .ok-bag svg { transition: transform .26s var(--an-yay); }
.urun:hover .urun-oku svg { transform: translateX(5px); }

/* Fark kartlarındaki büyük numara */
.fark-no { transition: transform .4s var(--an-yay), opacity .3s ease; }
.fark-kart:hover .fark-no { transform: scale(1.12) translateY(-3px); opacity: 1; }

/* ---------- 5. Butonlar ---------- */

.btn { position: relative; overflow: hidden; }
.btn:active { transform: scale(.97); }
.btn-ana::after, .btn-beyaz::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%);
  transform: translateX(-130%);
}
.btn-ana:hover::after, .btn-beyaz:hover::after { animation: an-parlat .85s ease; }
@keyframes an-parlat { to { transform: translateX(130%); } }

/* ---------- 6. Kayan şerit ---------- */

.serit:hover .serit-ray { animation-play-state: paused; }
.serit-ray { will-change: transform; }

/* ---------- 7. Bölüm başlığı altı çizgisi ---------- */

.bolum-ust .etiket { position: relative; display: inline-block; padding-bottom: 7px; }
.bolum-ust .etiket::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--an-yay) .2s;
}
.bolum-ust.an-geldi .etiket::after, [data-an].an-geldi .etiket::after { transform: scaleX(1); }

/* ---------- 8. Okuma ilerleme çubuğu ---------- */

.an-ilerleme {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 950;
  width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #2540e8, #7c5cff);
  pointer-events: none;
}

/* ---------- 9. Yukarı çık ---------- */

.an-yukari {
  position: fixed; right: 22px; bottom: 22px; z-index: 940;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: #0a1020; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(10, 16, 32, .3);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s var(--an-yay), transform .35s var(--an-yay), visibility .3s,
              background .2s ease;
}
.an-yukari.an-gorunur { opacity: 1; visibility: visible; transform: none; }
.an-yukari:hover { background: #2540e8; transform: translateY(-3px); }
.an-yukari svg { width: 19px; height: 19px; }

/* ---------- 10. Sayaç ---------- */

.an-sayac { font-variant-numeric: tabular-nums; }

/* ---------- Kapanış ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-an] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .an-giris > *, .an-sahne, .hero::before, .kapanis::before,
  .serit-ray, .om-bar * {
    animation: none !important;
  }
  .an-ilerleme, .an-yukari { transition: none; }
  * { transition-duration: .01ms !important; }
}