/*----
  Proje    : Kırklareli Çilingirci
  Dosya    : view-transitions.css
  Versiyon   : 2.4.0
  Geliştirici: Karaca Teknoloji
  Açıklama   : Smooth Crossfade (No Flicker)
----*/

@view-transition {
    navigation: auto;
}

/* ============================================
   SABİT ELEMENTLER (Animasyon Yok)
   ============================================ */

.top-bar {
    view-transition-name: topbar;
}

.navbar {
    view-transition-name: navbar;
}

.bottom-menu {
    view-transition-name: bottom-menu;
}

footer {
    view-transition-name: footer;
}

/* ============================================
   ANA İÇERİK - CROSSFADE
   ============================================ */

main {
    view-transition-name: main-content;
}

/* Eski ve yeni içerik aynı anda - Crossfade */
::view-transition-old(main-content),
::view-transition-new(main-content) {
    animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
}

/* Eski içerik - Yavaşça kaybolur */
::view-transition-old(main-content) {
    animation-name: fade-out;
}

/* Yeni içerik - Yavaşça belirginleşir (aynı anda) */
::view-transition-new(main-content) {
    animation-name: fade-in;
}

/* Sabit elementler - Animasyon yok */
::view-transition-old(topbar),
::view-transition-new(topbar),
::view-transition-old(navbar),
::view-transition-new(navbar),
::view-transition-old(bottom-menu),
::view-transition-new(bottom-menu),
::view-transition-old(footer),
::view-transition-new(footer) {
    animation: none;
}

/* ============================================
   CROSSFADE KEYFRAMES
   ============================================ */

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   VIEW TRANSITION GROUP (Üst Üste Bindirme)
   ============================================ */

::view-transition-group(main-content) {
    animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
}

/* ============================================
   MOBİL OPTİMİZASYON
   ============================================ */

@media (max-width: 768px) {
    ::view-transition-old(main-content),
    ::view-transition-new(main-content) {
        animation-duration: 0.2s;
    }

    ::view-transition-group(main-content) {
        animation-duration: 0.2s;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*),
    ::view-transition-group(*) {
        animation: none !important;
    }
}

/* ============================================
   SMOOTH SCROLL
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* Geçiş sırasında scroll'u engelle */
html:has(::view-transition) {
    overflow: clip;
}