/* Login - Liquid Glass */

:root {
    --lg-tint: rgba(255, 255, 255, .58);
    --lg-tint-strong: rgba(255, 255, 255, .72);
    --lg-blur: 22px;
    --lg-saturate: 165%;
    --lg-border: rgba(255, 255, 255, .55);
    --lg-shadow: rgba(15, 23, 42, .28);
    --lg-sheen: rgba(255, 255, 255, .65);
    --lg-text: #14202e;
    --lg-text-muted: #47576b;
}

/* ---- Yerlesim: tam ekran, sayfa scroll'u yok ---- */
html,
body#kt_body {
    height: 100%;
    overflow: hidden;
}

#kt_app_root {
    height: 100vh;
    min-height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

#loginPage {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#loginBrandPane {
    min-height: 0;
    padding-top: clamp(1rem, 4vh, 3.75rem) !important;
    padding-bottom: clamp(1rem, 4vh, 3.75rem) !important;
    overflow: hidden;
}

#loginBrandInner {
    max-height: 100%;
    min-height: 0;
}

    #loginBrandInner > h2 {
        font-size: clamp(1rem, 2.2vh, 1.75rem);
        margin-bottom: 0;
    }

    #loginBrandInner #siteLogoLink {
        margin-bottom: clamp(.5rem, 2vh, 1.75rem) !important;
        min-height: 0;
    }

    #loginBrandInner #siteLogo {
        max-height: clamp(48px, 14vh, 150px);
        width: auto;
        object-fit: contain;
    }

#loginFormPane {
    min-height: 0;
    align-items: center;
    padding-top: clamp(1rem, 3vh, 5rem) !important;
    padding-bottom: clamp(1rem, 3vh, 5rem) !important;
}

/* Kart olcusu icerige gore DEGISMEZ: en uzun ekran (Sifremi Hatirlat) referans
   alinip sabitlendi. Kisa icerik iceride ortalanir, kart buyuyup kuculmez. */
#loginCard {
    --login-card-height: min(580px, 100%);
    height: var(--login-card-height);
    min-height: var(--login-card-height);
    max-height: 100%;
    flex: 0 0 auto;
    padding: clamp(1.25rem, 3.5vh, 3.25rem) clamp(1.25rem, 2.2vw, 2.75rem)
             clamp(1rem, 2.2vh, 2rem) !important;
}

#loginCardBody {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: clamp(.25rem, .8vh, 1rem) !important;
    scrollbar-width: thin;
    justify-content: center;
}

    /* Icerik sigiyorsa dikey ortalanir; tastiginda ustten baslar ve kart icinde kayar */
    #loginCardBody > * {
        flex: 0 0 auto;
        width: 100%;
    }

    #loginCardBody::-webkit-scrollbar {
        width: 6px;
    }

    #loginCardBody::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, .22);
        border-radius: 3px;
    }

[data-bs-theme="dark"] #loginCardBody::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
}

/* Kisa ekranda dikey bosluklar orantili kisilir */
@media (max-height: 800px) {
    #loginCard .mb-11 {
        margin-bottom: clamp(.75rem, 2.5vh, 3rem) !important;
    }

    #loginCard .mb-10,
    #loginCard .mb-8 {
        margin-bottom: clamp(.5rem, 2vh, 2.25rem) !important;
    }

    #loginCard br {
        display: none;
    }
}

/* ---- Kart ---- */
#loginCard {
    background-color: var(--lg-tint) !important;
    background-image:
        linear-gradient(150deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(340deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    border: 1px solid var(--lg-border);
    border-radius: 26px !important;
    box-shadow:
        0 24px 60px -20px var(--lg-shadow),
        0 2px 10px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .70),
        inset 0 -1px 0 rgba(255, 255, 255, .22);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    #loginCard::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 42%;
        background: linear-gradient(to bottom, var(--lg-sheen), rgba(255, 255, 255, 0));
        opacity: .38;
        pointer-events: none;
        z-index: -1;
    }

#loginCard,
#loginCard .text-gray-900 {
    color: var(--lg-text);
}

#loginCard .text-gray-500,
#loginCard .text-gray-700 {
    color: var(--lg-text-muted) !important;
}

/* ---- Form alanlari ---- */
#loginCard .form-control {
    background-color: rgba(255, 255, 255, .55) !important;
    border: 1px solid rgba(255, 255, 255, .70);
    border-radius: 14px;
    color: var(--lg-text);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    #loginCard .form-control::placeholder {
        color: rgba(71, 87, 107, .75);
    }

    #loginCard .form-control:focus {
        background-color: rgba(255, 255, 255, .78) !important;
        border-color: rgba(255, 255, 255, .95);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, .30);
    }

