/* =====================================================================
   Canlılık katmanı: yönetim paneli, giriş ekranı, öğretmen ve yönetici portalı.
   Dil, veli portalının yaklaşık %70'idir. Ölçüler app.css değişkenlerindedir (--shadow-sm, --shadow-md,
   --shadow-btn, --ease, --dur, --dur-fast, --dur-slow, --lift, --rise); burada sayı dağıtılmaz.
   Bu dosyayı veli ve öğrenci portalı, portal girişi, yazdırma ve resmi belge yerleşimleri YÜKLEMEZ.
   Kurallar: nötr gölge, renkli hale yok; hareket yalnızca transform ve opacity; kalkış 3px'i geçmez;
   yalnız bağlantı olan kart kalkar; tablo satırı hareket etmez. Ayrıntı: DESIGN.md, "Elevation" ve "Motion".
   ===================================================================== */

/* Karanlık panel: gölge yerine zemin ile yüzey arasında hafif fark. */
:root[data-theme="dark"] { --bg: #0e0e0e; }

/* ---------- Personel portalı: portal.css değişkenleri %70'e iner, düğme gölgesi nötrleşir ---------- */
body.portal {
    --rise: 10px;
    --shadow-card: var(--shadow-sm);
    --shadow-lift: var(--shadow-md);
    --shadow-btn: 0 1px 2px rgba(21, 24, 29, .14), 0 4px 10px -4px rgba(21, 24, 29, .22);
    --shadow-bar: 0 -7px 20px -10px rgba(21, 24, 29, .21);
    --shadow-top: 0 6px 18px -12px rgba(21, 24, 29, .24);
    --shadow-seg: 0 1px 2px rgba(21, 24, 29, .07), 0 3px 8px -3px rgba(21, 24, 29, .18);
}
:root[data-theme="dark"] body.portal {
    --edge: inset 0 0 0 transparent;
    --shadow-card: var(--shadow-sm);
    --shadow-lift: var(--shadow-md);
    --shadow-btn: 0 0 0 transparent;
    --shadow-bar: 0 -1px 0 var(--border);
    --shadow-top: 0 1px 0 var(--border);
    --shadow-seg: var(--shadow-sm);
}
/* Sayfa geçişinde bekletme yok: portal.css'teki görünüm geçişi burada animasyonsuzdur ve tek karede biter.
   `@view-transition { navigation: none }` kullanılmaz: portal girişinden gelirken konsola hata düşürür. */
.portal-top, .portal-tabbar { view-transition-name: none; }
::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*),
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
.portal-main input:focus, .portal-main select:focus { box-shadow: none; }
.portal-main input[type=text], .portal-main input[type=email], .portal-main input[type=password],
.portal-main input[type=tel], .portal-main input[type=number], .portal-main select { transition: none; }
.portal-main > * { animation: none; }

/* ---------- Derinlik (yalnız ekranda; baskıda gölge yok) ---------- */
@media screen {
    .card:not(.login-card), .stats, .table-wrap { box-shadow: var(--shadow-sm); }
    .topbar { box-shadow: var(--shadow-sm); }
    .card .card, .card .table-wrap, .card .stats, .modal .card, .modal .table-wrap, .modal .stats,
    .portal-main .table-wrap { box-shadow: none; }
    .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning { box-shadow: var(--shadow-btn); }
    .topbar .btn, .table .btn, .modal-ust .btn { box-shadow: none; }

    /* Bağlantı kartı: artan gölge ayrı katmandadır, yalnız opaklığı değişir. */
    a.card, a.portal-card, .og-hero { position: relative; }
    a.card::after, a.portal-card::after, .og-hero::after {
        content: ""; position: absolute; inset: -1px; border-radius: inherit;
        box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
    }
}

