/* Bandly — desain sederhana, mobile-first. Satu aksen, banyak ruang, satu fokus per layar. */
:root {
  --bg: #f7f7fb; --surf: #fff; --ink: #15172a; --muted: #646a85; --line: #e6e7f0;
  --acc: #5b5bd6; --acc-ink: #fff; --acc-soft: #eeeefc;
  --ok: #15803d; --warn: #b45309; --bad: #c0362c; --info: #2563eb;
  --c0: #5b5bd6; --c1: #f08a24; --c2: #14a8a0; --c3: #d6477f;
  --r: 16px; --r-sm: 10px; --gap: 16px; --maks: 980px;
  --atas: 56px; --aksi: 68px;
  --aman-bawah: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c0e1a; --surf: #151830; --ink: #eceefb; --muted: #9aa0c0; --line: #262a47; --acc: #8b8cf0; --acc-ink: #0b0c24; --acc-soft: #1e2147;
    --ok: #4cc27f; --warn: #f0b24a; --bad: #ef7266; --info: #7aa8ec; --c0: #8b8cf0; --c1: #f5a350; --c2: #3cc9c0; --c3: #f07aa8; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; }
h1 { font-size: 1.75rem; line-height: 1.15; margin: .3rem 0 .7rem; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
p { margin: .5rem 0; }
a { color: var(--acc); }
ul, ol { padding-left: 1.25rem; margin: .4rem 0; }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 60ch; }
.kecil { font-size: .85rem; color: var(--muted); }
.blok { display: block; }
.lewati { position: absolute; left: -999px; } .lewati:focus { left: 8px; top: 8px; background: var(--surf); padding: 8px 12px; z-index: 99; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--c1); outline-offset: 2px; }
.sembunyi, [hidden] { display: none !important; }

/* ---------- kerangka ---------- */
.atas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; height: var(--atas); background: color-mix(in srgb, var(--surf) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.merek { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--acc); color: var(--acc-ink); }
.nav-desk { display: none; gap: 2px; }
.nav-desk a { text-decoration: none; padding: 8px 11px; border-radius: 10px; color: var(--ink); font-weight: 500; font-size: .93rem; }
.nav-desk a:hover { background: var(--acc-soft); } .nav-desk a[aria-current] { background: var(--acc); color: var(--acc-ink); }
.ikon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); border-radius: 12px; cursor: pointer; }
.ikon-btn:hover { background: var(--acc-soft); }
.menu-panel { position: absolute; right: 12px; top: calc(var(--atas) - 4px); background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 6px; min-width: 190px; box-shadow: 0 12px 32px rgba(10, 12, 40, .18); display: grid; }
.menu-panel a { padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 500; } .menu-panel a:hover, .menu-panel a[aria-current] { background: var(--acc-soft); }
main { max-width: var(--maks); margin: 0 auto; padding: 18px 16px calc(var(--aksi) + var(--aman-bawah) + 28px); outline: none; }
footer { text-align: center; padding: 8px 16px calc(96px + var(--aman-bawah)); color: var(--muted); font-size: .82rem; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--surf) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: var(--aman-bawah); }
.tabbar a { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 7px; min-height: 58px; text-decoration: none; color: var(--muted); font-size: .7rem; font-weight: 600; }
.tabbar a[aria-current] { color: var(--acc); } .tabbar a[aria-current] .ikon-svg { stroke-width: 2.3; }
@media (min-width: 900px) {
  .bar-fokus, .bar-aksi { padding-left: max(14px, calc((100vw - var(--maks)) / 2)); padding-right: max(14px, calc((100vw - var(--maks)) / 2)); }
  .nav-desk { display: flex; } .menu-btn, .tabbar { display: none; }
  main { padding: 28px 24px 60px; } footer { padding-bottom: 36px; }
  h1 { font-size: 2.2rem; }
}

