/* Bobot yang dibundel: 400, 600, 700 (Fredoka 400, 600) - sama dengan Android (Theme.kt memetakan Medium ke Regular, Black ke Bold). Rentang bobot menyatakan pemetaan itu secara eksplisit, bukan mengandalkan pencocokan peramban. */ @font-face{font-family:'Outfit';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/outfit-400.woff2?v=1) format('woff2')} @font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/outfit-600.woff2?v=1) format('woff2')} @font-face{font-family:'Outfit';font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/outfit-700.woff2?v=1) format('woff2')} @font-face{font-family:'Fredoka';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/fredoka-400.woff2?v=1) format('woff2')} @font-face{font-family:'Fredoka';font-style:normal;font-weight:600 900;font-display:swap;src:url(/fonts/fredoka-600.woff2?v=1) format('woff2')} /* Arcadehaus POS v2 - sistem desain Rujukan pola: Moka POS (rak kategori, kartu produk bergambar, panel pesanan, layar tagih). Warna brand Arcadehaus: navy + oranye; aksen bisa diganti direksi (--aksen). */ :root{ --navy:#1A1D2E; --navy-2:#2A2E48; --navy-3:#3D4257; --chrome:#14263D; --chrome-2:#1D3552; --chrome-3:#2A4A70; --chrome-tinta:#FFFFFF; --chrome-redup:rgba(255,255,255,.7); --aksen:#F26A21; --aksen-2:#D65A17; --aksen-lembut:#FDE7DA; --aksen-tinta:#14263D; /* tinta di atas aksen: App.tintaAksen (putih < 4,5:1 -> navy) */ --bg:#F1F3F6; --permukaan:#FFFFFF; --permukaan-2:#F6F7F9; --garis:#E6E8EE; --garis-2:#D3D7DF; --ink:#111827; --ink-2:#374151; --slate:#6B7280; --slate-2:#9CA3AF; --ok:#166534; --ok-lembut:#DCF5E7; --warn:#8A5200; --warn-lembut:#FCF0D8; --bad:#B91C1C; --bad-lembut:#FBE3E3; --r:16px; --r-s:12px; --r-l:24px; --bayang:0 1px 2px rgba(17,24,39,.05),0 10px 28px -12px rgba(17,24,39,.14); --tepi-chrome:color-mix(in srgb,var(--chrome-tinta) 14%,transparent); --font:'Outfit','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --display:'Fredoka','Outfit',sans-serif; --tinggi-atas:56px; --tinggi-tab:64px; --lebar-rel:84px; --aman-bawah:env(safe-area-inset-bottom,0px); --aman-atas:env(safe-area-inset-top,0px); --ease:cubic-bezier(.23,1,.32,1); } *{box-sizing:border-box} html,body{margin:0;height:100%;background:var(--chrome);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.4} body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;touch-action:manipulation} #app{min-height:100%;background:var(--bg)} /* rasa aplikasi asli: teks antarmuka tidak bisa diseleksi, kecuali isian & angka laporan */ .app,.login,.tirai{-webkit-user-select:none;user-select:none} input,textarea,select,.boleh-pilih,.boleh-pilih *{-webkit-user-select:text;user-select:text} ::-webkit-scrollbar{width:0;height:0} *{scrollbar-width:none} /* di layar sentuh scrollbar disembunyikan (rasa aplikasi asli); dengan mouse (laptop direksi) tampil tipis dari palet */ @media (hover:hover) and (pointer:fine){ .isi,.grid-wadah,.pesanan-isi,.modal-isi,.tabel-wrap,.rel,.baris-alat.gulir{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--slate) 35%,transparent) transparent} .isi::-webkit-scrollbar,.grid-wadah::-webkit-scrollbar,.pesanan-isi::-webkit-scrollbar,.modal-isi::-webkit-scrollbar,.tabel-wrap::-webkit-scrollbar,.rel::-webkit-scrollbar{width:8px;height:8px} .isi::-webkit-scrollbar-thumb,.grid-wadah::-webkit-scrollbar-thumb,.pesanan-isi::-webkit-scrollbar-thumb,.modal-isi::-webkit-scrollbar-thumb,.tabel-wrap::-webkit-scrollbar-thumb,.rel::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--slate) 35%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box} } ::selection{background:var(--aksen-lembut);color:var(--ink)} h1,h2,h3{margin:0;font-weight:600;text-wrap:balance;letter-spacing:-.01em} h1{font-size:1.35rem}h2{font-size:1.1rem}h3{font-size:.95rem} p{margin:0} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;border:0;background:none;padding:0;color:inherit} button:active{opacity:.92} .lambang{display:inline-block;height:1.5em;width:auto;aspect-ratio:100/110;flex:none;color:inherit} button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--aksen);outline-offset:2px} img{max-width:100%;display:block} svg.ik{width:22px;height:22px;flex:none} .num{font-variant-numeric:tabular-nums} .muted{color:var(--slate)} .kecil{font-size:.82rem} .tebal{font-weight:600} .kanan{text-align:right} .tengah{text-align:center} .sembunyi{display:none!important} .wordmark{font-family:var(--display);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .baris{display:flex;align-items:center;gap:10px} .spasi{flex:1} /* ---------- varian tema (diatur direksi/manager di Tampilan) ---------- */ :root[data-latar="hangat"]{--bg:#F6F1E8;--permukaan:#FFFDF9;--permukaan-2:#F3EDE2;--garis:#E7DFD1;--garis-2:#D5CBB9} /* latar bernuansa anak: seluruh halaman ikut berwarna, bukan hanya bilah atas */ :root[data-latar="krem"]{--bg:#FFF6D6;--permukaan:#FFFDF4;--permukaan-2:#FFF0BF;--garis:#F2E2A4;--garis-2:#E3CF7C} :root[data-latar="merahmuda"]{--bg:#FFEAF3;--permukaan:#FFF8FB;--permukaan-2:#FFDDEB;--garis:#F9C9DD;--garis-2:#F0A8C8} :root[data-latar="biru"]{--bg:#E6F4FF;--permukaan:#F8FCFF;--permukaan-2:#D8ECFB;--garis:#BFDDF3;--garis-2:#9CC7E8} :root[data-latar="hijau"]{--bg:#EAF9EC;--permukaan:#F8FEF9;--permukaan-2:#D9F3DE;--garis:#BFE6C8;--garis-2:#9AD4A8} :root[data-latar="ungu"]{--bg:#F1ECFF;--permukaan:#FAF8FF;--permukaan-2:#E6DEFF;--garis:#D2C6F5;--garis-2:#B7A6EA} :root[data-latar="gelap"]{--bg:#0F172A;--permukaan:#1E293B;--permukaan-2:#263449;--garis:#334155;--garis-2:#475569;--ink:#F1F5F9;--ink-2:#E2E8F0;--slate:#94A3B8;--slate-2:#64748B;--ok-lembut:#14532D;--warn-lembut:#4A3410;--bad-lembut:#4C1D1D;--bayang:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)} :root[data-latar="gelap"] .tag-navy{background:#334155;color:#E2E8F0} :root[data-latar="gelap"] .info{background:#1E3A5F;border-color:#2C4E7A;color:#DBEAFE} :root[data-latar="gelap"] .segmen button{background:var(--permukaan)} :root[data-latar="gelap"] .segmen button.aktif{background:#E2E8F0;color:#0F172A} :root[data-latar="gelap"] .kartu-produk .gbr{background:#0F172A} :root[data-kartu="warna"] .kartu-produk .gbr:has(img){background:var(--permukaan-2)} :root[data-latar="gelap"] .numpad button,:root[data-latar="gelap"] .numpad-uang button{background:var(--permukaan-2)} :root[data-font="jakarta"]{--font:'Plus Jakarta Sans','Segoe UI',Roboto,sans-serif;--display:'Plus Jakarta Sans',sans-serif} :root[data-font="inter"]{--font:'Inter','Segoe UI',Roboto,sans-serif;--display:'Inter',sans-serif} :root[data-font="inter"] .wordmark,:root[data-font="jakarta"] .wordmark{font-weight:800;letter-spacing:.02em} :root[data-font="fredoka"]{--font:'Fredoka','Outfit','Segoe UI',Roboto,sans-serif;--display:'Fredoka',sans-serif} :root[data-font="fredoka"] .wordmark{letter-spacing:.06em} /* ---------- hiasan: motif di bilah atas, rel menu, panel masuk, spanduk promo ---------- Bentuknya putih/pastel setengah transparan supaya tulisan di atasnya tetap terbaca di chrome apa pun. */ :root[data-hiasan]{--hiasan:none;--hiasan-ukuran:auto} :root[data-hiasan="bola"]{--hiasan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Ccircle cx='22' cy='30' r='14' fill='%23FDE68A' opacity='.36'/%3E%3Ccircle cx='70' cy='18' r='9' fill='%23FCA5A5' opacity='.36'/%3E%3Ccircle cx='118' cy='40' r='16' fill='%23A7F3D0' opacity='.33'/%3E%3Ccircle cx='48' cy='82' r='11' fill='%23BFDBFE' opacity='.36'/%3E%3Ccircle cx='96' cy='96' r='8' fill='%23FDE68A' opacity='.33'/%3E%3Ccircle cx='146' cy='90' r='12' fill='%23FBCFE8' opacity='.36'/%3E%3C/svg%3E");--hiasan-ukuran:160px 120px} :root[data-hiasan="konfeti"]{--hiasan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Crect x='14' y='20' width='10' height='5' rx='1' transform='rotate(25 19 22)' fill='%23FDE68A' opacity='.6'/%3E%3Crect x='60' y='10' width='10' height='5' rx='1' transform='rotate(-30 65 12)' fill='%23FCA5A5' opacity='.6'/%3E%3Crect x='110' y='30' width='10' height='5' rx='1' transform='rotate(50 115 32)' fill='%23A7F3D0' opacity='.6'/%3E%3Ccircle cx='40' cy='70' r='4' fill='%23BFDBFE' opacity='.6'/%3E%3Crect x='84' y='78' width='10' height='5' rx='1' transform='rotate(-15 89 80)' fill='%23FBCFE8' opacity='.6'/%3E%3Crect x='20' y='112' width='10' height='5' rx='1' transform='rotate(40 25 114)' fill='%23A7F3D0' opacity='.6'/%3E%3Ccircle cx='120' cy='110' r='4' fill='%23FDE68A' opacity='.6'/%3E%3C/svg%3E");--hiasan-ukuran:140px 140px} :root[data-hiasan="titik"]{--hiasan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='9' cy='9' r='3.5' fill='%23fff' opacity='.22'/%3E%3Ccircle cx='27' cy='27' r='3.5' fill='%23fff' opacity='.22'/%3E%3C/svg%3E");--hiasan-ukuran:36px 36px} :root[data-hiasan="awan"]{--hiasan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cg fill='%23fff' opacity='.26'%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Ccircle cx='58' cy='32' r='18'/%3E%3Ccircle cx='78' cy='42' r='13'/%3E%3Crect x='26' y='40' width='66' height='14' rx='7'/%3E%3Ccircle cx='150' cy='92' r='10'/%3E%3Ccircle cx='165' cy='85' r='14'/%3E%3Ccircle cx='182' cy='93' r='10'/%3E%3Crect x='140' y='92' width='52' height='11' rx='5'/%3E%3C/g%3E%3C/svg%3E");--hiasan-ukuran:220px 120px} :root[data-hiasan="bintang"]{--hiasan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23fff'%3E%3Cpath d='M30 14l3 8 8 3-8 3-3 8-3-8-8-3 8-3z' opacity='.7'/%3E%3Cpath d='M118 40l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' opacity='.6'/%3E%3Cpath d='M70 96l3 8 8 3-8 3-3 8-3-8-8-3 8-3z' opacity='.5'/%3E%3Ccircle cx='140' cy='120' r='2' opacity='.7'/%3E%3Ccircle cx='20' cy='130' r='1.5' opacity='.7'/%3E%3Ccircle cx='96' cy='20' r='1.5' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");--hiasan-ukuran:160px 160px} :root[data-hiasan="garis"]{--hiasan:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 10px,transparent 10px 24px);--hiasan-ukuran:auto} :root[data-hiasan="pelangi"]{--hiasan:linear-gradient(90deg,#F87171 0 14.28%,#FB923C 0 28.57%,#FBBF24 0 42.85%,#4ADE80 0 57.14%,#60A5FA 0 71.42%,#A78BFA 0 85.7%,#F472B6 0);--hiasan-ukuran:100% 5px} :root[data-hiasan="pelangi"] .topbar,:root[data-hiasan="pelangi"] .login-kiri,:root[data-hiasan="pelangi"] .promo-banner,:root[data-hiasan="pelangi"] .rel,:root[data-hiasan="pelangi"] .splash{background-repeat:no-repeat,repeat;background-position:left bottom,0 0} /* ---------- kartu produk berwarna per lini ---------- */ :root[data-kartu="warna"] .kartu-produk[data-lini="koin"] .gbr{background:#FFF1C2} :root[data-kartu="warna"] .kartu-produk[data-lini="mandi_bola"] .gbr{background:#DBEAFE} :root[data-kartu="warna"] .kartu-produk[data-lini="bombom_car"] .gbr{background:#FFE4E6} :root[data-kartu="warna"] .kartu-produk[data-lini="kiddie_ride"] .gbr{background:#FCE7F3} :root[data-kartu="warna"] .kartu-produk[data-lini="light_car"] .gbr{background:#E0F2FE} :root[data-kartu="warna"] .kartu-produk[data-lini="kaos_kaki_anak"] .gbr{background:#DCFCE7} :root[data-kartu="warna"] .kartu-produk[data-lini="kaos_kaki_dewasa"] .gbr{background:#EDE9FE} :root[data-kartu="warna"] .kartu-produk[data-lini="promo"] .gbr{background:#FEF3C7} :root[data-kartu="warna"] .kartu-produk[data-lini="lainnya"] .gbr{background:#F3F4F6} :root[data-kartu="warna"] .kartu-produk{border-width:2px} :root[data-sudut="tegas"]{--r:6px;--r-s:5px;--r-l:8px} :root[data-sudut="tegas"] .chip,:root[data-sudut="tegas"] .pil,:root[data-sudut="tegas"] .stepper,:root[data-sudut="tegas"] .rak .cari{border-radius:6px} /* ---------- splash ---------- */ .splash{position:fixed;inset:0;background-color:var(--chrome);background-image:var(--hiasan);background-size:var(--hiasan-ukuran);display:grid;place-items:center;z-index:100;color:var(--chrome-tinta);transition:opacity .25s} .splash.hilang{opacity:0;pointer-events:none} .splash .wordmark{font-size:1.8rem} .splash .tengah{display:flex;flex-direction:column;align-items:center} .splash .lambang{height:64px;color:var(--aksen);margin-bottom:12px} .splash .putar{width:26px;height:26px;border:3px solid color-mix(in srgb,var(--chrome-tinta) 22%,transparent);border-top-color:var(--aksen);border-radius:50%;animation:putar .8s linear infinite;margin:18px auto 0} @keyframes putar{to{transform:rotate(360deg)}} /* ---------- tombol ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-s);padding:12px 18px;font-weight:600;border:1.5px solid transparent;line-height:1.1;white-space:nowrap;min-height:44px;transition:transform .06s,background .12s} .btn{transition:transform .1s var(--ease),background .12s ease,box-shadow .12s ease,border-color .12s ease} .btn:active{transform:scale(.97)} .btn-utama{background:var(--aksen);color:var(--aksen-tinta)} .btn-utama:disabled{background:var(--garis-2);color:#fff;cursor:not-allowed;transform:none} .btn-navy{background:var(--navy);color:#fff} .btn-garis{border-color:var(--garis-2);background:var(--permukaan);color:var(--ink-2)} .btn-lembut{background:var(--aksen-lembut);color:var(--aksen-2)} .btn-bahaya{background:var(--permukaan);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)} .btn-bahaya:active{background:var(--bad-lembut)} .tabel .btn-bahaya{border-color:transparent;background:transparent} .btn-blok{width:100%} .btn-besar{padding:16px 22px;font-size:1.05rem;border-radius:var(--r);min-height:56px} .btn-kecil{padding:8px 12px;font-size:.85rem;min-height:36px} .btn-ikon{width:44px;height:44px;padding:0;border-radius:50%} .btn .ik{width:20px;height:20px} /* ---------- isian ---------- */ .label{display:block;font-size:.84rem;font-weight:600;color:var(--slate);margin:16px 0 6px} .input{width:100%;border:1.5px solid var(--garis-2);border-radius:var(--r-s);padding:12px 14px;background:var(--permukaan);font-size:max(1rem,16px);min-height:46px;-webkit-appearance:none;appearance:none;transition:border-color .12s ease} .input:focus{border-color:var(--aksen);outline:0} .input.pin{letter-spacing:.45em;font-size:1.5rem;text-align:center} select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px} .sakelar{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--garis)} .sakelar:last-child{border-bottom:0} .sakelar .teks{flex:1} .sakelar .teks small{display:block;color:var(--slate)} .sakelar input{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:999px;background:var(--garis-2);position:relative;flex:none;transition:background .15s;margin:0} .sakelar input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s} .sakelar input:checked{background:var(--ok)} .sakelar input:checked::after{transform:translateX(18px)} .numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px} .numpad button{height:56px;border-radius:var(--r-s);background:var(--permukaan-2);font-size:1.4rem;font-weight:500;border:0;transition:transform .1s var(--ease),background .1s} .numpad button:active{background:var(--garis);transform:scale(.96)} .numpad .aksi{font-size:1rem;color:var(--slate)} .numpad .oke{background:var(--navy);color:#fff;border-color:var(--navy)} /* ---------- login ---------- */ .login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(300px,44%) 1fr;background:var(--bg)} .login-kiri{color:var(--aksen-tinta);background-color:var(--aksen);background-image:var(--hiasan),linear-gradient(160deg,var(--aksen),var(--aksen-2-masuk,var(--aksen-2)));background-size:var(--hiasan-ukuran),100% 100%;padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} .login-kiri .merek{position:relative;z-index:2} .login-kiri .merek img{height:64px;width:auto;margin-bottom:10px} .login-kiri .merek .lambang{display:block;height:76px;margin-bottom:16px} .login-kiri .wordmark{font-size:2.1rem;line-height:1;color:var(--aksen-tinta)} .login-kiri .tagline{color:var(--aksen-tinta);font-size:1rem;margin-top:10px;font-weight:500} .login-kiri .catatan{position:relative;z-index:2;max-width:min(34ch,70%);color:var(--aksen-tinta);line-height:1.5;font-size:1rem} .login-kiri .catatan .judul{font-weight:700;margin-bottom:6px} /* pengumuman di layar masuk: bingkai putih ala foto cetak, slide bergantian + zoom pelan, titik = sisa waktu slide */ .login-kiri .pengumuman{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:flex;align-items:center;padding:34px 0 26px} .bingkai{position:relative;margin:0;width:100%;max-width:560px;height:100%;max-height:min(62vh,660px);min-height:240px;display:flex;flex-direction:column;background:#fff;border-radius:22px;padding:10px;box-shadow:0 30px 60px -20px rgba(10,14,30,.55),0 0 0 1px rgba(255,255,255,.5);animation:bingkai-masuk .7s cubic-bezier(.2,.8,.2,1) both} .layar-umum{position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden;background:#11142A;isolation:isolate} .layar-umum .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease} .layar-umum .slide.aktif{opacity:1} .layar-umum .slide::before{content:"";position:absolute;inset:-30px;background:var(--gb) center/cover no-repeat;filter:blur(24px) saturate(1.3);opacity:.55;transform:scale(1.1)} .layar-umum img{position:relative;display:block;width:100%;height:100%;object-fit:contain} .layar-umum .slide.aktif img{animation:zoom-umum calc(var(--jeda,6s) + 1s) ease-out both} .bingkai figcaption{display:flex;align-items:center;gap:12px;padding:10px 6px 0;min-height:32px;color:#1A1D2E;font-weight:600;font-size:.95rem} .teks-umum{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s} .titik-umum{display:flex;gap:6px;flex:none} .titik-umum i{position:relative;width:8px;height:8px;border-radius:99px;background:rgba(26,29,46,.18);overflow:hidden;transition:width .4s} .titik-umum i.aktif{width:28px} .titik-umum i.aktif::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--aksen);transform-origin:left;animation:isi-titik var(--jeda,6s) linear both} .label-umum{position:absolute;z-index:3;top:-13px;left:22px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:99px;background:#1A1D2E;color:#fff;font-size:.7rem;font-weight:700;line-height:1;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 16px -8px rgba(0,0,0,.6)} .label-umum i{width:8px;height:8px;border-radius:50%;background:var(--aksen);animation:denyut-umum 1.8s ease-out infinite} @keyframes bingkai-masuk{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}} @keyframes zoom-umum{from{transform:scale(1)}to{transform:scale(1.06)}} @keyframes isi-titik{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes denyut-umum{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}} @media (prefers-reduced-motion:reduce){.bingkai,.layar-umum .slide.aktif img,.label-umum i{animation:none}.titik-umum i.aktif::after{animation:none;transform:none}.layar-umum .slide{transition:none}} .baris-umum{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;margin-bottom:8px} .baris-umum img{width:64px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--garis);background:#fff} .login-kanan{display:grid;place-items:center;padding:28px 20px} .kartu-login{width:min(420px,100%);background:var(--permukaan);border-radius:var(--r-l);box-shadow:var(--bayang);padding:28px} .kartu-login h1{font-size:1.35rem} /* ---------- kerangka aplikasi ---------- */ .app{height:100vh;height:100dvh;display:grid;grid-template-rows:calc(var(--tinggi-atas) + var(--aman-atas)) 1fr;grid-template-columns:var(--lebar-rel) 1fr;background:var(--bg)} .topbar{grid-column:1/-1;box-shadow:inset 0 -1px 0 var(--tepi-chrome);background-color:var(--chrome);background-image:var(--hiasan),linear-gradient(90deg,var(--chrome),var(--chrome-grad,var(--chrome)));background-size:var(--hiasan-ukuran),100% 100%;color:var(--chrome-tinta);display:flex;align-items:center;gap:12px;padding:var(--aman-atas) 14px 0 14px} .topbar .merek{display:flex;align-items:center;gap:10px;min-width:0} .topbar .merek img{height:32px;width:auto;border-radius:6px} .topbar .merek .lambang{height:28px} .topbar .wordmark{font-size:1.05rem;white-space:nowrap} .topbar .wordmark small{font-family:var(--font);font-weight:600;letter-spacing:.1em;font-size:.75rem;color:var(--aksen);margin-left:5px;vertical-align:middle} .topbar .toko{font-weight:500;color:var(--chrome-redup);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem} .topbar .jam{font-variant-numeric:tabular-nums;color:var(--chrome-redup);font-size:.85rem;white-space:nowrap} .pil{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 11px;font-size:.78rem;font-weight:600;white-space:nowrap} .pil::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} .pil-ok{background:color-mix(in srgb,var(--ok) 16%,var(--chrome));color:color-mix(in srgb,var(--ok) 72%,var(--chrome-tinta))} .pil-warn{background:color-mix(in srgb,var(--warn) 16%,var(--chrome));color:color-mix(in srgb,var(--warn) 72%,var(--chrome-tinta))} .pil-bad{background:color-mix(in srgb,var(--bad) 16%,var(--chrome));color:color-mix(in srgb,var(--bad) 72%,var(--chrome-tinta))} .pil-info{background:color-mix(in srgb,var(--chrome-tinta) 8%,var(--chrome));color:var(--chrome-redup)} .topbar .pil-ok,.topbar .pil-warn,.topbar .pil-bad{background:color-mix(in srgb,var(--chrome-tinta) 10%,var(--chrome));color:var(--chrome-tinta)} .topbar .pil-ok::before{background:color-mix(in srgb,var(--ok) 65%,var(--chrome-tinta))} .topbar .pil-warn::before{background:color-mix(in srgb,var(--warn) 65%,var(--chrome-tinta))} .topbar .pil-bad::before{background:color-mix(in srgb,var(--bad) 65%,var(--chrome-tinta))} .pil-gratis{background:var(--aksen);color:var(--aksen-tinta);font-family:var(--display);letter-spacing:.06em} .pil-gratis::before{display:none} .avatar{width:36px;height:36px;border-radius:50%;background:var(--aksen);color:var(--aksen-tinta);display:grid;place-items:center;font-weight:700;flex:none} .rel{box-shadow:inset -1px 0 0 var(--tepi-chrome);background-color:var(--chrome-2);background-image:var(--hiasan);background-size:var(--hiasan-ukuran);display:flex;flex-direction:column;align-items:stretch;padding:10px 6px;gap:2px;overflow:auto} .rel button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;border-radius:12px;color:var(--chrome-redup);font-size:.75rem;font-weight:500;line-height:1.1;text-align:center} .rel button .ik{width:24px;height:24px} .rel button.aktif{background:var(--chrome-3);color:var(--chrome-tinta);font-weight:600} .rel button{transition:background .12s ease,transform .1s var(--ease)} .rel button:active{transform:scale(.96)} /* menu direksi 12 butir harus muat di tablet 800 px tinggi tanpa memotong Perangkat & Keluar */ .rel.padat{padding:6px 5px;gap:0} .rel.padat button{padding:6px 2px;gap:3px;font-size:.75rem;border-radius:10px} .rel.padat button .ik{width:21px;height:21px} .rel .spasi{flex:1} .tabbar{display:none} .isi{overflow:auto;min-width:0;padding:20px 22px calc(20px + var(--aman-bawah));-webkit-overflow-scrolling:touch} .isi.tanpa-pad{padding:0} .kepala-halaman{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px} .kepala-halaman p{color:var(--slate);margin-top:4px;max-width:70ch} .halaman{animation:masuk .18s ease-out} @keyframes masuk{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* ---------- komponen ---------- */ .kartu{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--r);padding:16px} .kartu h3{margin-bottom:10px} /* satu lajur bersekat: celah 1 px memperlihatkan warna garis sebagai pemisah, berapa pun kolomnya */ .kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-bottom:14px;background:var(--garis);border:1px solid var(--garis);border-radius:var(--r);overflow:hidden} .kpi .kartu{padding:14px 16px;border:0;border-radius:0;background:var(--permukaan)} .kpi .k{font-size:.82rem;color:var(--slate);font-weight:600} .kpi .v{font-size:1.5rem;font-weight:700;margin-top:2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .kpi .v.bad{color:var(--bad)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid-2>*,.kpi>*{min-width:0} .tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px} table.tabel{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px} .tabel th{font-size:.8rem;color:var(--slate);text-align:left;padding:8px 8px 9px;border-bottom:1px solid var(--garis-2);font-weight:600;white-space:nowrap} .tabel td{padding:10px 8px;border-bottom:1px solid var(--garis);vertical-align:top} .tabel tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--permukaan-2) 55%,transparent)} .tabel td.num,.tabel th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .tabel tr.total td{font-weight:700;border-top:2px solid var(--garis-2);background:var(--permukaan-2)} .tabel tr.void td{color:var(--bad);text-decoration:line-through} .tabel tr.void td.alasan,.tabel tr.void td:last-child{text-decoration:none} .tag{display:inline-block;border-radius:6px;padding:3px 8px;font-size:.75rem;font-weight:600;white-space:nowrap} .tag-ok{background:var(--ok-lembut);color:var(--ok)} .tag-bad{background:var(--bad-lembut);color:var(--bad)} .tag-warn{background:var(--warn-lembut);color:var(--warn)} .tag-navy{background:#E8EDF5;color:var(--navy)} .baris-alat{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px} .baris-alat .input,.baris-alat select{width:auto;min-width:0} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{border:1.5px solid var(--garis-2);background:var(--permukaan);border-radius:999px;padding:9px 14px;font-weight:600;font-size:.88rem;white-space:nowrap;min-height:38px} .chip.aktif{background:var(--navy);color:#fff;border-color:var(--navy)} .chip{transition:transform .1s var(--ease),background .12s ease,border-color .12s ease} .chip:active{transform:scale(.97)} .segmen{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--permukaan-2);border:1px solid var(--garis);border-radius:var(--r-s);padding:3px;gap:3px} .segmen button{padding:10px 8px;border-radius:8px;font-weight:600;color:var(--slate);min-height:40px} /* pilihan aktif: tinta navy penuh + centang - kasir tahu pasti mana yang terpilih (Davis 20/09/2026) */ .segmen button{background:var(--permukaan);display:inline-flex;align-items:center;justify-content:center;gap:6px} .segmen button.aktif{background:var(--navy);color:#fff;box-shadow:none} .segmen button.aktif::before{content:'';width:.85em;height:.85em;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat} .batang{display:flex;align-items:flex-end;gap:3px;height:110px;padding:8px 0 20px;position:relative} .batang .b{flex:1;background:var(--navy);border-radius:4px 4px 0 0;min-height:2px;position:relative;opacity:.85} .batang .b span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:.75rem;color:var(--slate)} .kosong{padding:28px 16px;text-align:center;color:var(--slate)} .kosong .ik{width:40px;height:40px;color:var(--slate-2);margin:0 auto 8px} .peringatan{background:var(--warn-lembut);border:1px solid #F0DDB0;border-radius:var(--r-s);padding:12px 14px;color:#6B4E0B;margin-bottom:12px} .info{background:#EEF3FA;border:1px solid #D6E1F0;border-radius:var(--r-s);padding:12px 14px;color:var(--navy);margin-bottom:12px} .galat{background:var(--bad-lembut);border:1px solid #F3C1C1;border-radius:var(--r-s);padding:12px 14px;color:var(--bad);margin-bottom:12px} .daftar-menu{display:flex;flex-direction:column} .daftar-menu button{display:flex;align-items:center;gap:14px;padding:14px 6px;border-bottom:1px solid var(--garis);text-align:left;font-weight:500;font-size:1rem} .daftar-menu button .ik{color:var(--navy)} .daftar-menu button:last-child{border-bottom:0} .thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--permukaan-2);border:1px solid var(--garis);flex:none} .thumb-bukti{display:inline-block;line-height:0;border-radius:8px;overflow:hidden;border:1px solid var(--garis);background:var(--permukaan-2);transition:transform .1s var(--ease)} .thumb-bukti img{height:40px;width:auto;max-width:64px;object-fit:cover;display:block} .thumb-bukti:active{transform:scale(.96)} .foto-pop img{display:block;max-width:100%;max-height:70vh;max-height:70dvh;margin:0 auto;border-radius:12px;background:var(--permukaan-2);object-fit:contain} .thumb-ikon{width:48px;height:48px;border-radius:10px;background:var(--permukaan-2);display:grid;place-items:center;flex:none} .thumb-ikon svg{width:30px;height:30px} /* ---------- kasir (Moka: rak kategori + kartu produk + panel pesanan) ---------- */ .kasir{display:grid;grid-template-columns:1fr 360px;height:100%;min-height:0} .kasir-kiri{display:flex;flex-direction:column;min-width:0;min-height:0} .rak{display:flex;gap:8px;padding:12px 16px 4px;overflow-x:auto;flex:none;align-items:center} .rak,.gulir-x{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .gulir-x{overflow-x:auto;flex-wrap:nowrap;padding-right:28px} @media (max-width:1099px){.topbar .jam{display:none}} @media (max-width:899px){.topbar .pil-gratis{display:none}} .rak .cari{display:flex;align-items:center;gap:8px;background:var(--permukaan);border:1.5px solid var(--garis-2);border-radius:999px;padding:6px 12px;min-width:150px;flex:none} .rak .cari input{border:0;background:none;width:100%;font-size:max(1rem,16px);min-height:26px} /* < 16 px = iOS memperbesar layar kasir saat kotak cari diketuk (zoom tidak dikunci lagi sejak G1) */ .rak .cari .ik{width:18px;height:18px;color:var(--slate)} .grid-wadah{flex:1;overflow:auto;padding:10px 16px 100px;-webkit-overflow-scrolling:touch} .grid-produk{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .kartu-produk{background:var(--permukaan);border:1.5px solid var(--garis);border-radius:var(--r);overflow:hidden;text-align:left;position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;height:158px;transition:transform .1s var(--ease),box-shadow .12s ease,border-color .12s ease} .kartu-produk:active{transform:scale(.97)} /* ikon lini di cakram bulat (= Android); foto paket jadi pita 16:9 setinggi cakram supaya semua ubin sama tinggi */ .kartu-produk .gbr{width:56px;height:56px;border-radius:50%;background:var(--permukaan-2);display:grid;place-items:center;overflow:hidden;flex:none} .kartu-produk .gbr svg{width:34px;height:34px} .kartu-produk .gbr:has(img){width:100%;height:64px;border-radius:10px} .kartu-produk .gbr img{width:100%;height:100%;object-fit:cover} .kartu-produk .teks{padding:0;margin-top:auto;min-width:0;width:100%} /*