/* ============================================================================
   m3.css — Komponen Material Design 3 · MasterOlimp Panel Siswa

   Ditulis tangan. Berpasangan dengan m3-tokens.css (yang digenerate) dan HARUS
   dimuat sesudahnya.

   Kenapa CSS biasa, bukan pustaka @material/web?
   Pustaka web component resmi Google berstatus "MWC is in maintenance mode
   pending new maintainers", berbasis ESM + bundler, dan akan berebut kendali
   dengan Bootstrap 5.3 JS (modal, dropdown, offcanvas, tooltip) plus Blade,
   jQuery, dan Select2 yang sudah dipakai di sini. Jadi M3 diadopsi sebagai
   SPESIFIKASI: bentuk, ukuran, state layer, elevasi, tipografi, dan motion
   diterapkan dengan CSS di atas markup Bootstrap yang sudah ada — tanpa
   mengubah satu pun pipeline aset.

   Isi berkas:
     1  Bridge variabel Bootstrap
     2  Tipografi
     3  Primitif: state layer, ripple, elevasi, surface tint
     4  Tombol
     5  Tombol ikon · FAB
     6  Button group · segmented button
     7  Chip
     8  Kartu
     9  Daftar (list)
    10  Text field & kontrol formulir
    11  Checkbox · radio · switch
    12  Menu
    13  Dialog
    14  Tab
    15  Progress & loading indicator
    16  Badge · divider · tooltip · snackbar
    17  Search bar
    18  Navigasi: top app bar · drawer · rail · navigation bar
    19  Motion & aksesibilitas
   ============================================================================ */


/* ============================================================
   1 · BRIDGE VARIABEL BOOTSTRAP

   Bootstrap 5.3 menggambar hampir semuanya lewat variabel --bs-*. Dengan
   mengarahkan variabel itu ke role M3, seluruh komponen Bootstrap yang TIDAK
   disentuh berkas ini (alert, table, list-group, accordion, offcanvas, …)
   ikut berwarna M3 dengan sendirinya, dan ikut membalik saat tema berganti.
   Ini juga yang menjaga agar tidak ada satu pun hex tertinggal di markup.
   ============================================================ */
:root {
    --bs-body-font-family: var(--md-sys-typescale-plain);
    --bs-body-font-size: var(--md-sys-typescale-body-medium-size);
    --bs-body-line-height: var(--md-sys-typescale-body-medium-line-height);
    --bs-body-color: var(--md-sys-color-on-surface);
    --bs-body-bg: var(--md-sys-color-surface);
    --bs-emphasis-color: var(--md-sys-color-on-surface);
    --bs-secondary-color: var(--md-sys-color-on-surface-variant);
    --bs-tertiary-color: var(--md-sys-color-on-surface-variant);
    --bs-tertiary-bg: var(--md-sys-color-surface-container);

    --bs-primary: var(--md-sys-color-primary);
    --bs-secondary: var(--md-sys-color-secondary);
    --bs-success: #146c2e;
    --bs-info: var(--md-sys-color-secondary);
    --bs-warning: var(--md-brand-gold-dim);
    --bs-danger: var(--md-sys-color-error);

    --bs-border-color: var(--md-sys-color-outline-variant);
    --bs-border-color-translucent: var(--md-sys-color-outline-variant);
    --bs-border-radius: var(--md-sys-shape-corner-medium);
    --bs-border-radius-sm: var(--md-sys-shape-corner-small);
    --bs-border-radius-lg: var(--md-sys-shape-corner-large);
    --bs-border-radius-xl: var(--md-sys-shape-corner-extra-large);
    --bs-border-radius-pill: var(--md-sys-shape-corner-full);

    --bs-link-color: var(--md-sys-color-primary);
    --bs-link-hover-color: var(--md-sys-color-on-primary-container);

    --bs-focus-ring-color: var(--md-sys-color-primary);
    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: 1;

    --bs-card-bg: var(--md-sys-color-surface-container-low);
    --bs-card-border-color: var(--md-sys-color-outline-variant);
    --bs-card-border-radius: var(--md-sys-shape-corner-medium);

    --bs-heading-color: var(--md-sys-color-on-surface);

    /* Tinggi baku seluruh kontrol, mengikuti M3 penuh. Nilai ini yang dulu
       dipatok 34px oleh desain lama; naik ke 40px berarti target sentuh
       akhirnya memenuhi minimum 48px setelah ditambah area sentuh maya
       (lihat .md-touch di §4). */
    --md-control-height: 40px;
    --md-field-height: 56px;
    --md-touch-target: 48px;
}

/* Bootstrap menghitung beberapa warna dari komponen RGB-nya. Tanpa pasangan
   -rgb ini, utilitas seperti .bg-primary-subtle atau .text-bg-* jatuh ke nilai
   bawaan Bootstrap dan mengeluarkan biru ungu bawaannya, bukan biru logo. */
:root {
    --bs-primary-rgb: 38, 91, 181;
    --bs-secondary-rgb: 75, 95, 131;
    --bs-danger-rgb: 186, 26, 26;
    --bs-warning-rgb: 184, 137, 0;
    --bs-success-rgb: 20, 108, 46;
    --bs-info-rgb: 75, 95, 131;
    --bs-body-color-rgb: 26, 27, 32;
    --bs-body-bg-rgb: 250, 249, 255;
}
[data-theme="dark"] {
    --bs-primary-rgb: 175, 198, 255;
    --bs-secondary-rgb: 179, 199, 241;
    --bs-danger-rgb: 255, 180, 171;
    --bs-warning-rgb: 245, 190, 58;
    --bs-success-rgb: 125, 219, 143;
    --bs-info-rgb: 179, 199, 241;
    --bs-body-color-rgb: 227, 226, 233;
    --bs-body-bg-rgb: 18, 19, 24;
    --bs-success: #7ddb8f;
}


/* ============================================================
   2 · TIPOGRAFI

   Lima belas gaya M3 tersedia sebagai kelas. Heading HTML dipetakan ke gaya
   yang sepadan supaya markup lama ikut benar tanpa disentuh — h4 dan h5 paling
   banyak dipakai di panel ini, keduanya jatuh ke title.
   ============================================================ */
