/* Halaman jualan Rapor Usaha. Kerangka mengikuti halaman jualan Kantor Pajak
   Mini dan Payroll Suite (bilah atas, hero dengan layar melayang, kartu, harga,
   tanya jawab), aksen ungu mengikuti aplikasinya. Terang bawaan, gelap ikut sistem. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --aksen:#6d5ae0; --aksen2:#5a48c9; --aksen3:#8b7cf0; --aksen-lembut:rgba(109,90,224,.1);
  --latar:#ffffff; --latar2:#f5f5f7; --latar-atas:rgba(255,255,255,.78);
  --teks:#1d1d1f; --teks2:#6e6e73; --teks3:#a1a1a6;
  --garis:#e5e5ea; --garis2:rgba(109,90,224,.3);
  --kartu:#ffffff; --kartu-hover:#fbfbfd;
  --hijau:#1f9d4c; --hijau-lembut:rgba(52,199,89,.13); --merah:#e5352b;
  --bayang:0 30px 80px rgba(40,20,120,.16),0 10px 28px rgba(0,0,0,.07);
  --pijar:rgba(109,90,224,.14);
  --lebar:1120px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --aksen:#a78bfa; --aksen2:#c4b5fd; --aksen3:#8b7cf0; --aksen-lembut:rgba(167,139,250,.14);
    --latar:#0b0b10; --latar2:#101016; --latar-atas:rgba(11,11,16,.75);
    --teks:#f4f4f8; --teks2:#a3a3b8; --teks3:#66667c;
    --garis:rgba(255,255,255,.09); --garis2:rgba(167,139,250,.35);
    --kartu:rgba(255,255,255,.035); --kartu-hover:rgba(255,255,255,.055);
    --hijau:#4ade80; --hijau-lembut:rgba(74,222,128,.14); --merah:#fb7185;
    --bayang:0 50px 120px rgba(0,0,0,.85),0 18px 44px rgba(0,0,0,.6);
    --pijar:rgba(167,139,250,.18);
    color-scheme:dark;
  }
}
html{scroll-behavior:smooth}
body{background:var(--latar);color:var(--teks);-webkit-font-smoothing:antialiased;font-family:"Plus Jakarta Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
b,strong{font-weight:700}
h1,h2,h3{letter-spacing:-.035em;line-height:1.06;font-weight:800}
h1{font-size:clamp(34px,5.6vw,62px)}
h2{font-size:clamp(27px,3.7vw,42px)}
h3{font-size:17px;letter-spacing:-.02em;line-height:1.3;font-weight:700}
.bungkus{width:100%;max-width:var(--lebar);margin:0 auto;padding:0 22px}
section{position:relative;padding:clamp(60px,8.5vw,110px) 0}
section.abu{background:var(--latar2)}
.mekar{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mekar::before{content:'';position:absolute;left:50%;top:-30%;width:900px;height:640px;max-width:160vw;transform:translateX(-50%);background:radial-gradient(closest-side,var(--pijar),transparent 70%)}
.kepala-sec{text-align:center;max-width:680px;margin:0 auto clamp(30px,5vw,54px)}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--aksen);margin-bottom:14px}
.kepala-sec p{color:var(--teks2);margin-top:14px;font-size:16.5px}

header{position:sticky;top:0;z-index:50;background:var(--latar-atas);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--garis)}
.bar{display:flex;align-items:center;gap:14px;height:62px}
.merek{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;min-width:0}
.tanda{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center}
.tanda img{width:30px;height:30px;object-fit:contain}
.merek b{font-size:15px;letter-spacing:-.03em;white-space:nowrap}
.merek span span{display:block;font-size:9.5px;letter-spacing:.15em;color:var(--teks3);font-weight:700}
.tautan{display:flex;gap:22px;font-size:13.5px;color:var(--teks2)}
.tautan a{text-decoration:none}
.tautan a:hover{color:var(--teks)}
.tbl{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:12px 22px;font-family:inherit;font-size:14.5px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap}
.tbl-utama{background:var(--aksen);color:#fff;box-shadow:0 10px 28px rgba(109,90,224,.3)}
:root:not([data-theme="light"]) .tbl-utama{color:#0b0b10}
@media (prefers-color-scheme:light){.tbl-utama{color:#fff}}
.tbl-utama:hover{filter:brightness(1.06);transform:translateY(-1px)}
.tbl-sepi{background:var(--kartu);border-color:var(--garis);color:var(--teks)}
.tbl-sepi:hover{background:var(--kartu-hover);border-color:var(--teks3)}
.tbl-kecil{padding:9px 16px;font-size:13px}

.hero{padding-top:clamp(48px,7vw,84px);padding-bottom:0;text-align:center}
.hero .bungkus{max-width:980px}
.lencana{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--teks2);border:1px solid var(--garis);border-radius:999px;padding:6px 14px;margin-bottom:22px;background:var(--kartu)}
.titik{width:6px;height:6px;border-radius:50%;background:var(--hijau);box-shadow:0 0 0 3px var(--hijau-lembut);flex-shrink:0}
.hero p.lead{font-size:clamp(15.5px,1.7vw,18.5px);color:var(--teks2);margin:20px auto 0;max-width:640px}
.aksi{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.harga-mini{margin-top:16px;font-size:13px;color:var(--teks3)}
.harga-mini b{color:var(--teks)}
.panggung{margin-top:clamp(38px,6vw,64px);position:relative;perspective:2200px}
.panggung::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:140px;background:linear-gradient(to bottom,transparent,var(--latar));pointer-events:none;z-index:2}
.layar{position:relative;border:1px solid var(--garis);border-radius:16px;overflow:hidden;background:#0b0b10;box-shadow:var(--bayang),0 0 0 1px rgba(109,90,224,.1);transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.layar img{display:block;width:100%;height:auto}
.panggung .layar{transform:rotateX(7deg) scale(.99)}
.panggung:hover .layar{transform:rotateX(0) scale(1)}

.dasar{border-top:1px solid var(--garis);border-bottom:1px solid var(--garis);padding:20px 0}
.dasar .bungkus{display:flex;gap:8px 26px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:14px;letter-spacing:-.01em;color:var(--teks2);font-weight:650}
.dasar .ket{width:100%;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teks3);font-weight:700;margin-bottom:2px}

.petak{display:grid;gap:16px}
.k3{grid-template-columns:repeat(3,1fr)}
.k2{grid-template-columns:repeat(2,1fr)}
.k4{grid-template-columns:repeat(4,1fr)}
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:20px;padding:24px 22px;position:relative;transition:border-color .18s,background .18s}
.kartu:hover{border-color:var(--garis2);background:var(--kartu-hover)}
.kartu h3{margin-bottom:8px}
.kartu p{font-size:14px;color:var(--teks2);line-height:1.65}
.kartu .no{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--aksen);margin-bottom:13px}
.ikon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:15px;background:var(--aksen-lembut);color:var(--aksen)}
.kartu .sakit{font-size:13px;color:var(--merah);font-weight:650;margin-bottom:6px}

.silang{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.silang + .silang{margin-top:clamp(56px,8vw,100px)}
.silang h2{font-size:clamp(24px,3vw,34px)}
.silang p{color:var(--teks2);margin-top:14px;font-size:15.5px}
.silang .gbr{perspective:1900px;min-width:0}
.silang .gbr .layar{transform:rotateY(-9deg) rotateX(3deg)}
.silang.balik .gbr .layar{transform:rotateY(9deg) rotateX(3deg)}
.silang .gbr:hover .layar{transform:none}
.daftar{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px}
.daftar li{display:flex;gap:11px;font-size:14.5px;color:var(--teks2);line-height:1.55}
.daftar svg{flex-shrink:0;margin-top:4px;color:var(--hijau)}

.privasi{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.privasi p{color:var(--teks2);margin-top:14px;font-size:15.5px}
.alur{background:var(--kartu);border:1px solid var(--garis);border-radius:20px;padding:22px}
.alur-baris{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600}
.alur-baris span.ket{font-size:12px;color:var(--teks2);font-weight:400;display:block}
.bulat{width:38px;height:38px;border-radius:50%;background:var(--aksen-lembut);color:var(--aksen);display:grid;place-items:center;flex-shrink:0}
.alur-garis{width:2px;height:18px;background:var(--garis);margin:4px 0 4px 18px}
.alur-silang{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--garis);color:var(--teks3);font-size:13px}
.alur-silang svg{color:var(--merah)}

.harga-kotak{max-width:520px;margin:0 auto;background:var(--kartu);border:1px solid var(--garis2);border-radius:24px;padding:34px 32px;text-align:center;box-shadow:0 20px 60px var(--pijar)}
.harga-kotak .nominal{font-size:clamp(40px,6vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:8px 0 4px}
.harga-kotak .nominal small{font-size:16px;color:var(--teks2);font-weight:600;letter-spacing:0}
.harga-kotak .sub{color:var(--teks2);font-size:14px}
.harga-kotak .daftar{text-align:left;margin:22px auto 26px;max-width:380px}
.harga-kotak .catatan{font-size:12px;color:var(--teks3);margin-top:12px}

.tanya{max-width:760px;margin:0 auto}
.tanya details{border-bottom:1px solid var(--garis);padding:16px 0}
.tanya summary{cursor:pointer;font-weight:650;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.tanya summary::after{content:'+';color:var(--teks3);font-weight:400}
.tanya details[open] summary::after{content:'\2013'}
.tanya details p{color:var(--teks2);margin-top:10px;font-size:14.5px}

footer{border-top:1px solid var(--garis);padding:28px 0;font-size:13px;color:var(--teks3)}
footer .bungkus{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:900px){.k3,.k4{grid-template-columns:1fr 1fr}.silang,.privasi{grid-template-columns:1fr}.silang.balik > :last-child{order:-1}.tautan{display:none}}
@media (max-width:600px){.k3,.k4,.k2{grid-template-columns:1fr}.bar .tbl-sepi{display:none}}