/* ══════════════════════════════════════════════════════════
   LAKON — ASESMEN & HASIL
   Dipakai oleh tes.html dan hasil.html.
   Semua warna, font, dan jarak diatur dari :root di bawah.
   ══════════════════════════════════════════════════════════ */

:root {
  /* dasar */
  --krem:        #F7F2E9;
  --krem-terang: #FCFAF5;
  --tinta:       #221F1A;
  --teks:        #57514A;
  --teks-samar:  #6B645A;
  --kabur:       #8C8071;
  --garis:       #E8E0D1;
  --garis-kuat:  #E3DACB;
  --garis-halus: #EDE5D7;
  --garis-tebal: #C4B7A0;

  /* aksen */
  --clay:        #9E5029;
  --clay-gelap:  #7A3D1F;
  --clay-muda:   #F7E2D5;
  --clay-teks:   #6B5346;
  --sage:        #55654A;
  --sage-tua:    #4F6041;
  --sage-muda:   #DFE6D6;
  --sage-garis:  #CBD8BC;
  --sage-teks:   #46503D;

  /* enam Kelompok — dipakai di heksagon, bar, lencana */
  --k-yasa:   #B4613A;  --k-yasa-teks:  #A0552F;
  --k-nalar:  #5B7891;  --k-nalar-teks: #4E6B84;
  --k-karya:  #8A6A87;  --k-karya-teks: #7A5B77;
  --k-bakti:  #55654A;  --k-bakti-teks: #4A5940;
  --k-karsa:  #B58538;  --k-karsa-teks: #8F6A2C;
  --k-tata:   #77796A;  --k-tata-teks:  #63655A;

  /* empat Watak */
  --w-reka:   #9E5029;
  --w-logika: #55654A;
  --w-jaga:   #8A7A5C;
  --w-guna:   #5B7891;

  /* zona kejelasan */
  --z-samar-bg:   #F0DCC9;  --z-samar-teks:   #7A5B48;  --z-samar-bar:  #C08A5E;
  --z-ringan-bg:  #D5E0E8;  --z-ringan-teks:  #3F5769;
  --z-netral-bg:  #E8E0D1;  --z-netral-teks:  #57514A;

  /* font */
  --serif: "Rasa", Georgia, "Times New Roman", serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tulis: "Caveat", "Segoe Script", cursive;

  --lebar: 1280px;
  --sisi: 56px;
  --r:  20px;
  --r-besar: 26px;
}

/* ─── dasar ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--krem);
  color: var(--teks);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); color: var(--tinta); margin: 0; line-height: 1.14; letter-spacing: -0.015em; font-weight: 400; }
/* Judul utama 500, judul isi 400 (keputusan Dedy, 20 Sep 2026, saat ganti ke Rasa) */
h1 { font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--clay-gelap); }

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

