:root{
  /* Palet brand Bermuda Lentera — halaman gelap */
  --navy:#0F2A4A;
  --navy-2:#0A1E36;
  --latar:#081120;          /* dasar halaman */
  --latar-2:#0B1830;        /* seksi selang-seling */
  --gold:#C2A158;
  --gold-terang:#D8BC7C;
  --gold-soft:rgba(194,161,88,.14);
  --cream:#F7F2E7;
  --cream-2:#FFFDF7;
  --hijau:#4CAF8D;
  --merah:#D06B62;
  --emerald:#0E6D46;        /* aksen khusus Walletkeu */

  --teks:var(--cream);
  --teks-70:rgba(247,242,231,.68);
  --teks-45:rgba(247,242,231,.54);
  --garis:rgba(247,242,231,.10);
  --kaca:rgba(247,242,231,.04);
  --kaca-2:rgba(247,242,231,.07);

  /* token halaman terang (dipakai modal pembayaran) */
  --teks-gelap:#0F2A4A;
  --teks-gelap-70:rgba(15,42,74,.72);
  --teks-gelap-45:rgba(15,42,74,.48);
  --garis-gelap:rgba(15,42,74,.12);

  --sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --merek:'Onest','Plus Jakarta Sans',sans-serif;

  --pad:clamp(20px,5vw,60px);
  --maxw:1140px;
  --r:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--latar);color:var(--teks);font-family:var(--sans);
  font-size:clamp(15.5px,.9vw + 13.5px,17.5px);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

h1,h2,h3{font-family:var(--sans);font-weight:800;line-height:1.12;letter-spacing:-.032em;color:var(--cream-2)}
h1{font-size:clamp(34px,6vw,66px);letter-spacing:-.04em}
h2{font-size:clamp(26px,3.6vw,42px)}
h3{font-size:clamp(18px,1.5vw,21px);font-weight:700;letter-spacing:-.02em}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.band{padding-top:clamp(60px,8vw,110px);padding-bottom:clamp(60px,8vw,110px);position:relative}
.band--garis{border-top:1px solid var(--garis)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--gold)}
.lede{font-size:clamp(16.5px,1.2vw,19px);color:var(--teks-70);max-width:54ch}
.merek-font{font-family:var(--merek)}

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.btn--emas{background:linear-gradient(135deg,var(--gold-terang),var(--gold));color:var(--navy-2);box-shadow:0 8px 26px rgba(194,161,88,.35)}
.btn--emas:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(194,161,88,.45)}
.btn--utama{background:var(--cream-2);color:var(--navy-2);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.btn--utama:hover{transform:translateY(-2px)}
.btn--garis{border-color:var(--garis);background:var(--kaca);color:var(--cream);backdrop-filter:blur(6px)}
.btn--garis:hover{border-color:var(--gold);transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(8,17,32,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--garis)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:11px;padding-bottom:11px}
.merek{display:flex;align-items:center;gap:11px;text-decoration:none}
.merek__mark{width:34px;height:34px;border-radius:10px;flex:none}
.merek__teks{line-height:1.05}
.merek__nama{font-family:var(--merek);font-size:19px;color:var(--cream-2);display:block;white-space:nowrap}
.merek__nama b{font-weight:700;letter-spacing:-.045em}
.merek__nama i{font-style:normal;font-weight:400;letter-spacing:-.035em}
.top__nav{display:flex;align-items:center;gap:24px;font-size:14.5px;font-weight:600}
.top__nav a:not(.btn){text-decoration:none;color:var(--teks-70)}
.top__nav a:not(.btn):hover{color:var(--cream-2)}
.top__nav a.btn{text-decoration:none}
.top .btn{padding:10px 19px;font-size:14px}
.top__nav a.bahasa{border:1px solid var(--garis);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;color:var(--teks-70);text-decoration:none}
.top__nav a.bahasa:hover{border-color:var(--gold);color:var(--cream-2)}
@media(max-width:820px){.top__nav a:not(.btn){display:none}}

/* ---------- Hero ---------- */
.hero{min-height:calc(100vh - 58px);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.hero__in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:clamp(70px,10vh,120px) var(--pad)}
.hero__pill{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--gold);
  background:var(--gold-soft);border:1px solid rgba(194,161,88,.3);border-radius:999px;padding:7px 16px;margin-bottom:26px;
}
.hero__pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hero h1 em{font-style:normal;color:var(--gold-terang)}
.hero .lede{margin:22px auto 0;max-width:46ch}
.hero .btn-row{justify-content:center}
.hero__proof{
  margin-top:34px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;
  font-size:13px;font-weight:600;color:var(--teks-45);
}
.hero__proof span{display:inline-flex;align-items:center;gap:7px}
.hero__proof span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* video latar bertema digital */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55}
.hero__tirai{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,17,32,.72) 0%,rgba(8,17,32,.6) 45%,var(--latar) 97%)}
@media(prefers-reduced-motion:reduce){.hero__video{display:none}}

