:root{--hijau-tua: #2D5E26;--hijau: #3D8C35;--hijau-muda: #EDF5EB;--latar: #FAFAF8;--permukaan: #FFFFFF;--teks: #1E2A1A;--redup: #5A6E56;--garis: #E2E8DF;--merah: #B3412E;--merah-muda: #FBEDEA;--kuning-muda: #FFF6DC;--kuning: #8A6A12;--radius: 12px;--serif: "Fraunces", Georgia, "Times New Roman", serif;--sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--latar);color:var(--teks);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}h1,h2{font-family:var(--serif);font-weight:700;line-height:1.2;text-wrap:balance;margin:0 0 .4em}h1{font-size:1.85rem;color:var(--hijau-tua)}h2{font-size:1.2rem;font-weight:500}p{margin:0 0 .75em}a{color:var(--hijau)}code{background:var(--hijau-muda);padding:.1em .35em;border-radius:4px;font-size:.9em}.redup{color:var(--redup)}.kecil{font-size:.875rem}.tengah{text-align:center}label{display:grid;gap:.3rem;font-weight:500;font-size:.95rem}label.sebaris{display:flex;align-items:center;gap:.5rem}input,select,textarea{font:inherit;font-weight:400;padding:.65rem .8rem;border:1px solid var(--garis);border-radius:8px;background:var(--permukaan);color:var(--teks);width:100%}select{width:auto}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--hijau) 45%,transparent);outline-offset:2px}.tombol{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:500;padding:.65rem 1.1rem;border-radius:8px;border:1px solid var(--hijau-tua);background:var(--hijau-tua);color:#fff;cursor:pointer;text-decoration:none}.tombol:hover{background:var(--hijau);border-color:var(--hijau)}.tombol:disabled{opacity:.55;cursor:not-allowed}.tombol-garis{background:transparent;color:var(--hijau-tua)}.tombol-garis:hover{background:var(--hijau-muda)}.tombol-bahaya{background:var(--merah);border-color:var(--merah)}.tombol-bahaya:hover{background:#962f1f;border-color:#962f1f}.baris-tombol{display:flex;flex-wrap:wrap;gap:.5rem}.pesan-error{background:var(--merah-muda);color:var(--merah);padding:.6rem .8rem;border-radius:8px;font-size:.925rem}.pesan-ok{background:var(--hijau-muda);color:var(--hijau-tua);padding:.6rem .8rem;border-radius:8px;font-size:.925rem}.form-sandi{display:grid;gap:.75rem;max-width:26rem}.sandi-tampil{font-family:ui-monospace,Consolas,monospace;font-size:1.1rem;letter-spacing:.04em;background:var(--hijau-muda);padding:.4rem .6rem;border-radius:6px;-webkit-user-select:all;user-select:all}.catatan{background:var(--kuning-muda);color:var(--kuning);padding:.6rem .8rem;border-radius:8px;font-size:.925rem}.kartu{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius);padding:1.25rem}.kartu-sempit{width:100%;max-width:420px;display:grid;gap:1rem}.kartu-sempit h1,.kartu-sempit p{margin:0}.kosong{text-align:center;padding:2rem 1rem}.layar-tengah{min-height:100%;display:grid;place-items:center;padding-block:2rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.layar-masuk{background:linear-gradient(180deg,var(--hijau-muda) 0%,var(--latar) 55%)}.kerangka{display:grid;grid-template-columns:260px 1fr;min-height:100%}.bilah-atas{display:none}.samping{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1rem;padding:1.25rem 1rem;background:var(--permukaan);border-right:1px solid var(--garis);overflow-y:auto}.merek{display:flex;align-items:center;gap:.65rem}.merek-nama{display:block;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--hijau-tua);line-height:1}.merek-sub{display:block;font-size:.75rem;color:var(--redup)}nav{display:grid;gap:2px}.tautan-nav{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem .75rem;border-radius:8px;color:var(--teks);text-decoration:none;font-size:.95rem}.tautan-nav:hover{background:var(--hijau-muda)}.tautan-nav.active{background:var(--hijau-tua);color:#fff}.tautan-nav.active .tanda-segera{color:#cfe3cb}.tanda-segera{font-size:.7rem;color:var(--redup)}.samping-kaki{margin-top:auto;display:grid;gap:.75rem;padding-top:1rem;border-top:1px solid var(--garis)}.pengguna{display:grid;line-height:1.3}.utama{min-width:0;padding-block:2rem 3rem;padding-left:max(16px,2.5rem);padding-right:max(16px,2.5rem)}.halaman{width:100%;max-width:1400px;margin-inline:auto;display:grid;gap:1.25rem;position:relative}.halaman>h1{margin:0}.halaman:before{content:"";position:absolute;top:-6px;right:0;width:64px;height:64px;background:url(/favicon.svg) center / contain no-repeat;pointer-events:none}.halaman>h1,.halaman>.beranda-kepala{padding-right:80px;min-height:52px}.tab{display:flex;gap:.25rem;border-bottom:1px solid var(--garis);overflow-x:auto}.tab button{font:inherit;background:none;border:0;cursor:pointer;padding:.6rem .9rem;color:var(--redup);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:.4rem;align-items:center;white-space:nowrap}.tab button.aktif{color:var(--hijau-tua);border-bottom-color:var(--hijau-tua);font-weight:500}.lencana{background:var(--merah);color:#fff;font-size:.72rem;border-radius:99px;padding:0 .45rem}.pil{font-size:.78rem;padding:.15rem .55rem;border-radius:99px;background:var(--hijau-muda);color:var(--hijau-tua);white-space:nowrap}.pil-menunggu{background:var(--kuning-muda);color:var(--kuning)}.pil-ditolak,.pil-nonaktif{background:var(--merah-muda);color:var(--merah)}.daftar-akun{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.akun{display:grid;gap:.35rem}.akun p{margin:0}.akun-kepala{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.akun-label{display:flex;gap:.35rem;align-items:flex-start;flex-wrap:wrap}.akun-aksi{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.5rem}.form-alasan{display:grid;gap:.6rem;width:100%}.rincian{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.25rem;margin:0}.rincian dt{color:var(--redup)}.rincian dd{margin:0;min-width:0;overflow-wrap:anywhere}.foto-profil{border-radius:50%;object-fit:cover;flex:none;background:var(--hijau-muda)}.foto-kosong{display:inline-grid;place-items:center;color:var(--hijau-tua);font-family:var(--serif);font-weight:700}.pilih-foto{display:grid;gap:.4rem}.label-foto{font-weight:500;font-size:.95rem}.pilih-foto-isi{display:flex;align-items:center;gap:.9rem}.pilih-foto-isi .foto-profil{width:72px;height:72px;font-size:1.6rem}.sembunyi-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.pilih-foto-isi:focus-within label{outline:3px solid color-mix(in srgb,var(--hijau) 45%,transparent);outline-offset:2px}.akun-identitas{display:flex;align-items:center;gap:.75rem;min-width:0}.akun-saya{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap}.gulir-x{overflow-x:auto}.tabel{border-collapse:collapse;width:100%;font-size:.925rem}.tabel th,.tabel td{padding:.5rem .6rem;border-bottom:1px solid var(--garis);text-align:left}.tabel th{font-weight:500;color:var(--redup)}.tabel th:not(:first-child){text-align:center}.riwayat{list-style:none;margin:0;padding:0;display:grid}.riwayat li{padding:.7rem 0;border-bottom:1px solid var(--garis);display:grid;gap:.1rem}.riwayat li:last-child{border-bottom:0}.daftar-tautan{margin:0 0 .75rem;padding-left:1.1rem}.halaman-lebar{max-width:1400px}.tombol.kecil{padding:.4rem .7rem;font-size:.875rem}.tombol-besar{padding:.9rem 1.2rem;font-size:1.05rem}.tombol-teks{font:inherit;background:none;border:0;color:var(--hijau);text-decoration:underline;cursor:pointer;padding:.25rem 0;justify-self:start}.sukses{background:var(--hijau-muda);color:var(--hijau-tua);padding:.6rem .8rem;border-radius:8px;font-weight:500}.kasir{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.25rem;align-items:start}.kasir-menu{display:grid;gap:1rem;min-width:0}.tertunda{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.grid-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.kartu-menu{position:relative;display:flex;flex-direction:column;text-align:left;min-width:0;font:inherit;color:var(--teks);cursor:pointer;background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius);padding:0;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .1s}.kartu-menu:hover:not(:disabled){border-color:var(--hijau);box-shadow:0 0 0 1px var(--hijau),0 6px 16px #2d5e261f}.kartu-menu:focus-visible{outline:3px solid var(--hijau);outline-offset:2px}.kartu-menu.dipilih{border-color:var(--hijau);box-shadow:0 0 0 1px var(--hijau);background:var(--hijau-muda)}.kartu-menu:active:not(:disabled){transform:scale(.98)}.kartu-menu:disabled{opacity:.5;cursor:not-allowed}.kartu-menu img,.kartu-menu .foto-menu-kosong{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover}.foto-menu-kosong{display:grid;place-items:center;background:var(--hijau-muda);color:var(--hijau-tua);font-family:var(--serif);font-size:2rem;font-weight:700}.kartu-menu .foto-menu-kosong{display:grid;border-bottom:1px solid var(--garis)}.kartu-menu.dipilih .foto-menu-kosong{background:#ddedd8}.kartu-menu-teks{display:grid;gap:.15rem;padding:.6rem .75rem .75rem}.kartu-menu-nama{font-weight:500;line-height:1.3}.kartu-menu-harga{color:var(--hijau-tua);font-weight:600}.kartu-menu-jumlah{position:absolute;top:.35rem;right:.35rem;background:var(--hijau-tua);color:#fff;min-width:1.8rem;height:1.8rem;border-radius:99px;display:grid;place-items:center;font-weight:600;font-size:.9rem}.keranjang{position:sticky;top:1rem;display:grid;gap:.75rem}.keranjang h2{margin:0}.daftar-keranjang{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}.daftar-keranjang li{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.pengatur-jumlah{display:flex;align-items:center;gap:.4rem}.pengatur-jumlah button{width:2rem;height:2rem;border-radius:8px;border:1px solid var(--garis);background:var(--permukaan);font:inherit;font-size:1.1rem;cursor:pointer;color:var(--hijau-tua)}.pengatur-jumlah span{min-width:1.5rem;text-align:center;font-weight:600}.keranjang-total,.total-besar{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--garis);padding-top:.75rem}.keranjang-total strong,.total-besar strong{font-family:var(--serif);font-size:1.5rem;color:var(--hijau-tua)}.pembayaran{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;align-items:start;max-width:880px}.ringkas-item{list-style:none;margin:0 0 .75rem;padding:0;display:grid;gap:.35rem}.ringkas-item li{display:flex;justify-content:space-between;gap:.5rem}.bayar-form{display:grid;gap:.9rem}.pilihan-metode{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.pilihan-metode button{font:inherit;font-weight:500;padding:.8rem;border-radius:8px;border:1px solid var(--garis);background:var(--permukaan);cursor:pointer;color:var(--teks)}.pilihan-metode button.terpilih{background:var(--hijau-tua);border-color:var(--hijau-tua);color:#fff}.kembalian{font-family:var(--serif);font-size:1.3rem;color:var(--hijau-tua)}.kembalian.kurang{color:var(--merah)}label.centang{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;background:var(--kuning-muda);padding:.75rem;border-radius:8px}label.centang input{width:1.2rem;height:1.2rem;margin-top:.15rem;flex:none}.kasir-nota{display:grid;gap:1rem;justify-items:start}.nota{background:#fff;color:#111;border:1px dashed var(--garis);border-radius:8px;padding:1rem;width:100%;max-width:320px;font-size:.9rem;display:grid;gap:.25rem}.nota hr{border:0;border-top:1px dashed #bbb;margin:.4rem 0;width:100%}.nota-kepala{text-align:center;display:grid;margin-bottom:.4rem}.nota-kepala strong{font-family:var(--serif);font-size:1.3rem}.nota-kepala span{font-size:.75rem}.nota-baris{display:flex;justify-content:space-between;gap:.5rem}.nota-total{font-weight:700;font-size:1rem}.nota-status{text-align:center;font-weight:700;margin-top:.4rem}.nota-kaki{text-align:center;margin:.5rem 0 0;font-size:.8rem}.daftar-transaksi{display:grid;gap:1rem}.ringkasan{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}.angka-kartu{display:grid;gap:.2rem;padding:1rem}.angka-kartu strong{font-family:var(--serif);font-size:1.4rem;color:var(--hijau-tua)}.trx{padding:0}.trx-kepala{width:100%;display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;font:inherit;color:inherit;background:none;border:0;padding:1rem 1.25rem;cursor:pointer;text-align:left}.trx-kanan{display:flex;gap:.6rem;align-items:center}.trx-isi{padding:0 1.25rem 1.25rem;display:grid;gap:.75rem}.trx-batal{opacity:.7}.pil-trx-menunggu_bayar{background:var(--kuning-muda);color:var(--kuning)}.pil-trx-dibatalkan{background:var(--merah-muda);color:var(--merah)}.kelola-menu{display:grid;gap:1rem;justify-items:stretch}.kelola-menu>.tombol{justify-self:start}.baris-menu{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.foto-menu{width:72px;height:54px;border-radius:8px;object-fit:cover;flex:none;font-size:1.4rem}.baris-menu-isi{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;flex:1;min-width:0}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}.teks-merah{color:var(--merah)}.teks-hijau{color:var(--hijau)}.stok-angka{display:grid;text-align:right}.stok-angka strong{font-family:var(--serif);font-size:1.25rem}.tabel-input input,.tabel-input select{min-width:90px;padding:.45rem .55rem}.tabel-invoice td{vertical-align:top}.top-merah{color:var(--merah);font-weight:600;background:var(--merah-muda)}.top-kuning{color:var(--kuning);font-weight:600;background:var(--kuning-muda)}.top-hijau{color:var(--hijau-tua)}.baris-redup td{color:var(--redup)}.detail-invoice{display:grid;gap:.75rem;padding:.5rem 0}.ringkasan-kecil{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem}.ringkasan-kecil>div{display:grid}.ringkasan-kecil strong{font-family:var(--serif);font-size:1.1rem;color:var(--hijau-tua)}.pil-gd-menunggu,.pil-pc-menunggu_verifikasi,.pil-gd-perlu_revisi{background:var(--kuning-muda);color:var(--kuning)}.pil-gd-ditolak,.pil-pc-dibatalkan{background:var(--merah-muda);color:var(--merah)}.sebaris-input{display:flex;align-items:center;gap:.4rem}.absen-panel{display:grid;gap:.75rem}.absen-panel h2,.absen-panel p{margin:0}.kamera{display:grid;gap:.6rem;justify-items:start}.kamera video{width:100%;max-width:360px;border-radius:var(--radius);background:#000}.kamera video.cermin{transform:scaleX(-1)}.pil-absen-terlambat,.pil-absen-belum_lengkap,.pil-absen-perlu_pemeriksaan,.pil-menunggu{background:var(--kuning-muda);color:var(--kuning)}.pil-absen-tidak_valid,.pil-ditolak{background:var(--merah-muda);color:var(--merah)}.jadwal td{text-align:center}.jadwal td:first-child{text-align:left;white-space:nowrap}.jadwal select{min-width:92px}.jadwal-full_day{background:var(--hijau-muda)}.jadwal-libur{background:var(--kuning-muda)}details summary{cursor:pointer;color:var(--hijau)}.slip-cetak{display:grid;gap:1.5rem}.halaman-slip{background:#fff;color:#111;border:1px solid var(--garis);border-radius:var(--radius);padding:2rem;display:grid;gap:1rem;max-width:760px}.slip-kepala{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--hijau-tua);padding-bottom:.75rem}.slip-merek{font-family:var(--serif);font-size:1.6rem;color:var(--hijau-tua)}.slip-judul{font-family:var(--serif);font-weight:700;letter-spacing:.08em}.slip-info td{padding:.15rem 1rem .15rem 0}.slip-info td:first-child{color:#555}.slip-rincian{width:100%;border-collapse:collapse}.slip-rincian th,.slip-rincian td{border-bottom:1px solid #ddd;padding:.45rem .5rem;text-align:left}.slip-rincian td:not(:first-child),.slip-rincian th:not(:first-child){text-align:right}.slip-rincian tfoot td{font-weight:700;border-top:2px solid #111;border-bottom:0}.slip-status{justify-self:end;font-family:var(--serif);font-size:1.5rem;font-weight:700;border:3px solid;padding:.2rem 1rem;border-radius:6px;transform:rotate(-4deg)}.slip-status.lunas{color:var(--hijau-tua)}.slip-status.belum{color:var(--merah)}.dokumen-po{max-width:820px}.po-kepala{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;border-bottom:2px solid var(--hijau-tua);padding-bottom:.9rem}.po-merek{display:flex;align-items:center;gap:.85rem}.po-merek img{border-radius:16px;flex:none}.po-judul{text-align:right;display:grid;gap:.25rem;justify-items:end}.po-nomor{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--hijau-tua)}.po-info{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}.po-label{font-size:.8rem;color:#555;margin-bottom:.2rem}.po-redup{color:#555}.po-rincian td:first-child,.po-rincian th:first-child{width:2.5rem}.po-rincian td:nth-child(2),.po-rincian th:nth-child(2){text-align:left}.po-ttd{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:1.5rem;text-align:center}.po-garis{height:64px;border-bottom:1px solid #111;margin-bottom:.35rem}.slip-bukti{max-width:100%;max-height:220mm;object-fit:contain;border:1px solid #ddd}.beranda-kepala{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}.beranda-kepala h1,.beranda-kepala p{margin:0}.status-ops{font-weight:600;padding:.35rem .9rem;border-radius:99px;font-size:.9rem}.status-hijau{background:var(--hijau-muda);color:var(--hijau-tua)}.status-kuning{background:var(--kuning-muda);color:var(--kuning)}.status-abu{background:var(--garis);color:var(--redup)}.daftar-target{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}.baris-target{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.meter{height:8px;background:var(--hijau-muda);border-radius:99px;overflow:hidden;margin:.25rem 0}.meter span{display:block;height:100%;background:var(--hijau);border-radius:99px}.grafik{margin:0;display:grid;gap:.5rem}.grafik-judul{font-family:var(--serif);font-size:1.1rem}.grafik-area{position:relative}.grafik-area svg{width:100%;height:auto;display:block;overflow:visible}.grafik-grid{stroke:var(--garis);stroke-width:1}.grafik-sumbu{stroke:#b9c4b5;stroke-width:1}.grafik-batang{fill:var(--hijau)}.grafik-batang.aktif{fill:var(--hijau-tua)}.grafik-label{font-size:11px;fill:var(--redup);font-family:var(--sans)}.grafik-area g:focus{outline:none}.grafik-tooltip{position:absolute;top:-6px;transform:translate(-50%,-100%);background:var(--teks);color:#fff;padding:.35rem .6rem;border-radius:6px;font-size:.8rem;display:grid;text-align:center;pointer-events:none;white-space:nowrap}.laba-rugi .baris-tebal td{font-weight:700;border-top:1px solid #999}.laporan-catatan p{margin:.4rem 0 0}@page{size:A4;margin:14mm}@page nota{size:80mm auto;margin:0}@media print{body *{visibility:hidden}.area-cetak,.area-cetak *{visibility:visible}.area-cetak{position:absolute;left:0;top:0;width:100%}.no-cetak{display:none!important}.nota.area-cetak{page:nota;border:0;width:72mm;max-width:72mm;padding:2mm 4mm;font-size:12px}.halaman-slip{border:0;padding:0;max-width:none;break-after:page}.halaman-slip:last-child{break-after:auto}}@media (max-width: 860px){.halaman:before{width:48px;height:48px;top:-2px}.halaman>h1,.halaman>.beranda-kepala{padding-right:60px;min-height:44px}.kerangka{grid-template-columns:1fr}.bilah-atas{display:flex;align-items:center;gap:.75rem;position:sticky;top:0;z-index:20;padding-block:.6rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:calc(.6rem + env(safe-area-inset-top,0px));background:var(--permukaan);border-bottom:1px solid var(--garis)}.tombol-menu{font:inherit;font-weight:500;background:var(--hijau-muda);color:var(--hijau-tua);border:0;border-radius:8px;padding:.45rem .8rem;cursor:pointer}.samping{display:none;position:fixed;right:0;bottom:0;left:0;top:auto;height:auto;max-height:calc(100vh - 56px);z-index:30;border-right:0;border-top:1px solid var(--garis);box-shadow:0 -12px 32px #1e2a1a1f}.samping.terbuka{display:flex}.samping-merek{display:none}.utama{padding-block:1.25rem 2.5rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}h1{font-size:1.55rem}.kasir,.pembayaran{grid-template-columns:1fr}.keranjang{position:sticky;top:auto;bottom:0;z-index:10;box-shadow:0 -8px 24px #1e2a1a1a}.grid-menu{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}