/* Capacitor uygulaması ek stilleri — style.css'e dokunulmaz */

/* Dil butonları — tarayıcı default border'ı kaldır */
.lang-btn {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* Safe-area padding — iOS notch/home-indicator için */
.app-header {
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
}

/* Exit quiz butonu */
.exit-quiz {
    position: fixed !important;
    top: calc(max(56px, env(safe-area-inset-top, 0px)) + 56px + 5px) !important;
    right: 1rem !important;
    width: 44px !important;
    height: 44px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    font-size: 1.1rem !important;
}

/* Quiz option buttons */
.quiz-option {
    background: white;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 0.6rem 0.4rem;
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
}

.quiz-option:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.quiz-option.correct {
    background: #4CAF50 !important;
    border-color: #4CAF50 !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}

.quiz-option.wrong {
    background: #f44336 !important;
    border-color: #f44336 !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Feedback */
.feedback-success, .feedback-error {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
}
.feedback-success { background: #d4edda; color: #155724; }
.feedback-error   { background: #f8d7da; color: #721c24; }

/* Results summary */
.results-summary { margin: 1rem 0; }
.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.stat-label { color: #666; font-size: 0.95rem; }
.stat-value { font-weight: 700; color: var(--text-color); }
.stat-item.success-rate {
    background: linear-gradient(135deg, #059669, #0d9488);
    border-radius: 14px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.4rem 1rem;
    margin-bottom: 1rem;
    gap: 0.2rem;
}
.stat-item.success-rate .stat-label { color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.stat-item.success-rate .stat-value { color: #fff; font-size: 2.4rem; font-weight: 800; line-height: 1; }
.results-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }

/* Question count buttons */
.question-count-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}
.count-button {
    padding: 0.75rem 1.25rem;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    min-width: 80px;
    transition: all 0.2s;
}
.count-button.selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Progress bar */
.progress-bar-container {
    width: 100%;
    height: 14px;
    background: #e0e0e0;
    border-radius: 7px;
    overflow: hidden;
    margin: 0.25rem auto;
}
.progress-bar-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 7px;
    transition: width 0.3s ease;
    min-height: 14px;
}

/* Quiz screen */
#quiz-screen {
    height: calc(100vh - var(--header-height, 70px));
    height: calc(100dvh - var(--header-height, 70px));
    /* Görünür içerik alanıyla sınırla — toolbar arkasına taşmasın */
    max-height: var(--content-h, calc(100dvh - 70px));
    overflow: hidden;
}
#quiz-screen .quiz-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    overflow: hidden;
}
#quiz-screen .note-display {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    max-height: 40dvh;
}
#quiz-screen .note-display img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
}
#quiz-screen .note-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    flex-shrink: 0;
}
#quiz-screen .feedback-message {
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    #quiz-screen .note-options {
        grid-template-columns: repeat(3, 1fr);
    }
}