:root{--bg:#f5f6f8;--kartu:#ffffff;--garis:#e3e6ea;--teks:#1d2433;--teks-2:#5d6676;--utama:#1f6feb;--utama-muda:#e8f0fe;--hijau:#1a7f37;--hijau-muda:#e6f4ea;--merah:#c62828;--merah-muda:#fdecea;--kuning:#9a6700;--kuning-muda:#fff4d6}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--teks);font-size:14px;line-height:1.5}a{color:var(--utama);text-decoration:none}h1{font-size:22px;margin:0 0 4px}h1,h2{font-weight:600}h2{font-size:16px;margin:0 0 12px}.tata{display:grid;grid-template-columns:220px 1fr;min-height:100vh}.samping{background:#fff;border-right:1px solid var(--garis);padding:16px 12px;position:-webkit-sticky;position:sticky;top:0;height:100vh;overflow-y:auto}.samping .nama-kop{font-weight:700;font-size:15px;padding:4px 10px 16px}.samping a{display:block;padding:8px 10px;border-radius:8px;color:var(--teks-2);margin-bottom:2px}.samping a:hover{background:var(--bg)}.samping a.aktif{background:var(--utama-muda);color:var(--utama);font-weight:600}.samping .bawah{margin-top:24px;padding:10px;border-top:1px solid var(--garis);font-size:13px;color:var(--teks-2)}.isi{padding:24px 28px;max-width:1200px;width:100%}.kepala{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px;flex-wrap:wrap}.sub{color:var(--teks-2);font-size:13px}.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:16px 18px;margin-bottom:16px}.grid-angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-gap:12px;gap:12px;margin-bottom:16px}.angka{background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:14px 16px}.angka .label{color:var(--teks-2);font-size:12px}.angka .nilai{font-size:22px;font-weight:700;margin-top:2px}.dua-kolom{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:9px 10px;border-bottom:1px solid var(--garis);vertical-align:top}th{font-size:12px;color:var(--teks-2);font-weight:600;background:#fafbfc}td.kanan,th.kanan{text-align:right}tr.batal td{color:#9aa1ad;text-decoration:line-through}.tabel-bungkus{overflow-x:auto}input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--garis);border-radius:8px;background:#fff;color:var(--teks);width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--utama-muda);border-color:var(--utama)}label{display:block;font-size:12px;color:var(--teks-2);margin-bottom:4px;font-weight:600}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:12px;gap:12px;margin-bottom:12px}.baris-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}.baris-filter>*{width:auto}.tombol,button{font:inherit;font-weight:600;padding:8px 14px;border-radius:8px;border:1px solid var(--garis);background:#fff;color:var(--teks);cursor:pointer;display:inline-block}.tombol:hover,button:hover{background:var(--bg)}button:disabled{opacity:.5;cursor:not-allowed}button.utama{background:var(--utama);border-color:var(--utama);color:#fff}button.utama:hover{filter:brightness(.95)}button.bahaya{color:var(--merah);border-color:#f2c4c4}button.kecil{padding:4px 10px;font-size:12px}.aksi{display:flex;gap:8px;flex-wrap:wrap}.lencana{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--bg);color:var(--teks-2);white-space:nowrap}.lencana.hijau{background:var(--hijau-muda);color:var(--hijau)}.lencana.merah{background:var(--merah-muda);color:var(--merah)}.lencana.kuning{background:var(--kuning-muda);color:var(--kuning)}.lencana.biru{background:var(--utama-muda);color:var(--utama)}.pesan{padding:10px 12px;border-radius:8px;margin-bottom:12px;font-size:13px}.pesan.error{background:var(--merah-muda);color:var(--merah)}.pesan.sukses{background:var(--hijau-muda);color:var(--hijau)}.kosong{color:var(--teks-2);padding:16px 0;text-align:center}.latar-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.modal{background:#fff;border-radius:12px;padding:20px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto}.halaman-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}.halaman-login .kartu{width:100%;max-width:360px}@media (max-width:800px){.tata{grid-template-columns:1fr}.samping{position:static;height:auto;display:flex;flex-wrap:wrap;gap:4px;padding:10px}.samping .bawah,.samping .nama-kop{width:100%}.isi{padding:16px}.dua-kolom{grid-template-columns:1fr}}.pesan.peringatan{background:var(--kuning-muda);color:var(--kuning)}.pesan a{color:inherit;text-decoration:underline;font-weight:600}.kasir{display:grid;grid-template-columns:1fr 360px;grid-gap:16px;gap:16px;align-items:start}.kasir .scan{font-size:18px;padding:12px 14px}.kasir .total-besar{font-size:32px;font-weight:700}.pilihan{display:grid;grid-template-columns:1fr 1fr;grid-gap:6px;gap:6px;margin-bottom:12px}.pilihan button.aktif{background:var(--utama);border-color:var(--utama);color:#fff}.hasil-cari{border:1px solid var(--garis);border-radius:8px;max-height:280px;overflow-y:auto;margin-top:6px;background:#fff}.hasil-cari div{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--garis)}.hasil-cari div.sorot,.hasil-cari div:hover{background:var(--utama-muda)}.qty{display:inline-flex;align-items:center;gap:4px}.qty input{width:56px;text-align:center;padding:4px}.qty button{padding:2px 8px}.atas-kasir{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:#fff;border-bottom:1px solid var(--garis);gap:12px;flex-wrap:wrap}.struk{font-family:Courier New,monospace;font-size:12px;width:280px;margin:0 auto;color:#000}.struk .garis{border-top:1px dashed #000;margin:6px 0}.struk .baris{display:flex;justify-content:space-between;gap:8px}.struk .tengah{text-align:center}@media print{body:has(.latar-modal .struk) *{visibility:hidden}body:has(.latar-modal .struk) .struk,body:has(.latar-modal .struk) .struk *{visibility:visible}body:has(.latar-modal .struk) .struk{position:absolute;left:0;top:0;width:58mm}.latar-modal{background:none}.atas-kasir,.samping,.tanpa-cetak{display:none!important}.tata{display:block}.isi{padding:0;max-width:none}.kartu{page-break-inside:avoid;break-inside:avoid;border-color:#bbb}body{background:#fff}}@media (max-width:900px){.kasir{grid-template-columns:1fr}}.samping .judul-menu{font-size:11px;font-weight:700;color:var(--teks-2);text-transform:uppercase;letter-spacing:.5px;padding:14px 10px 4px}