body {
    font-family: var(--md-sys-typescale-plain);
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
    color: var(--md-sys-color-on-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.md-display-large  { font: 400 var(--md-sys-typescale-display-large-size)/var(--md-sys-typescale-display-large-line-height) var(--md-sys-typescale-brand); letter-spacing: var(--md-sys-typescale-display-large-tracking); }
.md-display-medium { font: 400 var(--md-sys-typescale-display-medium-size)/var(--md-sys-typescale-display-medium-line-height) var(--md-sys-typescale-brand); }
.md-display-small  { font: 400 var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-brand); }

.md-headline-large  { font: 400 var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-brand); }
.md-headline-medium { font: 400 var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-brand); }
.md-headline-small  { font: 400 var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-brand); }

.md-title-large  { font: 400 var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-brand); }
.md-title-medium { font: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-plain); letter-spacing: var(--md-sys-typescale-title-medium-tracking); }
.md-title-small  { font: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size)/var(--md-sys-typescale-title-small-line-height) var(--md-sys-typescale-plain); letter-spacing: var(--md-sys-typescale-title-small-tracking); }

.md-body-large  { font: 400 var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-plain); letter-spacing: var(--md-sys-typescale-body-large-tracking); }
.md-body-medium { font: 400 var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-plain); letter-spacing: var(--md-sys-typescale-body-medium-tracking); }
.md-body-small  { font: 400 var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-plain); letter-spacing: var(--md-sys-typescale-body-small-tracking); }

.md-label-large  { font: var(--md-sys-typescale-label-large-weight, 500) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-plain); letter-spacing: var(--md-sys-typescale-label-large-tracking); }
.md-label-medium { font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-plain); letter-spacing: var(--md-sys-typescale-label-medium-tracking); }
.md-label-small  { font: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-plain); letter-spacing: var(--md-sys-typescale-label-small-tracking); }

/* Warna teks per role. */
.md-on-surface         { color: var(--md-sys-color-on-surface); }
.md-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }
.md-primary-text       { color: var(--md-sys-color-primary); }
.md-gold-text          { color: var(--md-brand-on-gold-container); }
[data-theme="dark"] .md-gold-text { color: var(--md-brand-gold-bright); }

/* Heading HTML → gaya M3.
   Bobotnya dinaikkan dari 400 bawaan M3 ke 600: typeface produk ini Inter,
   bukan Roboto, dan pada ukuran judul Inter 400 terbaca lebih ringan daripada
   Roboto 400 — judul jadi kehilangan bobot terhadap isi. */
h1, .h1 { font: 600 var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-brand); letter-spacing: -.01em; }
h2, .h2 { font: 600 var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-brand); letter-spacing: -.01em; }
h3, .h3 { font: 600 var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-brand); }
h4, .h4 { font: 600 1.25rem/1.75rem var(--md-sys-typescale-brand); }
h5, .h5 { font: 600 var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-plain); }
h6, .h6 { font: 600 var(--md-sys-typescale-title-small-size)/var(--md-sys-typescale-title-small-line-height) var(--md-sys-typescale-plain); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--md-sys-color-on-surface); margin-bottom: .5rem; }

small, .small { font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height); }
.text-muted, .text-secondary { color: var(--md-sys-color-on-surface-variant) !important; }

a { color: var(--md-sys-color-primary); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--md-sys-color-on-primary-container); }
[data-theme="dark"] a:hover { color: var(--md-sys-color-primary-container); }

::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }


/* ============================================================
   3 · PRIMITIF

   Tiga hal ini yang membuat sesuatu terasa Material, dan tiga-tiganya belum
   ada di desain sebelumnya:

   STATE LAYER  Elemen interaktif tidak mengganti warna latarnya sendiri saat
                disentuh. Ia menumpuk lapisan currentColor beropasitas tetap
                (8% hover · 12% fokus · 12% tekan). Satu aturan, berlaku untuk
                semua — jadi tombol, item daftar, chip, dan menu bereaksi
                dengan cara yang persis sama.

   RIPPLE       Gelombang yang berangkat dari titik sentuh. Dipasang oleh
                helper kecil di master.blade.php, bukan CSS murni, karena
                posisi awalnya baru diketahui saat ditekan.

   SURFACE TINT Permukaan yang terangkat tidak cuma berbayang: nadanya ikut
                bergeser ke arah primary sebesar 0–14% menurut levelnya.
   ============================================================ */
.md-state {
    position: relative;
    isolation: isolate;
}
.md-state::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-state:hover::after           { opacity: var(--md-sys-state-hover-opacity); }
.md-state:focus-visible::after   { opacity: var(--md-sys-state-focus-opacity); }
.md-state:active::after          { opacity: var(--md-sys-state-pressed-opacity); }
.md-state.is-selected::after,
.md-state[aria-selected="true"]::after,
.md-state[aria-current="page"]::after { opacity: 0; }
.md-state:disabled::after,
.md-state.disabled::after        { opacity: 0 !important; }

/* Ripple. Elemennya disuntik JS; CSS hanya menggambar dan meluruhkannya. */
.md-ripple-host { position: relative; overflow: hidden; }
.md-ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: .16;
    transform: scale(0);
    pointer-events: none;
    animation: md-ripple-expand var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}
@keyframes md-ripple-expand {
    to { transform: scale(1); opacity: 0; }
}

/* Elevasi. Bayangan dan tint selalu dipasang berpasangan: di M3 keduanya
   adalah satu isyarat ketinggian yang sama, bukan dua efek terpisah. */
.md-elevation-0 { box-shadow: var(--md-sys-elevation-level0); }
.md-elevation-1 { box-shadow: var(--md-sys-elevation-level1); }
.md-elevation-2 { box-shadow: var(--md-sys-elevation-level2); }
.md-elevation-3 { box-shadow: var(--md-sys-elevation-level3); }
.md-elevation-4 { box-shadow: var(--md-sys-elevation-level4); }
.md-elevation-5 { box-shadow: var(--md-sys-elevation-level5); }

/* Surface tint sebagai latar siap pakai: campuran surface + primary sesuai
   level. color-mix() didukung semua peramban sasaran (Chrome 111+, Safari
   16.2+, Firefox 113+); nilai cadangannya permukaan polos. */
