/* Gaya bersama Cek SPT (index, pindah, tentang, laporan). Font: Plus Jakarta Sans (Tokotype, SIL OFL 1.1, lihat fonts/OFL.txt). */
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --bg:#f5f7fa;--bg2:#eef2f6;--kartu:#ffffff;--teks:#0f1b2d;--redup:#5b6b7f;--garis:#e2e8f0;--navy:#12284c;
  --utama:#0b7a5a;--utama-2:#0d8c67;--utama-lembut:#e7f5ef;--utama-teks:#ffffff;
  --aksen:#f2a516;--aksen-lembut:#fff5df;--aksen-teks:#744700;
  --kb:#b03a24;--kb-lembut:#fdece8;--lb:#1f5fae;--lb-lembut:#e8f0fb;--nihil:#1d7144;--nihil-lembut:#e5f4eb;
  --bayang:0 1px 2px rgba(15,27,45,.06),0 4px 16px rgba(15,27,45,.06);--bayang-besar:0 10px 40px rgba(15,27,45,.12);
  --r:14px;--fokus:#f2a516;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0b1220;--bg2:#101a2c;--kartu:#131e31;--teks:#e7edf6;--redup:#9fb0c6;--garis:#23324b;--navy:#dce6f5;
  --utama:#3cc59a;--utama-2:#57d3ab;--utama-lembut:#123a30;--utama-teks:#04140e;
  --aksen:#f5b942;--aksen-lembut:#3a2c0e;--aksen-teks:#f8dc94;
  --kb:#ff917a;--kb-lembut:#3a1d18;--lb:#8ab9ff;--lb-lembut:#172a46;--nihil:#7fdca6;--nihil-lembut:#15301f;
  --bayang:0 1px 2px #0008,0 4px 16px #0006;--bayang-besar:0 10px 40px #000a}}
:root[data-theme=dark]{
  --bg:#0b1220;--bg2:#101a2c;--kartu:#131e31;--teks:#e7edf6;--redup:#9fb0c6;--garis:#23324b;--navy:#dce6f5;
  --utama:#3cc59a;--utama-2:#57d3ab;--utama-lembut:#123a30;--utama-teks:#04140e;
  --aksen:#f5b942;--aksen-lembut:#3a2c0e;--aksen-teks:#f8dc94;
  --kb:#ff917a;--kb-lembut:#3a1d18;--lb:#8ab9ff;--lb-lembut:#172a46;--nihil:#7fdca6;--nihil-lembut:#15301f;
  --bayang:0 1px 2px #0008,0 4px 16px #0006;--bayang-besar:0 10px 40px #000a}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--teks);font:16px/1.6 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wadah{max-width:1080px;margin:0 auto;padding:0 20px}
.sempit{max-width:760px;margin-left:auto;margin-right:auto}
a{color:var(--utama);text-underline-offset:3px}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;color:var(--navy);margin:0}
p{margin:.5em 0}
.redup{color:var(--redup)}
.kecil{font-size:.875rem}
.tersembunyi{display:none!important}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;border-radius:8px}
svg.ik{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.alis{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--utama);margin-bottom:10px}

