/* AYG Teklif Sihirbazı — geçişler ve mikro etkileşimler
   İlke: sade ve hızlı (150–250 ms), yalnızca opacity/transform.
   "Hareketi azalt" açık cihazlarda en alttaki blok her şeyi kapatır.
   Tokenlar (--hiz, --hiz-kisa, --egri, --egri-cikis): uygulama.css */

/* ============================================================
   1. Sayfalar arası geçiş (çok sayfalı uygulama)
   Chrome/Edge 126+, Safari 18.2+: View Transitions. Üst bar yerinde kalır.
   ============================================================ */
@view-transition { navigation: auto; }
.ustbar { view-transition-name: ustbar; }

::view-transition-old(root) { animation: var(--hiz-kisa) var(--egri-cikis) both vt-sol; }
::view-transition-new(root) { animation: var(--hiz) var(--egri) both vt-yuksel; }
::view-transition-group(ustbar) { animation-duration: 0s; }

@keyframes vt-sol { to { opacity: 0; } }
@keyframes vt-yuksel { from { opacity: 0; transform: translateY(4px); } }

/* Desteklemeyen tarayıcı (head'deki satır içi betik html'e .vt-yok ekler): içerik yüklenince belirir */
html.vt-yok .sayfa-bas .ic,
html.vt-yok main { animation: var(--hiz) var(--egri) both vt-yuksel; }

/* ============================================================
   2. Sihirbaz adımları (aynı belge içi View Transition, yönlü)
   ============================================================ */
#alan { view-transition-name: adim-icerik; }
::view-transition-old(adim-icerik) { animation: var(--hiz-kisa) var(--egri-cikis) both adim-cik-sol; }
::view-transition-new(adim-icerik) { animation: var(--hiz) var(--egri) both adim-gir-sag; }
html[data-yon="geri"]::view-transition-old(adim-icerik) { animation-name: adim-cik-sag; }
html[data-yon="geri"]::view-transition-new(adim-icerik) { animation-name: adim-gir-sol; }
/* Adım içi kök (başlık bandı, adım çubuğu) yumuşakça çapraz solar */
html[data-yon]::view-transition-old(root),
html[data-yon]::view-transition-new(root) { animation-duration: var(--hiz-kisa); animation-name: vt-capraz; }

@keyframes adim-cik-sol { to { opacity: 0; transform: translateX(-16px); } }
@keyframes adim-cik-sag { to { opacity: 0; transform: translateX(16px); } }
@keyframes adim-gir-sag { from { opacity: 0; transform: translateX(16px); } }
@keyframes adim-gir-sol { from { opacity: 0; transform: translateX(-16px); } }
@keyframes vt-capraz { from { opacity: 1; } }

.adim-ilerleme span { transition: width var(--hiz) var(--egri); }
.adimlar li { transition: background-color var(--hiz-kisa), color var(--hiz-kisa), box-shadow var(--hiz-kisa); }
.adimlar li::before { transition: background-color var(--hiz-kisa), border-color var(--hiz-kisa), color var(--hiz-kisa); }

/* ============================================================
   3. Bileşenler
   ============================================================ */

/* Düğmeler: renk/gölge geçişi + basma */
.btn { transition: background-color var(--hiz-kisa), border-color var(--hiz-kisa), color var(--hiz-kisa), box-shadow var(--hiz-kisa), transform var(--hiz-kisa) var(--egri); }
.btn:active:not(:disabled) { transform: scale(.98); }
.ustbar .ana-menu > a, .ustbar .kullanici-dugme, .ustbar .menu-dugme, .ustbar .kullanici-menu button, .sekmeler button { transition: background-color var(--hiz-kisa), color var(--hiz-kisa); }
.ustbar .ana-menu > a::after { transition: transform var(--hiz) var(--egri); }
.ustbar { transition: box-shadow var(--hiz); }

