/*
 * login.css — Biosis WEB login page styles (de-scoped from Login.razor.css).
 *
 * NOTE: this is the Blazor Web app login. The Identity service has its own
 * separate login.css — this file does not affect it.
 *
 * Two-column split on desktop:
 *   left  = brand panel (teal-tinted gradient, brand mark, tagline)
 *   right = form panel (centered UiCard with inputs)
 * Collapses to a single centered column on mobile (<768 px).
 * Per Docs/decisions/2026-06-01-css-mimari-tek-klasor.md.
 */

/* ── Page wrapper ───────────────────────────────────────────────────── */

.login-page {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--va-bg);
}

/* ── Theme toggle (absolute top-right) ─────────────────────────────── */

.login-theme-toggle {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 10;
}

/* ── Split layout ───────────────────────────────────────────────────── */

.login-split {
    flex: 1 1 auto;
    display: flex;
    min-height: 100dvh;
}

/* ── Left: brand panel ──────────────────────────────────────────────── */

.login-brand-panel {
    position: relative;
    flex: 0 0 45%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;

    /* Subtle teal-tinted background */
    background:
        radial-gradient(ellipse 120% 80% at 60% 120%,
            color-mix(in oklab, var(--va-accent) 18%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 80% 60% at -10% 20%,
            color-mix(in oklab, var(--va-accent) 8%, transparent) 0%,
            transparent 60%),
        var(--va-sidebar);

    border-inline-end: 1px solid var(--va-border);
}

.login-brand-panel__inner {
    position: relative;
    z-index: 1;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Logo row */
.login-brand-panel__logo {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--va-accent);
    filter: drop-shadow(0 0 20px color-mix(in oklab, var(--va-accent) 30%, transparent));
}

.login-brand-mark {
    flex-shrink: 0;
}

.login-brand-panel__wordmark {
    font-family: var(--va-font-heading);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.03em;
    color: var(--va-text);
    white-space: nowrap;
}

/* Tagline */
.login-brand-panel__tagline {
    font-family: var(--va-font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--va-text-dim);
    margin: 0;
}

/* Feature list */
.login-brand-panel__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.login-brand-panel__features li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--va-text-dim);
}

.login-brand-panel__features li .material-symbols-outlined {
    font-size: 18px;
    color: var(--va-accent);
    opacity: 0.85;
    flex-shrink: 0;
}

/* Bottom decorative glow */
.login-brand-panel__glow {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 200px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--va-accent) 12%, transparent);
    filter: blur(60px);
    pointer-events: none;
}

/* ── Right: form panel ──────────────────────────────────────────────── */

.login-form-panel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    padding-top: 4rem; /* clear theme toggle */
}

/* The card itself */
.login-card {
    width: 100%;
    max-width: 420px;
    box-shadow: var(--va-shadow-lg);
    /* Slight teal highlight on the top edge */
    border-top: 2px solid color-mix(in oklab, var(--va-accent) 40%, var(--va-border));
}

/* Kart SmgCard'a taşındı. SmgCard'ın "lg" gövde boşluğu 24 px sabittir; eski
   UiCard geniş ekranda 40 px'e çıkıyordu. Giriş kartının ferah oranı korunuyor. */
@media (min-width: 640px) {
    .login-card > .smg-card__body--pad-lg { padding: var(--va-sp-10); }
}

/* Card header */
.login-card__header {
    margin-bottom: 1.5rem;
}

/* Mobile brand (only visible when left panel is hidden) */
.login-card__mobile-brand {
    display: none;
    align-items: center;
    gap: 0.625rem;
    color: var(--va-accent);
    margin-bottom: 1.25rem;
}

.login-card__mobile-wordmark {
    font-family: var(--va-font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--va-text);
}

.login-card__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--va-text);
    letter-spacing: -0.015em;
    margin-bottom: 0.25rem;
}

.login-card__subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--va-text-dim);
}

/* Alert */
.login-alert {
    margin-bottom: 1.25rem;
}

/* ── Form internals ─────────────────────────────────────────────────── */

/* Giriş / şifre sıfırlama adımları artık <form> (Enter ile gönderim SmgInput'ta
   OnEnter olmadığı için submit'e taşındı); tarayıcı varsayılan boşluğu sıfırlanır. */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    margin: 0;
}

/* Label above input */
.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* SmgInput'ta boy (Size) parametresi yoktur; giriş ekranının hero alan ölçüsü
   (eski UiInput Size="lg" = 44 px) burada sınıfla veriliyor. */
.login-input-lg .smg-input { height: var(--smg-control-h-lg); }

.login-field__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--va-text-dim);
}

/* "Beni hatırla" + "Şifremi unuttum" row */
.login-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: -0.125rem;
}

.login-forgot {
    font-size: 0.8125rem;
    color: var(--va-accent);
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity 150ms;
}

.login-forgot:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* Parola göster/gizle düğmesi (eski .login-pw-toggle) kaldırıldı: SmgInput
   Type="password" alanlarda düğmeyi kendi çizer, stili smg-forms.css'tedir. */

/* Footer */
.login-card__footer {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--va-text-muted);
}

/* ── Responsive: collapse to single column on mobile ───────────────── */

@media (max-width: 767px) {
    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        padding: 1.5rem 1rem;
        padding-top: 3.5rem;
        align-items: flex-start;
    }

    .login-card {
        max-width: 100%;
    }

    .login-card__mobile-brand {
        display: flex;
    }
}

@media (max-width: 400px) {
    .login-form-panel {
        padding: 1rem 0.75rem;
        padding-top: 3rem;
    }
}

/* ── Ex-inline helpers (replace former style="" in Login.razor) ─────── */

/* Alanların baş ikonu (.login-input-icon) kaldırıldı: SmgInput Icon="…" ile
   kütüphanenin kendi ikonunu çiziyor (.smg-input-icon, smg-forms.css). */

/* ── Şifremi unuttum adımları (aynı kart içinde mod değişimi) ────────────
   Giriş formu ile aynı dikey ritmi korur; ek bileşen/kart açılmaz. */

.login-policy {
    margin: -0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--va-text-muted);
}

.login-back {
    align-self: center;
}

.login-back-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.login-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0 0.25rem;
    text-align: center;
}

.login-done__icon {
    font-size: 44px;
    color: var(--va-success);
}

.login-done__text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--va-text-dim);
}