/* ==========================================================================
   CyCastle — Slate Auth
   Tam ekran görsel + sağ tarafta HUD konsol kartı
   ========================================================================== */

:root {
    color-scheme: dark;

    --auth-void:        #04070D;
    --auth-panel:       rgba(14, 21, 33, 0.82);
    --auth-panel-solid: #0E1521;
    --auth-field:       rgba(255, 255, 255, 0.035);
    --auth-field-hi:    rgba(255, 255, 255, 0.055);
    --auth-line:        rgba(150, 195, 255, 0.13);
    --auth-line-2:      rgba(150, 195, 255, 0.22);

    --auth-ink:         #E9F1FC;
    --auth-ink-2:       #9AACC2;
    --auth-ink-3:       #64778F;

    --auth-accent:      #4EA8FF;
    --auth-accent-2:    #22D3EE;
    --auth-accent-deep: #1D6FE0;
    --auth-accent-soft: rgba(78, 168, 255, 0.14);

    --auth-danger:      #FF6B61;
    --auth-good:        #2FD48A;

    --auth-r:           16px;
    --auth-r-sm:        10px;

    --auth-font:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --auth-display:     'Oxanium', 'Inter', system-ui, sans-serif;
    --auth-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body.auth-body {
    margin: 0;
    font-family: var(--auth-font);
    background: var(--auth-void);
    color: var(--auth-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Sahne katmanları ──────────────────────────────────────────────────── */

.auth-stage {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    overflow-x: hidden;
}

/* Görsel ekranı tam kaplar; kırpma üstten değil alttan olsun diye üste sabitlenir */
.auth-bg {
    position: fixed;
    inset: 0;
    background-image: var(--auth-bg-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Kartın arkasını koyulaştıran merkez perdesi: iki yandaki içerik okunur kalır */
.auth-scrim {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(38% 62% at 50% 50%,
            rgba(4, 7, 13, 0.86) 0%,
            rgba(4, 7, 13, 0.60) 55%,
            rgba(4, 7, 13, 0.00) 100%),
        linear-gradient(180deg,
            rgba(4, 7, 13, 0.30) 0%,
            rgba(4, 7, 13, 0.00) 26%,
            rgba(4, 7, 13, 0.00) 74%,
            rgba(4, 7, 13, 0.42) 100%);
}

/* İnce tarama dokusu */
.auth-texture {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.5;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.016) 0px,
        rgba(255, 255, 255, 0.016) 1px,
        transparent 1px,
        transparent 3px);
    mix-blend-mode: overlay;
}

/* ── Kart yerleşimi ────────────────────────────────────────────────────── */

.auth-shell {
    position: relative;
    z-index: 4;
    margin: 0 auto;
    width: min(500px, 100%);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    padding: 40px clamp(20px, 3.4vw, 56px);
}

.auth-card {
    position: relative;
    width: 100%;
    /* Görseldeki üst HUD çipinin altında kalsın diye merkezden biraz aşağıda */
    margin-top: clamp(0px, 12vh, 130px);
    padding: 34px clamp(24px, 3vw, 36px) 30px;
    border-radius: var(--auth-r);
    border: 1px solid var(--auth-line);
    background:
        linear-gradient(158deg, rgba(20, 30, 46, 0.80) 0%, rgba(8, 13, 21, 0.92) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 70px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.25);
    animation: auth-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* HUD köşe işaretleri */
.auth-card::before,
.auth-card::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.75;
}

.auth-card::before {
    top: 10px;
    left: 10px;
    border-top: 1px solid var(--auth-accent);
    border-left: 1px solid var(--auth-accent);
    border-top-left-radius: 6px;
}

.auth-card::after {
    right: 10px;
    bottom: 10px;
    border-right: 1px solid var(--auth-accent-2);
    border-bottom: 1px solid var(--auth-accent-2);
    border-bottom-right-radius: 6px;
}

/* Üst kenar ışık çizgisi */
.auth-card-line {
    position: absolute;
    top: -1px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--auth-accent) 22%,
        var(--auth-accent-2) 58%,
        transparent 100%);
    opacity: 0.85;
}

.auth-shell > * {
    animation: auth-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Kart başlığı ──────────────────────────────────────────────────────── */

.auth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.auth-form-logo {
    max-height: 38px;
    max-width: 172px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(78, 168, 255, 0.35));
}

/* Başlıksız sayfalarda logo tek başına blok olarak durur */
form > .auth-form-logo,
.w-100 > .auth-form-logo {
    display: block;
    margin-bottom: 22px;
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--auth-line);
    border-radius: 999px;
    background: rgba(78, 168, 255, 0.06);
    font-family: var(--auth-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--auth-ink-2);
    white-space: nowrap;
}

