/* Aplikasi Kasir Minuman — gaya tampilan.
   Nuansa tosca, kartu membulat, huruf Plus Jakarta Sans. */

:root{
  /* Nuansa tosca, mengikuti contoh tampilan kasir yang dikirim pemilik. */
  --aksen:#17a398; --aksen-muda:#d6f3ef; --aksen-tua:#0f8276; --aksen-terang:#2cc0b3;
  --teks:#0f172a; --redup:#64748b; --samar:#94a3b8;
  --garis:#e6ebf0; --latar:#f4f6f8; --putih:#fff; --latar-2:#f8fafc;
  --merah:#e11d48; --merah-muda:#ffe4e6;
  --kuning:#f59e0b; --kuning-muda:#fef3c7;
  --biru:#2563eb; --biru-muda:#dbeafe;
  --ungu:#7c3aed; --ungu-muda:#ede9fe;
  --bayang:0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06);
  --bulat:16px;
  --sisi-lebar:234px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--latar); color:var(--teks);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14.5px; line-height:1.5; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
.sembunyi{display:none !important}
.redup{color:var(--redup)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{letter-spacing:-.01em}

/* ---------- tombol ---------- */
.tombol{
  border:1px solid var(--garis); background:var(--putih); border-radius:11px;
  padding:9px 15px; cursor:pointer; font-weight:600; white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.tombol:hover{background:var(--latar-2);border-color:#cbd5e1}
.tombol.utama{background:var(--aksen);border-color:var(--aksen);color:#fff;box-shadow:0 1px 2px rgba(23,163,152,.25)}
.tombol.utama:hover{background:var(--aksen-tua);border-color:var(--aksen-tua)}
.tombol.bahaya{background:var(--merah);border-color:var(--merah);color:#fff}
.tombol.halus{padding:7px 12px;font-size:13px}
.tombol.lebar{width:100%;padding:12px;font-size:15px;margin-top:8px}
.tombol:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.ikon-tombol{
  border:1px solid var(--garis);background:var(--putih);border-radius:11px;
  width:38px;height:38px;cursor:pointer;font-size:17px;line-height:1;display:none;
}

/* ---------- layar masuk ---------- */
.masuk{min-height:100%;display:grid;place-items:center;padding:24px;grid-template-rows:1fr auto;
  background:linear-gradient(160deg,#e9fbf8 0%,var(--latar) 50%)}
.masuk-kotak{
  background:var(--putih);border:1px solid var(--garis);border-radius:20px;
  padding:34px;width:100%;max-width:410px;box-shadow:var(--bayang);align-self:center;
}
.masuk-kotak h1{font-size:22px;margin:16px 0 4px}
.masuk-kotak p{margin:0 0 20px;font-size:14px}
.masuk-kotak label{display:block;margin-bottom:13px;font-size:12.5px;font-weight:600;color:var(--redup)}
.masuk-kotak input{
  width:100%;margin-top:5px;padding:11px 13px;border:1px solid var(--garis);
  border-radius:11px;background:#fff;font-weight:500;color:var(--teks);
}
.masuk-kotak input:focus,.isian input:focus,.isian select:focus,.cari-menu:focus{
  outline:3px solid var(--aksen-muda);border-color:var(--aksen);
}
.kaki-masuk{padding:16px;font-size:12px;color:var(--samar)}
.merek{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--aksen-tua)}
.merek-ikon{
  width:38px;height:38px;border-radius:12px;background:var(--aksen-muda);
  display:grid;place-items:center;font-size:19px;flex:none;
}
/* Logo 3D layar masuk (3d/logo3d.js). Tulisan biasa disembunyikan hanya dari mata,
   tetap terbaca pembaca layar. */
.logo3d{width:100%;height:170px;margin:-6px 0 6px}
.logo3d canvas{display:block;width:100%!important;height:100%!important}
.masuk.pratinjau{position:fixed;inset:0;z-index:1000;background:var(--latar);overflow:auto}
.tutup-pratinjau{position:fixed;top:14px;right:14px;z-index:1001}
.sr-saja{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.galat{background:var(--merah-muda);color:#9f1239;padding:11px 13px;border-radius:11px;font-size:13px;margin-top:14px}

/* ---------- bilah DRAFT ---------- */
.bilah{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 18px;font-size:13px;font-weight:600;
}
.bilah.draft{background:var(--kuning-muda);color:#92400e}
.bilah.menunggu{background:var(--biru-muda);color:#1e40af}
.bilah .isi{flex:1;min-width:200px}
.bilah .isi small{display:block;font-weight:500;opacity:.8}
.bilah .tombol{padding:6px 13px;font-size:12.5px;flex:0 0 auto}

/* ---------- rangka: menu samping + isi ---------- */
.rangka{display:flex;min-height:100vh;align-items:stretch}

.sisi{
  width:var(--sisi-lebar);flex:none;background:var(--putih);
  border-right:1px solid var(--garis);
  display:flex;flex-direction:column;gap:6px;padding:18px 14px;
  position:sticky;top:0;height:100vh;z-index:30;
}
.sisi-merek{
  display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;
  color:var(--aksen-tua);padding:4px 6px 14px;
}
.sisi-menu{display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1}
.sisi-menu button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:0;background:transparent;padding:10px 12px;border-radius:11px;
  cursor:pointer;font-weight:600;color:var(--redup);font-size:14px;
}
.sisi-menu button svg{width:19px;height:19px;flex:none;stroke-width:1.9}
.sisi-menu button:hover{background:var(--latar);color:var(--teks)}
.sisi-menu button.aktif{background:var(--aksen);color:#fff;box-shadow:0 2px 8px rgba(23,163,152,.32)}

.sisi-kaki{border-top:1px solid var(--garis);padding-top:12px;margin-top:6px}
.kartu-akun{display:flex;align-items:center;gap:10px;padding:4px 4px 10px}
.avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--aksen-muda);color:var(--aksen-tua);
  display:grid;place-items:center;font-weight:800;font-size:14px;
}
.kartu-akun-teks{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.kartu-akun-teks b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kartu-akun-teks small{font-size:11.5px;color:var(--redup)}

.kolom-utama{flex:1;min-width:0;display:flex;flex-direction:column}
.atas{display:flex;align-items:center;gap:14px;padding:16px 24px 6px}
.salam{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.35}
.salam b{font-size:19px;letter-spacing:-.015em}
.salam small{color:var(--redup);font-size:13px}
.lencana-outlet{
  background:var(--putih);border:1px solid var(--garis);border-radius:999px;
  padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--redup);white-space:nowrap;
}
main{padding:14px 24px 32px;max-width:1500px;width:100%}

.tirai-sisi{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:25}

/* ---------- kartu & tabel ---------- */
.kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--bulat);
  padding:20px;margin-bottom:18px;box-shadow:var(--bayang);
}
.kartu h2{margin:0 0 4px;font-size:16.5px;font-weight:700}
.kartu .ket{margin:0 0 18px;font-size:13px;color:var(--redup)}
.baris{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.isian{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--redup)}
.isian input,.isian select{
  padding:10px 12px;border:1px solid var(--garis);border-radius:11px;
  background:#fff;font-weight:500;color:var(--teks);min-width:150px;
}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--garis)}
th{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--samar);
  background:var(--latar-2);font-weight:700;position:sticky;top:0;z-index:4;
  box-shadow:inset 0 -1px 0 var(--garis);
}
tbody tr:last-child td{border-bottom:0}
td.angka,th.angka{text-align:right;font-variant-numeric:tabular-nums}
.gulir{overflow:visible}
.label{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}
.label.lunas{background:var(--aksen-muda);color:var(--aksen-tua)}
.label.batal{background:var(--merah-muda);color:#9f1239}
.label.peran-super_admin{background:var(--ungu-muda);color:#5b21b6}
.label.peran-pemilik{background:var(--biru-muda);color:#1e40af}
.label.peran-kepala{background:var(--kuning-muda);color:#92400e}
.label.peran-kasir{background:var(--aksen-muda);color:var(--aksen-tua)}
.kosong{padding:40px;text-align:center;color:var(--samar);font-size:14px}

/* kotak bergulir sendiri untuk daftar panjang */
.kotak-gulir{
  max-height:62vh;overflow:auto;
  border:1px solid var(--garis);border-radius:13px;background:var(--putih);
}
.kotak-gulir th{top:0}
.baris-grup td{
  background:var(--aksen-muda);color:var(--aksen-tua);
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  padding:7px 12px;border-bottom:1px solid #a7e8e0;white-space:nowrap;
}
.baris-grup .jumlah-grup{font-weight:600;text-transform:none;letter-spacing:0;opacity:.75;margin-left:8px}
.tabel-menu th,.tabel-menu td{padding:9px 12px;vertical-align:middle}
.tabel-menu .k-foto{width:62px}
.tabel-menu .k-harga{width:112px;font-weight:700}
.tabel-menu .k-pilihan{width:24%}
.tabel-menu .k-keadaan{width:100px}
.k-aksi{width:1%;white-space:nowrap;text-align:right}
.tabel-menu tbody tr:not(.baris-grup):hover{background:var(--latar-2)}
.jempol{
  width:46px;height:46px;border-radius:11px;object-fit:cover;display:block;
  background:var(--aksen-muda);border:1px solid var(--garis);
}
.jempol.kosong-foto{display:grid;place-items:center;font-size:19px;opacity:.5}
.cip{
  display:inline-block;background:var(--latar);border:1px solid var(--garis);
  border-radius:8px;padding:3px 9px;font-size:12px;margin:2px 2px 0 0;white-space:nowrap;
}
.pratayang{
  width:100%;aspect-ratio:4/3;border:1px solid var(--garis);border-radius:13px;
  background:var(--latar);display:grid;place-items:center;overflow:hidden;margin-bottom:12px;
}
.pratayang img{width:100%;height:100%;object-fit:contain;display:block}
/* kotak tempel / seret foto */
.zona-foto{
  border:2px dashed var(--garis);border-radius:13px;padding:14px;margin-bottom:10px;
  text-align:center;font-size:14px;line-height:1.5;background:var(--latar-2);
  transition:border-color .15s, background .15s;
}
.zona-foto.seret{border-color:var(--aksen);background:var(--aksen-muda)}
.pilih-foto{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pilih-foto .tombol{flex:1 1 160px;text-align:center;cursor:pointer}
/* Kirim ke Claude */
.antre-kiriman{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.gbr-antre{position:relative;width:96px;height:96px;border:1px solid var(--garis);border-radius:10px;overflow:hidden;background:var(--latar)}
.gbr-antre img{width:100%;height:100%;object-fit:cover;display:block}
.gbr-antre .tombol{position:absolute;top:4px;right:4px;padding:1px 7px;font-size:12px}
.baris-kiriman{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--garis)}
.baris-kiriman img{width:72px;height:72px;object-fit:cover;border-radius:8px;background:var(--latar);cursor:zoom-in;flex:0 0 auto}
.baris-kiriman .isi{flex:1;min-width:0;font-size:14px;white-space:pre-wrap;word-break:break-word}

/* ---------- layar kasir ---------- */
.kasir{display:grid;grid-template-columns:1fr 390px;gap:18px;align-items:start}
.cari-menu{
  width:100%;padding:12px 16px;border:1px solid var(--garis);border-radius:13px;
  background:var(--putih);margin-bottom:14px;font-size:14.5px;box-shadow:var(--bayang);
}
.kelompok-kategori{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.kelompok-kategori button{
  border:1px solid var(--garis);background:var(--putih);padding:8px 16px;
  border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;color:var(--redup);
}
.kelompok-kategori button:hover{border-color:var(--aksen)}
.kelompok-kategori button.aktif{background:var(--aksen);border-color:var(--aksen);color:#fff}

.petak{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.menu-kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--bulat);
  padding:0;cursor:pointer;text-align:left;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:var(--bayang);position:relative;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.menu-kartu:hover{border-color:var(--aksen);box-shadow:0 6px 18px rgba(23,163,152,.18);transform:translateY(-2px)}
.menu-kartu:active{transform:translateY(0)}
.menu-foto{display:block;width:100%;aspect-ratio:1/1;background:var(--aksen-muda);overflow:hidden;position:relative}
.menu-foto img{width:100%;height:100%;object-fit:cover;display:block}
.menu-foto-kosong{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:27px;font-weight:800;letter-spacing:1px;color:var(--aksen);opacity:.4;
}
.menu-isi{display:flex;flex-direction:column;gap:3px;padding:11px 13px 13px;flex:1;position:relative}
.menu-kartu b{font-size:13.5px;line-height:1.35}
.menu-kartu .harga{color:var(--aksen-tua);font-weight:800;font-size:14.5px;margin-top:auto;padding-top:4px}
.menu-kartu .tanda{font-size:11px;color:var(--samar)}
.menu-tambah{
  position:absolute;right:11px;top:-16px;
  width:32px;height:32px;border-radius:50%;background:var(--aksen);color:#fff;
  display:grid;place-items:center;font-size:18px;font-weight:700;line-height:1;
  box-shadow:0 4px 12px rgba(23,163,152,.45);pointer-events:none;
}

/* ---------- keranjang ---------- */
.keranjang{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--bulat);
  padding:18px;position:sticky;top:16px;display:flex;flex-direction:column;
  max-height:calc(100vh - 32px);box-shadow:var(--bayang);
}
.keranjang h2{margin:0 0 14px;font-size:16.5px;display:flex;justify-content:space-between;align-items:center}
.isi-keranjang{overflow-y:auto;flex:1;min-height:70px;margin:-4px -4px 12px;padding:4px}
.item{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--garis)}
.item:last-child{border-bottom:0}
.item-foto{
  width:42px;height:42px;border-radius:10px;flex:none;object-fit:cover;
  background:var(--aksen-muda);border:1px solid var(--garis);
  display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--aksen);
}
.item .nama{flex:1;min-width:0;font-size:13.5px;line-height:1.35;font-weight:600}
.item .nama small{display:block;color:var(--redup);font-size:11px;font-weight:500}
.jumlah{display:flex;align-items:center;gap:4px;background:var(--latar);border-radius:9px;padding:2px}
.jumlah button{
  width:25px;height:25px;border-radius:7px;border:0;background:var(--putih);
  cursor:pointer;font-weight:700;line-height:1;color:var(--aksen-tua);
  box-shadow:0 1px 2px rgba(15,23,42,.1);
}
.jumlah button:hover{background:var(--aksen);color:#fff}
.jumlah span{min-width:20px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.item .nilai{min-width:76px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:13.5px}
.item .buang{
  border:0;background:transparent;color:var(--samar);cursor:pointer;
  font-size:15px;padding:2px;line-height:1;
}
.item .buang:hover{color:var(--merah)}

.hitung{border-top:1px solid var(--garis);padding-top:14px;font-size:13.5px}
.hitung .rincian div{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:var(--redup)}
.hitung .total{display:flex;justify-content:space-between;align-items:center}
.hitung div b{color:var(--teks)}
.hitung .total{
  font-size:15px;font-weight:700;color:var(--teks);
  border-top:1px dashed var(--garis);padding-top:12px;margin-top:4px;
}
.hitung .total span:last-child{font-size:23px;font-weight:800;color:var(--aksen-tua)}
.bayar-pilih{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0 10px}
.bayar-pilih button{
  border:1px solid var(--garis);background:var(--putih);border-radius:10px;
  padding:9px 4px;cursor:pointer;font-size:11.5px;font-weight:700;color:var(--redup);
}
.bayar-pilih button.aktif{background:var(--aksen);border-color:var(--aksen);color:#fff}
.uang-cepat{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}
.uang-cepat button{
  border:1px solid var(--garis);background:var(--putih);border-radius:9px;
  padding:6px 11px;cursor:pointer;font-size:12px;font-weight:600;color:var(--redup);
}
.uang-cepat button:hover{border-color:var(--aksen);color:var(--aksen-tua)}
.kembalian{
  background:var(--aksen-muda);color:var(--aksen-tua);padding:11px 14px;border-radius:11px;
  font-weight:700;display:flex;justify-content:space-between;margin-bottom:10px;
}
.kembalian.kurang{background:var(--merah-muda);color:#9f1239}

/* ---------- kartu angka ---------- */
.angka-petak{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.angka-kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--bulat);
  padding:18px;box-shadow:var(--bayang);
}
.angka-kartu .judul{font-size:12px;color:var(--redup);font-weight:600;margin-bottom:7px}
.angka-kartu .nilai{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- jendela ---------- */
.tirai{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;z-index:50;padding:18px}
.jendela{
  background:var(--putih);border-radius:20px;padding:24px;width:100%;max-width:460px;
  max-height:88vh;overflow-y:auto;box-shadow:0 20px 50px rgba(15,23,42,.28);
}
.jendela h3{margin:0 0 16px;font-size:17.5px}
.jendela .aksi{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.grup-varian{margin-bottom:16px}
.grup-varian .judul{font-size:11.5px;font-weight:700;color:var(--samar);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.pilihan{display:flex;gap:8px;flex-wrap:wrap}
.pilihan button{
  border:1px solid var(--garis);background:#fff;border-radius:11px;
  padding:9px 15px;cursor:pointer;font-size:13px;font-weight:600;color:var(--redup);
}
.pilihan button.aktif{background:var(--aksen-muda);border-color:var(--aksen);color:var(--aksen-tua)}

/* ---------- centang akses outlet ---------- */
.centang-outlet{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;
  border:1px solid var(--garis);border-radius:12px;padding:11px;background:var(--putih);
}
.centang{
  display:flex;align-items:center;gap:8px;font-weight:600;color:var(--teks);flex:0 0 auto;
  background:var(--latar);border:1px solid var(--garis);border-radius:10px;
  padding:8px 13px;font-size:13px;cursor:pointer;
}
.centang:hover{border-color:var(--aksen)}
.isian input[type=checkbox],.centang input[type=checkbox],.masuk-kotak input[type=checkbox]{
  min-width:0;width:17px;height:17px;padding:0;border:0;margin:0;
  accent-color:var(--aksen);cursor:pointer;flex:none;
}

/* ---------- pesan sekilas & naik ke atas ---------- */
.tumpuk-pesan{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:90}
.sekilas{
  background:#0f172a;color:#fff;padding:12px 17px;border-radius:12px;font-size:13.5px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);max-width:340px;font-weight:500;
}
.sekilas.ok{background:var(--aksen-tua)}
.sekilas.salah{background:var(--merah)}
.naik-atas{
  position:fixed;right:18px;bottom:88px;z-index:80;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--garis);
  background:var(--putih);color:var(--aksen-tua);font-size:19px;font-weight:800;
  cursor:pointer;box-shadow:var(--bayang);
}
.naik-atas:hover{background:var(--aksen);color:#fff;border-color:var(--aksen)}

/* ---------- struk ---------- */
.struk-area{display:none}
.struk{width:72mm;font-family:"Courier New",monospace;font-size:12px;color:#000;line-height:1.45}
.struk .tengah{text-align:center}
.struk .nama-kedai{font-size:15px;font-weight:700}
.struk hr{border:0;border-top:1px dashed #000;margin:7px 0}
.struk table{width:100%;font-size:12px;border:0}
.struk td{border:0;padding:1px 0;font-size:12px}
.struk .kanan{text-align:right}
.struk .tebal{font-weight:700}

@media print{
  body>*{display:none !important}
  .struk-area{display:block !important}
  @page{margin:3mm}
}

/* ---------- layar sedang & kecil ---------- */
@media(max-width:1100px){
  .kasir{grid-template-columns:1fr 340px}
}
@media(max-width:900px){
  .ikon-tombol{display:grid;place-items:center}
  .sisi{
    position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 40px rgba(15,23,42,.2);
  }
  .sisi.buka{transform:translateX(0)}
  .kasir{grid-template-columns:1fr}
  .keranjang{position:static;max-height:none}
  main{padding:12px 14px 28px}
  .atas{padding:12px 14px 4px}
  .salam b{font-size:17px}
  .lencana-outlet{display:none}
  .kotak-gulir{max-height:none}
  .gulir{overflow-x:auto}
  th{position:static}
  .bayar-pilih{grid-template-columns:repeat(2,1fr)}
}

/* ---------- penanda isian wajib & salah ---------- */
.wajib{
  display:inline-block;background:var(--merah-muda);color:#9f1239;
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 6px;border-radius:5px;margin-left:5px;vertical-align:middle;
}
.isian input.isian-salah,.isian select.isian-salah{
  border-color:var(--merah);background:#fff7f6;
  box-shadow:0 0 0 3px rgba(192,57,43,.12);
}

/* baris menu yang baru ditambah dikedipkan sebentar */
@keyframes kedip-sorot{
  0%,100%{background:transparent}
  18%,62%{background:var(--aksen-muda)}
}
tr.sorot td{animation:kedip-sorot 2.6s ease}

/* ---------- pemilih outlet di bilah atas ---------- */
.pilih-outlet-atas{
  display:flex;align-items:center;gap:8px;
  background:var(--putih);border:1px solid var(--garis);border-radius:999px;
  padding:5px 7px 5px 15px;font-size:12.5px;font-weight:600;color:var(--redup);
}
.pilih-outlet-atas select{
  border:0;background:var(--aksen-muda);color:var(--aksen-tua);border-radius:999px;
  padding:6px 12px;font-weight:700;font-size:12.5px;cursor:pointer;max-width:210px;
}
.pilih-outlet-atas select:focus{outline:2px solid var(--aksen)}

/* ---------- judul kelompok di menu samping ---------- */
.sisi-grup{
  font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--samar);padding:14px 12px 5px;
}
.sisi-menu > .sisi-grup:first-child{padding-top:2px}

/* kartu penunjuk arah di halaman Akun Saya */
.kartu.penunjuk{border-style:dashed;border-color:#cbd5e1;background:var(--latar-2)}

/* ---------- menu samping berwarna penuh (mengikuti contoh) ---------- */
.sisi{background:var(--aksen);border-right:0}
.sisi-merek{color:#fff}
.sisi-merek .merek-ikon{background:rgba(255,255,255,.22)}
.sisi-grup{color:rgba(255,255,255,.6)}
.sisi-menu button{color:rgba(255,255,255,.85)}
.sisi-menu button:hover{background:rgba(255,255,255,.14);color:#fff}
.sisi-menu button.aktif{background:#fff;color:var(--aksen-tua);box-shadow:0 2px 10px rgba(15,23,42,.14)}
.sisi-kaki{border-top-color:rgba(255,255,255,.22)}
.kartu-akun-teks b{color:#fff}
.kartu-akun-teks small{color:rgba(255,255,255,.72)}
.avatar{background:rgba(255,255,255,.22);color:#fff}
.sisi-kaki .tombol{
  background:transparent;border-color:rgba(255,255,255,.4);color:#fff;
}
.sisi-kaki .tombol:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}

/* ---------- tombol hapus yang tidak mencolok ---------- */
.tombol.bahaya-halus{color:var(--merah);border-color:#f3cdd6}
.tombol.bahaya-halus:hover{background:var(--merah);border-color:var(--merah);color:#fff}

/* ---------- tombol ⋯ dan daftar pilihannya ---------- */
.aksi-titik{
  width:34px;height:30px;border-radius:9px;border:1px solid var(--garis);
  background:var(--putih);color:var(--redup);cursor:pointer;
  font-size:17px;line-height:1;letter-spacing:1px;padding:0;
}
.aksi-titik:hover{border-color:var(--aksen);color:var(--aksen-tua);background:var(--aksen-muda)}
.menu-aksi{
  position:fixed;z-index:95;min-width:196px;padding:6px;
  background:var(--putih);border:1px solid var(--garis);border-radius:13px;
  box-shadow:0 12px 32px rgba(15,23,42,.16);
  display:flex;flex-direction:column;gap:1px;
}
.menu-aksi button{
  text-align:left;border:0;background:transparent;border-radius:9px;
  padding:9px 12px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--teks);
  white-space:nowrap;
}
.menu-aksi button:hover{background:var(--latar)}
.menu-aksi button.bahaya{color:var(--merah)}
.menu-aksi button.bahaya:hover{background:var(--merah-muda)}

/* ---------- panel Pesanan dirapikan ---------- */
.hitung .rincian{display:block;margin-bottom:4px}
.isi-diskon{
  width:120px;text-align:right;padding:7px 11px;font-weight:600;
  border:1px solid var(--garis);border-radius:9px;background:var(--putih);
  font-variant-numeric:tabular-nums;
}
.isi-diskon:focus{outline:3px solid var(--aksen-muda);border-color:var(--aksen)}
.label-kecil{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--samar);margin:16px 0 8px;
}
.isi-uang{
  width:100%;padding:13px 15px;border:1px solid var(--garis);border-radius:12px;
  text-align:right;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--putih);
}
.isi-uang:focus{outline:3px solid var(--aksen-muda);border-color:var(--aksen)}
/* Enam tombol uang cepat dibuat 3 kolom supaya rapi dua baris. */
.uang-cepat{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}
.uang-cepat button{padding:8px 4px;text-align:center}

/* ---------- penilaian pembeli ---------- */
.bintang-baris{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--garis);border-radius:13px;
  background:var(--latar-2);margin-bottom:10px;
}
.bintang-judul{font-weight:700;font-size:14px}
.bintang-isi{display:flex;gap:3px}
.bintang-isi button{
  border:0;background:transparent;cursor:pointer;line-height:1;padding:2px;
  font-size:27px;color:#dfe5ec;transition:color .12s,transform .12s;
}
.bintang-isi button:hover{transform:scale(1.12)}
.bintang-isi button.terisi{color:#f6b01e}

/* ---------- cara bayar jadi satu kelompok tombol ---------- */
/* Empat pilihan dibungkus satu kotak abu, yang aktif jadi blok tosca.
   Lebih rapi daripada empat tombol terpisah yang lebarnya tidak sama. */
.bayar-pilih{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  background:var(--latar-2);border:1px solid var(--garis);
  border-radius:13px;padding:4px;margin:0 0 4px;
}
.bayar-pilih button{
  border:0;background:transparent;border-radius:10px;
  padding:10px 2px;font-size:11px;font-weight:800;letter-spacing:.2px;
  color:var(--redup);cursor:pointer;transition:background .12s,color .12s;
}
.bayar-pilih button:hover{background:var(--putih);color:var(--teks)}
.bayar-pilih button.aktif{
  background:var(--aksen);color:#fff;box-shadow:0 2px 6px rgba(23,163,152,.35);
}

/* tombol uang cepat disamakan bentuknya: 3 kolom, dua baris */
.uang-cepat{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 14px}
.uang-cepat button{
  padding:9px 4px;text-align:center;font-size:12px;border-radius:10px;
  border:1px solid var(--garis);background:var(--putih);color:var(--redup);font-weight:600;
}
.uang-cepat button:hover{border-color:var(--aksen);color:var(--aksen-tua);background:var(--aksen-muda)}

@media(max-width:900px){
  .bayar-pilih{grid-template-columns:repeat(2,1fr)}
  .uang-cepat{grid-template-columns:repeat(3,1fr)}
}