/* ── Auth ── */

/* Container */
.auth-container { contain: layout style paint; }
.auth-panel { padding: 1rem 1.5rem 2rem; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.auth-panel::-webkit-scrollbar { display: none; }

/* Alert */
.auth-alert { font: 500 13px/1.5 var(--ff, inherit); border-radius: .75rem; padding: .75rem 1rem; display: none; align-items: center; gap: .625rem; border: 1px solid; animation: authSlide .3s; margin-bottom: 1rem; position: sticky; top: 0; z-index: 10; }
.auth-alert.error { display: flex; background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.auth-alert.success { display: flex; background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
@keyframes authSlide { from { transform: translateY(-10px); opacity: 0; } }

/* Header */
.auth-header { text-align: center; margin-bottom: 1.25rem; }
.auth-header h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: .375rem; }
.auth-header p { font-size: .875rem; color: var(--c-text-muted, #6b7280); line-height: 1.5; }

/* Timer */
.auth-timer { font: 600 .9375rem/1 var(--ff, inherit); color: var(--c-text, #111827); margin-top: .625rem; }
.auth-timer span { font-weight: 700; font-size: 1.125rem; display: inline-block; min-width: 65px; font-variant-numeric: tabular-nums; }
.auth-timer.warning { color: #f59e0b; }
.auth-timer.danger { color: #ef4444; animation: authPulse 1s infinite; }
@keyframes authPulse { 50% { opacity: .7; } }

/* Sosyal */
.auth-social { display: flex; gap: .875rem; margin-bottom: 1rem; }
.auth-social-btn { flex: 1; height: 46px; border: 1px solid var(--c-border, #e5e7eb); border-radius: .5rem; background: var(--c-surface, #fff); color: var(--c-text, #111827); font: 600 .9375rem/1 var(--ff, inherit); display: flex; align-items: center; justify-content: center; gap: .625rem; text-decoration: none; transition: transform .2s, background .2s; }
.auth-social-btn:hover { background: var(--c-surface-alt, #f9fafb); transform: translateY(-2px); }
.auth-social-btn svg { width: 18px; height: 18px; }

/* Ayırıcı */
.auth-divider { display: flex; align-items: center; margin-bottom: 1rem; gap: 1rem; }
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--c-border, #e5e7eb); }
.auth-divider span { font-size: .8125rem; color: var(--c-text-muted, #6b7280); }

/* View Geçişleri */
.auth-view { display: none; animation: authFade .25s ease; }
.auth-view.active { display: block; }
@keyframes authFade { from { opacity: 0; transform: translateY(8px); } }

/* Floating Label */
.auth-field { position: relative; margin-bottom: .875rem; }
.auth-field input { width: 100%; height: 54px; padding: 16px 18px; font-size: 1rem; border: 1.5px solid var(--c-border, #e5e7eb); border-radius: .5rem; background: var(--c-surface, #fff); color: var(--c-text, #111827); transition: border-color .2s, box-shadow .2s; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.auth-field input:focus { border-color: var(--c-text, #111827); outline: none; }
.auth-field label { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--c-text-muted, #6b7280); pointer-events: none; transition: all .2s; background: transparent; padding: 0 4px; }
.auth-field label small { font-size: .8125rem; opacity: .7; }
.auth-field input:focus + label,
.auth-field input:not(:placeholder-shown) + label { top: 0; font-size: .8125rem; color: var(--c-text, #111827); background: var(--c-surface, #fff); font-weight: 600; }
.auth-field.error input { border-color: #ef4444; }
.auth-field.error label { color: #ef4444; }
.auth-field-pass input { padding-right: 50px; }
.auth-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-bottom: .875rem; }
.auth-name-row .auth-field { margin-bottom: 0; }

/* Şifre Göster/Gizle */
.auth-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--c-text-muted, #6b7280); cursor: pointer; border-radius: .25rem; padding: 0; transition: background .2s, color .2s; }
.auth-eye:hover { background: var(--c-surface-alt, #f9fafb); color: var(--c-text, #111827); }
.auth-eye svg { width: 20px; height: 20px; }

/* Seçenekler */
.auth-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: .8125rem; }
.auth-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.auth-check input { position: absolute; opacity: 0; }
.auth-check-box { width: 20px; height: 20px; border: 2px solid var(--c-border, #e5e7eb); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
.auth-check input:checked + .auth-check-box { background: var(--c-text, #111827); border-color: var(--c-text, #111827); }
.auth-check input:checked + .auth-check-box::after { content: ''; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; }
.auth-check.error .auth-check-box { border-color: #ef4444; animation: authShake .5s; }
.auth-link { color: var(--c-text, #111827); font: 600 .8125rem/1 var(--ff, inherit); padding: 0; background: none; border: none; cursor: pointer; }
.auth-link:hover { text-decoration: underline; }

/* Submit */
.auth-submit { width: 100%; height: 48px; background: var(--c-text, #111827); color: var(--c-surface, #fff); border: none; border-radius: .5rem; font: 700 1rem/1 var(--ff, inherit); cursor: pointer; margin-bottom: .75rem; transition: transform .2s, box-shadow .2s, opacity .2s; }
.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); opacity: .9; }
.auth-submit:disabled { opacity: .6; pointer-events: none; }
.auth-submit.shake { animation: authShake .5s; }

/* Footer & Center */
.auth-footer { text-align: center; font-size: .875rem; color: var(--c-text-muted, #6b7280); margin-top: .5rem; }
.auth-footer button { color: var(--c-text, #111827); font-weight: 700; padding: 0 .375rem; background: none; border: none; cursor: pointer; }
.auth-footer button:hover { text-decoration: underline; }
.auth-center { text-align: center; margin-bottom: .75rem; }

/* OTP */
.auth-otp { display: flex; gap: .625rem; justify-content: center; align-items: center; padding: 1rem 0; }
.auth-digit { width: 52px; height: 60px; text-align: center; font: 700 1.625rem/1 var(--ff, inherit); border: 2px solid var(--c-border, #e5e7eb); border-radius: .5rem; background: var(--c-surface-alt, #f9fafb); color: var(--c-text, #111827); transition: border-color .2s, box-shadow .2s, transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.auth-digit:focus { border-color: var(--c-text, #111827); outline: none; transform: scale(1.05); }
.auth-digit:not(:placeholder-shown) { border-color: var(--c-primary, #111827); }
.auth-otp-sep { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 60px; font: 600 1.625rem/1 var(--ff, inherit); color: var(--c-text-muted, #6b7280); }

/* Spinner & Animasyonlar */
.auth-spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: authSpin .6s linear infinite; }
@keyframes authSpin { to { transform: rotate(360deg); } }
@keyframes authShake { 0%,100% { transform: translateX(0); } 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-6px); } 40%,60% { transform: translateX(6px); } }

/* Mobil */
@media (max-width: 991px) {
    .auth-slider, .bs-close { display: none; }
    .auth-field input { height: 48px; padding: 14px 16px; font-size: .9375rem; }
    .auth-field-pass input { padding-right: 46px; }
    .auth-field label { left: 16px; font-size: .9375rem; }
    .auth-field input:focus + label,
    .auth-field input:not(:placeholder-shown) + label { font-size: .75rem; }
    .auth-submit { height: 44px; font-size: .9375rem; }
    .auth-social-btn { height: 42px; font-size: .875rem; }
    .auth-digit { width: 46px; height: 54px; font-size: 1.5rem; }
    .auth-otp-sep { width: 24px; height: 54px; font-size: 1.5rem; }
}

/* Desktop */
@media (min-width: 992px) {
    .auth-container { width: 1000px; max-width: 90vw; height: 600px; max-height: 90vh; }
    .auth-grid { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; }
    .auth-main { display: flex; flex-direction: column; overflow-y: auto; height: 100%; padding: 2rem 0; }
    .auth-panel { padding: 0 2.5rem; flex: 1; display: flex; flex-direction: column; justify-content: center; }

    /* Slider */
    .auth-slider { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #0f172a, #1e293b); padding: 2rem; overflow: hidden; position: relative; }
    .auth-slider-track { position: relative; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .auth-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; opacity: 0; transform: translateX(-60px); transition: all .7s cubic-bezier(.4,0,.2,1); pointer-events: none; }
    .auth-slide.active { opacity: 1; transform: none; pointer-events: auto; }
    .auth-slide-badge { background: rgba(255,255,255,.12); padding: 8px 18px; border-radius: 50px; font: 700 12px/1 var(--ff, inherit); letter-spacing: 1.2px; border: 1px solid rgba(255,255,255,.25); color: #fff; text-transform: uppercase; backdrop-filter: blur(10px); opacity: 0; transform: translateX(-30px); transition: all .5s cubic-bezier(.4,0,.2,1) .15s; }
    .auth-slide.active .auth-slide-badge { opacity: 1; transform: none; background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
    .auth-slide h3 { font: 800 2rem/1.2 var(--ff, inherit); color: #fff; text-align: center; letter-spacing: -.5px; margin: 0; opacity: 0; transform: translateX(-40px); transition: all .6s cubic-bezier(.4,0,.2,1) .25s; }
    .auth-slide.active h3 { opacity: 1; transform: none; }
    .auth-slide p { font-size: 1rem; color: rgba(255,255,255,.8); line-height: 1.6; max-width: 380px; text-align: center; margin: 0; opacity: 0; transform: translateX(-50px); transition: all .7s cubic-bezier(.4,0,.2,1) .35s; }
    .auth-slide.active p { opacity: 1; transform: none; }
    .auth-dots { display: flex; gap: 12px; margin-top: 2rem; justify-content: center; }
    .auth-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; transition: all .4s cubic-bezier(.34,.1,.68,.55); border: 2px solid transparent; flex-shrink: 0; }
    .auth-dot:hover { background: rgba(255,255,255,.4); transform: scale(1.2); }
    .auth-dot.active { background: #fff; width: 28px; border-radius: 6px; box-shadow: 0 2px 8px rgba(255,255,255,.3); }
}