.auth-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--auth-good);
    box-shadow: 0 0 0 0 rgba(47, 212, 138, 0.55);
    animation: auth-pulse 2.4s ease-out infinite;
}

.auth-form-title {
    font-family: var(--auth-display);
    font-size: clamp(1.42rem, 2.4vw, 1.62rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--auth-ink);
    margin: 0 0 6px;
}

.auth-form-subtitle {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--auth-ink-2);
    margin: 0 0 26px;
}

h5.auth-form-subtitle {
    font-family: var(--auth-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--auth-ink-3);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--auth-line);
}

/* ── Alanlar ───────────────────────────────────────────────────────────── */

.auth-card .form-floating {
    position: relative;
}

.auth-card .form-control,
.auth-card .form-select {
    height: 58px;
    padding: 1.1rem 0.95rem 0.35rem;
    background-color: var(--auth-field);
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-r-sm);
    color: var(--auth-ink);
    font-size: 0.95rem;
    line-height: 1.3;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.auth-card textarea.form-control {
    height: auto;
    min-height: 104px;
    padding-top: 1.6rem;
}

.auth-card .form-control:hover,
.auth-card .form-select:hover {
    background-color: var(--auth-field-hi);
    border-color: var(--auth-line-2);
}

.auth-card .form-control:focus,
.auth-card .form-select:focus {
    background-color: rgba(78, 168, 255, 0.06);
    border-color: rgba(78, 168, 255, 0.55);
    box-shadow: 0 0 0 3px var(--auth-accent-soft);
    outline: 0;
    color: var(--auth-ink);
}

.auth-card .form-control:disabled,
.auth-card .form-control[readonly] {
    color: var(--auth-ink-3);
    background-color: rgba(255, 255, 255, 0.02);
}

.auth-card .form-floating > label {
    padding: 1.05rem 0.95rem;
    color: var(--auth-ink-3);
    font-size: 0.92rem;
    transition: color .18s ease, opacity .18s ease;
}

.auth-card .form-floating > .form-control:focus ~ label,
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label,
.auth-card .form-floating > .form-select ~ label {
    transform: scale(0.78) translateY(-0.62rem) translateX(0.1rem);
    opacity: 1;
}

.auth-card .form-floating > .form-control:focus ~ label {
    color: var(--auth-accent);
}

.auth-card .form-floating > label::after {
    background: transparent !important;
}

/* İkonlu alan */
.auth-field { position: relative; }

.auth-field .auth-field-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--auth-ink-3);
    pointer-events: none;
    z-index: 4;
    transition: color .18s ease;
}

.auth-field:focus-within .auth-field-icon { color: var(--auth-accent); }

.auth-field .form-control { padding-left: 44px; }
.auth-field .form-floating > label { padding-left: 44px; }

.auth-field.has-toggle .form-control { padding-right: 46px; }

.auth-toggle-pass {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--auth-ink-3);
    cursor: pointer;
    z-index: 4;
    transition: color .15s ease, background-color .15s ease;
}

.auth-toggle-pass:hover {
    color: var(--auth-ink);
    background: rgba(255, 255, 255, 0.06);
}

/* Tarayıcı otomatik doldurma: koyu zeminde beyaz kutu oluşmasını engeller */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-ink);
    -webkit-box-shadow: 0 0 0 1000px #101927 inset;
    caret-color: var(--auth-ink);
    transition: background-color 9999s ease-in-out 0s;
}

.auth-card select option {
    background: var(--auth-panel-solid);
    color: var(--auth-ink);
}

/* ── Satır yardımcıları ────────────────────────────────────────────────── */

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 20px;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--auth-ink-2);
    cursor: pointer;
    user-select: none;
}

.auth-card .form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
    background-color: var(--auth-field);
    border: 1px solid var(--auth-line-2);
    cursor: pointer;
}

.auth-card .form-check-input:checked {
    background-color: var(--auth-accent);
    border-color: var(--auth-accent);
}

.auth-card .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--auth-accent-soft);
    border-color: var(--auth-accent);
}

.auth-mini-link {
    font-size: 0.82rem;
    color: var(--auth-accent);
    text-decoration: none;
    text-underline-offset: 3px;
}

.auth-mini-link:hover { color: #86C4FF; text-decoration: underline; }

/* ── Buton ─────────────────────────────────────────────────────────────── */

.auth-card .btn-auth-primary,
.auth-card a.btn-auth-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--auth-r-sm);
    background: linear-gradient(102deg, var(--auth-accent-deep) 0%, var(--auth-accent) 52%, var(--auth-accent-2) 100%);
    background-size: 180% 100%;
    background-position: 0% 50%;
    color: #06121F;
    font-family: var(--auth-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(29, 111, 224, 0.28);
    transition: background-position .45s ease, box-shadow .25s ease, transform .12s ease;
}

