/* ============================================================
   MFA AUTHENTICATION STYLES
   Projenin Bootstrap SCSS temasıyla uyumlu
   
   SCSS Değişken Eşleştirmesi:
     $primary   → #2C3E50  (ana renk, header, buton, border-focus)
     $secondary  → #7F8C8D  (ikincil metin, outline butonlar)
     $success    → #81C784  (tamamlandı adımı, checkmark, switch)
     $info       → #AEDFF7  (bilgi kutusu, aktif adım)
     $warning    → #FBC02D  (recovery warning)
     $danger     → #E57373  (hata alert)
     $light      → #ECF0F1  (body-bg, surface-2)
     $dark       → #34495E  (gradient ikinci ton, hover)
     $card-border-radius → .5rem
     $input-border-color → #B0BEC5
     $input-focus-border-color → $primary
     $input-focus-box-shadow → 0 0 0 0.2rem rgba($primary, 0.25)
     $progress-bg / $progress-bar-bg
     $font-family-base → 'Segoe UI'
   ============================================================ */

/* ── CSS Değişkenleri (SCSS → CSS Custom Properties) ────────── */
:root {
    /* Ana renkler */
    --mfa-primary: #2C3E50; /* $primary         */
    --mfa-primary-hover: #6b8fa8; /* lighten($primary, 30%) */
    --mfa-primary-glow: rgba(44, 62, 80, .10);
    --mfa-dark: #34495E; /* $dark            */
    --mfa-secondary: #7F8C8D; /* $secondary       */
    --mfa-success: #81C784; /* $success         */
    --mfa-success-dark: #4CAF50;
    --mfa-info: #AEDFF7; /* $info            */
    --mfa-info-text: #1565C0;
    --mfa-warning: #FBC02D; /* $warning         */
    --mfa-warning-bg: rgba(251,192,45,.09);
    --mfa-warning-border: rgba(251,192,45,.32);
    --mfa-warning-text: #6D4C00;
    --mfa-danger: #E57373; /* $danger          */
    --mfa-danger-bg: rgba(229,115,115,.09);
    --mfa-danger-border: rgba(229,115,115,.32);
    /* Yüzeyler */
    --mfa-surface: #FFFFFF;
    --mfa-surface-2: #ECF0F1; /* $light / $body-bg */
    --mfa-surface-3: #DDE3E8; /* $progress-bg     */
    /* Kenarlıklar */
    --mfa-border: #D0D7DE; /* $card-border-color */
    --mfa-border-input: #B0BEC5; /* $input-border-color */
    --mfa-border-focus: #2C3E50; /* $input-focus-border-color */
    /* Metin */
    --mfa-text-primary: #2C3E50; /* $body-color      */
    --mfa-text-secondary: #7F8C8D; /* $secondary       */
    --mfa-text-muted: #95A5A6;
    /* Gölgeler */
    --mfa-shadow-sm: 0 1px 3px rgba(44,62,80,.10), 0 1px 2px rgba(44,62,80,.08);
    --mfa-shadow-lg: 0 20px 60px rgba(44,62,80,.14), 0 8px 24px rgba(44,62,80,.09);
    /* Radyuslar – $card-border-radius: .5rem */
    --mfa-radius: .5rem;
    --mfa-radius-lg: .75rem;
    /* Tipografi – $font-family-base */
    --mfa-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --mfa-font-mono: 'Consolas', 'Courier New', monospace;
}

/* ── Layout ─────────────────────────────────────────────────── */
.mfa-setup-container,
.mfa-verify-container,
.mfa-success-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    /* $body-bg bazlı arka plan */
    background: radial-gradient(ellipse 70% 50% at 15% 0%, rgba(44,62,80,.06) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 85% 100%, rgba(52,73,94,.05) 0%, transparent 60%), var(--mfa-surface-2);
    font-family: var(--mfa-font);
}

/* ── Kartlar ─────────────────────────────────────────────────── */
.setup-card,
.verify-card,
.success-card {
    background: var(--mfa-surface);
    border-radius: var(--mfa-radius-lg);
    box-shadow: var(--mfa-shadow-lg);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    border: 1px solid var(--mfa-border); /* $card-border-color */
}

