/* ============================================================
   Sipay Auth — Aurora tasarım sistemi
   Token'lar aurora.css'ten gelir (--bg, --panel, --line, --ink,
   --muted, --violet, --violet-2, --grad, --shadow).
   Bootstrap bileşenleri (form-control, modal, alert, badge)
   aurora.css köprüsü ile zaten temalıdır — burada sadece auth'a
   özgü layout tanımlanır. Hardcode renk yok.
   Paylaşan: login, forgotPassword, resetPassword, otp
   ============================================================ */

/* body.aurora arkaplanı/min-height/font aurora.css'ten; auth ortalaması: */
body.aurora {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
}

.auth-card {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 2.25rem 2.1rem;
    box-shadow: var(--shadow);
}

.brand-logo { display: inline-block; margin-bottom: 1.25rem; }
.brand-logo img { height: 46px; width: 46px; }

.auth-title { font-weight: 700; font-size: 1.35rem; margin-bottom: .3rem; color: var(--ink); }
.auth-sub { color: var(--muted); font-size: .85rem; margin-bottom: 1.5rem; }

.input-icon-group { position: relative; margin-bottom: .85rem; }
.input-icon-group .field-icon {
    position: absolute; top: 65%; left: .9rem; transform: translateY(-50%);
    color: var(--muted); z-index: 5; font-size: .9rem; pointer-events: none;
}
.field-label { font-size: .78rem; font-weight: 500; margin-bottom: .35rem; color: var(--muted); display: block; }
.input-icon-group .form-control { padding-left: 2.5rem; }

.btn-sipay {
    background: linear-gradient(135deg, var(--violet), var(--violet-2));
    color: #fff; border: none; border-radius: 11px;
    padding: .7rem; font-size: .92rem; font-weight: 600; width: 100%;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--violet) 50%, transparent);
    transition: transform .15s ease, filter .15s ease;
}
.btn-sipay:hover { filter: brightness(1.08); color: #fff; }
.btn-sipay:active { transform: scale(.985); }
.btn-sipay:disabled { opacity: .75; cursor: not-allowed; }

.link-sipay { color: var(--violet-2); text-decoration: none; font-weight: 500; font-size: .8rem; }
.link-sipay:hover { text-decoration: underline; color: var(--violet); }

.back-link { text-align: center; margin-top: 1.25rem; }
.back-link a {
    color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: .35rem;
}
.back-link a:hover { color: var(--violet-2); }

.pw-toggle {
    position: absolute; top: 65%; right: .9rem; transform: translateY(-50%);
    cursor: pointer; color: var(--muted); z-index: 6; font-size: .9rem;
}
.pw-toggle:hover { color: var(--violet-2); }

.theme-toggle {
    position: fixed; top: 1.25rem; right: 1.25rem; z-index: 10;
    width: 42px; height: 42px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--panel);
    color: var(--ink); display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.05rem; transition: all .2s ease;
}
.theme-toggle:hover { color: var(--violet-2); background: var(--panel-2); }

.secure-note {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    margin-top: 1.2rem; font-size: .74rem; color: var(--muted);
}

#counter { font-weight: 600; color: var(--violet-2); font-size: .95rem; }

/* OTP alanı: numeric ama spinner ok'ları gizli (normal alan gibi) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

@media (max-width: 480px) {
    .auth-card { padding: 1.85rem 1.5rem; }
}