/* ============================================================================
   Fondasi visual — token dan komponen bersama untuk ujian dan dashboard.

   Palet dan tipografi diadopsi dari EPT Lab (#Web App EPT), aplikasi belajar
   Brighten yang sudah berjalan, supaya CBT dan EPT Lab terbaca sebagai satu
   keluarga produk. Peserta tes TOEFL gratis adalah calon pengguna EPT Lab;
   kalau keduanya terlihat seperti dua perusahaan berbeda, corong itu putus di
   tengah.

   PERUBAHAN 24 September 2026 (KT-35): pemilik produk memilih warna khas
   Brighten English — gradasi ungu latar logo (#7F3EFC → #A07BFF) — sebagai
   tema seluruh CBT, menggantikan tangerine EPT Lab. Tipografinya tetap.

   Catatan lama: blueprint 01 §9 menyebut ungu #7C3BFB dan font Outfit; lalu
   sempat diganti tangerine EPT Lab (KT-19). Keputusan pemilik
   produk 22 September 2026: ikuti EPT Lab. Lihat docs/03, KT-19.

   SOAL FONT. EPT Lab memuat Plus Jakarta Sans dan Newsreader dari Google
   Fonts. Itu tidak bisa ditiru di sini: layar ujian harus utuh tanpa koneksi
   selama ±115 menit, dan font yang gagal dimuat di tengah ujian menggeser
   seluruh tata letak di perangkat yang sedang dipakai mengerjakan soal.

   Nama fontnya tetap ditaruh paling depan, sehingga begitu berkas woff2
   diletakkan di /assets/font/ dan @font-face ditambahkan, tampilannya langsung
   sama persis dengan EPT Lab tanpa mengubah satu baris pun di berkas ini.

   Yang PENTING: pemisahan serif/sans — gagasan tipografis paling berharga dari
   EPT Lab — sudah bekerja hari ini tanpa unduhan apa pun, karena Georgia dan
   Iowan Old Style ada di hampir semua perangkat.
   PEMBARUAN 12 November 2026: teks soal kini Helvetica (--f-soal), atas
   permintaan pemilik agar mirip naskah tes internasional. Pembeda "yang
   diujikan" dari "yang menjelaskan" kini dipikul ukuran huruf dan tata
   letak, bukan jenis huruf. Serif --f-read tinggal dipakai sertifikat.
   ========================================================================= */

/* Plus Jakarta Sans dilayani dari server sendiri (SIL OFL), bukan Google
   Fonts: layar ujian harus utuh tanpa koneksi, dan dulu font merek hanya
   tampil di perangkat yang kebetulan memasangnya. Empat berat, ±14 KB tiap
   berkas; 500 jatuh ke 400 dan 650 ke 700 menurut aturan pencocokan CSS. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/font/plus-jakarta-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/font/plus-jakarta-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/font/plus-jakarta-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/font/plus-jakarta-sans-800.woff2") format("woff2"); }

:root {
  /* Ungu khas Brighten English — gradasi latar logo (#7F3EFC → #A07BFF).
     Keputusan pemilik 24 September 2026, menggantikan tangerine EPT Lab (KT-35). */
  --page:#F3EEFF; --bg:#FBF9FF; --rail:#F7F3FF;
  --surface:#FFFFFF; --surface-2:#F6F3FC; --surface-3:#ECE6F7;
  --tint:#F1EAFF; --tint-2:#E3D6FF;
  --ink:#2F2A47; --ink-2:#4A4563; --muted:#6A6484;
  --line:#ECE6F5; --line-2:#DDD4EC;
  --primary:#7F3EFC; --primary-2:#A07BFF; --primary-ink:#5B21B6; --on-primary:#FFFFFF;
  --navy:#2A1B5E; --navy-2:#4C2A9E; --on-navy:#F6F3FF; --navy-muted:#BCAEE6;
  --gold:#E0950A; --gold-soft:#FFF2D4; --gold-ink:#955F00;
  --good:#1C9A67; --good-soft:#E3F5EC; --bad:#E0464C; --bad-soft:#FDEBEB;
  --mark:#E3D6FF; --mark-ink:#2F2A47;
  --gradien-merek: linear-gradient(45deg, #7F3EFC 0%, #A07BFF 100%);

  --shadow-sm:0 1px 2px rgba(60,30,120,.06);
  --shadow:0 1px 2px rgba(60,30,120,.05),0 10px 28px -12px rgba(60,30,120,.18);
  --shadow-lg:0 2px 6px rgba(60,30,120,.06),0 30px 60px -20px rgba(60,30,120,.28);

  --r-xl:28px; --r-lg:20px; --r:16px; --r-sm:12px; --r-pil:999px;

  --f-ui:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-read:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  /* Teks soal & bacaan di layar ujian (keputusan pemilik 12 November 2026):
     Helvetica, seperti naskah tes internasional, menggantikan serif --f-read.
     Font sistem — tetap tampil tanpa koneksi. Windows tidak punya Helvetica,
     jadi jatuh ke Arial yang bentuknya hampir sama; Calibri sengaja tidak
     dipakai karena tidak ada di Mac/iPhone/Android, sehingga tampilan soal
     akan berbeda antarperangkat. --f-read tetap dipakai sertifikat. */
  --f-soal:"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Skala jarak kelipatan 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  color-scheme:light;
}

