/* HAREKET KATMANI
 *
 * İLKE: Hareket süs değil, ANLAM taşır. Her animasyon bir soruya cevap verir:
 *   · "Bir şey oldu mu?"        → durum değişimi görünür olmalı
 *   · "Nereden geldi bu?"       → yeni içerik nereden çıktığını göstermeli
 *   · "Sistem çalışıyor mu?"    → bekleme boş ekran olmamalı
 * Bunları yapmayan animasyon eklenmez; sayfa yavaş hissettirir.
 *
 * SÜRELER: 120–420ms. 500ms üstü "yavaş", 100ms altı "olmadı" hissi verir.
 * YUMUŞATMA: çıkışta hızlı başlayıp yavaşlayan eğri (ease-out) — nesne
 * yerine oturuyormuş gibi durur. Doğrusal (linear) mekanik hissettirir.
 *
 * ERİŞİLEBİLİRLİK: `prefers-reduced-motion` bir tercih değil, TIBBİ bir
 * ihtiyaçtır (vestibüler bozukluk, migren, epilepsi). O tercihte hareket
 * TAMAMEN kapanır; içerik yine de görünür kalır — animasyonu kapatmak
 * içeriği gizlemek anlamına gelemez.
 */

:root {
  --sure-hizli: 140ms;
  --sure:       240ms;
  --sure-yavas: 420ms;
  --egri:       cubic-bezier(.22, .61, .36, 1);   /* ease-out */
  --egri-yay:   cubic-bezier(.34, 1.3, .64, 1);   /* hafif geri tepme */
}

/* ══════════════════════════════════════════ KAYDIRINCA BELİRME */

/* Başlangıç durumu YALNIZCA JS açıldığında uygulanır (html.js sınıfı).
 * Aksi hâlde JS yüklenmezse veya hata verirse sayfa BOŞ kalırdı —
 * animasyon uğruna içeriği kaybetmek kabul edilemez. */
.js [data-belir] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--sure-yavas) var(--egri),
              transform var(--sure-yavas) var(--egri);
  will-change: opacity, transform;
}
.js [data-belir].gorundu {
  opacity: 1;
  transform: none;
  will-change: auto;   /* bittiğinde bırak — açık kalırsa bellek tüketir */
}

/* Sıralı gecikme: kart ızgarası tek blok hâlinde değil, soldan sağa akar */
.js [data-belir][data-gecikme="1"] { transition-delay: 60ms; }
.js [data-belir][data-gecikme="2"] { transition-delay: 120ms; }
.js [data-belir][data-gecikme="3"] { transition-delay: 180ms; }
.js [data-belir][data-gecikme="4"] { transition-delay: 240ms; }
.js [data-belir][data-gecikme="5"] { transition-delay: 300ms; }

/* ══════════════════════════════════════════════ MİKRO ETKİLEŞİM */

.btn {
  transition: background var(--sure-hizli) var(--egri),
              border-color var(--sure-hizli) var(--egri),
              color var(--sure-hizli) var(--egri),
              transform 90ms var(--egri),
              box-shadow var(--sure-hizli) var(--egri);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(63, 95, 208, .28);
}

/* Kartlar: yükselme + gölge. Yalnızca transform ve opacity animasyonu
 * yapılır — width/height/top animasyonu her karede yeniden düzen
 * hesaplatır ve düşük donanımda kekeler. */
.tile, .tpl, .cv-card, .plan {
  transition: transform var(--sure) var(--egri),
              border-color var(--sure) var(--egri),
              box-shadow var(--sure) var(--egri);
}
.tile:hover, .plan:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(17,17,17,.05), 0 12px 32px rgba(17,17,17,.07);
}
.sec-dark .tile:hover { box-shadow: 0 12px 32px rgba(0,0,0,.35); }

/* Küçük resim hafifçe yakınlaşır — "tıklanabilir" sinyali */
.cv-kapak .paper { transition: transform var(--sure-yavas) var(--egri); }
.cv-card:hover .cv-kapak .paper { transform: scale(calc(var(--k, .33) * 1.03)); }

/* ══════════════════════════════════════════ GİRİŞ ANİMASYONLARI */

@keyframes yukari-bel {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes belir {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@keyframes olcek-bel {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

.anim-yukari { animation: yukari-bel var(--sure) var(--egri) both; }
.anim-belir  { animation: belir var(--sure) var(--egri) both; }
.anim-olcek  { animation: olcek-bel var(--sure) var(--egri-yay) both; }

/* Çerez bandı ve bildirimler alttan gelir */
.cookie { animation: cookie-gir 380ms var(--egri-yay) both; }
@keyframes cookie-gir {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════ BİLDİRİM BALONCUĞU */

.toast-alan {
  position: fixed; z-index: 240; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff;
  border-radius: var(--r-pill); padding: 11px 20px;
  font-size: 14.5px; font-weight: 450;
  box-shadow: 0 4px 12px rgba(17,17,17,.16), 0 18px 40px rgba(17,17,17,.2);
  animation: toast-gir 280ms var(--egri-yay) both;
  max-width: min(380px, calc(100vw - 36px));
}
.toast.cikis { animation: toast-cik 200ms var(--egri) both; }
.toast-ok  { background: var(--ok); }
.toast-err { background: var(--danger); }
.toast .im { font-size: 15px; line-height: 1; }

@keyframes toast-gir {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-cik {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(.97); }
}

@media (max-width: 480px) {
  .toast-alan { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
}

/* ══════════════════════════════════════════════ İSKELET YÜKLEME */

/* Dönen çark "bir şey oluyor" der; iskelet "NE geleceğini" de söyler.
 * Beklenen düzeni önden göstermek, gelince sayfanın zıplamasını önler. */
.iskelet {
  background: linear-gradient(90deg,
    var(--sunken) 25%, #EDEDED 37%, var(--sunken) 63%);
  background-size: 400% 100%;
  animation: kayan-parilti 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes kayan-parilti {
  from { background-position: 100% 50% }
  to   { background-position: 0 50% }
}

/* ══════════════════════════════════════════════ SAYI SAYACI */

/* Sayılar tabular hizalanır: sayarken genişlik değişmemeli, yoksa
 * yanındaki metin her karede kayar. */
[data-say] { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════ KAYIT DURUMU ROZETİ */

.durum-rozet { transition: opacity var(--sure) var(--egri), transform var(--sure) var(--egri); }
.durum-rozet.yeni { animation: rozet-nabiz 420ms var(--egri); }
@keyframes rozet-nabiz {
  0%   { transform: scale(1) }
  40%  { transform: scale(1.06) }
  100% { transform: scale(1) }
}

/* ══════════════════════════════════════════ HAREKETİ AZALT */

@media (prefers-reduced-motion: reduce) {
  /* Hareket kapanır ama İÇERİK GÖRÜNÜR KALIR. `data-belir` öğeleri
   * opacity:0 ile başladığı için burada açıkça geri açılmaları şart —
   * unutulursa bu kullanıcılar boş bir sayfa görür. */
  .js [data-belir],
  .js [data-belir].gorundu {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .anim-yukari, .anim-belir, .anim-olcek,
  .cookie, .toast, .iskelet, .durum-rozet.yeni {
    animation: none !important;
  }
  .btn:hover:not(:disabled),
  .tile:hover, .plan:hover,
  .cv-card:hover .cv-kapak .paper { transform: none !important; }
}