/* ============================================================
   Apple MOTION katmanı — SADECE ana sayfa (body.apple).
   Koyu tema KORUNUR (renk değişmez); üstüne Apple kalitesinde
   yumuşak geçiş/animasyon: fade+rise+scale+blur giriş (keyframe),
   kademeli (staggered) giriş, rafine easing, nav geçişi, parallax,
   hover mikro-etkileşimleri. Diğer sayfalar bu dosyayı yüklemez.

   Giriş animasyonu `translate`/`scale` (bağımsız özellik) kullanır;
   hover ise `transform` kullanır → ikisi ÇAKIŞMAZ (hızlı hover +
   yavaş giriş bir arada mümkün olur).
   ============================================================ */

:root {
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-apple-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Apple-grade giriş (fade + rise + scale + blur) ---------- */
body.apple .reveal {
  opacity: 0;
  translate: 0 40px;
  scale: 0.985;
  filter: blur(8px);
  will-change: opacity, translate, scale, filter;
}
body.apple .reveal.in {
  animation: appleReveal 0.9s var(--ease-apple) both;
}
@keyframes appleReveal {
  to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.apple .reveal { opacity: 1; translate: none; scale: none; filter: none; }
  body.apple .reveal.in { animation: none; }
}

/* ---------- NAV — hero üzerinde şeffaf, scroll'da koyu-frosted (Apple geçişi) ---------- */
body.apple .nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background 0.5s var(--ease-apple-soft),
              border-color 0.5s var(--ease-apple-soft),
              backdrop-filter 0.5s var(--ease-apple-soft);
}
body.apple .nav.solid {
  background: rgba(12, 11, 9, 0.72);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* ---------- Butonlar — Apple mikro-etkileşim (transform, girişle çakışmaz) ---------- */
body.apple .btn {
  transition: transform 0.45s var(--ease-apple), filter 0.3s ease;
}
body.apple .btn:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.05); }
body.apple .btn:active { transform: scale(0.97); }

/* ---------- Kartlar — yumuşak Apple hover ---------- */
body.apple .card {
  transition: transform 0.55s var(--ease-apple), border-color 0.55s var(--ease-apple),
              box-shadow 0.55s var(--ease-apple);
}
body.apple .card:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 163, 61, 0.5);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
body.apple .card-photo img { transition: transform 0.9s var(--ease-apple); }
body.apple .card:hover .card-photo img { transform: scale(1.06); }

/* ---------- how-item / how-visual / faq hover geçişleri ---------- */
body.apple .how-item {
  transition: border-color 0.5s var(--ease-apple), background 0.5s var(--ease-apple),
              transform 0.5s var(--ease-apple);
}
body.apple .how-item:hover { transform: translateX(6px); }
/* Parallax için will-change görsele ayrı katman verir; kapsayıcı border-radius'u bu
   katmana uygulanmaz → köşe yuvarlaklığını doğrudan görsele de veriyoruz (Apple ~22px). */
body.apple .how-visual { border-radius: 22px; }
body.apple .how-visual img {
  border-radius: 22px;
  transition: transform 0.2s linear;
  will-change: transform;
}
body.apple .faq-item {
  transition: border-color 0.4s var(--ease-apple), background 0.4s var(--ease-apple),
              box-shadow 0.4s var(--ease-apple);
}
body.apple .faq-item[open] { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
body.apple .faq-item summary::after { transition: transform 0.4s var(--ease-apple); }

/* ---------- Influencer şeridi: çirkin native scrollbar gizlenir (oklar + otomatik kayma var) ---------- */
body.apple .inf-strip {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* eski Edge/IE */
  padding-bottom: 0;
}
body.apple .inf-strip::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari */

/* ---------- Ok butonları ---------- */
body.apple .inf-arrow {
  transition: border-color 0.4s var(--ease-apple), color 0.4s var(--ease-apple),
              transform 0.4s var(--ease-apple), opacity 0.3s ease;
}
body.apple .inf-arrow:hover { transform: translateY(-50%) scale(1.08); }