/* ============================================================
   SVKL — hareket katmanı
   Yalnızca transform/opacity/filter kullanır (GPU dostu).
   prefers-reduced-motion açıksa tüm hareket kapanır.
   ============================================================ */

/* ---------- 1. Aurora: yavaşça dönen tek ışık ---------- */
@keyframes svkl-aurora{
  0%   { transform:translateX(-50%) rotate(0deg)   scale(1);    opacity:.9 }
  50%  { transform:translateX(-50%) rotate(180deg) scale(1.14); opacity:1 }
  100% { transform:translateX(-50%) rotate(360deg) scale(1);    opacity:.9 }
}
body::after{ animation:svkl-aurora 34s linear infinite; will-change:transform }

/* ---------- 2. Kademeli giriş ---------- */
@keyframes svkl-rise{
  from{ opacity:0; transform:translateY(26px); filter:blur(7px) }
  to  { opacity:1; transform:none;             filter:blur(0) }
}
.anim-seq > *{ animation:svkl-rise .85s cubic-bezier(.16,1,.3,1) backwards }
.anim-seq > *:nth-child(1){ animation-delay:.06s }
.anim-seq > *:nth-child(2){ animation-delay:.14s }
.anim-seq > *:nth-child(3){ animation-delay:.22s }
.anim-seq > *:nth-child(4){ animation-delay:.30s }
.anim-seq > *:nth-child(5){ animation-delay:.38s }
.anim-seq > *:nth-child(6){ animation-delay:.46s }

/* ---------- 3. Görünürlük varyantları ---------- */
.reveal,[data-rv]{
  opacity:0; will-change:transform,opacity;
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal{ transform:translateY(22px) }
[data-rv="left"] { transform:translateX(-28px) }
[data-rv="right"]{ transform:translateX(28px) }
[data-rv="scale"]{ transform:scale(.955) }
[data-rv="up"]   { transform:translateY(26px) }
.reveal.active,[data-rv].active{ opacity:1; transform:none }

/* ızgara çocuklarına dalga gecikmesi */
.stagger > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.stagger.active > *{ opacity:1; transform:none }
.stagger.active > *:nth-child(1){ transition-delay:.02s }
.stagger.active > *:nth-child(2){ transition-delay:.07s }
.stagger.active > *:nth-child(3){ transition-delay:.12s }
.stagger.active > *:nth-child(4){ transition-delay:.17s }
.stagger.active > *:nth-child(5){ transition-delay:.22s }
.stagger.active > *:nth-child(6){ transition-delay:.27s }
.stagger.active > *:nth-child(7){ transition-delay:.32s }
.stagger.active > *:nth-child(8){ transition-delay:.37s }
.stagger.active > *:nth-child(9){ transition-delay:.42s }
.stagger.active > *:nth-child(n+10){ transition-delay:.46s }

/* ---------- 4. Başlıkta kelime kelime açılma ---------- */
.word{ display:inline-block; opacity:0; transform:translateY(.5em) rotate(2deg);
       transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) }
.words.active .word{ opacity:1; transform:none }

/* ---------- 5. Okuma ilerleme çubuğu ---------- */
.progress{ position:fixed; left:0; top:0; height:2px; z-index:200; width:0;
           background:linear-gradient(90deg,#8B5CF6,#22D3EE);
           box-shadow:0 0 12px rgba(139,92,246,.7); transition:width .1s linear }

/* ---------- 6. Buton parıltısı ---------- */
.btn-primary{ position:relative; overflow:hidden }
.btn-primary::after{
  content:''; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(139,92,246,.35), transparent);
  transform:skewX(-18deg); transition:left .65s cubic-bezier(.4,0,.2,1); pointer-events:none;
}
.btn-primary:hover::after{ left:150% }

/* ---------- 7. Kart 3B eğilme ---------- */
.card{ transform-style:preserve-3d }
.card.tilting{ transition:transform .1s linear }

/* ---------- 8. Dönen gradyan kenarlık (öne çıkan kutu) ---------- */
@property --svkl-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes svkl-rotate{ to{ --svkl-angle:360deg } }
.glow-border{ position:relative; isolation:isolate }
.glow-border::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; z-index:-1;
  background:conic-gradient(from var(--svkl-angle),
             transparent 0deg, #8B5CF6 60deg, #22D3EE 120deg, transparent 200deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:svkl-rotate 6s linear infinite;
}

/* ---------- 9. Kayan sektör şeridi ---------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:svkl-marquee 42s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes svkl-marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee-item{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px;
               border:1px solid var(--line); background:rgba(255,255,255,.03);
               font-size:14px; color:var(--text-2); white-space:nowrap }
.marquee-item i{ width:6px; height:6px; border-radius:50%; background:var(--mc,#8B5CF6);
                 box-shadow:0 0 9px var(--mc,#8B5CF6); flex:0 0 auto }

/* ---------- 10. Sayaç ---------- */
.count{ font-variant-numeric:tabular-nums }

/* ---------- 11. Nazik yüzme ---------- */
@keyframes svkl-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
.float{ animation:svkl-float 6s ease-in-out infinite }

/* ---------- 12. Bağlantı altı çizgisi ---------- */
.nav > a{ position:relative }
.nav > a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-5px; height:1.5px;
  background:linear-gradient(90deg,#8B5CF6,#22D3EE); transition:right .3s cubic-bezier(.16,1,.3,1);
}
.nav > a:hover::after{ right:0 }

/* ---------- 13. Üst bar küçülmesi ---------- */
.topbar{ transition:height .3s ease, background .3s ease, border-color .3s ease }
.topbar.shrunk .topbar-in{ height:58px }
.topbar-in{ transition:height .3s cubic-bezier(.4,0,.2,1) }
.topbar.shrunk{ background:rgba(8,8,11,.9) }

/* ---------- 14. İkon nabzı ---------- */
@keyframes svkl-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(74,222,128,.5) }
                       70%{ box-shadow:0 0 0 7px rgba(74,222,128,0) } }
.pill .dot{ animation:svkl-pulse 2.4s ease-out infinite }

/* ---------- yasal metinler animasyona bağlı olamaz ----------
   Gizlilik politikaları Google Play Console'a kayıtlı adreslerdir.
   JavaScript çalışmasa, gözlemci tetiklenmese veya sayfa doğrudan
   #spectra-privacy çapasıyla açılsa bile metin görünür olmalıdır. */
#spectra-privacy, #stick-jump-privacy,
#spectra-privacy .reveal, #stick-jump-privacy .reveal,
#spectra-privacy [data-rv], #stick-jump-privacy [data-rv]{
  opacity:1 !important; transform:none !important; filter:none !important;
}

/* ---------- hareketi azalt ---------- */
@media (prefers-reduced-motion: reduce){
  body::after,.marquee-track,.glow-border::before,.float,.pill .dot{ animation:none !important }
  .anim-seq > *{ animation:none !important }
  .reveal,[data-rv],.stagger > *,.word{ opacity:1 !important; transform:none !important;
                                         transition:none !important; filter:none !important }
  .progress{ display:none }
}