/* ── Adım Göstergesi Header ──────────────────────────────────── */
.card-header-section {
    /* $primary → $dark: $navbar-dark-bg temelli gradient */
    background: linear-gradient(135deg, var(--mfa-primary) 0%, var(--mfa-dark) 100%);
    padding: 2rem 2.5rem 1.5rem;
}

.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}

.step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.50);
    background: transparent;
    transition: all .3s ease;
}

/* Aktif adım – $info (#AEDFF7), $primary üzerinde iyi kontrast */
.step.active .step-num {
    background: var(--mfa-info);
    border-color: var(--mfa-info);
    color: var(--mfa-primary);
    font-weight: 700;
    box-shadow: 0 0 0 4px rgba(174,223,247,.22);
}

/* Tamamlanan adım – $success (#81C784) */
.step.completed .step-num {
    background: var(--mfa-success);
    border-color: var(--mfa-success);
    color: var(--mfa-primary);
}

.step-label {
    font-size: .70rem;
    font-weight: 500;
    color: rgba(255,255,255,.42);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.step.active .step-label,
.step.completed .step-label {
    color: rgba(255,255,255,.90);
}

.step-line {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,.16);
    margin: 0 .75rem;
    margin-bottom: 1.2rem;
    transition: background .3s;
}

    /* Aktif bağlantı çizgisi – $info */
    .step-line.active {
        background: var(--mfa-info);
    }

/* ── Kart Gövdesi ─────────────────────────────────────────────── */
.card-body-section {
    padding: 2.5rem;
}

/* ── Bölüm İkonu ──────────────────────────────────────────────── */
.section-icon {
    width: 56px;
    height: 56px;
    background: var(--mfa-primary-glow);
    border-radius: var(--mfa-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border: 1px solid rgba(44,62,80,.12);
}

    .section-icon svg {
        width: 28px;
        height: 28px;
        color: var(--mfa-primary);
    }

.section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mfa-text-primary);
    text-align: center;
    margin: 0 0 .75rem;
}

.section-desc {
    font-size: .9rem;
    color: var(--mfa-text-secondary);
    text-align: center;
    line-height: 1.65;
    margin: 0 0 2rem;
}

/* ── Authenticator Uygulama Listesi ───────────────────────────── */
.app-grid {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-bottom: 1.5rem;
}

.app-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .875rem 1.25rem;
    border: 1px solid var(--mfa-border-input);
    border-radius: var(--mfa-radius);
    background: var(--mfa-surface-2);
    transition: border-color .2s, box-shadow .2s;
}

    .app-card:hover {
        border-color: var(--mfa-primary);
        box-shadow: var(--mfa-shadow-sm);
    }

.app-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.google-auth {
    background: linear-gradient(135deg, #4285f4, #34a853);
}

.microsoft-auth {
    background: linear-gradient(135deg, #00bcf2, #0078d4);
}

.authy-auth {
    background: linear-gradient(135deg, #ec4a3f, #bf0711);
}

.app-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.app-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--mfa-text-primary);
}

.app-platform {
    font-size: .78rem;
    color: var(--mfa-text-muted);
}

/* ── Bilgi Kutusu – $info (#AEDFF7) ──────────────────────────── */
.info-box {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1.25rem;
    background: rgba(174,223,247,.22);
    border: 1px solid rgba(174,223,247,.65);
    border-radius: var(--mfa-radius);
    margin-bottom: 1.75rem;
}

.info-icon {
    width: 18px;
    height: 18px;
    color: var(--mfa-info-text);
    flex-shrink: 0;
    margin-top: .1rem;
}

.info-box p {
    font-size: .85rem;
    color: var(--mfa-info-text);
    margin: 0;
    line-height: 1.6;
}

/* ── QR Kod ───────────────────────────────────────────────────── */
.qr-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.qr-frame {
    padding: 1rem;
    background: var(--mfa-surface);
    border: 2px solid var(--mfa-border);
    border-radius: var(--mfa-radius);
    box-shadow: var(--mfa-shadow-sm);
    display: inline-block;
}

.qr-image {
    display: block;
    width: 180px;
    height: 180px;
}

.manual-key-section {
    margin-bottom: 2rem;
}

.manual-label {
    font-size: .82rem;
    color: var(--mfa-text-muted);
    text-align: center;
    margin-bottom: .6rem;
}

.secret-key-box {
    display: flex;
    align-items: center;
    background: var(--mfa-surface-3); /* $progress-bg */
    border: 1px solid var(--mfa-border-input);
    border-radius: var(--mfa-radius);
    padding: .75rem 1rem;
    gap: .75rem;
}

    .secret-key-box code {
        font-family: var(--mfa-font-mono);
        font-size: .85rem;
        color: var(--mfa-primary);
        letter-spacing: .12em;
        flex: 1;
        word-break: break-all;
    }

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mfa-text-muted);
    padding: .25rem;
    border-radius: 4px;
    transition: color .2s, background .2s;
    flex-shrink: 0;
}

    .copy-btn:hover {
        color: var(--mfa-primary);
        background: var(--mfa-primary-glow);
    }

    .copy-btn.copied {
        color: var(--mfa-success-dark);
    }

    .copy-btn svg {
        width: 16px;
        height: 16px;
        display: block;
    }

