/* css/style.css */

body { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }

/* Gaya Butang Tab */
.tab-active { background-color: #2563eb; color: white; border-color: #2563eb; }
.tab-inactive { background-color: white; color: #475569; border-color: #e2e8f0; }
.tab-inactive:hover { background-color: #f8fafc; color: #2563eb; }

/* Animasi Transisi */
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Quiz Styles V3 */
.option-btn { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.option-btn:hover:not(:disabled) { transform: translateX(8px); background-color: #f8fafc; border-color: #3b82f6; }

.correct-answer { 
    background-color: #dcfce7 !important; 
    border-color: #22c55e !important; 
    color: #14532d !important; 
    transform: scale(1.01);
    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.2);
    font-weight: 700;
}

.wrong-answer { 
    background-color: #fee2e2 !important; 
    border-color: #ef4444 !important; 
    color: #7f1d1d !important; 
    opacity: 0.8;
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.explanation-box { animation: slideDown 0.4s ease-out forwards; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Timer Bar */
.timer-track { width: 100%; height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin-bottom: 20px; }
.timer-fill { height: 100%; background: #3b82f6; transition: width 0.1s linear, background-color 0.3s; width: 100%; }
.timer-critical { background: #ef4444 !important; }