.md-surface-tint-1 { background: var(--md-sys-color-surface-container-low); background: color-mix(in srgb, var(--md-sys-color-surface-tint) 5%, var(--md-sys-color-surface)); }
.md-surface-tint-2 { background: var(--md-sys-color-surface-container); background: color-mix(in srgb, var(--md-sys-color-surface-tint) 8%, var(--md-sys-color-surface)); }
.md-surface-tint-3 { background: var(--md-sys-color-surface-container-high); background: color-mix(in srgb, var(--md-sys-color-surface-tint) 11%, var(--md-sys-color-surface)); }

/* Permukaan bertingkat sebagai utilitas — dipakai halaman untuk memilih
   bidang tanpa menghafal nama role. */
.md-surface          { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); }
.md-surface-lowest   { background: var(--md-sys-color-surface-container-lowest); }
.md-surface-low      { background: var(--md-sys-color-surface-container-low); }
.md-surface-container{ background: var(--md-sys-color-surface-container); }
.md-surface-high     { background: var(--md-sys-color-surface-container-high); }
.md-surface-highest  { background: var(--md-sys-color-surface-container-highest); }

/* Cincin fokus M3: garis di LUAR elemen, bukar bayangan lembut. Dipakai satu
   kali untuk semua kontrol agar navigasi papan ketik selalu terbaca. */
.md-state:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    box-shadow: none;
}


/* ============================================================
   4 · TOMBOL

   Lima varian baku M3. Tinggi 40px, sudut penuh (pil), label label-large,
   ikon 18px, jarak label–ikon 8px.

   Bentuk pil itu perubahan paling kentara dari desain lama (radius 0.65rem).
   Ia disengaja: di M3 sudut penuh adalah penanda "ini bisa ditekan", yang
   membedakan tombol dari kartu dan bidang di sekitarnya tanpa perlu warna.
   ============================================================ */
.btn,
.md-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--md-control-height);
    padding: 0 24px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large-weight, 500) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-plain);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.btn::after,
.md-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.btn:hover::after,          .md-btn:hover::after          { opacity: var(--md-sys-state-hover-opacity); }
.btn:focus-visible::after,  .md-btn:focus-visible::after  { opacity: var(--md-sys-state-focus-opacity); }
.btn:active::after,         .md-btn:active::after         { opacity: var(--md-sys-state-pressed-opacity); }

/* Ikon di dalam tombol. Bootstrap Icons dipakai sebagai <i>, jadi ukurannya
   diatur di sini alih-alih di tiap pemanggilan. */
.btn > .bi, .md-btn > .bi { font-size: 18px; line-height: 1; }

/* Tombol yang lebih pendek dari 48px tetap wajib punya area sentuh 48px.
   Ditambahkan sebagai kotak maya, bukan dengan membesarkan tombolnya — jadi
   tata letak tidak berubah tapi jempol tetap kebagian ruang. */
.btn::before, .md-btn::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--md-touch-target);
    min-height: 100%;
}

/* ── Filled (default) · aksi paling penting di layar ── */
.md-btn-filled,
.btn-primary {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-level0);
}
.md-btn-filled:hover, .btn-primary:hover {
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-level1);
}
.md-btn-filled:active, .btn-primary:active { box-shadow: var(--md-sys-elevation-level0); }

/* ── Filled tertiary · GOLD (varian "strong") ──
   Inilah tombol aksi utama produk ini (Kerjakan / Beli / Tukar). Dibuat lebih
   GELAP & TEGAS: gold tone 46 (#8F6600) dengan TEKS PUTIH, rasio 5,2:1 — bukan
   gold terang tone 70 dengan teks gelap yang dulu terbaca kurang mantap sebagai
   tombol besar. Sama di kedua tema, seperti role `*-fixed` milik M3.
   (Gold terang tone 70 tetap dipakai untuk aksen non-tombol: hero, badge,
   penanda sidebar aktif — lihat --md-brand-gold.) */
.md-btn-gold,
.btn-gold,
.btn-warning,
.btn-action-primary {
    background: var(--md-brand-gold-strong);
    color: var(--md-brand-on-gold-strong);
    box-shadow: var(--md-sys-elevation-level0);
}
.md-btn-gold:hover, .btn-gold:hover, .btn-warning:hover, .btn-action-primary:hover {
    color: var(--md-brand-on-gold-strong);
    box-shadow: var(--md-sys-elevation-level1);
}
.md-btn-gold > .bi, .btn-gold > .bi, .btn-action-primary > .bi { color: inherit; }

/* ── Filled tonal · aksi pendukung yang tetap perlu bidang ── */
.md-btn-tonal,
.btn-secondary,
.btn-soft-primary {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.md-btn-tonal:hover, .btn-secondary:hover, .btn-soft-primary:hover {
    color: var(--md-sys-color-on-secondary-container);
    box-shadow: var(--md-sys-elevation-level1);
}
.md-btn-tonal-gold,
.btn-soft-gold {
    background: var(--md-brand-gold-container);
    color: var(--md-brand-on-gold-container);
}
.md-btn-tonal-gold:hover, .btn-soft-gold:hover { color: var(--md-brand-on-gold-container); box-shadow: var(--md-sys-elevation-level1); }
[data-theme="dark"] .md-btn-tonal-gold,
[data-theme="dark"] .btn-soft-gold { background: var(--md-brand-on-gold-container); color: var(--md-brand-gold-container); }

/* ── Elevated · dipakai saat tombol duduk di atas bidang yang ramai ── */
.md-btn-elevated {
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level1);
}
.md-btn-elevated:hover { color: var(--md-sys-color-primary); box-shadow: var(--md-sys-elevation-level2); }

/* ── Outlined · aksi sekunder ── */
.md-btn-outlined,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
    background: transparent;
    color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}
.md-btn-outlined:hover, .btn-outline-primary:hover,
.btn-outline-secondary:hover, .btn-outline-dark:hover {
    background: transparent;
    color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}