/* ── OTP Girişleri ────────────────────────────────────────────── */
.otp-wrapper {
    margin: .5rem 0 1.5rem;
}

.otp-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.otp-digit {
    width: 52px;
    height: 60px;
    text-align: center;
    font-family: var(--mfa-font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mfa-text-primary);
    background: var(--mfa-surface-2); /* $light */
    border: 2px solid var(--mfa-border-input); /* $input-border-color */
    border-radius: var(--mfa-radius);
    outline: none;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    caret-color: transparent;
}

    /* $input-focus-border-color + $input-focus-box-shadow */
    .otp-digit:focus {
        border-color: var(--mfa-border-focus);
        background: var(--mfa-surface);
        box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
        transform: translateY(-2px);
    }

    .otp-digit:not(:placeholder-shown) {
        border-color: var(--mfa-primary);
        background: var(--mfa-surface);
    }

.otp-separator {
    font-size: 1.2rem;
    color: var(--mfa-text-muted);
    user-select: none;
    padding: 0 .1rem;
}

/* ── TOTP Zamanlayıcı ─────────────────────────────────────────── */
.timer-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.timer-ring {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.circular-chart {
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: var(--mfa-surface-3); /* $progress-bg */
    stroke-width: 3;
}

/* Aktif halka – $info ton */
.circle {
    fill: none;
    stroke: var(--mfa-info-text);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray .9s linear, stroke .5s;
}

.timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--mfa-font-mono);
    font-size: .78rem;
    font-weight: 700;
    color: var(--mfa-text-primary);
}

.timer-label {
    font-size: .82rem;
    color: var(--mfa-text-secondary);
}

/* ── Ana Buton – .btn-primary SCSS override ile uyumlu ──────── */
.btn-primary-mfa {
    width: 100%;
    padding: .75rem 1.5rem;
    background-color: var(--mfa-primary); /* $primary */
    border: 1px solid var(--mfa-primary);
    color: #fff;
    border-radius: var(--mfa-radius); /* $card-border-radius */
    font-family: var(--mfa-font);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    transition: background-color .2s, border-color .2s, box-shadow .2s, transform .15s;
    letter-spacing: .01em;
}

    /* lighten($primary, 30%) ≈ #6b8fa8 – SCSS .btn-primary:hover ile birebir */
    .btn-primary-mfa:hover:not(:disabled) {
        background-color: var(--mfa-primary-hover);
        border-color: var(--mfa-primary-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(44,62,80,.28);
    }

    /* $btn-focus-box-shadow: 0 0 0 0.25rem rgba($primary, 0.25) */
    .btn-primary-mfa:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(44, 62, 80, 0.25);
    }

    .btn-primary-mfa:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: none;
    }

    .btn-primary-mfa:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

    .btn-primary-mfa svg {
        width: 18px;
        height: 18px;
    }

/* $secondary outline – .btn-secondary ile uyumlu */
.btn-outline-action {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: transparent;
    border: 1.5px solid var(--mfa-border-input);
    border-radius: var(--mfa-radius);
    font-family: var(--mfa-font);
    font-size: .85rem;
    font-weight: 500;
    color: var(--mfa-secondary);
    cursor: pointer;
    transition: all .2s;
}

    /* lighten($secondary, 30%) hover – SCSS .btn-secondary:hover ile uyumlu */
    .btn-outline-action:hover {
        border-color: var(--mfa-secondary);
        color: var(--mfa-primary);
        background: var(--mfa-surface-3);
    }

    .btn-outline-action svg {
        width: 15px;
        height: 15px;
    }

