* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    background: #284596;
    min-height: 100vh;
    color: white;
}
.container { max-width: 800px; margin: 0 auto; padding: 20px; min-height: 100vh; }

/* Baslangic Ekrani */
.start-screen { 
    display: flex; flex-direction: column; align-items: center; 
    justify-content: center; min-height: 80vh; text-align: center; 
}
.start-screen h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.start-screen p { color: #f0b609; margin-bottom: 2rem; font-size: 1.1rem; }
.btn { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; border: none; padding: 16px 48px; font-size: 1.2rem;
    border-radius: 50px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
    font-weight: 600;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(102,126,234,0.4); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* API Durumu */
.api-status { 
    margin-top: 1rem; padding: 8px 16px; border-radius: 20px; 
    font-size: 0.85rem; display: inline-block;
}
.api-status.connected { background: rgba(46, 213, 115, 0.2); color: #2ed573; }
.api-status.demo { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.api-status.checking { background: rgba(108, 117, 125, 0.2); color: #6c757d; }

/* Sinav Ekrani */
.exam-container { padding: 20px 0; }
.progress-bar { 
    background: rgba(255,255,255,0.1); border-radius: 10px; 
    height: 8px; margin-bottom: 20px; overflow: hidden;
}
.progress-fill { 
    height: 100%; background: linear-gradient(90deg, #f0b609, #764ba2);
    transition: width 0.3s ease;
}
.exam-header { 
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; flex-wrap: wrap; gap: 10px;
}
.question-counter { font-size: 1.1rem; color: #8892b0; }
.timer { 
    font-size: 1.5rem; font-weight: bold; padding: 8px 20px;
    border-radius: 25px; min-width: 80px; text-align: center;
}
.timer.normal { background: rgba(46, 213, 115, 0.2); color: #2ed573; }
.timer.warning { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.timer.danger { background: rgba(255, 71, 87, 0.2); color: #ff4757; animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.question-card { 
    background: rgba(255,255,255,0.05); border-radius: 20px;
    padding: 32px; margin-bottom: 24px; backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}
.question-text { font-size: 1.3rem; line-height: 1.6; margin-bottom: 24px; }

.options { display: flex; flex-direction: column; gap: 12px; }
.option { 
    background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 16px 20px; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center; gap: 12px;
}
.option:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.option.selected { 
    background: rgba(102,126,234,0.2); border-color: #2ed573;
    box-shadow: 0 0 20px rgba(102,126,234,0.3);
}
.option.disabled { pointer-events: none; opacity: 0.6; }
.option-letter { 
    width: 32px; height: 32px; border-radius: 50%; 
    background: rgba(255,255,255,0.1); display: flex;
    align-items: center; justify-content: center; font-weight: bold;
    flex-shrink: 0;
}
.option.selected .option-letter { background: #667eea; }

.nav-buttons { display: flex; justify-content: flex-end; margin-top: 20px; }
.btn-next { 
    background: linear-gradient(135deg, #f0b609 0%, #764ba2 100%);
    color: white; border: none; padding: 14px 32px; font-size: 1rem;
    border-radius: 25px; cursor: pointer; font-weight: 600;
    transition: transform 0.2s;
}
.btn-next:hover { transform: translateY(-2px); }
.btn-next:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Sonuc Ekrani */
.result-container { padding: 20px 0; }
.result-summary { 
    background: rgba(255,255,255,0.05); border-radius: 20px;
    padding: 32px; margin-bottom: 24px; text-align: center;
    backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1);
}
.score-circle { 
    width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 2.5rem; font-weight: bold;
}
.score-circle.high { background: rgba(46, 213, 115, 0.2); color: #2ed573; border: 4px solid #2ed573; }
.score-circle.medium { background: rgba(255, 193, 7, 0.2); color: #ffc107; border: 4px solid #ffc107; }
.score-circle.low { background: rgba(255, 71, 87, 0.2); color: #ff4757; border: 4px solid #ff4757; }
.score-circle span { font-size: 1rem; opacity: 0.8; }

.stats { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 20px; }
.stat { text-align: center; }
.stat-value { font-size: 1.8rem; font-weight: bold; }
.stat-value.correct { color: #2ed573; }
.stat-value.wrong { color: #ff4757; }
.stat-value.empty { color: #ffc107; }
.stat-label { font-size: 0.9rem; color: #8892b0; }

.total-time { margin-top: 20px; font-size: 1.1rem; color: #8892b0; }

.result-questions { margin-top: 24px; }
.result-question { 
    background: rgba(255,255,255,0.05); border-radius: 16px;
    padding: 20px; margin-bottom: 16px; border-left: 4px solid;
}
.result-question.correct { border-left-color: #2ed573; }
.result-question.wrong { border-left-color: #ff4757; }
.result-question.empty { border-left-color: #ffc107; }

.result-question-header { 
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.result-question-title { font-weight: 600; }
.result-question-time { font-size: 0.85rem; color: #8892b0; }
.result-question-text { margin-bottom: 12px; line-height: 1.5; }

.result-options { display: flex; flex-direction: column; gap: 8px; }
.result-option { 
    padding: 10px 14px; border-radius: 8px; display: flex; 
    align-items: center; gap: 10px; font-size: 0.95rem;
}
.result-option.neutral { background: rgba(255,255,255,0.03); }
.result-option.correct-answer { background: rgba(46, 213, 115, 0.2); color: #2ed573; }
.result-option.user-wrong { background: rgba(255, 71, 87, 0.2); color: #ff4757; }

.loading { text-align: center; padding: 60px 20px; }
.loading-spinner {
    width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.1);
    border-top-color: #667eea; border-radius: 50%; margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobil Uyum */
@media (max-width: 600px) {
    .container { padding: 16px; }
    .start-screen h1 { font-size: 1.8rem; }
    .question-text { font-size: 1.1rem; }
    .question-card { padding: 20px; }
    .score-circle { width: 120px; height: 120px; font-size: 2rem; }
    .stats { gap: 20px; }
    .stat-value { font-size: 1.5rem; }
}