.md-btn-outlined:focus-visible, .btn-outline-primary:focus-visible {
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

/* ── Text · aksi paling ringan; jadi tombol baku di dalam dialog ── */
.md-btn-text,
.btn-link,
.btn-light {
    background: transparent;
    color: var(--md-sys-color-primary);
    padding: 0 12px;
    text-decoration: none;
}
.md-btn-text:hover, .btn-link:hover, .btn-light:hover {
    background: transparent;
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

/* ── Varian semantik ── */
.btn-success { background: var(--bs-success); color: #fff; }
.btn-success:hover { color: #fff; }
[data-theme="dark"] .btn-success { color: #00390f; }
.btn-danger  { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.btn-danger:hover { color: var(--md-sys-color-on-error); }
.btn-outline-danger {
    background: transparent;
    color: var(--md-sys-color-error);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-error);
}
.btn-outline-danger:hover { background: transparent; color: var(--md-sys-color-error); }
.btn-info { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-dark { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); }

/* ── Nonaktif · satu resep untuk semua varian ── */
.btn:disabled, .btn.disabled, .md-btn:disabled, fieldset:disabled .btn {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) !important;
    box-shadow: none !important;
    opacity: 1;
    pointer-events: none;
}
.btn-outline-primary:disabled, .btn-outline-secondary:disabled, .md-btn-outlined:disabled {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
}
.btn-link:disabled, .md-btn-text:disabled { background: transparent !important; }

/* ── Ukuran ──
   M3 tidak punya "tombol kecil"; yang ada hanya kepadatan berbeda. .btn-sm
   dipetakan ke tombol 40px berpadding lebih rapat supaya markup lama tetap
   jalan tanpa melanggar target sentuh. .btn-lg menjadi tombol 56px. */
.btn-sm { min-height: var(--md-control-height); padding: 0 16px; font-size: var(--md-sys-typescale-label-large-size); }
.btn-lg { min-height: 56px; padding: 0 32px; font-size: var(--md-sys-typescale-title-medium-size); }
.btn-block, .btn.w-100 { width: 100%; }

/* Tombol berikon di kiri: padding sisi ikon dipersempit 16px sesuai spesifikasi. */
.md-btn-icon-leading { padding-left: 16px; }


/* ============================================================
   5 · TOMBOL IKON & FAB
   ============================================================ */
.md-icon-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-icon-btn > .bi { font-size: 22px; line-height: 1; }
.md-icon-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-icon-btn:hover::after         { opacity: var(--md-sys-state-hover-opacity); }
.md-icon-btn:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); }
.md-icon-btn:active::after        { opacity: var(--md-sys-state-pressed-opacity); }
/* Area sentuh 48px tanpa membesarkan lingkarannya. */
.md-icon-btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--md-touch-target);
    height: var(--md-touch-target);
}
.md-icon-btn--filled   { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.md-icon-btn--tonal    { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.md-icon-btn--gold     { background: var(--md-brand-gold); color: var(--md-brand-on-gold); }
.md-icon-btn--outlined { box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }
.md-icon-btn:disabled  { color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); pointer-events: none; }

.md-fab {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: var(--md-sys-elevation-level3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-fab > .bi { font-size: 24px; line-height: 1; }
.md-fab::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: currentColor; opacity: 0; pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-fab:hover::after         { opacity: var(--md-sys-state-hover-opacity); }
.md-fab:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); }
.md-fab:active::after        { opacity: var(--md-sys-state-pressed-opacity); }
.md-fab:hover { box-shadow: var(--md-sys-elevation-level4); }
.md-fab--small    { width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-medium); }
.md-fab--large    { width: 96px; height: 96px; border-radius: var(--md-sys-shape-corner-extra-large); }
.md-fab--large > .bi { font-size: 36px; }
.md-fab--gold     { background: var(--md-brand-gold); color: var(--md-brand-on-gold); }
.md-fab--extended { width: auto; min-width: 80px; height: 56px; padding: 0 20px;
    font: var(--md-sys-typescale-label-large-weight, 500) var(--md-sys-typescale-label-large-size)/1 var(--md-sys-typescale-plain); }


/* ============================================================
   6 · BUTTON GROUP & SEGMENTED BUTTON

   Segmented button dipakai untuk pilihan yang saling meniadakan dan jumlahnya
   sedikit (2–5) — di panel ini: tab jenis konten dan kontrol perbesaran teks
   di halaman kerjakan soal.
   ============================================================ */
.md-segmented,
.btn-group {
    display: inline-flex;
    border-radius: var(--md-sys-shape-corner-full);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}
.md-segmented > .btn,
.md-segmented > .md-btn,
.btn-group > .btn {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    padding: 0 12px;
    flex: 1 1 auto;
}
.md-segmented > .btn + .btn,
.btn-group > .btn + .btn { box-shadow: inset 1px 0 0 var(--md-sys-color-outline); }
.md-segmented > .btn.active,
.md-segmented > .btn[aria-pressed="true"],
.btn-group > .btn.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
/* Tombol pertama & terakhir tetap ikut lengkung pembungkusnya. */
.md-segmented > :first-child, .btn-group > :first-child { border-radius: var(--md-sys-shape-corner-full) 0 0 var(--md-sys-shape-corner-full); }
.md-segmented > :last-child,  .btn-group > :last-child  { border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0; }
.md-segmented > :only-child,  .btn-group > :only-child  { border-radius: var(--md-sys-shape-corner-full); }


/* ============================================================
   7 · CHIP

   Empat jenis M3 dipetakan ke dua kebutuhan nyata di panel ini: chip filter
   (bisa terpilih) dan chip assist/keterangan (tidak bisa ditekan). Badge
   Bootstrap ikut dipetakan ke sini supaya status di kartu memakai bahasa
   bentuk yang sama.
   ============================================================ */
.md-chip {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: var(--md-sys-shape-corner-small);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large-weight, 500) var(--md-sys-typescale-label-large-size)/1 var(--md-sys-typescale-plain);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-chip > .bi { font-size: 18px; line-height: 1; }
a.md-chip, button.md-chip { cursor: pointer; }
a.md-chip::after, button.md-chip::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: currentColor; opacity: 0; pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
a.md-chip:hover::after, button.md-chip:hover::after { opacity: var(--md-sys-state-hover-opacity); }
a.md-chip:active::after, button.md-chip:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.md-chip--selected,
.md-chip[aria-selected="true"] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    box-shadow: none;
}
.md-chip--gold  { background: var(--md-brand-gold-container); color: var(--md-brand-on-gold-container); box-shadow: none; }
.md-chip--error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); box-shadow: none; }
.md-chip--elevated { box-shadow: var(--md-sys-elevation-level1); background: var(--md-sys-color-surface-container-low); }

