/**
 * Quiz Single Page Styles - Modern & Perfect Design
 */

/* ============================================
   Prevent Scroll on Page Load - Quiz Pages
   ============================================ */
/* Sticky navigatör için overflow-x: hidden kaldırılır (html + body) */
html:has(body.single-quiz),
html:has(body.post-type-quiz),
html:has(main.page-robot-oturum) {
    overflow-x: clip;
}

body.single-quiz,
body.post-type-quiz,
body.page-template-page-robot-oturum {
    overflow-x: clip;
}

body.single-quiz .site-content,
body.post-type-quiz .site-content,
body.page-template-page-robot-oturum .site-content {
    overflow-x: clip;
    overflow-y: visible;
}

body.single-quiz html,
body.post-type-quiz html {
    scroll-behavior: auto !important;
}

/* Prevent scroll restoration on quiz pages */
body.single-quiz,
body.post-type-quiz {
    scroll-behavior: auto !important;
}

/* ============================================
   Quiz Container - Site Main Genişliğini Kullan
   Eklenti mantık, tema görünüm
   Quiz sayfası site-main genişliğini kullanır, özel genişlik yok
   ============================================ */

/* ============================================
   Quiz Header - Compact & Elegant
   ============================================ */

.quiz-single-header {
    margin-bottom: 1rem;
    position: relative;
}

.quiz-header-content {
    background: var(--content-bg);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.quiz-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.quiz-header-top-left {
    flex: 1;
    min-width: 0;
}

.quiz-header-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.quiz-category-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.875rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
}

.quiz-category-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
}

.quiz-difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    background: var(--bg-primary);
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    border: 1.5px solid var(--border-color);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.quiz-difficulty-badge:hover {
    border-color: var(--difficulty-color);
    background: rgba(var(--difficulty-color), 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.difficulty-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--difficulty-color);
    box-shadow: 0 0 8px var(--difficulty-color), 0 0 4px var(--difficulty-color);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.quiz-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.4;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Quiz Edit Actions */
.quiz-edit-actions {
    flex-shrink: 0;
}

.quiz-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.25);
    border: none;
    cursor: pointer;
}

.quiz-edit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
}

.quiz-edit-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.quiz-edit-btn:hover svg {
    transform: rotate(-15deg);
}

.quiz-edit-btn span {
    white-space: nowrap;
}

/* ============================================
   Quiz Stats - Compact Inline
   ============================================ */

.quiz-header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.quiz-stats-compact {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.quiz-stats-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    flex-shrink: 0;
    margin: 0 0.25rem;
}

.quiz-tags-compact-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quiz-tags-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}

.quiz-stat-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.quiz-stat-compact svg {
    width: 14px;
    height: 14px;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.quiz-date-compact {
    color: var(--text-secondary);
}

.quiz-date-compact svg {
    color: var(--accent-primary);
}

.quiz-social-compact {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.quiz-like-btn-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    border: none;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.3);
    white-space: nowrap;
}

.quiz-like-btn-compact:hover {
    background: linear-gradient(135deg, #e11d48, #be123c);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4);
}

.quiz-like-btn-compact.liked {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
}

.quiz-like-btn-compact.liked:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 5px 16px rgba(239, 68, 68, 0.5);
}

.quiz-like-btn-compact svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.quiz-view-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    white-space: nowrap;
}

.quiz-view-compact svg {
    width: 15px;
    height: 15px;
    color: white;
    flex-shrink: 0;
}

/* ============================================
   Quiz Tags - Compact
   ============================================ */

.quiz-tags-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.quiz-tag-link-compact {
    padding: 0.4375rem 0.875rem;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid var(--border-color);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.quiz-tag-link-compact:hover {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}

/* ============================================
   Quiz Container - Removed (No Wrapper)
   ============================================ */

/* ============================================
   Quiz Questions Layout
   ============================================ */

.quiz-content-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

.quiz-questions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}


/* ============================================
   View Mode Selector - Standalone
   ============================================ */

.view-mode-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 1rem;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: visible !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.view-mode-group > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-width: 0;
}

.quiz-question-card .view-mode-group {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.quiz-question-card > .view-mode-group:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Liste modunda sadece ilk kartta göster */
.quiz-question-card:not(:first-child) .view-mode-group {
    display: none !important;
}

/* Tek soru modunda tüm kartlarda göster (JavaScript ile eklenen class) */
body.single-mode .quiz-question-card .view-mode-group,
.quiz-questions-wrapper.single-mode .quiz-question-card .view-mode-group {
    display: flex !important;
}

.view-mode-buttons {
    display: inline-flex !important;
    gap: 0.375rem;
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.3125rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.view-mode-buttons > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.view-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.5625rem 0.9375rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
}

.view-mode-btn:hover {
    color: var(--accent-primary);
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.view-mode-btn.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
    transform: translateY(-1px);
}

.view-mode-btn.active:hover {
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}

.view-mode-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.view-mode-btn span {
    font-size: 0.8125rem;
}

/* ============================================
   Instant Answer Control
   ============================================ */

.instant-answer-control {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.instant-answer-control > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.instant-answer-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.instant-toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.instant-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.instant-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 28px;
}

.instant-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.instant-toggle-input:checked + .instant-toggle-slider {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-color: var(--accent-primary);
}

.instant-toggle-input:checked + .instant-toggle-slider:before {
    transform: translateY(-50%) translateX(24px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.instant-toggle-input:focus + .instant-toggle-slider {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.instant-toggle-input:hover + .instant-toggle-slider {
    border-color: var(--accent-primary);
}

/* ============================================
   Quiz Timer
   ============================================ */

.quiz-timer-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.quiz-timer {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    padding: 0.5625rem 1.125rem;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.16), rgba(234, 88, 12, 0.1));
    border: 1.5px solid rgba(249, 115, 22, 0.45);
    border-radius: 12px;
    font-weight: 700;
    color: #ea580c;
    min-width: 100px;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(249, 115, 22, 0.28);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.quiz-timer svg {
    width: 18px;
    height: 18px;
    color: #f97316;
    flex-shrink: 0;
}

.quiz-timer.warning {
    border-color: rgba(245, 158, 11, 0.62);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.14));
    color: #d97706;
    box-shadow: 0 2px 14px rgba(245, 158, 11, 0.32);
}

.quiz-timer.warning svg {
    color: #f59e0b;
}

.quiz-timer.danger {
    border-color: rgba(239, 68, 68, 0.65);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(220, 38, 38, 0.16));
    color: #dc2626;
    box-shadow: 0 2px 16px rgba(239, 68, 68, 0.38);
    animation: timer-danger-pulse 1s ease-in-out infinite;
}

.quiz-timer.danger svg {
    color: #ef4444;
}

@keyframes timer-danger-pulse {
    0%, 100% {
        box-shadow: 0 2px 16px rgba(239, 68, 68, 0.38);
    }
    50% {
        box-shadow: 0 2px 22px rgba(239, 68, 68, 0.55);
    }
}

[data-theme="dark"] .quiz-timer {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.22), rgba(249, 115, 22, 0.14));
    border-color: rgba(251, 146, 60, 0.5);
    color: #fb923c;
    box-shadow: 0 2px 14px rgba(251, 146, 60, 0.32);
}

[data-theme="dark"] .quiz-timer svg {
    color: #fdba74;
}

/* ============================================
   Quiz Finish Button
   ============================================ */

.quiz-finish-btn {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    padding: 0.5625rem 1.375rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 1.5px solid #ef4444;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3);
}

.quiz-finish-btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(239, 68, 68, 0.45);
}

.quiz-finish-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.quiz-finish-btn:disabled {
    opacity: 0.9;
    cursor: not-allowed;
    transform: none;
}

.quiz-finish-btn:disabled .loading-spinner {
    animation: spin 0.8s linear infinite;
}

.quiz-finish-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.quiz-finish-btn .loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.quiz-finish-btn .submitting-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.quiz-finish-btn .submitting-text .loading-dots {
    display: inline-flex;
    gap: 0.25rem;
}

.quiz-finish-btn .submitting-text .loading-dots span {
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
    display: inline-block;
}

.quiz-finish-btn .submitting-text .loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.quiz-finish-btn .submitting-text .loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.timer-text {
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* ============================================
   Quiz List Finish Button
   ============================================ */

.quiz-list-finish {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    border-top: 1.5px solid var(--border-color);
}

.quiz-finish-btn-list {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    padding: 0.5625rem 1.375rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 1.5px solid #ef4444;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.quiz-finish-btn-list:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.quiz-finish-btn-list:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.quiz-finish-btn-list:disabled {
    opacity: 0.9;
    cursor: not-allowed;
    transform: none;
}

.quiz-finish-btn-list:disabled .loading-spinner {
    animation: spin 0.8s linear infinite;
}

.quiz-finish-btn-list svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.quiz-finish-btn-list .loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

.quiz-finish-btn-list .submitting-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.quiz-finish-btn-list .submitting-text .loading-dots {
    display: inline-flex;
    gap: 0.25rem;
}

.quiz-finish-btn-list .submitting-text .loading-dots span {
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
    display: inline-block;
}

.quiz-finish-btn-list .submitting-text .loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.quiz-finish-btn-list .submitting-text .loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}


/* ============================================
   Single Question Navigation - Modern
   ============================================ */

.quiz-single-navigation {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.nav-controls-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.375rem 1.75rem;
    background: var(--content-bg);
    border-radius: 16px;
    border: 1.5px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.nav-controls-wrapper:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    padding: 0.8125rem 1.625rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
    white-space: nowrap;
}

.nav-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.nav-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.nav-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-btn.nav-finish {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.nav-btn.nav-finish:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.nav-info-modern {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 1.5px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    min-width: 140px;
    justify-content: center;
}

.nav-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 8px;
    color: white;
    flex-shrink: 0;
}

.nav-info-icon svg {
    width: 18px;
    height: 18px;
}

.nav-info-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.nav-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-info-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Answer Feedback (Instant Mode)
   ============================================ */

.quiz-option-label {
    position: relative;
}

.answer-feedback {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    animation: feedback-appear 0.3s ease;
}

@keyframes feedback-appear {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.quiz-option-label.correct-answer {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    color: #059669;
}

.quiz-option-label.correct-answer .answer-feedback {
    background: #10b981;
    color: white;
}

.quiz-option-label.correct-answer .quiz-option-marker {
    background: #10b981 !important;
    border-color: #10b981 !important;
}

.quiz-option-label.correct-answer .option-letter {
    color: white !important;
}

.quiz-option-label.wrong-answer {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    color: #dc2626;
}

.quiz-option-label.wrong-answer .answer-feedback {
    background: #ef4444;
    color: white;
}

.quiz-option-label.wrong-answer .quiz-option-marker {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}

.quiz-option-label.wrong-answer .option-letter {
    color: white !important;
}

.answer-feedback svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   Quiz Form & Questions - Clean Cards
   ============================================ */

.quiz-form {
    margin-bottom: 0;
}

/* Quiz ilerleme çubuğu */
.quiz-progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.quiz-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}
.quiz-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
}
.quiz-progress-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 3rem;
}

.quiz-question-card {
    background: var(--content-bg);
    border-radius: 14px;
    padding: 1rem 1.125rem 1.125rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.quiz-question-card.card {
    gap: 0;
    padding: 1rem 1.125rem 1.125rem;
}

.quiz-question-card > .view-mode-group {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
}

/* ============================================
   Question Navigator - Main (Single)
   ============================================ */

.quiz-navigator-main {
    position: sticky;
    top: calc(var(--real-header-height, var(--header-height, 110px)) + 1rem);
    align-self: start;
    background: var(--content-bg);
    border-radius: 16px;
    padding: 1.125rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    height: fit-content;
    max-height: calc(100vh - var(--real-header-height, var(--header-height, 110px)) - 2rem);
    overflow: visible;
    z-index: 2;
}

.quiz-navigator-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 45%, transparent));
    opacity: 0.9;
}

.navigator-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.navigator-title-main {
    font-weight: 650;
    color: var(--text-primary);
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

.navigator-count-main {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--content-bg));
    border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-color));
}

.navigator-count-main span {
    color: var(--accent-primary);
    font-weight: 700;
}

.navigator-progress {
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--border-color));
    margin-bottom: 0.875rem;
    overflow: hidden;
}

.navigator-progress__fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 70%, var(--accent-secondary, var(--accent-primary))));
    transition: width 0.35s ease;
}

.navigator-items-main {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    max-height: min(260px, calc(100vh - var(--real-header-height, var(--header-height, 110px)) - 13rem));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: color-mix(in srgb, var(--border-color) 70%, var(--accent-primary)) transparent;
    padding: 4px 2px 8px 4px;
    margin-inline: -2px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.navigator-items-main::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.navigator-items-main::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

.navigator-items-main::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border-color) 75%, var(--accent-primary));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.navigator-items-main::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--border-color) 55%, var(--accent-primary));
    background-clip: padding-box;
}

[data-theme="dark"] .navigator-items-main {
    scrollbar-color: color-mix(in srgb, var(--border-color) 48%, var(--accent-primary)) transparent;
}

[data-theme="dark"] .navigator-items-main::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border-color) 42%, var(--accent-primary));
}

[data-theme="dark"] .navigator-items-main::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--border-color) 32%, var(--accent-primary));
}

.navigator-item-main {
    position: relative;
    min-width: 0;
    width: 100%;
    min-height: 38px;
    height: auto;
    aspect-ratio: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: none;
    overflow: visible;
}

.navigator-item-main:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-tertiary));
    color: var(--text-primary);
}

.navigator-item-main.active,
.navigator-item-main.current {
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--content-bg));
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-primary) 45%, transparent);
    font-weight: 700;
}

.navigator-item-main.answered {
    background: color-mix(in srgb, var(--accent-primary) 82%, var(--content-bg));
    border-color: var(--accent-primary);
    color: #fff;
}

.navigator-item-main.correct {
    background: color-mix(in srgb, #22c55e 16%, var(--content-bg));
    border-color: #22c55e;
    color: #16a34a;
}

.navigator-item-main.wrong {
    background: color-mix(in srgb, #ef4444 12%, var(--content-bg));
    border-color: #ef4444;
    color: #dc2626;
}

.navigator-item-main.marked {
    background: color-mix(in srgb, #f59e0b 20%, var(--content-bg));
    border-color: #f59e0b;
    color: #b45309;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b 35%, transparent);
}

.navigator-item-main.marked.active,
.navigator-item-main.marked.current {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, #f59e0b 55%, transparent),
        inset 0 0 0 1px color-mix(in srgb, #f59e0b 35%, transparent);
}

.navigator-item-main.marked.correct,
.navigator-item-main.marked.wrong {
    border-left: 3px solid #f59e0b;
    padding-left: 1px;
}

.navigator-item-main.marked.answered {
    border-color: #f59e0b;
    border-left-width: 3px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b 40%, transparent);
}

.navigator-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.65rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-dot.legend-current {
    background: var(--accent-primary);
}

.legend-dot.legend-answered {
    background: var(--accent-primary);
}

.legend-dot.legend-correct {
    background: #22c55e;
}

.legend-dot.legend-wrong {
    background: #ef4444;
}

.legend-dot.legend-empty {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.legend-dot.legend-marked {
    background: #f59e0b;
    box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 40%, transparent);
}

.legend-text {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.2;
}

.navigator-item-main:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.question-header-left {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.question-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.question-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, background 0.2s, transform 0.15s;
}

.question-action-btn:hover {
    color: var(--accent-primary);
    background: rgba(102, 126, 234, 0.1);
}

.question-action-btn svg {
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 16px;
}

.question-action-btn.question-mark-btn.marked {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

.question-action-btn.question-mark-btn.marked svg {
    fill: rgba(245, 158, 11, 0.15);
}

.question-action-btn.question-favorite-btn.is-favorited {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.question-action-btn.question-favorite-btn.is-favorited svg {
    fill: #ef4444;
    stroke: #ef4444;
    transition: fill 0.12s ease, stroke 0.12s ease, transform 0.12s ease;
}

.question-action-btn.question-favorite-btn.is-favorite-pop {
    animation: qmFavoritePop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.question-action-btn.question-favorite-btn.is-favorite-pop svg {
    transform: scale(1.08);
}

.question-action-btn.question-note-btn.has-note {
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.12);
}

.question-action-btn.question-note-btn.has-note svg {
    fill: rgba(14, 165, 233, 0.15);
    stroke: #0ea5e9;
}

@keyframes qmFavoritePop {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.question-action-btn.is-active {
    color: var(--accent-primary);
    background: rgba(102, 126, 234, 0.12);
}

.question-action-btn.question-mark-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    gap: 0;
}

.question-action-btn.question-mark-btn:hover {
    transform: none;
    border: none;
}

.question-mark-btn:not(.question-action-btn) {
    flex-shrink: 0;
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 0.875rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.question-mark-btn:hover {
    border-color: var(--accent-primary);
    background: rgba(102, 126, 234, 0.1);
    color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.15);
}

.question-mark-btn.marked {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.question-mark-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mark-btn-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
}

.question-number {
    flex-shrink: 0;
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.875rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3), 0 2px 6px rgba(102, 126, 234, 0.2);
    white-space: nowrap;
    transition: all 0.25s ease;
}

.question-number:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4), 0 3px 8px rgba(102, 126, 234, 0.3);
    transform: translateY(-1px);
}

.question-image {
    margin: 0 0 0.625rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-light, var(--border-color));
    background: var(--bg-surface-alt, var(--bg-tertiary));
}

.question-image img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    background: var(--bg-surface, var(--bg-secondary));
}