/* ── Hata Uyarısı – $danger (#E57373) ────────────────────────── */
.alert-error {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    background: var(--mfa-danger-bg);
    border: 1px solid var(--mfa-danger-border);
    border-radius: var(--mfa-radius); /* $alert-border-radius */
    margin-bottom: 1.25rem;
    color: var(--mfa-danger);
    font-size: .875rem;
    font-weight: 500;
    animation: mfa-shake .4s ease;
}

    .alert-error svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

@keyframes mfa-shake {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX( 5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX( 3px);
    }
}

/* ── Verify Kart Başlığı ──────────────────────────────────────── */
.verify-card .verify-header {
    background: linear-gradient(160deg, var(--mfa-primary) 0%, var(--mfa-dark) 100%);
    padding: 2.5rem 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.verify-header::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -25%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.shield-icon {
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,.10);
    border-radius: var(--mfa-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    border: 1px solid rgba(255,255,255,.16);
}

    .shield-icon svg {
        width: 32px;
        height: 32px;
        color: #fff;
    }

.verify-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .5rem;
}

.verify-subtitle {
    font-size: .88rem;
    color: rgba(255,255,255,.68);
    margin: 0 0 .5rem;
}

/* $info badge – $primary header'da okunabilir */
.username-badge {
    font-family: var(--mfa-font-mono);
    background: rgba(174,223,247,.18);
    border: 1px solid rgba(174,223,247,.28);
    padding: .1rem .5rem;
    border-radius: 20px;
    font-size: .78rem;
    color: var(--mfa-info);
}

.verify-desc {
    font-size: .85rem;
    color: rgba(255,255,255,.52);
    margin: 0;
}

.verify-card .card-body-section {
    padding: 2rem 2.5rem 2.5rem;
}

/* ── Geri Dön Linki ───────────────────────────────────────────── */
.footer-links {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.back-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--mfa-text-muted);
    text-decoration: none;
    transition: color .2s;
}

    .back-link:hover {
        color: var(--mfa-primary);
    }

    .back-link svg {
        width: 15px;
        height: 15px;
    }

/* ── Başarı Kartı ─────────────────────────────────────────────── */
.success-card {
    padding: 2.5rem;
    text-align: center;
}

.success-animation {
    margin-bottom: 1.5rem;
}

.checkmark-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkmark-svg {
    width: 72px;
    height: 72px;
}

/* $success animasyonu */
.checkmark-circle-path {
    stroke: var(--mfa-success);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: mfa-stroke .6s cubic-bezier(.65,0,.45,1) .3s forwards;
}

.checkmark-path {
    stroke: var(--mfa-success);
    stroke-width: 2.5;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: mfa-stroke .4s cubic-bezier(.65,0,.45,1) .9s forwards;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes mfa-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.success-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--mfa-text-primary);
    margin: 0 0 .75rem;
}

.success-desc {
    font-size: .9rem;
    color: var(--mfa-text-secondary);
    line-height: 1.65;
    margin: 0 0 2rem;
}