/* Form öğeleri */
input, select, textarea { transition: border-color var(--hiz-kisa), box-shadow var(--hiz-kisa), background-color var(--hiz-kisa); }
.hatali { animation: salla 260ms var(--egri) 1; }
@keyframes salla { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

/* Tablo satırları ve kartlar */
table.liste td { transition: background-color var(--hiz-kisa); }
.kalem { transition: border-color var(--hiz-kisa), box-shadow var(--hiz); }

/* Diyaloglar: açılış/kapanış (Chrome 117+, Safari 17.5+; diğerlerinde anlık) */
dialog {
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity var(--hiz) var(--egri), transform var(--hiz) var(--egri),
              overlay var(--hiz) allow-discrete, display var(--hiz) allow-discrete;
  box-shadow: var(--golge-3);
}
dialog[open] { opacity: 1; transform: none; }
@starting-style { dialog[open] { opacity: 0; transform: translateY(8px) scale(.98); } }
dialog::backdrop {
  background-color: rgba(18,21,56,0);
  transition: background-color var(--hiz), overlay var(--hiz) allow-discrete, display var(--hiz) allow-discrete;
}
dialog[open]::backdrop { background-color: rgba(18,21,56,.45); }
@starting-style { dialog[open]::backdrop { background-color: rgba(18,21,56,0); } }

/* Açılır menüler: kullanıcı menüsü, mobil ana menü, mobil adım listesi */
.ustbar .kullanici-menu {
  transition: opacity var(--hiz-kisa) var(--egri), transform var(--hiz-kisa) var(--egri), display var(--hiz-kisa) allow-discrete;
  opacity: 1; transform: none;
}
.ustbar .kullanici-menu[hidden] { opacity: 0; transform: translateY(-4px) scale(.98); }
@starting-style { .ustbar .kullanici-menu:not([hidden]) { opacity: 0; transform: translateY(-4px) scale(.98); } }

@media (max-width: 760px) {
  .ustbar .ana-menu { transition: opacity var(--hiz-kisa) var(--egri), transform var(--hiz) var(--egri), display var(--hiz) allow-discrete; opacity: 0; transform: translateY(-6px); }
  .ustbar .ana-menu.acik { opacity: 1; transform: none; }
  @starting-style { .ustbar .ana-menu.acik { opacity: 0; transform: translateY(-6px); } }

  .adimlar { transition: opacity var(--hiz-kisa) var(--egri), transform var(--hiz) var(--egri), display var(--hiz) allow-discrete; opacity: 0; transform: translateY(-6px); }
  .adimlar.acik { opacity: 1; transform: none; }
  @starting-style { .adimlar.acik { opacity: 0; transform: translateY(-6px); } }

  /* Telefonda tam ekran diyalog alttan gelir */
  dialog { transform: translateY(24px); }
  dialog[open] { transform: none; }
  @starting-style { dialog[open] { transform: translateY(24px); } }
}

/* Bildirim */
.bildirim { transition: opacity var(--hiz) var(--egri), transform var(--hiz) var(--egri); }

/* Kayıt göstergesi */
.kayit-durumu.kaydediliyor::before { animation: nabiz 900ms ease-in-out infinite; }
.kayit-durumu.kaydedildi::before { animation: belir-olcek var(--hiz) var(--egri) 1; }
@keyframes nabiz { 50% { opacity: .25; transform: scale(.7); } }
@keyframes belir-olcek { from { opacity: 0; transform: scale(.6); } }

/* İskelet parıltısı */
.iskelet { animation: parilti 1.3s linear infinite; }
@keyframes parilti { from { background-position: 100% 0; } to { background-position: -120% 0; } }

/* Yeni öğe girişi (JS sınıfı ekler) ve genel belirme */
.belir { animation: var(--hiz) var(--egri) both vt-yuksel; }
.gorseller img { animation: var(--hiz) var(--egri) both solarak; }
@keyframes solarak { from { opacity: 0; } }

/* Toplam değişince kısa vurgu */
.toplamlar .vurgula { animation: vurgu 700ms ease-out 1; }
@keyframes vurgu { from { background-color: #FFF1C9; } to { background-color: transparent; } }

/* Önizleme iframe'i hazır olunca solar */
.onizleme iframe { transition: opacity var(--hiz) var(--egri); }

/* Ayarlar sekme çizgisi */
.sekmeler .sekme-cizgi { transition: transform var(--hiz) var(--egri), width var(--hiz) var(--egri); }

/* Yenilenen liste */
.yenileniyor { transition: opacity var(--hiz-kisa); }

/* ============================================================
   4. Hareketi azalt: tüm hareket kapanır, durumlar anlık değişir
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .iskelet { animation: none !important; }
}