/* ---------- Hareket ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
    @keyframes canli-gir { from { opacity: 0; transform: translateY(var(--rise)); } }
    @keyframes canli-soluk { from { opacity: 0; } }
    @keyframes canli-acil { from { opacity: 0; transform: translateY(-4px); } }
    @keyframes canli-cizgi { from { transform: scaleX(0); } }

    /* Sayfa açılışı: canli.js yalnız yeni sayfada `sayfa-giris` ekler; filtrede ve hızlı iş ekranında oynamaz. */
    .sayfa-giris .content > :not(dialog, .grid, .stats),
    .sayfa-giris .content > .grid > *,
    .sayfa-giris .portal-main > :not(dialog, .yp-grid),
    .sayfa-giris .portal-main > .yp-grid > *,
    .sayfa-giris .minimal-wrap { animation: canli-gir var(--dur) var(--ease) backwards; }
    .sayfa-giris .portal-main > :not(dialog, .yp-grid),
    .sayfa-giris .portal-main > .yp-grid > * { animation-duration: var(--dur-slow); }
    /* Kademe: en çok altı öğe, sonrası altıncıyla birlikte. */
    .sayfa-giris .content > :nth-child(2), .sayfa-giris .content > .grid > :nth-child(2), .sayfa-giris .portal-main > :nth-child(2), .sayfa-giris .yp-grid > :nth-child(2), .sayfa-giris .stats > :nth-child(2) { animation-delay: 30ms; }
    .sayfa-giris .content > :nth-child(3), .sayfa-giris .content > .grid > :nth-child(3), .sayfa-giris .portal-main > :nth-child(3), .sayfa-giris .yp-grid > :nth-child(3), .sayfa-giris .stats > :nth-child(3) { animation-delay: 60ms; }
    .sayfa-giris .content > :nth-child(4), .sayfa-giris .content > .grid > :nth-child(4), .sayfa-giris .portal-main > :nth-child(4), .sayfa-giris .yp-grid > :nth-child(4), .sayfa-giris .stats > :nth-child(4) { animation-delay: 90ms; }
    .sayfa-giris .content > :nth-child(5), .sayfa-giris .content > .grid > :nth-child(5), .sayfa-giris .portal-main > :nth-child(5), .sayfa-giris .yp-grid > :nth-child(5), .sayfa-giris .stats > :nth-child(5) { animation-delay: 120ms; }
    .sayfa-giris .content > :nth-child(n+6), .sayfa-giris .content > .grid > :nth-child(n+6), .sayfa-giris .portal-main > :nth-child(n+6), .sayfa-giris .yp-grid > :nth-child(n+6), .sayfa-giris .stats > :nth-child(n+6) { animation-delay: 150ms; }

    /* Rakam hücreleri: sayı sayma yok; kısa soluklaşma ve çok küçük kayma. */
    .sayfa-giris .stats > * { --rise: 3px; animation: canli-gir var(--dur) var(--ease) backwards; }

    /* Sunucu iletisi (flash) ve yoklama iletisi: uygulamadaki bildirim budur. */
    .content > .alert[role], .portal-main > .alert[role], .minimal-wrap > .alert[role], .yk-msg { animation: canli-gir var(--dur) var(--ease) backwards; }

    /* Bağlantı kartı: küçük kalkış ve gölge artışı; dokunmatikte yalnız basma. */
    a.card, a.portal-card, .og-hero { transition: transform var(--dur) var(--ease); }
    a.card::after, a.portal-card::after, .og-hero::after { transition: opacity var(--dur) var(--ease); }
    @media (hover: hover) {
        a.card:hover, a.portal-card:hover, .og-hero:hover { transform: translateY(var(--lift)); box-shadow: var(--edge, 0 0 0 transparent), var(--shadow-sm); }
        a.card:hover::after, a.portal-card:hover::after, .og-hero:hover::after { opacity: 1; }
        .portal-main .btn-primary:hover { transform: none; }
    }
    a.card:active, a.portal-card:active, .og-hero:active { transform: scale(.986); box-shadow: var(--edge, 0 0 0 transparent), var(--shadow-sm); transition-duration: var(--dur-fast); }

    /* Düğme: basma tepkisi. Tıklamayı geciktirmez. */
    .btn { transition: background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out, filter var(--dur-fast) ease-out, transform var(--dur-fast) var(--ease); }
    .portal-main .btn { transition: background-color var(--dur-fast) ease-out, transform var(--dur-fast) var(--ease); }
    .btn:active, .portal-main .btn:active { transform: scale(.98); transition-duration: var(--dur-fast); }

    /* Menü, sayfalama, kullanıcı: seçim geçişi yalnız renk. */
    .nav-link, .nav-group-title, .user-chip, .pagination-links a, a.stat, .user-dropdown a, .user-dropdown .link-button {
        transition: background-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
    }
    /* Alt menü oku yüksekliğin açılışıyla aynı sürede döner (js/canli.js). Kapanırken [open] sona kadar durur, ok kapanışı sınıftan okur. */
    .nav-group-title::after { transition: transform var(--menu-sure, 280ms) cubic-bezier(.33,0,.2,1); }
    .nav-group.menu-kapaniyor > .nav-group-title::after { transform: rotate(-45deg); }

    /* Alt sekme çubuğu */
    .portal-tab { transition: background-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out, transform var(--dur-fast) var(--ease); }
    .portal-tab .icon { transition: color var(--dur-fast) ease-out; }
    .portal-tab:active { transform: scale(.96); transition-duration: var(--dur-fast); }

    /* Dar ekran çekmecesi */
    .nav-toggle:checked ~ .app-shell .nav-backdrop { animation: canli-soluk var(--dur) ease-out; }

    /* Açılır menü: giriş ve çıkış */
    .user-menu[open] .user-dropdown { animation: canli-acil var(--dur-fast) var(--ease); }
    .user-menu::details-content { opacity: 0; transition: opacity var(--dur-fast) ease-out, content-visibility var(--dur-fast) allow-discrete; }
    .user-menu[open]::details-content { opacity: 1; }
    .ogrenci-sec-liste { animation: canli-acil var(--dur-fast) var(--ease); }

    /* Modal: giriş ve çıkış. Kapanırken tıklama arkadaki sayfaya geçer; bekletme yok. JS yoksa modal sayfada kart olarak kalır. */
    .js dialog.modal[open], .js dialog.modal[open]::backdrop { animation: none; }
    .js dialog.modal {
        opacity: 0; transform: translateY(6px);
        transition: opacity var(--dur-fast) ease-out, transform var(--dur-fast) ease-out, display var(--dur-fast) allow-discrete, overlay var(--dur-fast) allow-discrete;
    }
    .js dialog.modal[open] { opacity: 1; transform: none; transition-duration: var(--dur); transition-timing-function: var(--ease); }
    .js dialog.modal::backdrop {
        opacity: 0;
        transition: opacity var(--dur-fast) ease-out, display var(--dur-fast) allow-discrete, overlay var(--dur-fast) allow-discrete;
    }
    .js dialog.modal[open]::backdrop { opacity: 1; transition-duration: var(--dur); }
    .js dialog.modal:not([open]), .js dialog.modal:not([open])::backdrop { pointer-events: none; }
    @starting-style {
        .js dialog.modal[open] { opacity: 0; transform: translateY(8px); }
        .js dialog.modal[open]::backdrop { opacity: 0; }
    }
}

/* Sekme: alt çizgi ayrı katmandadır, ölçeklenerek gelir. */
@media screen {
    .tabs a { position: relative; }
    .tabs a:hover, .tabs a.active { box-shadow: none; }
    .tabs a::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
        background: var(--border-strong); transform: scaleX(0); transform-origin: left center;
    }
    .tabs a:hover::after { transform: none; }
    .tabs a.active::after { background: var(--primary); transform: none; }
}
@media screen and (prefers-reduced-motion: no-preference) {
    .tabs a::after { transition: transform var(--dur) var(--ease); }
    .sayfa-giris .tabs a.active::after { animation: canli-cizgi var(--dur-slow) var(--ease) backwards; }
}
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 960px) {
    .sidebar { transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow); }
}
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 600px) {
    .js dialog.modal { transform: translateY(16px); }
    .js dialog.modal[open] { transform: none; }
    @starting-style { .js dialog.modal[open] { transform: translateY(20px); } }
}