/* ── Recovery Kodları – $warning uyarı kutusu ─────────────────── */
.recovery-section {
    background: var(--mfa-surface-2); /* $light */
    border: 1px solid var(--mfa-border);
    border-radius: var(--mfa-radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.recovery-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

    .recovery-header svg {
        width: 20px;
        height: 20px;
        color: var(--mfa-primary);
    }

    .recovery-header h3 {
        font-size: .95rem;
        font-weight: 700;
        color: var(--mfa-text-primary);
        margin: 0;
    }

/* $warning (#FBC02D) uyarı kutusu */
.recovery-warning {
    display: flex;
    gap: .75rem;
    padding: .875rem 1rem;
    background: var(--mfa-warning-bg);
    border: 1px solid var(--mfa-warning-border);
    border-radius: var(--mfa-radius);
    margin-bottom: 1.25rem;
}

    .recovery-warning svg {
        width: 18px;
        height: 18px;
        color: var(--mfa-warning);
        flex-shrink: 0;
        margin-top: .1rem;
    }

    .recovery-warning p {
        font-size: .82rem;
        color: var(--mfa-warning-text);
        margin: 0;
        line-height: 1.6;
    }

.codes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: 1rem;
}

.recovery-code {
    background: var(--mfa-surface);
    border: 1px solid var(--mfa-border);
    border-radius: calc(var(--mfa-radius) * .75);
    padding: .5rem .875rem;
    text-align: center;
}

    .recovery-code code {
        font-family: var(--mfa-font-mono);
        font-size: .82rem;
        font-weight: 700;
        color: var(--mfa-primary);
        letter-spacing: .08em;
    }

.code-actions {
    display: flex;
    gap: .75rem;
}

/* ── Özel Checkbox ────────────────────────────────────────────── */
/* $component-active-bg: $success; $form-switch-checked-bg: $success */
.confirm-check {
    margin-bottom: 1.25rem;
    text-align: left;
}

.custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
    font-size: .875rem;
    color: var(--mfa-text-secondary);
    line-height: 1.5;
}

    .custom-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        border: 2px solid var(--mfa-border-input);
        border-radius: 4px;
        appearance: none;
        cursor: pointer;
        flex-shrink: 0;
        margin-top: .15rem;
        transition: all .2s;
        background-color: var(--mfa-surface);
    }

        /* $input-focus-box-shadow */
        .custom-checkbox input[type="checkbox"]:focus {
            box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
            outline: none;
        }

        /* $component-active-bg = $success = #81C784, tick rengi $primary */
        .custom-checkbox input[type="checkbox"]:checked {
            background-color: var(--mfa-success);
            border-color: var(--mfa-success);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232C3E50' stroke-width='2.5' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
            background-size: 11px;
            background-repeat: no-repeat;
            background-position: center;
        }

/* ── Bu Cihazı Hatırla (TrustDevice) ────────────────────────────
   MfaVerify sayfasındaki "30 gün hatırla" checkbox bölümü.
   $primary, $warning, $light değişkenleriyle uyumlu.
   ─────────────────────────────────────────────────────────────── */

.trust-device-section {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--mfa-surface-2); /* $light */
    border: 1px solid var(--mfa-border);
    border-radius: var(--mfa-radius);
}

/* Checkbox + metin satırı */
.trust-device-label {
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
    margin: 0;
    position: relative;
}

/* Native checkbox'ı gizle */
.trust-device-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Özel checkbox kutusu – $success ile uyumlu */
.trust-device-checkmark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mfa-border-input);
    border-radius: 5px;
    background: var(--mfa-surface);
    transition: background .2s, border-color .2s, box-shadow .2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checked durumu – $component-active-bg = $success */