/*
 * Mode gelap.
 *
 * Diadopsi untuk DASHBOARD saja. Layar ujian dikunci terang lewat
 * `color-scheme` dan latar eksplisit di ujian.css: 1.700 peserta mengerjakan
 * soal yang sama harus melihat kontras yang sama, dan bacaan Reading yang
 * dibaca 55 menit lebih aman di latar terang bagi mayoritas orang. Peserta
 * yang perangkatnya gelap tetap mendapat dashboard gelap.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:#0D0A16; --bg:#130F1F; --rail:#171226;
    --surface:#1B1629; --surface-2:#221C33; --surface-3:#2C2440;
    --tint:#231A40; --tint-2:#2F2256;
    --ink:#F2EEFB; --ink-2:#CCC5DD; --muted:#9A93AE;
    --line:#2A2340; --line-2:#3A3152;
    --primary:#9B6BFF; --primary-2:#B99BFF; --primary-ink:#CDB6FF; --on-primary:#FFFFFF;
    --navy:#221847; --navy-2:#3A2A78;
    --gold:#F3B23A; --gold-soft:#33260C; --gold-ink:#F7C868;
    --good:#43CB93; --good-soft:#12301F; --bad:#FF767C; --bad-soft:#3A181B;
    --mark:rgba(155,107,255,.32); --mark-ink:#F7F3FF;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -12px rgba(0,0,0,.55);
    --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 30px 60px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.22; margin: 0; font-weight: 700; }
h1 { font-size: 27px; }
h2 { font-size: 20px; }
h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }

/* ---------------------------------------------------------------- bilah */

.bilah {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.merek { font-weight: 800; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }
.merek em { font-style: normal; color: var(--primary); }

.label-section { color: var(--muted); font-size: 13px; }
.nomor { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Timer sebagai pil, mengikuti EPT Lab. */
.waktu {
  margin-left: auto;
  font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-pil); padding: var(--s1) var(--s3);
  background: var(--surface); border: 1px solid var(--line-2);
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.waktu.mendesak { background: var(--bad-soft); color: var(--bad); border-color: transparent; }

/* --------------------------------------------------------------- tombol */

.tombol {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; letter-spacing: -.01em;
  padding: var(--s3) var(--s5);
  border-radius: var(--r); min-height: 44px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .15s;
}
.tombol:active { transform: translateY(1px); }

.tombol.utama {
  background: linear-gradient(180deg, var(--primary-2) -30%, var(--primary) 60%);
  color: var(--on-primary);
  box-shadow: 0 1px 2px rgba(91,33,182,.22), 0 10px 24px -10px rgba(127,62,252,.55);
}
.tombol.utama:hover:not(:disabled) { box-shadow: 0 2px 4px rgba(91,33,182,.24), 0 14px 32px -10px rgba(127,62,252,.6); }
.tombol.utama:disabled {
  background: var(--surface-3); color: var(--muted);
  box-shadow: none; cursor: not-allowed;
}

.tombol.sekunder {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
}
.tombol.sekunder:hover { border-color: var(--primary-2); }

.tombol.kecil { padding: var(--s2) var(--s3); min-height: 36px; font-size: 13px; }
.tombol.besar { padding: var(--s4) var(--s6); font-size: 16px; }

a.tombol { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------------------------------------- kartu */

.kartu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
}

.eyebrow {
  font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .09em;
}

.pil {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12.5px; font-weight: 700;
  border-radius: var(--r-pil); padding: var(--s1) var(--s3);
  background: var(--tint); color: var(--primary-ink); white-space: nowrap;
}
.pil.netral { background: var(--surface-2); color: var(--ink-2); }
.pil.perhatian { background: var(--gold-soft); color: var(--gold-ink); }

.keterangan { color: var(--muted); }
.keterangan.kecil { font-size: 13px; }


/* Logo di samping tulisan merek. Dipakai halaman peserta (masuk, daftar,
   dashboard, ujian, sertifikat) supaya sama dengan admin dan verifikasi. */
.merek.berlogo { display: inline-flex; align-items: center; white-space: pre; }
.merek.berlogo::before {
  content: ""; width: 28px; height: 28px; flex: none; border-radius: 8px; margin-right: 9px;
  background: url("/assets/img/logo-brighten.jpg") center / cover no-repeat;
  box-shadow: 0 4px 10px -4px rgba(127, 62, 252, .55);
}

/* Dashboard admin & peserta sedikit dirapatkan (keputusan pemilik 12 Nov
   2026): seluruh ukuran — huruf, jarak, kartu — turun 6% secara seragam.
   Layar ujian TIDAK ikut: teks soal harus tetap besar dan nyaman dibaca. */
html.rapat { zoom: .94; --vh: calc(100vh / .94); }
/* --vh: tinggi layar dalam satuan yang sudah di-zoom, supaya bingkai tetap
   memenuhi layar. Halaman tanpa zoom memakai 100vh apa adanya. */
:root { --vh: 100vh; }