/* Badge Bootstrap → chip padat M3. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-plain);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
.badge.bg-primary   { background: var(--md-sys-color-primary-container) !important;   color: var(--md-sys-color-on-primary-container); }
.badge.bg-secondary { background: var(--md-sys-color-secondary-container) !important; color: var(--md-sys-color-on-secondary-container); }
.badge.bg-warning   { background: var(--md-brand-gold-container) !important;          color: var(--md-brand-on-gold-container); }
.badge.bg-danger    { background: var(--md-sys-color-error-container) !important;     color: var(--md-sys-color-on-error-container); }
.badge.bg-success   { background: #b8f1c0 !important;                                  color: #002107; }
.badge.bg-info      { background: var(--md-sys-color-secondary-container) !important; color: var(--md-sys-color-on-secondary-container); }
.badge.bg-light     { background: var(--md-sys-color-surface-container-high) !important; color: var(--md-sys-color-on-surface-variant); }
.badge.bg-dark      { background: var(--md-sys-color-inverse-surface) !important;     color: var(--md-sys-color-inverse-on-surface); }
[data-theme="dark"] .badge.bg-success { background: #29532f !important; color: #b8f1c0; }

/* Varian "soft" milik desain lama tetap dikenali — dipakai puluhan kali di
   markup halaman, dan di M3 semuanya memang jatuh ke pasangan *-container. */
.badge-soft-primary   { background: var(--md-sys-color-primary-container);   color: var(--md-sys-color-on-primary-container); }
.badge-soft-secondary { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.badge-soft-success   { background: #b8f1c0; color: #002107; }
.badge-soft-warning   { background: var(--md-brand-gold-container);          color: var(--md-brand-on-gold-container); }
.badge-soft-danger    { background: var(--md-sys-color-error-container);     color: var(--md-sys-color-on-error-container); }
.badge-soft-info      { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.badge-soft-dark      { background: var(--md-sys-color-inverse-surface);     color: var(--md-sys-color-inverse-on-surface); }
.badge-soft-primary, .badge-soft-secondary, .badge-soft-success, .badge-soft-warning,
.badge-soft-danger, .badge-soft-info, .badge-soft-dark {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-plain);
}
[data-theme="dark"] .badge-soft-success { background: #29532f; color: #b8f1c0; }

/* Badge angka M3 (yang menempel di ikon navigasi). */
.md-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-error); color: var(--md-sys-color-on-error);
    font: 500 11px/1 var(--md-sys-typescale-plain);
}
.md-badge--dot { min-width: 6px; width: 6px; height: 6px; padding: 0; }


/* ============================================================
   8 · KARTU

   Tiga varian M3. Yang dipakai sebagai baku di panel ini adalah OUTLINED:
   halamannya padat berisi daftar, dan pada bidang seramai itu garis tipis
   memisahkan lebih tenang daripada bayangan yang bertumpuk-tumpuk.
   ============================================================ */
.card,
.md-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level0);
    transition: box-shadow var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
}
.md-card--elevated {
    background: var(--md-sys-color-surface-container-low);
    border-color: transparent;
    box-shadow: var(--md-sys-elevation-level1);
}
.md-card--elevated:hover { box-shadow: var(--md-sys-elevation-level2); }
.md-card--filled {
    background: var(--md-sys-color-surface-container-highest);
    border-color: transparent;
}
.md-card--outlined { background: var(--md-sys-color-surface); border-color: var(--md-sys-color-outline-variant); }

/* Kartu yang seluruhnya bisa ditekan mendapat state layer + naik satu level. */
.md-card--interactive { cursor: pointer; isolation: isolate; }
.md-card--interactive::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: var(--md-sys-color-on-surface); opacity: 0; pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-card--interactive:hover::after { opacity: var(--md-sys-state-hover-opacity); }
.md-card--interactive:hover { box-shadow: var(--md-sys-elevation-level1); }

.card-body   { padding: 16px; }
.card-header {
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-plain);
    border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0;
}
.card-footer {
    padding: 12px 16px;
    background: transparent;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0 0 var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium);
}
.card-title    { font: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface); }
.card-subtitle { font: 400 var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface-variant); }
.card-text     { color: var(--md-sys-color-on-surface-variant); }


/* ============================================================
   9 · DAFTAR (LIST)

   Tinggi baku M3: 56px satu baris, 72px dua baris, 88px tiga baris. Padding
   sisi 16px. Elemen pemimpin (avatar/ikon) 40px, elemen penutup di kanan.
   ============================================================ */
.md-list { display: flex; flex-direction: column; margin: 0; padding: 8px 0; list-style: none; }
.md-list-item {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px 16px;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}
.md-list-item--two-line   { min-height: 72px; }
.md-list-item--three-line { min-height: 88px; align-items: flex-start; }
a.md-list-item, button.md-list-item, .md-list-item--interactive { cursor: pointer; }
a.md-list-item::after, button.md-list-item::after, .md-list-item--interactive::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: currentColor; opacity: 0; pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
a.md-list-item:hover::after, button.md-list-item:hover::after, .md-list-item--interactive:hover::after { opacity: var(--md-sys-state-hover-opacity); }
a.md-list-item:active::after, button.md-list-item:active::after, .md-list-item--interactive:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.md-list-item-leading {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 20px;
}
.md-list-item-leading--gold { background: var(--md-brand-gold-container); color: var(--md-brand-on-gold-container); }
.md-list-item-body     { flex: 1 1 auto; min-width: 0; }
.md-list-item-headline { font: 400 var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface); }
.md-list-item-supporting { font: 400 var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-plain); color: var(--md-sys-color-on-surface-variant); }
.md-list-item-trailing { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/1 var(--md-sys-typescale-plain); }

/* list-group Bootstrap ikut memakai bahasa yang sama. */
.list-group { border-radius: var(--md-sys-shape-corner-medium); }
.list-group-item {
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline-variant);
    padding: 12px 16px;
    min-height: 56px;
}
.list-group-item-action:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface)); color: var(--md-sys-color-on-surface); }
.list-group-item.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }


/* ============================================================
   10 · TEXT FIELD & KONTROL FORMULIR

   Varian baku M3 adalah OUTLINED: tinggi 56px, sudut 4px, garis 1px yang
   menebal jadi 2px dan berwarna primary saat fokus.

   Label mengambang tidak dipakai. Ia menuntut markup khusus (label harus
   BERSAUDARA dengan input, di dalam pembungkus) — sedangkan formulir di panel
   ini menempatkan label di atas kolom, dan sebagian kolom dirakit runtime oleh
   JS di halaman kerjakan soal. Label di atas kolom tetap sah di M3 dan tidak
   memaksa satu pun markup lama berubah.
   ============================================================ */
