/* ============================================================
   KABADAYI — animasyon katmanı (CSS)
   Neo-noir: ağır, kararlı, yaylanmayan hareket.
   SADECE transform + opacity animasyonu. Layout tetikleyen
   (width/height/top/left/margin) hiçbir şey animasyonlanmaz.
   Bağımlılık yok. file:// üzerinden çalışır.
   ============================================================ */

:root{
  /* çıkışlar (exit / settle) */
  --e-cikis: cubic-bezier(.2,.9,.25,1);
  /* girişler (enter) */
  --e-giris: cubic-bezier(.4,0,.6,1);
  --s-ekran: 240ms;
  --s-cikis: 200ms;
  --s-buton: 110ms;
  --s-kart: 230ms;
}

/* ============================================================
   1 · KEYFRAME'LER — hepsi transform/opacity
   ============================================================ */

@keyframes anim-kayma{
  from{ opacity:0; transform:translate3d(18px,0,0) }
  to  { opacity:1; transform:translate3d(0,0,0) }
}
@keyframes anim-kayma-geri{
  from{ opacity:0; transform:translate3d(-18px,0,0) }
  to  { opacity:1; transform:translate3d(0,0,0) }
}
@keyframes anim-solma{
  from{ opacity:0; transform:scale(1.012) }
  to  { opacity:1; transform:scale(1) }
}
@keyframes anim-yukari{
  from{ opacity:0; transform:translate3d(0,16px,0) }
  to  { opacity:1; transform:translate3d(0,0,0) }
}
@keyframes anim-cikis{
  from{ opacity:1; transform:translate3d(0,0,0) }
  to  { opacity:0; transform:translate3d(0,-8px,0) }
}

/* iş kartı destesi — dağıtılan kâğıt hissi, zıplama yok */
@keyframes anim-kart{
  from{ opacity:0; transform:translate3d(0,14px,0) rotate(-1.4deg) }
  60% { opacity:1 }
  to  { opacity:1; transform:translate3d(0,0,0) rotate(0deg) }
}

/* kademeli liste girişi (satır, mekân, semt) */
@keyframes anim-kademe{
  from{ opacity:0; transform:translate3d(0,9px,0) }
  to  { opacity:1; transform:translate3d(0,0,0) }
}

/* sarsıntı — yakalanma, reis, kalem kırılması */
@keyframes anim-titre{
  0%  { transform:translate3d(0,0,0) }
  18% { transform:translate3d(-5px,2px,0) }
  36% { transform:translate3d(4px,-2px,0) }
  54% { transform:translate3d(-3px,1px,0) }
  72% { transform:translate3d(2px,-1px,0) }
  100%{ transform:translate3d(0,0,0) }
}

/* tam ekran flaş */
@keyframes anim-parla{
  from{ opacity:var(--parla-op,.5) }
  to  { opacity:0 }
}

/* çok yavaş nefes — "sıcak" kart, aktif semt, birikmiş haraç.
   Hızlı yanıp sönme yok; sokak lambası titremesi gibi. */
@keyframes anim-nefes{
  0%,100%{ opacity:.30 }
  50%    { opacity:.85 }
}
@keyframes anim-nabiz{
  0%,100%{ transform:scale(1);      opacity:1 }
  50%    { transform:scale(1.014);  opacity:.94 }
}

/* buton basma — geri bildirim, yay değil */
@keyframes anim-bas{
  0%  { transform:scale(1) }
  45% { transform:scale(.962) }
  100%{ transform:scale(1) }
}

/* sayı değişince kısa dikey vurgu */
@keyframes anim-vurgu{
  0%  { transform:translate3d(0,0,0) }
  35% { transform:translate3d(0,-3px,0) }
  100%{ transform:translate3d(0,0,0) }
}

/* ============================================================
   2 · .anim-* YARDIMCI SINIFLARI
   ============================================================ */

.anim-kayma,
.anim-kayma-geri,
.anim-solma,
.anim-yukari,
.anim-kart,
.anim-kademe,
.anim-titre,
.anim-bas,
.anim-vurgu{
  will-change:transform,opacity;
  backface-visibility:hidden;
}