.auth-card .btn-auth-primary:hover,
.auth-card a.btn-auth-primary:hover {
    background-position: 100% 50%;
    color: #06121F;
    box-shadow: 0 10px 32px rgba(34, 211, 238, 0.32);
}

.auth-card .btn-auth-primary:active { transform: translateY(1px); }

.auth-card .btn-auth-primary:focus-visible {
    outline: 2px solid var(--auth-accent-2);
    outline-offset: 3px;
}

.auth-card .btn-auth-primary .arw {
    transition: transform .25s ease;
    font-size: 0.8em;
}

.auth-card .btn-auth-primary:hover .arw { transform: translateX(4px); }

/* ── Bağlantılar / ayıraç ──────────────────────────────────────────────── */

.auth-card .auth-link {
    margin-top: 22px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--auth-ink-2);
}

.auth-card .auth-link a {
    color: var(--auth-accent);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 3px;
}

.auth-card .auth-link a:hover { text-decoration: underline; }

.auth-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 0;
    font-family: var(--auth-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--auth-ink-3);
}

.auth-sep::before,
.auth-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--auth-line), transparent);
}

/* ── Bildirimler ───────────────────────────────────────────────────────── */

.auth-card .alert {
    border-radius: var(--auth-r-sm);
    border: 1px solid var(--auth-line);
    background: rgba(255, 255, 255, 0.035);
    color: var(--auth-ink-2);
    font-size: 0.85rem;
    padding: 12px 14px;
}

.auth-card .alert-success {
    border-color: rgba(47, 212, 138, 0.32);
    background: rgba(47, 212, 138, 0.10);
    color: #9CEBC6;
}

.auth-card .alert-info {
    border-color: rgba(78, 168, 255, 0.32);
    background: rgba(78, 168, 255, 0.10);
    color: #A9D4FF;
}

.auth-card .alert-danger {
    border-color: rgba(255, 107, 97, 0.32);
    background: rgba(255, 107, 97, 0.10);
    color: #FFB3AD;
}

.auth-card .invalid-feedback,
.auth-card .text-danger {
    color: var(--auth-danger) !important;
    font-size: 0.8rem;
}

.auth-card .form-control.is-invalid,
.auth-card .form-select.is-invalid {
    border-color: rgba(255, 107, 97, 0.55);
    background-image: none;
    box-shadow: none;
}

.auth-card .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 97, 0.14);
}

/* Cloudflare doğrulama alanı */
.auth-card .cf-turnstile {
    display: flex;
    justify-content: center;
}

/* SweetAlert koyu tema uyumu */
.swal2-popup {
    background: var(--auth-panel-solid) !important;
    color: var(--auth-ink) !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: var(--auth-r) !important;
}

.swal2-title { color: var(--auth-ink) !important; }
.swal2-html-container { color: var(--auth-ink-2) !important; }

.swal2-confirm.swal2-styled {
    background: linear-gradient(102deg, var(--auth-accent-deep), var(--auth-accent)) !important;
    color: #06121F !important;
    font-weight: 600 !important;
    border-radius: var(--auth-r-sm) !important;
}

/* ── Duyarlı davranış ──────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
    .auth-shell { width: min(470px, 100%); }
    .auth-scrim {
        background:
            radial-gradient(46% 66% at 50% 50%,
                rgba(4, 7, 13, 0.90) 0%,
                rgba(4, 7, 13, 0.66) 55%,
                rgba(4, 7, 13, 0.10) 100%),
            linear-gradient(180deg, rgba(4, 7, 13, 0.30), rgba(4, 7, 13, 0.00) 28%, rgba(4, 7, 13, 0.45));
    }
}

@media (max-width: 991.98px) {
    .auth-shell {
        width: min(500px, 100%);
        padding: 32px 20px;
    }
    .auth-bg { background-position: 42% center; }
    .auth-card { margin-top: 0; }
    .auth-scrim {
        background:
            radial-gradient(120% 80% at 50% 40%, rgba(4, 7, 13, 0.55) 0%, rgba(4, 7, 13, 0.86) 70%, rgba(4, 7, 13, 0.95) 100%);
    }
}

@media (max-width: 575.98px) {
    .auth-shell { padding: 24px 14px; gap: 14px; }
    .auth-card { padding: 26px 20px 24px; border-radius: 14px; }
    .auth-head { margin-bottom: 20px; }
    .auth-eyebrow { display: none; }
    .auth-form-logo { max-height: 34px; }
}

/* Uzun formlarda (hesap kurulumu) kart yukarıdan başlar */
@media (max-height: 780px) {
    .auth-shell { justify-content: flex-start; }
}