/* bilah atas */
.bilah{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--kartu) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--garis)}
.bilah .wadah{display:flex;align-items:center;gap:12px;height:60px}
.merek{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.06rem;text-decoration:none;color:var(--navy);min-height:44px;letter-spacing:-.01em}
.merek i{font-style:normal;color:var(--utama)}
.merek span{font-size:1.15rem;letter-spacing:-.02em}
.merek img{width:30px;height:30px;border-radius:8px}
.lencana{font-size:.7rem;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:99px;background:var(--aksen-lembut);color:var(--aksen-teks)}
.nav-kanan{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-kanan a{font-size:.9rem;font-weight:600;color:var(--redup);text-decoration:none;padding:10px 10px;border-radius:8px}
.nav-kanan a:hover{color:var(--teks);background:var(--bg2)}
@media (max-width:640px){.nav-kanan a.lebar{display:none}}
#tema{min-width:44px;min-height:44px}

/* tombol */
button,.tombol{font:inherit;font-weight:700;cursor:pointer;border-radius:10px;padding:12px 20px;min-height:46px;border:1px solid var(--garis);background:var(--kartu);color:var(--teks);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .08s,background .15s,border-color .15s,box-shadow .15s}
button:hover,.tombol:hover{border-color:color-mix(in srgb,var(--utama) 50%,var(--garis))}
button:active,.tombol:active{transform:translateY(1px)}
.utama{background:var(--utama);color:var(--utama-teks);border-color:var(--utama);box-shadow:0 1px 2px rgba(11,122,90,.3),0 6px 18px rgba(11,122,90,.22)}
.utama:hover{background:var(--utama-2);border-color:var(--utama-2)}
.besar{padding:15px 26px;font-size:1.05rem;min-height:54px;border-radius:12px}
.hantu{background:transparent;border-color:transparent;color:var(--redup);padding:8px 10px;min-height:44px}
.hantu:hover{background:var(--bg2);color:var(--teks)}
.aksi{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-block:56px 40px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:32px;padding-block:32px 24px}}
.hero h1{font-size:clamp(2rem,5.2vw,3.25rem);font-weight:800;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--utama)}
.hero .lead{font-size:1.12rem;color:var(--redup);max-width:54ch;margin:18px 0 28px}
.janji{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;padding:0;list-style:none;font-size:.9rem;color:var(--redup)}
.janji li{display:flex;align-items:center;gap:8px}
.janji svg{color:var(--utama);width:18px;height:18px}
.pratinjau{position:relative;background:var(--kartu);border:1px solid var(--garis);border-radius:20px;box-shadow:var(--bayang-besar);padding:22px;transform:rotate(.6deg)}
.pratinjau::before{content:"";position:absolute;inset:-26px -18px auto auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--utama) 22%,transparent),transparent 70%);z-index:-1}
.pratinjau .tag-contoh{position:absolute;top:-12px;left:20px;background:var(--navy);color:var(--kartu);font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:99px}
.pratinjau .p-status{background:var(--kb-lembut);border-radius:14px;padding:16px}
.pratinjau .p-label{font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--kb)}
.pratinjau .p-angka{font-size:2rem;font-weight:800;color:var(--kb);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pratinjau .p-baris{display:flex;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--garis);font-size:.9rem}
.pratinjau .p-baris:last-child{border-bottom:0}
.pratinjau .p-baris b{font-variant-numeric:tabular-nums;white-space:nowrap}
.pratinjau .p-jalur{height:8px;border-radius:99px;background:var(--bg2);margin-top:6px;overflow:hidden}
.pratinjau .p-jalur span{display:block;height:100%;background:var(--kb);border-radius:99px}

