/* Hareket sistemi. Kural: hareket bilgi taşır — nereden geldiğini, neyin değiştiğini,
   neyin beklediğini söyler. Süsleme için hareket yok.
   prefers-reduced-motion açıkken her şey anında biter (dosyanın sonunda). */

/* ---- Giriş: sayfa ve liste öğeleri aşağıdan belirir, sırayla ---- */
@keyframes yuksel { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes yukselKucuk { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
@keyframes buyu { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes kaySag { from { opacity: 0; transform: translate3d(-12px, 0, 0); } to { opacity: 1; transform: none; } }

.giris { animation: yuksel 460ms cubic-bezier(.2, .7, .2, 1) both; }
.giris-kucuk { animation: yukselKucuk 300ms cubic-bezier(.2, .7, .2, 1) both; }
.giris-buyu { animation: buyu 380ms cubic-bezier(.2, .7, .2, 1) both; }

/* Sıralı geciktirme: öğeye style="--i:3" verilir, 45ms aralıkla açılır. */
.sirali > * { animation: yuksel 420ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.sirali-hizli > * { animation: yukselKucuk 260ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }

/* ---- Bekleme: altın shimmer (iskelet) ---- */
@keyframes shimmer { to { background-position-x: -200%; } }
.iskelet {
  border-radius: var(--r-kucuk); color: transparent !important; user-select: none;
  background: linear-gradient(100deg, rgb(var(--yuzey-2)) 30%, rgb(var(--vurgu) / .14) 48%, rgb(var(--yuzey-2)) 66%);
  background-size: 200% 100%; animation: shimmer 1.5s linear infinite;
}
.iskelet--satir { height: 14px; margin-block: 6px; }
.iskelet--baslik { height: 22px; width: 42%; }

/* ---- Nabız: canlı/bağlı göstergeleri ---- */
@keyframes nabiz {
  0% { box-shadow: 0 0 0 0 rgb(var(--yesil) / .55); }
  70% { box-shadow: 0 0 0 8px rgb(var(--yesil) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--yesil) / 0); }
}
.nabiz { animation: nabiz 2.2s ease-out infinite; }
@keyframes nabizAltin {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
.nabiz-altin { animation: nabizAltin 2.6s ease-in-out infinite; }

/* ---- Dönen yükleyici: altın yay ---- */
@keyframes don { to { transform: rotate(360deg); } }
.donuyor { animation: don 900ms linear infinite; }

/* ---- Akan çizgi: akış şemasındaki bağlantılar boyunca ilerleyen altın ---- */
@keyframes cizgiAk { to { stroke-dashoffset: -28; } }
.ak { stroke-dasharray: 5 9; animation: cizgiAk 1.1s linear infinite; }

/* ---- Yazıyor: üç nokta ---- */
@keyframes zipla { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.yaziyor { display: inline-flex; gap: 4px; align-items: center; }
.yaziyor span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: zipla 1.2s ease-in-out infinite; }
.yaziyor span:nth-child(2) { animation-delay: .15s; }
.yaziyor span:nth-child(3) { animation-delay: .3s; }

/* ---- Vurgulama: bir öğeye "şuraya bak" demek (akış editöründe hedefe git) ---- */
@keyframes belirt {
  0% { box-shadow: 0 0 0 0 rgb(var(--vurgu) / .7), var(--isik-guclu); }
  100% { box-shadow: 0 0 0 12px rgb(var(--vurgu) / 0), none; }
}
.belirt { animation: belirt 1.1s ease-out 2; }

/* ---- Sayaç: rakam yukarıdan dönerek gelir ---- */
@keyframes rakamDon { from { opacity: 0; transform: translate3d(0, -60%, 0); } to { opacity: 1; transform: none; } }
.rakam { display: inline-block; animation: rakamDon 520ms cubic-bezier(.2, .8, .2, 1) both; }

/* ---- Sayfa geçişi: yönlendirici her çizimde .sayfa-giris ekler ---- */
.sayfa-giris { animation: yuksel 380ms cubic-bezier(.2, .7, .2, 1) both; }

/* ---- Modal ve bildirim ---- */
@keyframes modalGel { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes perdeGel { from { opacity: 0; } to { opacity: 1; } }
@keyframes bildirimGel { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.96); } to { opacity: 1; transform: none; } }

/* ---- Yükselme: kart hover'da hafifçe kalkar ve altın kenarı yanar ---- */
.kalk { transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis); }
.kalk:hover { transform: translateY(-2px); }

/* ---- Çizgi çizilir: SVG yolu soldan sağa çizilir (grafikler) ---- */
@keyframes ciz { to { stroke-dashoffset: 0; } }
.cizilen { stroke-dasharray: var(--uz, 400); stroke-dashoffset: var(--uz, 400); animation: ciz 1.1s cubic-bezier(.3, .8, .3, 1) both; }

/* ---- Dolan halka: kurulum ilerleme ölçeri ---- */
@keyframes halkaDol { from { stroke-dashoffset: var(--cevre, 264); } }
.halka-dolu { animation: halkaDol 1.2s cubic-bezier(.3, .8, .3, 1) both; }

/* ---- Yükselen çubuk: analitik ---- */
@keyframes cubukBuyu { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.cubuk { transform-origin: bottom; animation: cubukBuyu 620ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* ---- Erişilebilirlik: hareket azaltılmışsa animasyon yok ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  body::after { animation: none; }
}