.form-control,
.form-select,
.md-field {
    display: block;
    width: 100%;
    min-height: var(--md-field-height);
    padding: 16px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    font: 400 var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-plain);
    box-shadow: none;
    transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.form-control::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
.form-control:focus,
.form-select:focus,
.md-field:focus {
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    padding: 15px;                 /* tebal garis naik 1px → padding turun 1px, tinggi tetap */
    box-shadow: none;
    outline: none;
}
.form-control:disabled, .form-select:disabled {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
    border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--md-sys-color-error);
    background-image: none;
}
textarea.form-control { min-height: 96px; line-height: 1.5; }
.form-control-sm, .form-select-sm { min-height: var(--md-control-height); padding: 8px 12px; font-size: var(--md-sys-typescale-body-medium-size); }

.form-select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23424754' d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c3c6d6' d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
}

.form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large-weight, 500) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-plain);
}
.form-text, .invalid-feedback, .valid-feedback {
    margin-top: 4px; padding: 0 16px;
    font: 400 var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-plain);
    color: var(--md-sys-color-on-surface-variant);
}
.invalid-feedback { color: var(--md-sys-color-error); }

/* Input group: garisnya satu kesatuan dengan kolomnya. */
.input-group > .form-control, .input-group > .form-select { border-radius: var(--md-sys-shape-corner-extra-small); }
.input-group-text {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    padding: 0 16px;
}


/* ============================================================
   11 · CHECKBOX · RADIO · SWITCH

   Ukuran kotak/lingkaran 18px sesuai M3, tetapi area sentuhnya dilebarkan ke
   48px lewat kotak maya — penting karena kontrol inilah yang paling banyak
   ditekan siswa: setiap opsi jawaban di halaman kerjakan soal.
   ============================================================ */
.form-check { padding-left: 30px; min-height: var(--md-touch-target); display: flex; align-items: center; }
.form-check-input {
    position: relative;
    /* `.form-check` di atas berupa flex, jadi kotak centang IKUT menyusut saat
       labelnya panjang — pada persetujuan kamera di halaman persiapan ujian
       (label tiga baris) ia menciut menjadi garis tipis yang tidak lagi
       terbaca sebagai kotak centang. Lebarnya dikunci di sini. */
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-left: -30px; margin-top: 0;
    background: transparent;
    border: 2px solid var(--md-sys-color-on-surface-variant);
    box-shadow: none;
    transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.form-check-input[type="checkbox"] { border-radius: 2px; }
.form-check-input[type="radio"]    { border-radius: var(--md-sys-shape-corner-full); }
.form-check-input:checked {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}
.form-check-input[type="radio"]:checked {
    background-color: transparent;
    background-image: none;
    box-shadow: inset 0 0 0 4px var(--md-sys-color-primary);
}
.form-check-input:focus { border-color: var(--md-sys-color-primary); box-shadow: none; }
.form-check-input::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--md-touch-target); height: var(--md-touch-target);
    border-radius: var(--md-sys-shape-corner-full);
}
.form-check-label { padding-left: 4px; color: var(--md-sys-color-on-surface); cursor: pointer; }

/* Switch M3: rel 52×32, kenop 24 saat menyala dan 16 saat mati. */
.form-switch { padding-left: 60px; }
.form-switch .form-check-input {
    width: 52px; height: 32px;
    margin-left: -60px;
    border-radius: var(--md-sys-shape-corner-full);
    border: 2px solid var(--md-sys-color-outline);
    background-color: var(--md-sys-color-surface-container-highest);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23727785'/%3E%3C/svg%3E");
    background-position: left 6px center;
    background-size: 16px;
}
.form-switch .form-check-input:checked {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    background-position: right 4px center;
    background-size: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3.5' fill='%23ffffff'/%3E%3C/svg%3E");
}


/* ============================================================
   12 · MENU
   ============================================================ */
.dropdown-menu {
    min-width: 112px;
    padding: 8px 0;
    background: var(--md-sys-color-surface-container);
    border: none;
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow: var(--md-sys-elevation-level2);
    color: var(--md-sys-color-on-surface);
}
.dropdown-item {
    position: relative;
    isolation: isolate;
    display: flex; align-items: center; gap: 12px;
    min-height: 48px;
    padding: 0 12px;
    color: var(--md-sys-color-on-surface);
    font: 400 var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-plain);
}
.dropdown-item::after {
    content: ''; position: absolute; inset: 0;
    background: currentColor; opacity: 0; pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.dropdown-item:hover, .dropdown-item:focus { background: transparent; color: var(--md-sys-color-on-surface); }
.dropdown-item:hover::after  { opacity: var(--md-sys-state-hover-opacity); }
.dropdown-item:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.dropdown-item.active, .dropdown-item:active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.dropdown-item > .bi { font-size: 20px; color: var(--md-sys-color-on-surface-variant); }
.dropdown-divider { border-top: 1px solid var(--md-sys-color-outline-variant); margin: 8px 0; opacity: 1; }
.dropdown-header { padding: 8px 12px; color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size)/1.4 var(--md-sys-typescale-plain); }


/* ============================================================
   13 · DIALOG
   ============================================================ */
.modal-content {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    border: none;
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-level3);
}
.modal-header {
    padding: 24px 24px 16px;
    border-bottom: none;
    align-items: flex-start;
}
.modal-title {
    font: 400 var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-brand);
    color: var(--md-sys-color-on-surface);
}
.modal-body {
    padding: 0 24px 24px;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-plain);
}
.modal-footer {
    padding: 8px 24px 24px;
    border-top: none;
    justify-content: flex-end;
    gap: 8px;
}
.modal-footer > * { margin: 0; }
.modal-backdrop { background: var(--md-sys-color-scrim); }
.modal-backdrop.show { opacity: .32; }
/* Tombol Tutup (X) tiap modal — MERAH di seluruh aplikasi siswa, bukan abu-abu
   baku Bootstrap. Ikonnya sendiri SVG bawaan Bootstrap berwarna hitam mati
   (fill di dalam data-URI, bukan currentColor), jadi tak bisa diwarnai lewat
   --bs-btn-close-color biasa — dicat ulang lewat mask (bentuknya dari SVG yang
   sama, warnanya dari background-color) supaya otomatis ikut token error tema
   gelap/terang tanpa perlu filter invert terpisah untuk dark mode. */
