/* Palet FastClip: biru Bimatech edukatif (keputusan Bima 8 Nov 2026, lewat Krisna).
   navy #0B2E83, royal #1E5BD8, putih/abu terang; oranye #FF8A00 hanya untuk badge. */
:root{
  --bg:#ffffff; --bg2:#f3f6fc; --garis:#dbe3f3;
  --fg:#0f172a; --redup:#5b6478;
  --navy:#0B2E83; --royal:#1E5BD8; --biru-muda:#e6eefb;
  --badge:#FF8A00;
  --grad:linear-gradient(90deg,var(--navy),var(--royal));
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--royal)}
img,video{max-width:100%;display:block}
.wadah{width:min(1080px,100% - 32px);margin:0 auto}
.gradasi{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{display:inline-block;background:var(--badge);color:#fff;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}

/* kepala */
.kepala{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:900;font-size:22px;letter-spacing:-.03em;text-decoration:none;color:var(--navy);display:flex;align-items:center}
.logo img{height:34px;width:auto;margin-right:10px}
.kepala nav a{color:var(--redup);text-decoration:none;font-size:14px;margin-left:18px}
.kepala nav a:hover{color:var(--navy)}
@media(max-width:600px){.kepala nav{display:none}}

/* tombol */
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:12px;font-weight:800;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:transform .12s ease,opacity .12s ease,background .12s ease}
.tombol:active{transform:scale(.98)}
.tombol-utama{background:var(--navy);color:#fff}
.tombol-utama:hover{background:var(--royal)}
.tombol-garis{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.tombol-garis:hover{background:var(--biru-muda)}
.tombol[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.tombol-besar{padding:18px 34px;font-size:18px}

/* bagian */
section{padding:72px 0}
@media(max-width:600px){section{padding:52px 0}}
h1,h2,h3{letter-spacing:-.03em;line-height:1.1;margin:0 0 16px;text-wrap:balance;color:var(--navy)}
h1{font-size:clamp(38px,7vw,72px);font-weight:900}
h2{font-size:clamp(28px,4.5vw,44px);font-weight:900}
h3{font-size:20px;font-weight:800}
.judul-kecil{color:var(--royal);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.pengantar{color:var(--redup);font-size:clamp(17px,2vw,20px);max-width:62ch;margin:0 0 28px}
.tengah{text-align:center}
.tengah .pengantar{margin-left:auto;margin-right:auto}

/* hero */
.hero{padding:40px 0 64px}
.hero .pengantar{max-width:56ch}
.hero-aksi{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.hero-catatan{color:var(--redup);font-size:14px;margin-top:14px}

/* sebelum/sesudah */
.banding{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:760px){.banding{grid-template-columns:1fr}}
.kartu-video{background:var(--bg2);border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden}
.kartu-video .label{padding:12px 16px;font-weight:800;font-size:14px;display:flex;justify-content:space-between;align-items:center;color:var(--redup)}
.kartu-video .label.sesudah{color:var(--navy)}
.bingkai{aspect-ratio:9/16;max-height:520px;margin:0 auto;background:var(--navy);display:flex;align-items:center;justify-content:center;color:#c9d6f5;font-size:14px;text-align:center;padding:16px}
.bingkai video{width:100%;height:100%;object-fit:cover}

/* langkah */
.langkah{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.langkah{grid-template-columns:1fr}}
.langkah > div{background:var(--bg2);border:1px solid var(--garis);border-radius:var(--radius);padding:24px}
.langkah .nomor{width:40px;height:40px;border-radius:12px;background:var(--navy);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.langkah p{color:var(--redup);margin:0}

/* fitur */
.fitur{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.fitur{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fitur{grid-template-columns:1fr}}
.fitur > div{border:1px solid var(--garis);border-radius:var(--radius);padding:20px;background:#fff;box-shadow:0 1px 2px rgba(11,46,131,.05)}
.fitur h3{font-size:17px;margin-bottom:6px}
.fitur p{color:var(--redup);margin:0;font-size:15px}

/* catatan cara kerja */
.kotak-info{border:1px solid var(--garis);border-left:4px solid var(--royal);border-radius:var(--radius);padding:20px 22px;background:var(--biru-muda);color:#334155}
.kotak-info strong{color:var(--navy)}

/* harga */
.harga-kartu{max-width:520px;margin:0 auto;border:1px solid var(--garis);border-radius:20px;padding:34px 28px;background:#fff;text-align:center;position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(11,46,131,.10)}
.harga-kartu::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad)}
.harga-angka{font-size:clamp(40px,7vw,60px);font-weight:900;letter-spacing:-.04em;margin:6px 0;color:var(--royal)}
.harga-coret{color:#9aa3b5;text-decoration:line-through;font-size:20px}
.harga-ket{color:var(--redup);margin:0 0 22px}
.harga-isi{list-style:none;padding:0;margin:0 0 26px;text-align:left;display:grid;gap:10px}
.harga-isi li{padding-left:28px;position:relative;color:#334155}
.harga-isi li::before{content:"✓";position:absolute;left:0;color:var(--royal);font-weight:900}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--garis);padding:6px 0}
.faq summary{cursor:pointer;font-weight:800;font-size:17px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--royal);font-weight:900;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--redup);margin:0 0 16px}

/* cta akhir */
.cta-akhir{text-align:center;padding:80px 0;background:var(--bg2);border-top:1px solid var(--garis)}

/* kaki */
footer{border-top:1px solid var(--garis);padding:28px 0 40px;color:var(--redup);font-size:14px;background:#fff}
footer .baris{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center}
footer a{color:var(--redup);text-decoration:none}
footer a:hover{color:var(--navy)}

/* halaman teks (S&K dsb) */
.artikel{max-width:72ch;margin:0 auto;padding:40px 0 80px}
.artikel h1{font-size:clamp(30px,5vw,46px)}
.artikel h2{font-size:22px;margin-top:36px}
.artikel p,.artikel li{color:#334155}
.artikel .meta{color:var(--redup);font-size:14px}

/* halaman akses */
.akses{max-width:520px;margin:0 auto;padding:48px 0 80px;text-align:center}
.akses form{display:grid;gap:12px;margin-top:22px}
.akses input{width:100%;padding:16px 18px;border-radius:12px;border:1.5px solid var(--garis);background:#fff;color:var(--fg);font-size:17px}
.akses input:focus{outline:2px solid var(--royal);border-color:transparent}
.status{margin-top:18px;padding:16px 18px;border-radius:12px;border:1px solid var(--garis);background:var(--bg2);text-align:left}
.status.ok{border-color:var(--royal);background:var(--biru-muda)}
.status p{margin:0 0 8px}
.status .kecil{color:var(--redup);font-size:14px}
.berputar{display:inline-block;width:14px;height:14px;border:2px solid var(--garis);border-top-color:var(--royal);border-radius:50%;animation:putar .8s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes putar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.berputar{animation:none}}
.tersembunyi{display:none!important}