/* cahaya lentera di belakang hero */
.hero::before{
  content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);z-index:1;
  width:900px;height:640px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(194,161,88,.16) 0%,rgba(22,58,99,.18) 45%,rgba(8,17,32,0) 72%);
}

/* kartu-kartu melayang */
.apung{position:absolute;z-index:1;pointer-events:none;
  background:var(--kaca-2);border:1px solid var(--garis);border-radius:16px;
  backdrop-filter:blur(10px);padding:14px 18px;box-shadow:0 20px 44px -18px rgba(0,0,0,.55);
  font-size:13px;font-weight:600;color:var(--teks-70);text-align:left;
  animation:melayang 7s ease-in-out infinite;
}
.apung small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teks-45);margin-bottom:4px}
.apung strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--cream-2);font-variant-numeric:tabular-nums}
.apung .naik{color:var(--hijau)}
.apung .turun{color:var(--merah)}
.apung .batang{display:flex;align-items:flex-end;gap:4px;height:30px;margin-top:8px}
.apung .batang i{width:9px;border-radius:3px 3px 0 0;background:rgba(194,161,88,.35)}
.apung .batang i.b1{height:36%}.apung .batang i.b2{height:58%}.apung .batang i.b3{height:44%}
.apung .batang i.b4{height:78%}.apung .batang i.b5{height:100%;background:var(--gold)}
.apung .progres{width:130px;height:6px;border-radius:99px;background:rgba(247,242,231,.12);margin-top:9px;overflow:hidden}
.apung .progres i{display:block;height:100%;width:68%;border-radius:99px;background:var(--hijau)}
.apung--1{top:16%;left:6%;animation-delay:0s}
.apung--2{top:56%;left:3.5%;animation-delay:1.6s}
.apung--3{bottom:9%;left:14%;animation-delay:3.1s}
.apung--4{top:14%;right:6%;animation-delay:.9s}
.apung--5{top:52%;right:4%;animation-delay:2.4s}
.apung--6{bottom:10%;right:13%;animation-delay:4s}
@keyframes melayang{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:1120px){.apung--3,.apung--6{display:none}}
@media(max-width:940px){.apung{display:none}.hero{min-height:calc(100svh - 58px)}}
@media(prefers-reduced-motion:reduce){.apung{animation:none}}

/* ikon aplikasi beterbangan */
.ikon-apung{position:absolute;z-index:1;pointer-events:none;border-radius:26%;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));
  animation:terbang 9s ease-in-out infinite;
}
.ikon-apung svg{width:100%;height:100%}
.ikon-apung--kas{width:52px;height:52px;top:35%;left:13%;animation-delay:.7s}
.ikon-apung--hpp{width:44px;height:44px;top:76%;right:22%;animation-delay:2.2s;animation-duration:11s}
.ikon-apung--qris{width:56px;height:56px;top:33%;right:12%;animation-delay:3.6s;animation-duration:10s}
.ikon-apung--wk{width:46px;height:46px;top:74%;left:21%;animation-delay:1.4s;animation-duration:12s}
.ikon-apung--kas2{width:30px;height:30px;top:12%;left:32%;opacity:.55;animation-delay:4.4s;animation-duration:13s}
.ikon-apung--qris2{width:28px;height:28px;top:10%;right:31%;opacity:.55;animation-delay:5.2s;animation-duration:14s}
@keyframes terbang{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-20px) rotate(4deg)}
}
/* mobile & tablet: ikon tetap terbang, ukurannya menyusut & menepi supaya tidak menutupi teks */
@media(max-width:940px){
  .ikon-apung{opacity:.75}
  .ikon-apung--kas{width:36px;height:36px;top:5%;left:5%}
  .ikon-apung--qris{width:38px;height:38px;top:4.5%;right:6%}
  .ikon-apung--kas2{width:22px;height:22px;top:5.5%;left:32%;opacity:.4}
  .ikon-apung--qris2{width:20px;height:20px;top:5%;right:33%;opacity:.4}
  .ikon-apung--hpp{width:34px;height:34px;top:93.5%;right:8%}
  .ikon-apung--wk{width:36px;height:36px;top:93%;left:7%}
}
@media(prefers-reduced-motion:reduce){.ikon-apung{animation:none}}

