/* =========================================================================
   Monstermath — stylesheet bersama untuk seluruh halaman.

   Satu berkas, bukan di-inline per halaman. Situs ini punya enam halaman
   (id/en × landing/privasi/pemasangan); meng-inline berarti enam salinan yang
   pasti melenceng satu sama lain.

   Palet diambil dari Theme.kt aplikasi supaya situs dan aplikasi tidak
   berbeda warna. Angka kontras di bawah dihitung terhadap --bg (#F7F8FF).
   ========================================================================= */

:root{
  /* Latar aplikasi apa adanya (app_background di colors.xml). */
  --bg:#F7F8FF;
  --bg-deep:#ECEEFB;
  --white:#FFFFFF;

  /* MonsterInk. Sama dengan warna plat ikon peluncur. */
  --ink:#1A1033;
  /* 7,0:1 di atas --bg. Abu-abu yang lebih terang gagal AA untuk teks kecil. */
  --ink-soft:#55536E;

  /* Warna merek. --violet dan --teal untuk aksen NON-teks saja:
     #7B4DFF hanya 4,4:1 dengan teks putih dan #00C9A9 hanya 2,1:1.
     Versi -deep yang dipakai untuk apa pun yang berupa huruf. */
  --violet:#7B4DFF;
  --violet-deep:#5B32E0;
  --violet-shadow:#3E1FA8;
  --teal:#00C9A9;
  --teal-deep:#00806D;

  /* Warna konten, dari Theme.kt. Dipakai untuk kartu kelas dan aksen. */
  --blueberry:#3D5AFE;
  --mango:#FFA726;
  --watermelon:#EF5350;
  --leaf:#33B37A;
  --grape:#8E5BE8;
  --sky:#29B6F6;
  --sunshine:#FFD54F;

  --wa:#0F8A45;
  --shadow:0 10px 30px rgba(26,16,51,.08);
  --shadow-lg:0 24px 60px rgba(26,16,51,.16);
  --r:26px;
  --maxw:1120px;
  /* Segoe tidak ada di Android Chrome — mayoritas pengunjung akan mendapat
     Roboto. Urutannya sengaja menaruh system-ui lebih awal daripada acuan. */
  --font:system-ui,-apple-system,"Segoe UI Variable Display","Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
/* Acuan menyetel ini tanpa syarat — memalukan di situs yang menjual fitur
   kurangi-gerak. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--violet-deep);outline-offset:3px;border-radius:4px}
/* Di atas latar gelap ungu tua tidak cukup: 2,55:1 di footer, dan di gradien
   .final ungu-di-atas-ungu alias 1:1 — persis di tombol beli terakhir, tempat
   cincin fokus paling dibutuhkan. Kuning hangat lolos 3:1 di ketiganya. */
.proof :focus-visible,
.final :focus-visible,
footer :focus-visible{outline-color:#FFD84D}

/* Lewati navigasi. Tersembunyi sampai keyboard menyorotinya — tanpa ini setiap
   halaman dimulai dengan header yang sama, dan pengguna keyboard menelusurinya
   dari awal setiap kali berpindah halaman. */
.lewati{
  position:absolute;top:0;left:-9999px;z-index:100;
  background:var(--white);color:var(--ink);font-weight:800;text-decoration:none;
  padding:13px 20px;border-radius:0 0 16px 0;box-shadow:var(--shadow-lg);
}
.lewati:focus{left:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
section{padding:76px 0;position:relative}
@media(max-width:640px){section{padding:52px 0}}
section[id]{scroll-margin-top:88px}

h1,h2,h3{line-height:1.15;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,6vw,3.9rem);font-weight:900}
h2{font-size:clamp(1.7rem,4vw,2.7rem);font-weight:900}
h3{font-size:1.14rem;font-weight:800}
p{margin:0}

.eyebrow{
  display:inline-block;font-size:.82rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);
  background:var(--white);border-radius:99px;padding:8px 16px;box-shadow:var(--shadow);
}
.lead{font-size:clamp(1.02rem,2.1vw,1.24rem);color:var(--ink-soft);font-weight:500}
.section-head{max-width:680px;margin-bottom:44px}
.section-head h2 + p{margin-top:16px}
.center{text-align:center;margin-inline:auto}
.muted{color:var(--ink-soft)}

/* ---------- tombol ----------
   Acuan memakai bayangan keras 8px — tombol mainan, benar untuk aplikasi anak
   3 tahun. Pembeli di sini orang tua anak 12 tahun, jadi dipotong ke 4px:
   bentuknya tetap ramah, nadanya tidak kekanak-kanakan. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:1.05rem;font-weight:800;
  padding:16px 30px;border-radius:99px;border:0;cursor:pointer;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;
}
.btn-primary{
  background:var(--violet-deep);color:#fff;
  box-shadow:0 4px 0 var(--violet-shadow),0 16px 30px rgba(91,50,224,.30);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--violet-shadow),0 20px 36px rgba(91,50,224,.36)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--violet-shadow),0 8px 18px rgba(91,50,224,.28)}
.btn-ghost{background:var(--white);color:var(--ink);box-shadow:var(--shadow)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-sm{padding:11px 22px;font-size:.95rem}
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active{transition:none;transform:none}
}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,248,255,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(26,16,51,.08);
}
.nav{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav-links{display:flex;gap:26px;margin-inline:auto;font-weight:700;font-size:.96rem}
.nav-links a{text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-end{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
.lang{
  font-weight:800;font-size:.9rem;text-decoration:none;color:var(--ink-soft);
  /* .48 dan bukan .14: garis tepinya satu-satunya yang membuat EN/ID terbaca
     sebagai tombol, jadi ia batas kendali dan butuh 3:1. Pada .14 nilainya
     1,34:1 — nyaris tidak ada. */
  border:2px solid rgba(26,16,51,.48);border-radius:99px;padding:7px 13px;
}
.lang:hover{color:var(--ink);border-color:rgba(26,16,51,.7)}