/* bagian & kartu fitur */
.bagian{padding-block:48px}
.bagian > h2,.bagian .judul-bagian{font-size:clamp(1.45rem,3.4vw,2rem);font-weight:800;max-width:30ch}
.bagian .sub{color:var(--redup);max-width:60ch;margin:10px 0 26px}
.cara{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:c;padding:0;list-style:none}
@media (max-width:760px){.cara{grid-template-columns:1fr}}
.cara li{counter-increment:c;background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r);padding:22px;box-shadow:var(--bayang)}
.cara li::before{content:counter(c);display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--utama-lembut);color:var(--utama);font-weight:800;margin-bottom:14px}
.cara b{display:block;font-size:1.02rem;color:var(--navy);margin-bottom:4px}
.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.contoh{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;border-radius:var(--r);font-weight:400;box-shadow:var(--bayang);background:var(--kartu);min-height:150px;justify-content:flex-start}
.contoh:hover{box-shadow:var(--bayang-besar);transform:translateY(-2px)}
.contoh b{font-size:1rem;color:var(--navy)}
.contoh .nilai{font-weight:800;font-variant-numeric:tabular-nums;margin-top:auto;font-size:1.05rem}
.contoh .lihat{font-size:.82rem;font-weight:700;color:var(--utama)}
.pindah-cta{display:flex;gap:18px;align-items:center;background:var(--navy);color:#fff;border-radius:18px;padding:22px 24px;margin:24px 0 0;text-decoration:none;box-shadow:var(--bayang-besar)}
:root[data-theme=dark] .pindah-cta,:root:not([data-theme=light]) .pindah-cta{color:inherit}
.pindah-cta svg{color:var(--aksen);width:36px;height:36px;flex:none}
.pindah-cta b{display:block;font-size:1.08rem;margin-bottom:2px}
.pindah-cta .redup{color:inherit;opacity:.78}
.pindah-cta .panah{margin-left:auto;font-weight:800;white-space:nowrap;background:var(--aksen);color:#2a1a00;padding:10px 16px;border-radius:10px;font-size:.92rem}
@media (max-width:640px){.pindah-cta{flex-direction:column;align-items:flex-start}.pindah-cta .panah{margin-left:0}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .pindah-cta{background:#17294a;color:#fff}}
:root[data-theme=dark] .pindah-cta{background:#17294a;color:#fff}
.faq details{background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:16px 18px;margin:10px 0}
.faq summary{font-weight:700;color:var(--navy)}
.faq p{color:var(--redup);margin:10px 0 0}

/* wizard */
.progres{display:flex;gap:8px;margin:0 0 16px;padding:0}
.progres li{flex:1;list-style:none;display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:700;color:var(--redup)}
.progres li::before{content:attr(data-n);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--kartu);border:1.5px solid var(--garis);flex:none}
.progres li:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--garis);border-radius:2px}
.progres li.aktif{color:var(--navy)}.progres li.aktif::before{background:var(--utama);border-color:var(--utama);color:var(--utama-teks)}
.progres li.selesai::before{content:"✓";background:var(--utama-lembut);border-color:var(--utama);color:var(--utama)}
.progres li.selesai::after{background:var(--utama)}
@media (max-width:480px){.progres li span{display:none}}
.panel{background:var(--kartu);border:1px solid var(--garis);border-radius:18px;padding:28px;box-shadow:var(--bayang);margin-bottom:16px;animation:muncul .25s ease}
@media (max-width:520px){.panel{padding:20px}}
@keyframes muncul{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel h2{font-size:1.4rem;font-weight:800;margin:0 0 6px}
.panel > p.redup{margin:0 0 18px}
.tanya{margin:22px 0}
.tanya > .judul{font-weight:700;margin-bottom:10px;display:block;color:var(--navy)}
.chip-grup{display:flex;flex-wrap:wrap;gap:8px}
.chip{border-radius:10px;padding:10px 16px;font-weight:600;font-size:.94rem;min-height:44px;background:var(--kartu)}
.chip[aria-pressed=true]{background:var(--utama-lembut);border-color:var(--utama);color:var(--utama);box-shadow:inset 0 0 0 1px var(--utama)}
.penghitung{display:inline-flex;align-items:center;border:1px solid var(--garis);border-radius:10px;overflow:hidden;background:var(--kartu)}
.penghitung button{border:0;border-radius:0;padding:10px 18px;font-size:1.15rem;min-height:46px}
.penghitung output{min-width:48px;text-align:center;font-weight:800;font-size:1.1rem}
.ptkp-kartu{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--utama-lembut);border-radius:12px;padding:14px 18px;margin-top:18px}
.ptkp-kartu b{font-size:1.25rem;color:var(--navy)}
label{display:block;font-weight:600;font-size:.9rem;margin:0 0 6px;color:var(--navy)}
.isian{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.isian .penuh{grid-column:1/-1}
@media (max-width:560px){.isian{grid-template-columns:1fr}}
input,select{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--garis);border-radius:10px;background:var(--kartu);color:var(--teks);min-height:48px;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover{border-color:color-mix(in srgb,var(--utama) 35%,var(--garis))}
input:focus,select:focus{border-color:var(--utama);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--utama) 16%,transparent)}
.rupiah{position:relative}.rupiah::before{content:"Rp";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--redup);font-weight:600;pointer-events:none}
.rupiah input{padding-left:44px;font-variant-numeric:tabular-nums;font-weight:600}
.petunjuk{font-size:.82rem;color:var(--redup);margin-top:6px}
details.lanjut{margin-top:18px;border-top:1px solid var(--garis);padding-top:14px}
details summary{cursor:pointer;font-weight:700;color:var(--utama);list-style:none;display:flex;align-items:center;gap:8px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:none}
details[open] > summary::before{transform:rotate(45deg)}
details .isi{margin-top:14px}
.navigasi{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--garis)}

