/* =================================================================
   SITE-THEME.CSS — Theme Toggle & Dark Mode Polish
   Egitim Sosyal Tesisler Mudurlugu
   =================================================================
   v1.0 — _Layout.cshtml inline stillerinden çıkarıldı
   ================================================================= */

/* -----------------------------------------------------------------
   1. THEME TRANSITION — body.theme-transitioning sınıfı
   ----------------------------------------------------------------- */

body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: background-color var(--transition-theme, 350ms),
                color var(--transition-theme, 350ms),
                border-color var(--transition-theme, 350ms),
                fill var(--transition-theme, 350ms) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-transitioning,
    body.theme-transitioning * {
        transition: none !important;
    }
}

/* -----------------------------------------------------------------
   2. THEME TOGGLE BUTTON — Floating UI
   ----------------------------------------------------------------- */

.theme-toggle {
    background: var(--surface-1);
    color: var(--brand-accent);
    border: 1px solid var(--border-rengi);
    cursor: pointer;
    box-shadow: var(--elev-2);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--motion-base);
}

.theme-toggle:hover {
    background: var(--brand-accent);
    color: var(--acik-metin, #FFFFFF);
    border-color: var(--brand-accent);
    transform: scale(1.05) rotate(15deg);
    box-shadow: var(--elev-3);
}

.theme-toggle:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

.theme-toggle__icon-sun,
.theme-toggle__icon-moon {
    transition: transform var(--motion-spring);
}

[data-theme="light"] .theme-toggle__icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle__icon-sun {
    display: none;
}

/* -----------------------------------------------------------------
   3. DARK MODE SPECIFIC TWEAKS
   ----------------------------------------------------------------- */

[data-theme="dark"] {
    color-scheme: dark;
}

/* Image ve background image'lar dark mode'da hafif koyulaştırılır */
[data-theme="dark"] img:not([data-no-darken]) {
    opacity: 0.92;
    transition: opacity var(--motion-base);
}

[data-theme="dark"] img:not([data-no-darken]):hover {
    opacity: 1;
}

/* Decorative gradient overlays — dark'ta daha muted */
[data-theme="dark"] .shape-1,
[data-theme="dark"] .shape-2,
[data-theme="dark"] .shape-3 {
    opacity: 0.04 !important;
}

/* Scrollbar dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    background: var(--surface-0);
    width: 12px;
    height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    border: 3px solid var(--surface-0);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

/* Light scrollbar */
::-webkit-scrollbar {
    background: var(--surface-1);
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    border: 3px solid var(--surface-1);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

/* -----------------------------------------------------------------
   4. SAFE AREA INSETS — iOS notch / home indicator (Phase 4.2)
   -----------------------------------------------------------------
   Bu dosya CSS zincirinde EN SON yuklenir; bu nedenle _Layout.cshtml
   icindeki inline <style> blogunu ve site-layout.css'i override eder.
   env(safe-area-inset-*) desteklenmeyen tarayicilarda fallback 0px'dir,
   yani masaustunde/eski cihazlarda gorsel degisiklik olmaz.
   ----------------------------------------------------------------- */

@supports (padding: max(0px)) {
    body.ios-standalone {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Ust navbar — centik altinda kalmasin.
       Inline stildeki sabit height: 72px, padding eklenince icerigi
       ezmesin diye min-height'a cevrilir. */
    .top-navbar {
        height: auto;
        min-height: calc(72px + env(safe-area-inset-top, 0px));
        padding-top: max(var(--space-3), env(safe-area-inset-top, 0px));
        padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
        padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
    }

    /* Yan menu — ust kismi status bar altinda kalmasin */
    .sidebar {
        padding-top: max(0px, env(safe-area-inset-top, 0px));
    }



    /* SignalR baglanti banner'i — ekranin en ustunde sabit */
    .signalr-banner {
        padding-top: max(var(--space-3), env(safe-area-inset-top, 0px));
        padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
        padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
    }

    /* Mobil alt navigasyon — home indicator alanini bosalt */
    .mobile-bottom-nav {
        padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
    }

    /* Mobil menu butonu — centigin altina kaydir */
    .mobile-menu-toggle {
        top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
        left: calc(var(--space-3) + env(safe-area-inset-left, 0px));
    }
}

/* -----------------------------------------------------------------
   5. forced-colors (Windows High Contrast Mode)
   ----------------------------------------------------------------- */

@media (forced-colors: active) {
    .theme-toggle {
        background: ButtonFace;
        color: ButtonText;
        border: 1px solid ButtonText;
    }

    .theme-toggle:hover {
        background: Highlight;
        color: HighlightText;
    }

    .theme-toggle:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}