/* ==========================================================================
   WONGSO JOYO — TEMA BERSAMA (tema.css)  ·  TEMA TERANG, NYAMAN DI MATA
   --------------------------------------------------------------------------
   Prinsip:
     • Latar kertas hangat (bukan hitam, bukan putih menyilaukan).
     • DUA DUNIA tetap dibedakan dengan warna TENANG tetapi jelas:
         PASAR  (referensi/riset)  → biru tua tenang    --pas
         TOKO   (operasional/uang) → hijau tua tenang    --toko
     • Warna hanya MENANDAI, bukan menghias.
     • Nama merek memakai huruf serif agar terbaca elegan & mapan.
   ========================================================================== */

:root{
  /* kertas & kartu */
  --bg:#f7f6f3;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#fbfaf8;
  --line:#e5e2da;
  --line2:#d6d2c7;

  /* tulisan */
  --txt:#20242c;
  --sub:#6a7180;
  --sub2:#8d93a0;

  /* PASAR — biru tua tenang */
  --pas:#1c5a8a;
  --pas-soft:#4a86b4;
  --pas-bg:#eef3f8;
  --pas-line:#d3e0ec;
  --pas-txt:#14456b;

  /* TOKO — hijau tua tenang */
  --toko:#2a6b4a;
  --toko-soft:#4f9070;
  --toko-bg:#eef4f0;
  --toko-line:#d2e4d9;
  --toko-txt:#1e5238;

  /* AKUN / LANGGANAN — emas tua */
  --akun:#8a6420;
  --akun-bg:#faf3e6;
  --akun-line:#ecdcbe;
  --akun-txt:#6f5019;

  /* keadaan */
  --ok:#2a6b4a;  --ok-bg:#eaf4ee;  --ok-line:#cbe2d5;  --ok-txt:#1e5238;
  --warn:#8a6420; --warn-bg:#faf3e6; --warn-line:#ecdcbe; --warn-txt:#6f5019;
  --bad:#9c3230;  --bad-bg:#fbeeee;  --bad-line:#eccfcf;  --bad-txt:#7d2523;
  --info:#1c5a8a;

  --r:14px; --r2:10px;
  --sh:0 1px 2px #1b23330d, 0 6px 18px #1b23330a;
  --sh2:0 2px 6px #1b233314, 0 12px 30px #1b233310;
  --fs:15.5px;
  --serif:Georgia,"Times New Roman",Times,serif;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:var(--fs)/1.65 system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body[data-world="pasar"]{background:
  linear-gradient(180deg,#1c5a8a0a,transparent 320px),var(--bg)}
body[data-world="toko"]{background:
  linear-gradient(180deg,#2a6b4a0a,transparent 320px),var(--bg)}

.wrap{max-width:1080px;margin:0 auto;padding:18px 16px 44px}
.wrap.sempit{max-width:600px}

/* ── judul ─────────────────────────────────────────────────────── */
h1.judul{font-size:21px;line-height:1.3;margin:16px 0 6px;font-weight:700;
  letter-spacing:-.01em;color:#1a1f27}
h2.sek{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sub);margin:0 0 12px;font-weight:700}
.ket{color:var(--sub);font-size:14px;margin:0 0 16px;max-width:74ch}

/* ── kartu ─────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-bottom:16px;box-shadow:var(--sh);min-width:0}
.card.pas{border-color:var(--pas-line)}
.card.toko{border-color:var(--toko-line)}
.card.akun{border-color:var(--akun-line)}
.card h2{color:#3b4250}
.card.pas h2{color:var(--pas-txt)}
.card.toko h2{color:var(--toko-txt)}

/* ── pita penanda dunia data ───────────────────────────────────── */
.sumber{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:500;
  padding:11px 14px;border-radius:var(--r2);margin:0 0 16px;line-height:1.5;border:1px solid}
.sumber.pas{background:var(--pas-bg);border-color:var(--pas-line);color:var(--pas-txt)}
.sumber.toko{background:var(--toko-bg);border-color:var(--toko-line);color:var(--toko-txt)}
.sumber b{font-weight:700}
.sumber .ikon{flex:0 0 auto;margin-top:1px}

/* ── tombol ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 17px;border-radius:var(--r2);border:1px solid transparent;
  font:600 14.5px system-ui,sans-serif;cursor:pointer;color:#fff;background:var(--toko);
  box-shadow:0 1px 2px #1b23331a;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.06);box-shadow:var(--sh2)}
.btn:disabled{opacity:.55;cursor:default}
.btn.pas{background:var(--pas)}
.btn.akun{background:var(--akun)}
.btn.garis{background:#fff;border-color:var(--line2);color:#2b3444}
.btn.garis:hover{background:#f4f6f9;border-color:var(--sub2)}
.btn.bahaya{background:var(--bad)}
.btn.penuh{width:100%}
.btn.kecil{min-height:36px;padding:7px 12px;font-size:13px}

/* ── isian ─────────────────────────────────────────────────────── */
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);
  color:var(--txt);padding:12px;border-radius:var(--r2);font:15.5px system-ui,sans-serif;outline:none}
input::placeholder,textarea::placeholder{color:#a6abb6}
input:focus,select:focus,textarea:focus{border-color:var(--pas);box-shadow:0 0 0 3px #1c5a8a1f}
body[data-world="toko"] input:focus,body[data-world="toko"] select:focus{
  border-color:var(--toko);box-shadow:0 0 0 3px #2a6b4a1f}
label{display:block;font-size:12.5px;color:var(--sub);margin:10px 0 5px;font-weight:600}
.baris{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.baris>div{min-width:130px;flex:1}

/* ── tabel ─────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--sub);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;padding:10px 8px;border-bottom:1px solid var(--line2);font-weight:700;
  background:var(--card2)}
td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:#f8f9fb}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}

/* ── lencana ───────────────────────────────────────────────────── */
.pil{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;border:1px solid var(--line2);background:#f2f4f7;color:#4a5464}
.pil.pas{background:var(--pas-bg);border-color:var(--pas-line);color:var(--pas-txt)}
.pil.toko{background:var(--toko-bg);border-color:var(--toko-line);color:var(--toko-txt)}
.pil.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-txt)}
.pil.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-txt)}
.pil.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-txt)}

/* ── angka ringkas ─────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;box-shadow:var(--sh)}
.kpi .v{font-size:21px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;color:#1a1f27}
.kpi .l{color:var(--sub);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.kpi.pas{border-color:var(--pas-line)} .kpi.pas .v{color:var(--pas-txt)}
.kpi.toko{border-color:var(--toko-line)} .kpi.toko .v{color:var(--toko-txt)}

/* ── grafik ────────────────────────────────────────────────────── */
.graf{background:#fdfdfc;border:1px solid var(--line);border-radius:var(--r2);padding:14px}
.graf canvas{width:100%;height:190px;display:block}
.ket-graf{display:flex;gap:16px;flex-wrap:wrap;color:var(--sub);font-size:12.5px;margin-top:10px}
.ket-graf i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ── pesan ─────────────────────────────────────────────────────── */
.pesan{padding:12px 14px;border-radius:var(--r2);font-size:14px;margin-top:10px;display:none;
  line-height:1.5;border:1px solid}
.pesan.tampil{display:block}
.pesan.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-txt)}
.pesan.err{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-txt)}
.pesan.info{background:var(--pas-bg);border-color:var(--pas-line);color:var(--pas-txt)}