.trust-device-checkbox:checked + .trust-device-checkmark {
    background-color: var(--mfa-success);
    border-color: var(--mfa-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232C3E50' stroke-width='2.5' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Focus halkası – $input-focus-box-shadow */
.trust-device-checkbox:focus + .trust-device-checkmark {
    box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
    outline: none;
}

.trust-device-text {
    font-size: .875rem;
    color: var(--mfa-text-primary);
    line-height: 1.4;
    user-select: none;
}

    .trust-device-text strong {
        color: var(--mfa-primary);
    }

/* Uyarı satırı – $warning ton */
.trust-device-hint {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .75rem 0 0;
    font-size: .78rem;
    color: var(--mfa-warning-text);
    line-height: 1.5;
}

    .trust-device-hint svg {
        width: 14px;
        height: 14px;
        color: var(--mfa-warning);
        flex-shrink: 0;
        margin-top: .1rem;
    }

/* ── Yükleme Spinner ──────────────────────────────────────────── */
.spin {
    animation: mfa-spin .8s linear infinite;
    width: 18px;
    height: 18px;
}

@keyframes mfa-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* ── Progress Bar ─────────────────────────────────────────────── */
/* $progress-height: 0.5rem | $progress-bg: #DDE3E8 | $progress-bar-bg: $primary */
.mfa-progress {
    height: .5rem;
    background-color: var(--mfa-surface-3);
    border-radius: var(--mfa-radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.mfa-progress-bar {
    height: 100%;
    background-color: var(--mfa-primary);
    border-radius: var(--mfa-radius);
    transition: width .4s ease;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 520px) {
    .card-body-section {
        padding: 1.5rem;
    }

    .card-header-section {
        padding: 1.5rem 1.5rem 1.25rem;
    }

    .verify-card .verify-header {
        padding: 2rem 1.5rem 1.5rem;
    }

    .otp-digit {
        width: 44px;
        height: 54px;
        font-size: 1.3rem;
    }

    .success-card {
        padding: 1.5rem;
    }

    .codes-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Deneme Hakkı Göstergesi (attempt-indicator) ─────────────────────────
   MfaVerify ve MfaSetup adım 3'te yanlış kod sonrası görünür.
   5 nokta: dolu = kalan hak, boş = kullanılmış.
   ─────────────────────────────────────────────────────────────────────── */

.attempt-indicator {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    background: rgba(251, 192, 45, .08); /* $warning */
    border: 1px solid rgba(251, 192, 45, .28);
    border-radius: var(--mfa-radius);
    margin-bottom: .75rem;
}

.attempt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background .25s, transform .2s;
}

    .attempt-dot.active {
        background: var(--mfa-primary); /* $primary – kalan hak */
        transform: scale(1.1);
    }

    .attempt-dot.used {
        background: var(--mfa-danger); /* $danger – kullanılmış */
        opacity: .45;
    }

.attempt-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mfa-warning-text);
    margin-left: .35rem;
    white-space: nowrap;
}

/* ── Kilitli Durum (locked-state) ────────────────────────────────────────
   5 hak bittikten sonra form yerine gösterilir.
   ─────────────────────────────────────────────────────────────────────── */

.locked-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 0 .5rem;
    text-align: center;
}

.locked-icon {
    width: 56px;
    height: 56px;
    background: rgba(229, 115, 115, .10); /* $danger */
    border: 1px solid rgba(229, 115, 115, .25);
    border-radius: var(--mfa-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .locked-icon svg {
        width: 28px;
        height: 28px;
        color: var(--mfa-danger);
    }

.locked-message {
    font-size: .9rem;
    color: var(--mfa-text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 300px;
}

/* ── Recovery Kodu Toggle & Input ────────────────────────────────────────
   MfaVerify sayfasında OTP kutularının altındaki "Kurtarma kodu kullan"
   bölümü. TOTP ve recovery alanı asla aynı anda gösterilmez.
   ─────────────────────────────────────────────────────────────────────── */

.recovery-toggle-row {
    display: flex;
    justify-content: center;
    margin: -.25rem 0 1rem;
}

.recovery-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--mfa-font);
    font-size: .82rem;
    font-weight: 500;
    color: var(--mfa-text-muted);
    padding: .35rem .5rem;
    border-radius: 6px;
    transition: color .2s, background .2s;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
}

    .recovery-toggle-btn:hover {
        color: var(--mfa-primary);
        text-decoration-color: var(--mfa-primary);
        background: var(--mfa-primary-glow);
    }

    .recovery-toggle-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

.recovery-toggle-back {
    margin-top: .75rem;
    font-size: .8rem;
}

/* ── Recovery giriş alanı ─────────────────────────────────────────────── */

.recovery-input-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--mfa-text-secondary);
    margin-bottom: .5rem;
}

.recovery-input-wrapper {
    position: relative;
    margin-bottom: .5rem;
}

.recovery-input {
    width: 100%;
    padding: .75rem 1rem;
    font-family: var(--mfa-font-mono);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--mfa-text-primary);
    background: var(--mfa-surface-2);
    border: 2px solid var(--mfa-border-input);
    border-radius: var(--mfa-radius);
    outline: none;
    text-align: center;
    text-transform: uppercase;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

    .recovery-input::placeholder {
        color: var(--mfa-text-muted);
        letter-spacing: .06em;
        font-weight: 400;
    }

    /* $input-focus-border-color + $input-focus-box-shadow */
    .recovery-input:focus {
        border-color: var(--mfa-border-focus);
        background: var(--mfa-surface);
        box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
    }

    .recovery-input:not(:placeholder-shown) {
        border-color: var(--mfa-primary);
        background: var(--mfa-surface);
    }