[data-theme="dark"] .question-image {
    border-color: var(--border-color);
}

[data-theme="dark"] .question-image img {
    background: var(--bg-tertiary);
}

.question-text {
    width: 100%;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
}

.question-text p {
    margin: 0 0 0.375rem;
}

.question-text p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Question Explanation - Clean & Simple
   ============================================ */

.question-explanation {
    margin: 0.75rem 0 0;
    padding: 0;
    background: transparent;
    border: none;
    animation: slideDownFade 0.3s ease-out;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.explanation-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    padding: 0.75rem 0.875rem;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-primary);
    border-radius: 6px;
    margin-top: 0.5rem;
}

/* ============================================
   Quiz Options
   ============================================ */

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quiz-option-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 0.875rem;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    position: relative;
    font-size: 0.875rem;
    justify-content: space-between;
    box-shadow: none;
}

.quiz-option-label:hover {
    border-color: var(--accent-primary);
    background: rgba(102, 126, 234, 0.06);
    transform: none;
    box-shadow: none;
}

.quiz-option-label.selected {
    border-color: var(--accent-primary);
    background: rgba(102, 126, 234, 0.1);
    box-shadow: none;
    transform: none;
}

.quiz-option-label:has(input:disabled),
.quiz-option-label:has(input[disabled]) {
    opacity: 0.9;
    cursor: not-allowed !important;
}

.quiz-option-input:disabled + .quiz-option-marker {
    opacity: 0.7;
}

.quiz-option-label:has(input:disabled):not(.correct-answer):not(.wrong-answer):hover,
.quiz-option-label:has(input[disabled]):not(.correct-answer):not(.wrong-answer):hover {
    transform: none;
    border-color: var(--border-color);
    background: var(--bg-primary);
}

.quiz-option-input {
    display: none;
}

.quiz-option-marker {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-color);
    border-radius: 7px;
    transition: border-color 0.2s, background 0.2s;
    background: var(--content-bg);
}

