/* 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; }
}