.btn-close {
    --btn-close-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background: none;
    -webkit-mask-image: var(--btn-close-svg);
    mask-image: var(--btn-close-svg);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 1em auto; mask-size: 1em auto;
    background-color: var(--md-sys-color-error);
    opacity: .85;
    border-radius: var(--md-sys-shape-corner-full);
    width: 40px; height: 40px; padding: 0;
}
.btn-close:hover, .btn-close:focus-visible { opacity: 1; }

/* Offcanvas ikut bahasa dialog. */
.offcanvas {
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    border: none;
}
.offcanvas-header { padding: 16px 24px; }
.offcanvas-title { font: 400 var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-brand); }


/* ============================================================
   14 · TAB
   ============================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    gap: 0;
}
.nav-tabs .nav-link {
    position: relative;
    isolation: isolate;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size)/var(--md-sys-typescale-title-small-line-height) var(--md-sys-typescale-plain);
}
.nav-tabs .nav-link::after {
    content: ''; position: absolute; inset: 0;
    background: currentColor; opacity: 0; pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.nav-tabs .nav-link:hover::after { opacity: var(--md-sys-state-hover-opacity); }
.nav-tabs .nav-link:hover { border: none; color: var(--md-sys-color-on-surface); }
.nav-tabs .nav-link.active {
    background: transparent;
    border: none;
    color: var(--md-sys-color-primary);
}
/* Indikator 3px bersudut penuh — ciri paling khas tab M3. */
.nav-tabs .nav-link.active::before {
    content: '';
    position: absolute;
    left: 8px; right: 8px; bottom: 0;
    height: 3px;
    border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0;
    background: var(--md-sys-color-primary);
}
.nav-pills .nav-link {
    min-height: var(--md-control-height);
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large-weight, 500) var(--md-sys-typescale-label-large-size)/1 var(--md-sys-typescale-plain);
    display: inline-flex; align-items: center; gap: 8px; padding: 0 16px;
}
.nav-pills .nav-link.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }


/* ============================================================
   15 · PROGRESS & LOADING INDICATOR
   ============================================================ */
.progress, .md-progress-linear {
    height: 4px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-secondary-container);
    overflow: hidden;
}
.progress-bar, .md-progress-linear > .md-progress-value {
    background: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-full);
    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}
.progress-bar.bg-warning, .md-progress-linear--gold > .md-progress-value { background: var(--md-brand-gold); }
.progress-bar.bg-danger { background: var(--md-sys-color-error); }

/* Spinner Bootstrap → circular progress M3 (garis 4px, primary). */
.spinner-border {
    width: 40px; height: 40px;
    border-width: 4px;
    border-color: var(--md-sys-color-primary);
    border-right-color: transparent;
    animation-duration: var(--md-sys-motion-duration-extra-long2);
}
.spinner-border-sm { width: 20px; height: 20px; border-width: 2px; }

/* Loading indicator M3 Expressive: bentuk yang berubah-ubah, bukan cincin
   berputar. Dipakai untuk tunggu singkat (<5 detik) seperti hasil filter. */
.md-loading {
    width: 48px; height: 48px;
    background: var(--md-sys-color-primary);
    animation: md-loading-morph var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-emphasized) infinite,
               md-loading-spin 2s linear infinite;
}
@keyframes md-loading-morph {
    0%, 100% { border-radius: 50%; }
    25%      { border-radius: 42% 58% 38% 62% / 55% 40% 60% 45%; }
    50%      { border-radius: 30%; }
    75%      { border-radius: 58% 42% 62% 38% / 40% 55% 45% 60%; }
}
@keyframes md-loading-spin { to { transform: rotate(360deg); } }


/* ============================================================
   16 · DIVIDER · TOOLTIP · SNACKBAR · ALERT
   ============================================================ */
hr, .md-divider {
    border: none;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    opacity: 1;
    margin: 8px 0;
}

.tooltip-inner {
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    border-radius: var(--md-sys-shape-corner-extra-small);
    padding: 4px 8px;
    font: 400 var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-plain);
}
.tooltip .tooltip-arrow::before { border-top-color: var(--md-sys-color-inverse-surface); }

.md-snackbar {
    display: flex; align-items: center; gap: 8px;
    min-height: 48px;
    padding: 8px 8px 8px 16px;
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow: var(--md-sys-elevation-level3);
    font: 400 var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-plain);
}
.md-snackbar .md-btn-text { color: var(--md-sys-color-inverse-primary); }