/* ---------- komponen dasar ---------- */
.kartu { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin: 14px 0; }
.grid-kartu { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 14px 0; }
.grid-kartu .kartu { margin: 0; }
a.kartu.tautan { text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s, box-shadow .15s; display: block; }
a.kartu.tautan.langkah, a.kartu.tautan.alat, a.kartu.tautan.baris-panduan { display: flex; }
a.kartu.tautan:hover { border-color: var(--acc); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(60, 60, 150, .1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 650; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1.5px solid var(--acc); background: var(--acc); color: var(--acc-ink); cursor: pointer; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--acc); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.besar-btn { min-height: 52px; font-size: 1.02rem; padding: 0 24px; }
.baris { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.baris.spasi { justify-content: space-between; }
input[type=text], input[type=number], select, textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--surf); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; max-width: 100%; min-height: 44px; }
input[type=text]:focus, select:focus, textarea:focus { border-color: var(--acc); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); }
progress { width: 100%; height: 8px; margin-top: 8px; accent-color: var(--acc); }
.lencana { display: inline-block; font-size: .72rem; background: var(--c1); color: #3a2400; padding: 2px 9px; border-radius: 99px; font-weight: 700; }
.lencana.ringan { background: var(--acc-soft); color: var(--acc); } .lencana.lanjut { background: var(--acc); color: var(--acc-ink); }
.lencana-tingkat { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--acc-soft); color: var(--acc); }
.lencana-tingkat.t1 { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .lencana-tingkat.t3 { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.tes-atas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.terbaik { display: flex; align-items: center; gap: 4px; font-size: .84rem; color: var(--muted); margin-top: 6px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surf); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.chip.aktif { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.segmen { display: inline-flex; padding: 4px; background: var(--acc-soft); border-radius: 12px; gap: 4px; }
.segmen button { border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 600; min-height: 38px; padding: 0 18px; border-radius: 9px; cursor: pointer; } .segmen button.aktif { background: var(--surf); color: var(--acc); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 10px 0; }
.stat { background: var(--bg); border-radius: 12px; padding: 12px; text-align: center; } .stat strong { display: block; font-size: 1.35rem; } .stat span { font-size: .78rem; color: var(--muted); }

/* ---------- beranda ---------- */
.hero { padding: 14px 0 6px; }
.tagline { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--acc); background: var(--acc-soft); padding: 5px 12px; border-radius: 99px; margin: 0 0 6px; }
.hero h1 { font-size: 2.3rem; } .hero .lead { margin-top: 0; }
.lanjut-kartu { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--acc-soft); color: var(--acc); font-weight: 650; text-decoration: none; } .lanjut-kartu span { flex: 1; }
.grid-skill { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0; }
@media (min-width: 700px) { .grid-skill { grid-template-columns: repeat(4, 1fr); } }
.skill { padding: 18px; } .skill .jumlah { display: block; margin-top: 8px; }
.skill-ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 10px; color: #fff; }
.skill-ikon.s-simak { background: var(--c0); } .skill-ikon.s-baca { background: var(--c2); } .skill-ikon.s-tulis { background: var(--c1); } .skill-ikon.s-bicara { background: var(--c3); }
.alat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .alat-ikon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--acc-soft); color: var(--acc); flex: none; }
.catatan-kaki { text-align: center; margin-top: 22px; }

