@font-face{font-family:"Outfit";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/outfit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/outfit-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/outfit-latin-600-normal.woff2) format("woff2")}
:root{
  --halaman:#F8EEF0;--kartu:#fff;
  --mint:#CDF5E3;--lavender:#DDD3F7;--peach:#FBE5C8;--kuning:#FFF3C9;--rose:#F8E5EA;
  --aksen:#9B86D6;--aksen-gelap:#5B45A8;--aksen-muda:#DDD3F7;
  --krem:#F6DDB0;--krem-garis:#C99A4A;
  --tinta:#1B1B1F;--teks2:#5E5A66;--hitam:#111;
  --garis:#EADDE1;--bahaya:#B3261E;--bahaya-muda:#FDECEA;--ok:#1E6B4F;--ok-muda:#CDF5E3;--peringatan:#7A4F00;--peringatan-muda:#FFF3C9;
  --r:26px;--r-kecil:18px;--bayang:0 1px 2px rgba(27,27,31,.04),0 6px 18px rgba(27,27,31,.04);
}
:root[data-tema="rose"]{--aksen:#E7A9B8;--aksen-gelap:#9C2F4F;--aksen-muda:#F8E5EA;--halaman:#FBF1F3}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--halaman);color:var(--tinta);font:17px/1.55 "Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400}
a{color:var(--tinta);text-decoration-thickness:1.5px;text-underline-offset:3px}
h1{font-size:1.75rem;font-weight:600;margin:.4rem 0 1rem;line-height:1.2;letter-spacing:-.01em}
h2{font-size:1.25rem;font-weight:600;margin:0 0 .75rem;line-height:1.25;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
h3{font-size:1.05rem;font-weight:600;margin:0 0 .5rem}
p{margin:.4rem 0 .8rem}
strong{font-weight:600}
.redup{color:var(--teks2)}
.kecil{font-size:.9rem}
.kanan{text-align:right}
.angka{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.minus{color:var(--bahaya)}
.rapat{margin:0}
.atas{margin-top:1.2rem}
.ikon{flex:none}
.zigzag{color:var(--aksen-gelap);flex:none}

/* rangka */
.shell{display:block}
.sidebar{display:none}
main{padding:1rem 1rem 6.5rem;max-width:760px;margin:0 auto}
.brand{font-weight:600;font-size:1.3rem;color:var(--tinta);text-decoration:none;display:flex;align-items:center;gap:.6rem}
.tab-bawah{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:#fff;padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;box-shadow:0 -6px 22px rgba(27,27,31,.07)}
.tab-bawah a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border-radius:18px;text-decoration:none;color:var(--teks2);font-size:.78rem;font-weight:500}
.tab-bawah a[aria-current]{background:var(--hitam);color:#fff}
@media(min-width:900px){
  main{padding:2rem 2.5rem 3rem;max-width:960px}
  .tab-bawah{display:none}
  .shell{display:grid;grid-template-columns:270px 1fr;min-height:100vh}
  .sidebar{display:flex;flex-direction:column;gap:.5rem;background:#fff;padding:1.5rem 1.1rem;position:sticky;top:0;height:100vh;border-radius:0 var(--r) var(--r) 0;box-shadow:var(--bayang)}
  .side-nav{display:flex;flex-direction:column;gap:.15rem;margin-top:1rem}
  .side-nav a{display:flex;align-items:center;gap:.7rem;padding:.65rem .95rem;border-radius:999px;text-decoration:none;color:var(--tinta);font-weight:500}
  .side-nav a:hover{background:var(--aksen-muda)}
  .side-nav a[aria-current]{background:var(--hitam);color:#fff}
  .side-user{margin-top:auto;color:var(--teks2);font-size:.9rem}
}

/* komponen */
.kartu{background:var(--kartu);border-radius:var(--r);padding:1.2rem;box-shadow:var(--bayang);margin-bottom:1rem}
.grid{display:grid;gap:.9rem}
.grid-kartu{grid-template-columns:repeat(2,1fr);margin-bottom:1rem}
@media(min-width:760px){.grid-kartu{grid-template-columns:repeat(3,1fr)}}
.dua-kolom{grid-template-columns:1fr}
@media(min-width:640px){.dua-kolom{grid-template-columns:1fr 1fr}}
.hero{background:var(--hitam);color:#fff;border-radius:var(--r);padding:1.3rem 1.3rem 1.4rem;margin-bottom:1rem;box-shadow:var(--bayang)}
.hero .sapa{color:#D9D5E0;margin:0;font-size:1rem}
.hero h1{color:#fff;margin:.1rem 0 .8rem}
.hero .label{color:#D9D5E0;margin:0;font-size:.95rem}
.total-besar{font-size:2.3rem;font-weight:600;line-height:1.1;margin:.1rem 0 .2rem;letter-spacing:-.01em}
.hero .total-besar{color:#fff}
.hero .bantu{color:#D9D5E0}
.baris-cincin{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;margin-top:1.1rem}
.cincin{margin:0;display:flex;flex-direction:column;align-items:center;gap:.25rem;max-width:110px}
.cincin figcaption{font-size:.82rem;text-align:center;color:#D9D5E0;line-height:1.25}
.cincin-latar{stroke:#3A3A42}
.cincin-isi{stroke:#C9B8FF}
.cincin-angka{fill:#fff;font:600 21px "Outfit",sans-serif}
.kartu-laci{border-radius:var(--r-kecil);padding:1rem;color:var(--tinta);display:flex;flex-direction:column;gap:.15rem;min-height:128px}
.warna-mint{background:var(--mint)}.warna-lavender{background:var(--lavender)}.warna-peach{background:var(--peach)}
.warna-kuning{background:var(--kuning)}.warna-rose{background:var(--rose)}
.warna-hitam{background:var(--hitam);color:#fff}
.warna-hitam .redup,.warna-hitam .bantu{color:#D9D5E0}
.warna-hitam .minus{color:#FFB4AB}
.warna-hitam a{color:#fff}
.warna-hitam .lencana{background:#2C2C33;color:#fff}
.warna-hitam th{color:#D9D5E0}
.nama-laci{font-weight:500;line-height:1.25}
.saldo{font-size:1.4rem;font-weight:600;margin:.1rem 0 .2rem;line-height:1.2}
.kartu-laci .bantu{margin-top:auto}
.tombol-besar{display:grid;gap:.7rem;grid-template-columns:1fr;margin-bottom:1rem}
@media(min-width:640px){.tombol-besar{grid-template-columns:repeat(3,1fr)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.7rem 1.5rem;border-radius:999px;border:2px solid var(--hitam);background:var(--hitam);color:#fff;font:500 1.05rem/1.2 "Outfit",sans-serif;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:#2c2c33;border-color:#2c2c33}
.btn-lain{background:var(--aksen-muda);border-color:var(--aksen-muda);color:var(--tinta)}
.btn-lain:hover{background:#cfc2f3;border-color:#cfc2f3}
:root[data-tema="rose"] .btn-lain:hover{background:#f2d3db;border-color:#f2d3db}
.btn-bahaya{background:#fff;border-color:#E9A7A1;color:var(--bahaya)}
.btn-bahaya:hover{background:var(--bahaya-muda);border-color:#E9A7A1}
.btn-kecil{min-height:44px;padding:.45rem 1rem;font-size:.97rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,label:has(input:focus-visible){outline:3px solid var(--aksen-gelap);outline-offset:3px}
.hero a:focus-visible,.warna-hitam a:focus-visible,.tab-bawah a[aria-current]:focus-visible,.side-nav a[aria-current]:focus-visible{outline-color:#fff}
.aksi{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.aksi form{margin:0}
.notif{padding:.85rem 1.1rem;border-radius:var(--r-kecil);margin-bottom:1rem;font-weight:500;display:flex;gap:.6rem}
.notif::before{font-weight:600;flex:none}
.notif-ok{background:var(--ok-muda);color:#0F4D38}.notif-ok::before{content:"";width:.34em;height:.62em;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin:.15em .4em 0 .25em}
.notif-err{background:var(--bahaya-muda);color:var(--bahaya)}.notif-err::before{content:"\00D7";font-size:1.2em;line-height:1}
.notif-warn{background:var(--peringatan-muda);color:var(--peringatan)}.notif-warn::before{content:"!"}
.notif a{color:inherit}
.lencana{display:inline-block;padding:.1rem .7rem;border-radius:999px;font-size:.82rem;font-weight:500;background:var(--aksen-muda);color:var(--tinta)}
.lencana-batal{background:#ECE8EE;color:var(--teks2)}
progress{width:100%;height:12px;border-radius:999px;border:0;background:#E9E3EC;-webkit-appearance:none;appearance:none}
progress::-webkit-progress-bar{background:#E9E3EC;border-radius:999px}
progress::-webkit-progress-value{background:var(--aksen-gelap);border-radius:999px}
progress::-moz-progress-bar{background:var(--aksen-gelap);border-radius:999px}
.kosong{text-align:center;color:var(--teks2);padding:1.2rem .5rem}
.kosong .ikon{color:var(--aksen-gelap);margin-bottom:.3rem}
.kosong p{margin:0}

/* formulir */
label,.label{display:block;font-weight:500;margin:.9rem 0 .3rem}
input[type=text],input[type=password],input[type=date],input[type=search],input[type=number],select,textarea{width:100%;min-height:52px;padding:.7rem 1rem;border:2px solid #E6DCE9;border-radius:var(--r-kecil);background:#FCFAFC;color:var(--tinta);font:inherit}
textarea{min-height:90px}
input:focus,select:focus,textarea:focus{border-color:var(--aksen-gelap)}
input.uang{text-align:right;font-variant-numeric:tabular-nums;font-size:1.2rem;font-weight:500}
.cek{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;margin:.8rem 0}
.cek input{width:24px;height:24px;margin-top:.15rem;flex:none;accent-color:var(--hitam)}
.baris-laci{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.8rem 0;border-bottom:1px solid var(--garis)}
.baris-laci:last-of-type{border-bottom:0}
.baris-laci label{margin:0}
@media(min-width:640px){.baris-laci{grid-template-columns:1fr 240px;align-items:center;gap:1rem}}
.bantu{color:var(--teks2);font-size:.92rem;margin:0}
.galat{color:var(--bahaya);font-weight:500}

/* pil: tab, filter, pilihan warna (radio + CSS, tanpa JS) */
.pil-grup{display:flex;flex-wrap:wrap;gap:.5rem;margin:.3rem 0}
.pil{position:relative;display:inline-flex}
.pil input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pil span,.pil a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.4rem 1.05rem;border-radius:999px;background:#fff;color:var(--tinta);font-weight:500;font-size:.97rem;text-decoration:none;border:2px solid #E6DCE9}
.pil input:checked+span,.pil a[aria-current]{background:var(--hitam);border-color:var(--hitam);color:#fff}
.pil input:checked+span::before,.pil a[aria-current]::before{content:"";width:.34em;height:.62em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 .35rem .15rem .1rem}
.pil input:focus-visible+span{outline:3px solid var(--aksen-gelap);outline-offset:3px}
.contoh{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(27,27,31,.35);display:inline-block}
.c-mint{background:var(--mint)}.c-lavender{background:var(--lavender)}.c-peach{background:var(--peach)}.c-kuning{background:var(--kuning)}.c-rose{background:var(--rose)}

/* tabel */
.tabel-bungkus{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:.65rem .5rem;border-bottom:1px solid var(--garis);text-align:left;vertical-align:top}
th{font-size:.88rem;color:var(--teks2);font-weight:500}
td.kanan,th.kanan{text-align:right}
tfoot td{font-weight:600;border-bottom:0}
.tr-batal td{color:var(--teks2)}
.daftar-trx{list-style:none;margin:0;padding:0}
.daftar-trx li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--garis)}
.daftar-trx li:last-child{border-bottom:0}
.trx-ikon{display:grid;place-items:center;width:44px;height:44px;border-radius:16px;flex:none;background:var(--aksen-muda)}
.trx-kiri{display:flex;gap:.8rem;align-items:center;min-width:0}
.trx-kiri>span{min-width:0}
.filter{display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:760px){.filter{grid-template-columns:repeat(3,1fr)}}
.filter label{margin:.2rem 0 .2rem}
.halaman{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.grafik{width:100%;height:auto;display:block}
.grafik text{font:12px "Outfit",sans-serif;fill:#5E5A66}
.grafik .bar{fill:var(--aksen)}
.grafik .bar2{fill:var(--krem);stroke:var(--krem-garis);stroke-width:1}
.grafik .sumbu{stroke:#D9CFDC;stroke-width:1}
details.rincian summary{cursor:pointer;font-weight:500;padding:.6rem 0}
.kode-cadangan{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.1rem;columns:2;list-style:none;padding:0}
.qr{max-width:240px;width:100%;height:auto;display:block;margin:0 auto;background:#fff}
.menu-daftar{display:grid;gap:.7rem}
.menu-daftar a,.menu-daftar button{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border-radius:var(--r-kecil);text-decoration:none;color:var(--tinta);font:500 1.05rem "Outfit",sans-serif;min-height:60px;width:100%;border:0;text-align:left;cursor:pointer}
.catat-pilihan a{min-height:84px}
.menu-daftar .teks small{display:block;color:var(--teks2);font-weight:400;font-size:.9rem}
.menu-daftar .warna-hitam small{color:#D9D5E0}

/* halaman tamu */
.tamu{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1rem}
.tamu-kotak{background:#fff;border-radius:var(--r);padding:1.6rem;width:100%;max-width:420px;box-shadow:var(--bayang)}
.brand-besar{text-align:center;margin:.2rem 0 1rem}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.judul-bagian{margin:.4rem 0 .6rem}
a.kartu-tautan{text-decoration:none;color:var(--tinta)}
a.kartu-tautan.warna-hitam{color:#fff}
.kartu-tautan .nama-laci{display:flex;align-items:center;gap:.4rem}
.rincian-lokasi{display:flex;flex-direction:column;gap:0}
.rincian-lokasi span{font-size:.85rem}
.baris-isi{display:flex;flex-direction:column;gap:.4rem;align-items:stretch}
.hero-lokasi{background:var(--hitam);color:#fff;border-radius:var(--r);padding:1.3rem;margin-bottom:1rem;box-shadow:var(--bayang)}
.hero-lokasi h1{color:#fff;margin:.1rem 0 .4rem;display:flex;align-items:center;gap:.6rem}
.hero-lokasi .label{color:#D9D5E0;margin:0}
.daftar-pos{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.daftar-pos li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1rem;border-radius:var(--r-kecil)}
.daftar-pos .angka{font-weight:600}
.pos-kosong .angka{color:var(--teks2);font-weight:400}