/* ============================================================
   OKEY 101 - Native View Transitions API
   Sayfalar arası geçişlerde (Giriş -> Lobi -> Masa -> Admin vb. tam sayfa navigasyonları) VE aynı
   sayfa içindeki bazı dinamik DOM güncellemelerinde (masa listesi yenileme, admin panel sekme
   değişimi — bkz. lobby.js/admin.js + view-transitions.js) tarayıcı desteği varsa yumuşak, native
   geçiş animasyonları sağlar.

   TARAYICI DESTEĞİ: şu an (2026) Chrome/Edge 126+ hem sayfalar-arası hem aynı-sayfa geçişleri,
   Chrome/Edge 111-125 sadece aynı-sayfa geçişleri destekliyor; Safari ve Firefox bu API'yi henüz
   desteklemiyor. Desteklenmeyen tarayıcılarda aşağıdaki `@view-transition` kuralı ve
   `::view-transition-*` seçicileri SESSİZCE YOK SAYILIR — site tamamen normal (anlık geçişli)
   şekilde çalışmaya devam eder. Yani bu TAMAMEN aşamalı bir iyileştirmedir (progressive
   enhancement); hiçbir işlevsellik bu API'nin varlığına bağımlı değildir.
   ============================================================ */

/* Sayfalar arası (tam sayfa navigasyon) geçişleri etkinleştir — ör. "Giriş Yap" sayfasından
   "Lobi"ye, ya da Lobi'den bir masaya tıklandığında sayfa aniden değişmek yerine yumuşakça geçer. */
@view-transition {
  navigation: auto;
}

/* "Hareketi azalt" tercih edenler için: View Transitions yine tetiklenebilir ama süreleri sıfıra
   yakın tutularak fiilen anlık geçiş gibi davranır (erişilebilirlik). */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* KALİTELİ GEÇİŞ: her sayfa yenilemesinde/başka sayfaya geçişte VE aynı sayfa içi dinamik
   güncellemelerde (masa listesi, admin sekmeleri) devreye giren, sinematik hissettiren bir geçiş —
   hafif bulanıklaşma (blur) + yumuşak kayma + ölçekleme birlikte kullanılıyor, tarayıcının ham
   (ani) kesişmeli fade'inden çok daha "kaliteli" görünüyor, ama önceki 1-2sn'lik sürümün aksine
   gereksiz yere uzun/ağır değil — akıcı ve premium hissettiren orta uzunlukta (~480-560ms) bir
   geçiş. cubic-bezier eğrileri elle seçildi: çıkışta hızlı başlayıp yavaşça sönen bir "ease-in",
   girişte ise yumuşak başlayıp belirgin biçimde yerine "oturan" bir "ease-out" (overshoot benzeri)
   kullanılıyor — bu ikisinin FARKLI olması geçişe derinlik/profesyonellik katıyor. */
::view-transition-old(root) {
  animation: ok-vt-fade-out 480ms cubic-bezier(0.55, 0, 1, 0.45) both;
}
::view-transition-new(root) {
  animation: ok-vt-fade-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ok-vt-fade-out {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to   { opacity: 0; transform: translateY(-16px) scale(0.98); filter: blur(4px); }
}
@keyframes ok-vt-fade-in {
  from { opacity: 0; transform: translateY(16px) scale(1.015); filter: blur(5px); }
  55%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Marka rozeti ("101" karosu) neredeyse her sayfanın başlığında var — bir isim vererek tarayıcının
   bunu sayfa geçişleri arasında AYNI ÖĞE gibi algılayıp konum/boyut farkını yumuşakça ("morph")
   taşımasını sağlıyoruz, aniden kaybolup yeniden belirmek yerine. */
.brand-tile {
  view-transition-name: ok-brand-tile;
}

/* Aynı anda birden fazla .brand-tile aktif/görünür olabileceği nadir durumlarda (ör. bir modal
   içinde tekrar kullanılmışsa) view-transition-name çakışması tarayıcı hatası vermesin diye
   otomatik olarak devre dışı bırakılır — güvenlik ağı. */
.ok-modal .brand-tile,
.ok-modal-overlay .brand-tile {
  view-transition-name: none;
}