/* ---------- mode fokus (ujian) ---------- */
body.fokus .atas, body.fokus .tabbar, body.fokus footer { display: none; }
body.fokus main { padding-top: calc(var(--atas) + 14px); padding-bottom: calc(var(--aksi) + var(--aman-bawah) + 36px); }
.bar-fokus { position: fixed; top: 0; left: 0; right: 0; height: var(--atas); z-index: 40; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; background: color-mix(in srgb, var(--surf) 95%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.judul-fokus { flex: 1; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.05rem; padding: 6px 12px; border-radius: 10px; background: var(--acc-soft); color: var(--acc); } .timer:empty { display: none; }
.timer.mendesak { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.bar-aksi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px calc(10px + var(--aman-bawah)); background: color-mix(in srgb, var(--surf) 96%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.progres-teks { font-size: .88rem; color: var(--muted); font-weight: 600; }
.navigator { position: fixed; left: 12px; right: 12px; bottom: calc(var(--aksi) + var(--aman-bawah) + 6px); z-index: 45; max-width: 560px; margin: 0 auto; background: var(--surf); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: 0 -8px 36px rgba(10, 12, 40, .22); }
.nav-judul { font-weight: 700; margin-bottom: 10px; }
.nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; max-height: 40vh; overflow: auto; }
.nomor { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surf); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; } .nomor.terisi { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.tab-bagian-wrap { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 4px; }
.tab-bagian { flex: none; display: inline-flex; gap: 8px; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surf); color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; }
.tab-bagian.aktif { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); } .tab-bagian .hitung { font-size: .75rem; opacity: .85; font-weight: 600; } .hitung-kata { font-size: .75rem; opacity: .85; font-weight: 600; } .hitung-kata.cukup { color: inherit; }

/* ---------- soal ---------- */
.dua-kolom { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.kolom-teks { margin: 0; line-height: 1.7; } .kolom-teks h2 { margin-top: 0; } .kolom-teks p { margin: .75rem 0; }
.lbl { display: inline-block; min-width: 1.5rem; font-weight: 800; color: var(--acc); }
.segmen-wrap { margin-bottom: 10px; }
.panel-baca > .segmen { display: flex; margin-bottom: 12px; } .panel-baca > .segmen button { flex: 1; }
@media (max-width: 899px) { .panel-baca[data-tampil=teks] .kolom-soal { display: none; } .panel-baca[data-tampil=soal] .kolom-teks { display: none; } }
@media (min-width: 900px) {
  .panel-baca > .segmen { display: none; }
  .dua-kolom { grid-template-columns: 1.1fr 1fr; }
  .kolom-teks { position: sticky; top: calc(var(--atas) + 12px); max-height: calc(100vh - var(--atas) - var(--aksi) - 40px); overflow: auto; }
}
.petunjuk { font-weight: 650; color: var(--acc); margin: 18px 0 8px; }
.konteks { color: var(--muted); }
.q { padding: 12px 12px 10px; border-radius: 14px; border: 1.5px solid transparent; margin: 6px 0; }
.q.benar { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); } .q.salah { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); } .q.sebagian { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.teks-soal { margin: 0 0 8px; }
.no { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .3rem; border-radius: 99px; background: var(--acc); color: var(--acc-ink); font-weight: 800; font-size: .85rem; margin-right: .5rem; } .no.lebar { padding: 0 .55rem; } .no.kecil { min-width: 1.4rem; height: 1.4rem; font-size: .72rem; margin-right: .3rem; }
.isian { width: 11.5rem; margin: 0 .35rem; } .isian.kecil { width: 8.5rem; margin: 0; } .isian.benar { border-color: var(--ok); } .isian.salah { border-color: var(--bad); }
.pilihan { display: grid; gap: 8px; } .baris-pilihan { grid-template-columns: repeat(3, 1fr); } @media (max-width: 480px) { .baris-pilihan { grid-template-columns: 1fr; } }
.opsi { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surf); cursor: pointer; }
.opsi:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); }
.opsi input { width: 20px; height: 20px; accent-color: var(--acc); flex: none; margin: 0; }
.pilihan-select select { width: 100%; max-width: 280px; }
.daftar-pilihan { background: var(--acc-soft); border-radius: 12px; padding: 12px 12px 12px 34px; list-style: none; } .daftar-pilihan li { margin: 4px 0; padding-left: 0; }
.tabel-wrap { overflow-x: auto; margin: 8px 0; } .tabel-isian { border-collapse: collapse; width: 100%; font-size: .95rem; } .tabel-isian th, .tabel-isian td { border: 1px solid var(--line); padding: 10px; text-align: left; vertical-align: middle; } .tabel-isian th { background: var(--acc-soft); }
.sel-tabel { display: inline-flex; align-items: center; }
.tinjau { margin: 8px 0 0; font-size: .92rem; } .q.benar .tinjau strong { color: var(--ok); } .q.salah .tinjau strong { color: var(--bad); } .q.sebagian .tinjau strong { color: var(--warn); }
.tinjau-tabel { list-style: none; padding: 0; } .tinjau-tabel li { padding: 6px 10px; border-radius: 10px; margin: 4px 0; } .tinjau-tabel .benar { background: color-mix(in srgb, var(--ok) 10%, transparent); } .tinjau-tabel .salah { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.mode-ujian { display: flex; gap: 8px; align-items: center; margin: 10px 0; } .mode-ujian input { width: 18px; height: 18px; accent-color: var(--acc); }

/* ---------- hasil ---------- */
.skor { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.besar { font-size: 2.8rem; font-weight: 800; color: var(--acc); line-height: 1; letter-spacing: -.03em; } .band-besar { font-size: 1.3rem; }
.hasil-band { font-weight: 700; font-size: 1.1rem; }
.temuan { list-style: none; padding: 0; } .temuan li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.temuan .ikon { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8rem; }
.temuan .ok .ikon { background: var(--ok); } .temuan .warn .ikon { background: var(--warn); } .temuan .info .ikon { background: var(--info); }
.peringatan { color: var(--warn); }
.tinjau-bagian { margin-top: 18px; }
summary { cursor: pointer; font-weight: 650; min-height: 32px; }

/* ---------- writing / speaking ---------- */
.editor { width: 100%; min-height: 46vh; line-height: 1.65; resize: vertical; margin-top: 12px; }
.kecil-area { min-height: 100px; margin-top: 8px; }
.jenis-tugas { font-size: .75rem; font-weight: 800; color: var(--acc); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
.catatan-contoh { background: var(--acc-soft); border-radius: 12px; padding: 12px 16px; margin-top: 10px; }
.kecil-segmen { margin: 10px 0; }
.contoh-bicara { margin-top: 10px; } .contoh-bicara p { background: var(--acc-soft); border-radius: 12px; padding: 12px 16px; }
.kartu-cue { border-left: 4px solid var(--c1); padding: 8px 16px; background: var(--bg); border-radius: 8px; }
.jawab { margin: 12px 0; } .tanya { font-weight: 650; } .kartu.jawab { padding: 16px 18px; } .hasil-mini { margin-top: 10px; }
.baris-rubrik { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); } .baris-rubrik select { width: 100%; max-width: 200px; } @media (min-width: 640px) { .baris-rubrik { grid-template-columns: 1fr auto; align-items: center; } .baris-rubrik details { grid-column: 1 / -1; } }
.ai { border-style: dashed; } .ai-hasil { white-space: pre-wrap; margin-top: 10px; }
.form-band { display: grid; grid-template-columns: 1fr; gap: 6px 14px; max-width: 460px; } .form-band input, .form-band select { width: 100%; margin-bottom: 8px; }
.langkah-daftar { display: grid; gap: 10px; margin: 14px 0; }
.langkah { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .langkah-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: var(--acc-soft); color: var(--acc); font-weight: 800; flex: none; } .langkah-ikon { color: var(--acc); flex: none; display: grid; }
.langkah-isi { flex: 1; display: grid; } .langkah-hasil { font-weight: 700; color: var(--acc); white-space: nowrap; }
.daftar-baris { display: grid; gap: 8px; } .baris-panduan { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; font-weight: 600; }
.panduan section { margin: 18px 0; } .panduan h2 { margin-top: 0; }
.tabel-geser { overflow-x: auto; padding: 8px 12px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--aksi) + var(--aman-bawah) + 18px); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 99px; font-weight: 600; z-index: 99; max-width: 90vw; }

