:root{
  --bg-primary:#060606;--bg-secondary:#171914;--bg-card:#111110;
  --text-primary:#fff;--text-secondary:#c1c1c1;--text-muted:#8a8a8a;
  --theme-color:#BFF747;--theme-color-hover:#a8d93e;
  --gradient-accent:linear-gradient(135deg,#BFF747,#4ade80,#14b8a6);
  --border-color:rgba(193,193,193,.16);--glass-bg:rgba(255,255,255,.03);
  --radius-sm:8px;--radius-md:16px;--radius-xl:100px;
  --font-heading:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --font-body:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-ui:'Manrope','Segoe UI',system-ui,sans-serif;
  --ok:#4ade80;--galat:#f87171;--tunggu:#facc15;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.65}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--theme-color);outline-offset:3px}
h1,h2,h3{font-family:var(--font-heading);font-weight:800;text-transform:uppercase;line-height:1.05}
.bungkus{width:min(1280px,92%);margin-inline:auto}
.navbar{height:80px;display:flex;align-items:center;border-bottom:1.5px solid var(--border-color)}
.navbar .bungkus{display:flex;align-items:center;justify-content:space-between;gap:20px}
.merek{display:flex;align-items:center;gap:12px;font-family:var(--font-heading);font-weight:800;
  font-size:1.5rem;text-transform:uppercase}
.merek img{height:38px;width:auto}
.tautan-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tautan-nav a{padding:8px 14px;border-radius:var(--radius-xl);font-family:var(--font-ui);
  font-size:.84rem;font-weight:600;color:var(--text-secondary)}
.tautan-nav a:hover{color:#fff;background:var(--glass-bg)}
.tautan-nav a.aktif{background:var(--theme-color);color:#060606}
main{padding:52px 0 80px}
.judul-hal{font-size:clamp(2rem,5vw,3rem);padding-bottom:16px;margin-bottom:12px;
  border-bottom:2px solid var(--text-primary)}
.sub{color:var(--text-secondary);margin-bottom:32px;max-width:62ch}
.panel{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--radius-md);
  padding:32px;max-width:520px}
.panel.lebar{max-width:none}
label{display:block;font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-muted);margin:18px 0 7px}
input[type=text],input[type=email],input[type=password]{width:100%;padding:13px 15px;
  background:var(--bg-primary);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);
  color:#fff;font-family:var(--font-body);font-size:.98rem}
input:focus{outline:none;border-color:var(--theme-color)}
.tombol{display:inline-block;padding:13px 28px;border-radius:var(--radius-xl);font-family:var(--font-ui);
  font-weight:700;font-size:.88rem;cursor:pointer;border:1.5px solid transparent;
  background:var(--theme-color);color:#060606;margin-top:24px}
.tombol:hover{background:var(--theme-color-hover)}
.tombol.garis{background:transparent;border-color:var(--border-color);color:#fff}
.tombol.garis:hover{border-color:var(--theme-color);color:var(--theme-color)}
.tombol[disabled]{opacity:.4;cursor:not-allowed}
.pesan{padding:14px 16px;border-radius:var(--radius-sm);font-size:.92rem;margin-bottom:20px;
  border:1.5px solid}
.pesan.galat{border-color:var(--galat);color:var(--galat)}
.pesan.baik{border-color:var(--ok);color:var(--ok)}
.bantu{margin-top:20px;color:var(--text-muted);font-size:.88rem}
.bantu a{color:var(--theme-color);font-weight:600}
.kisi{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.kartu{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--radius-md);
  padding:28px;display:flex;flex-direction:column}
.kartu h3{font-size:1.4rem;margin-bottom:6px}
.harga{font-family:var(--font-heading);font-size:2.6rem;line-height:1.1;margin:12px 0 4px;
  background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.harga small{font-family:var(--font-ui);font-size:.8rem;color:var(--text-muted);
  -webkit-text-fill-color:var(--text-muted);letter-spacing:1px}
.lencana{display:inline-block;font-family:var(--font-ui);font-size:.68rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;padding:4px 13px;border-radius:var(--radius-xl);
  border:1.5px solid}
.lencana.aktif{color:var(--ok);border-color:var(--ok)}
.lencana.mati{color:var(--text-muted);border-color:var(--border-color)}
.lencana.tunggu{color:var(--tunggu);border-color:var(--tunggu)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-color)}
th{font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--text-muted)}
.rincian{list-style:none;display:grid;gap:8px;margin:16px 0 22px}
.rincian li{position:relative;padding-left:20px;color:var(--text-secondary);font-size:.9rem}
.rincian li::before{content:"✓";position:absolute;left:0;color:var(--theme-color);font-weight:700}
.menu-tf{text-decoration:none;transition:all var(--transition-medium)}
.menu-tf .ic{font-size:2rem}
.menu-tf h3{font-size:1.6rem}

/* ============================================================
   Kelas pengganti atribut style="" (audit 12 Agustus 2026)

   Atribut style="" ikut diblokir Content-Security-Policy ketika style-src
   tidak mengizinkan 'unsafe-inline' — sama seperti blok <style>. Karena itu
   nilai yang dulu ditulis langsung pada elemen dipindahkan ke sini.

   Yang dipakai berulang menjadi kelas utilitas; yang khas satu halaman
   menjadi kelas bernama sesuai perannya.
   ============================================================ */

/* --- utilitas tata letak --- */
.mt-auto   { margin-top: auto }
.mt-6      { margin-top: 6px }
.mt-8      { margin-top: 8px }
.mt-12     { margin-top: 12px }
.mt-14     { margin-top: 14px }
.mt-16     { margin-top: 16px }
.mt-18     { margin-top: 18px }
.mt-22     { margin-top: 22px }
.mt-26     { margin-top: 26px }
.mt-28     { margin-top: 28px }
.mt-32     { margin-top: 32px }
.mb-6      { margin-bottom: 6px }
.mb-8      { margin-bottom: 8px }
.mb-18     { margin-bottom: 18px }
.ml-10     { margin-left: 10px }
.gulir-x   { overflow-x: auto }
.lebar-penuh { grid-column: 1 / -1 }
/* Kekhususan sengaja disamakan dengan .panel.lebar (dua kelas). Tanpa ini,
   .panel.lebar{max-width:none} selalu menang dan lebar yang diminta halaman
   diabaikan diam-diam — persis yang terjadi sebelum perbaikan ini. */
.tanpa-batas.tanpa-batas { max-width: none }
.lebar-760.lebar-760     { max-width: 760px }
.lebar-64ch.lebar-64ch   { max-width: 64ch }

/* --- utilitas teks --- */
.t-kedua   { color: var(--text-secondary) }
.t-samar   { color: var(--text-muted) }
.t-tema    { color: var(--theme-color) }
.t-tebal   { font-weight: 700 }
.f-82      { font-size: .82rem }
.f-86      { font-size: .86rem }
.f-90      { font-size: .9rem }
.f-92      { font-size: .92rem }
.f-93      { font-size: .93rem }
.f-95      { font-size: .95rem }
.f-125     { font-size: 1.25rem }
.f-18r     { font-size: 1.8rem }

/* --- gabungan yang sering muncul --- */
.ket-kartu    { color: var(--text-secondary); font-size: .93rem }
.ket-kartu-kecil { color: var(--text-secondary); font-size: .9rem }
.ket-samar    { color: var(--text-muted); font-size: .82rem; margin-top: 8px }
.tautan-balik { color: var(--theme-color); font-family: var(--font-ui);
                font-weight: 700; font-size: .85rem }
.tautan-tebal { color: var(--theme-color); font-weight: 700 }

/* --- judul bagian dengan garis bawah tebal --- */
.judul-bagian { font-size: 1.5rem; padding-bottom: 12px;
                border-bottom: 2px solid #fff; margin: 40px 0 18px }
.judul-bagian.kecil { font-size: 1.4rem; padding-bottom: 10px; margin: 32px 0 8px }
.judul-bagian.rapat { font-size: 1.4rem; padding-bottom: 10px; margin: 34px 0 16px }
.judul-bagian.jauh  { font-size: 1.4rem; padding-bottom: 10px; margin: 44px 0 8px }

/* --- lencana meta pada kartu paket --- */
.paket-meta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap }
.pil-meta   { font-family: var(--font-ui); font-size: .72rem; color: var(--text-muted);
              border: 1px solid var(--border-color); padding: 4px 12px; border-radius: 99px }

/* --- kotak pesan dengan warna pinggir yang berbeda --- */
.pesan.tema   { border-color: var(--theme-color) }
.pesan.tunggu { border-color: var(--tunggu) }
.pesan.netral { border-color: var(--border-color) }
.pesan.bahaya { border-color: var(--galat) }
.pesan.t-kedua { color: var(--text-secondary) }

/* --- kotak bacaan dan gambar pada halaman latihan --- */
.kotak-pendukung { margin-bottom: 24px; padding: 20px 22px; border-radius: 8px;
                   background: var(--bg-primary); border: 1px solid var(--border-color) }
.kotak-pendukung.bergulir { max-height: 46vh; overflow-y: auto }
.label-pendukung { display: block; font-family: var(--font-ui); font-size: .72rem;
                   letter-spacing: 2px; text-transform: uppercase;
                   color: var(--text-muted); margin-bottom: 10px }
.isi-pendukung   { color: var(--text-secondary); font-size: .96rem; line-height: 1.85;
                   white-space: pre-wrap }
.penghitung      { font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
                   letter-spacing: 2px; text-transform: uppercase;
                   color: var(--text-muted); margin-bottom: 14px }
.batang-soal     { font-size: 1.1rem; font-weight: 500; margin-bottom: 22px;
                   line-height: 1.75; white-space: pre-wrap }
.daftar-opsi     { display: grid; gap: 10px }

/* --- umpan balik jawaban pada latihan --- */
.umpan       { margin-top: 20px; padding: 18px 20px; border-radius: 8px;
               background: var(--bg-primary); border-left: 3px solid var(--theme-color) }
.umpan b     { display: block; font-family: var(--font-ui); font-size: .75rem;
               letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px }
.umpan span  { color: var(--text-secondary); font-size: .93rem }
.umpan-benar { color: var(--ok) }
.umpan-salah { color: var(--galat) }

/* --- tombol pilihan jawaban pada latihan (dirakit JavaScript) --- */
.opsi-tbl { display: flex; align-items: flex-start; gap: 14px; width: 100%;
            text-align: left; padding: 14px 16px; background: var(--bg-primary);
            border: 1.5px solid var(--border-color); border-radius: 8px;
            color: var(--text-primary); font-size: .96rem; font-family: var(--font-body) }
.opsi-tbl .huruf { flex: none; width: 28px; height: 28px; display: grid;
                   place-items: center; border-radius: 8px; border: 1.5px solid currentColor;
                   font-family: var(--font-ui); font-weight: 700; font-size: .78rem }
.opsi-tbl.kunci { border-color: var(--ok);    color: var(--ok) }
.opsi-tbl.salah { border-color: var(--galat); color: var(--galat) }

/* --- navigasi bawah pada latihan --- */
.nav-latihan { display: flex; justify-content: space-between; gap: 12px;
               margin-top: 22px; flex-wrap: wrap }

/* --- pemutar rekaman pada latihan --- */
.kotak-audio       { margin-bottom: 24px; padding: 18px 20px; border-radius: 8px;
                     background: var(--bg-primary); border: 1px solid var(--border-color) }
.kotak-audio audio { width: 100% }
.kotak-audio p     { color: var(--text-muted); font-size: .8rem; margin-top: 8px }

/* --- bilah ketepatan pada halaman hasil PCPM --- */
.bar-luar { display: inline-block; width: 120px; height: 8px; border-radius: 99px;
            background: var(--bg-primary); vertical-align: middle; overflow: hidden }
.bar-isi  { display: block; height: 100% }
.bar-isi.baik   { background: var(--ok) }
.bar-isi.sedang { background: var(--tunggu) }
.bar-isi.kurang { background: var(--galat) }
.angka-persen { display: inline-block; min-width: 46px }
.skor-besar   { font-size: 3.4rem; font-weight: 800; line-height: 1.1; margin: 6px 0 18px }
.skor-besar span { font-size: 1.6rem }

/* --- kartu menu TOEFL --- */
.menu-tf { text-decoration: none; transition: all var(--transition-medium) }
.menu-tf .ic { font-size: 2rem }
.menu-tf h3  { font-size: 1.6rem }

/* Lebar bilah dalam persen. Dipakai halaman hasil, menggantikan
   style="width:..%" yang akan diblokir Content-Security-Policy. */
.w-0 { width: 0% }
.w-1 { width: 1% }
.w-2 { width: 2% }
.w-3 { width: 3% }
.w-4 { width: 4% }
.w-5 { width: 5% }
.w-6 { width: 6% }
.w-7 { width: 7% }
.w-8 { width: 8% }
.w-9 { width: 9% }
.w-10 { width: 10% }
.w-11 { width: 11% }
.w-12 { width: 12% }
.w-13 { width: 13% }
.w-14 { width: 14% }
.w-15 { width: 15% }
.w-16 { width: 16% }
.w-17 { width: 17% }
.w-18 { width: 18% }
.w-19 { width: 19% }
.w-20 { width: 20% }
.w-21 { width: 21% }
.w-22 { width: 22% }
.w-23 { width: 23% }
.w-24 { width: 24% }
.w-25 { width: 25% }
.w-26 { width: 26% }
.w-27 { width: 27% }
.w-28 { width: 28% }
.w-29 { width: 29% }
.w-30 { width: 30% }
.w-31 { width: 31% }
.w-32 { width: 32% }
.w-33 { width: 33% }
.w-34 { width: 34% }
.w-35 { width: 35% }
.w-36 { width: 36% }
.w-37 { width: 37% }
.w-38 { width: 38% }
.w-39 { width: 39% }
.w-40 { width: 40% }
.w-41 { width: 41% }
.w-42 { width: 42% }
.w-43 { width: 43% }
.w-44 { width: 44% }
.w-45 { width: 45% }
.w-46 { width: 46% }
.w-47 { width: 47% }
.w-48 { width: 48% }
.w-49 { width: 49% }
.w-50 { width: 50% }
.w-51 { width: 51% }
.w-52 { width: 52% }
.w-53 { width: 53% }
.w-54 { width: 54% }
.w-55 { width: 55% }
.w-56 { width: 56% }
.w-57 { width: 57% }
.w-58 { width: 58% }
.w-59 { width: 59% }
.w-60 { width: 60% }
.w-61 { width: 61% }
.w-62 { width: 62% }
.w-63 { width: 63% }
.w-64 { width: 64% }
.w-65 { width: 65% }
.w-66 { width: 66% }
.w-67 { width: 67% }
.w-68 { width: 68% }
.w-69 { width: 69% }
.w-70 { width: 70% }
.w-71 { width: 71% }
.w-72 { width: 72% }
.w-73 { width: 73% }
.w-74 { width: 74% }
.w-75 { width: 75% }
.w-76 { width: 76% }
.w-77 { width: 77% }
.w-78 { width: 78% }
.w-79 { width: 79% }
.w-80 { width: 80% }
.w-81 { width: 81% }
.w-82 { width: 82% }
.w-83 { width: 83% }
.w-84 { width: 84% }
.w-85 { width: 85% }
.w-86 { width: 86% }
.w-87 { width: 87% }
.w-88 { width: 88% }
.w-89 { width: 89% }
.w-90 { width: 90% }
.w-91 { width: 91% }
.w-92 { width: 92% }
.w-93 { width: 93% }
.w-94 { width: 94% }
.w-95 { width: 95% }
.w-96 { width: 96% }
.w-97 { width: 97% }
.w-98 { width: 98% }
.w-99 { width: 99% }
.w-100 { width: 100% }
.mb-28 { margin-bottom: 28px }
.mb-22 { margin-bottom: 22px }

/* --- penggambar soal figural (markup dirakit /js/app/gambar-soal.js) --- */
.gs-panel { padding: 18px 20px; border-radius: 8px; background: var(--bg-primary);
            border: 1px solid var(--border-color); margin-bottom: 22px; overflow-x: auto }
.gs-uji   { border-top: 1px solid var(--border-color); padding-top: 14px; margin-top: 4px }
.gs-baris { margin-bottom: 16px }
.gs-judul { font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase;
            color: var(--text-muted); margin-bottom: 8px }
.gs-deret { display: flex; gap: 12px; flex-wrap: wrap }
.gs-figur { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px }
.gs-svg   { color: var(--text-primary); border: 1px solid var(--border-color);
            border-radius: 8px; background: var(--bg-primary) }
.gs-label { font-family: var(--font-ui); font-size: .68rem; letter-spacing: 1px;
            text-transform: uppercase; color: var(--text-muted) }

/* --- Digit Symbol --- */
.gs-simbol { stroke: currentColor; stroke-width: 2; fill: none;
             stroke-linecap: round; stroke-linejoin: round; color: var(--text-primary) }
.gs-kunci  { margin-bottom: 18px }
.gs-kunci-tabel { border-collapse: collapse; width: auto }
.gs-kunci-tabel td { border: 1px solid var(--border-color); padding: 6px 10px;
                     text-align: center; min-width: 46px }
.gs-kunci-angka td { font-family: var(--font-ui); font-weight: 700; font-size: .9rem;
                     color: var(--text-secondary); background: var(--bg-secondary) }
.gs-kunci-simbol td { line-height: 0 }
.gs-tanya  { display: flex; flex-direction: column; align-items: center; gap: 10px;
             padding-top: 18px }
.gs-tanya-teks  { font-family: var(--font-ui); font-size: .8rem; letter-spacing: 1px;
                  text-transform: uppercase; color: var(--text-muted) }
.gs-tanya-angka { font-family: var(--font-heading); font-size: 3rem; line-height: 1 }

/* ---------- Halaman pembahasan ---------- */
.saring { display: flex; gap: 8px; flex-wrap: wrap }
.tbl-saring { padding: 9px 18px; border-radius: 99px; border: 1.5px solid var(--border-color);
              background: transparent; color: var(--text-secondary);
              font-family: var(--font-ui); font-weight: 700; font-size: .8rem; cursor: pointer }
.tbl-saring:hover { border-color: var(--theme-color); color: var(--theme-color) }
.tbl-saring.aktif { background: var(--theme-color); border-color: var(--theme-color); color: #060606 }

.bahas-kartu { background: var(--bg-card); border: 1.5px solid var(--border-color);
               border-left-width: 4px; border-radius: var(--radius-md);
               padding: 24px; margin-bottom: 18px }
.bahas-kartu.benar  { border-left-color: var(--ok) }
.bahas-kartu.salah  { border-left-color: var(--galat) }
.bahas-kartu.kosong { border-left-color: var(--text-muted) }

.bahas-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px }
.bahas-nomor { font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
               letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted) }
.bahas-kategori { font-family: var(--font-ui); font-size: .72rem; color: var(--text-muted);
                  border: 1px solid var(--border-color); padding: 3px 10px; border-radius: 99px }

.bahas-opsi-daftar { display: grid; gap: 8px; margin-top: 4px }
.bahas-opsi { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px;
              border: 1.5px solid var(--border-color); border-radius: 8px;
              background: var(--bg-primary); font-size: .95rem }
.bahas-opsi .huruf { flex: none; width: 26px; height: 26px; display: grid; place-items: center;
                     border-radius: 7px; border: 1.5px solid currentColor;
                     font-family: var(--font-ui); font-weight: 700; font-size: .74rem }
.bahas-opsi .bahas-teks { flex: 1 }
.bahas-opsi.kunci { border-color: var(--ok); color: var(--ok) }
.bahas-opsi.salah { border-color: var(--galat); color: var(--galat) }
.bahas-tanda { font-family: var(--font-ui); font-size: .66rem; font-weight: 700;
               letter-spacing: 1px; text-transform: uppercase; opacity: .85; align-self: center }

.bahas-lipat { margin-bottom: 14px; border: 1px solid var(--border-color);
               border-radius: 8px; background: var(--bg-primary) }
.bahas-lipat summary { cursor: pointer; padding: 12px 16px; font-family: var(--font-ui);
                       font-size: .8rem; font-weight: 700; color: var(--text-secondary) }
.bahas-lipat summary:hover { color: var(--theme-color) }
.bahas-lipat .isi-pendukung { padding: 0 16px 16px }

.lencana.galat { color: var(--galat); border-color: var(--galat) }
#daftarBahas:focus-visible { outline: 2px solid var(--theme-color); outline-offset: 6px }

/* ---------- Remah roti ---------- */
.remah { margin-bottom: 18px }
.remah ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
            gap: 6px; margin: 0; padding: 0 }
.remah li { display: flex; align-items: center; gap: 6px;
            font-family: var(--font-ui); font-size: .78rem; color: var(--text-muted) }
.remah li + li::before { content: "›"; color: var(--border-color) }
.remah a { color: var(--text-secondary) }
.remah a:hover { color: var(--theme-color) }
.remah [aria-current="page"] { color: var(--text-muted) }

/* ---------- Rujukan rumus Excel ---------- */
.rumus-kode { font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
              font-size: .95rem; background: var(--bg-primary); color: var(--theme-color);
              border: 1px solid var(--border-color); border-radius: 8px;
              padding: 14px 16px; overflow-x: auto; white-space: pre-wrap;
              word-break: break-word; margin: 0 }
.rumus-contoh { margin-bottom: 16px }
.rumus-contoh .ket-kartu { margin-top: 8px }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
       font-size: .9em; background: var(--bg-primary); padding: 2px 6px; border-radius: 5px }