/* ── langkah panduan ───────────────────────────────────────────── */
.langkah{display:grid;gap:12px}
.langkah .l{display:flex;gap:12px;align-items:flex-start}
.langkah .n{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:#f2f4f7;
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#3b4250}
.langkah .t{font-size:14.5px}
.langkah .t small{display:block;color:var(--sub);font-size:13px}

/* ── kepala halaman bersama (#wjTop) ───────────────────────────── */
#wjTop{position:sticky;top:0;z-index:900;background:#f7f6f3ee;backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
#wjTop .dalam{max-width:1080px;margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:14px}
#wjTop .merek{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--txt);flex:0 0 auto}
#wjTop .merek b{font-family:var(--serif);font-size:16.5px;letter-spacing:.14em;font-weight:700;
  line-height:1.15;display:block;color:#16202e}
#wjTop .merek small{display:block;color:var(--sub2);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;margin-top:2px}
#wjTop .dunia{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#wjTop .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:6px 11px;border-radius:999px;border:1px solid var(--line2);color:#3b4453;background:#fff}
#wjTop .chip.pas{background:var(--pas-bg);border-color:var(--pas-line);color:var(--pas-txt)}
#wjTop .chip.toko{background:var(--toko-bg);border-color:var(--toko-line);color:var(--toko-txt)}
#wjTop .chip.akun{background:var(--akun-bg);border-color:var(--akun-line);color:var(--akun-txt)}
#wjTop .chip.tombol{cursor:pointer;user-select:none}
#wjTop .chip.tombol:hover{background:#f2f4f7}

.wjNav{max-width:1080px;margin:0 auto;padding:0 16px 12px;display:flex;gap:22px;
  flex-wrap:wrap;align-items:flex-start}
.wjGrup{display:flex;flex-direction:column;gap:7px;min-width:0}
.wjGrup .nama{font-size:10.5px;letter-spacing:.12em;font-weight:800;
  display:flex;align-items:center;gap:6px;color:var(--sub2)}
.wjGrup.pas .nama{color:var(--pas)} .wjGrup.toko .nama{color:var(--toko)} .wjGrup.akun .nama{color:var(--akun)}
.wjGrup.rumah .nama{color:var(--sub)}
.wjGrup.rumah a.aktif{background:#eef1f5;border-color:#c9d2de;color:#27313f}
.wjGrup .isi{display:flex;gap:8px;flex-wrap:wrap}
.wjGrup a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#2b3444;
  background:#fff;border:1px solid var(--line2);border-radius:var(--r2);
  padding:10px 13px;font-size:13.5px;font-weight:600;min-height:42px}
.wjGrup a:hover{background:#f4f6f9}
.wjGrup.pas a.aktif{background:var(--pas-bg);border-color:var(--pas);color:var(--pas-txt)}
.wjGrup.toko a.aktif{background:var(--toko-bg);border-color:var(--toko);color:var(--toko-txt)}
.wjGrup.akun a.aktif{background:var(--akun-bg);border-color:var(--akun);color:var(--akun-txt)}

.pemisah{display:flex;align-items:center;gap:14px;margin:24px 0 16px;color:var(--sub);
  font-size:12px;letter-spacing:.1em;font-weight:700;text-transform:uppercase}
.pemisah::before,.pemisah::after{content:"";height:1px;background:var(--line2);flex:1}
.pemisah.pas{color:var(--pas)} .pemisah.toko{color:var(--toko)}

.empty{color:var(--sub);text-align:center;padding:20px;font-size:14px}
.sembunyi{display:none!important}

/* ── sidebar beranda ───────────────────────────────────────────── */
.sidebar-nav{list-style:none;margin:0;padding:8px}
.sidebar-nav li{list-style:none}
.sidebar-nav li.grup{font-size:10.5px;letter-spacing:.12em;font-weight:800;
  text-transform:uppercase;padding:16px 10px 7px;border-top:1px solid var(--line);margin-top:10px}
.sidebar-nav li.grup:first-child{border-top:0;margin-top:0;padding-top:6px}
.sidebar-nav li.grup.pas{color:var(--pas)} .sidebar-nav li.grup.toko{color:var(--toko)}
.sidebar-nav .nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;
  border-radius:var(--r2);color:#2b3444;text-decoration:none;font-size:14px;font-weight:600;
  min-height:42px;border:1px solid transparent}
.sidebar-nav .nav-item:hover{background:#f2f4f7;border-color:var(--line)}
.sidebar-nav .nav-item.active{background:var(--pas-bg);border-color:var(--pas-line);color:var(--pas-txt)}
.sidebar-nav .nav-ikon{display:inline-flex;width:20px;justify-content:center;color:var(--sub)}
.sidebar-nav .nav-item.active .nav-ikon{color:var(--pas)}

/* ── tabel lebar menggulir ─────────────────────────────────────── */
.tabel-gulir{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel-gulir table{min-width:520px}
@media (max-width:760px){.tabel-gulir{border:1px solid var(--line);border-radius:var(--r2)}}

/* ── dua kolom & kotak grafik ──────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.grid2 > *{min-width:0}
@media (max-width:820px){.grid2{grid-template-columns:1fr}}
.chartbox{max-width:100%;overflow:hidden;background:transparent}
.chartbox canvas,.chartbox svg{max-width:100%!important;height:auto}
.card,.content{min-width:0}
.page-subtitle,.page-header h1{overflow-wrap:anywhere}

/* ── HP ────────────────────────────────────────────────────────── */
@media (max-width:760px){
  :root{--fs:16px}
  .wrap{padding:12px 12px 36px}
  #wjTop .dalam{padding:9px 12px;gap:10px}
  #wjTop .merek small{display:none}
  #wjTop .chip{font-size:11.5px;padding:5px 9px}
  .wjNav{gap:14px;overflow-x:auto;padding-bottom:12px;flex-wrap:nowrap}
  .wjGrup{flex:0 0 auto}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi .v{font-size:19px}
  table{font-size:13px}
  th,td{padding:9px 7px}
  .card{padding:14px}

  .main-layout{flex-direction:column;min-height:0}
  .sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line)}
  .sidebar-header{display:none}
  .sidebar-nav{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
  .sidebar-nav li{flex:1 1 auto}
  .sidebar-nav li.grup{flex:1 1 100%;padding:10px 4px 4px;border-top:0;margin-top:0}
  .sidebar-nav .nav-item{min-height:40px;padding:9px 10px;font-size:13.5px}
  .sidebar-footer{display:none}
  .content{width:100%;padding:12px}
  .nav-actions{flex-wrap:wrap;gap:6px}
  .nav-actions .btn, .nav-actions button{min-height:40px}
  .page-header h1{font-size:19px}
}

/* ── chip saldo token (model kuota) ───────────────────────────── */
.chip.tombol{text-decoration:none;cursor:pointer;background:var(--akun-bg);
  border-color:var(--akun);color:var(--akun-txt);font-weight:700}
.chip.tombol:hover{background:#f6ead2}
.chip.tombol.tokenHabis{background:#fdeeee;border-color:#e8b4b4;color:#9c3230}

/* ── bilah menu bawah untuk HP (ergonomis, tombol besar) ───────────── */
.wjBawah { display: none; }

@media (max-width: 760px) {
  .wjNav { display: none; }                  /* menu atas tidak perlu di HP */
  /* daftar menu samping: tersembunyi, dibuka lewat tombol 'Semua menu' */
  #wjMenuLain { display: flex; width: 100%; justify-content: center; margin: 10px 0 4px; }
  #sidebar { display: none; }
  body.menuLainOn #sidebar { display: block; }
  body.menuLainOn .wjBawah { display: none; }
  body { padding-bottom: 78px; }             /* ruang agar isi tidak tertutup */
  .wjBawah {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #ffffff; border-top: 1px solid var(--line2);
    box-shadow: 0 -3px 14px rgba(28, 63, 102, .10);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .wjBawah a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; text-decoration: none; min-height: 54px;
    color: #5b6472; font-weight: 700; border-radius: 12px; -webkit-tap-highlight-color: transparent;
  }
  .wjBawah a span { font-size: 11px; letter-spacing: .01em; }
  .wjBawah a.on { color: var(--pas); background: var(--pas-bg); }
  .wjBawah a:active { background: #eef1f5; }

  /* tombol utama jadi lebih besar & mudah ditekan */
  .btn { min-height: 50px; font-size: 15px; }
  .btn.besar { min-height: 58px; font-size: 16px; font-weight: 800; }
  input, select, textarea { min-height: 48px; font-size: 16px; }
  .scan { min-height: 58px; font-size: 20px; }
  h2 { font-size: 15.5px; }
}

@media (max-width: 760px) {
  #wjStatus { bottom: 88px !important; }     /* di atas bilah menu bawah */
}

@media (max-width: 760px) {
  .nav { display: none; }                    /* navigasi atas digantikan bilah bawah */
  .wrap { padding-left: 14px; padding-right: 14px; }
  h1.judul { font-size: 21px; margin: 10px 0 4px; }
  .ket { font-size: 13.5px; margin-bottom: 8px; }
  .ringkas { gap: 8px; }
  .ringkas .r { padding: 10px 8px; }
  .ringkas .v { font-size: 17px; }
}

/* HP: rapatkan lagi agar tombol PINDAI & KAMERA langsung terlihat */
@media (max-width: 760px) {
  .sumber { padding: 9px 11px; font-size: 12.5px; line-height: 1.45; }
  .sumber b { font-size: 12.5px; }
  #whoami { display: none; }
  h1.judul { margin: 8px 0 2px; }
  .ket { font-size: 13px; margin: 0 0 6px; }
  .card { padding: 12px; margin-bottom: 10px; }
  .card h2 { margin: 0 0 8px; }
}


/* kamera: tombol dinaikkan agar tidak beradu dengan bilah sistem HP */

/* kepala halaman: chip dalam SATU baris yang bisa digeser (tidak menumpuk) */
@media (max-width: 760px) {
  #wjTop .dunia { flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
                  -webkit-overflow-scrolling: touch; }
  #wjTop .dunia > * { flex: 0 0 auto; }
  #wjTop .merek { flex: 1 1 100%; }
}

/* ── dua mode pemindaian (masuk / keluar) ─────────────────────────── */
.modeBar { display: flex; gap: 8px; margin: 6px 0 8px; }
.modeBtn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 6px; border: 2px solid var(--line2, #dfe3e8); border-radius: 12px;
  background: #fff; color: #5b6472; font-weight: 800; font-size: 13.5px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.modeBtn small { font-weight: 600; font-size: 11px; opacity: .85; }
.modeBtn.on { border-color: #2f7d55; background: #eef6f1; color: #1f6b45; }
#modeKeluar.on { border-color: #b4762a; background: #fdf3e6; color: #8a4a1f; }
.modeTunjuk { font-size: 12.5px; line-height: 1.45; color: #3b4450; background: #f4f6f8;
  border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.btn.pilih { box-shadow: 0 0 0 3px rgba(28, 63, 102, .38); }

/* ── kotak bidik pada kamera (garis pemandu) ──────────────────────── */
.camBingkai { position: absolute; left: 8%; right: 8%; top: 36%; height: 26%;
  border-radius: 14px; z-index: 2; box-shadow: 0 0 0 2000px rgba(0, 0, 0, .5); }
.camSudut { position: absolute; width: 30px; height: 30px; border: 3px solid #f0c14b; }
.camSudut.a { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.camSudut.b { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.camSudut.c { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.camSudut.d { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.camGaris { position: absolute; left: 8px; right: 8px; height: 2px; background: #f0c14b;
  box-shadow: 0 0 12px 3px rgba(240, 193, 75, .6);
  animation: camGarisGerak 2.4s ease-in-out infinite; }
@keyframes camGarisGerak { 0%, 100% { top: 14%; } 50% { top: 86%; } }
.camHint { position: relative; z-index: 3; }
.camInfo { z-index: 3; }


/* ── kamera: pratinjau PENUH + kotak bidik BUJUR SANGKAR di tengah ──── */
#camWrap video { position: absolute; left: -4px; top: -4px; width: 2px; height: 2px;
                 opacity: .01; pointer-events: none; }
.camTampil { position: absolute; inset: 0; background: #000; z-index: 2; }
#camKanvas { width: 100%; height: 100%; display: block; }

/* kotak bujur sangkar (sisi sama) tepat di tengah layar */
.camBingkai {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(72vw, 52vh); height: min(72vw, 52vh);
  border-radius: 14px; z-index: 3;
  box-shadow: 0 0 0 3000px rgba(0, 0, 0, .45);
}
.camSudut { position: absolute; width: 30px; height: 30px; border: 3px solid #f0c14b; }
.camSudut.a { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.camSudut.b { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.camSudut.c { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.camSudut.d { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.camGaris { position: absolute; left: 10px; right: 10px; height: 2px; background: #f0c14b;
  box-shadow: 0 0 12px 3px rgba(240, 193, 75, .6);
  animation: camGarisGerak 2.4s ease-in-out infinite; }
@keyframes camGarisGerak { 0%, 100% { top: 10%; } 50% { top: 90%; } }
.camHint { position: absolute; top: 12%; left: 6%; right: 6%; text-align: center; z-index: 4; }
.camInfo { z-index: 4; }

/* ── bilah kamera: LAMBANG saja (tanpa tulisan) ─────────────────────── */
.camBar { display: flex; gap: 12px; justify-content: center; align-items: center;
          position: absolute; left: 0; right: 0; bottom: 34px; z-index: 5; }
.camBar button {
  width: 58px; height: 58px; min-width: 0; border-radius: 50%; padding: 0;
  border: 2px solid rgba(255, 255, 255, .45); background: rgba(18, 26, 36, .74);
  color: #f0c14b; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.camBar button svg { width: 26px; height: 26px; }
.camBar button:active { background: rgba(240, 193, 75, .3); }
.camBar button:disabled { opacity: .45; }
#camClose { color: #ff9d9d; border-color: rgba(255, 130, 130, .5); }

/* ── kartu barang: total & penanda mode ────────────────────────────── */
.totalBaris { margin: 10px 0 4px; font-size: 15px; color: #3b4450; }
.totalBaris b { font-size: 19px; color: #1f6b45; }
.pill.ok  { background: #e7f4ec; color: #1e5238; border: 1px solid #b9dfc9;
            padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pill.bad { background: #fdeee2; color: #8a4a1f; border: 1px solid #f0d3b4;
            padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
@media (max-width: 760px) {
  .camBar { bottom: 26px; gap: 10px; }
  .camBar button { width: 54px; height: 54px; }
}

/* tombol kamera yang sedang bekerja: berdenyut halus, lambang tetap ada */
.camBar button.sibuk { opacity: .55; }
.camBar button.sibuk svg { animation: camDenyut .9s ease-in-out infinite; }
@keyframes camDenyut { 0%,100% { transform: scale(1); } 50% { transform: scale(.82); } }