/* TKA 2026 — identitas biru muda */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url(/vendor/fonts/pjs-400.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url(/vendor/fonts/pjs-500.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url(/vendor/fonts/pjs-600.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url(/vendor/fonts/pjs-700.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url(/vendor/fonts/pjs-800.woff2) format('woff2'); }

:root {
  /* Palet: deep navy #10284A · azure #2475EC · ice blue #CFEAFF · soft lavender #A99BF2 · blush pink #F6D5E3 · soft coral #FF786F · cool white #F5F6FA
     Porsi: ±60% latar terang, 25% biru/navy, 10% lavender/pink, 5% coral. Warna isian bertulisan putih dibuat sedikit lebih pekat agar kontras ≥ 4,5:1. */
  --navy: #10284A; --azure: #2475EC; --ice: #CFEAFF; --lavender: #A99BF2; --blush: #F6D5E3; --coral: #FF786F; --cool: #F5F6FA;
  --bg: #F5F6FA; --surface: #FFFFFF; --surface-2: #F7F8FC; --line: #E3E8F2; --line-2: #D2DAE8;
  --ink: #10284A; --body: #1B3358; --text-2: #3D4F6E; --muted: #5C6A85;
  --sky-50: #F0F7FF; --sky-100: #E3F2FF; --sky-200: #CFEAFF; --sky-300: #9CC8F8; --sky-400: #1F6BE0; --sky-500: #1A5BC4; --sky-600: #1A5BC4; --sky-700: #1A55B8; --sky-800: #10284A; --sky-900: #0A1B33;
  --green-50: #F0FDF4; --green-100: #DCFCE7; --green-500: #22C55E; --green-700: #166534;
  --amber-50: #FFFBEB; --amber-100: #FEF3C7; --amber-300: #FCD34D; --amber-500: #F59E0B; --amber-800: #92400E; --amber-900: #78350F;
  --red-50: #FEF2F2; --red-100: #FEE2E2; --red-500: #EF4444; --red-700: #B91C1C;
  --orange-100: #FFE7E5; --orange-700: #A8322A; --violet-100: #EEEAFD; --violet-700: #5B47C9; --pink-100: #FBE7EF; --pink-700: #A3305F; --slate-100: #EEF1F7;
  --kurang-bg: #FEF08A; --kurang-garis: #CA8A04; --kurang-teks: #713F12;
  --tombol: #10284A; --tombol-hover: #1A3A66;
  --radius: 20px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(16,40,74,.05), 0 12px 32px rgba(16,40,74,.06);
  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --soal-size: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; }
a { color: var(--sky-700); }
a:hover { color: #10284A; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.25; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 18px; font-weight: 800; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--sky-300); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 220px), 100%), 1fr)); gap: 16px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* kartu */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 20px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-body { padding: 20px; }

/* tombol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 0;
  font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .15s, background .15s; }
.btn:hover { filter: brightness(.97); }
.btn:disabled { cursor: not-allowed; opacity: .55; filter: none; }
.btn-p { background: var(--tombol); color: #fff; }
.btn-p:hover { color: #fff; background: var(--tombol-hover); filter: none; }
.btn-s { background: var(--sky-100); color: var(--sky-700); }
.btn-o { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.btn-o:hover { color: var(--ink); background: var(--surface-2); }
.btn-d { background: var(--red-100); color: var(--red-700); }
.btn-w { background: var(--orange-100); color: var(--orange-700); }
.btn-g { background: transparent; color: var(--text-2); }
.btn-g:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 12px; }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 15px; }
.btn-block { width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn.sm { width: 36px; height: 36px; border: 0; background: transparent; }
.icon-btn.sm:hover { background: var(--surface-2); }
.icon-btn.danger { color: var(--red-700); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }

/* chip & tile */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--slate-100); color: var(--text-2); }
.chip.sky { background: var(--sky-100); color: var(--sky-700); }
.chip.sky-solid { background: var(--sky-400); color: #fff; }
.chip.green { background: var(--green-100); color: var(--green-700); }
.chip.amber { background: var(--amber-100); color: var(--amber-800); }
.chip.red { background: var(--red-100); color: var(--red-700); }
.chip.orange { background: var(--orange-100); color: var(--orange-700); }
.chip.violet { background: var(--violet-100); color: var(--violet-700); }
.chip.pink { background: var(--pink-100); color: var(--pink-700); }
.chip.navy { background: var(--ink); color: #fff; }
.chip.white { background: #fff; color: var(--sky-700); }
.chip.outline { background: #fff; border: 1px solid var(--line-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.dot.live { background: var(--green-500); box-shadow: 0 0 0 4px var(--green-100); }
.tile { display: flex; align-items: center; justify-content: center; flex: none; border-radius: var(--radius-sm); width: 44px; height: 44px; font-weight: 800; font-size: 14px; }
.tile.sm { width: 34px; height: 34px; border-radius: 11px; font-size: 12px; }
.tile.lg { width: 56px; height: 56px; border-radius: 18px; }
.tile.round { border-radius: 50%; }
.t-sky { background: var(--sky-100); color: var(--sky-700); } .t-sky-solid { background: var(--sky-400); color: #fff; }
.t-orange { background: var(--orange-100); color: var(--orange-700); } .t-green { background: var(--green-100); color: var(--green-700); }
.t-violet { background: var(--violet-100); color: var(--violet-700); } .t-pink { background: var(--pink-100); color: var(--pink-700); }
.t-amber { background: var(--amber-100); color: var(--amber-800); } .t-slate { background: var(--slate-100); color: var(--text-2); }
.t-red { background: var(--red-100); color: var(--red-700); }

/* formulir */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span:not(.field-ctl):not(.hint), .field-label, .label { font-size: 13px; font-weight: 600; color: var(--text-2); line-height: 1.35; }
.field-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field .hint { font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.4; margin-top: -2px; }
.field .hint:empty { display: none; }
.input, .select, .textarea { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; font-size: 14px; color: var(--ink); }
.textarea { padding: 12px 14px; min-height: 96px; resize: vertical; line-height: 1.55; }
.select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E7387' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--sky-400); box-shadow: 0 0 0 4px var(--sky-100); }
.input-icon { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; color: var(--muted); }
.input-icon:focus-within { border-color: var(--sky-400); box-shadow: 0 0 0 4px var(--sky-100); }
.input-icon input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--ink); min-height: 44px; }
.input-icon.soft { background: var(--surface-2); border-color: var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
/* label, kontrol, dan keterangan sejajar per baris walau panjang label/keterangan berbeda */
@supports (grid-template-rows: subgrid) {
  .form-grid { align-items: start; }
  .form-grid > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
  .form-grid > .field > .field-label { align-self: end; }
  .form-grid > .field .hint:empty { display: block; }
}
.check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--sky-600); flex: none; }
.err { color: var(--red-700); font-size: 13px; }

/* combobox */
.combo { position: relative; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow: auto; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(16,40,74,.14); padding: 4px; margin: 0; list-style: none; }
.combo-list li { padding: 9px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--sky-100); }
.combo-list li.new { color: var(--sky-700); font-weight: 700; }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 42px; height: 24px; border-radius: 999px; background: var(--line-2); padding: 3px; display: flex; transition: background .15s; flex: none; }
.switch .knob { width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.switch input:checked + .track { background: var(--sky-400); }
.switch input:checked + .track .knob { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 3px solid var(--sky-300); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .5; }

/* tabel */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 14px; font-size: 14px; color: var(--body); border-bottom: 1px solid #EEF4F9; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.sel td { background: #F8FCFF; }
.tbl tr.warn td { background: var(--amber-50); }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl .strong { font-weight: 700; color: var(--ink); }
.tbl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }

/* progress */
.bar { height: 8px; border-radius: 999px; background: var(--sky-100); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--sky-400); }
.bar.green { background: var(--green-100); } .bar.green > span { background: var(--green-500); }
.bar.amber { background: var(--amber-100); } .bar.amber > span { background: var(--amber-500); }
.bar.red { background: var(--red-100); } .bar.red > span { background: var(--red-500); }

/* stat */
.stat { display: flex; align-items: center; gap: 14px; padding: 18px; }
.stat strong { display: block; font-size: 24px; line-height: 1.2; }
.stat span { font-size: 13px; color: var(--muted); }
.stat-v { padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.stat-v strong { font-size: 28px; line-height: 1.1; }

/* tab segmen */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.seg button, .seg a { min-height: 40px; padding: 0 14px; border-radius: 13px; border: 0; background: transparent; color: var(--text-2); font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.seg .on { background: var(--sky-400); color: #fff; }
.seg.soft { background: var(--bg); border: 0; }
.seg.soft .on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,40,74,.1); }

/* shell */
.shell { min-height: 100vh; padding: 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.side { flex: 1 1 248px; max-width: 100%; display: flex; flex-direction: column; gap: 22px; padding: 22px 16px; background: #fff; border: 1px solid var(--line); border-radius: 24px; align-self: stretch; }
@media (min-width: 900px) { .side { flex: 0 0 260px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; align-self: flex-start; } }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; text-decoration: none; }
.logo { display: flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--sky-400); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -.02em; overflow: hidden; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.nav { display: flex; flex-direction: column; gap: 18px; }
.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-group > span { padding: 0 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 10px 4px 6px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.nav a .tile { width: 34px; height: 34px; border-radius: 11px; background: var(--bg); color: var(--text-2); }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.on { background: var(--sky-100); color: var(--sky-700); font-weight: 700; }
.nav a.on .tile { background: var(--sky-400); color: #fff; }
.nav a .chip { margin-left: auto; }
.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.page-head .title { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.page-head .title span { font-size: 14px; color: var(--muted); }
.samaran { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--amber-100); color: var(--amber-900); font-size: 14px; }
.samaran strong { color: var(--amber-900); }
.mobile-bar { display: none; }
@media (max-width: 899px) {
  .shell { padding: 12px; gap: 12px; }
  .side { display: none; }
  .side.open { display: flex; position: fixed; inset: 0 30% 0 0; z-index: 60; border-radius: 0 24px 24px 0; overflow: auto; }
  .mobile-bar { display: flex; align-items: center; gap: 12px; width: 100%; }
  .scrim { position: fixed; inset: 0; background: rgba(16,40,74,.4); z-index: 55; }
}

/* hero */
.hero { position: relative; overflow: hidden; border-radius: 28px; padding: 28px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(169,155,242,.38) 0%, rgba(169,155,242,0) 45%), linear-gradient(135deg, var(--sky-400) 0%, var(--sky-700) 50%, var(--navy) 100%); }
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero .deco { position: absolute; border-radius: 50%; pointer-events: none; }
.hero > *:not(.deco) { position: relative; }

/* modal */
.modal-bg { position: fixed; inset: 0; z-index: 80; background: rgba(16,40,74,.45); display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow: auto; }
.modal { margin: auto; width: min(560px, 100%); background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(16,40,74,.3); display: flex; flex-direction: column; max-height: none; }
.modal.wide { width: min(880px, 100%); }
.modal.xwide { width: min(1100px, 100%); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 12px; }
.modal-body { padding: 8px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid var(--line); }

/* toast */
.toasts { position: fixed; z-index: 100; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: 0 12px 30px rgba(16,40,74,.25); animation: tin .2s ease-out; }
.toast.ok { background: #14532D; } .toast.err { background: #7F1D1D; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* kosong / memuat */
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--muted); }
.empty .tile { width: 56px; height: 56px; border-radius: 18px; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--sky-100); border-top-color: var(--sky-400); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px; color: var(--muted); }

/* konten soal */
.rich { font-size: var(--soal-size); line-height: 1.65; color: var(--body); overflow-wrap: anywhere; }
.rich p { margin: 0 0 .5em; }
.rich p:last-child { margin-bottom: 0; }
.rich img { border-radius: 10px; }
.rich table { border-collapse: collapse; max-width: 100%; }
.rich td, .rich th { border: 1px solid var(--line-2); padding: 6px 10px; }
.rich ul, .rich ol { padding-left: 1.4em; margin: 0 0 .5em; }
.opsi { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); cursor: pointer; font-size: var(--soal-size); line-height: 1.45; color: var(--body); text-align: left; width: 100%; }
.opsi:hover { border-color: var(--sky-300); }
.opsi input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opsi .huruf { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); color: var(--text-2); font-weight: 800; font-size: 13px; }
.opsi .kotak { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #A9B6CC; flex: none; display: flex; align-items: center; justify-content: center; color: var(--navy); }
.opsi.on { background: var(--sky-50); border: 2px solid var(--sky-400); font-weight: 600; color: var(--ink); }
.opsi.on .huruf { background: var(--sky-400); color: #fff; }
.opsi.on .kotak { background: var(--sky-400); border-color: var(--sky-400); color: #fff; }
.opsi:focus-within { box-shadow: 0 0 0 4px var(--sky-100); }
.opsi .rich { font-size: inherit; }
.kat-tbl { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.kat-tbl td { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 12px; font-size: var(--soal-size); }
.kat-tbl td:first-child { border-left: 1px solid var(--line); border-radius: 14px 0 0 14px; }
.kat-tbl td:last-child { border-right: 1px solid var(--line); border-radius: 0 14px 14px 0; }
.kat-tbl th { font-size: 12px; color: var(--muted); font-weight: 700; padding: 0 8px; }
.kat-btn { min-width: 74px; min-height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font-weight: 700; cursor: pointer; font-size: 14px; }
.kat-btn.on { background: var(--sky-400); border-color: var(--sky-400); color: #fff; }

/* ujian siswa */
.exam { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.exam-top { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); padding: 12px 16px; }
.exam-in { width: 100%; max-width: 920px; margin: 0 auto; }
.timer { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: var(--orange-100); color: var(--orange-700); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.timer.kritis { background: var(--red-100); color: var(--red-700); }
.exam-body { flex: 1; padding: 16px; }
.exam-foot { position: sticky; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.qbtn { height: 46px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--text-2); font-weight: 800; font-size: 15px; cursor: pointer; }
.qbtn.isi { background: var(--ink); color: #fff; border-color: var(--ink); }
.qbtn.ragu { background: var(--amber-300); color: var(--amber-900); border-color: var(--amber-300); }
.qbtn.kurang { background: var(--kurang-bg); color: var(--kurang-teks); border: 2px dashed var(--kurang-garis); }
.qbtn.aktif { background: var(--sky-400); color: #fff; border-color: var(--sky-400); box-shadow: 0 0 0 3px var(--sky-200); }
.qbtn.aktif.kurang { box-shadow: 0 0 0 3px var(--kurang-bg), 0 0 0 5px var(--kurang-garis); }
.ragu-toggle { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 16px; background: var(--amber-50); border: 1px dashed var(--amber-500); font-weight: 700; color: var(--amber-900); cursor: pointer; }
.ragu-toggle input { width: 20px; height: 20px; accent-color: var(--amber-500); }
.lock-screen { position: fixed; inset: 0; z-index: 90; background: rgba(16,40,74,.92); color: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.lock-screen h2 { color: #fff; font-size: 24px; }
.sheet-bg { position: fixed; inset: 0; z-index: 70; background: rgba(16,40,74,.5); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(720px, 100%); max-height: 88vh; overflow: auto; background: #fff; border-radius: 32px 32px 0 0; padding: 10px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.sheet .handle { align-self: center; width: 44px; height: 5px; border-radius: 999px; background: var(--line-2); }

/* editor teks */
.editor { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: #fff; }
.editor:focus-within { border-color: var(--sky-400); box-shadow: 0 0 0 4px var(--sky-100); }
.editor-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.editor-bar .icon-btn { width: 36px; height: 36px; border: 0; background: transparent; }
.editor-area { min-height: 140px; padding: 14px 16px; outline: none; font-size: 15px; line-height: 1.65; color: var(--body); }
.editor-area.sm { min-height: 44px; padding: 10px 14px; }
.editor-area:empty::before { content: attr(data-placeholder); color: #94A3B8; }

/* grafik batang */
.hist { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; align-items: end; height: 200px; }
.hist .b { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.hist .b span { width: 100%; border-radius: 10px 10px 4px 4px; background: var(--sky-200); min-height: 2px; }
.hist .b.tuntas span { background: var(--sky-400); }
.hist .b strong { font-size: 12px; }
.hist-x { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; font-size: 11px; color: var(--muted); text-align: center; }
.hbar { display: flex; align-items: center; gap: 10px; }
.hbar .bar { flex: 1; height: 10px; }

/* halaman publik */
.container { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.pub-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 20px; padding-bottom: 20px; }
.pub-nav nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.pub-nav nav a { padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.pub-nav nav a:hover { background: #fff; }
.display { font-size: clamp(36px, 6vw, 56px); line-height: 1.06; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.section { padding-top: 72px; padding-bottom: 72px; }
.band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.h-xl { font-size: clamp(28px, 4vw, 36px); font-weight: 800; letter-spacing: -.02em; }

/* login siswa (HP) */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: min(440px, 100%); }
.login-top { position: relative; overflow: hidden; height: 240px; border-radius: 32px 32px 0 0; background: var(--sky-200); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-bottom: 40px; }
.login-top .deco { position: absolute; border-radius: 50%; }

/* cetak */
.print-toolbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.paper { width: 210mm; min-height: 297mm; margin: 20px auto; background: #fff; box-shadow: 0 10px 40px rgba(16,40,74,.12); padding: 14mm 16mm; color: #0F172A; position: relative; }
.paper.land { width: 297mm; min-height: 210mm; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .no-print, .print-toolbar, .toasts { display: none !important; }
  .paper { margin: 0; box-shadow: none; break-after: page; }
  .paper:last-child { break-after: auto; }
  .print-land @page { size: A4 landscape; }
}
.samaran > span.grow { flex: 1 1 220px; }

/* tata letak ujian: bacaan & pertanyaan di kiri, jawaban di kanan (layar lebar) */
.exam-grid { display: flex; flex-direction: column; gap: 14px; }
.exam-kiri, .exam-kanan { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.exam-kiri > *, .exam-kanan > * { flex-shrink: 0; }
.exam-label { display: none; }
/* kotak pertanyaan terpisah, tepat di atas pilihan jawaban */
.soal-tanya { padding: 16px 18px; background: var(--sky-50); border: 1px solid var(--sky-200); border-left: 4px solid var(--sky-400); box-shadow: none; display: flex; flex-direction: column; gap: 8px; }
.soal-tanya-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sky-700); }
.peringatan-kurang, .info-kurang { padding: 10px 14px; border-radius: 14px; align-items: flex-start; line-height: 1.5; }
.peringatan-kurang { background: var(--kurang-bg); color: var(--kurang-teks); border: 1.5px dashed var(--kurang-garis); }
.info-kurang { background: var(--sky-50); color: var(--sky-700); }
@media (min-width: 900px) {
  .exam { height: 100vh; min-height: 0; overflow: hidden; }
  .exam-top .exam-in, .exam-foot .exam-in, .exam-body .exam-in { max-width: 1440px; }
  .exam-body { flex: 1; min-height: 0; overflow: hidden; padding: 16px 20px; }
  .exam-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; height: 100%; }
  .exam-grid.tunggal { grid-template-columns: minmax(0, 900px); justify-content: center; }
  .exam-kiri, .exam-kanan { overflow-y: auto; min-height: 0; padding: 2px 6px 16px 2px; overscroll-behavior: contain; }
  .exam-kanan { padding-top: 2px; }
  .exam-label { display: block; padding-top: 10px; }
}

/* latar belakang */
.latar { position: fixed; inset: 0; z-index: -1; background-color: var(--bg); background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.latar::after { content: ''; position: absolute; inset: 0; }
.latar.kerja::after { background: linear-gradient(180deg, rgba(245,246,250,.9) 0%, rgba(245,246,250,.82) 45%, rgba(245,246,250,.55) 100%); }
.latar.publik::after { background: linear-gradient(180deg, rgba(245,246,250,.8) 0%, rgba(245,246,250,.55) 50%, rgba(245,246,250,.32) 100%); }
body { background: var(--bg); }
.band { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.side { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* halaman login dua sisi */
.login-split { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-visual { position: relative; overflow: hidden; background-color: var(--navy); background-size: cover; background-position: center; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 40px; min-height: 100vh; }
.login-visual::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(16,40,74,.55) 0%, rgba(16,40,74,.18) 38%, rgba(26,85,184,.28) 70%, rgba(16,40,74,.82) 100%), linear-gradient(90deg, rgba(36,117,236,0) 70%, rgba(240,249,255,.35) 100%); }
.login-visual > * { position: relative; }
.login-visual h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.02em; }
.login-visual .chip { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.login-panel .card { width: min(440px, 100%); }
@media (max-width: 899px) {
  .login-split { grid-template-columns: 1fr; }
  .login-visual { min-height: 230px; padding: 24px; }
  .login-visual .sembunyi-hp { display: none; }
  .login-panel { padding: 0 16px 24px; margin-top: -36px; align-items: flex-start; }
}
/* teks sambutan di atas; gambar ditambatkan ke bawah agar tulisan bawaan gambar (Bangbin CBT) terlihat utuh dan agak naik */
.login-visual { justify-content: flex-start; gap: clamp(28px, 10vh, 96px); background-position: center bottom; }
.login-visual::before { background: linear-gradient(180deg, rgba(1,8,45,.74) 0%, rgba(16,40,74,.38) 38%, rgba(26,85,184,.08) 62%, rgba(1,8,45,.18) 100%); }
.login-split { background: var(--bg); }
.login-panel { background: var(--bg); }
@media (max-width: 899px) { .login-panel { background: transparent; } }
@media (max-width: 899px) { .login-visual { background-position: center 84%; } }

/* ===== Tampilan rapat: jarak & padding lebih kecil agar isian muat dalam satu baris ===== */
:root { --radius: 16px; --radius-sm: 11px; }
body { font-size: 14px; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
.row { gap: 10px; }
.col { gap: 10px; }
.grid-auto { gap: 12px; }
.shell { padding: 14px; gap: 14px; }
.side { padding: 14px 12px; gap: 14px; border-radius: 20px; }
@media (min-width: 900px) { .side { flex: 0 0 236px; top: 14px; max-height: calc(100vh - 28px); } }
.main { gap: 14px; }
.nav { gap: 10px; }
.nav a { min-height: 36px; gap: 10px; padding: 2px 8px 2px 4px; }
.nav a .tile { width: 28px; height: 28px; border-radius: 9px; }
.card.pad { padding: 14px 16px; }
.card-head { padding: 10px 16px; gap: 8px; }
.btn { min-height: 38px; padding: 0 14px; gap: 6px; }
.btn-sm { min-height: 32px; padding: 0 10px; border-radius: 10px; }
.btn-lg { min-height: 44px; padding: 0 20px; }
.icon-btn { width: 38px; height: 38px; }
.icon-btn.sm { width: 30px; height: 30px; }
.tile { width: 38px; height: 38px; font-size: 13px; }
.tile.lg { width: 46px; height: 46px; border-radius: 14px; }
.input, .select { min-height: 38px; padding: 0 12px; font-size: 14px; }
.select { padding-right: 32px; background-position: right 10px center; }
.input-icon { min-height: 38px; padding: 0 12px; gap: 8px; }
.input-icon input { min-height: 36px; }
.textarea { min-height: 80px; padding: 8px 12px; }
.field { gap: 4px; }
.form-grid { gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
@supports (grid-template-rows: subgrid) { .form-grid > .field { row-gap: 4px; } }
.tbl th { padding: 8px 12px; font-size: 11.5px; }
.tbl td { padding: 7px 12px; font-size: 13.5px; }
.stat { padding: 12px 14px; gap: 10px; }
.stat strong { font-size: 20px; }
.seg { padding: 3px; border-radius: 14px; }
.seg button, .seg a { min-height: 32px; padding: 0 10px; border-radius: 11px; font-size: 13px; }
.chip { padding: 3px 9px; font-size: 11.5px; }
.hero { padding: 20px; border-radius: 22px; }
.modal { border-radius: 20px; }
.modal-head { padding: 14px 18px 8px; }
.modal-body { padding: 6px 18px 14px; gap: 10px; }
.modal-foot { padding: 10px 18px 14px; gap: 8px; }
.page-head { gap: 10px; }
.page-head .title span { font-size: 13px; }

/* Baris atur sesi massal: sesi | mulai | sampai | jumlah | hapus */
.sesi-baris { display: grid; grid-template-columns: minmax(110px, 1fr) 84px 84px minmax(96px, auto) 30px; gap: 8px; align-items: center; }
.sesi-baris .input, .sesi-baris .select { min-height: 36px; }

/* Ikon 3D untuk aksi cepat */
.aksi3d { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; }
.aksi3d a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; }
.aksi3d a:hover { background: var(--surface-2); }
.ikon3d { --a: #6FB1FF; --b: #1F6BE0; position: relative; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(150deg, var(--a) 0%, var(--b) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,0,.18), 0 8px 14px -6px var(--b), 0 2px 3px rgba(16,40,74,.15);
  transform: perspective(240px) rotateX(10deg); transition: transform .15s ease, box-shadow .15s ease; }
.ikon3d::before { content: ''; position: absolute; inset: 3px 5px auto; height: 45%; border-radius: 11px 11px 40% 40%; background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,0)); }
.ikon3d svg { position: relative; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.aksi3d a:hover .ikon3d { transform: perspective(240px) rotateX(0deg) translateY(-2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,0,.18), 0 12px 18px -6px var(--b), 0 2px 3px rgba(16,40,74,.15); }
.ikon3d.i-sky { --a: #6FB1FF; --b: #1F6BE0; }
.ikon3d.i-orange { --a: #FFB37A; --b: #EA5B2A; }
.ikon3d.i-violet { --a: #BBAAFF; --b: #6A52DB; }
.ikon3d.i-green { --a: #74E6A2; --b: #15994A; }
.ikon3d.i-pink { --a: #FF9FC4; --b: #D02670; }
.ikon3d.i-slate { --a: #A7B6CC; --b: #4A5C78; }
.ikon3d.i-amber { --a: #FFD66B; --b: #D98A06; }

/* ===== Menu samping: tinggi penuh layar + bisa diciutkan ===== */
.side-head { display: flex; align-items: center; gap: 6px; }
.side-head .brand { flex: 1; min-width: 0; padding: 0 2px; }
.side-toggle { flex: none; }
.side-foot { margin-top: auto; gap: 6px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  .side { height: calc(100vh - 28px); max-height: none; overflow: hidden; transition: flex-basis .18s ease, padding .18s ease; }
  .side .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
  .shell.ringkas .side { flex-basis: 68px; padding: 12px 8px; }
  .shell.ringkas .brand-teks, .shell.ringkas .nav-label, .shell.ringkas .nav-group > span, .shell.ringkas .side-user-teks, .shell.ringkas .nav a .chip { display: none; }
  .shell.ringkas .side-head { flex-direction: column; gap: 8px; }
  .shell.ringkas .brand { flex: none; justify-content: center; padding: 0; }
  .shell.ringkas .brand .logo { width: 36px; height: 36px; }
  .shell.ringkas .nav-group { gap: 2px; }
  .shell.ringkas .nav-group + .nav-group { border-top: 1px solid var(--line); padding-top: 8px; }
  .shell.ringkas .nav a { justify-content: center; padding: 3px; }
  .shell.ringkas .side .btn { padding: 0; justify-content: center; }
  .shell.ringkas .side-user { justify-content: center; padding: 6px; background: transparent; }
}
@media (max-width: 899px) { .side-toggle { display: none; } }
@media (min-width: 900px) { .shell.ringkas .side-foot .btn { justify-content: center !important; } }