/* ══════════════════════════════════════════════════════════════
   Giriş ekranı — fleet.css'teki auth-* tasarım sistemini tamamlar.

   Renk, yarıçap ve gölge değerleri BURADA TANIMLANMAZ; hepsi fleet.css
   içindeki CSS değişkenlerinden gelir. Kurumsal renk değişirse bu dosyaya
   dokunmaya gerek kalmaz.
   ══════════════════════════════════════════════════════════════ */

/* ── Sol tanıtım paneli ── */

.auth-page__brand {
    /* Düz krem zemin yerine hafif bir derinlik: giriş ekranı panelin ilk izlenimidir. */
    background: linear-gradient(160deg, var(--color-cream) 0%, var(--color-ecru) 55%, var(--color-ecru-dark) 100%);
    position: relative;
    overflow: hidden;
}

    /* Kurumsal renkte, çok soluk bir halka — logonun arkasında durur, okunurluğu bozmaz. */
    .auth-page__brand::after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        border: 44px solid var(--color-primary);
        opacity: 0.045;
        right: -190px;
        bottom: -210px;
        pointer-events: none;
    }

.auth-brand {
    position: relative;
    z-index: 1;
}

.auth-brand__mark {
    display: block;
    max-width: 210px;
    height: auto;
    margin-bottom: 26px;
}

.auth-brand__title {
    font-size: 1.75rem;
    letter-spacing: -0.01em;
}

/* ── Kart ── */

.auth-card {
    /* Kart, sayfanın odak noktasıdır: gölgesi biraz daha belirgin. */
    box-shadow: var(--shadow-lg);
}

.auth-field {
    margin-bottom: 14px;
}

/* Göz düğmesi metnin üstüne binmesin. */
.auth-input--password {
    padding-right: 42px !important;
}

/* ── Uyarı kutusu ── */

/* fleet.css ikonu genel olarak gizler (modallarda yer kazanmak için);
   giriş ekranında mesajın yanındaki ikon anlamı hızlandırdığı için geri açılır. */
.auth-page .auth-alert__icon {
    display: block;
}

.auth-alert {
    margin: 0 0 18px !important;
}

.auth-alert--hidden {
    display: none;
}

/* ── Alan altı metinleri ── */

.auth-field__error {
    display: none;
}

    .auth-field__error.is-visible {
        display: block;
    }

.auth-field__hint {
    font-size: 0.78rem;
    color: var(--warning);
    margin-top: 5px;
    display: none;
    align-items: center;
    gap: 6px;
}

    .auth-field__hint.is-visible {
        display: flex;
    }

    .auth-field__hint svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

/* ── Gönder düğmesi ── */

.auth-submit:disabled {
    opacity: 0.75;
    cursor: progress;
}

.auth-submit__loader {
    margin-right: 8px;
}

/* ── Yetkisiz erişim sayfası ── */

.auth-denied {
    text-align: center;
    max-width: 460px;
}

.auth-denied__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: var(--color-primary);
}

    .auth-denied__icon svg {
        width: 30px;
        height: 30px;
    }

.auth-denied__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

@media (max-width: 991.98px) {
    .auth-brand__mark {
        max-width: 160px;
        margin-bottom: 16px;
    }

    .auth-page__brand::after {
        display: none;
    }
}