@font-face{font-family:"Plus Jakarta Sans";src:url("/font/PlusJakartaSans-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/font/BricolageGrotesque-latin.woff2") format("woff2");font-weight:700 800;font-display:swap}
:root{--navy:#0b1d45;--navy2:#16326e;--biru:#0a3fa6;--hijau:#3ddc84;--hijau-t:#0f6b32;--latar:#f3f5f9;--garis:#dfe5ef;--teks:#1b2433;--redup:#4f5b6e;--es:#c9d6ee;--r:18px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--teks);font:400 17px/1.65 "Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:var(--biru)}a:hover{color:#072f7e}
h1,h2,h3{font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif;font-weight:800;color:var(--navy);line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,76px);letter-spacing:-.02em}h2{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.015em}h3{font-size:22px;line-height:1.2}
p{margin:0;text-wrap:pretty}.lebar{width:min(1200px,100% - 40px);margin-inline:auto}
.lewati{position:absolute;left:-999px}.lewati:focus{left:16px;top:12px;z-index:9;background:#fff;padding:10px 14px;border-radius:8px}
:focus-visible{outline:3px solid #6f9bea;outline-offset:2px}
.kepala{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--garis)}
.kepala-isi{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.merek{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px;color:var(--navy)}.merek:hover{color:var(--navy)}.merek img{width:38px;height:38px;border-radius:9px}.merek span span{color:var(--hijau-t)}
.menu{display:flex;align-items:center;gap:6px}.menu a{padding:10px 13px;border-radius:10px;text-decoration:none;font-size:15px;font-weight:600;color:#2c3648}.menu a:hover,.menu a[aria-current]{background:var(--latar);color:var(--navy)}
.menu-hp{display:none}.menu-hp summary{list-style:none;cursor:pointer;min-height:44px;padding:9px 14px;border:1px solid var(--garis);border-radius:10px;font-size:15px;font-weight:700;color:var(--navy)}.menu-hp summary::-webkit-details-marker{display:none}
.menu-hp nav{position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--garis);padding:12px 20px 20px;display:grid;gap:4px}.menu-hp nav a{padding:13px 12px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--navy)}
.tombol{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:13px;background:var(--biru);color:#fff!important;text-decoration:none;font-weight:700;font-size:16px;transition:transform .15s,background .15s}.tombol:hover{background:#072f7e;transform:translateY(-1px)}
.tombol.hijau{background:var(--hijau);color:var(--navy)!important}.tombol.hijau:hover{background:#6be8a3}.tombol.garis{background:transparent;border:1.5px solid #7f93bd;color:#fff!important}.tombol.garis:hover{background:var(--navy2)}.tombol.kecil{min-height:44px;padding:0 16px;font-size:15px}
.pahlawan{background:var(--navy);color:#fff;overflow:hidden;position:relative}
.pahlawan::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;pointer-events:none}
.pahlawan-isi{position:relative;display:grid;gap:44px;padding:clamp(52px,8vw,96px) 0 clamp(56px,8vw,96px)}.pahlawan h1{color:#fff;max-width:13ch}.pahlawan h1 em{font-style:normal;color:var(--hijau)}
.label{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--biru)}.pahlawan .label{color:var(--hijau)}
.pahlawan-teks{display:grid;gap:24px;max-width:780px}.pahlawan-teks>p{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--es);max-width:62ch}.aksi{display:flex;flex-wrap:wrap;gap:12px}
.bingkai{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 26px 70px rgba(0,0,0,.5);border:1px solid #2c4580}.bingkai-atas{display:flex;gap:6px;padding:10px 13px;background:#f3f5f9;border-bottom:1px solid var(--garis)}.bingkai-atas i{width:9px;height:9px;border-radius:50%;background:#c6cfde}
.bagian{padding:clamp(64px,9vw,120px) 0}.bagian.abu{background:var(--latar)}.bagian.navy{background:var(--navy);color:var(--es)}.bagian.navy h2,.bagian.navy h3{color:#fff}.bagian.navy .label{color:var(--hijau)}.kepala-bagian{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(36px,5vw,60px)}.kepala-bagian p{font-size:19px;color:var(--redup)}.bagian.navy .kepala-bagian p{color:var(--es)}
.langkah{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:20px;counter-reset:l}.langkah article{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:30px;display:grid;gap:12px;align-content:start;counter-increment:l}.langkah article::before{content:counter(l);font:800 56px/1 "Bricolage Grotesque",sans-serif;color:var(--biru)}.langkah p{color:var(--redup);font-size:16px}
.susun{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px}.susun article{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:28px;display:grid;gap:10px;align-content:start}.susun p{color:var(--redup);font-size:16px}.navy .susun article{background:var(--navy2);border-color:#2c4580}.navy .susun p{color:var(--es)}
.sorot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:1px;background:var(--garis);border:1px solid var(--garis);border-radius:var(--r);overflow:hidden}.sorot div{background:#fff;padding:26px;display:grid;gap:6px;align-content:start}.sorot b{font:800 clamp(30px,3.6vw,42px)/1 "Bricolage Grotesque",sans-serif;color:var(--navy)}.sorot span{font-size:15px;color:var(--redup);line-height:1.4}
.lencana-daftar{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}.lencana-daftar li{padding:9px 15px;background:#fff;border:1px solid var(--garis);border-radius:999px;font-size:15px;font-weight:600;color:var(--navy)}
.harga{background:var(--navy);color:#fff;border-radius:26px;padding:clamp(30px,5vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px;align-items:center}.harga h2,.harga h3{color:#fff}.angka-harga{font:800 clamp(56px,8vw,96px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}.harga ul{list-style:none;padding:0;margin:0;display:grid;gap:13px;color:#e8eefb}.harga li{padding-left:30px;position:relative}.harga li::before{content:"";position:absolute;left:3px;top:.42em;width:14px;height:8px;border-left:3px solid var(--hijau);border-bottom:3px solid var(--hijau);transform:rotate(-45deg)}
.tj{display:grid;gap:10px;max-width:860px}.tj details{background:#fff;border:1px solid var(--garis);border-radius:14px}.tj summary{cursor:pointer;padding:19px 22px;font-weight:700;color:var(--navy);list-style-position:outside;margin-left:18px}.tj details p{padding:0 22px 20px 40px;color:#3d4757}
.ajakan{display:grid;gap:22px;justify-items:start}.ajakan p{font-size:19px;max-width:60ch}
.judul-hal{background:var(--navy);padding:clamp(52px,7vw,88px) 0}.judul-hal h1{color:#fff;font-size:clamp(36px,5.2vw,62px);max-width:20ch}.judul-hal p{color:var(--es);font-size:19px;margin-top:16px;max-width:62ch}.judul-hal .label{color:var(--hijau);margin-bottom:12px}
.grup-dok{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:18px}.grup-dok section{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:26px}.grup-dok h2{font-size:21px;line-height:1.2;margin-bottom:12px}.grup-dok ul{margin:0;padding-left:20px;color:#2c3648;font-size:16px;display:grid;gap:5px}
.naskah{max-width:760px;display:grid;gap:18px}.naskah h2{font-size:27px;margin-top:22px;line-height:1.15}.naskah ul{margin:0;padding-left:22px;display:grid;gap:7px}.naskah table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}.naskah th,.naskah td{border:1px solid var(--garis);padding:11px 13px;text-align:left;vertical-align:top}.naskah th{background:var(--latar);color:var(--navy)}.gulir{overflow-x:auto}
.catatan{background:var(--latar);border-radius:14px;padding:18px 20px;font-size:15.5px;color:#2c3648}
.kaki{background:#071431;color:var(--es);padding:60px 0 34px;font-size:15px}.kaki-isi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:34px}.kaki .merek{color:#fff}.kaki .merek span span{color:var(--hijau)}.kaki h2{font:700 14px/1.3 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;color:#fff;margin-bottom:12px;text-transform:uppercase}.kaki ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}.kaki a{color:var(--es);text-decoration:none}.kaki a:hover{color:#fff;text-decoration:underline}.kaki-bawah{border-top:1px solid #243b6e;margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:14px}
@media(max-width:860px){.menu{display:none}.menu-hp{display:block}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tombol{transition:none}.tombol:hover{transform:none}}
.kartu-harga{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}.kartu-harga article{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:24px;min-width:0;display:grid;gap:8px}.kartu-harga h2{font-size:21px;line-height:1.2}.nilai-harga{font:800 clamp(26px,2.3vw,31px)/1 "Bricolage Grotesque",sans-serif;color:var(--navy);letter-spacing:-.01em}.kartu-harga span{font-size:15px;color:var(--redup)}
.melayang{position:fixed;right:18px;bottom:18px;z-index:6;display:grid;gap:10px;justify-items:center}.tombol-apung{display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 8px 24px rgba(11,29,69,.28);transition:transform .15s}.tombol-apung:hover{transform:translateY(-2px)}.tombol-apung.atas{width:46px;height:46px;background:#fff;color:var(--navy);border:1px solid var(--garis)}.tombol-apung.atas:hover{color:var(--biru)}.tombol-apung.wa{width:60px;height:60px;background:#128c4a;color:#fff}.tombol-apung.wa:hover{background:#0f7a40;color:#fff}.kaki-bawah{padding-right:80px}
@media(prefers-reduced-motion:reduce){.tombol-apung{transition:none}.tombol-apung:hover{transform:none}}
@media print{.melayang{display:none}}
/* Beranda: gambar aplikasi utuh dan ringkas, dengan lapisan animasi di atasnya: klik Cetak, dokumen keluar. Hanya transform & opacity supaya ringan di laptop lama. */
.panggung{position:relative;width:min(100%,600px);margin-inline:auto;padding:22px 26px 30px 18px;animation:masuk .8s ease-out both}
.panggung::before{content:"";position:absolute;inset:-8% -6%;background:radial-gradient(closest-side,rgba(61,220,132,.2),rgba(45,104,226,.16) 55%,transparent);pointer-events:none;animation:denyut 7s ease-in-out infinite}
.panggung-apung{position:relative;animation:apung 7s ease-in-out infinite}
.layar{position:relative}
.klik{position:absolute;left:22.4%;top:93.4%;width:24.9%;height:5.6%;border-radius:5px;box-shadow:0 0 0 2px var(--hijau),0 0 16px 3px rgba(61,220,132,.75);opacity:0;animation:klik 10s linear infinite}
.kursor-jalur{position:absolute;inset:0;pointer-events:none;opacity:0;animation:kursor-jalan 10s ease-in-out infinite}
.kursor{display:block;transform-origin:20% 10%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));animation:kursor-tekan 10s linear infinite}
.lembar{position:absolute;right:0;bottom:0;width:21%;aspect-ratio:210/297;padding:2.6% 2%;background:#fff;color:var(--navy);border-radius:3px;font:800 clamp(8px,1.1vw,12px)/1.15 "Bricolage Grotesque",sans-serif;box-shadow:0 12px 26px rgba(4,12,34,.42);transform:translate(var(--x),var(--y)) rotate(var(--r));animation:lembar 10s cubic-bezier(.2,.8,.25,1) infinite both}
.lembar b{display:block;padding-bottom:.45em;border-bottom:1.5px solid var(--navy)}
.lembar i{display:block;height:58%;margin-top:.7em;background:repeating-linear-gradient(#cfd7e4 0 1.5px,transparent 1.5px 6px)}
.lembar-1{--x:-24%;--y:-24%;--r:-4deg}.lembar-2{--x:-9%;--y:-9%;--r:-1deg;animation-delay:.4s}.lembar-3{--x:8%;--y:6%;--r:3deg;animation-delay:.8s}
.chip{position:absolute;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;background:#fff;color:var(--navy);border-radius:11px;box-shadow:0 12px 28px rgba(4,12,34,.42);font-size:clamp(11px,1.1vw,13px);line-height:1.2}
.chip b{display:block}.chip small{display:block;font-size:.85em;color:#4a5568}
.chip-ikon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#e5ecfa;color:var(--biru);font-size:10px;font-weight:800}.chip-ikon.centang{background:var(--hijau);color:var(--navy);font-size:15px}
.chip-pdf{left:-14px;top:-18px;animation:chip-pdf 10s ease-out infinite both}.chip-siap{left:-14px;bottom:-20px;animation:chip-siap 10s ease-out infinite both}
@keyframes masuk{from{opacity:0;transform:translateY(22px)}}
@keyframes denyut{50%{opacity:.55}}
@keyframes apung{50%{transform:translateY(-8px)}}
@keyframes kursor-jalan{0%,3%{opacity:0;transform:translate(74%,28%)}9%{opacity:1;transform:translate(74%,28%)}26%,36%{opacity:1;transform:translate(34.5%,94.5%)}42%,100%{opacity:0;transform:translate(34.5%,94.5%)}}
@keyframes kursor-tekan{0%,27%,33%,100%{transform:scale(1)}30%{transform:scale(.78)}}
@keyframes klik{0%,28%{opacity:0;transform:scale(1)}31%{opacity:1;transform:scale(1)}36%{opacity:.8;transform:scale(1.04)}44%,100%{opacity:0;transform:scale(1.04)}}
@keyframes lembar{0%,31%{opacity:0;transform:translate(-30%,-55%) rotate(0) scale(.82)}40%,88%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}94%,100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 8%)) rotate(var(--r)) scale(1)}}
@keyframes chip-pdf{0%,1%{opacity:0;transform:translateX(-12px)}6%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-12px)}}
@keyframes chip-siap{0%,50%{opacity:0;transform:translateY(10px) scale(.86)}55%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(6px)}}
@media(min-width:1024px){.pahlawan-isi{grid-template-columns:minmax(0,1fr) minmax(0,600px);align-items:center;gap:48px}.pahlawan h1{font-size:clamp(48px,5vw,72px)}.pahlawan-teks>p{font-size:clamp(18px,1.5vw,20px)}}
@media(max-width:640px){.panggung{padding:18px 12px 26px 8px}.chip-pdf,.chip-siap{left:-6px}.chip{padding:5px 9px 5px 5px}.chip-ikon{width:24px;height:24px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.panggung,.panggung::before,.panggung-apung,.kursor,.lembar,.chip{animation:none}.klik,.kursor-jalur{display:none}}