.quiz-option-input:checked + .quiz-option-marker {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.option-letter {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.quiz-option-input:checked + .quiz-option-marker .option-letter {
    color: white;
}

.quiz-option-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: color 0.2s ease;
    line-height: 1.45;
    font-weight: 500;
    margin-right: 0.5rem;
    align-self: auto;
    text-align: left;
}

.quiz-option-label:not(.has-option-image) .quiz-option-content {
    display: block;
}

.quiz-option-label:not(.has-option-image) .quiz-option-text {
    width: 100%;
}

.quiz-option-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.quiz-option-label.has-option-image .quiz-option-content {
    align-self: stretch;
}

.quiz-option-image {
    display: block;
    max-width: min(100%, 280px);
}

.quiz-option-image img {
    display: block;
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    border-radius: 8px;
    background: color-mix(in srgb, var(--border-color) 35%, transparent);
}

.quiz-option-label.has-option-image:not(:has(.quiz-option-text)) .quiz-option-content {
    justify-content: center;
}

.quiz-option-input:checked ~ .quiz-option-content .quiz-option-text {
    color: var(--accent-primary);
    font-weight: 600;
}

/* ============================================
   Quiz Actions
   ============================================ */

.quiz-actions {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.quiz-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 3rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.quiz-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(102, 126, 234, 0.4);
}

.quiz-submit-btn:active {
    transform: translateY(-1px);
}

.quiz-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.quiz-submit-btn svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   Quiz Results
   ============================================ */

.quiz-results-container {
    margin-top: 0;
    width: 100%;
}

.quiz-results-full {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.quiz-results-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
    background: var(--content-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.results-header-banner {
    background: linear-gradient(135deg, #ff4d6d 0%, #ef4444 55%, #dc2626 100%);
    padding: 1rem 1.15rem;
    transition: background 0.3s ease;
}

.results-header-banner.is-passed {
    background: linear-gradient(135deg, #34d399 0%, #10b981 55%, #059669 100%);
}

.results-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
}

.results-header-icon {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
}

.results-header-text {
    flex: 1;
    min-width: 0;
}

.results-title-main {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
    color: #fff;
    line-height: 1.3;
}

.results-subtitle {
    font-size: 0.8125rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    line-height: 1.4;
}

.results-xp-note {
    margin-top: 0.35rem;
    color: #fde68a;
    font-weight: 600;
}

.results-summary-panel {
    padding: 1rem 1.15rem 1.15rem;
    background: color-mix(in srgb, var(--bg-tertiary) 55%, var(--content-bg));
}

.results-summary-panel__main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.results-donut {
    flex-shrink: 0;
}

.results-score-block {
    flex: 1;
    min-width: 0;
}

.results-score-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--exam-danger, #ef4444);
    line-height: 1.15;
    margin-bottom: 0.2rem;
}

.results-score-value .score-unit-modern {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.results-score-penalty {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.results-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.results-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 4.25rem;
    padding: 0.55rem 0.4rem 0.5rem;
    border-radius: 12px;
    border: 1px solid transparent;
    text-align: center;
    overflow: hidden;
}

.results-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.1rem;
    opacity: 0.9;
}

.results-stat__value {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.results-stat__value--time {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.results-stat__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.88;
}

.results-stat--correct {
    background: color-mix(in srgb, var(--exam-success, #10b981) 11%, var(--content-bg));
    border-color: color-mix(in srgb, var(--exam-success, #10b981) 22%, transparent);
    color: var(--exam-success, #10b981);
}

.results-stat--wrong {
    background: color-mix(in srgb, var(--exam-danger, #ef4444) 11%, var(--content-bg));
    border-color: color-mix(in srgb, var(--exam-danger, #ef4444) 22%, transparent);
    color: var(--exam-danger, #ef4444);
}

.results-stat--empty {
    background: color-mix(in srgb, var(--text-secondary) 7%, var(--content-bg));
    border-color: color-mix(in srgb, var(--border-color) 65%, transparent);
    color: var(--text-primary);
}

.results-stat--empty .results-stat__label {
    color: var(--text-secondary);
    opacity: 1;
}

.results-stat--time {
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 10%, var(--content-bg));
    border-color: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 22%, transparent);
    color: var(--exam-accent, var(--accent-primary));
}

[data-theme="dark"] .results-stat--correct {
    background: color-mix(in srgb, var(--exam-success, #10b981) 14%, var(--content-bg));
}

[data-theme="dark"] .results-stat--wrong {
    background: color-mix(in srgb, var(--exam-danger, #ef4444) 14%, var(--content-bg));
}

[data-theme="dark"] .results-stat--empty {
    background: color-mix(in srgb, var(--bg-secondary) 80%, var(--content-bg));
}

[data-theme="dark"] .results-stat--time {
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 14%, var(--content-bg));
}

.score-circle-modern {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-circle-bg-modern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.score-track-base-modern {
    stroke: color-mix(in srgb, var(--border-color) 65%, transparent);
}

.score-progress-correct-modern,
.score-progress-wrong-modern {
    transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1);
    stroke-linecap: round;
}

.score-progress-correct-modern {
    stroke: var(--exam-success, #10b981);
}

.score-progress-wrong-modern {
    stroke: var(--exam-danger, #ef4444);
}

.score-content-modern {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
}

.score-number-modern {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.score-divider-modern {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1;
}

.score-total-modern {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1;
}

/* Legacy aliases */
.results-summary-modern,
.results-summary-left-modern,
.results-summary-right-modern,
.stats-cards-modern,
.stat-card-modern {
    display: none;
}

.score-value-modern,
.score-section-modern {
    display: none;
}

/* Results Summary - Compact (Old - Keep for compatibility) */
.results-summary-compact {
    background: var(--content-bg);
    padding: 2rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
    border: 1px solid var(--border-color);
    border-top: none;
}

/* Score Circle - Compact */
.score-circle-compact {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.score-circle-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.score-track-wrong {
    stroke: #ef4444;
    opacity: 0.2;
}

.score-progress-correct {
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    stroke-linecap: round;
    stroke: #10b981;
}

.score-content-compact {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.score-fraction-compact {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.score-percentage-compact {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1;
}

/* Stats Grid - Compact */
.stats-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    flex: 1;
}

.stat-item-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.stat-item-compact:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-icon-compact {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.stat-icon-correct {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.stat-icon-wrong {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stat-icon-empty {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.stat-icon-time {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-info-compact {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
}

.stat-value-compact {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label-compact {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Overall Score - Compact */
.overall-score-compact {
    text-align: right;
    flex-shrink: 0;
    min-width: 180px;
}

.overall-score-value-compact {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.overall-score-rule-compact {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.quiz-results {
    background: var(--content-bg);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.results-header {
    margin-bottom: 2rem;
}

.results-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.results-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.score-circle-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}

.score-circle {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-circle-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-track {
    stroke: var(--border-color);
    opacity: 0.2;
}

.score-progress {
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    stroke-linecap: round;
    stroke: var(--accent-primary);
    opacity: 0.8;
}

.score-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-percentage {
    display: block;
    font-size: 4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}

.score-label-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.score-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
}

.results-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 600px;
}

.result-stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--bg-primary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.result-stat-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.results-message {
    padding: 1.5rem 2rem;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    margin-top: 1rem;
    border: 2px solid;
    line-height: 1.6;
}

.results-message.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: #10b981;
}

.results-message.error,
.results-message.fail {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: #ef4444;
}

/* ============================================
   Answer Analysis
   ============================================ */

body.analysis-fullpage-open {
    overflow: hidden;
}

.answer-analysis-section-full {
    background: var(--content-bg);
    border: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
    border-radius: 14px;
    padding: 0.95rem 1.05rem;
    text-align: left;
}

.answer-analysis-section-full.is-fullpage {
    --analysis-fp-max: 760px;
    --analysis-fp-bg: color-mix(in srgb, var(--bg-secondary) 78%, #0f1419);
    --analysis-fp-panel: color-mix(in srgb, var(--content-bg) 94%, var(--bg-tertiary));
    --analysis-fp-border: color-mix(in srgb, var(--border-color) 34%, transparent);
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.75rem 0.85rem 1rem;
    border: none;
    border-radius: 0;
    background: var(--analysis-fp-bg);
    box-shadow: none;
}

.answer-analysis-section-full.is-fullpage .analysis-compact-header {
    display: none;
}

.answer-analysis-section-full.is-fullpage .analysis-fullpage-shell {
    width: min(100%, var(--analysis-fp-max));
    margin: 1.35rem auto 0;
    padding: 0.85rem 0.95rem 0.8rem;
    border: 1px solid var(--analysis-fp-border);
    border-radius: 14px;
    background: var(--analysis-fp-panel);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.answer-analysis-section-full.is-fullpage .analysis-content {
    width: min(100%, var(--analysis-fp-max));
    margin: 0.6rem auto 0;
    padding: 0.75rem 0.85rem 0.85rem;
    border: 1px solid var(--analysis-fp-border);
    border-radius: 14px;
    background: var(--analysis-fp-panel);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    flex: none;
    overflow: visible;
}

.answer-analysis-section-full.is-fullpage .analysis-fullpage-hero {
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.answer-analysis-section-full.is-fullpage .analysis-fullpage-kicker {
    margin-bottom: 0.25rem;
    font-size: 0.625rem;
}

.answer-analysis-section-full.is-fullpage .analysis-fullpage-title {
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
    font-weight: 800;
}

.answer-analysis-section-full.is-fullpage .analysis-fullpage-subtitle {
    font-size: 0.75rem;
    line-height: 1.4;
}

.answer-analysis-section-full.is-fullpage .analysis-fullpage-back {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    border-radius: 9px;
}

.answer-analysis-section-full.is-fullpage .analysis-fullpage-stats {
    gap: 0.45rem;
}

.answer-analysis-section-full.is-fullpage .analysis-fp-stat {
    min-height: 0;
    padding: 0.48rem 0.58rem;
    border-radius: 10px;
}

.answer-analysis-section-full.is-fullpage .analysis-fp-stat__label {
    font-size: 0.625rem;
}

.answer-analysis-section-full.is-fullpage .analysis-fp-stat__value {
    font-size: 1.2rem;
}

.answer-analysis-section-full.is-fullpage .analysis-preview-bar {
    margin-bottom: 0.65rem;
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 28%, transparent);
    background: color-mix(in srgb, var(--bg-tertiary) 42%, transparent);
}

.answer-analysis-section-full.is-fullpage .analysis-preview-bar__icon {
    width: 1.65rem;
    height: 1.65rem;
}

.answer-analysis-section-full.is-fullpage .analysis-preview-bar__title {
    font-size: 0.8125rem;
}

.answer-analysis-section-full.is-fullpage .analysis-preview-bar__count {
    font-size: 0.6875rem;
}

.answer-analysis-section-full.is-fullpage .analysis-preview-legend {
    gap: 0.45rem 0.75rem;
    padding-top: 0.55rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 24%, transparent);
}

.answer-analysis-section-full.is-fullpage .analysis-legend-item {
    font-size: 0.625rem;
}

.answer-analysis-section-full.is-fullpage .analysis-list {
    gap: 0.6rem;
}

.answer-analysis-section-full.is-fullpage .analysis-card {
    border-radius: 12px;
}

.answer-analysis-section-full.is-fullpage .analysis-card__head {
    padding: 0.6rem 0.75rem 0.45rem;
}

.answer-analysis-section-full.is-fullpage .analysis-card__badge {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.75rem;
    border-radius: 7px;
}

.answer-analysis-section-full.is-fullpage .analysis-card__index {
    font-size: 0.625rem;
}

.answer-analysis-section-full.is-fullpage .analysis-card__status {
    min-height: 1.35rem;
    padding: 0 0.45rem;
    font-size: 0.625rem;
}

.answer-analysis-section-full.is-fullpage .analysis-card__body {
    padding: 0 0.75rem 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.answer-analysis-section-full.is-fullpage .analysis-card__body pre,
.answer-analysis-section-full.is-fullpage .analysis-card__body code {
    margin-top: 0.55rem;
    padding: 0.7rem 0.8rem;
    font-size: 0.75rem;
    border-radius: 9px;
}

.answer-analysis-section-full.is-fullpage .analysis-card__options {
    gap: 0.35rem;
    padding: 0 0.75rem 0.75rem;
}

.answer-analysis-section-full.is-fullpage .analysis-option {
    padding: 0.5rem 0.6rem;
    border-radius: 9px;
}

.answer-analysis-section-full.is-fullpage .analysis-option__letter {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.6875rem;
}

.answer-analysis-section-full.is-fullpage .analysis-option__text {
    font-size: 0.75rem;
}

.answer-analysis-section-full.is-fullpage .analysis-card__explanation {
    margin: 0 0.75rem 0.75rem;
    padding: 0.6rem 0.7rem;
    font-size: 0.75rem;
}

.analysis-fullpage-shell {
    flex-shrink: 0;
    padding: 1.15rem 1.15rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 42%, transparent);
    background: color-mix(in srgb, var(--bg-tertiary) 55%, var(--content-bg));
}

.answer-analysis-section-full.is-fullpage .analysis-fullpage-shell {
    flex-shrink: 0;
    border-bottom: 1px solid var(--analysis-fp-border);
    background: var(--analysis-fp-panel);
}

.analysis-fullpage-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.analysis-fullpage-kicker {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--exam-accent, var(--accent-primary));
}

.analysis-fullpage-title {
    margin: 0 0 0.35rem;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
}

.analysis-fullpage-subtitle {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.analysis-fullpage-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-height: 2.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--content-bg) 88%, transparent);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.analysis-fullpage-back:hover {
    background: color-mix(in srgb, var(--text-secondary) 8%, var(--content-bg));
    border-color: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 30%, var(--border-color));
}

.analysis-fullpage-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.analysis-fp-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 4.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid transparent;
}

.analysis-fp-stat__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.analysis-fp-stat__value {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.analysis-fp-stat--correct {
    background: color-mix(in srgb, var(--exam-success, #10b981) 12%, var(--content-bg));
    border-color: color-mix(in srgb, var(--exam-success, #10b981) 24%, transparent);
    color: var(--exam-success, #10b981);
}

.analysis-fp-stat--wrong {
    background: color-mix(in srgb, var(--exam-danger, #ef4444) 12%, var(--content-bg));
    border-color: color-mix(in srgb, var(--exam-danger, #ef4444) 24%, transparent);
    color: var(--exam-danger, #ef4444);
}

.analysis-fp-stat--empty {
    background: color-mix(in srgb, var(--text-secondary) 8%, var(--content-bg));
    border-color: color-mix(in srgb, var(--border-color) 65%, transparent);
    color: var(--text-primary);
}

.analysis-fp-stat--score {
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 12%, var(--content-bg));
    border-color: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 24%, transparent);
    color: var(--exam-accent, var(--accent-primary));
}

.analysis-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.analysis-header-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.analysis-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 14%, transparent);
    color: var(--exam-accent, var(--accent-primary));
    flex-shrink: 0;
}

.analysis-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.1rem;
    line-height: 1.25;
}

.analysis-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.analysis-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.analysis-fullpage-btn,
.analysis-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.analysis-toggle-btn {
    width: 2rem;
    padding: 0;
}

.analysis-fullpage-btn:hover,
.analysis-toggle-btn:hover {
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    border-color: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 35%, var(--border-color));
}

.analysis-content {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
}

.answer-analysis-section-full.is-fullpage .analysis-content {
    border-top: none;
    padding-top: 0.75rem;
}

@media (min-width: 900px) {
    .answer-analysis-section-full.is-fullpage {
        padding: 1rem 1.25rem 1.25rem;
    }

    .answer-analysis-section-full.is-fullpage .analysis-fullpage-shell {
        margin-top: 1.75rem;
    }
}

@media (max-width: 768px) {
    .answer-analysis-section-full.is-fullpage {
        padding: 0.55rem 0.55rem 0.75rem;
    }

    .answer-analysis-section-full.is-fullpage .analysis-fullpage-shell,
    .answer-analysis-section-full.is-fullpage .analysis-content {
        border-radius: 12px;
    }
}

.analysis-preview-bar {
    margin-bottom: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
    background: color-mix(in srgb, var(--bg-tertiary) 60%, var(--content-bg));
}

.analysis-preview-bar__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.analysis-preview-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 14%, transparent);
    color: var(--exam-accent, var(--accent-primary));
}

.analysis-preview-bar__title {
    margin: 0 0 0.1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.analysis-preview-bar__count {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.analysis-preview-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.analysis-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.analysis-legend-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.analysis-legend-dot--correct {
    background: var(--exam-success, #10b981);
}

.analysis-legend-dot--wrong {
    background: var(--exam-danger, #ef4444);
}

.analysis-legend-dot--picked {
    background: var(--exam-accent, var(--accent-primary));
}

.analysis-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.analysis-list .analysis-card.is-filter-hidden {
    display: none;
}

.analysis-card {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border-color) 52%, transparent);
    background: color-mix(in srgb, var(--bg-tertiary) 45%, var(--content-bg));
    overflow: hidden;
}

.analysis-card--correct {
    border-color: color-mix(in srgb, var(--exam-success, #10b981) 28%, transparent);
}

.analysis-card--wrong {
    border-color: color-mix(in srgb, var(--exam-danger, #ef4444) 28%, transparent);
}

.analysis-card--empty {
    border-color: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.analysis-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.95rem 0.55rem;
}

.analysis-card__head-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.analysis-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #fff;
}

.analysis-card__badge--correct {
    background: var(--exam-success, #10b981);
}

.analysis-card__badge--wrong {
    background: var(--exam-danger, #ef4444);
}

.analysis-card__badge--empty {
    background: color-mix(in srgb, var(--text-secondary) 55%, var(--content-bg));
    color: var(--text-primary);
}

.analysis-card__index {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.analysis-card__status {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.analysis-card__status--correct {
    background: color-mix(in srgb, var(--exam-success, #10b981) 16%, transparent);
    color: var(--exam-success, #10b981);
}

.analysis-card__status--wrong {
    background: color-mix(in srgb, var(--exam-danger, #ef4444) 16%, transparent);
    color: var(--exam-danger, #ef4444);
}

.analysis-card__status--empty {
    background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
    color: var(--text-secondary);
}

.analysis-card__body {
    padding: 0 0.95rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.analysis-card__body p {
    margin: 0 0 0.65rem;
}

.analysis-card__body p:last-child {
    margin-bottom: 0;
}

.analysis-card__body pre,
.analysis-card__body code {
    display: block;
    margin: 0.65rem 0 0;
    padding: 0.85rem 0.95rem;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-x: auto;
}

[data-theme="dark"] .analysis-card__body pre,
[data-theme="dark"] .analysis-card__body code {
    background: color-mix(in srgb, #fff 92%, transparent);
    color: #0f172a;
}

.analysis-card__options {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0 0.95rem 0.95rem;
}

.analysis-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
    background: color-mix(in srgb, var(--content-bg) 88%, transparent);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.analysis-option__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-secondary);
}

.analysis-option__text {
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.analysis-option.is-correct-answer {
    border-color: color-mix(in srgb, var(--exam-success, #10b981) 35%, transparent);
    background: color-mix(in srgb, var(--exam-success, #10b981) 10%, var(--content-bg));
}

.analysis-option.is-correct-answer .analysis-option__letter {
    background: color-mix(in srgb, var(--exam-success, #10b981) 18%, transparent);
    color: var(--exam-success, #10b981);
}

.analysis-option.is-user-wrong {
    border-color: color-mix(in srgb, var(--exam-danger, #ef4444) 40%, transparent);
    background: color-mix(in srgb, var(--exam-danger, #ef4444) 12%, var(--content-bg));
}

.analysis-option.is-user-wrong .analysis-option__letter {
    background: color-mix(in srgb, var(--exam-danger, #ef4444) 18%, transparent);
    color: var(--exam-danger, #ef4444);
}

.analysis-option.is-user-correct {
    border-color: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 40%, transparent);
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 12%, var(--content-bg));
}

.analysis-option.is-user-correct .analysis-option__letter {
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 18%, transparent);
    color: var(--exam-accent, var(--accent-primary));
}

.analysis-card__explanation {
    margin: 0 0.95rem 0.95rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border-left: 3px solid var(--exam-accent, var(--accent-primary));
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 8%, var(--content-bg));
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.results-related-section {
    border: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
    border-radius: 14px;
    background: var(--content-bg);
    padding: 0.95rem 1.05rem;
}

.results-related-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.results-related-title svg {
    color: var(--exam-accent, var(--accent-primary));
    flex-shrink: 0;
}

.results-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.results-related-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
    background: color-mix(in srgb, var(--bg-tertiary) 70%, var(--content-bg));
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.results-related-card:hover {
    border-color: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 35%, var(--border-color));
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 8%, var(--content-bg));
    transform: translateY(-1px);
}

.results-related-card__body {
    min-width: 0;
}

.results-related-card__title {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.results-related-card__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.results-related-card__badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--exam-danger, #ef4444) 16%, transparent);
    color: var(--exam-danger, #ef4444);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.results-related-card__count {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.results-related-card__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
    color: var(--text-primary);
    flex-shrink: 0;
}

/* Results Actions - Full Page */
.results-actions-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    padding: 0;
    background: transparent;
    border: none;
}

.result-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 4.5rem;
    padding: 0.75rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
    background: color-mix(in srgb, var(--bg-tertiary) 75%, var(--content-bg));
    color: var(--text-primary);
    text-align: center;
    cursor: pointer;
}

.result-action-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.result-action-btn span {
    white-space: nowrap;
}

.result-retake {
    border-color: color-mix(in srgb, #f59e0b 35%, var(--border-color));
    background: color-mix(in srgb, #f59e0b 10%, var(--content-bg));
    color: #f59e0b;
}

.result-retake:hover {
    background: color-mix(in srgb, #f59e0b 16%, var(--content-bg));
    transform: translateY(-1px);
}

.result-home {
    border-color: color-mix(in srgb, var(--exam-success, #10b981) 35%, var(--border-color));
    background: color-mix(in srgb, var(--exam-success, #10b981) 10%, var(--content-bg));
    color: var(--exam-success, #10b981);
}

.result-home:hover {
    background: color-mix(in srgb, var(--exam-success, #10b981) 16%, var(--content-bg));
    transform: translateY(-1px);
}

.result-new {
    border-color: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 35%, var(--border-color));
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 10%, var(--content-bg));
    color: var(--exam-accent, var(--accent-primary));
}

.result-new:hover {
    background: color-mix(in srgb, var(--exam-accent, var(--accent-primary)) 16%, var(--content-bg));
    transform: translateY(-1px);
}

.toggle-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.results-actions {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.quiz-retake-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: var(--content-bg);
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.quiz-retake-btn:hover {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.quiz-retake-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.quiz-retake-btn:hover svg {
    transform: rotate(180deg);
}

/* ============================================
   Empty State
   ============================================ */

.quiz-empty-message {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--content-bg);
    border-radius: 20px;
    border: 2px dashed var(--border-color);
}

.quiz-empty-message svg {
    margin-bottom: 1.5rem;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.quiz-empty-message h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.quiz-empty-message p {
    color: var(--text-secondary);
    font-size: 1rem;
}


/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 1024px) {
    .quiz-content-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .results-summary-panel__main {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .results-score-block {
        width: 100%;
    }

    .results-stats-row {
        gap: 0.4rem;
    }

    .results-stat {
        min-height: 3.75rem;
        padding: 0.5rem 0.3rem;
        border-radius: 10px;
    }

    .results-stat__value {
        font-size: 0.9375rem;
    }

    .results-stat__value--time {
        font-size: 0.6875rem;
    }

    .results-stat__label {
        font-size: 0.625rem;
    }

    .results-related-grid {
        grid-template-columns: 1fr;
    }

    .results-actions-full {
        grid-template-columns: 1fr;
    }

    .analysis-fullpage-btn span {
        display: none;
    }

    .analysis-fullpage-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .analysis-fullpage-back {
        width: 100%;
        justify-content: center;
    }

    .analysis-fullpage-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analysis-preview-legend {
        flex-direction: column;
        gap: 0.45rem;
    }

    /* Results Responsive - Compact (Old) */
    .results-summary-compact {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
        text-align: center;
    }
    
    .score-circle-compact {
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }
    
    .score-fraction-compact {
        font-size: 1.75rem;
    }
    
    .stats-grid-compact {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-item-compact {
        padding: 0.875rem;
    }
    
    .stat-value-compact {
        font-size: 1.25rem;
    }
    
    .overall-score-compact {
        text-align: center;
        min-width: auto;
    }
    
    .overall-score-value-compact {
        font-size: 1.75rem;
    }
    
    .results-actions-full {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1.25rem 1.5rem;
    }
    
    .result-action-btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .results-header-banner {
        padding: 1.25rem 1.5rem;
    }
    
    .results-title-main {
        font-size: 1.25rem;
    }
    
    .results-subtitle {
        font-size: 0.8125rem;
    }
    
    .answer-analysis-section-full {
        padding: 1.5rem;
    }
    
    .quiz-content-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .quiz-navigator-main {
        position: sticky;
        position: -webkit-sticky;
        top: calc(var(--real-header-height, var(--header-height, 88px)) + 0.75rem);
        z-index: 5;
        order: -1;
    }

    .quiz-questions-wrapper {
        order: 1;
    }

    .main-content-wrapper.single-quiz-wrapper {
        padding: 1rem;
    }

    .quiz-header-content {
        padding: 0.875rem 1rem;
    }
    
    .quiz-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .quiz-edit-actions {
        align-self: flex-end;
    }
    
    .quiz-header-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding-top: 0.75rem;
    }
    
    .quiz-stats-compact {
        gap: 0.75rem;
    }
    
    .quiz-stats-divider {
        display: none;
    }
    
    .quiz-tags-compact-header {
        width: 100%;
    }

    .quiz-social-compact {
        width: 100%;
        justify-content: flex-start;
    }

    /* Quiz Edit Button - Mobil */
    .quiz-edit-actions {
        align-self: flex-end;
    }

    .quiz-edit-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
    }

    .quiz-title {
        font-size: 1.25rem;
    }

    .quiz-header-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding-top: 0.75rem;
    }

    .quiz-stats-compact {
        width: 100%;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .quiz-social-compact {
        width: 100%;
        justify-content: flex-start;
    }

    .navigator-items-main {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .navigator-item-main {
        min-width: 40px;
        min-height: 40px;
        font-size: 0.875rem;
    }

    .navigator-legend {
        gap: 1rem;
    }

    .question-header {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.375rem;
    }

    .question-header-left {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        align-items: center;
    }

    .question-actions {
        flex: 0 0 auto;
        margin-left: auto;
        max-width: none;
    }

    .quiz-header-top .view-mode-group {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 1rem;
        padding: 0.5rem 0 !important;
        margin-bottom: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    .quiz-header-top .view-mode-group > * {
        flex-shrink: 0 !important;
    }

    .quiz-header-top .view-mode-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .quiz-header-top .view-mode-btn {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.5rem;
    }

    .quiz-header-top .view-mode-btn span {
        display: none;
    }

    .quiz-header-top .instant-answer-control {
        width: 100%;
        justify-content: space-between;
        padding: 0.75rem 0 0 0;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .instant-answer-label {
        font-size: 0.8125rem;
    }

    .instant-toggle-switch {
        width: 48px;
        height: 26px;
    }

    .instant-toggle-slider:before {
        height: 18px;
        width: 18px;
    }

    .instant-toggle-input:checked + .instant-toggle-slider:before {
        transform: translateY(-50%) translateX(22px);
    }

    .quiz-timer-wrapper {
        width: 100%;
        justify-content: center;
    }

    .quiz-timer {
        min-width: auto;
        width: 100%;
    }
    
    .quiz-header-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .quiz-stats-compact {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .quiz-stats-divider {
        display: none;
    }

    .quiz-navigator {
        width: 100%;
        min-width: auto;
        padding: 0.75rem;
    }

    .navigator-items {
        gap: 0.375rem;
    }

    .navigator-item {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .quiz-single-navigation {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .nav-controls-wrapper {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .nav-btn {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.25rem;
    }

    .nav-info-modern {
        width: 100%;
        min-width: auto;
    }

    .quiz-question-card {
        padding: 0.875rem 1rem;
    }

    .question-header {
        flex-direction: column;
        gap: 0.625rem;
    }

    .question-number {
        align-self: flex-start;
    }

    .results-details {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .score-circle {
        width: 160px;
        height: 160px;
    }

    .score-percentage {
        font-size: 2.5rem;
    }

    .quiz-results {
        padding: 2rem 1.5rem;
    }

    .quiz-social-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .quiz-submit-btn {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    .quiz-options {
        gap: 0.4375rem;
        width: 100%;
        min-width: 0;
    }

    .quiz-option-label {
        align-items: center;
    }

    .quiz-option-marker {
        flex-shrink: 0;
    }

    .quiz-option-text {
        flex: 1;
        min-width: 0;
        align-self: auto;
        text-align: left;
        overflow-wrap: anywhere;
        word-break: break-word;
        margin-right: 0;
    }

    .answer-feedback {
        position: static;
        transform: none;
        margin-left: auto;
    }

    .quiz-exam-shell .quiz-option-label .answer-feedback {
        position: absolute;
        top: 50%;
        right: 0.5rem;
        transform: translateY(-50%);
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .quiz-single-header {
        margin-bottom: 2rem;
    }

    .quiz-title {
        font-size: 1.75rem;
    }


    .quiz-question-card {
        padding: 0.75rem 0.875rem;
        border-radius: 12px;
    }

    .quiz-question-card.card {
        padding: 0.75rem 0.875rem;
    }

    .question-header {
        gap: 0.5rem;
        margin-bottom: 0.375rem;
    }

    .question-number {
        width: auto;
        height: auto;
        font-size: 0.75rem;
    }

    .question-text {
        font-size: 0.9375rem;
        margin-bottom: 0.625rem;
    }

    .quiz-options {
        gap: 0.4rem;
    }

    .quiz-option-label {
        align-items: center;
        padding: 0.625rem 0.75rem;
        gap: 0.625rem;
    }

    .quiz-option-marker {
        width: 28px;
        height: 28px;
    }

    .option-letter {
        font-size: 0.875rem;
    }

    .quiz-option-text {
        flex: 1;
        min-width: 0;
        font-size: 0.9375rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
        margin-right: 0;
    }

    .score-circle {
        width: 140px;
        height: 140px;
    }

    .score-percentage {
        font-size: 2rem;
    }

    .results-title {
        font-size: 1.5rem;
    }

    .quiz-results {
        padding: 1.5rem 1rem;
    }
}

/* ============================================
   Quiz Resume Modal (devam eden sınav)
   ============================================ */

.quiz-resume-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.quiz-resume-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.quiz-resume-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
}

.quiz-resume-modal-content {
    position: relative;
    width: min(100% - 2rem, 420px);
    background: var(--content-bg, #1a1d24);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
}

.quiz-resume-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.quiz-resume-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.15));
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.35);
}

.quiz-resume-modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
}

.quiz-resume-modal-desc {
    margin: 0 0 1.15rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary, #94a3b8);
}

.quiz-resume-modal-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 1.25rem;
}

.quiz-resume-modal-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quiz-resume-modal-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #94a3b8);
}

.quiz-resume-modal-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
}

.quiz-resume-modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.quiz-resume-modal-btn {
    min-height: 44px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

.quiz-resume-modal-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-primary, #f8fafc);
}

.quiz-resume-modal-btn--primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    color: #fff;
}

.quiz-exam-shell--resume-pending .quiz-form,
.quiz-exam-shell--resume-pending .quiz-exam-header,
.quiz-exam-shell--resume-pending #quiz-navigator-main {
    pointer-events: none;
    user-select: none;
}

/* ============================================
   Quiz Retake Modal
   ============================================ */

.quiz-retake-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.quiz-retake-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.quiz-retake-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.quiz-retake-modal-content {
    position: relative;
    background: var(--content-bg);
    border-radius: 16px;
    padding: 0;
    max-width: 420px;
    width: 90%;
    max-height: 90vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.quiz-retake-modal.active .quiz-retake-modal-content {
    transform: scale(1);
}

.quiz-retake-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.quiz-retake-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.quiz-retake-modal-icon svg {
    width: 28px;
    height: 28px;
}

.quiz-retake-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.quiz-retake-modal-body {
    padding: 1.5rem 2rem;
}

.quiz-retake-modal-question {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}

.quiz-retake-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 2rem 2rem;
    border-top: 1px solid var(--border-color);
}

.quiz-retake-modal-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.quiz-retake-shuffle {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.quiz-retake-shuffle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.quiz-retake-shuffle:active {
    transform: translateY(0);
}

.quiz-retake-same-order {
    background: #374151;
    color: white;
    border: 1px solid #4b5563;
}

.quiz-retake-same-order:hover {
    background: #4b5563;
    background: var(--bg-tertiary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quiz-retake-cancel {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.quiz-retake-cancel:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* ============================================
   Quiz Finish Modal
   ============================================ */

.quiz-finish-modal {
    --finish-accent: var(--exam-danger, #ef4444);
    --finish-accent-hover: color-mix(in srgb, var(--finish-accent) 88%, #000);
    --finish-surface: var(--content-bg);
    --finish-surface-2: color-mix(in srgb, var(--bg-tertiary) 82%, var(--content-bg));
    --finish-border: color-mix(in srgb, var(--border-color) 48%, transparent);
    --finish-answered: var(--exam-accent, var(--accent-primary, #3b82f6));
    --finish-blank: var(--finish-accent);
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.quiz-finish-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.quiz-finish-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(3px);
}

.quiz-finish-modal-content {
    position: relative;
    width: min(100%, 420px);
    background: var(--finish-surface);
    border: 1px solid var(--finish-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transform: scale(0.97) translateY(6px);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-finish-modal.active .quiz-finish-modal-content {
    transform: scale(1) translateY(0);
}

.quiz-finish-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.35rem 0.85rem;
}

.quiz-finish-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--finish-accent) 16%, transparent);
    color: var(--finish-accent);
}

.quiz-finish-modal-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.quiz-finish-modal-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.quiz-finish-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.35rem 1.1rem;
}

.quiz-finish-modal-message {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.quiz-finish-modal-stats {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: var(--finish-surface-2);
    border: 1px solid color-mix(in srgb, var(--finish-border) 85%, transparent);
}

.quiz-finish-modal-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quiz-finish-modal-stat-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.quiz-finish-modal-stat-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.quiz-finish-modal-stat-value--answered {
    color: var(--finish-answered);
}

.quiz-finish-modal-stat-value--blank {
    color: var(--finish-blank);
}

.quiz-finish-modal-footer {
    display: flex;
    gap: 0.65rem;
    padding: 0 1.35rem 1.25rem;
}

.quiz-finish-modal-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.quiz-finish-modal-cancel {
    background: transparent;
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--border-color) 72%, transparent);
}

.quiz-finish-modal-cancel:hover {
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
}

.quiz-finish-modal-confirm {
    background: var(--finish-accent);
    color: #fff;
    border-color: var(--finish-accent);
}

.quiz-finish-modal-confirm:hover {
    background: var(--finish-accent-hover);
    border-color: var(--finish-accent-hover);
}

.quiz-finish-modal-confirm:active {
    transform: scale(0.98);
}

[data-theme="dark"] .quiz-finish-modal {
    --finish-surface-2: color-mix(in srgb, var(--bg-secondary) 72%, var(--content-bg));
}

/* ============================================
   Soru Bildir Modal
   ============================================ */

.quiz-report-modal {
    --report-accent: var(--exam-warning, #d97706);
    --report-accent-hover: color-mix(in srgb, var(--report-accent) 88%, #000);
    --report-surface: var(--content-bg);
    --report-border: color-mix(in srgb, var(--border-color) 48%, transparent);
    --report-input-bg: color-mix(in srgb, var(--bg-tertiary) 88%, var(--content-bg));
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.quiz-report-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.quiz-report-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(3px);
}

.quiz-report-modal-content {
    position: relative;
    width: min(100%, 368px);
    background: var(--report-surface);
    border: 1px solid var(--report-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transform: scale(0.97) translateY(6px);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-report-modal.active .quiz-report-modal-content {
    transform: scale(1) translateY(0);
}

.quiz-report-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem 0.7rem;
    border-bottom: 1px solid var(--report-border);
}

.quiz-report-modal-header__main {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.quiz-report-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--report-accent) 14%, transparent);
    color: var(--report-accent);
}

.quiz-report-modal-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

.quiz-report-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.18s, background 0.18s;
}

.quiz-report-modal-close:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
}

.quiz-report-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.8rem 0.85rem 0;
}

.quiz-report-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.quiz-report-label {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.quiz-report-select-wrap {
    position: relative;
}

.quiz-report-select {
    width: 100%;
    appearance: none;
    padding: 0.55rem 2rem 0.55rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--report-border);
    background: var(--report-input-bg);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.quiz-report-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--report-accent) 50%, var(--report-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--report-accent) 16%, transparent);
}

.quiz-report-select-icon {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.quiz-report-textarea {
    width: 100%;
    min-height: 76px;
    max-height: 140px;
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--report-border);
    background: var(--report-input-bg);
    color: var(--text-primary);
    font-size: 0.8125rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.quiz-report-textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

.quiz-report-textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--report-accent) 50%, var(--report-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--report-accent) 16%, transparent);
}

.quiz-report-char-count {
    margin: 0;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-align: right;
}

.quiz-report-char-count.is-valid {
    color: color-mix(in srgb, var(--exam-success, #16a34a) 80%, var(--text-secondary));
}

.quiz-report-modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.15rem;
    padding: 0.75rem 0.85rem 0.85rem;
    border-top: 1px solid var(--report-border);
}

.quiz-report-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s;
}

.quiz-report-modal-btn--cancel {
    border: 1px solid var(--report-border);
    background: transparent;
    color: var(--text-primary);
}

.quiz-report-modal-btn--cancel:hover {
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
}

.quiz-report-modal-btn--submit {
    border: 1px solid color-mix(in srgb, var(--report-accent) 55%, transparent);
    background: var(--report-accent);
    color: #fff;
}

.quiz-report-modal-btn--submit:hover:not(:disabled) {
    background: var(--report-accent-hover);
}

.quiz-report-modal-btn--submit:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

[data-theme="dark"] .quiz-report-modal {
    --report-accent: #eab308;
    --report-accent-hover: #ca8a04;
    --report-input-bg: color-mix(in srgb, var(--bg-secondary) 75%, #000);
    --report-border: color-mix(in srgb, var(--border-color) 38%, transparent);
}

[data-theme="dark"] .quiz-report-modal-btn--submit {
    color: #1a1a1a;
}

[data-theme="light"] .quiz-report-modal-btn--submit {
    color: #fff;
}

@media (max-width: 400px) {
    .quiz-report-modal-content {
        width: 100%;
    }

    .quiz-report-modal-footer {
        grid-template-columns: 1fr;
    }
}

body.quiz-report-modal-open,
body.quiz-share-modal-open,
body.quiz-note-modal-open {
    overflow: hidden;
}

/* ============================================
   Soru Not Modal
   ============================================ */

.quiz-note-modal {
    --note-accent: #0ea5e9;
    --note-accent-hover: #0284c7;
    --note-surface: var(--content-bg);
    --note-border: color-mix(in srgb, var(--border-color) 48%, transparent);
    --note-input-bg: color-mix(in srgb, var(--bg-tertiary) 88%, var(--content-bg));
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.quiz-note-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.quiz-note-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(3px);
}

.quiz-note-modal-content {
    position: relative;
    width: min(100%, 400px);
    background: var(--note-surface);
    border: 1px solid var(--note-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transform: scale(0.97) translateY(6px);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-note-modal.active .quiz-note-modal-content {
    transform: scale(1) translateY(0);
}

.quiz-note-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem 0.7rem;
    border-bottom: 1px solid var(--note-border);
}

.quiz-note-modal-header__main {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.quiz-note-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--note-accent) 14%, transparent);
    color: var(--note-accent);
}

.quiz-note-modal-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

.quiz-note-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.18s, background 0.18s;
}

.quiz-note-modal-close:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
}

.quiz-note-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.8rem 0.85rem 0;
}

.quiz-note-modal-preview {
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--note-accent) 8%, transparent);
    border-left: 3px solid var(--note-accent);
}

.quiz-note-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.quiz-note-label {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--text-secondary);
}

.quiz-note-textarea {
    width: 100%;
    min-height: 7rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--note-border);
    border-radius: 8px;
    background: var(--note-input-bg);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.quiz-note-textarea:focus {
    border-color: color-mix(in srgb, var(--note-accent) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--note-accent) 14%, transparent);
}

.quiz-note-char-count {
    margin: 0;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    text-align: right;
}

.quiz-note-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.15rem;
    padding: 0.75rem 0.85rem 0.85rem;
    border-top: 1px solid var(--note-border);
}

.quiz-note-modal-footer__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.quiz-note-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s;
}

.quiz-note-modal-btn--cancel {
    border: 1px solid var(--note-border);
    background: transparent;
    color: var(--text-primary);
}

.quiz-note-modal-btn--cancel:hover {
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
}

.quiz-note-modal-btn--submit {
    border: 1px solid color-mix(in srgb, var(--note-accent) 55%, transparent);
    background: var(--note-accent);
    color: #fff;
}

.quiz-note-modal-btn--submit:hover:not(:disabled) {
    background: var(--note-accent-hover);
}

.quiz-note-modal-btn--delete {
    border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
    background: transparent;
    color: #ef4444;
    width: 100%;
}

.quiz-note-modal-btn--delete:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.08);
}

.quiz-exam-shell .question-action-btn.question-note-btn.has-note {
    color: #0ea5e9;
    background: color-mix(in srgb, #0ea5e9 14%, transparent);
}

@media (max-width: 400px) {
    .quiz-note-modal-footer__main {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Soru Paylaş Modal — Windows 11 tarzı panel
   ============================================ */

.quiz-share-modal {
    --share-accent: var(--exam-accent, #2563eb);
    --share-surface: var(--content-bg);
    --share-elevated: color-mix(in srgb, var(--bg-tertiary) 72%, var(--content-bg));
    --share-border: color-mix(in srgb, var(--border-color) 55%, transparent);
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.quiz-share-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.quiz-share-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(6px);
}

.quiz-share-modal-content {
    position: relative;
    width: min(100%, 420px);
    background: var(--share-surface);
    border: 1px solid var(--share-border);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    transform: scale(0.97) translateY(8px);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-share-modal.active .quiz-share-modal-content {
    transform: scale(1) translateY(0);
}

.quiz-share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem 0.65rem;
}

.quiz-share-modal-header__main {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.quiz-share-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    flex-shrink: 0;
}

.quiz-share-modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.quiz-share-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.quiz-share-modal-close:hover {
    background: var(--share-elevated);
    color: var(--text-primary);
}

.quiz-share-modal-body {
    padding: 0 1.1rem 1.15rem;
}

.quiz-share-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border-radius: 10px;
    background: var(--share-elevated);
    border: 1px solid var(--share-border);
    margin-bottom: 0.65rem;
}

.quiz-share-preview__thumb {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--share-accent) 8%, var(--share-surface));
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-share-preview__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.2rem;
}

.quiz-share-preview__logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--share-accent);
}

.quiz-share-preview__info {
    flex: 1;
    min-width: 0;
}

.quiz-share-preview__title {
    margin: 0 0 0.15rem;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quiz-share-preview__url {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quiz-share-preview__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.quiz-share-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid var(--share-border);
    border-radius: 8px;
    background: var(--share-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.quiz-share-action-btn:hover,
.quiz-share-action-btn.is-active {
    background: color-mix(in srgb, var(--share-accent) 10%, var(--share-surface));
    border-color: color-mix(in srgb, var(--share-accent) 30%, var(--share-border));
    color: var(--share-accent);
}

.quiz-share-action-btn.is-copied {
    background: color-mix(in srgb, var(--exam-success, #16a34a) 12%, var(--share-surface));
    border-color: color-mix(in srgb, var(--exam-success, #16a34a) 35%, var(--share-border));
    color: var(--exam-success, #16a34a);
}

.quiz-share-qr-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem;
    margin-bottom: 0.65rem;
    border-radius: 10px;
    background: var(--share-elevated);
    border: 1px solid var(--share-border);
}

.quiz-share-qr-panel[hidden] {
    display: none;
}

.quiz-share-qr-panel img {
    display: block;
    border-radius: 6px;
    background: #fff;
    padding: 0.35rem;
}

.quiz-share-qr-caption {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.quiz-share-url-input.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.quiz-share-section-label {
    margin: 0.35rem 0 0.65rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.quiz-share-apps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem 0.35rem;
}

.quiz-share-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.25rem 0.35rem;
    border: none;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.quiz-share-app:hover {
    transform: translateY(-2px);
}

.quiz-share-app__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.quiz-share-app__label {
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    color: var(--text-secondary);
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-share-app--whatsapp .quiz-share-app__icon { background: #25d366; }
.quiz-share-app--telegram .quiz-share-app__icon { background: #229ed9; }
.quiz-share-app--facebook .quiz-share-app__icon { background: #1877f2; }
.quiz-share-app--x .quiz-share-app__icon { background: #0f1419; }
.quiz-share-app--linkedin .quiz-share-app__icon { background: #0a66c2; }
.quiz-share-app--gmail .quiz-share-app__icon { background: #fff; box-shadow: inset 0 0 0 1px var(--share-border); }
.quiz-share-app--email .quiz-share-app__icon {
    background: color-mix(in srgb, var(--share-accent) 12%, var(--share-surface));
    color: var(--share-accent);
    box-shadow: inset 0 0 0 1px var(--share-border);
}
.quiz-share-app--native .quiz-share-app__icon {
    background: color-mix(in srgb, var(--share-accent) 88%, #000);
    color: #fff;
}

.quiz-share-app--native[hidden] {
    display: none;
}

@media (max-width: 420px) {
    .quiz-share-modal-content {
        width: min(100%, 100%);
        border-radius: 12px;
    }

    .quiz-share-preview__title {
        font-size: 0.8rem;
    }
}

/* Responsive — finish modal */
@media (max-width: 768px) {
    .quiz-finish-modal-content {
        width: min(100%, 100%);
    }

    .quiz-finish-modal-header {
        padding: 1.1rem 1.1rem 0.75rem;
    }

    .quiz-finish-modal-body {
        padding: 0 1.1rem 1rem;
    }

    .quiz-finish-modal-footer {
        flex-direction: column;
        padding: 0 1.1rem 1.1rem;
    }

    .quiz-finish-modal-btn {
        width: 100%;
    }

    /* Quiz Retake Modal Responsive */
    .quiz-retake-modal-content {
        max-width: 90%;
        width: 90%;
    }

    .quiz-retake-modal-header {
        padding: 1.5rem 1.5rem 1rem;
    }

    .quiz-retake-modal-icon {
        width: 48px;
        height: 48px;
    }

    .quiz-retake-modal-icon svg {
        width: 24px;
        height: 24px;
    }

    .quiz-retake-modal-title {
        font-size: 1.25rem;
    }

    .quiz-retake-modal-body {
        padding: 1.25rem 1.5rem;
    }

    .quiz-retake-modal-footer {
        padding: 1.25rem 1.5rem 1.5rem;
        flex-direction: column;
    }

    .quiz-retake-modal-btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* ============================================
   Şifre Korumalı Sınav - Erişim Formu
   Modern, Dark & Light uyumlu
   ============================================ */
.quiz-password-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    padding: 3rem 1.5rem;
}
.quiz-password-gate-card {
    position: relative;
    background: var(--content-bg);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.quiz-password-gate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0.9;
}
.quiz-password-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
    border-radius: 20px;
    color: var(--accent-primary);
    border: 1px solid rgba(102, 126, 234, 0.2);
}
.quiz-password-gate-icon svg {
    width: 36px;
    height: 36px;
}
.quiz-password-gate-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.quiz-password-gate-desc {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 2rem;
    opacity: 0.9;
}
.quiz-password-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.quiz-password-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.quiz-password-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}
.quiz-password-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}
.quiz-password-submit {
    padding: 1rem 1.75rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white !important;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
}
.quiz-password-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.45);
}
.quiz-password-error {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-size: 0.875rem;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Light mode - ek vurgular */
[data-theme="light"] .quiz-password-gate-card {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .quiz-password-gate-icon {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.1));
    border-color: rgba(102, 126, 234, 0.25);
}
[data-theme="light"] .quiz-password-input:focus {
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* Dark mode - uyumlu stiller */
[data-theme="dark"] .quiz-password-gate-card {
    background: var(--content-bg);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .quiz-password-gate-icon {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.35);
}
[data-theme="dark"] .quiz-password-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .quiz-password-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25);
}
[data-theme="dark"] .quiz-password-submit {
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}
[data-theme="dark"] .quiz-password-submit:hover {
    box-shadow: 0 6px 28px rgba(102, 126, 234, 0.5);
}
[data-theme="dark"] .quiz-password-error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

/* Mobil - şifre formu */
@media (max-width: 480px) {
    .quiz-password-gate {
        min-height: 360px;
        padding: 2rem 1rem;
    }
    .quiz-password-gate-card {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }
    .quiz-password-gate-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1.25rem;
    }
    .quiz-password-gate-icon svg {
        width: 28px;
        height: 28px;
    }
    .quiz-password-gate-title {
        font-size: 1.25rem;
    }
    .quiz-password-gate-desc {
        margin-bottom: 1.5rem;
    }
}

/* ============================================
   Sınav arayüzü — düzen & kullanılabilirlik
   ============================================ */

/* Üst boşluk: content.css → .site-main { padding-top: var(--header-offset) } (dinamik) */
.single-quiz.site-main {
    padding-bottom: 2.5rem;
    overflow: visible;
    gap: var(--space-md, 1rem);
}

body.single-quiz .site-main > .site-container:first-child,
body.post-type-quiz .site-main > .site-container:first-child {
    margin-top: 0 !important;
}

/* Şablondan sızabilecek BOM/boşluk metin düğümlerinin satır yüksekliği boşluğunu kapat */
body.single-quiz .site-container,
body.post-type-quiz .site-container {
    font-size: 0;
    line-height: 0;
}

body.single-quiz .site-container > *,
body.post-type-quiz .site-container > * {
    font-size: 1rem;
    line-height: var(--line-height, 1.6);
}

body.single-quiz .site-container,
.quiz-exam-shell,
.quiz-content-layout {
    overflow: visible;
}

.quiz-content-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.25rem;
    align-items: start;
}

.quiz-main-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.quiz-main-column .quiz-progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    background: rgba(102, 126, 234, 0.03);
}

.quiz-main-column .quiz-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(102, 126, 234, 0.12);
}

.quiz-main-column .quiz-questions-wrapper {
    gap: 0;
    padding: 0;
}

.quiz-main-column .quiz-question-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.875rem 1rem 1rem;
    background: transparent;
}

.quiz-main-column .quiz-question-card + .quiz-question-card {
    border-top: 1px solid var(--border-color);
}

body.single-mode .quiz-main-column .quiz-question-card + .quiz-question-card,
.quiz-questions-wrapper.single-mode .quiz-main-column .quiz-question-card + .quiz-question-card {
    border-top: none;
}

.quiz-main-column .quiz-single-navigation,
.quiz-main-column .quiz-list-finish {
    padding: 0;
    margin: 0;
}

.quiz-question-card:not(:first-child) .view-mode-group {
    display: none !important;
}

.quiz-header-content {
    border-radius: 16px;
    padding: 1.15rem 1.35rem;
    background: linear-gradient(145deg, rgba(102, 126, 234, 0.06) 0%, var(--content-bg) 55%);
}

.quiz-title {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    -webkit-text-fill-color: unset;
    background: none;
    color: var(--text-primary);
}

.quiz-category-badge {
    border-radius: 999px;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.75rem;
}

.quiz-difficulty-badge {
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    font-size: 0.625rem;
}

.quiz-header-bottom {
    padding-top: 0.85rem;
}

.quiz-stats-compact {
    gap: 0.65rem 0.85rem;
}

.quiz-stat-compact {
    font-size: 0.6875rem;
}

.quiz-view-compact {
    padding: 0.35rem 0.65rem;
    font-size: 0.6875rem;
    border-radius: 999px;
}

.quiz-navigator-main {
    border-radius: 14px;
    padding: 1rem;
}

.navigator-items-main {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.navigator-item-main {
    min-height: 38px;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1;
}

.navigator-legend {
    gap: 0.35rem 0.55rem;
    padding-top: 0.65rem;
}

.legend-item {
    gap: 0.3rem;
}

.legend-text {
    font-size: 0.625rem;
}

/* JS gelmeden ilk soru anında görünür (tek soru modu) */
.quiz-exam-shell:not(.quiz-exam-shell--result-view) #quiz-questions-wrapper .quiz-question-card ~ .quiz-question-card {
    display: none;
}

.quiz-exam-shell:not(.quiz-exam-shell--result-view) #quiz-questions-wrapper .quiz-question-card:first-child {
    display: block;
}

.quiz-exam-shell .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0;
    margin: 0;
}

.quiz-exam-shell .quiz-option-label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 2.5rem 0.5625rem 0.6875rem;
    border-radius: 9px;
    border: 1px solid var(--exam-option-border-color);
    background: var(--exam-surface-2);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
    position: relative;
    box-shadow: none;
    transform: none;
    justify-content: initial;
}

.quiz-exam-shell .quiz-option-label:hover {
    border-color: var(--exam-option-border-hover);
    background: var(--exam-accent-hover);
    transform: none;
}

.quiz-exam-shell .quiz-option-label:has(.quiz-option-input:checked),
.quiz-exam-shell .quiz-option-label.selected {
    border-color: color-mix(in srgb, var(--exam-accent) 78%, var(--exam-option-border-color));
    background: var(--exam-accent-soft);
    box-shadow: none;
}

.quiz-exam-shell .quiz-option-label:has(.quiz-option-input:checked) .quiz-option-text,
.quiz-exam-shell .quiz-option-label.selected .quiz-option-text {
    color: var(--exam-text);
    font-weight: 600;
}

.quiz-exam-shell .quiz-option-marker {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--exam-surface);
    flex-shrink: 0;
    border: 1px solid var(--exam-option-border-color);
}

.quiz-exam-shell .option-letter {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--exam-accent);
}

.quiz-exam-shell .quiz-option-text {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--exam-text);
    margin-right: 0;
    align-self: auto;
    text-align: left;
    width: 100%;
}

.quiz-exam-shell .quiz-option-content {
    flex: 1;
    min-width: 0;
}

.quiz-exam-shell .quiz-option-label:not(.has-option-image) .quiz-option-content {
    display: block;
}

.quiz-exam-shell .quiz-option-label.has-option-image .quiz-option-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    align-self: stretch;
}

.quiz-exam-shell .quiz-option-label.has-option-image .quiz-option-text {
    align-self: auto;
}

.quiz-exam-shell .quiz-option-input:checked + .quiz-option-marker {
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: none;
}

.quiz-exam-shell .quiz-option-input:checked + .quiz-option-marker .option-letter {
    color: #fff;
}

.question-number {
    min-width: auto;
    height: auto;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.25);
}

.question-mark-btn {
    min-width: auto;
    height: auto;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.question-action-btn.question-mark-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 7px;
}

.mark-btn-label {
    font-size: 0.75rem;
}

.question-text {
    font-size: 0.9375rem;
    margin-bottom: 0.625rem;
}

@media (max-width: 1024px) {
    .quiz-content-layout {
        grid-template-columns: 1fr;
    }

    .quiz-navigator-main {
        position: sticky;
        position: -webkit-sticky;
        top: calc(var(--real-header-height, var(--header-height, 88px)) + 0.75rem);
        z-index: 5;
        order: -1;
        max-height: calc(100vh - var(--real-header-height, var(--header-height, 88px)) - 1.5rem);
    }

    .navigator-items-main {
        max-height: min(220px, calc(100vh - var(--real-header-height, var(--header-height, 88px)) - 12rem));
        overflow-y: auto;
    }
}

@media (max-width: 640px) {
    .quiz-exam-toolbar .quiz-exam-tool-group {
        min-width: 0;
    }

    .quiz-header-top .instant-answer-control {
        padding-left: 0;
        border-left: none;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
        justify-content: space-between;
        width: 100%;
    }

    .quiz-header-top {
        flex-direction: column;
    }

    .quiz-header-top .quiz-timer-wrapper {
        width: 100%;
        justify-content: stretch;
    }

    .quiz-header-top .quiz-timer-wrapper .quiz-finish-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   Sınav kabuğu — dark / light uyumlu
   ============================================ */

.quiz-exam-shell {
    --exam-bg: transparent;
    --exam-surface: var(--content-bg);
    --exam-surface-2: var(--bg-tertiary);
    --exam-radius: 16px;
    --exam-card-border-color: color-mix(in srgb, var(--border-color) 36%, transparent);
    --exam-card-border: 1px solid var(--exam-card-border-color);
    --exam-border: var(--exam-card-border-color);
    --exam-border-soft: color-mix(in srgb, var(--border-color) 28%, transparent);
    --exam-option-border-color: color-mix(in srgb, var(--border-color) 48%, transparent);
    --exam-option-border-hover: color-mix(in srgb, var(--accent-primary) 22%, var(--border-color) 78%);
    --exam-divider: 1px solid color-mix(in srgb, var(--border-color-light) 65%, transparent);
    --exam-accent: var(--accent-primary);
    --exam-accent-soft: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    --exam-accent-hover: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));
    --exam-text: var(--text-primary);
    --exam-muted: var(--text-secondary);
    --exam-success: #16a34a;
    --exam-danger: #ef4444;
    --exam-warning: #d97706;
    --exam-timer: #f97316;
    --exam-timer-strong: #ea580c;
    --exam-timer-soft: color-mix(in srgb, var(--exam-timer) 16%, var(--exam-surface-2));
    --exam-timer-border: color-mix(in srgb, var(--exam-timer) 42%, transparent);
    --exam-timer-glow: color-mix(in srgb, var(--exam-timer) 30%, transparent);
    --exam-card-shadow: none;
    --exam-toolbar-bg: color-mix(in srgb, var(--bg-tertiary) 70%, var(--content-bg));
    --exam-progress-track: var(--border-color-light);
    --exam-overlay-hover: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    --exam-wrong-text: color-mix(in srgb, var(--exam-danger) 75%, var(--exam-text));
    --qm-exam-font-scale: 1;
    --qm-exam-header-sticky-top: calc(
        var(--admin-bar-height, 0px)
        + var(--real-header-height, var(--header-height, 88px))
        + env(safe-area-inset-top, 0px)
    );
    --qm-exam-header-height: 6.5rem;
    --qm-exam-scroll-offset: calc(var(--qm-exam-header-sticky-top) + 0.75rem);
    margin-top: 0;
    color: var(--exam-text);
}

[data-theme="dark"] .quiz-exam-shell {
    --exam-success: #22c55e;
    --exam-warning: #eab308;
    --exam-timer: #fb923c;
    --exam-timer-strong: #f97316;
    --exam-timer-soft: color-mix(in srgb, var(--exam-timer) 20%, var(--exam-surface-2));
    --exam-timer-border: color-mix(in srgb, var(--exam-timer) 48%, transparent);
    --exam-timer-glow: color-mix(in srgb, var(--exam-timer) 38%, transparent);
    --exam-card-border-color: color-mix(in srgb, var(--border-color) 30%, transparent);
    --exam-border-soft: color-mix(in srgb, var(--border-color) 24%, transparent);
    --exam-option-border-color: color-mix(in srgb, var(--border-color) 38%, transparent);
    --exam-option-border-hover: color-mix(in srgb, var(--accent-primary) 28%, var(--border-color) 72%);
    --exam-divider: 1px solid color-mix(in srgb, var(--border-color) 22%, transparent);
    --exam-card-shadow: none;
    --exam-toolbar-bg: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
}

[data-theme="light"] .quiz-exam-shell {
    --exam-card-border-color: color-mix(in srgb, var(--border-color) 42%, transparent);
    --exam-option-border-color: color-mix(in srgb, var(--border-color) 52%, transparent);
    --exam-card-shadow: none;
    --exam-toolbar-bg: color-mix(in srgb, var(--bg-tertiary) 55%, var(--content-bg));
}

/* Sınav kartları — tek ince kenarlık, gölge yok */
.quiz-exam-shell .quiz-exam-header,
.quiz-exam-shell .quiz-question-card,
.quiz-exam-shell .quiz-navigator-main,
.quiz-exam-shell .exam-nav-bar {
    border: var(--exam-card-border);
    border-radius: var(--exam-radius);
    box-shadow: none;
}

.quiz-exam-shell .quiz-question-card.card {
    border: var(--exam-card-border);
    box-shadow: none;
}

.quiz-exam-shell .quiz-main-column .quiz-question-card {
    background: var(--exam-surface);
    border: var(--exam-card-border);
    box-shadow: none;
    border-radius: var(--exam-radius);
}

/* ============================================
   Sınav odak modu (tam ekran)
   ============================================ */

.quiz-exam-stage {
    width: 100%;
}

body.qm-exam-focus {
    overflow: hidden;
}

.quiz-exam-shell.is-exam-focus {
    --qm-exam-focus-max: 68rem;
    --qm-exam-scroll-offset: calc(var(--qm-exam-header-height) + 0.5rem);
    position: fixed;
    inset: 0;
    z-index: 99990;
    margin: 0;
    box-sizing: border-box;
    padding:
        max(0.75rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(0.75rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    background: var(--bg-primary);
    overflow: hidden;
}

.quiz-exam-shell.is-exam-focus .quiz-exam-stage {
    width: 100%;
    max-width: var(--qm-exam-focus-max);
    height: 100%;
    margin-inline: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.quiz-exam-shell.is-exam-focus .quiz-exam-stage::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.quiz-exam-shell.is-exam-focus .quiz-exam-header {
    position: sticky;
    top: 0;
    z-index: 90;
}

@media (max-width: 768px) {
    .quiz-exam-shell.is-exam-focus {
        padding:
            max(0.5rem, env(safe-area-inset-top))
            max(0.5rem, env(safe-area-inset-right))
            max(0.5rem, env(safe-area-inset-bottom))
            max(0.5rem, env(safe-area-inset-left));
    }

    .quiz-exam-shell.is-exam-focus .quiz-exam-stage {
        max-width: 100%;
    }
}

.quiz-exam-header {
    background: var(--exam-surface);
    overflow: hidden;
    margin-bottom: 0.85rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "head actions"
        "bar bar";
    align-items: stretch;
    --exam-header-head-bg: linear-gradient(
        180deg,
        var(--exam-surface) 0%,
        color-mix(in srgb, var(--exam-surface-2) 40%, var(--exam-surface)) 100%
    );
}

.quiz-exam-header::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1;
    background: var(--exam-header-head-bg);
    border-bottom: var(--exam-divider);
    z-index: 0;
    pointer-events: none;
}

.quiz-exam-header:has(.quiz-exam-progress) {
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "head actions"
        "bar bar"
        "progress progress";
}

.quiz-exam-header__dock {
    display: contents;
}

.quiz-exam-header__row {
    grid-area: head;
    position: relative;
    z-index: 1;
    display: block;
    padding: 0.875rem 0 0.875rem 1.125rem;
    background: transparent;
    border-bottom: none;
}

.quiz-exam-header__actions {
    grid-area: actions;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.875rem 1.125rem 0.875rem 0;
    background: transparent;
    border-bottom: none;
    --exam-header-action-h: 2rem;
    --exam-header-action-r: 7px;
}

.quiz-exam-header__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--exam-header-action-h);
    height: var(--exam-header-action-h);
    min-width: var(--exam-header-action-h);
    min-height: var(--exam-header-action-h);
    border-radius: var(--exam-header-action-r);
    border: none;
    background: transparent;
    color: var(--exam-muted);
    text-decoration: none;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: color 0.2s, background 0.2s;
}

.quiz-exam-header__edit svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.quiz-exam-header__info {
    flex: 1;
    min-width: 0;
    padding-right: 0.25rem;
}

.quiz-exam-header__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    padding: 0.18rem 0.55rem 0.18rem 0.45rem;
    border-radius: 999px;
    color: var(--exam-accent);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    background: var(--exam-accent-soft);
    border: 1px solid color-mix(in srgb, var(--exam-accent) 16%, transparent);
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.quiz-exam-header__cat::before {
    content: "";
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.quiz-exam-header__cat:hover {
    color: var(--exam-accent);
    background: color-mix(in srgb, var(--exam-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--exam-accent) 28%, transparent);
}

.quiz-exam-header__title {
    margin: 0;
    font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.025em;
    color: var(--exam-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-exam-header__edit + .quiz-timer-wrapper {
    padding-left: 0.3rem;
    margin-left: 0.125rem;
    border-left: 1px solid var(--exam-border-soft);
}

.quiz-exam-header__edit:hover {
    color: var(--exam-accent);
    background: var(--exam-accent-soft);
}

.quiz-exam-header .quiz-timer-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.quiz-exam-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: auto;
    padding: 0.35rem 0.5rem;
    border-radius: 7px;
    border: 1px solid var(--exam-timer-border);
    background: linear-gradient(
        135deg,
        var(--exam-timer-soft),
        color-mix(in srgb, var(--exam-timer) 10%, var(--exam-surface-2))
    );
    color: var(--exam-timer-strong);
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 10px var(--exam-timer-glow);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.quiz-exam-timer svg {
    flex-shrink: 0;
    opacity: 1;
    color: var(--exam-timer);
}

.quiz-exam-timer .timer-text {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    color: inherit;
}

.quiz-exam-shell .quiz-exam-timer.warning {
    border-color: color-mix(in srgb, var(--exam-warning) 55%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--exam-warning) 20%, var(--exam-surface-2)),
        color-mix(in srgb, var(--exam-warning) 12%, var(--exam-surface))
    );
    color: var(--exam-warning);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--exam-warning) 32%, transparent);
}

.quiz-exam-shell .quiz-exam-timer.warning svg {
    color: var(--exam-warning);
}

.quiz-exam-shell .quiz-exam-timer.danger {
    border-color: color-mix(in srgb, var(--exam-danger) 58%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--exam-danger) 22%, var(--exam-surface-2)),
        color-mix(in srgb, var(--exam-danger) 14%, var(--exam-surface))
    );
    color: var(--exam-danger);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--exam-danger) 36%, transparent);
    animation: timer-danger-pulse 1s ease-in-out infinite;
}

.quiz-exam-shell .quiz-exam-timer.danger svg {
    color: var(--exam-danger);
}

.quiz-exam-shell .quiz-exam-timer {
    min-width: auto;
}

.quiz-exam-header__finish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: var(--exam-header-action-h, 2rem);
    min-height: var(--exam-header-action-h, 2rem);
    max-height: var(--exam-header-action-h, 2rem);
    padding: 0 0.55rem;
    border-radius: var(--exam-header-action-r, 7px);
    border: none;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.quiz-exam-header__finish svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.quiz-exam-header__bar {
    grid-area: bar;
    padding: 0.5rem 1rem;
    background: var(--exam-toolbar-bg);
}

.quiz-exam-progress {
    grid-area: progress;
    grid-column: 1 / -1;
}

.quiz-exam-header:has(.quiz-exam-progress) .quiz-exam-header__bar {
    padding-bottom: 0.5rem;
}

.quiz-exam-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.quiz-exam-toolbar__tools {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.quiz-exam-toolbar__tools::-webkit-scrollbar {
    display: none;
}

.quiz-exam-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.quiz-exam-tool-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.quiz-exam-toolbar .view-mode-buttons,
.quiz-exam-toolbar .quiz-font-controls,
.quiz-exam-toolbar .instant-answer-control,
.quiz-exam-toolbar .quiz-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 9px;
    background: var(--exam-surface);
    border: 1px solid var(--exam-card-border-color);
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: calc(2rem + 4px);
    height: calc(2rem + 4px);
}

.quiz-exam-toolbar .view-mode-btn,
.quiz-exam-toolbar .quiz-font-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.quiz-exam-toolbar .view-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: auto;
    width: auto;
    height: 2rem;
    min-height: 2rem;
    padding: 0 0.55rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--exam-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.quiz-exam-toolbar .quiz-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--exam-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.quiz-exam-toolbar .view-mode-btn svg {
    flex-shrink: 0;
    opacity: 0.88;
}

.quiz-exam-toolbar .view-mode-btn__text {
    white-space: nowrap;
}

.quiz-exam-toolbar .view-mode-btn:hover,
.quiz-exam-toolbar .quiz-font-btn:hover {
    color: var(--exam-text);
    background: var(--exam-accent-hover);
    transform: none;
}

.quiz-exam-toolbar .view-mode-btn.active,
.quiz-exam-toolbar .quiz-font-btn.is-active {
    color: var(--exam-accent);
    background: var(--exam-accent-soft);
    box-shadow: none;
    transform: none;
}

.quiz-exam-toolbar .instant-answer-control {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 0.35rem !important;
    padding: 2px 0.45rem !important;
    margin: 0 !important;
    border: 1px solid var(--exam-card-border-color) !important;
    border-left: 1px solid var(--exam-card-border-color) !important;
    border-top: none !important;
    border-radius: 9px;
    background: var(--exam-surface);
    white-space: nowrap !important;
    cursor: pointer;
    min-height: calc(2rem + 4px);
    height: calc(2rem + 4px);
    box-sizing: border-box;
}

.quiz-exam-toolbar .instant-answer-control__text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--exam-muted);
    line-height: 1;
}

.quiz-exam-toolbar .instant-answer-control__text-line {
    display: inline;
}

.quiz-exam-toolbar .instant-answer-control__text-line + .instant-answer-control__text-line::before {
    content: " ";
}

.quiz-exam-toolbar .instant-toggle-input:checked + .instant-toggle-slider {
    background: var(--exam-success);
}

.quiz-exam-toolbar .instant-answer-control > * {
    flex-shrink: 0 !important;
}

.quiz-exam-toolbar .instant-toggle-switch {
    width: 32px;
    height: 18px;
}

.quiz-exam-toolbar .instant-toggle-slider {
    border-width: 1px;
}

.quiz-exam-toolbar .instant-toggle-slider:before {
    height: 12px;
    width: 12px;
    left: 2px;
}

.quiz-exam-toolbar .instant-toggle-input:checked + .instant-toggle-slider:before {
    transform: translateY(-50%) translateX(14px);
}

.quiz-exam-toolbar .quiz-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: auto;
    min-width: 2rem;
    height: calc(2rem + 4px);
    min-height: calc(2rem + 4px);
    padding: 2px 0.55rem;
    border-radius: 9px;
    border: 1px solid var(--exam-card-border-color);
    background: var(--exam-surface);
    color: var(--exam-muted);
    cursor: pointer;
    box-sizing: border-box;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.quiz-exam-toolbar .quiz-fullscreen-btn__text {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

.quiz-exam-toolbar .quiz-fullscreen-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.88;
}

.quiz-exam-toolbar .quiz-fullscreen-btn:hover,
.quiz-exam-toolbar .quiz-fullscreen-btn.is-active {
    color: var(--exam-accent);
    border-color: var(--exam-border);
    background: var(--exam-accent-soft);
}

.quiz-exam-progress {
    margin: 0;
    padding: 0;
}

.quiz-exam-progress .quiz-progress-bar {
    width: 100%;
    height: 3px;
    margin: 0;
    border-radius: 0;
    background: var(--exam-progress-track);
    overflow: hidden;
}

.quiz-exam-progress .quiz-progress-bar-fill {
    height: 100%;
    border-radius: 0;
    background: linear-gradient(
        90deg,
        var(--exam-accent),
        color-mix(in srgb, var(--exam-success) 65%, var(--exam-accent))
    );
    transition: width 0.35s ease;
}

.quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer {
    background: linear-gradient(
        135deg,
        var(--exam-timer-soft),
        color-mix(in srgb, var(--exam-timer) 10%, var(--exam-surface-2))
    ) !important;
    border: 1px solid var(--exam-timer-border) !important;
    color: var(--exam-timer-strong) !important;
    min-width: auto !important;
    padding: 0 0.5rem !important;
    box-shadow: 0 1px 8px var(--exam-timer-glow) !important;
    justify-content: center;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .quiz-exam-header__actions .quiz-timer-wrapper {
        height: var(--exam-header-action-h);
    }

    .quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer {
        height: var(--exam-header-action-h) !important;
        min-height: var(--exam-header-action-h) !important;
        max-height: var(--exam-header-action-h) !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .quiz-exam-shell .quiz-exam-header .quiz-finish-btn.quiz-exam-header__finish {
        height: var(--exam-header-action-h) !important;
        min-height: var(--exam-header-action-h) !important;
        max-height: var(--exam-header-action-h) !important;
        padding: 0 0.55rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

.quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer svg {
    color: var(--exam-timer) !important;
    width: 15px;
    height: 15px;
}

.quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer.warning {
    border-color: color-mix(in srgb, var(--exam-warning) 55%, transparent) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--exam-warning) 20%, var(--exam-surface-2)),
        color-mix(in srgb, var(--exam-warning) 12%, var(--exam-surface))
    ) !important;
    color: var(--exam-warning) !important;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--exam-warning) 32%, transparent) !important;
}

.quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer.warning svg {
    color: var(--exam-warning) !important;
}

.quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer.danger {
    border-color: color-mix(in srgb, var(--exam-danger) 58%, transparent) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--exam-danger) 22%, var(--exam-surface-2)),
        color-mix(in srgb, var(--exam-danger) 14%, var(--exam-surface))
    ) !important;
    color: var(--exam-danger) !important;
    box-shadow: 0 2px 14px color-mix(in srgb, var(--exam-danger) 36%, transparent) !important;
}

.quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer.danger svg {
    color: var(--exam-danger) !important;
}

.quiz-exam-shell .quiz-exam-header .quiz-finish-btn {
    height: var(--exam-header-action-h, 2rem) !important;
    min-height: var(--exam-header-action-h, 2rem) !important;
    max-height: var(--exam-header-action-h, 2rem) !important;
    padding: 0 0.55rem !important;
    font-size: 0.8125rem !important;
    border-radius: var(--exam-header-action-r, 7px);
    box-shadow: none;
    transform: none !important;
    box-sizing: border-box;
}

.quiz-exam-shell .quiz-exam-header .quiz-finish-btn:hover {
    transform: none !important;
    box-shadow: none;
}

.quiz-exam-shell .quiz-exam-header .quiz-exam-header__actions:not(:has(.quiz-exam-timer)) .quiz-exam-header__finish,
.quiz-exam-shell .quiz-exam-header .quiz-timer-wrapper[style*="display:none"] + .quiz-exam-header__finish,
.quiz-exam-shell .quiz-exam-header .quiz-timer-wrapper[style*="display: none"] + .quiz-exam-header__finish {
    border-radius: 8px;
}

.quiz-exam-shell .quiz-content-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1rem;
    align-items: start;
}

.quiz-exam-shell .quiz-main-column {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.quiz-exam-shell .quiz-question-card {
    background: var(--exam-surface);
    padding: 0.875rem 1rem 1rem;
    margin-bottom: 0;
    transition: border-color 0.2s ease;
    scroll-margin-top: var(--qm-exam-scroll-offset);
    isolation: isolate;
}

.quiz-exam-shell .quiz-question-card.card {
    gap: 0;
    padding: 0.875rem 1rem 1rem;
}

.quiz-exam-shell .quiz-question-card.is-current {
    position: relative;
    z-index: 2;
    border: 1px solid color-mix(in srgb, var(--exam-accent) 70%, var(--exam-card-border-color));
}

.quiz-exam-shell .quiz-main-column .quiz-question-card,
.quiz-exam-shell .quiz-main-column .quiz-question-card + .quiz-question-card {
    border: var(--exam-card-border);
    border-radius: var(--exam-radius);
}

.quiz-exam-shell .quiz-main-column .quiz-question-card.is-current,
.quiz-exam-shell .quiz-main-column .quiz-question-card + .quiz-question-card.is-current {
    border: 1px solid color-mix(in srgb, var(--exam-accent) 70%, var(--exam-card-border-color));
}

.quiz-exam-shell .quiz-questions-wrapper:not(.single-mode) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2px 1px 0.5rem;
    overflow: visible;
}

.quiz-exam-shell .quiz-questions-wrapper:not(.single-mode) .quiz-question-card + .quiz-question-card {
    margin-top: 0;
}

.quiz-exam-shell .quiz-questions-wrapper.single-mode {
    gap: 0;
    padding: 0;
}

.quiz-exam-shell .quiz-questions-wrapper.single-mode .quiz-question-card,
body.single-mode .quiz-exam-shell .quiz-question-card {
    scroll-margin-top: 0;
}

.quiz-exam-shell .quiz-navigator-main.navigator-single-mode {
    top: calc(var(--qm-exam-header-sticky-top) + 0.75rem);
}

.quiz-exam-shell .quiz-navigator-main.navigator-single-mode .navigator-items-main {
    overflow: visible;
    max-height: none;
}

.quiz-exam-shell .quiz-navigator-main.navigator-single-mode.navigator-multi-session .navigator-items-main {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: var(--qm-nav-items-max-height, min(240px, calc(100vh - var(--qm-exam-header-sticky-top) - 5rem)));
    min-height: var(--qm-nav-items-min-height, var(--qm-nav-items-max-height, auto));
}

.quiz-exam-shell .question-number {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--exam-accent-soft);
    border: 1px solid var(--exam-border-soft);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--exam-accent);
}

.quiz-exam-shell .question-text {
    margin: 0.75rem 0 0.875rem;
    padding: 0.375rem 0;
    color: var(--exam-text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}

.quiz-exam-shell .question-text p {
    margin: 0 0 0.5rem;
}

.quiz-exam-shell .question-text p:first-child {
    margin-top: 0;
}

.quiz-exam-shell .question-text p:last-child {
    margin-bottom: 0;
}

.quiz-exam-shell .quiz-option-label.correct-answer {
    border-color: color-mix(in srgb, var(--exam-success) 75%, var(--exam-option-border-color)) !important;
    background: color-mix(in srgb, var(--exam-success) 14%, var(--exam-surface-2)) !important;
    color: var(--exam-success);
    box-shadow: none;
}

.quiz-exam-shell .quiz-option-label.wrong-answer {
    border-color: color-mix(in srgb, var(--exam-danger) 75%, var(--exam-option-border-color)) !important;
    background: color-mix(in srgb, var(--exam-danger) 12%, var(--exam-surface-2)) !important;
    color: var(--exam-danger);
    box-shadow: none;
}

.quiz-exam-shell .quiz-option-label.correct-answer .quiz-option-text,
.quiz-exam-shell .quiz-option-label.wrong-answer .quiz-option-text {
    color: inherit;
    font-weight: 600;
}

.quiz-exam-shell .quiz-option-label.correct-answer .quiz-option-marker,
.quiz-exam-shell .quiz-option-label.correct-answer .quiz-option-input:checked + .quiz-option-marker {
    background: var(--exam-success) !important;
    border-color: var(--exam-success) !important;
}

.quiz-exam-shell .quiz-option-label.wrong-answer .quiz-option-input:checked + .quiz-option-marker {
    background: var(--exam-danger) !important;
    border-color: var(--exam-danger) !important;
}

.quiz-exam-shell .quiz-option-label.correct-answer .option-letter,
.quiz-exam-shell .quiz-option-label.wrong-answer .option-letter,
.quiz-exam-shell .quiz-option-label.correct-answer .quiz-option-input:checked + .quiz-option-marker .option-letter,
.quiz-exam-shell .quiz-option-label.wrong-answer .quiz-option-input:checked + .quiz-option-marker .option-letter {
    color: #fff !important;
}

.quiz-exam-shell .quiz-question-card.is-answered-lock .quiz-option-label:not(.selected):not(:has(.quiz-option-input:checked)) {
    opacity: 0.5;
}

.quiz-exam-shell .quiz-question-card.is-instant-answered .quiz-option-label:not(.correct-answer):not(.wrong-answer) {
    opacity: 0.45;
    pointer-events: none;
}

.quiz-exam-shell .answer-feedback {
    right: 0.625rem;
    width: 1.5rem;
    height: 1.5rem;
}

.quiz-exam-shell .quiz-option-label.correct-answer .answer-feedback {
    background: var(--exam-success);
}

.quiz-exam-shell .quiz-option-label.wrong-answer .answer-feedback {
    background: var(--exam-danger);
}

.quiz-exam-shell .quiz-navigator-main {
    position: sticky;
    position: -webkit-sticky;
    top: calc(var(--qm-exam-header-sticky-top) + 0.75rem);
    align-self: start;
    z-index: 80;
    background: var(--exam-surface);
    padding: 0.75rem 0.875rem;
    border: var(--exam-card-border);
    box-shadow: none;
    border-radius: var(--exam-radius);
    max-height: calc(100vh - var(--qm-exam-header-sticky-top) - 1.5rem);
}

.quiz-exam-shell .quiz-navigator-main::before {
    display: none;
}

.quiz-exam-shell .navigator-header-main {
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: var(--exam-divider);
}

.quiz-exam-shell .navigator-title-main {
    color: var(--exam-text);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: none;
}

.quiz-exam-shell .navigator-count-main {
    color: var(--exam-muted);
    font-size: 0.6875rem;
    background: var(--exam-accent-soft);
    border-color: var(--exam-border-soft);
}

.quiz-exam-shell .navigator-count-main span {
    color: var(--exam-accent);
}

.quiz-exam-shell .navigator-progress {
    display: none !important;
}

.quiz-exam-shell .navigator-items-main {
    gap: 0.4375rem;
    padding: 3px 2px 6px 4px;
    margin-inline: -2px;
    max-height: var(--qm-nav-items-max-height, min(240px, calc(100vh - var(--qm-exam-header-sticky-top) - 5rem)));
    min-height: var(--qm-nav-items-min-height, auto);
    overflow-y: auto;
    overflow-x: hidden;
    grid-template-columns: repeat(var(--qm-nav-cols, 5), minmax(0, 1fr));
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: color-mix(in srgb, var(--exam-border-soft) 70%, var(--exam-accent)) transparent;
    overscroll-behavior: contain;
}

.quiz-exam-shell .navigator-item-main {
    min-height: var(--qm-nav-item-size, 34px);
    height: auto;
    aspect-ratio: unset;
    border-radius: 7px;
    background: var(--exam-surface-2);
    border: 1px solid var(--exam-border-soft);
    color: var(--exam-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    overflow: visible;
}

.quiz-exam-shell .navigator-item-main:hover {
    border-color: color-mix(in srgb, var(--exam-accent) 40%, var(--exam-border-soft));
    background: var(--exam-accent-soft);
    color: var(--exam-text);
}

.quiz-exam-shell .navigator-item-main.active,
.quiz-exam-shell .navigator-item-main.current {
    background: color-mix(in srgb, var(--exam-accent) 14%, var(--exam-surface));
    border-color: var(--exam-accent);
    color: var(--exam-accent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--exam-accent) 45%, transparent);
    font-weight: 700;
}

.quiz-exam-shell .navigator-item-main.answered {
    background: color-mix(in srgb, var(--exam-accent) 85%, var(--exam-surface));
    border-color: var(--exam-accent);
    color: #fff;
}

.quiz-exam-shell .navigator-item-main.answered.active,
.quiz-exam-shell .navigator-item-main.answered.current {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--exam-accent) 55%, transparent);
}

.quiz-exam-shell .navigator-item-main.correct {
    background: color-mix(in srgb, var(--exam-success) 16%, var(--exam-surface));
    border-color: color-mix(in srgb, var(--exam-success) 65%, var(--exam-border-soft));
    color: var(--exam-success);
}

.quiz-exam-shell .navigator-item-main.wrong {
    background: color-mix(in srgb, var(--exam-danger) 12%, var(--exam-surface));
    border-color: color-mix(in srgb, var(--exam-danger) 55%, var(--exam-border-soft));
    color: var(--exam-wrong-text);
}

.quiz-exam-shell .navigator-item-main.marked {
    background: color-mix(in srgb, var(--exam-warning) 22%, var(--exam-surface));
    border-color: var(--exam-warning);
    color: color-mix(in srgb, var(--exam-warning) 75%, var(--exam-text));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exam-warning) 35%, transparent);
}

.quiz-exam-shell .navigator-item-main.marked.active,
.quiz-exam-shell .navigator-item-main.marked.current {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--exam-warning) 55%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--exam-warning) 35%, transparent);
}

.quiz-exam-shell .navigator-item-main.marked.correct,
.quiz-exam-shell .navigator-item-main.marked.wrong {
    border-left: 3px solid var(--exam-warning);
    padding-left: 1px;
}

.quiz-exam-shell .navigator-item-main.marked.answered {
    border-color: var(--exam-warning);
    border-left-width: 3px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exam-warning) 40%, transparent);
}

.quiz-exam-shell .navigator-legend {
    border-top: var(--exam-divider);
    gap: 0.35rem 0.55rem;
}

.quiz-exam-shell .legend-dot {
    border-radius: 2px;
}

.quiz-exam-shell .legend-dot.legend-empty {
    background: var(--exam-surface-2);
    border-color: var(--exam-border-soft);
}

.quiz-exam-shell .legend-dot.legend-current,
.quiz-exam-shell .legend-dot.legend-answered {
    background: var(--exam-accent);
}

.quiz-exam-shell .legend-dot.legend-correct {
    background: var(--exam-success);
}

.quiz-exam-shell .legend-dot.legend-wrong {
    background: var(--exam-danger);
}

.quiz-exam-shell .legend-dot.legend-marked {
    background: var(--exam-warning);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--exam-warning) 45%, transparent);
}

.quiz-exam-shell[data-font-scale="sm"] {
    --qm-exam-font-scale: 0.875;
}

.quiz-exam-shell[data-font-scale="md"] {
    --qm-exam-font-scale: 1;
}

.quiz-exam-shell[data-font-scale="lg"] {
    --qm-exam-font-scale: 1.2;
}

.quiz-exam-shell .quiz-main-column {
    font-size: calc(1rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .quiz-main-column .question-number {
    font-size: calc(0.6875rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .quiz-main-column .question-text {
    font-size: calc(0.9375rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .quiz-main-column .quiz-option-text {
    font-size: calc(0.875rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .quiz-main-column .option-letter {
    font-size: calc(0.75rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .quiz-main-column .question-explanation .explanation-text {
    font-size: calc(0.8125rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .quiz-main-column .exam-nav-status__label {
    font-size: calc(0.6875rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .quiz-main-column .exam-nav-status__value {
    font-size: calc(0.9375rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .quiz-main-column .exam-nav-btn {
    font-size: calc(0.8125rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .quiz-main-column .quiz-option-marker {
    width: calc(1.875rem * var(--qm-exam-font-scale));
    height: calc(1.875rem * var(--qm-exam-font-scale));
    min-width: calc(1.875rem * var(--qm-exam-font-scale));
    min-height: calc(1.875rem * var(--qm-exam-font-scale));
}

.quiz-exam-shell .legend-text {
    color: var(--exam-muted);
    font-size: 0.625rem;
    font-weight: 500;
}

.quiz-exam-shell .question-header {
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
    border-bottom: var(--exam-divider);
}

.quiz-exam-shell .question-image {
    margin: 0.375rem 0 0.5rem;
    border-radius: 9px;
}

.quiz-exam-shell .question-image img {
    max-height: 240px;
}

.quiz-exam-shell .question-actions {
    gap: 0.35rem;
}

.quiz-exam-shell .question-action-btn {
    color: var(--exam-muted);
}

.quiz-exam-shell .question-action-btn svg {
    transition: color 0.18s ease, stroke 0.18s ease;
}

.quiz-exam-shell .question-action-btn[data-action="share"]:hover {
    color: var(--exam-accent);
    background: color-mix(in srgb, var(--exam-accent) 12%, transparent);
}

.quiz-exam-shell .question-action-btn[data-action="favorite"]:hover {
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, transparent);
}

.quiz-exam-shell .question-action-btn.question-favorite-btn.is-favorited {
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 14%, transparent);
}

.quiz-exam-shell .question-action-btn.question-favorite-btn.is-favorited svg {
    fill: #ef4444;
    stroke: #ef4444;
    transition: fill 0.12s ease, stroke 0.12s ease, transform 0.12s ease;
}

.quiz-exam-shell .question-action-btn.question-favorite-btn.is-favorite-pop {
    animation: qmFavoritePop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.quiz-exam-shell .question-action-btn[data-action="mark"]:hover,
.quiz-exam-shell .question-action-btn.question-mark-btn.marked:hover {
    color: var(--exam-warning);
    background: color-mix(in srgb, var(--exam-warning) 16%, transparent);
}

.quiz-exam-shell .question-action-btn[data-action="report"]:hover {
    color: var(--exam-danger);
    background: color-mix(in srgb, var(--exam-danger) 12%, transparent);
}

.quiz-exam-shell .question-action-btn[data-action="note"]:hover {
    color: #0ea5e9;
    background: color-mix(in srgb, #0ea5e9 12%, transparent);
}

.quiz-exam-shell .question-action-btn.question-mark-btn.marked {
    color: var(--exam-warning);
    background: color-mix(in srgb, var(--exam-warning) 14%, transparent);
}

/* Tek soru navigasyonu */
.quiz-exam-shell .quiz-single-navigation {
    margin: 1rem 0 0;
    padding: 0;
}

.quiz-exam-shell .exam-nav-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--exam-surface);
    border: var(--exam-card-border);
    box-shadow: none;
    border-radius: var(--exam-radius);
}

.quiz-exam-shell .exam-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.625rem;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--exam-border-soft);
    background: var(--exam-surface-2);
    color: var(--exam-text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: none;
    white-space: nowrap;
}

.quiz-exam-shell .exam-nav-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.quiz-exam-shell .exam-nav-btn--prev {
    justify-self: start;
}

.quiz-exam-shell .exam-nav-btn--next,
.quiz-exam-shell .exam-nav-btn--finish {
    justify-self: end;
    grid-column: 3;
}

.quiz-exam-shell .exam-nav-btn:hover:not(:disabled) {
    border-color: var(--exam-border);
    background: var(--exam-accent-hover);
    color: var(--exam-accent);
    transform: none;
}

.quiz-exam-shell .exam-nav-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
}

.quiz-exam-shell .exam-nav-btn--next {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}

.quiz-exam-shell .exam-nav-btn--next:hover:not(:disabled) {
    background: var(--gradient-secondary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--exam-accent) 35%, transparent);
}

.quiz-exam-shell .exam-nav-btn--finish {
    background: linear-gradient(135deg, var(--exam-danger), color-mix(in srgb, var(--exam-danger) 82%, #000));
    border-color: transparent;
    color: #fff;
}

.quiz-exam-shell .exam-nav-btn--finish:hover:not(:disabled) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--exam-danger) 92%, #000), color-mix(in srgb, var(--exam-danger) 75%, #000));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--exam-danger) 35%, transparent);
}

.quiz-exam-shell .exam-nav-btn--study-next,
.quiz-exam-shell .exam-nav-btn.is-study-next {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}

.quiz-exam-shell .exam-nav-btn--study-next:hover:not(:disabled),
.quiz-exam-shell .exam-nav-btn.is-study-next:hover:not(:disabled) {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.42);
}

.quiz-exam-shell .quiz-finish-btn-list.is-study-next-exam {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}

.quiz-exam-shell .quiz-finish-btn-list.is-study-next-exam:hover:not(:disabled) {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.42);
}

.quiz-exam-shell .quiz-exam-header__session-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #2563eb;
    background: color-mix(in srgb, #2563eb 12%, transparent);
    border: 1px solid color-mix(in srgb, #2563eb 18%, transparent);
}

.quiz-exam-shell .exam-nav-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 5.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 10px;
    background: var(--exam-accent-soft);
    border: 1px solid var(--exam-border-soft);
    grid-column: 2;
    grid-row: 1;
}

.quiz-exam-shell .exam-nav-status__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--exam-muted);
}

.quiz-exam-shell .exam-nav-status__value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--exam-accent);
    font-variant-numeric: tabular-nums;
}

.quiz-exam-shell .quiz-list-finish {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding: 1.25rem 0 0.5rem;
    border-top: var(--exam-divider);
}

.quiz-exam-shell .quiz-finish-btn,
.quiz-exam-shell .quiz-finish-btn-list {
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.quiz-exam-shell .quiz-finish-btn:hover,
.quiz-exam-shell .quiz-finish-btn-list:hover {
    transform: none;
}

.quiz-exam-shell .quiz-finish-btn-list {
    width: 100%;
    justify-content: center;
    max-width: 320px;
    margin-inline: auto;
    min-height: 2.75rem;
}

.quiz-exam-shell .explanation-text {
    background: var(--exam-surface-2);
    color: var(--exam-muted);
    border-left-color: var(--exam-accent);
}

@media (max-width: 1024px) {
    .quiz-exam-shell .quiz-content-layout {
        grid-template-columns: 1fr;
    }

    .quiz-exam-shell .quiz-navigator-main {
        position: relative;
        top: auto;
        order: 2;
    }
}

@media (max-width: 640px) {
    .quiz-exam-toolbar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .quiz-exam-toolbar::-webkit-scrollbar {
        display: none;
    }

    .quiz-exam-toolbar__tools {
        flex: 0 0 auto;
        width: auto;
        padding-bottom: 0;
    }

    .quiz-exam-toolbar .view-mode-btn {
        flex: 0 0 auto;
        min-width: 0;
    }

    .quiz-exam-toolbar .view-mode-btn__text {
        display: none;
    }

    .quiz-exam-toolbar__actions {
        flex: 0 0 auto;
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0.45rem;
        margin-left: auto;
    }

    .quiz-exam-toolbar .instant-answer-control,
    .quiz-exam-toolbar .quiz-fullscreen-btn {
        flex: 0 0 auto;
    }

    .quiz-exam-shell .exam-nav-bar {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 0.65rem;
    }

    .quiz-exam-shell .exam-nav-status {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-direction: row;
        justify-content: center;
        gap: 0.45rem;
        width: 100%;
        min-width: 0;
    }

    .quiz-exam-shell .exam-nav-status__label {
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.8125rem;
    }

    .quiz-exam-shell .exam-nav-btn {
        width: 100%;
    }

    .quiz-exam-shell .exam-nav-btn--prev {
        grid-column: 1;
        grid-row: 2;
    }

    .quiz-exam-shell .exam-nav-btn--next,
    .quiz-exam-shell .exam-nav-btn--finish {
        grid-column: 2;
        grid-row: 2;
    }
}

/* ============================================
   Sınav kabuğu — son rötuşlar
   ============================================ */


.quiz-exam-shell .question-explanation .explanation-text {
    margin-top: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    border-left-width: 3px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.quiz-exam-shell .exam-nav-btn:focus-visible,
.quiz-exam-shell .question-action-btn:focus-visible,
.quiz-exam-shell .view-mode-btn:focus-visible,
.quiz-exam-shell .quiz-font-btn:focus-visible,
.quiz-exam-shell .quiz-fullscreen-btn:focus-visible,
.quiz-exam-shell .quiz-exam-header__edit:focus-visible,
.quiz-exam-shell .navigator-item-main:focus-visible {
    outline: 2px solid var(--exam-accent);
    outline-offset: 2px;
}

.quiz-exam-shell .quiz-option-label:focus-within {
    border-color: var(--exam-accent);
    outline: none;
}

/* ============================================
   Sınav kabuğu — genel rötuşlar
   ============================================ */

[data-theme="dark"] .quiz-exam-header__row,
[data-theme="dark"] .quiz-exam-header__actions {
    background: transparent;
    border: none;
}

[data-theme="dark"] .quiz-exam-toolbar .view-mode-buttons,
[data-theme="dark"] .quiz-exam-toolbar .quiz-font-controls,
[data-theme="dark"] .quiz-exam-toolbar .instant-answer-control,
[data-theme="dark"] .quiz-exam-toolbar .quiz-fullscreen-btn {
    background: var(--exam-surface-2);
}

.quiz-exam-shell .navigator-items-main::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.quiz-exam-shell .navigator-items-main::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

.quiz-exam-shell .navigator-items-main::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--exam-border-soft) 75%, var(--exam-accent));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.quiz-exam-shell .navigator-items-main::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--exam-border-soft) 55%, var(--exam-accent));
    background-clip: padding-box;
}

[data-theme="dark"] .quiz-exam-shell .navigator-items-main {
    scrollbar-color: color-mix(in srgb, var(--exam-border-soft) 55%, var(--exam-accent)) transparent;
}

[data-theme="dark"] .quiz-exam-shell .navigator-items-main::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--exam-border-soft) 50%, var(--exam-accent));
}

[data-theme="dark"] .quiz-exam-shell .navigator-items-main::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--exam-border-soft) 38%, var(--exam-accent));
}

.quiz-exam-shell .question-action-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    transition: color 0.18s, background 0.18s, transform 0.15s;
}

.quiz-exam-shell .question-action-btn:active {
    transform: scale(0.96);
}

.quiz-exam-shell .quiz-main-column .quiz-single-navigation,
.quiz-exam-shell .quiz-main-column .quiz-list-finish {
    padding-left: 0;
    padding-right: 0;
}

/* Kayıtlı sonuç görünümü — sınav formu gizli, sonuç anında görünür */
.quiz-exam-shell--result-view .quiz-exam-header,
.quiz-exam-shell--result-view .quiz-content-layout,
.quiz-exam-shell--result-view .quiz-navigator-main,
.quiz-exam-shell--result-view .quiz-view-mode-selector,
.single-quiz.is-quiz-result-view .quiz-single-header {
    display: none !important;
}

.quiz-exam-shell--result-view #qm-quiz-results {
    display: block !important;
}

/* ============================================
   Sınav sayfası — mobil kullanılabilirlik
   ============================================ */

@media (max-width: 768px) {
    body.single-quiz .site-container,
    body.post-type-quiz .site-container,
    body.page-template-page-robot-oturum .site-container {
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
    }

    .single-quiz.site-main {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 1.25rem);
        gap: 0.5rem;
    }

    .quiz-exam-shell {
        --exam-radius: 12px;
        --qm-exam-bottom-offset: calc(70px + env(safe-area-inset-bottom, 0px));
        max-width: 100%;
        min-width: 0;
    }

    .quiz-exam-shell .quiz-content-layout {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .quiz-exam-shell .quiz-content-layout > .quiz-navigator-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        box-sizing: border-box;
    }

    .quiz-exam-shell .quiz-main-column {
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .quiz-exam-shell .quiz-questions-wrapper {
        order: 1;
        flex: 0 0 auto;
    }

    .quiz-exam-shell .quiz-single-navigation {
        order: 2;
        flex: 0 0 auto;
    }

    .quiz-exam-shell .quiz-list-finish {
        order: 3;
        flex: 0 0 auto;
    }

    /* Mobil header — tek araç şeridi (dock) */
    .quiz-exam-shell .quiz-exam-header {
        --qm-exam-header-pad: 0.625rem;
        --qm-exam-chip-h: 2.25rem;
        --qm-exam-chip-r: 7px;
        --qm-exam-chip-gap: 0.25rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 0.5rem;
        padding: 0.5rem var(--qm-exam-header-pad);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .quiz-exam-shell .quiz-exam-header::before {
        display: none;
    }

    .quiz-exam-shell .quiz-exam-header__row {
        width: 100%;
        min-width: 0;
        padding: 0 0 0.375rem;
        margin: 0;
        border-bottom: none;
        background: transparent;
        overflow: hidden;
    }

    .quiz-exam-shell .quiz-exam-header__info {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        padding-right: 0;
    }

    .quiz-exam-shell .quiz-exam-header__cat {
        display: inline-flex;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 0.15rem;
        font-size: 0.5625rem;
        padding: 0.12rem 0.45rem 0.12rem 0.4rem;
    }

    .quiz-exam-shell .quiz-exam-header__title {
        display: block;
        max-width: 100%;
        font-size: 0.9375rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quiz-exam-shell .quiz-exam-header__dock {
        display: flex;
        align-items: center;
        gap: var(--qm-exam-chip-gap);
        width: 100%;
        min-width: 0;
        height: calc(var(--qm-exam-chip-h) + 0.5rem);
        padding: 0.25rem 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .quiz-exam-shell .quiz-exam-header__bar {
        flex: 1 1 auto;
        min-width: 0;
        height: var(--qm-exam-chip-h);
        padding: 0;
        margin: 0;
        background: transparent;
        overflow: hidden;
    }

    .quiz-exam-shell .quiz-exam-header__actions {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: var(--qm-exam-chip-gap);
        height: var(--qm-exam-chip-h);
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        overflow: visible;
    }

    .quiz-exam-shell .quiz-exam-header__edit {
        display: none !important;
    }

    .quiz-exam-shell .quiz-exam-header__edit + .quiz-timer-wrapper {
        padding-left: 0 !important;
        margin-left: 0 !important;
        border-left: none !important;
    }

    .quiz-exam-shell .quiz-exam-header__actions .quiz-timer-wrapper {
        display: flex;
        align-items: stretch;
        flex: 0 1 auto;
        min-width: 0;
        height: var(--qm-exam-chip-h);
        padding: 0 !important;
        margin: 0 !important;
        border: none;
    }

    /* Dock içi tüm çipler — aynı yükseklik, aynı köşe */
    .quiz-exam-shell .quiz-exam-header__dock .view-mode-buttons,
    .quiz-exam-shell .quiz-exam-header__dock .quiz-font-controls,
    .quiz-exam-shell .quiz-exam-header__dock .instant-answer-control,
    .quiz-exam-shell .quiz-exam-header__dock .quiz-timer.quiz-exam-timer,
    .quiz-exam-shell .quiz-exam-header__dock .quiz-finish-btn.quiz-exam-header__finish {
        height: var(--qm-exam-chip-h) !important;
        min-height: var(--qm-exam-chip-h) !important;
        max-height: var(--qm-exam-chip-h) !important;
        border-radius: var(--qm-exam-chip-r) !important;
        box-sizing: border-box;
    }

    .quiz-exam-shell .quiz-exam-header__dock .view-mode-buttons,
    .quiz-exam-shell .quiz-exam-header__dock .quiz-font-controls {
        padding: 0 !important;
        gap: 1px !important;
        margin: 0 !important;
        border: 1px solid var(--exam-card-border-color) !important;
        background: var(--exam-surface) !important;
        display: inline-flex !important;
        align-items: stretch !important;
        overflow: hidden;
    }

    .quiz-exam-shell .quiz-exam-header__dock .instant-answer-control {
        padding: 0 0.25rem !important;
        gap: 0.2rem !important;
        margin: 0 !important;
        border: 1px solid var(--exam-card-border-color) !important;
        background: var(--exam-surface) !important;
        align-items: center !important;
    }

    .quiz-exam-shell .quiz-exam-header__dock .view-mode-btn,
    .quiz-exam-shell .quiz-exam-header__dock .quiz-font-btn {
        width: var(--qm-exam-chip-h) !important;
        min-width: var(--qm-exam-chip-h) !important;
        max-width: var(--qm-exam-chip-h) !important;
        height: var(--qm-exam-chip-h) !important;
        min-height: var(--qm-exam-chip-h) !important;
        max-height: var(--qm-exam-chip-h) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .quiz-exam-shell .quiz-exam-header__dock .view-mode-btn:first-child,
    .quiz-exam-shell .quiz-exam-header__dock .quiz-font-btn:first-child {
        border-radius: calc(var(--qm-exam-chip-r) - 1px) 0 0 calc(var(--qm-exam-chip-r) - 1px) !important;
    }

    .quiz-exam-shell .quiz-exam-header__dock .view-mode-btn:last-child,
    .quiz-exam-shell .quiz-exam-header__dock .quiz-font-btn:last-child {
        border-radius: 0 calc(var(--qm-exam-chip-r) - 1px) calc(var(--qm-exam-chip-r) - 1px) 0 !important;
    }

    .quiz-exam-shell .quiz-exam-header__dock .view-mode-btn:only-child,
    .quiz-exam-shell .quiz-exam-header__dock .quiz-font-btn:only-child {
        border-radius: calc(var(--qm-exam-chip-r) - 1px) !important;
    }

    .quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        padding: 0 0.35rem !important;
        font-size: 0.625rem !important;
        box-shadow: 0 1px 4px var(--exam-timer-glow) !important;
        gap: 0.12rem;
    }

    .quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer .timer-text {
        font-size: 0.625rem;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer svg {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0;
    }

    .quiz-exam-shell .quiz-exam-header .quiz-finish-btn.quiz-exam-header__finish {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--qm-exam-chip-h) !important;
        min-width: var(--qm-exam-chip-h) !important;
        max-width: var(--qm-exam-chip-h) !important;
        padding: 0 !important;
        gap: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .quiz-exam-shell .quiz-exam-header .quiz-finish-btn.quiz-exam-header__finish span {
        display: none;
    }

    .quiz-exam-shell .quiz-exam-header .quiz-finish-btn.quiz-exam-header__finish svg {
        width: 12px;
        height: 12px;
    }

    .quiz-exam-shell .quiz-exam-toolbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--qm-exam-chip-gap);
        width: 100%;
        min-width: 0;
        height: var(--qm-exam-chip-h);
        overflow: hidden;
    }

    .quiz-exam-shell .quiz-exam-toolbar__tools {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        gap: var(--qm-exam-chip-gap);
        min-width: 0;
        height: var(--qm-exam-chip-h);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .quiz-exam-shell .quiz-exam-toolbar__tools::-webkit-scrollbar {
        display: none;
    }

    .quiz-exam-shell .quiz-exam-tool-group {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        height: var(--qm-exam-chip-h);
    }

    .quiz-exam-shell .quiz-exam-toolbar__actions {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: var(--qm-exam-chip-gap);
        flex-shrink: 0;
        height: var(--qm-exam-chip-h);
    }

    .quiz-exam-shell .quiz-fullscreen-btn {
        display: none;
    }

    .quiz-exam-shell .quiz-exam-toolbar .view-mode-btn__text {
        display: none;
    }

    .quiz-exam-shell .quiz-exam-toolbar__actions .instant-answer-control__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.5625rem;
        font-weight: 600;
        color: var(--exam-muted);
        line-height: 1;
        text-align: center;
    }

    .quiz-exam-shell .quiz-exam-toolbar__actions .instant-answer-control__text-line {
        display: block;
    }

    .quiz-exam-shell .quiz-exam-toolbar__actions .instant-answer-control__text-line + .instant-answer-control__text-line::before {
        content: none;
    }

    .quiz-exam-shell .quiz-exam-toolbar__actions .instant-toggle-switch {
        width: 28px;
        height: 16px;
        flex-shrink: 0;
    }

    .quiz-exam-shell .quiz-exam-toolbar__actions .instant-toggle-slider:before {
        height: 10px;
        width: 10px;
        left: 2px;
    }

    .quiz-exam-shell .quiz-exam-toolbar__actions .instant-toggle-input:checked + .instant-toggle-slider:before {
        transform: translateY(-50%) translateX(12px);
    }

    .quiz-exam-shell .quiz-exam-progress {
        display: none !important;
    }

    /* Soru navigatörü — kart genişliği, içerik ortalı */
    .quiz-exam-shell .quiz-navigator-main {
        order: 2;
        position: relative;
        top: auto;
        bottom: auto;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        box-sizing: border-box;
        max-height: none;
        padding: 0.5rem 0.875rem 0.625rem;
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
        margin-inline: 0;
        border: var(--exam-card-border);
        border-radius: var(--exam-radius);
        background: var(--exam-surface);
        box-shadow: none;
    }

    .quiz-exam-shell .navigator-header-main {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        margin-bottom: 0.35rem;
        padding-bottom: 0.35rem;
        text-align: center;
    }

    .quiz-exam-shell .navigator-title-main {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .quiz-exam-shell .navigator-count-main {
        font-size: 0.625rem;
        padding: 0.1rem 0.4rem;
        line-height: 1.2;
    }

    .quiz-exam-shell .navigator-items-main {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0.3rem;
        width: 100%;
        max-height: none;
        margin-bottom: 0;
        margin-inline: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 0.25rem;
        padding: 0.25rem 0 0.375rem;
        scrollbar-width: thin;
        scrollbar-gutter: stable;
        scrollbar-color: color-mix(in srgb, var(--exam-border-soft) 65%, var(--exam-accent)) transparent;
        overscroll-behavior-x: contain;
    }

    .quiz-exam-shell .navigator-items-main::-webkit-scrollbar {
        display: block;
        height: 4px;
        width: auto;
    }

    .quiz-exam-shell .navigator-items-main::-webkit-scrollbar-track {
        margin-inline: 0.25rem;
        background: color-mix(in srgb, var(--exam-border-soft) 35%, transparent);
        border-radius: 999px;
    }

    .quiz-exam-shell .navigator-items-main::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--exam-border-soft) 55%, var(--exam-accent));
        border-radius: 999px;
        border: none;
    }

    .quiz-exam-shell .navigator-items-main::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--exam-border-soft) 40%, var(--exam-accent));
    }

    .quiz-exam-shell .navigator-item-main {
        flex: 0 0 2rem;
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
        min-height: 2rem;
        scroll-snap-align: start;
        border-radius: 7px;
        font-size: 0.6875rem;
        font-weight: 600;
    }

    .quiz-exam-shell .navigator-item-main.marked.correct,
    .quiz-exam-shell .navigator-item-main.marked.wrong,
    .quiz-exam-shell .navigator-item-main.marked.answered {
        border-left-width: 2px;
        padding-left: 0;
    }

    .quiz-exam-shell .navigator-legend {
        display: none;
    }

    /* Ana sütun & soru kartı */
    .quiz-exam-shell .quiz-main-column,
    .quiz-main-column {
        border: none;
        border-radius: 12px;
        box-shadow: none;
    }

    .quiz-exam-shell .quiz-question-card,
    .quiz-exam-shell .quiz-main-column .quiz-question-card {
        padding: 0.75rem 0.875rem 0.875rem;
        scroll-margin-top: var(--qm-exam-scroll-offset);
    }

    .quiz-exam-shell .question-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    .quiz-exam-shell .question-header-left {
        flex: 0 1 auto;
        min-width: 0;
        align-items: center;
    }

    .quiz-exam-shell .question-actions {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 0.0625rem;
        max-width: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-end;
    }

    .quiz-exam-shell .question-actions::-webkit-scrollbar {
        display: none;
    }

    .quiz-exam-shell .question-action-btn {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
    }

    .quiz-exam-shell .question-image img {
        max-height: 200px;
    }

    .quiz-exam-shell .quiz-options {
        gap: 0.625rem;
        width: 100%;
        min-width: 0;
    }

    .quiz-exam-shell .quiz-option-label {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-height: 2.75rem;
        padding: 0.625rem 2rem 0.625rem 0.625rem;
        gap: 0.5rem;
        border-radius: 10px;
    }

    .quiz-exam-shell .quiz-option-marker {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
        flex-shrink: 0;
    }

    .quiz-exam-shell .quiz-option-text {
        flex: 1;
        min-width: 0;
        align-self: auto;
        text-align: left;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .quiz-exam-shell .quiz-option-label .answer-feedback {
        position: absolute;
        top: 50%;
        right: 0.5rem;
        transform: translateY(-50%);
        width: 1.375rem;
        height: 1.375rem;
        margin-left: 0;
    }

    /* Önceki / Sonraki — sınav kartının hemen altında (akış içi) */
    .quiz-exam-shell .quiz-single-navigation {
        position: relative;
        bottom: auto;
        z-index: 1;
        margin: 0.625rem 0 0;
        padding: 0;
        background: transparent;
    }

    .quiz-exam-shell .quiz-main-column .quiz-single-navigation {
        margin-top: 0.625rem;
        padding-left: 0;
        padding-right: 0;
    }

    .quiz-exam-shell .exam-nav-bar {
        padding: 0.45rem 0.5rem;
        gap: 0.45rem;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    }

    .quiz-exam-shell .exam-nav-btn {
        min-height: 2.75rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .quiz-exam-shell .exam-nav-btn svg {
        width: 16px;
        height: 16px;
    }

    .quiz-exam-shell .quiz-list-finish {
        position: relative;
        bottom: auto;
        z-index: 1;
        margin-top: 0.75rem;
        padding: 0;
        background: transparent;
    }

    .quiz-exam-shell .quiz-finish-btn-list {
        min-height: 2.75rem;
        width: 100%;
        max-width: none;
    }

    .quiz-exam-shell .quiz-questions-wrapper {
        padding-bottom: 0;
    }

    .quiz-exam-shell .quiz-questions-wrapper.single-mode {
        padding-bottom: 0;
    }
}

@media (max-width: 480px) {
    .quiz-exam-shell .quiz-exam-header {
        --qm-exam-header-pad: 0.5rem;
        --qm-exam-chip-h: 2.125rem;
        gap: 0.3rem;
        padding: 0.4375rem var(--qm-exam-header-pad);
    }

    .quiz-exam-shell .quiz-exam-header__dock {
        height: calc(var(--qm-exam-chip-h) + 0.45rem);
        padding: 0.2rem 0;
    }

    .quiz-exam-shell .quiz-exam-header__title {
        font-size: 0.875rem;
    }

    .quiz-exam-shell .quiz-exam-header .quiz-timer.quiz-exam-timer {
        padding: 0 0.3rem !important;
    }

    .quiz-exam-shell .quiz-exam-toolbar__actions .instant-answer-control__text {
        font-size: 0.5rem;
    }

    .quiz-exam-shell .exam-nav-bar {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .quiz-exam-shell .exam-nav-status {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-content: center;
        padding: 0.15rem 0;
    }

    .quiz-exam-shell .exam-nav-btn--prev {
        grid-column: 1;
        grid-row: 2;
    }

    .quiz-exam-shell .exam-nav-btn--next,
    .quiz-exam-shell .exam-nav-btn--finish {
        grid-column: 2;
        grid-row: 2;
    }

    .quiz-exam-shell .exam-nav-btn--prev span,
    .quiz-exam-shell .exam-nav-btn--next .next-btn-text {
        font-size: 0.75rem;
    }

    .quiz-exam-shell .quiz-navigator-main {
        padding: 0.4375rem 0.75rem 0.5rem;
    }

    .quiz-exam-shell .navigator-items-main {
        gap: 0.25rem;
    }

    .quiz-exam-shell .navigator-item-main {
        flex: 0 0 1.875rem;
        width: 1.875rem;
        min-width: 1.875rem;
        height: 1.875rem;
        min-height: 1.875rem;
        font-size: 0.625rem;
        border-radius: 6px;
    }

    .quiz-exam-shell .quiz-options {
        gap: 0.55rem;
    }

    .quiz-exam-shell .quiz-option-label {
        min-height: 2.625rem;
        padding: 0.5625rem 1.75rem 0.5625rem 0.5625rem;
        gap: 0.4375rem;
        border-radius: 9px;
    }

    .quiz-exam-shell .quiz-option-marker {
        width: 1.875rem;
        height: 1.875rem;
        min-width: 1.875rem;
        min-height: 1.875rem;
    }

    .quiz-exam-shell .quiz-option-label .answer-feedback {
        right: 0.4375rem;
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (max-width: 768px) {
    [data-theme="dark"] .quiz-exam-shell .exam-nav-bar {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
    }
}

/* Anlık sınav geçişleri — qm-instant-transitions */
body.qm-instant-transitions .quiz-question-item,
body.qm-instant-transitions .quiz-question-card,
body.qm-instant-transitions .quiz-options,
body.qm-instant-transitions .quiz-option-label,
body.qm-instant-transitions .exam-nav-bar,
body.qm-instant-transitions #quiz-navigator-main button,
body.qm-instant-transitions .quiz-content-layout {
    transition-duration: 0.04s !important;
}

body.qm-instant-transitions .quiz-question-item {
    animation: none !important;
}

body.qm-fast-surface .quiz-exam-shell {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

/* ── Soru navigatörü — dinamik çoklu oturum ── */

.quiz-navigator-main.navigator-multi-session {
    padding: 0.625rem 0.75rem 0.75rem;
}

.navigator-session-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.quiz-exam-shell .navigator-session-meta .quiz-exam-header__session-badge--navigator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.28rem 0.55rem;
    border-radius: 7px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    background: var(--exam-accent-soft);
    border: 1px solid var(--exam-border-soft);
    color: var(--exam-accent);
}

.navigator-session-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
}

.navigator-session-step {
    flex: 1 1 0;
    min-width: 0;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--exam-border-soft) 70%, transparent);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.navigator-session-step.is-current {
    background: var(--exam-accent);
    transform: scaleY(1.35);
}

.quiz-navigator-main.navigator-has-scroll .navigator-items-main {
    scrollbar-gutter: stable;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent 100%);
}

.quiz-navigator-main.navigator-multi-session .navigator-header-main {
    margin-bottom: 0.55rem;
    padding-bottom: 0.55rem;
}

.quiz-navigator-main.navigator-multi-session .navigator-header-main__row {
    gap: 0.4rem;
}

.quiz-navigator-main.navigator-multi-session .navigator-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem 0.45rem;
    padding-top: 0.55rem;
}

.quiz-navigator-main.navigator-multi-session .legend-text {
    font-size: 0.5625rem;
}

.quiz-navigator-main.navigator-multi-session .legend-dot {
    width: 7px;
    height: 7px;
}