/* Kısa ekranda aşağı kaydırma payı taşmaya yol açmasın */
@media (max-height: 860px) {
    .auth-card { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-shell > *,
    .auth-eyebrow .dot {
        animation: none !important;
    }
}

/* ── İki adımlı doğrulama (2FA) ────────────────────────────────────────── */

/* 2FA metinleri giriş kartından daha uzun; kart bu ekranlarda genişler */
.auth-shell.auth-shell-wide {
    width: min(540px, 100%);
}

.auth-shell-wide .auth-form-title,
.auth-shell-wide .auth-form-subtitle,
.auth-shell-wide .auth-method .m-title,
.auth-shell-wide .auth-method .m-desc,
.auth-shell-wide .auth-note,
.auth-shell-wide .btn-auth-ghost {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.auth-shell-wide .auth-method .m-title {
    flex-wrap: wrap;
    line-height: 1.4;
}

.auth-shell-wide .btn-auth-ghost {
    height: auto;
    min-height: 46px;
    padding: .7rem 1.1rem;
    text-align: center;
    line-height: 1.35;
}


/* Kart dikey ortalaması yalnızca görüntü alanına bağlıdır */
html.swal2-height-auto { height: 100% !important; }
body.swal2-shown { padding-right: 0 !important; }

.auth-badge {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--auth-accent);
    background: var(--auth-accent-soft);
    border: 1px solid var(--auth-line-2);
    margin-bottom: 16px;
}

.auth-badge img { max-width: 26px; height: auto; }

/* Kod alanı */
.otp-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 22px;
}

.auth-card .otp-input {
    width: 100%;
    max-width: 56px;
    height: 64px;
    padding: 0;
    text-align: center;
    font-family: var(--auth-mono);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--auth-ink);
    background: var(--auth-field);
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-r-sm);
    caret-color: var(--auth-accent);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.auth-card .otp-input:hover {
    background: var(--auth-field-hi);
    border-color: var(--auth-line-2);
}

.auth-card .otp-input:focus {
    background: rgba(78, 168, 255, 0.06);
    border-color: rgba(78, 168, 255, 0.55);
    box-shadow: 0 0 0 3px var(--auth-accent-soft);
    outline: 0;
}

.auth-card .btn-auth-primary:disabled {
    opacity: .45;
    box-shadow: none;
    cursor: not-allowed;
}

/* İkincil buton */
.auth-card .btn-auth-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 18px;
    border: 1px solid var(--auth-line-2);
    border-radius: var(--auth-r-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--auth-ink-2);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.auth-card .btn-auth-ghost:hover {
    color: var(--auth-ink);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--auth-accent);
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

/* Doğrulama yöntemi seçenekleri */
.auth-method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-r-sm);
    background: var(--auth-field);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.auth-method:hover {
    background: var(--auth-field-hi);
    border-color: var(--auth-line-2);
}

.auth-method:has(input:checked) {
    border-color: rgba(78, 168, 255, 0.55);
    background: rgba(78, 168, 255, 0.07);
}

.auth-method .form-check-input { margin-top: 3px; flex: 0 0 auto; }
.auth-method .m-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--auth-ink);
}
.auth-method .m-title i,
.auth-method .m-title .icon { color: var(--auth-accent); }
.auth-method .m-title img { filter: brightness(0) invert(1); }
.auth-method .m-desc {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--auth-ink-3);
}

/* QR kod alanı */
.auth-qr {
    display: inline-flex;
    padding: 12px;
    margin-bottom: 18px;
    border-radius: 14px;
    border: 1px solid var(--auth-line-2);
    background: #FFFFFF;
}

.auth-qr img,
.auth-qr canvas,
.auth-qr svg { display: block; width: 190px; height: 190px; }

.auth-note {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--auth-ink-3);
    text-align: center;
}

/* Kart altı bağlantılar */
.auth-foot-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--auth-line);
}

.auth-foot-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--auth-ink-3);
    text-decoration: none;
    transition: color .18s ease;
}

.auth-foot-links a:hover { color: var(--auth-accent); }

.auth-copy {
    text-align: center;
    font-family: var(--auth-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--auth-ink-3);
}

@media (max-width: 400px) {
    .otp-grid { gap: 6px; }
    .auth-card .otp-input { height: 56px; font-size: 1.25rem; }
}

/* ── Hareket ───────────────────────────────────────────────────────────── */

@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@keyframes auth-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(47, 212, 138, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(47, 212, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 212, 138, 0); }
}