:root{--biru:#003399;--kuning:#FACC08;--tua:#0B1B44;--abu:#4A5675;--terang:#F5F7FB;--garis:#DCE3F0}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 17px/1.6 'Poppins',Arial,sans-serif;color:var(--tua);background:var(--terang);-webkit-text-size-adjust:100%}
h1,h2{font-family:'Poppins',Arial,sans-serif;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.kop{background:#fff;border-bottom:4px solid var(--kuning)}
.atas{display:flex;justify-content:space-between;align-items:center;padding:4px 20px;max-width:1120px;margin:0 auto}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:72px;width:auto;display:block}
.tombol{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;background:var(--kuning);color:var(--tua);font-weight:600;text-decoration:none;border-radius:10px;transition:transform .2s,background .2s;text-align:center}
.tombol:hover{background:#FFD93D;transform:translateY(-2px)}
.tombol:focus-visible,summary:focus-visible,.logo:focus-visible{outline:3px solid var(--tua);outline-offset:3px}
.hero .tombol:focus-visible,.tutup .tombol:focus-visible{outline-color:#fff}
.tombol.kecil{min-height:44px;padding:8px 16px;font-size:.9rem;background:var(--biru);color:#fff}
.tombol.kecil:hover{background:#0B3FB0}
.tombol.gelap{background:var(--biru);color:#fff}
.tombol.gelap:hover{background:#0B3FB0}

.hero{background:var(--biru);color:#fff;margin:20px 12px 0;border-radius:24px;padding:36px 22px 40px;display:grid;gap:32px;max-width:1096px}
.hero h1{font-size:clamp(1.8rem,7vw,3.1rem);max-width:16em}
.lead{margin:18px 0 26px;color:#E6ECFA;max-width:34em;font-size:1.05rem}
.jam{margin-top:14px;color:var(--kuning);font-size:.95rem}
.hero-chat{display:flex;justify-content:center}
.hp{width:100%;max-width:320px;background:var(--tua);border:2px solid #2A4A9A;border-radius:26px;padding:14px;display:grid;gap:10px;transform:rotate(2deg)}
.hp-bar{font-weight:600;color:var(--kuning);padding:2px 6px 10px;border-bottom:1px solid #2A4A9A}
.gelembung{padding:10px 14px;border-radius:14px;font-size:.92rem;line-height:1.45;max-width:85%}
.kanan{background:var(--kuning);color:var(--tua);justify-self:end;border-bottom-right-radius:4px}
.kiri{background:var(--terang);color:var(--tua);border-bottom-left-radius:4px}

.blok{max-width:1000px;margin:0 auto;padding:56px 20px 8px}
h2{font-size:clamp(1.5rem,5vw,2.1rem);margin-bottom:18px;color:var(--biru)}
.langkah{list-style:none;padding:0;display:grid;gap:0;counter-reset:n}
.langkah li{counter-increment:n;display:grid;grid-template-columns:52px 1fr;gap:2px 14px;padding:18px 0;border-top:1px solid var(--garis)}
.langkah li::before{content:counter(n);grid-row:span 2;font:700 2.2rem/1 'Poppins',Arial,sans-serif;color:var(--biru)}
.langkah b{font-size:1.1rem;color:var(--tua);font-weight:600}
.langkah span{color:var(--abu)}
.produk{display:grid;gap:20px;align-items:center;padding-bottom:40px}
.produk p{color:var(--abu);max-width:32em}
.tanya{padding-top:24px}
details{border-top:1px solid var(--garis);padding:4px 0}
summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600;color:var(--tua);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--biru)}
details[open] summary::after{content:"-"}
details p{padding:0 0 16px;color:var(--abu);max-width:36em}
.tutup{margin:48px 12px 0;padding:44px 22px;background:var(--kuning);border-radius:24px;max-width:1096px}
.tutup h2{color:var(--tua);margin-bottom:8px}
.tutup p{margin-bottom:22px;color:var(--tua)}
.tutup .tombol{background:var(--biru);color:#fff}
.tutup .tombol:hover{background:#0B3FB0}
.kaki{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;max-width:1000px;margin:0 auto;padding:28px 20px 36px;color:var(--abu);font-size:.9rem}

@media(min-width:760px){
  .atas{padding:6px 32px}
  .hero{grid-template-columns:1.3fr 1fr;align-items:center;padding:64px 56px;margin:28px auto 0;width:calc(100% - 48px)}
  .langkah{grid-template-columns:repeat(3,1fr);gap:28px}
  .langkah li{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start;border-top:2px solid var(--biru);padding-top:16px;gap:0}
  .langkah li::before{grid-row:auto}
  .produk{grid-template-columns:1.4fr auto;gap:40px}
  .tutup{margin:64px auto 0;width:calc(100% - 48px);padding:64px 56px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}