/* =========================================================
   MOBILE.CSS
   Aktif untuk layar <= 600px (Smartphone)
   Dimuat dengan: <link media="screen and (max-width:600px)">
   ========================================================= */

.container { padding: 12px; }

.navbar { flex-direction: column; align-items: flex-start; padding: 12px 14px; gap: 8px; }
.navbar .nav-links { width: 100%; justify-content: space-between; gap: 6px; }
.navbar .nav-links a { flex: 1; text-align: center; padding: 8px 4px; font-size: .82rem; }
.navbar .brand { font-size: 1.05rem; }
.navbar .user-info { font-size: .8rem; }

.grid.dashboard-grid { grid-template-columns: 1fr; }

.login-wrapper { padding: 10px; }
.login-box { padding: 22px 18px; border-radius: 10px; }
.login-box h2 { font-size: 1.25rem; }

.card { padding: 14px; border-radius: 8px; }
.card-title { font-size: 1rem; }

.form-control { font-size: .95rem; padding: 9px 10px; }
.btn { width: 100%; padding: 12px; font-size: .92rem; }
.btn.btn-inline { width: auto; }

.two-col { display: block; }

.table-wrap { overflow-x: auto; }
table { font-size: .8rem; min-width: 480px; }
table th, table td { padding: 8px; }

.soal-box { padding: 12px; }
.soal-nomor { font-size: .95rem; }
.pilihan-item { padding: 9px 10px; font-size: .9rem; }

.score-circle { width: 110px; height: 110px; font-size: 1.6rem; }

.exam-timer { font-size: .95rem; padding: 8px; }

.exam-layout { display: block; }
.soal-nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.soal-nav-grid button { padding: 8px; font-size: .8rem; }

.stat-box h3 { font-size: 1.4rem; }