/* ---- Dugme ---- */
#loginCard .btn-primary {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow:
        0 8px 20px -8px rgba(15, 23, 42, .45),
        inset 0 1px 0 rgba(255, 255, 255, .30);
    transition: transform .15s ease, box-shadow .15s ease;
}

    #loginCard .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow:
            0 12px 26px -8px rgba(15, 23, 42, .50),
            inset 0 1px 0 rgba(255, 255, 255, .38);
    }

    #loginCard .btn-primary:active {
        transform: translateY(0);
    }

/* ---- Logo / slogan ---- */
#loginBrandPane #quoteDisplay {
    text-shadow: 0 1px 12px rgba(255, 255, 255, .55);
}

/* ---- Koyu tema ---- */
[data-bs-theme="dark"] {
    --lg-tint: rgba(22, 28, 40, .55);
    --lg-tint-strong: rgba(22, 28, 40, .70);
    --lg-border: rgba(255, 255, 255, .16);
    --lg-shadow: rgba(0, 0, 0, .55);
    --lg-sheen: rgba(255, 255, 255, .20);
    --lg-text: #eaf0f7;
    --lg-text-muted: #a7b4c4;
}

    [data-bs-theme="dark"] #loginCard {
        background-image:
            linear-gradient(150deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%),
            linear-gradient(340deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 38%);
        box-shadow:
            0 24px 60px -20px var(--lg-shadow),
            inset 0 1px 0 rgba(255, 255, 255, .16),
            inset 0 -1px 0 rgba(255, 255, 255, .05);
    }

    [data-bs-theme="dark"] #loginCard .form-control {
        background-color: rgba(255, 255, 255, .08) !important;
        border-color: rgba(255, 255, 255, .16);
        color: var(--lg-text);
    }

        [data-bs-theme="dark"] #loginCard .form-control::placeholder {
            color: rgba(167, 180, 196, .75);
        }

        [data-bs-theme="dark"] #loginCard .form-control:focus {
            background-color: rgba(255, 255, 255, .14) !important;
            border-color: rgba(255, 255, 255, .28);
            box-shadow: 0 0 0 4px rgba(255, 255, 255, .10);
        }

    [data-bs-theme="dark"] #loginBrandPane #quoteDisplay {
        text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
    }

/* ---- Yedek zemin ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #loginCard {
        background-color: rgba(255, 255, 255, .92) !important;
    }

    [data-bs-theme="dark"] #loginCard {
        background-color: rgba(22, 28, 40, .93) !important;
    }
}

/* ---- Mobil ---- */
@media (max-width: 991.98px) {
    :root {
        --lg-blur: 14px;
    }

    #loginCard {
        border-radius: 20px !important;
    }

    #loginPage {
        flex-direction: column;
    }

    #loginBrandPane {
        flex: 0 0 auto;
        padding-top: clamp(.75rem, 3vh, 2rem) !important;
        padding-bottom: clamp(.25rem, 1vh, 1rem) !important;
    }

        #loginBrandPane #siteLogo {
            max-height: clamp(40px, 9vh, 90px);
        }

    #loginFormPane {
        flex: 1 1 auto;
        min-height: 0;
        padding-left: clamp(.75rem, 4vw, 3rem) !important;
        padding-right: clamp(.75rem, 4vw, 3rem) !important;
    }

    #loginCard {
        width: 100%;
        padding: clamp(1rem, 3vh, 2.5rem) clamp(1rem, 5vw, 2.5rem) !important;
    }
}

/* ---- Hareket azaltma tercihi ---- */
@media (prefers-reduced-motion: reduce) {
    #loginCard .btn-primary {
        transition: none;
    }

        #loginCard .btn-primary:hover {
            transform: none;
        }
}

/* ---- Karekod: kisa ekranda olceklenir ---- */
#deviceCheckQr {
    width: clamp(88px, 20vh, 150px) !important;
    height: clamp(88px, 20vh, 150px) !important;
}

@media (max-height: 520px) {
    #deviceCheckRow {
        margin-bottom: clamp(.25rem, 1.5vh, 2rem) !important;
    }

    #deviceCheckHint {
        margin-bottom: .25rem !important;
    }

    /* Cok kisa ekranda (telefon yatay) her dikey olcu asgariye iner */
    #loginCard {
        padding: .75rem 1rem !important;
    }

    #loginCardBody {
        padding-bottom: .25rem !important;
    }

    #deviceCheckQr {
        width: clamp(72px, 17vh, 110px) !important;
        height: clamp(72px, 17vh, 110px) !important;
    }

    /* Cok kisa ekranda marka paneli gizlenir; tum yukseklik forma kalir.
       Logo zaten kartin ustunde degil, ayri panelde duruyor. */
    #loginBrandPane {
        display: none !important;
    }

    #loginFormPane {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }

    #loginCard .mb-10,
    #loginCard .mb-11 {
        margin-bottom: .5rem !important;
    }

    #loginCard .fv-row.mb-8 {
        margin-bottom: .5rem !important;
    }
}