/* ---------- Masalah ---------- */
.masalah{margin-top:34px;border-top:1px solid var(--garis)}
.masalah li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--garis)}
.masalah .no{font-size:13px;font-weight:800;color:var(--gold);letter-spacing:.06em;padding-top:4px}
.masalah p{color:var(--teks-70);margin-top:5px;max-width:62ch}

/* ---------- Produk ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}
@media(max-width:880px){.grid2{grid-template-columns:1fr}}
.kartu{
  background:var(--kaca);border:1px solid var(--garis);border-radius:var(--r);
  backdrop-filter:blur(10px);padding:28px 26px 24px;display:flex;flex-direction:column;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;position:relative;overflow:hidden;
}
.kartu:hover{transform:translateY(-4px);border-color:rgba(194,161,88,.4);background:var(--kaca-2)}

/* warna khas tiap aplikasi (dari logo asli masing-masing) */
.kartu--kas{--ca:14,132,103;--ca-terang:#38CFA6}
.kartu--hpp{--ca:244,86,10;--ca-terang:#FF8A50}
.kartu--qris{--ca:91,75,224;--ca-terang:#9C90F5}
.kartu--kasbon{--ca:180,69,60;--ca-terang:#E58C82}
.kartu--wk{--ca:15,122,68;--ca-terang:#4FCE8E}
.kartu[class*="kartu--"]{
  background:linear-gradient(165deg,rgba(var(--ca),.13),rgba(var(--ca),.03) 55%,var(--kaca));
  border-color:rgba(var(--ca),.28);
}
.kartu[class*="kartu--"]:hover{border-color:rgba(var(--ca),.6);background:linear-gradient(165deg,rgba(var(--ca),.18),rgba(var(--ca),.05) 55%,var(--kaca-2))}
.kartu[class*="kartu--"] .tag{border-color:rgba(var(--ca),.3);background:rgba(var(--ca),.1);color:var(--ca-terang)}
.kartu[class*="kartu--"] .kartu__tautan{color:var(--ca-terang);border-color:rgba(var(--ca),.25)}
.kartu[class*="kartu--"] .kartu__tautan:hover{color:var(--cream-2)}
.kartu[class*="kartu--"] .kartu__ikon{filter:drop-shadow(0 8px 18px rgba(var(--ca),.45))}
.kartu__ikon{width:44px;height:44px;margin-bottom:16px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.kartu__ikon svg{width:100%;height:100%}
.kartu p{color:var(--teks-70);margin-top:10px;font-size:16px}
.kartu__baru{position:absolute;top:20px;right:20px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hijau);border:1px solid rgba(76,175,141,.4);border-radius:999px;padding:4px 10px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tag{font-size:12.5px;font-weight:600;border-radius:999px;background:rgba(247,242,231,.06);border:1px solid var(--garis);padding:5px 11px;color:var(--teks-70)}
.kartu__tautan{margin-top:auto;padding-top:16px;font-size:14.5px;font-weight:700;color:var(--gold-terang);text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.kartu__tautan:first-of-type{margin-top:22px;border-top:1px solid var(--garis)}
.kartu__tautan+.kartu__tautan{margin-top:0;padding-top:8px}
.kartu__tautan:hover{color:var(--cream-2)}
.kartu__tautan small{font-weight:500;color:var(--teks-45)}

/* ---------- Statistik ---------- */
.stat{background:var(--latar-2);border-top:1px solid var(--garis);border-bottom:1px solid var(--garis);overflow:hidden}
.stat::after{content:"";position:absolute;right:-140px;bottom:-200px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(194,161,88,.14) 0%,rgba(194,161,88,0) 70%);pointer-events:none}
.stat__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:1}
@media(max-width:880px){.stat__grid{grid-template-columns:1fr}}
.stat__angka{text-align:center;padding:clamp(24px,3vw,40px)}
.stat__angka strong{display:block;font-size:clamp(72px,10vw,128px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.stat__angka span{display:block;margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teks-45)}

/* ---------- Coba gratis ---------- */
.gratis__row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:820px){.gratis__row{grid-template-columns:1fr}}
.gratis__btn{
  display:block;text-decoration:none;background:var(--kaca);border:1px solid var(--garis);border-radius:16px;padding:24px 22px;
  backdrop-filter:blur(8px);transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.gratis__btn:hover{background:var(--kaca-2);border-color:var(--gold);transform:translateY(-3px)}
.gratis__btn--kas{--ca:14,132,103;--ca-terang:#38CFA6}
.gratis__btn--hpp{--ca:244,86,10;--ca-terang:#FF8A50}
.gratis__btn--qris{--ca:91,75,224;--ca-terang:#9C90F5}
.gratis__btn--kasbon{--ca:180,69,60;--ca-terang:#E58C82}
.gratis__btn[class*="gratis__btn--"]{background:linear-gradient(165deg,rgba(var(--ca),.12),rgba(var(--ca),.02) 60%,var(--kaca));border-color:rgba(var(--ca),.28)}
.gratis__btn[class*="gratis__btn--"]:hover{border-color:rgba(var(--ca),.6)}
.gratis__btn[class*="gratis__btn--"] code{color:var(--ca-terang)}
.gratis__btn strong{font-size:17.5px;font-weight:700;display:block;color:var(--cream-2)}
.gratis__btn code{display:block;font-family:var(--sans);font-size:13.5px;color:var(--gold);margin-top:6px;font-weight:600}
.gratis__btn span{display:block;font-size:13.5px;color:var(--teks-45);margin-top:9px}
.gratis__note{margin-top:26px;font-size:14px;color:var(--teks-45);max-width:74ch}

/* ---------- Isi paket ---------- */
.paket{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,54px);align-items:start}
@media(max-width:880px){.paket{grid-template-columns:1fr;gap:30px}}
.ceklis{list-style:none}
.ceklis li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--garis)}
.ceklis li::before{content:"✓";color:var(--gold);font-weight:800}
.catatan{background:var(--kaca);border:1px solid var(--garis);border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;padding:20px 24px;font-size:16px;margin-top:24px;color:var(--teks-70)}

/* ---------- Harga ---------- */
.harga{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:stretch}
@media(max-width:940px){.harga{grid-template-columns:1fr}}
.plan{background:var(--kaca);border:1px solid var(--garis);border-radius:var(--r);backdrop-filter:blur(8px);padding:30px 26px;position:relative;display:flex;flex-direction:column}
.plan--utama{background:linear-gradient(180deg,rgba(194,161,88,.13),rgba(194,161,88,.04));border-color:rgba(194,161,88,.45);box-shadow:0 30px 60px -28px rgba(194,161,88,.35)}
.plan__label{position:absolute;top:-12px;left:24px;background:linear-gradient(135deg,var(--gold-terang),var(--gold));color:var(--navy-2);font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan__nama{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--teks-70)}
.plan__harga{font-size:clamp(29px,3.2vw,38px);font-weight:800;letter-spacing:-.04em;margin:8px 0 3px;font-variant-numeric:tabular-nums;color:var(--cream-2)}
.plan--utama .plan__harga{color:var(--gold-terang)}
.plan__ket{font-size:13px;color:var(--teks-45)}
.plan ul{list-style:none;margin:22px 0 24px;border-top:1px solid var(--garis)}
.plan li{padding:11px 0;border-bottom:1px solid var(--garis);font-size:15px;display:grid;grid-template-columns:auto 1fr;gap:11px;color:var(--teks-70)}
.plan li::before{content:"✓";color:var(--gold);font-weight:800}
.plan li.no{color:var(--teks-45)}
.plan li.no::before{content:"–";color:var(--teks-45)}
.plan .btn{width:100%;margin-top:auto}
.harga__kaki{margin-top:32px;padding-top:22px;border-top:1px solid var(--garis);display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;align-items:baseline}
.harga__kaki p{max-width:48ch;color:var(--teks-70)}
.tautan-satuan{background:none;border:none;font-family:var(--sans);font-weight:700;font-size:15px;color:var(--gold-terang);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:4px}
.tautan-satuan:hover{color:var(--cream-2)}

/* kartu silang Walletkeu di bawah harga */
.wk-silang{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,rgba(14,109,70,.16),rgba(14,109,70,.05));
  border:1px solid rgba(76,175,141,.3);border-radius:var(--r);padding:22px 26px;
}
.wk-silang p{color:var(--teks-70);font-size:15.5px;max-width:56ch}
.wk-silang p b{color:var(--cream-2)}
.wk-silang a{flex:none;font-weight:700;font-size:15px;color:var(--hijau);text-decoration:none}
.wk-silang a:hover{color:var(--cream-2)}

/* ---------- Untuk siapa ---------- */
.siapa{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);margin-top:38px}
@media(max-width:820px){.siapa{grid-template-columns:1fr;gap:28px}}
.siapa h3{margin-bottom:14px}
.siapa ul{list-style:none}
.siapa li{padding:12px 0;border-bottom:1px solid var(--garis);display:grid;grid-template-columns:auto 1fr;gap:12px;color:var(--teks-70)}
.siapa--ya li::before{content:"✓";color:var(--hijau);font-weight:800}
.siapa--belum li::before{content:"×";color:var(--merah);font-weight:800}

/* ---------- FAQ ---------- */
.faq{margin-top:36px;border-top:1px solid var(--garis)}
details{border-bottom:1px solid var(--garis)}
summary{cursor:pointer;list-style:none;padding:19px 0;font-weight:700;font-size:clamp(16.5px,1.4vw,19px);letter-spacing:-.02em;display:flex;justify-content:space-between;gap:20px;align-items:center;color:var(--cream-2)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:22px;font-weight:700;flex:none;transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
details p{padding:0 0 21px;color:var(--teks-70);max-width:68ch}

/* ---------- Penutup ---------- */
.penutup{text-align:center;overflow:hidden}
.penutup::before{
  content:"";position:absolute;bottom:-320px;left:50%;transform:translateX(-50%);
  width:820px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(194,161,88,.15) 0%,rgba(194,161,88,0) 70%);
}
.penutup .wrap{position:relative;z-index:1}
.penutup .lede{margin:18px auto 0}
.penutup .btn-row{justify-content:center}
.penutup__tagline{font-family:var(--merek);font-size:clamp(15px,1.4vw,17px);font-weight:500;letter-spacing:.02em;color:var(--teks-45);margin-top:30px}
.penutup__wa{margin-top:20px;font-size:14.5px;color:var(--teks-70)}
.penutup__wa a{color:var(--gold-terang);font-weight:700}

/* ---------- Footer ---------- */
.kaki{background:var(--navy-2);color:var(--teks-70);padding-top:48px;padding-bottom:52px;font-size:14.5px;border-top:1px solid var(--garis)}
.kaki__atas{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;padding-bottom:26px;border-bottom:1px solid var(--garis)}
.kaki__nav{display:flex;flex-wrap:wrap;gap:10px 24px;font-weight:600}
.kaki__nav a{text-decoration:none;color:var(--teks-70)}
.kaki__nav a:hover{color:var(--gold)}
.kaki__sangkalan{margin-top:24px;color:var(--teks-45);font-size:13.5px;max-width:76ch}
.kaki__meta{margin-top:18px;font-size:12.5px;color:var(--teks-45);display:flex;flex-wrap:wrap;gap:8px 22px}

/* ---------- Modal pembayaran QRIS (kotak terang di atas halaman gelap) ---------- */
.bayar{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(4,10,20,.78);backdrop-filter:blur(4px)}
.bayar[open]{display:flex}
.bayar__kotak{background:var(--cream-2);color:var(--teks-gelap);border-radius:18px;width:100%;max-width:430px;max-height:92vh;overflow-y:auto;padding:26px 24px 24px;position:relative;box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.bayar__kotak h3{color:var(--teks-gelap)}
.bayar__tutup{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--garis-gelap);background:transparent;font-size:19px;line-height:1;color:var(--teks-gelap-70);cursor:pointer}
.bayar__tutup:hover{background:rgba(15,42,74,.06)}
.bayar h3{font-size:20px}
.bayar__paket{font-size:13.5px;color:var(--teks-gelap-45);margin-top:3px}
.bayar__nominal{font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--navy);margin-top:12px;font-variant-numeric:tabular-nums}
.qr{margin-top:18px;background:#fff;border:1px solid var(--garis-gelap);border-radius:14px;padding:16px;text-align:center}
.qr__kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--garis-gelap);margin-bottom:14px}
.qr__merchant{text-align:left;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--teks-gelap)}
.qr__merchant small{display:block;font-weight:500;color:var(--teks-gelap-45);font-size:11.5px;letter-spacing:.06em}
.qr__cap{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--gold);border:1.5px solid var(--gold);border-radius:6px;padding:4px 8px}
.qr canvas{width:100%;max-width:260px;height:auto;image-rendering:pixelated;margin:0 auto}
.qr__pesan{font-size:14px;color:var(--teks-gelap-70);padding:26px 10px}
.langkah{list-style:none;margin-top:18px;counter-reset:l}
.langkah li{counter-increment:l;display:grid;grid-template-columns:auto 1fr;gap:11px;padding:7px 0;font-size:14.5px;color:var(--teks-gelap-70)}
.langkah li::before{content:counter(l);width:21px;height:21px;border-radius:50%;background:var(--navy);color:var(--cream);font-size:11.5px;font-weight:700;display:grid;place-items:center;margin-top:2px}
.bayar__aksi{display:grid;gap:9px;margin-top:20px}
.bayar__aksi .btn{width:100%}
.bayar__sangkalan{margin-top:14px;font-size:12px;color:var(--teks-gelap-45);line-height:1.5}
.bayar .btn--utama{background:var(--navy);color:var(--cream-2)}
.bayar .btn--garis{border-color:var(--garis-gelap);background:transparent;color:var(--navy);backdrop-filter:none}
.bayar .btn--garis:hover{border-color:var(--navy)}

.form{margin-top:18px;display:grid;gap:12px}
.f{display:grid;gap:5px;font-size:13px;font-weight:700;color:var(--teks-gelap-70)}
.f input,.f select{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--navy);background:#fff;border:1px solid var(--garis-gelap);border-radius:10px;padding:11px 12px;width:100%}
.f input:focus,.f select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.f input[type=file]{padding:9px;font-weight:500}
.f small{font-weight:500;font-size:12px;color:var(--teks-gelap-45)}
.form__pesan{font-size:13.5px;color:#A5433C;min-height:1px}
.form__pesan.ok{color:#2E6A50}
.sukses{margin-top:18px;background:var(--cream);border:1px solid var(--garis-gelap);border-radius:12px;padding:20px;text-align:center}
.sukses strong{display:block;font-size:17px;margin-bottom:6px;color:var(--teks-gelap)}
.sukses p{font-size:14.5px;color:var(--teks-gelap-70)}
.sukses a{color:var(--navy);font-weight:700}
.sukses code{background:rgba(15,42,74,.07);border-radius:6px;padding:2px 7px;font-size:13.5px}

/* ---------- Reveal ---------- */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
  .rv.on{opacity:1;transform:none}
}

/* Standalone content pages */
.page-main{min-height:65vh}.page-back{display:inline-flex;padding-top:22px;font-size:14px;color:var(--teks-70);text-decoration:none}.page-main .band{border-top:0}.folio h1,.consultation h1{font-size:clamp(27px,3vw,38px);letter-spacing:-.032em}.top__nav a[aria-current="page"]{color:var(--gold-terang);text-decoration:underline;text-underline-offset:6px}.page-main .consultation{background:var(--latar)}.page-back:focus-visible{outline:3px solid var(--gold);outline-offset:4px}