.lewati { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--tinta); color: #fff; padding: 12px 20px; }
.lewati:focus { left: 0; color: #fff; }

.wadah { width: 100%; max-width: var(--lebar); margin: 0 auto; padding-inline: var(--sisi); }
.garis-tipis { border: 0; height: 1px; background: var(--garis-halus); margin: 0; }

/* ─── tombol ────────────────────────────────────────────── */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1;
  padding: 16px 30px; border-radius: 999px; min-height: 52px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tbl--utama { background: var(--clay); color: #fff; }
.tbl--utama:hover { background: var(--clay-gelap); color: #fff; }
.tbl--garis { background: transparent; border-color: var(--garis-tebal); color: var(--teks); font-weight: 600; }
.tbl--garis:hover { border-color: var(--tinta); color: var(--tinta); }
.tbl--tegas { background: transparent; border-color: var(--tinta); color: var(--tinta); font-weight: 600; }
.tbl--tegas:hover { background: var(--tinta); color: var(--krem); }
.tbl--sage { background: transparent; border-color: var(--sage-tua); color: #3D4A33; font-weight: 600; }
.tbl--sage:hover { background: var(--sage-tua); color: #fff; }
.tbl--kecil { font-size: 13px; font-weight: 500; padding: 10px 16px; min-height: 40px; border-color: var(--garis-kuat); background: var(--krem-terang); color: var(--teks); }
.tbl--penuh { width: 100%; }
.tbl--besar { font-size: 16px; padding: 18px 34px; min-height: 56px; }
.tbl[disabled] { background: #D9CDB8; color: var(--kabur); cursor: not-allowed; border-color: transparent; }
.tbl[disabled]:hover { background: #D9CDB8; color: var(--kabur); }

.lencana { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 6px 13px; border-radius: 999px; }
.lencana--clay { background: var(--clay); color: #fff; }
.lencana--sage { background: var(--sage); color: #fff; }
.lencana--gelap { background: #2F3A44; color: #fff; }
.lencana--garis { border: 1.5px solid #C3AEC0; color: #7A5B77; }

.mata { font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--clay); }

/* ─── kop ───────────────────────────────────────────────── */
.kop { border-bottom: 1px solid transparent; }
.kop--garis { border-bottom-color: var(--garis); }
.kop__isi { max-width: var(--lebar); margin: 0 auto; padding: 18px var(--sisi); display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.logo { display: flex; align-items: center; gap: 9px; color: var(--sage); }
.logo span { font-family: var(--serif); font-size: 23px; font-weight: 500; color: var(--tinta); }
.logo--terang { color: var(--sage-muda); }
.logo--terang span { color: var(--krem); }

.kop__kanan { display: flex; align-items: center; gap: 12px; }
.kop__nota { font-size: 13px; color: var(--teks-samar); }

.kop__nav { display: flex; align-items: center; gap: 28px; }
.kop__nav a { font-size: 15px; color: var(--teks); padding-bottom: 4px; border-bottom: 2px solid transparent; }
.kop__nav a:hover { color: var(--tinta); }
.kop__nav a.is-aktif { color: var(--tinta); font-weight: 500; border-color: var(--clay); }

.akun { display: flex; align-items: center; gap: 9px; }
.akun__inisial { width: 34px; height: 34px; border-radius: 999px; background: var(--sage-muda); color: var(--sage-tua); font-family: var(--serif); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.akun span { font-size: 14px; color: var(--tinta); }

/* ══════════════════════════════════════════════════════════
   TES — kerangka layar
   ══════════════════════════════════════════════════════════ */
.layar { display: none; min-height: 100vh; flex-direction: column; }
.layar.is-aktif { display: flex; }

/* ─── pembuka ───────────────────────────────────────────── */
.pembuka { flex-grow: 1; display: flex; align-items: flex-start; gap: 56px; padding-block: 40px 60px; }
.pembuka__kiri { width: 600px; flex-shrink: 0; }
.pembuka h1 { font-size: clamp(2.2rem, 4.4vw, 3.375rem); font-weight: 500; margin-top: 14px; }
.langkah { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.langkah li { display: flex; gap: 16px; align-items: flex-start; }
.langkah b { display: block; font-size: 17px; font-weight: 600; color: var(--tinta); font-family: var(--sans); }
.langkah p { font-size: 15px; line-height: 1.6; margin-top: 2px; }
.nomor { width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; background: var(--clay-muda); color: var(--clay); font-family: var(--serif); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.panel {
  flex-grow: 1; background: var(--krem-terang); border: 1px solid var(--garis);
  border-radius: 22px; padding: 30px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 18px 44px rgba(34, 31, 26, .06);
}
.panel h2 { font-size: 25px; font-weight: 400; }
.panel__sub { font-size: 14px; line-height: 1.55; color: var(--teks-samar); margin-top: -8px; }

.gratis { display: flex; flex-direction: column; gap: 10px; }
.gratis li { display: flex; gap: 12px; align-items: center; background: var(--krem); border-radius: 12px; padding: 13px 15px; font-size: 14px; line-height: 1.5; color: #443F38; }
.gratis b { color: var(--tinta); }
.centang { width: 20px; height: 20px; flex-shrink: 0; border-radius: 999px; background: var(--sage); display: flex; align-items: center; justify-content: center; }

.nota { border-radius: 14px; padding: 15px 17px; display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.55; }
.nota svg { flex-shrink: 0; margin-top: 2px; }
.nota--clay { background: var(--clay-muda); color: var(--clay-teks); }
.nota--sage { background: var(--sage-muda); color: var(--sage-teks); border: 1px solid var(--sage-garis); }
.nota--putus { background: var(--krem); border: 1px dashed #D9CDB8; color: var(--teks-samar); }

.mikro { text-align: center; font-size: 13px; color: var(--teks-samar); }

/* ─── progres ───────────────────────────────────────────── */
.progres { padding-block: 6px 0; display: flex; flex-direction: column; gap: 9px; }
.progres__baris { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.progres__kiri { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.progres__judul { font-size: 14px; font-weight: 600; color: var(--tinta); }
.progres__sub { font-size: 14px; color: var(--teks-samar); }
.progres__hitung { font-size: 14px; color: var(--teks-samar); }
.progres__hitung strong { color: var(--tinta); }
.progres__persen { color: var(--clay); font-weight: 600; }

.rel { height: 8px; background: var(--garis); border-radius: 999px; overflow: hidden; display: flex; }
.rel__isi { background: var(--clay); border-radius: 999px; transition: width .25s ease; }
.rel--selesai .rel__isi { background: var(--sage); }

.tahap { display: flex; gap: 6px; font-size: 11px; color: var(--kabur); }
.tahap li { text-align: center; padding: 4px 0; border-radius: 4px; }
.tahap li[data-lebar="48"] { flex: 48; }
.tahap li[data-lebar="10"] { flex: 10; }
.tahap li.is-kini { background: var(--garis-halus); color: var(--teks); }
.tahap li.is-selesai { color: var(--clay); }

/* ─── kartu soal ────────────────────────────────────────── */
.arena { flex-grow: 1; display: block; padding-block: 24px; }
.soal {
  width: 100%; background: var(--krem-terang); border: 1px solid var(--garis);
  border-radius: var(--r-besar); padding: 44px 52px 38px;
  box-shadow: 0 20px 50px rgba(34, 31, 26, .06);
}
.soal__tanya { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--kabur); text-transform: uppercase; }
.soal__kaki { margin-top: 28px; text-align: center; font-size: 13px; color: var(--kabur); }

/* format A — pasangan Watak */
.pasang { display: flex; align-items: center; gap: 26px; margin-top: 32px; }
.pasang__sisi { flex: 1; font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.0625rem); line-height: 1.22; font-weight: 400; color: var(--tinta); }
.pasang__sisi--kiri { text-align: right; }
.pasang__atau { flex-shrink: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: #B3A891; }

.skala { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 36px; }
.skala__titik {
  border-radius: 999px; border: 2px solid #D5C9B3; background: var(--krem-terang);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.skala__titik:hover { border-color: var(--garis-tebal); transform: scale(1.05); }
.skala__titik[data-ukuran="besar"] { width: 76px; height: 76px; border-color: var(--garis-tebal); }
.skala__titik[data-ukuran="sedang"] { width: 58px; height: 58px; }
.skala__titik[data-ukuran="kecil"] { width: 46px; height: 46px; border-color: #E0D5C0; }
.skala__titik[aria-pressed="true"] { background: var(--clay); border-color: var(--clay); }
.skala__titik[aria-pressed="true"] svg path { stroke: #fff; }
.skala__pisah { width: 1px; height: 46px; background: var(--garis); }
.skala__label { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 13px; }
.skala__label span { text-align: center; font-size: 12px; color: var(--kabur); }
.skala__label span[data-ukuran="besar"] { width: 76px; color: var(--teks); line-height: 1.35; }
.skala__label span[data-ukuran="sedang"] { width: 58px; }
.skala__label span[data-ukuran="kecil"] { width: 46px; }
.skala__label .skala__pisah { background: transparent; }

/* format B — pernyataan Minat */
.pernyataan {
  margin: 28px auto 0; max-width: 820px; text-align: center;
  font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.625rem);
  line-height: 1.16; font-weight: 400; color: var(--tinta);
}

/* format C — pilih dua */
.pilih__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; }
.pilih__kop h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 400; margin-top: 12px; }
.pencacah { flex-shrink: 0; display: flex; align-items: center; gap: 10px; background: var(--clay-muda); padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--clay-teks); }
.pencacah i { width: 11px; height: 11px; border-radius: 999px; border: 2px solid #C4A48E; }
.pencacah i.is-isi { background: var(--clay); border-color: var(--clay); }

.opsi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.opsi label {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: var(--krem); border: 2px solid var(--garis); border-radius: 16px; padding: 20px 22px;
  font-size: 17px; line-height: 1.45; color: var(--tinta);
  transition: background-color .15s ease, border-color .15s ease;
}
.opsi label:hover { border-color: var(--garis-tebal); }
.opsi input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--clay); }
.opsi input:checked + span { font-weight: 500; }
.opsi label:has(input:checked) { background: var(--clay-muda); border-color: var(--clay); }

/* ─── kaki navigasi ─────────────────────────────────────── */
.navigasi { padding-block: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.navigasi__petunjuk { font-size: 13px; color: var(--kabur); text-align: center; }
.navigasi__petunjuk strong { color: var(--teks); }
.tulis-tangan { font-family: var(--tulis); font-size: 21px; color: #B57A56; }

/* ─── jeda antar bagian ─────────────────────────────────── */
.jeda { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 60px var(--sisi); position: relative; overflow: hidden; }
.jeda > * { position: relative; }
.jeda h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 400; }
.jeda p { font-size: 16px; line-height: 1.6; max-width: 560px; }
.jeda__bukit { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: .8; }

/* ─── menghitung ────────────────────────────────────────── */
.hitung { flex-grow: 1; background: var(--tinta); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 60px var(--sisi); position: relative; overflow: hidden; }
.hitung > * { position: relative; }
.hitung h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 400; color: var(--krem); }
.hitung__rel { width: min(420px, 100%); height: 6px; background: #3A342C; border-radius: 999px; overflow: hidden; display: flex; }
.hitung__rel span { background: var(--clay); transition: width .4s ease; }
.hitung__daftar { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; margin-top: 4px; }
.hitung__daftar li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: #6E675C; }
.hitung__daftar li i { width: 16px; height: 16px; flex-shrink: 0; border-radius: 999px; border: 2px solid #4A443C; }
.hitung__daftar li.is-jalan { color: #D6CFC0; }
.hitung__daftar li.is-jalan i { border-color: var(--clay); }
.hitung__daftar li.is-selesai { color: #A39C90; }
.hitung__daftar li.is-selesai i { border: 0; background: var(--sage); display: flex; align-items: center; justify-content: center; }
.hias { position: absolute; opacity: .14; pointer-events: none; }
.hias--kiri { left: -64px; bottom: -80px; width: 260px; }
.hias--kanan { right: -48px; top: -60px; width: 220px; }

/* ─── form identitas ────────────────────────────────────── */
.identitas { flex-grow: 1; display: flex; align-items: center; justify-content: center; gap: 52px; padding-block: 40px 60px; position: relative; }
.identitas__kiri { width: 470px; flex-shrink: 0; }
.identitas h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 500; margin-top: 18px; }
.identitas__kiri > p { font-size: 17px; line-height: 1.65; margin-top: 16px; }
.jaminan { display: flex; flex-direction: column; gap: 11px; margin-top: 24px; }
.jaminan li { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--teks); }
.jaminan svg { flex-shrink: 0; }

.form { width: 468px; flex-shrink: 0; }
.form__baris { display: flex; gap: 14px; }
.isian { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.isian label { font-size: 13px; font-weight: 600; color: var(--tinta); }
.isian label em { font-style: normal; font-weight: 400; color: var(--kabur); }
.isian input, .isian select {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--tinta);
  background: var(--krem); border: 1px solid var(--garis-kuat); border-radius: 12px; padding: 15px 16px;
}
.isian input::placeholder { color: #A89A84; }
.isian input:focus, .isian select:focus { border-color: var(--clay); }
.setuju { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--teks); }
.setuju input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--clay); }

/* ══════════════════════════════════════════════════════════
   HASIL
   ══════════════════════════════════════════════════════════ */
.hasil { padding-block: 28px 40px; display: flex; gap: 22px; align-items: flex-start; }
.hasil__kiri { width: 396px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.hasil__kanan { flex-grow: 1; display: flex; flex-direction: column; gap: 16px; }

.kartu { background: var(--krem-terang); border: 1px solid var(--garis); border-radius: 24px; padding: 26px 30px; }
.kartu__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kartu__kop h2 { font-size: 26px; font-weight: 400; }
.kartu__ket { font-size: 13px; color: var(--teks-samar); }
.kartu__ket strong { color: var(--tinta); }

.paraga { display: flex; flex-direction: column; gap: 14px; padding: 30px; }
.paraga h1 { font-size: clamp(2.2rem, 4vw, 3.125rem); line-height: 1; font-weight: 500; letter-spacing: -0.02em; }
.paraga__inggris { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--teks); margin-top: 8px; }
.paraga__tag { display: flex; flex-wrap: wrap; gap: 7px; }
.paraga__narasi { font-size: 16px; line-height: 1.6; color: #443F38; }

.slot {
  height: 186px; border: 2px dashed #C6BAA6; border-radius: 18px; background: var(--krem);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 0 24px; text-align: center; color: var(--kabur);
}
.slot strong { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.slot span { font-size: 12px; line-height: 1.5; }

/* heksagon + bar kelompok */
.minat { display: flex; gap: 28px; align-items: center; margin-top: 16px; }
.heksagon { width: 318px; height: 310px; flex-shrink: 0; }
.bar { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; }
.bar li { display: flex; align-items: center; gap: 13px; }
.bar__nama { width: 62px; font-size: 14px; }
.bar__rel { flex-grow: 1; height: 15px; background: var(--garis-halus); border-radius: 999px; overflow: hidden; display: flex; }
.bar__isi { border-radius: 999px; }
.bar__skor { width: 30px; font-size: 14px; color: var(--teks); text-align: right; }
.bar li.is-atas .bar__nama, .bar li.is-atas .bar__skor { font-weight: 700; color: var(--tinta); }

.k-yasa  .bar__isi, .isi-yasa  { background: var(--k-yasa); }
.k-nalar .bar__isi, .isi-nalar { background: var(--k-nalar); }
.k-karya .bar__isi, .isi-karya { background: var(--k-karya); }
.k-bakti .bar__isi, .isi-bakti { background: var(--k-bakti); }
.k-karsa .bar__isi, .isi-karsa { background: var(--k-karsa); }
.k-tata  .bar__isi, .isi-tata  { background: var(--k-tata); }
.k-yasa  .bar__nama { color: var(--k-yasa-teks); }
.k-nalar .bar__nama { color: var(--k-nalar-teks); }
.k-karya .bar__nama { color: var(--k-karya-teks); }
.k-bakti .bar__nama { color: var(--k-bakti-teks); }
.k-karsa .bar__nama { color: var(--k-karsa-teks); }
.k-tata  .bar__nama { color: var(--k-tata-teks); }

.tafsir { margin-top: 8px; background: var(--krem); border-radius: 12px; padding: 13px 15px; font-size: 13px; line-height: 1.55; color: var(--teks); }

/* empat dimensi */
.legenda { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--teks-samar); }
.legenda i { width: 11px; height: 11px; border-radius: 3px; background: var(--w-guna); }

.dimensi { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.dimensi li { background: var(--krem); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; }
.dimensi li.is-penentu { border-left: 4px solid var(--w-guna); }
.dimensi li.is-samar { background: #FBF1E9; border: 1px solid #F0DCC9; }
.dimensi li.is-samar.is-penentu { border-left: 4px solid var(--w-guna); }
.dim__nama { width: 96px; flex-shrink: 0; }
.dim__nama b { display: block; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--tinta); }
.dim__nama span { display: block; font-size: 11px; color: var(--kabur); }
.dim__kutub { width: 62px; font-size: 13px; color: var(--kabur); }
.dim__kutub--kiri { text-align: right; }
.dim__kutub.is-condong { font-weight: 600; color: var(--tinta); }
.dim__rel { flex-grow: 1; height: 12px; background: var(--garis); border-radius: 999px; position: relative; }
.dim__tengah { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--garis-tebal); }
.dim__isi { position: absolute; top: 0; height: 12px; border-radius: 999px; }
.dim__isi--kiri { right: 50%; }
.dim__isi--kanan { left: 50%; }
.dim__zona { width: 82px; font-size: 12px; font-weight: 700; padding: 6px 0; border-radius: 999px; text-align: center; }
.zona--kuat   { background: var(--w-guna); color: #fff; }
.zona--netral { background: var(--z-netral-bg); color: var(--z-netral-teks); }
.zona--ringan { background: var(--z-ringan-bg); color: var(--z-ringan-teks); }
.zona--samar  { background: var(--z-samar-bg);  color: var(--z-samar-teks); }

/* kekuatan */
.kekuatan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.kekuatan article { background: var(--krem-terang); border: 1px solid var(--garis); border-radius: 18px; padding: 24px; }
.kekuatan h3 { font-size: 20px; font-weight: 600; }
.kekuatan p { font-size: 15px; line-height: 1.6; margin-top: 9px; }

.bagian { padding-block: 34px; }
.bagian--terang { background: var(--krem-terang); border-top: 1px solid var(--garis); }
.bagian__judul { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bagian__judul h2 { font-size: 28px; font-weight: 600; }

/* salah paham + paraga terdekat */
.duo { display: flex; gap: 22px; align-items: stretch; }
.salahpaham { width: 468px; flex-shrink: 0; background: var(--clay-muda); border-radius: var(--r); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.salahpaham h2 { font-size: 25px; line-height: 1.2; font-weight: 600; }
.salahpaham p { font-size: 15px; line-height: 1.65; color: var(--clay-teks); }
.salahpaham p:last-child { font-size: 14px; color: #7A5B48; border-top: 1px solid #EFCDBA; padding-top: 12px; }

.terdekat { flex-grow: 1; display: flex; flex-direction: column; gap: 14px; }
.terdekat__kisi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.terdekat a { background: var(--krem); border: 1px solid var(--garis); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.terdekat a:hover { border-color: var(--garis-tebal); }
.terdekat b { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--tinta); }
.terdekat small { font-size: 12px; color: var(--teks-samar); }
.terdekat span { font-size: 13px; line-height: 1.55; color: var(--teks); border-top: 1px solid var(--garis); padding-top: 9px; }

/* bagian terkunci */
.terkunci { display: flex; gap: 30px; align-items: flex-start; }
.terkunci__kiri { flex-grow: 1; }
.terkunci__kiri > p { font-size: 15px; line-height: 1.6; margin-top: 10px; max-width: 660px; }
.gembok { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.gembok li { background: var(--krem); border: 1px solid var(--garis); border-radius: 16px; padding: 20px 22px; display: flex; gap: 18px; align-items: flex-start; }
.gembok__no { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: var(--clay-muda); color: var(--clay); font-family: var(--serif); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gembok__isi { flex-grow: 1; }
.gembok__judul { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gembok__judul b { font-size: 18px; font-weight: 600; color: var(--tinta); }
.gembok__judul span { font-size: 13px; color: var(--teks-samar); }
.gembok__cuil { margin-top: 7px; font-size: 14px; line-height: 1.6; font-style: italic; }
.gembok li > svg:last-child { flex-shrink: 0; margin-top: 4px; }

.upsell { width: 358px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.paket { border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.paket__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
.paket__harga { display: flex; align-items: baseline; gap: 6px; }
.paket__rp { font-size: 16px; }
.paket__angka { font-family: var(--serif); font-size: 36px; font-weight: 700; line-height: 1; }
.paket p { font-size: 14px; line-height: 1.6; }
.paket--gelap { background: var(--tinta); }
.paket--gelap .paket__label { color: #B8AF9E; }
.paket--gelap .paket__rp { color: #B8AF9E; }
.paket--gelap .paket__angka { color: var(--krem); }
.paket--gelap p { color: #D6CFC0; }
.paket--gelap .mikro { color: var(--kabur); }
.paket--sage { background: var(--sage-muda); border: 1px solid var(--sage-garis); }
.paket--sage .paket__label { color: var(--sage-tua); }
.paket--sage .paket__rp { color: #5B6A4F; }
.paket--sage .paket__angka { color: var(--tinta); }
.paket--sage p { color: var(--sage-teks); }

.nilai { background: var(--krem); border: 1px dashed #D9CDB8; border-radius: 18px; padding: 20px; }
.nilai b { font-size: 14px; font-weight: 600; color: var(--tinta); }
.nilai div { display: flex; gap: 8px; margin-top: 12px; }
.nilai button { flex: 1; cursor: pointer; border: 1px solid var(--garis-kuat); background: var(--krem-terang); font-family: var(--sans); font-size: 14px; color: var(--teks); padding: 11px 0; border-radius: 10px; min-height: 44px; }
.nilai button:hover { border-color: var(--garis-tebal); }
.nilai button[aria-pressed="true"] { border-color: var(--clay); background: var(--clay-muda); color: var(--clay); font-weight: 700; }

/* bagikan */
.bagikan { display: flex; align-items: center; gap: 30px; }
.kartubagi { width: 236px; flex-shrink: 0; background: var(--tinta); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.kartubagi__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--kabur); }
.kartubagi__nama { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--krem); line-height: 1; }
.kartubagi__ing { font-family: var(--serif); font-size: 14px; color: #B8AF9E; }
.kartubagi__url { font-size: 11px; color: #7E766A; margin-top: 2px; }
.bagikan__teks h2 { font-size: 25px; font-weight: 600; }
.bagikan__teks p { font-size: 15px; line-height: 1.6; margin-top: 9px; max-width: 560px; }
.bagikan__aksi { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* cta jelajah */
.jelajah { background: var(--clay-muda); }
.jelajah__isi { padding-block: 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.jelajah h2 { font-size: 24px; font-weight: 600; }
.jelajah p { font-size: 14px; color: #7A5B48; margin-top: 4px; }

/* footer */
.kaki { background: var(--tinta); color: #A39C90; padding-block: 34px 26px; }
.kaki__isi { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.kaki a { color: #D6CFC0; }
.kaki a:hover { color: #fff; }
.kaki p { font-size: 13px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIF
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  :root { --sisi: 36px; }
  .pembuka__kiri { width: 50%; }
  .hasil__kiri { width: 40%; }
  .heksagon { width: 260px; height: 254px; }
  .salahpaham { width: 42%; }
  .upsell { width: 320px; }
  .identitas__kiri, .form { width: 46%; }
}

@media (max-width: 960px) {
  :root { --sisi: 24px; }

  .kop__nota { display: none; }
  .kop__nav { display: none; }

  .pembuka { flex-direction: column; gap: 28px; }
  .pembuka__kiri { width: 100%; }

  .identitas { flex-direction: column; gap: 28px; align-items: stretch; }
  .identitas__kiri, .form { width: 100%; }

  .soal { padding: 32px 28px 28px; }
  .pasang { flex-direction: column; gap: 14px; }
  .pasang__sisi, .pasang__sisi--kiri { text-align: left; width: 100%; }
  .skala, .skala__label { gap: 16px; }

  .opsi { grid-template-columns: minmax(0, 1fr); }
  .pilih__kop { flex-direction: column; gap: 16px; }

  .hasil { flex-direction: column; }
  .hasil__kiri { width: 100%; }
  .minat { flex-direction: column; gap: 20px; }
  .heksagon { width: 100%; max-width: 330px; height: auto; }
  .bar { width: 100%; }

  .duo { flex-direction: column; }
  .salahpaham { width: 100%; }
  .terkunci { flex-direction: column; }
  .upsell { width: 100%; }
  .kekuatan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bagikan { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  :root { --sisi: 18px; }
  body { font-size: 15px; }

  .kop__isi { padding: 14px var(--sisi); }
  .logo span { font-size: 20px; }

  .arena { padding-block: 16px; }
  .soal { padding: 26px 20px 22px; border-radius: 20px; }
  .soal__kaki { margin-top: 20px; }

  /* skala jadi tombol besar, bukan lingkaran kecil */
  .skala { flex-wrap: wrap; gap: 10px; }
  .skala__pisah { display: none; }
  .skala__titik { flex: 1 1 calc(50% - 5px); border-radius: 14px; min-height: 56px; }
  .skala__titik[data-ukuran="besar"],
  .skala__titik[data-ukuran="sedang"],
  .skala__titik[data-ukuran="kecil"] { width: auto; height: auto; }
  .skala__label { display: none; }
  .skala__titik::after { content: attr(data-label); font-size: 14px; font-weight: 600; color: var(--teks); }
  .skala__titik[aria-pressed="true"]::after { color: #fff; }
  .skala__titik svg { display: none; }

  .navigasi { flex-wrap: wrap; gap: 12px; }
  .navigasi__petunjuk, .tulis-tangan { display: none; }
  .navigasi .tbl { flex: 1; }

  .tahap { font-size: 10px; }

  .terdekat__kisi { grid-template-columns: minmax(0, 1fr); }
  .kekuatan { grid-template-columns: minmax(0, 1fr); }
  .kartu, .paraga { padding: 22px 20px; }

  .dimensi li { flex-wrap: wrap; gap: 10px; }
  .dim__nama { width: 100%; }
  .dim__rel { order: 3; flex-basis: 100%; }
  .dim__zona { width: auto; padding-inline: 14px; }

  .bagikan__aksi .tbl { width: 100%; }
  .kartubagi { width: 100%; }
}

@media print {
  .kop, .navigasi, .upsell, .bagikan, .jelajah, .nilai { display: none !important; }
  body { background: #fff; }
  .paket--gelap, .kaki { background: #fff !important; color: #000 !important; }
}