/* ============================================
   ETI GIDA — Login Sayfası
   Etiverse Web referansındaki sade merkezli kart deseni:
   basit üst şerit + tek kart + footer. Renk/radius/shadow
   token'ları eti-variables.css'ten geliyor.
   ============================================ */

body.login-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--eti-bg);
    position: relative;
}

/* ---- Arka plan fotoğrafı (Etiverse'in login_background.png'siyle aynı dosya) ----
   position:fixed + düşük z-index; üst şerit/kart/footer'a AYRICA z-index verilerek
   üstte kalmaları garanti ediliyor (Etiverse'in kendi DOM/z-index sırası burada
   birebir kopyalanmadı — position:static bir header'ın absolute bir katmanın altında
   kalma riski var, o yüzden daha sağlam bir katman sırası kuruldu). */
.login-bg {
    position: fixed;
    inset: 0;
    background-image: url('/images/login-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* ---- Üst şerit: sade logo, Etiverse'in LoginHeader'ıyla aynı fikir ---- */
.login-header-bar {
    position: relative;
    z-index: 1;
    height: 68px;
    background: var(--eti-surface);
    border-bottom: 1px solid var(--eti-border);
    box-shadow: var(--eti-shadow-xs);
    display: flex;
    align-items: center;
    padding: 0 40px;
    flex-shrink: 0;
}

.login-header-bar__logo {
    height: 52px;
    width: auto;
}

/* ---- Ortalanmış tek kart ---- */
.login-main {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
}

.login-card {
    width: 100%;
    max-width: 480px;
    animation: eti-fade-in-up 0.6s var(--eti-ease-out) both;
    background: var(--eti-surface);
    border-radius: var(--eti-radius);
    box-shadow: var(--eti-shadow-lg);
    padding: 56px 48px;
    text-align: center;
}

.login-card__title {
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--eti-text);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.login-card__subtitle {
    color: var(--eti-text-muted);
    font-size: 0.95rem;
    margin: 0 0 32px;
}

/* ---- Form alanları ---- */
.login-form-group {
    margin-bottom: 18px;
    text-align: left;
}

.login-input-wrapper {
    position: relative;
}

    .login-input-wrapper .login-input-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--eti-gray-400);
        pointer-events: none;
        transition: color var(--eti-duration);
        z-index: 1;
        display: flex;
    }

    .login-input-wrapper:focus-within .login-input-icon {
        color: var(--eti-red);
    }

.login-input {
    padding-left: 42px !important;
    padding-right: 42px !important;
}

/* ---- Şifre göster/gizle ---- */
.login-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--eti-gray-400);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--eti-radius-xs);
    display: flex;
    transition: color var(--eti-duration), background var(--eti-duration);
    z-index: 1;
}

    .login-toggle-password:hover {
        color: var(--eti-red);
        background: var(--eti-red-light);
    }

/* ---- Butonlar ---- */
.login-submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

.login-submit--sso {
    margin-top: 10px;
}

.login-submit .spinner-border {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin-left: 8px;
}

/* ---- Hata mesajları ---- */
.login-alert {
    border-radius: var(--eti-radius-sm);
    font-size: 0.84rem;
    font-weight: 600;
    background: var(--eti-red-light);
    color: var(--eti-red-dark);
    border: 1px solid rgba(217, 27, 40, 0.15);
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.field-validation-error {
    color: var(--eti-red);
    font-size: 0.76rem;
    font-weight: 600;
    margin-top: 6px;
    display: block;
}

.validation-summary-errors {
    display: block !important;
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 16px;
    }

.validation-summary-valid {
    display: none;
}

/* ---- Alt bilgi ---- */
.login-card__footnote {
    text-align: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--eti-border);
}

    .login-card__footnote p {
        color: var(--eti-text-muted);
        font-size: 0.76rem;
        margin: 0;
        font-weight: 500;
    }

.login-brand-highlight {
    color: var(--eti-red);
    font-weight: 700;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .login-header-bar {
        padding: 0 20px;
    }

    .login-card {
        padding: 40px 24px;
    }

    .login-card__title {
        font-size: 1.5rem;
    }
}