/* Menu ponsel. Acuan menghapus nav di bawah 900px tanpa pengganti — di
   perangkat mayoritas, pada halaman yang jauh lebih panjang. <details> memberi
   menu yang bisa dibuka tanpa satu baris JavaScript pun. */
.menu{display:none;margin-inline-start:auto;position:relative}
.menu summary{
  list-style:none;cursor:pointer;padding:10px 14px;border-radius:14px;
  background:var(--white);box-shadow:var(--shadow);font-weight:800;font-size:.92rem;
}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 10px);min-width:230px;
  background:var(--white);border-radius:18px;box-shadow:var(--shadow-lg);
  padding:10px;display:flex;flex-direction:column;
}
.menu-panel a{
  text-decoration:none;font-weight:700;padding:12px 14px;border-radius:12px;color:var(--ink);
}
.menu-panel a:hover{background:var(--bg-deep)}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-end .btn{display:none}
  .menu{display:block}
}

/* ---------- wordmark ----------
   Meniru Wordmark.kt: Black 900, miring, tracking negatif 2%, dan bayangan
   KERAS tanpa blur (blurRadius = 0f di sumbernya — jangan dilembutkan).
   Pasangan warna terang dipakai di sini karena latarnya terang; pasangan neon
   (#7B4DFF/#00C9A9) hanya 2:1 di atas putih. */
.wm{
  font-weight:900;font-style:italic;letter-spacing:-.02em;
  font-size:1.3rem;line-height:1;
  text-shadow:2px 3px 0 rgba(26,16,51,.35);
}
.wm .m1{color:var(--violet-deep)}
.wm .m2{color:var(--teal-deep)}
/* Di atas latar gelap, pasangan neon justru yang benar. */
.on-dark .wm .m1{color:var(--violet)}
.on-dark .wm .m2{color:var(--teal)}

/* Di bawah 420px ketiga sisa isi header — brand, EN, Menu — tidak muat dalam satu
   baris pada ukuran penuhnya, dan tidak satu pun bisa menyusut sendiri:
   MONSTERMATH satu kata utuh, jadi menyempitkan wadahnya cuma memotongnya.
   Karena body memakai overflow-x:hidden, yang meluber tidak bisa digulir
   melainkan hilang — dan yang paling kanan justru tombol Menu, satu-satunya
   navigasi yang tersisa di ponsel. Jadi ukurannya yang dikecilkan, bukan ruangnya
   yang diharapkan cukup. Ditaruh setelah .wm, bukan di blok nav di atas: urutan
   sumber yang menentukan, spesifisitasnya sama. */
@media(max-width:470px){
  .nav{gap:12px}
  .brand{gap:8px}
  .brand svg{width:32px;height:32px}
  .wm{font-size:1rem}
  .lang{padding:7px 10px}
  .menu summary{padding:10px 11px}
}
/* Di bawah 344px mengecilkan saja tidak cukup, dan yang dikorbankan harus
   dipilih sengaja: wordmark-nya yang pergi, monsternya tinggal. aria-label pada
   .brand tetap berbunyi "Monstermath", jadi nama produknya tidak hilang bagi
   pembaca layar — hanya bagi mata, di layar yang memang tidak muat. */