/* Alert Bootstrap → bidang *-container M3. */
.alert {
    padding: 12px 16px;
    border: none;
    border-radius: var(--md-sys-shape-corner-medium);
    font: 400 var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-plain);
}
.alert-primary   { background: var(--md-sys-color-primary-container);   color: var(--md-sys-color-on-primary-container); }
.alert-secondary { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.alert-info      { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.alert-warning   { background: var(--md-brand-gold-container);          color: var(--md-brand-on-gold-container); }
.alert-danger    { background: var(--md-sys-color-error-container);     color: var(--md-sys-color-on-error-container); }
.alert-success   { background: #b8f1c0; color: #002107; }
[data-theme="dark"] .alert-success { background: #29532f; color: #b8f1c0; }
.alert-light, .alert-dark { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }


/* ============================================================
   17 · SEARCH BAR

   Bentuk pil 56px. Ini komponen M3 tersendiri, bukan text field bersudut
   penuh: bidangnya surface-container dan tidak bergaris.
   ============================================================ */
.md-search-bar {
    display: flex; align-items: center; gap: 12px;
    min-height: var(--md-field-height);
    padding: 0 8px 0 16px;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-full);
}
.md-search-bar > .bi { font-size: 22px; color: var(--md-sys-color-on-surface-variant); flex: 0 0 auto; }
.md-search-bar > input,
.md-search-bar > .form-control {
    flex: 1 1 auto; min-width: 0;
    min-height: auto; padding: 0;
    background: transparent; border: none; border-radius: 0;
    color: var(--md-sys-color-on-surface);
    font: 400 var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-plain);
}
.md-search-bar > input:focus,
.md-search-bar > .form-control:focus { border: none; padding: 0; outline: none; box-shadow: none; background: transparent; }
.md-search-bar:focus-within { outline: 2px solid var(--md-sys-color-primary); outline-offset: 0; }


/* ============================================================
   18 · NAVIGASI

   Empat komponen navigasi M3, dipakai bersama-sama oleh shell panel:
     top app bar     bar atas 64px
     nav drawer      rel kiri di layar lebar, panel geser di layar sempit
     nav rail        drawer versi ringkas (opsional)
     navigation bar  bar bawah 80px di layar sempit

   Drawer SENGAJA tetap navy di kedua tema — sama seperti logo di kepalanya.
   Warnanya diambil dari --md-brand-navy, yaitu tone rendah palet secondary,
   jadi tetap satu keluarga dengan seluruh skema.
   ============================================================ */

/* ── Top app bar ── */
.md-top-app-bar {
    display: flex; align-items: center; gap: 8px;
    height: 64px;
    padding: 0 8px 0 12px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
/* Saat halaman digulir, bar naik ke surface-container — isyarat M3 bahwa ada
   isi yang lewat di bawahnya. Kelasnya dipasang oleh skrip di master. */
.md-top-app-bar.is-scrolled {
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--md-sys-elevation-level2);
}
.md-top-app-bar-title {
    flex: 1 1 auto; min-width: 0;
    font: 400 var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-brand);
    color: var(--md-sys-color-on-surface);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Navigation drawer ── */
.md-nav-drawer {
    display: flex; flex-direction: column;
    width: 280px;
    background: var(--md-brand-navy);
    background-image: var(--md-brand-grad-navy);
    color: var(--md-brand-on-navy);
}
.md-nav-drawer-header {
    display: flex; align-items: center; gap: 12px;
    height: 64px; padding: 0 16px; flex: 0 0 auto;
}
.md-nav-drawer-section {
    padding: 0 12px 8px;
}
.md-nav-drawer-label {
    padding: 18px 16px 8px;
    color: var(--md-brand-on-navy-variant);
    font: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size)/1 var(--md-sys-typescale-plain);
}
/* Item drawer M3: tinggi 56, sudut PENUH, ikon 24, label label-large.
   Sudut penuh inilah penanda item terpilih di M3 — bukan garis aksen di tepi
   seperti desain lama. */
.md-nav-item {
    position: relative;
    isolation: isolate;
    display: flex; align-items: center; gap: 12px;
    height: 56px;
    padding: 0 24px 0 16px;
    margin-bottom: 4px;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-brand-on-navy-variant);
    text-decoration: none;
    font: var(--md-sys-typescale-label-large-weight, 500) var(--md-sys-typescale-label-large-size)/1 var(--md-sys-typescale-plain);
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-nav-item > .bi { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.md-nav-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-nav-item::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: currentColor; opacity: 0; pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-nav-item:hover::after  { opacity: var(--md-sys-state-hover-opacity); }
.md-nav-item:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.md-nav-item:hover { color: var(--md-brand-on-navy); }
/* Item aktif = indikator gold. Gold dipakai di sini, bukan biru, karena
   drawer-nya sendiri sudah navy-biru: aksen emas adalah satu-satunya warna
   yang menonjol dari bidang itu tanpa perlu dinaikkan terangnya. */
.md-nav-item.active,
.md-nav-item[aria-current="page"] {
    background: var(--md-brand-gold);
    color: var(--md-brand-on-gold);
}
.md-nav-item.active::after, .md-nav-item[aria-current="page"]::after { opacity: 0; }
.md-nav-item .md-badge { margin-left: auto; }

/* ── Navigation rail (drawer ringkas) ── */
.md-nav-rail { width: 80px; align-items: center; }
.md-nav-rail .md-nav-item {
    flex-direction: column; justify-content: center; gap: 4px;
    height: 56px; width: 56px; padding: 0;
    border-radius: var(--md-sys-shape-corner-large);
}
.md-nav-rail .md-nav-item-label { display: none; }

/* ── Navigation bar (bawah, layar sempit) ── */
.md-nav-bar {
    display: flex; align-items: stretch;
    height: 80px;
    background: var(--md-sys-color-surface-container);
    padding: 12px 8px 16px;
}
.md-nav-bar-item {
    position: relative;
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 0;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-plain);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
    -webkit-tap-highlight-color: transparent;
}
/* Indikator pil 64×32 di belakang ikon — bentuk khas navigation bar M3. */
.md-nav-bar-icon {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 32px;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: 24px;
    transition: background-color var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}
.md-nav-bar-icon::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: currentColor; opacity: 0; pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-nav-bar-item:hover .md-nav-bar-icon::after  { opacity: var(--md-sys-state-hover-opacity); }
.md-nav-bar-item:active .md-nav-bar-icon::after { opacity: var(--md-sys-state-pressed-opacity); }
.md-nav-bar-item.active { color: var(--md-sys-color-on-surface); }
.md-nav-bar-item.active .md-nav-bar-icon {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.md-nav-bar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-nav-bar-item .md-badge { position: absolute; top: -2px; left: 50%; margin-left: 6px; }

/* Scrim untuk drawer modal. */
.md-scrim {
    position: fixed; inset: 0;
    background: var(--md-sys-color-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
                visibility var(--md-sys-motion-duration-medium2);
}
.md-scrim.is-open { opacity: .32; visibility: visible; }


/* ============================================================
   19 · MOTION & AKSESIBILITAS
   ============================================================ */
.md-animate-in {
    animation: md-enter var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate) both;
}
@keyframes md-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Scrollbar disamakan dengan garis M3. */
* { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-outline); background-clip: content-box; }

/* Satu tempat untuk menghormati prefers-reduced-motion. Animasi berulang
   dimatikan; transisi state layer dipersingkat, tidak dihapus, supaya umpan
   balik sentuhan tetap ada. */
@media (prefers-reduced-motion: reduce) {
    .md-loading, .md-ripple, .md-animate-in, .spinner-border { animation: none !important; }
    .md-loading { border-radius: 50%; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Peramban yang tidak mendukung hover (layar sentuh) tidak boleh terjebak
   state hover setelah ditekan. */
@media (hover: none) {
    .btn:hover::after, .md-btn:hover::after, .md-state:hover::after,
    .md-icon-btn:hover::after, .md-nav-item:hover::after,
    .dropdown-item:hover::after { opacity: 0; }
}