/* CSS Variables */
:root {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-card: #1e1e3f;
    --bg-card-hover: #2a2a4a;
    --text-primary: #f0f0f5;
    --text-secondary: #9898b0;
    --accent: #6c5ce7;
    --accent-hover: #a29bfe;
    --accent-glow: rgba(108, 92, 231, 0.4);
    --success: #00cec9;
    --success-bg: rgba(0, 206, 201, 0.15);
    --success-glow: rgba(0, 206, 201, 0.3);
    --error: #ff7675;
    --error-bg: rgba(255, 118, 117, 0.15);
    --warning: #fdcb6e;
    --border: rgba(255, 255, 255, 0.1);
    --option-bg: rgba(255, 255, 255, 0.05);
    --option-hover: rgba(255, 255, 255, 0.1);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 40px rgba(108, 92, 231, 0.15);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --glass-bg: rgba(30, 30, 63, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
    --gradient-primary: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    --gradient-success: linear-gradient(135deg, #00cec9 0%, #55efc4 100%);
    --gradient-danger: linear-gradient(135deg, #ff7675 0%, #fd79a8 100%);
    --gradient-warm: linear-gradient(135deg, #fdcb6e 0%, #f39c12 100%);
}

/* Light mode */
body:not(.dark-mode) {
    --bg-primary: #f8f9fe;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f2ff;
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --accent: #6c5ce7;
    --accent-hover: #5f4dd0;
    --accent-glow: rgba(108, 92, 231, 0.2);
    --border: rgba(0, 0, 0, 0.08);
    --option-bg: #f8f9fe;
    --option-hover: #eef0ff;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 40px rgba(108, 92, 231, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.08);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    transition: background 0.4s ease, color 0.3s ease;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Performans: Quiz alanlarında layout containment */
.question-container {
    contain: content;
}

/* Azaltılmış hareket tercihi — animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Düşük güçlü cihazlarda backdrop-filter azalt */
@media (max-width: 768px) {
    .card,
    .quiz-header,
    .question-text,
    .option,
    .tabs {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

html {
    scroll-behavior: smooth;
    height: -webkit-fill-available;
    overflow-x: hidden;
}

/* Selection color */
::selection {
    background: var(--accent);
    color: white;
}

/* Global select/dropdown dark mode fix */
select {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239898b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

select option {
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 8px 12px;
}

select option:checked {
    background: var(--accent);
    color: white;
}

body:not(.dark-mode) select {
    background-color: var(--bg-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23636e72' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

body:not(.dark-mode) select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Global focus-visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}