/* ---------- grafik ---------- */
.figur { margin: 14px 0 0; } .figur figcaption { font-weight: 650; margin-bottom: 4px; }
.grafik { width: 100%; max-width: 640px; height: auto; } .grafik .grid { stroke: var(--line); } .grafik .sumbu, .grafik .nilai { fill: var(--muted); font-size: 11px; } .grafik .judul-pai { font-size: 13px; fill: var(--ink); font-weight: 600; }
.bar.seri0, .kotak.seri0 { fill: var(--c0); background: var(--c0); } .bar.seri1, .kotak.seri1 { fill: var(--c1); background: var(--c1); } .bar.seri2, .kotak.seri2 { fill: var(--c2); background: var(--c2); } .bar.seri3, .kotak.seri3 { fill: var(--c3); background: var(--c3); }
.garis { stroke-width: 2.5; } .garis.seri0 { stroke: var(--c0); } .garis.seri1 { stroke: var(--c1); } .garis.seri2 { stroke: var(--c2); } .garis.seri3 { stroke: var(--c3); }
.titik.seri0 { fill: var(--c0); } .titik.seri1 { fill: var(--c1); } .titik.seri2 { fill: var(--c2); } .titik.seri3 { fill: var(--c3); }
.irisan { stroke: var(--surf); stroke-width: 2; } .irisan.i0, .kotak.i0 { fill: var(--c0); background: var(--c0); } .irisan.i1, .kotak.i1 { fill: var(--c1); background: var(--c1); } .irisan.i2, .kotak.i2 { fill: var(--c2); background: var(--c2); } .irisan.i3, .kotak.i3 { fill: var(--c3); background: var(--c3); } .irisan.i4, .kotak.i4 { fill: #7c8aa6; background: #7c8aa6; } .irisan.i5, .kotak.i5 { fill: #b9a14a; background: #b9a14a; }
.nilai-pai { fill: #fff; font-size: 12px; font-weight: 700; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; margin-top: 6px; } .kotak { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; }
.tabel-data { border-collapse: collapse; width: 100%; font-size: .9rem; } .tabel-data th, .tabel-data td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); } .tabel-data.besar { font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .atas, footer, .tabbar, .bar-aksi, .bar-fokus { display: none; } }