@media(max-width:344px){
  .brand .wm{display:none}
}

/* ---------- hero ---------- */
.hero{padding-top:56px;padding-bottom:40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.hero h1{margin:20px 0 18px}
.hero .lead{max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.trust{margin-top:20px;font-size:.93rem;color:var(--ink-soft);font-weight:700}
.trust b{color:var(--ink)}

/* Bingkai ponsel potret. Acuan memakai bingkai tablet lanskap yang dirotasi;
   tangkapan Monstermath potret, jadi bingkainya ditulis ulang. */
.phone{
  background:var(--ink);border-radius:38px;padding:10px;
  box-shadow:var(--shadow-lg);max-width:300px;margin-inline:auto;
}
.phone img{border-radius:29px}
/* Rotasi hanya untuk perangkat hero tunggal. Dua potret bersebelahan yang
   sama-sama miring terbaca berantakan. */
.phone-hero{transform:rotate(-1.2deg)}
.phone-cap{
  text-align:center;font-size:.85rem;color:var(--ink-soft);
  font-weight:700;margin-top:16px;
}
@media (prefers-reduced-motion:reduce){.phone-hero{transform:none}}

/* ---------- baris angka ----------
   Enam angka, dan 6 punya pembagi bersih — jadi titik henti eksplisit 6→3→2,
   bukan auto-fit. auto-fit memilih jumlah kolom dari ruang yang tersedia, dan
   pada 375px ia meleset tiga piksel lalu runtuh ke satu kolom setinggi 567px.
   Acuan punya masalah serupa dengan repeat(5,1fr) → repeat(2,1fr), yang
   menyisakan satu sel yatim. */
.stats{
  background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:30px 18px;gap:18px;
}
@media(max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:6px}
.stat b{display:block;font-size:clamp(1.8rem,4.4vw,2.5rem);font-weight:900;line-height:1}
.stat span{font-size:.85rem;font-weight:700;color:var(--ink-soft);display:block;margin-top:7px}

/* ---------- kartu umum ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3{grid-template-columns:1fr}}
/* Setiap blok .g3 berisi tepat tiga kartu, jadi di dua kolom yang ketiga selalu
   tertinggal sendirian dengan satu sel kosong di sebelahnya — persis yang sengaja
   dihindari pada kartu kelas. Dilebarkan penuh. Pemilihnya menuntut anak ketiga
   DAN anak terakhir, jadi blok berisi empat atau enam kartu tidak ikut kena. */
@media(max-width:900px) and (min-width:621px){
  .g3 > :nth-child(3):last-child{grid-column:1/-1}
}
.span-all{grid-column:1/-1}

.card{background:var(--white);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.card .ico{font-size:2rem;line-height:1;margin-bottom:14px}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-soft);font-size:.98rem}
.card-top{border-top:6px solid var(--c,var(--violet))}

/* ---------- bagian masalah ---------- */
.problem{background:var(--bg-deep)}
.problem-inner{max-width:760px}
.problem p + p{margin-top:18px}
.problem .big{font-size:clamp(1.05rem,2.3vw,1.3rem);font-weight:600;color:var(--ink)}
.thesis{
  margin-top:28px;padding:22px 26px;background:var(--white);border-radius:20px;
  border-left:6px solid var(--violet);font-weight:700;
  font-size:clamp(1.05rem,2.3vw,1.24rem);box-shadow:var(--shadow);
}

/* ---------- kartu "yang ada" ---------- */
.yes-card .ico{
  width:52px;height:52px;border-radius:50%;background:#E9FBF6;color:var(--teal-deep);
  display:grid;place-items:center;font-size:1.5rem;font-weight:900;margin-bottom:16px;
}

/* ---------- bukti izin ---------- */
.proof{background:var(--ink);color:#fff}
.proof h2{color:#fff}
.proof .lead{color:#C6C0E4}
.proof-grid{display:grid;grid-template-columns:1fr 400px;gap:52px;align-items:center}
@media(max-width:900px){.proof-grid{grid-template-columns:1fr;gap:34px}}
.perm{background:#fff;color:var(--ink);border-radius:22px;padding:26px;box-shadow:var(--shadow-lg)}
/* h3, bukan div: di bawahnya ada h4 "Tidak diminta", dan tanpa judul kartu ini
   urutannya melompat h2 -> h4. margin:0 karena h3 bawaan peramban terlalu jauh. */
.perm-title{font-weight:900;font-size:1.02rem;margin:0 0 4px}
.perm-sub{font-size:.82rem;color:var(--ink-soft);font-weight:700;margin-bottom:18px}
.perm ul{list-style:none;margin:0;padding:0}
.perm li{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-top:1px solid rgba(26,16,51,.09);font-weight:700;font-size:.97rem;
}
.perm .i{
  flex:0 0 26px;height:26px;border-radius:50%;background:#E7ECFB;color:#2A3F9E;
  display:grid;place-items:center;font-size:.9rem;font-weight:900;
}
.perm h4{
  margin:0 0 4px;font-size:.78rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);
}
.perm .used li{align-items:flex-start;flex-wrap:wrap}
.perm .used small{
  flex:1 0 100%;padding-left:38px;margin-top:3px;
  font-size:.85rem;font-weight:600;color:var(--ink-soft);line-height:1.45;
}
.perm .nope{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:10px 0 0}
.perm .nope li{
  display:block;padding:6px 12px;border-radius:99px;border:0;
  background:#FFE9E9;color:#96222C;font-size:.83rem;font-weight:800;
}
/* Internet adalah satu-satunya yang penting di daftar ini. */
.perm .nope li.hero-no{background:#96222C;color:#fff;font-size:.9rem}
.perm .none{
  margin-top:18px;background:#E9FBF6;color:#00584A;border-radius:14px;
  padding:13px 16px;font-weight:800;font-size:.92rem;text-align:center;
}
.steps-inline{counter-reset:s;list-style:none;padding:0;margin:26px 0 0}
.steps-inline li{
  counter-increment:s;position:relative;padding-left:44px;margin-bottom:14px;
  font-weight:600;color:#E4E0F2;
}
.steps-inline li::before{
  content:counter(s);position:absolute;left:0;top:-1px;width:30px;height:30px;
  border-radius:50%;background:var(--teal);color:var(--ink);
  display:grid;place-items:center;font-weight:900;font-size:.9rem;
}
.proof-punch{
  margin-top:30px;padding:20px 24px;border-radius:18px;
  background:rgba(0,201,169,.14);border:2px solid rgba(0,201,169,.4);
  font-weight:800;font-size:1.05rem;color:#fff;
}

/* ---------- kartu kelas (dari .island acuan) ---------- */
.island{
  background:var(--white);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);
  border-top:6px solid var(--c);
}
.island-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.island-emoji{
  width:52px;height:52px;border-radius:50%;background:var(--c);
  display:grid;place-items:center;font-size:1.55rem;flex:0 0 auto;
}
.island-top h3{font-size:1.08rem;line-height:1.2}
.island-top small{color:var(--ink-soft);font-weight:800;font-size:.8rem}
.island ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.island li{
  background:var(--bg);border-radius:99px;padding:6px 13px;
  font-size:.83rem;font-weight:700;color:var(--ink-soft);
}

/* Baris chip untuk 9 untai dan 7 pola sisa. */
.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0 0 30px}
.chips li{
  background:var(--white);border-radius:99px;padding:8px 15px;font-size:.86rem;
  font-weight:800;color:var(--ink-soft);box-shadow:var(--shadow);
}

/* ---------- tangkapan layar ---------- */
.shots{background:var(--bg-deep)}
/* Inset untuk gambar yang teksnya harus terbaca — miskonsepsi, laporan. */
/* Batas lebarnya wajib: berkasnya 1080x2340, dan tanpa batas ini kolom .split
   selebar ~510px membuatnya tampil 510x1105 di desktop — lebih tinggi dari
   layarnya sendiri, dan empat kali tangkapan lain di halaman yang sama. */
.inset img{
  border-radius:18px;box-shadow:var(--shadow-lg);border:1px solid rgba(26,16,51,.1);
  max-width:300px;margin-inline:auto;
}

/* ---------- baris fitur ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.tick{list-style:none;padding:0;margin:26px 0 0}
.tick li{display:flex;gap:14px;padding:11px 0;font-weight:600}
.tick .t{
  flex:0 0 27px;height:27px;border-radius:50%;background:#00584A;color:#fff;
  display:grid;place-items:center;font-size:.85rem;font-weight:900;
}

/* ---------- langkah bernomor ---------- */
.step{
  background:var(--white);border-radius:var(--r);padding:32px 28px 30px;box-shadow:var(--shadow);
  position:relative;padding-top:44px;
}
.step .n{
  position:absolute;top:-22px;left:28px;width:52px;height:52px;border-radius:50%;
  background:var(--violet);color:#fff;display:grid;place-items:center;
  font-size:1.4rem;font-weight:900;box-shadow:0 8px 18px rgba(123,77,255,.4);
}
.step:nth-child(2) .n{background:var(--sky);box-shadow:0 8px 18px rgba(41,182,246,.4)}
.step:nth-child(3) .n{background:var(--teal);color:var(--ink);box-shadow:0 8px 18px rgba(0,201,169,.4)}
.step h3{margin-bottom:9px}
.step p{color:var(--ink-soft);font-size:.98rem}

/* ---------- miskonsepsi ---------- */
.mis{background:var(--white);border-radius:20px;padding:24px;box-shadow:var(--shadow);border-left:6px solid var(--mango)}
.mis h3{margin-bottom:8px;font-size:1.02rem}
.mis p{color:var(--ink-soft);font-size:.95rem}
.mis-note{
  margin-top:30px;padding:24px 28px;border-radius:20px;background:var(--ink);color:#E4E0F2;
  font-weight:600;font-size:1.03rem;
}
.mis-note b{color:#fff}

/* ---------- harga ---------- */
.price-wrap{display:grid;place-items:center}
.price{
  background:var(--white);border-radius:34px;padding:46px 40px;max-width:480px;width:100%;
  box-shadow:var(--shadow-lg);text-align:center;position:relative;overflow:hidden;
}
.price::before{
  content:"";position:absolute;inset:0 0 auto;height:8px;
  background:linear-gradient(90deg,var(--violet),var(--teal));
}
.price .amount{font-size:clamp(2.6rem,8vw,3.6rem);font-weight:900;line-height:1;margin:2px 0 8px;color:var(--violet-deep)}
.price .once{color:var(--ink-soft);font-weight:800;font-size:.95rem}
.price .was{
  font-size:1.5rem;font-weight:800;color:var(--ink-soft);
  text-decoration:line-through;text-decoration-thickness:3px;
  text-decoration-color:var(--watermelon);margin:10px 0 0;
}
.price .save{
  display:inline-block;margin:12px 0 0;padding:7px 16px;border-radius:99px;
  background:#E9FBF6;color:#00584A;font-weight:800;font-size:.9rem;
}
.promo-tag{
  display:inline-block;margin-bottom:16px;padding:8px 18px;border-radius:99px;
  background:var(--sunshine);color:var(--ink);font-weight:900;font-size:.88rem;
}
.price ul{list-style:none;padding:0;margin:30px 0;text-align:left}
.price li{display:flex;gap:12px;padding:9px 0;font-weight:700;font-size:.99rem}
.price li .t{
  flex:0 0 24px;height:24px;border-radius:50%;background:#E9FBF6;color:#00584A;
  display:grid;place-items:center;font-size:.8rem;font-weight:900;
}
.price .btn{width:100%}
.price .fine{margin-top:16px;font-size:.83rem;color:var(--ink-soft);font-weight:600}
.anchor-line{margin-top:26px;font-weight:700;color:var(--ink-soft);text-align:center}
/* Kebijakan refund: kolom kosong dengan daya ungkit tertinggi di halaman ini. */
.refund{
  max-width:480px;margin:22px auto 0;padding:18px 22px;border-radius:18px;
  background:#E9FBF6;color:#00584A;font-weight:800;text-align:center;font-size:.97rem;
}

/* ---------- tanya jawab ---------- */
.faq details{
  background:var(--white);border-radius:20px;margin-bottom:12px;box-shadow:var(--shadow);
  overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:20px 56px 20px 24px;font-weight:800;font-size:1.02rem;
  list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:900;color:var(--ink-soft);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 24px 22px;color:var(--ink-soft);font-weight:500}
.faq .a a{color:var(--violet-deep);font-weight:700}

/* ---------- penutup ---------- */
.final{background:linear-gradient(120deg,var(--violet-deep),var(--teal-deep));color:#fff}
.final h2{max-width:16em;margin-inline:auto;color:#fff}
/* Putih, bukan #EDE9FB. Paragrafnya selebar 34em dan terpusat, jadi ia melintasi
   ujung tosca gradiennya — di sana #EDE9FB cuma 4,10:1, dan pada 17,6px semibold
   itu belum terhitung teks besar, sehingga syaratnya tetap 4,5:1. Putih 4,87:1. */
.final p{margin:18px auto 0;max-width:34em;font-weight:600;font-size:1.1rem;color:#fff}
.final .btn-ghost{background:#fff;color:var(--violet-deep)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#B3ADCB;padding:52px 0 40px;font-size:.92rem}
footer a{color:#fff;text-decoration:none;font-weight:700}
footer a:hover,footer a:focus-visible{text-decoration:underline}
/* Tautan di dalam kalimat digarisbawahi permanen. Putih di atas #B3ADCB hanya
   beda 2,15:1, jadi warna saja tidak cukup membedakannya dari teks biasa —
   sementara .foot-links berdiri sendiri sebagai daftar dan tidak perlu. */
footer p a{text-decoration:underline;text-underline-offset:2px}
.foot-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-bottom{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);font-size:.83rem}

/* ---------- tombol WhatsApp melayang ----------
   Acuan menaruh ini fixed tanpa kompensasi, jadi menutupi CTA penutup dan
   tautan footer di ponsel. Padding di body membalasnya. */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:flex;align-items:center;gap:11px;
  background:var(--wa);color:#fff;text-decoration:none;
  font-weight:800;font-size:.98rem;
  padding:14px 22px 14px 16px;border-radius:99px;
  box-shadow:0 10px 30px rgba(15,138,69,.45);
  transition:transform .15s ease,box-shadow .15s ease;
}
.wa-float:hover{transform:translateY(-3px)}
@media(max-width:640px){
  /* Hanya halaman yang benar-benar memasang tombolnya. Sebelumnya berlaku untuk
     semua, sehingga kedua halaman privasi menyisakan 88px kosong di bawah kaki. */
  body.ada-wa{padding-bottom:88px}
  .wa-float{right:16px;bottom:16px;padding:14px;gap:0}
  .wa-float .lbl{display:none}
}

/* ---------- halaman dokumen (privasi, pemasangan) ---------- */
.doc{max-width:780px;margin-inline:auto}
.doc h2{margin-top:44px;font-size:clamp(1.35rem,3vw,1.8rem)}
.doc h3{margin-top:28px}
.doc p,.doc li{color:var(--ink-soft)}
.doc p{margin-top:14px}
.doc ul,.doc ol{margin:14px 0 0;padding-left:22px}
.doc li{margin-bottom:8px}
.doc code{
  background:var(--bg-deep);border-radius:6px;padding:2px 7px;
  font-size:.9em;color:var(--ink);
  /* Perintah PowerShell di panduan pemasangan 46 karakter monospace, sekitar
     414px, sementara di layar 360px hanya tersedia 294px. Tanpa ini ia meluber
     dan terpotong oleh overflow-x:hidden pada body. */
  overflow-wrap:anywhere;
}
/* Perintah yang berdiri sendiri lebih enak digulir daripada dipatahkan
   di tengah nama berkas. */
.doc li > code:only-child{
  display:block;overflow-x:auto;overflow-wrap:normal;white-space:pre;
  padding:10px 14px;
}
.doc .meta{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px;padding:18px 22px;
  background:var(--white);border-radius:18px;box-shadow:var(--shadow);
  font-size:.92rem;color:var(--ink-soft);
}
.doc .meta b{color:var(--ink)}
.callout{
  margin-top:26px;padding:20px 24px;border-radius:18px;background:var(--white);
  border-left:6px solid var(--teal);box-shadow:var(--shadow);
}
.callout p{margin-top:0;color:var(--ink);font-weight:600}

/* ---------- cetak ----------
   Kebijakan privasi memang dokumen yang kadang dicetak dan disimpan. Tanpa ini
   yang keluar dari printer adalah header lengket, kaki berlatar #1A1033 sepenuh
   tinta, dan bayangan kotak di setiap kartu. */
@media print{
  header,footer,.wa-float,.lewati,.menu,.cta-row,.btn{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding-inline:0}
  section{padding:0}
  .doc{max-width:none}
  .doc p,.doc li,.doc .meta{color:#000}
  .callout,.doc .meta,.card,.island{box-shadow:none;border:1px solid #999}
  h1,h2,h3{break-after:avoid}
  p,li{break-inside:avoid}
  /* Alamat tautan dicetak, karena di kertas tautannya tidak bisa diketuk. */
  .doc a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444}
}