/* General Container */
#ddq-quiz-container {
    font-family: 'Inter', sans-serif, system-ui;
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    max-width: 900px;
    margin: 2rem auto;
}
@media (min-width: 640px) {
    #ddq-quiz-container {
        padding: 1.5rem 2rem;
    }
}

#ddq-quiz-container header { text-align: center; margin-bottom: 1.5rem; }
#ddq-quiz-container #main-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #1f2937; }
@media (min-width: 768px) {
    #ddq-quiz-container #main-title { font-size: 2rem; line-height: 2.5rem; }
}
#ddq-quiz-container #quiz-subtitle { color: #6b7280; margin-top: 0.5rem; font-size: 0.9rem; }

/* === PERBAIKAN UTAMA UNTUK LAYOUT === */
.ddq-layout {
    display: flex;
    flex-direction: row; /* Selalu berdampingan */
    gap: 1rem;
}
.ddq-options-area {
    width: 40%;
    flex-shrink: 0;
}
.ddq-questions-area {
    width: 60%;
    flex-grow: 1;
}
/* ================================== */

#options-container {
    background-color: #f9fafb;
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    justify-items: center;
}
#quiz-container { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 1rem; 
}
@media (min-width: 768px) { /* Di layar lebih besar, pertanyaan jadi 2 kolom */
    #quiz-container { grid-template-columns: repeat(2, 1fr); }
}

/* Draggable & Droppable Elements */
.draggable-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    cursor: grab;
    transition: all 0.2s ease-in-out;
}
.draggable-item:active { cursor: grabbing; transform: scale(1.1); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); z-index: 10; }
.draggable-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; pointer-events: none; }
.drop-zone {
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.drop-zone .draggable-item { width: 70%; margin: auto; }
.drop-zone .placeholder-text { font-size: 0.875rem; color: #9ca3af; text-align: center; }
.drop-zone.drag-over { background-color: #dbeafe; border-color: #60a5fa; }
.drop-zone.correct { background-color: #dcfce7; border-color: #4ade80; }
.drop-zone.incorrect { background-color: #fee2e2; border-color: #f87171; }
.category-box h3 { text-align: center; font-weight: 600; margin-bottom: 0.75rem; font-size: 0.9rem; line-height: 1.2; }

/* Buttons & Messages */
#main-quiz-area footer { text-align: center; margin-top: 1.5rem; display:flex; justify-content:center; gap:0.5rem; flex-wrap: wrap; }
.ddq-btn { padding: 0.6rem 1rem; border-radius: 0.5rem; font-weight: 700; border: none; cursor: pointer; transition: all 0.2s; font-size: 0.875rem; }
.ddq-btn.primary { background-color: #4f46e5; color: white; }
.ddq-btn.primary:hover { background-color: #4338ca; }
.ddq-btn.secondary { background-color: #6b7280; color: white; }
.ddq-btn.secondary:hover { background-color: #4b5563; }
.ddq-btn.success { background-color: #16a34a; color: white; }
.ddq-btn.success:hover { background-color: #15803d; }
.ddq-message { margin-top: 1.5rem; padding: 1rem; border-radius: 0.5rem; border-left-width: 4px; }
.ddq-message.warning { background-color: #fef3c7; border-color: #f59e0b; color: #92400e; }
.ddq-message p:first-child { font-weight: 700; }

/* Summary & Explanation */
#explanation-container, #final-summary-container { margin-top: 2rem; border-top: 1px solid #e5e7eb; padding-top: 2rem; }
#explanation-container h2, #final-summary-container h2 { text-align: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.explanation-card { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; }
.ddq-score-card { background-color: #f3f4f6; padding: 1.5rem; border-radius: 0.75rem; text-align: center; }
#final-score { font-size: 3rem; font-weight: 800; color: #4f46e5; }
.ddq-score-details { display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; }
.ddq-score-details p { font-size: 1.8rem; font-weight: 700; }
.ddq-score-details #total-correct { color: #16a34a; }
.ddq-score-details #total-incorrect { color: #dc2626; }
.ddq-score-details span { color: #4b5563; font-size: 0.875rem; }
#answer-review .review-item { border-bottom: 1px solid #e5e7eb; padding: 1rem 0; }
#answer-review .review-item p { margin: 0.25rem 0; }
#answer-review .review-item .review-question { font-weight: 700; }
#answer-review .review-item .review-answer.correct { color: #16a34a; }
#answer-review .review-item .review-answer.incorrect { color: #dc2626; }
#answer-review .review-item .review-explanation { font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem; }
#final-summary-container footer { text-align: center; margin-top: 1.5rem; }