/* ================================================================
responsive.css
Perbaikan Mobile Responsive + Hamburger Menu
Modul Pembelajaran Statistik Digital Berbasis STEM
================================================================
CARA PAKAI
----------------------------------------------------------------
1. Simpan file ini di: assets/css/responsive.css
2. Tambahkan (dashboard.php, module.php, quiz.php, quiz_attempt.php,
projek.php, projek_materi.php, latihan.php, latihan_materi.php,
materi.php):
a) Taruh baris ini sebagai ANAK PERTAMA , SEBELUM :
, taruh SETELAH tag ...
dan SEBELUM :
Jadi strukturnya kira-kira:
...
...
...
Markup ini SAMA PERSIS untuk semua halaman di atas — tinggal
copy-paste. login.php & register.php tidak punya jadi
tidak perlu ditambahkan apa-apa di sana.
================================================================ */
/* ================================================================
1. GLOBAL — berlaku di SEMUA halaman
================================================================ */
* { -webkit-tap-highlight-color: transparent; }
html, body {
max-width: 100%;
overflow-x: hidden;
}
img, svg, iframe, video { max-width: 100%; }
/* input & select ukuran font >=16px di mobile supaya iOS tidak auto-zoom */
@media (max-width: 600px) {
input, select, textarea, button { font-size: 16px !important; }
}
/* ================================================================
2. HAMBURGER MENU + NAVBAR MOBILE
Berlaku di semua halaman yang punya :
dashboard.php, module.php, quiz.php, quiz_attempt.php,
projek.php, projek_materi.php, latihan.php, latihan_materi.php,
materi.php
================================================================ */
.nav-toggle-checkbox { display: none; }
.nav-toggle-label {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 34px;
height: 34px;
cursor: pointer;
flex-shrink: 0;
}
.nav-toggle-label span {
display: block;
width: 100%;
height: 2.5px;
border-radius: 3px;
background: #1e293b;
transition: transform .25s ease, opacity .2s ease;
}
/* nav gelap (kalau ada halaman dengan navbar dark) otomatis pakai warna putih */
.auth-page .nav-toggle-label span,
nav.dark .nav-toggle-label span { background: #fff; }
/* animasi jadi tanda "X" saat menu terbuka */
.nav-toggle-checkbox:checked ~ nav .nav-toggle-label span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle-checkbox:checked ~ nav .nav-toggle-label span:nth-child(2) {
opacity: 0;
}
.nav-toggle-checkbox:checked ~ nav .nav-toggle-label span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
@media (max-width: 860px) {
/* PENTING: nav TIDAK di-flex-wrap dan TIDAK dibuat tumbuh tinggi.
Tinggi nav tetap 64px (aturan asli di style.css/dashboard.css).
Menu dropdown dibuat position:absolute supaya "melayang" di
bawah navbar, tidak mendorong/mengubah tinggi navbar — ini titik
yang tadinya berpotensi bentrok kalau dibuat in-flow. */
nav { position: relative; }
.dash-page nav { position: sticky; } /* tetap pakai sticky bawaan dashboard.css */
.nav-toggle-label { display: flex; order: 2; }
/* urutan visual baris atas: logo -> hamburger -> user-pill */
.user-pill { order: 3; padding: 4px 10px 4px 4px; gap: 6px; }
.user-name { display: none; }
/* override aturan lama di style.css yang menyembunyikan menu */
nav ul li:not(:last-child) { display: block !important; }
nav ul {
order: 4;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
background: #fff;
box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
transition: max-height .3s ease, opacity .2s ease;
z-index: 50; /* cukup di atas konten halaman, tidak ada elemen fixed lain yang bersaing */
}
.nav-toggle-checkbox:checked ~ nav ul {
max-height: 400px;
opacity: 1;
padding: 8px 6%;
border-top: 1px solid var(--border, #e2e8f0);
}
nav ul li { width: 100%; }
nav ul a {
display: block;
width: 100%;
padding: 12px 4px;
border-bottom: 1px solid #f1f5f9;
}
}
@media (max-width: 420px) {
.logo-name { font-size: 12px; max-width: 140px; }
.user-pill span:last-child { display: none; } /* sembunyikan emoji bendera */
}
/* ================================================================
3. HALAMAN DASHBOARD (dashboard.php)
Sidebar kiri (Dasbor/Modul/Statistik/Lencana/Logout) TIDAK dibuat
drawer terpisah dengan toggle sendiri — supaya tidak bentrok
z-index dengan dropdown hamburger di navbar (lihat bagian 2) dan
supaya tidak jadi dua menu yang tumpang tindih. Sidebar cukup
diubah jadi baris horizontal yang selalu terlihat, sama seperti
pola TOC materi. Hamburger di navbar cukup mengurus dropdown
Beranda/Modul/Projek/Latihan saja, konsisten di semua halaman.
================================================================ */
@media (max-width: 860px) {
.dash-body { grid-template-columns: 1fr; }
.dash-sidebar {
display: block;
position: static;
min-height: auto;
width: 100%;
border-right: none;
border-bottom: 1px solid var(--border, #e2e8f0);
padding: 10px 4%;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.sidebar-section {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 0;
margin-right: 14px;
}
.sidebar-label { display: none; } /* hemat tempat di baris sempit */
.sidebar-link {
display: inline-flex;
white-space: nowrap;
padding: 7px 12px;
font-size: 12.5px;
margin-bottom: 0;
border-radius: 50px;
background: var(--bg-soft, #f8fafc);
}
.sidebar-link.active { background: var(--blue-dim, rgba(37,99,235,.08)); }
.sidebar-divider { display: none; }
.sidebar-link.logout { margin-left: 4px; }
.dash-main { padding: 20px 5%; }
.welcome-banner { flex-direction: column; align-items: flex-start; gap: 16px; }
.wb-btn { width: 100%; text-align: center; }
.stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat-card { padding: 14px 12px; }
.stat-value { font-size: 1.3rem; }
.dash-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 400px) {
.stats-row { grid-template-columns: 1fr; }
.welcome-banner { padding: 20px 20px; }
}
/* ================================================================
4. HALAMAN DAFTAR / LIST
module.php, quiz.php, projek.php, latihan.php
(kartu modul/kuis/projek/latihan, banner; sidebar-nya memakai
perlakuan yang sama seperti di bagian 3 — baris horizontal)
================================================================ */
@media (max-width: 860px) {
.mod-page .dash-body { grid-template-columns: 1fr; }
.mod-banner, .quiz-banner { padding: 24px 5%; }
.mod-banner h1, .quiz-banner h1 { font-size: 1.1rem; }
.mod-banner::after, .quiz-banner::after { font-size: 5rem; }
.mod-grid-section, .quiz-list-section { padding: 20px 5%; }
}
@media (max-width: 600px) {
.mod-cards, .quiz-cards { grid-template-columns: 1fr; }
.mod-card, .quiz-card { padding: 16px; }
.quiz-card-footer {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.btn-take-quiz { text-align: center; }
.mod-card-footer { flex-wrap: wrap; gap: 10px; }
.mod-prog-wrap { flex-basis: 100%; margin-right: 0; }
}
/* ================================================================
5. HALAMAN MATERI READER
materi.php, projek_materi.php, latihan_materi.php
================================================================ */
@media (max-width: 900px) {
.materi-body { grid-template-columns: 1fr; }
.materi-sidebar {
position: static;
min-height: auto;
max-height: none;
border-right: none;
border-bottom: 1px solid var(--border, #e2e8f0);
padding: 14px 0;
}
.materi-main { padding: 22px 5%; }
}
@media (max-width: 600px) {
.toc-header { padding: 0 14px 12px; }
.toc-item { padding: 9px 14px; }
.materi-title { font-size: 1.15rem; }
.materi-meta { gap: 8px; }
.materi-meta-item { font-size: 11.5px; }
/* tabel di dalam konten materi kadang lebar; scroll di kontainernya
(BUKAN di langsung) supaya kolom/baris tetap rapi */
.materi-content { overflow-x: auto; }
.materi-content table { min-width: 480px; }
.materi-nav { flex-direction: column; }
.nav-btn { max-width: 100%; }
.nav-btn.next { flex-direction: row; text-align: left; }
.complete-wrap {
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 12px;
}
/* form submit projek */
.materi-content + .materi-content input[type="file"] { width: 100%; }
}
@media (max-width: 420px) {
.video-placeholder .play-icon { width: 46px; height: 46px; font-size: 18px; }
}
/* ================================================================
6. HALAMAN QUIZ ATTEMPT (quiz_attempt.php)
================================================================ */
@media (max-width: 700px) {
.qa-wrap { padding: 20px 5% 50px; }
.qa-intro-card, .qa-question-card, .qa-result-card { padding: 22px 18px; }
.qa-intro-stats, .qa-result-stats {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.qa-stat-box { padding: 10px 6px; }
.qa-stat-box .num { font-size: 1.05rem; }
.qa-progress-header { flex-wrap: wrap; gap: 8px; }
.qa-progress-text { order: 1; }
.qa-timer { order: 2; }
.qa-progress-bar { order: 3; flex-basis: 100%; }
.qa-dots { gap: 5px; }
.qa-dot { width: 28px; height: 28px; font-size: 11px; }
.qa-question-text { font-size: 14.5px; }
.qa-nav { flex-direction: column-reverse; }
.qa-nav .qa-btn { width: 100%; text-align: center; }
.qa-result-action { flex-direction: column; }
.qa-result-action .qa-btn { width: 100%; text-align: center; }
}
@media (max-width: 380px) {
.qa-intro-stats, .qa-result-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.qa-result-ring svg { width: 110px; height: 110px; }
.qa-result-score { font-size: 1.7rem; }
}
/* ================================================================
7. HALAMAN AUTH — login.php & register.php
(tidak punya /hamburger; ini murni rapihin form di layar kecil)
================================================================ */
@media (max-width: 560px) {
.auth-wrapper { padding: 28px 14px; }
.auth-card { padding: 30px 22px; border-radius: 16px; }
.auth-header h1 { font-size: 1.2rem; }
.icon-ring { width: 52px; height: 52px; font-size: 22px; }
.form-row-2 { grid-template-columns: 1fr; gap: 0; }
.field-group label { font-size: 11px; }
.input-wrap input, .input-wrap select { padding: 10px 12px 10px 36px; }
.btn-auth { padding: 12px; font-size: 13.5px; }
}
@media (max-width: 380px) {
.auth-card { padding: 24px 16px; }
.check-group label { font-size: 11.5px; }
}
/* ================================================================
8. FOOTER — semua halaman
================================================================ */
@media (max-width: 600px) {
footer {
flex-direction: column;
text-align: center;
gap: 8px;
padding: 20px 6%;
}
}