/* =====================================================================
   NEON PLINKO — Kimlik Ekranı
   ---------------------------------------------------------------------
   theme.css'teki token'ları kullanır; burada ham renk yoktur.
   Tek sütun, dikeyde ortalanmış kart. Mobilde kart tam genişliğe yayılır
   ve klavye açıldığında içerik kaymasın diye dvh kullanılır.
   ===================================================================== */

.auth {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--sp-4);

    background:
        radial-gradient(900px 520px at 50% -10%, rgba(0, 229, 255, 0.12), transparent 62%),
        radial-gradient(800px 480px at 50% 110%, rgba(255, 45, 149, 0.12), transparent 62%),
        var(--bg-0);
}

.auth__card {
    width: 100%;
    max-width: 420px;
    padding: var(--sp-6) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

/* --- Marka --- */
.auth__brand {
    text-align: center;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 0.09em;
    margin-bottom: var(--sp-2);
}

.auth__brand .n { color: var(--cyan); text-shadow: var(--glow-cyan); }
.auth__brand .p { color: var(--magenta); text-shadow: var(--glow-magenta); }

.auth__tagline {
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: var(--sp-5);
}

/* --- Sekmeler --- */
.auth__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1);
    padding: var(--sp-1);
    margin-bottom: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(4, 6, 16, 0.55);
}

.auth__tab {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.auth__tab[aria-selected="true"] {
    color: var(--bg-0);
    background: linear-gradient(140deg, var(--cyan), var(--violet));
    box-shadow: var(--glow-cyan);
}

/* --- Form --- */
.auth__form { display: none; flex-direction: column; gap: var(--sp-4); }
.auth__form.is-active { display: flex; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.field__input {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(4, 6, 16, 0.7);
    color: var(--text);
    font: inherit;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field__input::placeholder { color: var(--text-faint); }

.field__input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.16);
}

.field__input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.14);
}

/* Hata mesajı yer kaplamaz -> alan görünüp kaybolunca form zıplamaz */
.field__error {
    min-height: 15px;
    font-size: 12px;
    color: var(--danger);
}

.field__hint {
    font-size: 12px;
    color: var(--text-faint);
}

/* --- Düğmeler --- */
.auth__submit {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid rgba(0, 229, 255, 0.45);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.26), rgba(0, 120, 160, 0.2));
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    box-shadow: var(--glow-cyan);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur);
}

.auth__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.62), 0 0 48px rgba(0, 229, 255, 0.26);
}

.auth__submit:active:not(:disabled) { transform: translateY(1px) scale(0.99); }

.auth__submit:disabled { opacity: 0.55; cursor: progress; }

.auth__guest {
    width: 100%;
    padding: var(--sp-3);
    border: 1px dashed var(--border-hi);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
    transition: color var(--dur), border-color var(--dur), background var(--dur);
}

.auth__guest:hover {
    color: var(--lime);
    border-color: var(--lime);
    background: rgba(74, 222, 128, 0.06);
}

/* --- Ayraç --- */
.auth__divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 var(--sp-4);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.auth__divider::before,
.auth__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* --- Genel uyarı kutusu --- */
.auth__alert {
    display: none;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--danger);
    border-radius: var(--r-md);
    background: rgba(255, 77, 109, 0.1);
    color: var(--danger);
    font-size: 13px;
    line-height: 1.5;
}

.auth__alert.is-visible { display: block; }

.auth__alert[data-type="success"] {
    border-color: var(--lime);
    background: rgba(74, 222, 128, 0.1);
    color: var(--lime);
}

.auth__alert[data-type="info"] {
    border-color: var(--border-hi);
    background: rgba(0, 229, 255, 0.08);
    color: var(--cyan);
}

.auth__alert button {
    display: block;
    margin-top: var(--sp-2);
    text-decoration: underline;
    font-weight: 700;
    color: inherit;
}

/* --- Misafir ilerlemesi rozeti (bağlama ekranı) --- */
.guest-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    background: rgba(0, 229, 255, 0.07);
}

.guest-banner__icon { font-size: 22px; line-height: 1; }

.guest-banner__text { font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.guest-banner__text strong { color: var(--text); }

.auth__footer {
    margin-top: var(--sp-5);
    text-align: center;
    font-size: 12px;
    color: var(--text-faint);
    line-height: 1.6;
}

.auth__footer a { color: var(--text-dim); }

/* --- Mobil --- */
@media (max-width: 520px) {
    .auth { padding: var(--sp-3); align-items: start; padding-top: var(--sp-6); }
    .auth__card { padding: var(--sp-5) var(--sp-4); }
    .auth__brand { font-size: 22px; }
}