/* KODELAHIR — tampilan aplikasi web.
   Palet WAJIB sama persis dengan laporan PDF (build_laporan_pdf.py) supaya
   halaman dan berkasnya terasa satu produk. Nilai heksa jangan diubah
   sepihak di sini saja. */

:root {
  --kertas:  #F6F3FA;   /* latar halaman baca            */
  --tinta:   #2E2545;   /* teks utama        13.0:1      */
  --tinta2:  #6B5F86;   /* teks kedua         5.3:1      */
  --ungu:    #4C4494;   /* judul & tombol     7.5:1      */
  --ungu-tua:#3B3475;
  --garis:   #DCD3EA;
  --blush:   #F2E9EF;
  --malam:   #241E48;   /* sampul & kepala               */
  --malam2:  #2C2558;
  --emas:    #E8C578;   /* aksen di atas gelap 9.4:1     */
  --gading:  #DED8EE;   /* teks di atas gelap 11.2:1     */
  --bahaya:  #7E2A44;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- kepala */
.kepala {
  background: linear-gradient(160deg, var(--malam) 0%, var(--malam2) 100%);
  color: var(--gading);
  padding: 28px 20px 30px;
  text-align: center;
  padding-top: max(28px, env(safe-area-inset-top));
}
.merek {
  font-size: 20px; font-weight: 700;
  letter-spacing: .22em; color: var(--emas);
}
.slogan {
  margin-top: 6px; font-size: 14px;
  color: var(--gading); opacity: .85; font-style: italic;
}

/* -------------------------------------------------------------- wadah */
.wadah { max-width: 560px; margin: 0 auto; padding: 22px 16px 8px; }

.kartu {
  background: #FFFFFF;
  border: 1px solid var(--garis);
  border-radius: 16px;
  padding: 26px 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 2px 14px rgba(36, 30, 72, .06);
}

h1 {
  margin: 0 0 10px; font-size: 25px; line-height: 1.28;
  color: var(--ungu); font-weight: 700;
}
h2 { margin: 0 0 8px; font-size: 18px; color: var(--ungu); }

.pengantar { margin: 0 0 20px; color: var(--tinta); }
.petunjuk  { margin: 7px 0 20px; font-size: 14.5px; color: var(--tinta2); line-height: 1.55; }
.catatan-kaki {
  margin: 22px 0 0; padding-top: 16px;
  border-top: 1px solid var(--garis);
  font-size: 14px; color: var(--tinta2);
}

a { color: var(--ungu); }
a:hover { color: var(--ungu-tua); }

/* ------------------------------------------------------------ borang */
label {
  display: block; margin-bottom: 7px;
  font-weight: 600; font-size: 15px; color: var(--tinta);
}

input[type=text], input[type=tel], select {
  width: 100%;
  /* 17px ke atas — di bawah itu Safari iOS memperbesar halaman sendiri */
  font-size: 17px;
  font-family: inherit;
  color: var(--tinta);
  background: #FFFFFF;
  padding: 13px 14px;
  border: 1.5px solid var(--garis);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #A79CBE; }

input:focus, select:focus {
  outline: none;
  border-color: var(--ungu);
  box-shadow: 0 0 0 3px rgba(76, 68, 148, .16);
}

.tiga { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 9px; }
.tiga select { padding: 13px 8px; }

button {
  width: 100%; margin-top: 4px;
  font-family: inherit; font-size: 17px; font-weight: 600;
  color: #FFFFFF; background: var(--ungu);
  padding: 15px 18px; border: none; border-radius: 10px;
  cursor: pointer; transition: background .15s;
}
button:hover:not(:disabled) { background: var(--ungu-tua); }
button:disabled { opacity: .55; cursor: progress; }

.galat {
  background: var(--blush);
  border-left: 4px solid var(--bahaya);
  color: var(--bahaya);
  padding: 13px 15px; border-radius: 8px;
  margin-bottom: 20px; font-size: 15.5px; line-height: 1.55;
}

/* ------------------------------------------------------------- tirai */
.tirai {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(36, 30, 72, .96);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.tirai[hidden] { display: none; }
.tirai-isi { color: var(--gading); max-width: 340px; }
.tirai-isi p { margin: 22px 0 0; font-size: 17px; }

.cincin {
  width: 54px; height: 54px; margin: 0 auto;
  border: 3px solid rgba(232, 197, 120, .25);
  border-top-color: var(--emas);
  border-radius: 50%;
  animation: putar 1s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cincin { animation-duration: 3s; }
}

/* --------------------------------------------------------------- kaki */
.kaki {
  max-width: 560px; margin: 0 auto;
  padding: 8px 22px calc(30px + env(safe-area-inset-bottom));
  font-size: 13px; line-height: 1.6; color: var(--tinta2);
}
.kaki p { margin: 8px 0; }

/* -------------------------------------------------------- tanda mode uji */
.pita-uji {
  background: var(--emas); color: var(--malam);
  text-align: center; padding: 7px 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.kartu-uji { background: var(--blush); }
.kartu-uji code {
  background: #FFFFFF; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--garis); font-size: 15px;
}
.kartu-uji ul { margin: 10px 0 0; padding-left: 22px; }
.kartu-uji li { margin: 6px 0; }

/* ══════════════════ HALAMAN HASIL ══════════════════
   PANGGUNG gelap penuh dari tepi ke tepi, bukan kartu putih lagi. Versi
   pertama halaman ini memakai empat kartu putih beruntun dengan irama yang
   sama persis, dan enam lingkaran berukuran identik — tidak ada titik fokus,
   sehingga terasa monoton. Sekarang segel jadi pusatnya, angka jadi
   pendukung, dan gelap-terang dipakai untuk mematahkan irama. */

.panggung {
  position: relative;
  overflow: hidden;
  /* balikkan padding .wadah supaya panggungnya penuh sampai tepi */
  margin: -22px -16px 20px;
  padding: 26px 20px 30px;
  background: radial-gradient(120% 80% at 50% 12%, #322A66 0%, var(--malam) 62%);
  text-align: center;
  color: var(--gading);
}

/* ── langit berbintang ── */
.langit { position: absolute; inset: 0; pointer-events: none; }
.langit i {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: #E8C578;
  opacity: .30;
  animation: kelip 4s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes kelip {
  0%, 100% { opacity: .12; }
  50%      { opacity: .55; }
}

.hasil-nama {
  position: relative; margin: 0;
  color: var(--gading); font-size: 15px; letter-spacing: .05em;
}
.hasil-tgl {
  position: relative; margin: 2px 0 0;
  color: #B0A6CE; font-size: 13px; font-style: italic;
}

/* ── segel yang menggambar dirinya sendiri ── */
.segel-wadah {
  position: relative;
  width: min(268px, 76vw);
  margin: 16px auto 0;
  aspect-ratio: 1;
}
.sinar {
  position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,197,120,.26) 0%,
                              rgba(232,197,120,0) 68%);
  animation: bernapas 4.5s ease-in-out infinite;
  animation-delay: 2.2s;
  opacity: 0;
}
@keyframes bernapas {
  0%, 100% { opacity: .5; transform: scale(.94); }
  50%      { opacity: 1;  transform: scale(1.04); }
}
.segel { position: relative; width: 100%; height: 100%; display: block; }

/* pathLength="1" di SVG membuat panjang tiap lintasan dinormalkan ke 1,
   jadi animasinya cukup menggeser dashoffset dari 1 ke 0. */
.segel .gs {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: gambar .95s ease-out forwards;
}
@keyframes gambar { to { stroke-dashoffset: 0; } }

.segel .g1 { animation-delay: .15s; }
.segel .g2 { animation-delay: .45s; }
.segel .g3 { animation-delay: .80s; animation-duration: 1.1s; }
.segel .g4 { animation-delay: 1.15s; animation-duration: 1.05s; }
.segel .g5 { animation-delay: 1.60s; }

.segel .tanda { opacity: 0; animation: kerlip .5s ease-out forwards; }
.segel .t1 { animation-delay: 2.00s; }
.segel .t2 { animation-delay: 2.15s; }
@keyframes kerlip {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}

.segel .inti {
  opacity: 0;
  transform-origin: 100px 100px;
  animation: inti-muncul .7s cubic-bezier(.2, 1.4, .4, 1) forwards;
  animation-delay: 2.25s;
}
@keyframes inti-muncul {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}

.segel-ket {
  position: relative;
  margin: 18px auto 0; max-width: 330px;
  font-size: 13px; line-height: 1.6; color: #B0A6CE;
  opacity: 0; animation: muncul .6s ease-out 2.6s forwards;
}
.segel-ket strong { color: var(--emas); font-weight: 600; }

/* ── pemisah ── */
.pisah {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  max-width: 260px; margin: 26px auto 22px;
  color: var(--emas); font-size: 12px;
}
.pisah span { flex: 1; height: 1px; background: #A98A47; opacity: .5; }

.panggung h1 {
  position: relative;
  margin: 0 0 20px; font-size: 20px; color: var(--emas);
  letter-spacing: .02em;
}

/* ── enam angka (pendukung, bukan lagi pusat) ── */
.peta {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px 8px; margin: 0 auto; max-width: 330px;
}
.simpul {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  opacity: 0;
  animation: muncul .5s ease-out forwards;
  animation-delay: calc(2.45s + var(--i, 0) * 130ms);
}
.bulat {
  width: 68px; height: 68px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(50, 42, 98, .8);
  border: 1.5px solid #A98A47;
}
.angka { font-size: 28px; font-weight: 700; line-height: 1; color: var(--gading); }
.simpul-label {
  /* 10.5px, bukan 9.5 — di layar HP ukuran sebelumnya terlalu kecil dibaca
     walau kontrasnya sudah lolos. Kontras bukan satu-satunya syarat terbaca. */
  font-size: 10.5px; letter-spacing: .07em; line-height: 1.3;
  color: #B0A6CE; text-align: center;
}

/* angka yang berulang — padanan cincin emas di PDF */
.simpul.sorot .bulat {
  border-color: var(--emas); border-width: 2px;
  box-shadow: 0 0 0 3px rgba(232, 197, 120, .20),
              0 0 18px rgba(232, 197, 120, .28);
}
.simpul.sorot .angka { color: var(--emas); }

.peta-kunci {
  position: relative; margin: 22px auto 0; max-width: 320px;
  font-size: 12.5px; line-height: 1.55; color: #B0A6CE;
}

@keyframes muncul {
  from { opacity: 0; transform: translateY(9px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

/* Kalau pembaca minta gerak dikurangi, semuanya langsung tampil utuh —
   tidak ada yang tersembunyi hanya karena animasinya dimatikan. */
@media (prefers-reduced-motion: reduce) {
  .langit i, .sinar { animation: none; opacity: .35; }
  .segel .gs { stroke-dashoffset: 0; animation: none; }
  .segel .tanda, .segel .inti, .simpul, .segel-ket {
    opacity: 1; transform: none; animation: none;
  }
}

/* ── tiga sorotan ── */
h2.jd { font-size: 19px; margin-bottom: 16px; }
.sorot-baris {
  display: flex; gap: 14px; align-items: flex-start;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--garis);
}
.sorot-baris:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.sorot-angka {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--blush); border: 1.5px solid #C8BEE0;
  color: var(--ungu); font-size: 19px; font-weight: 700;
}
.sorot-label {
  margin: 2px 0 3px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--tinta2);
}
.sorot-isi { margin: 0; font-size: 15.5px; line-height: 1.55; }
.sorot-isi strong { color: var(--ungu); }

/* ── tombol unduh ── */
.kartu-unduh { border-color: #C8BEE0; background: linear-gradient(#FFFFFF, #FAF7FD); }
.tombol {
  display: block; width: 100%; margin-top: 6px;
  text-align: center; text-decoration: none;
  font-size: 17px; font-weight: 600;
  color: #FFFFFF; background: var(--ungu);
  padding: 15px 18px; border-radius: 10px;
}
.tombol:hover { background: var(--ungu-tua); color: #FFFFFF; }

/* ── daftar bab ── */
.daftar-bab { margin: 0; padding-left: 20px; }
.daftar-bab li { margin-bottom: 15px; padding-left: 3px; }
.daftar-bab li::marker { color: var(--tinta2); font-size: 13px; }
.bab-judul { display: block; font-weight: 600; font-size: 15.5px; color: var(--ungu); }
.bab-inti {
  display: block; margin-top: 3px;
  font-size: 14.5px; line-height: 1.55; color: var(--tinta);
}

@media (max-width: 359px) {
  .bulat { width: 60px; height: 60px; }
  .angka { font-size: 25px; }
  .peta { gap: 14px 4px; }
}

/* ── bidang yang cocok ── */
.daftar-bidang { margin: 0; padding: 0; list-style: none; }
.daftar-bidang li {
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--garis);
}
.daftar-bidang li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.bidang-kepala { display: flex; gap: 11px; align-items: flex-start; }
.bidang-no {
  flex-shrink: 0;
  width: 26px; height: 26px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ungu); color: #FFFFFF;
  font-size: 14px; font-weight: 700;
}
.bidang-nama {
  font-size: 16.5px; font-weight: 600; line-height: 1.4;
  color: var(--ungu);
}
.bidang-alasan {
  margin: 8px 0 0 37px;
  font-size: 15px; line-height: 1.58; color: var(--tinta);
}
.bidang-asal {
  margin: 6px 0 0 37px;
  font-size: 12.5px; line-height: 1.5; color: var(--tinta2);
  font-style: italic;
}

@media (max-width: 359px) {
  .bidang-alasan, .bidang-asal { margin-left: 0; }
}

/* ── contoh pekerjaan, dalam bentuk keping ── */
.bidang-contoh-jd {
  margin: 12px 0 7px 37px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta2);
}
.bidang-contoh {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 0 37px; padding: 0; list-style: none;
}
.bidang-contoh li {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--blush);
  border: 1px solid #DDD0DA;
  font-size: 13.5px; line-height: 1.35;
  color: var(--tinta);
}
.bidang-asal { margin-top: 11px; }

@media (max-width: 359px) {
  .bidang-contoh-jd, .bidang-contoh { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BACAAN BERTAHAP di halaman hasil
   Ditambahkan 31 Agu 2026. Penguji melaporkan capek membaca satu laporan
   panjang sekali duduk, jadi isinya dipecah jadi sepuluh bagian yang
   dibuka satu per satu.
   ═════════════════════════════════════════════════════════════════════ */

/* .tombol semula hanya dipakai pada <a>. Sejak ada tombol "lanjut", ia juga
   dipasang di <button> — yang membawa gaya bawaan peramban sendiri. */
button.tombol {
  border: 0; cursor: pointer;
  font-family: inherit; line-height: 1.35;
}
button.tombol:disabled { cursor: default; }

/* ── ajakan mulai ── */
.kartu-mulai { border-color: #C8BEE0; background: linear-gradient(#FFFFFF, #FAF7FD); }
.mulai-ket { margin: 0 0 18px; }

/* ── penanda kemajuan yang menempel di atas ── */
.jejak {
  position: sticky; top: 0; z-index: 20;
  margin: 0 -16px 18px; padding: 9px 16px 10px;
  background: rgba(246, 243, 250, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--garis);
}
.jejak-bar {
  height: 4px; border-radius: 999px;
  background: var(--garis); overflow: hidden;
}
.jejak-bar i {
  display: block; height: 100%; width: 10%;
  background: var(--ungu); border-radius: 999px;
  transition: width .45s ease;
}
.jejak-teks {
  margin: 7px 0 0; font-size: 12.5px; color: var(--tinta2);
  letter-spacing: .02em;
}
.jejak-teks b { color: var(--ungu); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .jejak-bar i { transition: none; } }

/* ── satu bagian bacaan ── */
.langkah { scroll-margin-top: 74px; }
.langkah-pita {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta2);
}
.langkah-no {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ungu); color: #FFFFFF;
  font-size: 12px; letter-spacing: 0;
}
/* Kalimat sapaan: satu-satunya baris di halaman yang bicara langsung ke
   pembaca dengan namanya. Dibedakan supaya tidak terbaca sebagai isi. */
.sapa {
  margin: 0 0 18px; padding: 12px 14px;
  border-left: 3px solid var(--emas);
  background: var(--blush);
  border-radius: 0 10px 10px 0;
  font-size: 15.5px; line-height: 1.55; color: var(--tinta);
}
.masuk { animation: naik .5s ease both; }
@keyframes naik { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .masuk { animation: none; } }

/* ── isi bacaan ── */
.baca { margin: 0 0 15px; }
.baca:last-child { margin-bottom: 0; }
.sub {
  margin: 26px 0 10px; font-size: 16px; font-weight: 700;
  color: var(--ungu); line-height: 1.35;
}
.langkah > .sub:first-of-type { margin-top: 4px; }

.butir { margin: 0 0 16px; padding: 0; list-style: none; }
.butir li {
  position: relative;
  padding: 0 0 12px 22px; margin-bottom: 12px;
  border-bottom: 1px solid var(--garis);
}
.butir li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.butir li::before {
  content: "✦"; position: absolute; left: 0; top: -1px;
  color: var(--emas); font-size: 13px;
}
.butir small {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--tinta2); letter-spacing: .02em;
}

.pasang {
  padding: 14px 16px; margin: 0 0 12px;
  background: #FBF9FD;
  border: 1px solid var(--garis); border-radius: 12px;
}
.pasang-jd {
  margin: 0 0 7px; font-size: 15.5px; font-weight: 700; color: var(--ungu);
}
.pasang .baca { font-size: 15.5px; }

.baris { margin: 0 0 16px; padding-left: 20px; }
.baris li { margin-bottom: 8px; }

/* ── tombol lanjut ── */
.lanjut-wadah { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--garis); }
.tombol.sudah { background: var(--garis); color: var(--tinta2); }
.tombol.sudah:hover { background: var(--garis); color: var(--tinta2); }

/* ── tautan balik ke daftar barang ──
   Sengaja tautan biasa, BUKAN tombol. Di halaman yang punya tombol aksi
   ("Susun bacaanku", "Unduh PDF"), tombol kedua yang sama menonjol memecah
   perhatian dari satu hal yang seharusnya dikerjakan pembeli di situ.
   Ditaruh di atas, tempat orang mencari tombol kembali. */
.kembali-barang { margin: 0 0 14px; font-size: 14.5px; }
.kembali-barang a { color: var(--tinta2); text-decoration: none; }
.kembali-barang a:hover { color: var(--tinta); text-decoration: underline; }

/* ── kotak sorot ────────────────────────────────────────────────────────
   Dipakai di Kode Karier & Baca Karakter untuk kalimat siap pakai. Bagian
   itu yang paling sering dicari ulang pembaca, dan tanpa penanda ia
   tenggelam di antara paragraf yang panjangnya mirip. Bentuknya mengikuti
   kotak yang sama di PDF-nya, supaya layar dan berkas terasa satu produk.

   ⚠️ Namanya kotak-sorot, BUKAN sorot. Kelas .sorot sudah dipakai peta
   simpul di halaman hasil produk pertama, dan menumpanginya akan mengubah
   tampilan halaman yang sudah dipakai pembeli. */
.kotak-sorot {
  background: var(--sorot-latar, #F4E9DC);
  border-left: 3px solid var(--sorot-garis, #B5551E);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0;
}
.kotak-sorot p { margin: 0; }
.kotak-sorot p + p { margin-top: 6px; }
.kotak-sorot .petunjuk { color: #9E4A18; }