/* Sayfa geçişleri, giriş animasyonları ve mobil uygulama hissi */

/* ---------- Native cross-document View Transitions ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vtOut 140ms ease-in both; }
::view-transition-new(root) { animation: vtIn 240ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* Üst bar ve alt menü geçişte sabit kalır */
#top-navbar { view-transition-name: top-navbar; }
#bottom-navbar { view-transition-name: bottom-navbar; }
::view-transition-group(top-navbar),
::view-transition-group(bottom-navbar) { animation-duration: 0s; }

/* ---------- Fallback (View Transitions desteklemeyen tarayıcılar) ---------- */
html:not(.vt) main { animation: pageEnter 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
html:not(.vt).page-leaving main {
    opacity: 0; transform: translateY(-6px);
    transition: opacity 140ms ease-in, transform 140ms ease-in;
    pointer-events: none;
}
@keyframes pageEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Üst ilerleme çubuğu ---------- */
#nav-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.7);
    opacity: 0; pointer-events: none;
}
#nav-progress.active { opacity: 1; width: 80%; transition: width 2.5s cubic-bezier(0.1, 0.8, 0.2, 1); }

/* ---------- Giriş / kayıt ekranları ---------- */
.auth-card { animation: authCardIn 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.auth-card .auth-bar { transform-origin: left; animation: barGrow 800ms 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.auth-card > h2, .auth-card > p, .auth-card form > *, .auth-card > p:last-child {
    animation: fadeUp 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.auth-card > h2 { animation-delay: 80ms; }
.auth-card > p { animation-delay: 140ms; }
.auth-card form > :nth-child(1) { animation-delay: 200ms; }
.auth-card form > :nth-child(2) { animation-delay: 260ms; }
.auth-card form > :nth-child(3) { animation-delay: 320ms; }
.auth-card form > :nth-child(4) { animation-delay: 380ms; }
.auth-card form > :nth-child(5) { animation-delay: 440ms; }
.auth-card form > :nth-child(n+6) { animation-delay: 500ms; }
.auth-card > p:last-child { animation-delay: 520ms; }

@keyframes authCardIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.auth-card input:focus { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12); }
.auth-card.shake { animation: shake 450ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

/* Yükleniyor butonu */
button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
button.is-loading::after {
    content: ""; position: absolute; width: 1.1rem; height: 1.1rem; top: 50%; left: 50%;
    margin: -0.55rem 0 0 -0.55rem; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
    animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Mobil uygulama hissi ---------- */
html { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
a, button, input, select, textarea, label, [role="button"] { touch-action: manipulation; }
nav a, nav button, button { -webkit-user-select: none; user-select: none; }

@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
    a, button { transition-property: transform, color, background-color, opacity; }
    a:active, button:active { transform: scale(0.97); }
    #bottom-navbar { padding-bottom: env(safe-area-inset-bottom); }
    #bottom-navbar a:active { transform: scale(0.9); }
    #bottom-navbar .nav-indicator { animation: indicatorIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
    #bottom-navbar a.text-indigo-400 svg { animation: iconPop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
    main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important; }
}
@keyframes indicatorIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes iconPop { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }

/* Yüklü uygulama (standalone) modunda çentik / durum çubuğu boşluğu */
@media (display-mode: standalone) {
    #top-navbar { padding-top: env(safe-area-inset-top); }
}

/* ---------- Erişilebilirlik ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}