/* bukti potong */
.bupot{border:1px solid var(--garis);border-radius:14px;padding:18px;margin:14px 0;background:var(--bg);position:relative}
.bupot .kepala{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bupot .jenis{font-weight:800;font-size:.74rem;letter-spacing:.05em;padding:4px 10px;border-radius:6px;background:var(--utama-lembut);color:var(--utama)}
.bupot[data-jenis=BP21] .jenis{background:var(--aksen-lembut);color:var(--aksen-teks)}
.bupot .judul-bupot{color:var(--navy)}
.bupot .hapus{margin-left:auto;min-height:44px}
.tambah{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.tambah button{flex-direction:column;align-items:flex-start;text-align:left;font-weight:400;padding:16px;border-style:dashed;border-width:1.5px;background:transparent}
.tambah button:hover{background:var(--kartu)}
.tambah b{font-size:1rem;color:var(--navy)}
@media (max-width:480px){.tambah{grid-template-columns:1fr}}
.galat{color:var(--kb);font-weight:600;margin:12px 0 0}
.galat:empty{display:none}
.coretax{background:var(--bg);border:1px solid var(--garis);border-radius:14px;padding:18px;margin-bottom:12px}
.coretax h3{font-size:1.02rem;margin:0 0 4px}
.bantuan{font-size:.85rem;font-weight:700;color:var(--utama);background:none;border:0;padding:0;min-height:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.skema{border:1px solid var(--garis);border-radius:12px;overflow:hidden;font-size:.86rem;background:var(--kartu)}
.skema .kop{background:var(--bg2);padding:10px 14px;font-weight:700;color:var(--navy)}
.skema .r{display:grid;grid-template-columns:52px 1fr;border-top:1px solid var(--garis)}
.skema .r span{padding:7px 12px}.skema .r span:first-child{color:var(--redup);font-variant-numeric:tabular-nums;text-align:right}
.skema .r.isi-ini{background:var(--aksen-lembut);color:var(--aksen-teks);font-weight:800}
.skema .r.isi-ini span:first-child{color:inherit}

/* hasil */
.status{border-radius:20px;padding:28px;margin-bottom:16px;border:1px solid var(--garis);position:relative;overflow:hidden;background:var(--kartu);box-shadow:var(--bayang)}
.status::before{content:"";position:absolute;inset:0 0 auto 0;height:5px}
.status.kb::before{background:var(--kb)}.status.lb::before{background:var(--lb)}.status.nihil::before{background:var(--nihil)}
.status .label-status{font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:.78rem}
.status .angka-besar{font-size:clamp(2.3rem,8vw,3.4rem);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin:6px 0 10px;line-height:1.1}
.kb-t{color:var(--kb)}.lb-t{color:var(--lb)}.nihil-t{color:var(--nihil)}
.rumus{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.93rem;color:var(--redup)}
.rumus b{color:var(--teks);font-variant-numeric:tabular-nums}
.rekon{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--bg);font-size:.92rem}
.rekon .cocok{color:var(--nihil);font-weight:800}.rekon .beda{color:var(--kb);font-weight:800}
.simulasi{display:flex;gap:10px;align-items:flex-start;background:var(--aksen-lembut);color:var(--aksen-teks);border-radius:12px;padding:12px 16px;font-size:.87rem;font-weight:600;margin:12px 0}
.peringatan{background:var(--aksen-lembut);color:var(--aksen-teks);border:1px solid color-mix(in srgb,var(--aksen) 40%,transparent);border-radius:12px;padding:14px 18px;margin:12px 0;font-size:.92rem}
.peringatan b{display:block;margin-bottom:4px}.peringatan ul{margin:0;padding-left:18px}
.urai{margin:10px 0 4px}
.urai .baris{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;margin:12px 0}
.urai .nama{font-size:.93rem;font-weight:600}
.urai .rp{font-weight:800;font-variant-numeric:tabular-nums;font-size:.93rem}
.urai .jalur{grid-column:1/-1;height:10px;background:var(--bg2);border-radius:99px;overflow:hidden}
.urai .isi{height:100%;border-radius:99px;transform-origin:left;animation:tumbuh .6s ease both}
@keyframes tumbuh{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.urai .isi.naik{background:var(--kb)}.urai .isi.turun{background:var(--lb)}
.urai .total{border-top:1px solid var(--garis);padding-top:12px;margin-top:8px;display:flex;justify-content:space-between;font-weight:800}
.sebab{border:1px solid var(--garis);border-radius:16px;background:var(--kartu);padding:22px;margin:14px 0;box-shadow:var(--bayang)}
.sebab .kepala{display:flex;gap:14px;align-items:flex-start}
.sebab .ikon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--utama-lembut);color:var(--utama)}
.sebab.naik .ikon{background:var(--kb-lembut);color:var(--kb)}.sebab.turun .ikon{background:var(--lb-lembut);color:var(--lb)}
.sebab h3{font-size:1.08rem}
.pil{display:inline-block;font-weight:700;font-size:.84rem;padding:4px 10px;border-radius:99px;margin-top:8px;font-variant-numeric:tabular-nums}
.pil.naik{background:var(--kb-lembut);color:var(--kb)}.pil.turun{background:var(--lb-lembut);color:var(--lb)}.pil.info{background:var(--bg2);color:var(--redup)}
.tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:var(--aksen-lembut);color:var(--aksen-teks);margin-left:8px;vertical-align:middle}
.sebab p{margin:12px 0 0;color:var(--teks)}
ol.langkah{margin:12px 0 0;padding:0;counter-reset:l;list-style:none}
ol.langkah li{counter-increment:l;position:relative;padding-left:36px;margin:12px 0}
ol.langkah li::before{content:counter(l);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:7px;background:var(--utama);color:var(--utama-teks);font-size:.78rem;font-weight:800;display:grid;place-items:center}
ol.langkah a{font-size:.85rem;font-weight:600;white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:.85rem}td,th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--garis);vertical-align:top}
th{color:var(--navy)}
.tiga{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tiga div{background:var(--bg);border-radius:12px;padding:14px}
.tiga b{display:block;font-size:1.12rem;font-variant-numeric:tabular-nums;color:var(--navy)}
@media (max-width:560px){.tiga{grid-template-columns:1fr}}
.tawaran{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:center;border-radius:20px;padding:28px;background:var(--navy);color:#fff;margin:24px 0;box-shadow:var(--bayang-besar)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tawaran{background:#17294a}}
:root[data-theme=dark] .tawaran{background:#17294a}
@media (max-width:640px){.tawaran{grid-template-columns:1fr}}
.tawaran h3{color:#fff;font-size:1.3rem;margin:0 0 6px}
.tawaran ul{margin:12px 0 0;padding:0;list-style:none}
.tawaran li{padding-left:26px;position:relative;margin:8px 0;opacity:.92}
.tawaran li::before{content:"✓";position:absolute;left:0;color:var(--aksen);font-weight:800}
.tawaran .harga-kotak{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:18px;text-align:center}
.tawaran .harga{display:block;font-size:2rem;font-weight:800;letter-spacing:-.02em}
.tawaran .harga-ket{display:block;font-size:.82rem;opacity:.75;margin-bottom:12px}
.tawaran button{width:100%;background:var(--aksen);color:#2a1a00;border-color:var(--aksen)}
.tawaran button:hover{filter:brightness(1.05)}
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:16px;padding:22px;margin:14px 0;box-shadow:var(--bayang)}
.kartu h3{font-size:1.06rem;margin:0 0 8px}
.surat{white-space:pre-wrap;font:inherit;font-size:.92rem;background:var(--bg);border:1px dashed var(--garis);border-radius:12px;padding:16px;margin:12px 0}
.halaman h1{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:800;margin:36px 0 10px}.halaman h2{font-size:1.2rem;margin:28px 0 8px}
.halaman ul{padding-left:20px}.halaman li{margin:6px 0}

/* jangkar gulir di bawah header lengket */
#cek,[data-panel],#hasil,.skema,#skema-blok{scroll-margin-top:80px}

footer{margin-top:56px;padding-block:32px calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--garis);font-size:.86rem;color:var(--redup)}
footer .kaki{display:grid;grid-template-columns:2fr 1fr;gap:24px}
@media (max-width:640px){footer .kaki{grid-template-columns:1fr}}
footer b{color:var(--navy)}
footer a{color:var(--redup)}
/* ===== Tema warna v2 (lebih berwarna, tetap AA). Menimpa aturan di atas. ===== */
:root{--biru:#1d5fd0;--biru-lembut:#e8f0ff;--ungu:#6a45d8;--ungu-lembut:#efeaff;--oranye:#b23c0a;--oranye-lembut:#fff0e6;--tosca:#08686e;--tosca-lembut:#e3f6f6;--pink:#c2255c;--pink-lembut:#ffe9f1;
  --grad-hero:linear-gradient(135deg,#0e2246 0%,#0d3f63 45%,#0b6a6a 78%,#0b7a5a 100%);--grad-utama:linear-gradient(135deg,#0b7a5a,#0b6f8a)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--biru:#8db4ff;--biru-lembut:#16284a;--ungu:#b9a3ff;--ungu-lembut:#251c45;--oranye:#ffa36e;--oranye-lembut:#3a2014;--tosca:#5fd4d9;--tosca-lembut:#103638;--pink:#ff8fb6;--pink-lembut:#3d1626}}
:root[data-theme=dark]{--biru:#8db4ff;--biru-lembut:#16284a;--ungu:#b9a3ff;--ungu-lembut:#251c45;--oranye:#ffa36e;--oranye-lembut:#3a2014;--tosca:#5fd4d9;--tosca-lembut:#103638;--pink:#ff8fb6;--pink-lembut:#3d1626}

/* hero berwarna */
.hero-band{background:var(--grad-hero);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hero-band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 60% at 85% 20%,rgba(242,165,22,.28),transparent 70%),radial-gradient(35% 55% at 10% 90%,rgba(60,197,154,.30),transparent 70%)}
.hero-band::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.22;background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.2px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hero-band .hero{padding-block:64px 72px}
.hero-band h1{color:#fff}
.hero-band h1 em{color:#ffd166}
.hero-band .lead{color:rgba(255,255,255,.88)}
.hero-band .alis{color:#9ff0cf}
.hero-band .janji{color:rgba(255,255,255,.9)}
.hero-band .janji svg{color:#9ff0cf}
.hero-band .tombol.utama{background:#ffc94a;border-color:#ffc94a;color:#2a1a00;box-shadow:0 8px 24px rgba(255,201,74,.35)}
.hero-band .tombol.utama:hover{background:#ffd76e;border-color:#ffd76e}
.hero-band .tombol:not(.utama){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff}
.hero-band .tombol:not(.utama):hover{background:rgba(255,255,255,.16)}
.hero-band .pratinjau{color:var(--teks);transform:rotate(1.2deg);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hero-band .pratinjau .tag-contoh{background:#ffc94a;color:#2a1a00}
.hero-band .pratinjau::before{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .hero-band{background:linear-gradient(135deg,#081530,#0b2c45 50%,#0a4a4a)}}
:root[data-theme=dark] .hero-band{background:linear-gradient(135deg,#081530,#0b2c45 50%,#0a4a4a)}

/* pita fakta */
.fakta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-36px;position:relative;z-index:2}
@media (max-width:760px){.fakta{grid-template-columns:1fr 1fr;margin-top:-28px}}
.fakta div{background:var(--kartu);border:1px solid var(--garis);border-radius:16px;padding:18px;box-shadow:var(--bayang-besar);border-top:4px solid var(--warna,var(--utama))}
.fakta b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.02em;color:var(--warna,var(--utama));line-height:1.1}
.fakta span{font-size:.86rem;color:var(--redup)}

/* latar bagian berselang */
.latar-mint{background:linear-gradient(180deg,var(--utama-lembut),transparent 85%)}
.latar-biru{background:linear-gradient(180deg,var(--biru-lembut),transparent 90%)}

/* cara pakai berwarna */
.cara li{position:relative;overflow:hidden;border-top:4px solid var(--warna,var(--utama))}
.cara li::before{background:var(--warna-lembut,var(--utama-lembut));color:var(--warna,var(--utama));width:44px;height:44px;border-radius:12px;font-size:1.1rem}
.cara li:nth-child(1){--warna:var(--utama);--warna-lembut:var(--utama-lembut)}
.cara li:nth-child(2){--warna:var(--biru);--warna-lembut:var(--biru-lembut)}
.cara li:nth-child(3){--warna:var(--ungu);--warna-lembut:var(--ungu-lembut)}

/* kartu kasus berwarna */
.contoh{border-top:4px solid var(--warna,var(--utama));position:relative;padding-top:20px}
.contoh .ikon-kasus{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--warna-lembut,var(--utama-lembut));color:var(--warna,var(--utama));margin-bottom:6px}
.contoh .ikon-kasus svg{width:22px;height:22px}
.contoh[data-w=biru]{--warna:var(--biru);--warna-lembut:var(--biru-lembut)}
.contoh[data-w=pink]{--warna:var(--pink);--warna-lembut:var(--pink-lembut)}
.contoh[data-w=oranye]{--warna:var(--oranye);--warna-lembut:var(--oranye-lembut)}
.contoh[data-w=ungu]{--warna:var(--ungu);--warna-lembut:var(--ungu-lembut)}
.contoh[data-w=tosca]{--warna:var(--tosca);--warna-lembut:var(--tosca-lembut)}
.contoh .lihat{color:var(--warna,var(--utama))}

/* ajakan pindah kerja: gradien */
.pindah-cta{background:linear-gradient(120deg,#1b2f6b,#4a2f9a 60%,#7a3fa8)!important;color:#fff!important}

/* tombol utama bergradien */
.utama{background:var(--grad-utama);border-color:transparent}
.utama:hover{background:var(--grad-utama);filter:brightness(1.07);border-color:transparent}

/* wizard */
.panel{border-top:4px solid transparent;border-image:linear-gradient(90deg,var(--utama),var(--tosca),var(--biru)) 1;border-top-left-radius:0;border-top-right-radius:0}
.panel{border-radius:0 0 18px 18px}
.progres li.aktif::before{background:var(--grad-utama);border-color:transparent}
.chip[aria-pressed=true]{background:var(--grad-utama);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(11,122,90,.25)}
.ptkp-kartu{background:linear-gradient(120deg,var(--utama-lembut),var(--tosca-lembut))}
.coretax{background:linear-gradient(120deg,var(--biru-lembut),var(--kartu));border-color:color-mix(in srgb,var(--biru) 25%,var(--garis))}
.bupot{border-left:4px solid var(--utama)}
.bupot[data-jenis=BP21]{border-left-color:var(--aksen)}

/* hasil */
.status.kb{background:linear-gradient(135deg,var(--kb-lembut),var(--kartu) 70%)}
.status.lb{background:linear-gradient(135deg,var(--lb-lembut),var(--kartu) 70%)}
.status.nihil{background:linear-gradient(135deg,var(--nihil-lembut),var(--kartu) 70%)}
.status::before{height:6px}
.sebab{border-left:4px solid var(--utama)}
.sebab.naik{border-left-color:var(--kb)}.sebab.turun{border-left-color:var(--lb)}.sebab.info{border-left-color:var(--aksen)}
.tawaran{background:var(--grad-hero)!important;position:relative;overflow:hidden}
.tawaran::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,201,74,.35),transparent 70%)}
.tawaran button{background:#ffc94a;border-color:#ffc94a}

/* faq */
.faq details{border-left:4px solid var(--tosca)}
.faq details[open]{background:linear-gradient(120deg,var(--tosca-lembut),var(--kartu) 60%)}

/* footer gelap */
footer.kaki-gelap{background:#0e2246;color:rgba(255,255,255,.78);border-top:0;margin-top:64px;max-width:none;padding-inline:0}
footer.kaki-gelap .wadah{padding-block:8px}
footer.kaki-gelap b,footer.kaki-gelap .merek{color:#fff}
footer.kaki-gelap a{color:#9ff0cf}
footer.kaki-gelap .merek i{color:#ffc94a}

/* halaman dalam: pita gradien + konten di atas kartu */
.pita-hal{height:170px;background:var(--grad-hero);margin-bottom:-130px;position:relative}
.pita-hal::after{content:"";position:absolute;inset:0;opacity:.2;background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.2px);background-size:22px 22px}
main.halaman{background:var(--kartu);border:1px solid var(--garis);border-radius:22px;box-shadow:var(--bayang-besar);padding:8px 32px 28px;position:relative;margin-bottom:24px}
@media (max-width:560px){main.halaman{padding:4px 18px 22px;border-radius:18px;margin-inline:12px}}
main.halaman h2{padding-top:6px;border-top:1px solid var(--garis);margin-top:30px}
main.halaman .kartu{box-shadow:none;background:var(--bg)}

/* tombol utama di menu header: kalahkan warna .nav-kanan a */
.nav-kanan a.utama,.nav-kanan a.utama:hover{color:#fff;background:var(--grad-utama);border-color:transparent}

/* label hasil simulasi: informasi netral (biru), bukan peringatan */
.simulasi{background:var(--biru-lembut);color:var(--biru);font-weight:600}
.tag[title]{cursor:help}

/* input tidak dikenali */
input[aria-invalid=true]{border-color:var(--kb);box-shadow:0 0 0 3px color-mix(in srgb,var(--kb) 18%,transparent)}