.anim-kayma      { animation:anim-kayma      var(--s-ekran) var(--e-giris) both }
.anim-kayma-geri { animation:anim-kayma-geri var(--s-ekran) var(--e-giris) both }
.anim-solma      { animation:anim-solma      var(--s-ekran) var(--e-giris) both }
.anim-yukari     { animation:anim-yukari     var(--s-ekran) var(--e-giris) both }
.anim-cikis      { animation:anim-cikis      var(--s-cikis) var(--e-cikis) both }
.anim-kart       { animation:anim-kart       var(--s-kart)  var(--e-cikis) both }
.anim-kademe     { animation:anim-kademe     200ms          var(--e-cikis) both }
.anim-titre      { animation:anim-titre      220ms          var(--e-cikis) both }
.anim-bas        { animation:anim-bas        var(--s-buton) var(--e-cikis) both }
.anim-vurgu      { animation:anim-vurgu      260ms          var(--e-cikis) both }

/* animasyon bitince JS sınıfı kaldırır; kalırsa da zarar yok */
.anim-bitti{ will-change:auto }

/* gizle / göster — display'e dokunmadan */
.anim-gizli{ opacity:0; pointer-events:none }

/* kademeli giriş için hazır gecikmeler (JS kullanmadan da olur) */
.anim-g1{ animation-delay:40ms }  .anim-g2{ animation-delay:80ms }
.anim-g3{ animation-delay:120ms } .anim-g4{ animation-delay:160ms }
.anim-g5{ animation-delay:200ms } .anim-g6{ animation-delay:240ms }
.anim-g7{ animation-delay:280ms } .anim-g8{ animation-delay:320ms }

/* ============================================================
   3 · MEVCUT SINIFLARA EKLEMELER
   (inline <style>'dan SONRA yüklenir, aynı özgüllükte üste yazar)
   ============================================================ */

/* --- ekranlar --- */
.scr{ transform:translateZ(0) }          /* kendi katmanı, geçişte repaint ucuz */

/* --- butonlar: basma daha kararlı, sönme yumuşak --- */
.btn{
  transition:transform var(--s-buton) var(--e-cikis),
             box-shadow var(--s-buton) var(--e-cikis),
             opacity 180ms linear;
}
.btn:disabled{ opacity:.4; transform:none }
/* JS butonBas() ile birlikte kullanılınca çift hareket olmaz:
   :active geometrisi (translateY) korunur, ölçek JS'te composite:add ile eklenir */

/* --- iş kartları --- */
.kart{
  transition:transform 110ms var(--e-cikis),
             border-color 180ms linear,
             opacity 180ms linear;
}
.kart:active{ transform:scale(.972) }
/* sıcak kart: kızıl köşe parıltısı çok yavaş nefes alır */
.kart.sicak::after{
  animation:anim-nefes 3.6s ease-in-out infinite;
  will-change:opacity;
}

/* --- mekânlar --- */
.mekan{
  transition:transform 110ms var(--e-cikis), opacity 200ms linear;
}
.mekan:active{ transform:scale(.988) }
.mekan.kilitli{ transform:none }
.mekanbtn{ transition:transform 100ms var(--e-cikis), box-shadow 100ms var(--e-cikis) }

/* --- semtler --- */
.semt{
  position:relative;
  transition:transform 110ms var(--e-cikis), opacity 200ms linear;
}
.semt:active{ transform:scale(.982) }
.semt.aktif::after{
  content:'';
  position:absolute; inset:0;
  border-radius:13px;
  pointer-events:none;
  box-shadow:0 0 0 1px var(--amber) inset, 0 0 18px rgba(255,179,64,.16) inset;
  animation:anim-nefes 4.2s ease-in-out infinite;
  will-change:opacity;
}

/* --- sonuç satırları --- */
.satir{ transition:opacity 200ms linear }

/* --- toast: giriş/çıkış çıkış eğrisiyle, sadece transform+opacity --- */
#toast{
  transform:translate(-50%,-14px) scale(.98);
  transition:opacity 200ms var(--e-cikis),
             transform 260ms var(--e-cikis);
  will-change:transform,opacity;
}
#toast.on{ transform:translate(-50%,0) scale(1) }

/* --- birikmiş haraç butonu: çok hafif nabız, "beni al" --- */
#birikimKutu .btn{ animation:anim-nabiz 3.4s ease-in-out infinite }

/* --- ısı barı: mevcut width geçişi kalıyor (bar dolumu),
       ek olarak ısı parıltısı daha ağır sönsün --- */
#isiglow{ transition:opacity 700ms var(--e-cikis) }

/* --- mini-oyun pip'leri --- */
.pip{ transition:opacity 160ms linear, transform 160ms var(--e-cikis) }
.pip.ok,.pip.no{ transform:scaleY(1.5) }

/* ============================================================
   4 · prefers-reduced-motion — her şey anında
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .kart.sicak::after,
  .semt.aktif::after,
  #birikimKutu .btn{ animation:none !important; opacity:1 }
}