/* =========================================================
   FORTRESS — Tema "Refined Dark"
   Hitam & emas. Garis setipis rambut, angka sejajar,
   emas dipakai hemat hanya untuk penanda penting.
========================================================= */

:root{
  /* Emas brand */
  --gold:#E8B93C;
  --gold-lite:#F8DC85;
  --gold-deep:#B8891F;
  --gold-soft:rgba(232,185,60,.10);
  --gold-line:rgba(232,185,60,.26);
  --grad-gold:linear-gradient(135deg,#F8DC85 0%,#E8B93C 45%,#C0921F 100%);

  /* Hitam brand */
  --ink:#0C0C0D;
  --bg:#111113;
  --surface:#1A1A1D;
  --surface-2:#232327;

  /* Garis: rambut untuk pemisah, tegas untuk bingkai */
  --hair:rgba(255,255,255,.07);
  --line:#2E2E34;

  /* Teks */
  --text:#F4F2ED;
  --muted:#9B9BA3;
  --faint:#6B6B73;

  /* Status */
  --green:#3DD68C;   --green-soft:rgba(61,214,140,.13);
  --amber:#FBBF24;   --amber-soft:rgba(251,191,36,.13);
  --red:#F87171;     --red-soft:rgba(248,113,113,.13);

  --r:14px;
  --r-sm:11px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 8px rgba(0,0,0,.45);
  --num:"Inter",system-ui;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.spacer{height:80px}
.screen{display:none;min-height:100vh}
.screen.active{display:block}

/* Semua angka waktu & jumlah memakai lebar digit yang sama */
.tabular,.hero-date strong,.stat strong,.kpi strong,.qty-val,
.produk-harga,.total-row strong,.pg-info{font-variant-numeric:tabular-nums}

/* =========================================================
   LOGIN
========================================================= */
.login-wrap{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:26px 22px;
  background:
    radial-gradient(760px 460px at 50% -14%, rgba(232,185,60,.13), transparent 62%),
    var(--ink);
}
.login-card{width:100%;max-width:390px}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:30px}
.logo-lg{width:190px;max-width:70%;height:auto;display:block;margin-bottom:16px}
.logo-teks{
  display:none;font-weight:800;letter-spacing:1px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.logo-teks.lg{font-size:32px;margin-bottom:12px}
.logo-teks.sm{font-size:15px;letter-spacing:.6px}
.logo-teks sup{font-size:.45em;letter-spacing:0}
.brand p{
  font-size:10px;color:var(--gold);font-weight:700;
  letter-spacing:3.4px;text-transform:uppercase;
}

/* Kolom isian login bergaya garis bawah */
.login-card .field{margin-bottom:20px}
.login-card .field label{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.login-card input{
  width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--line);border-radius:0;
  padding:9px 0;font-size:14.5px;color:var(--text);transition:.15s;
}
.login-card input:focus{border-bottom-color:var(--gold);box-shadow:none}
.pwd-box{position:relative}
.pwd-toggle{
  position:absolute;right:0;bottom:9px;background:none;border:none;
  color:var(--gold);font-weight:600;font-size:11px;cursor:pointer;
  padding:4px 0;font-family:inherit;letter-spacing:.3px;
}
.login-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:20px}
.copyright{color:var(--faint);font-size:10px;margin-top:28px;letter-spacing:1px}

/* =========================================================
   FORM UMUM
========================================================= */
.field{margin-bottom:14px}
.field label{
  display:block;font-size:11.5px;font-weight:600;
  color:var(--muted);margin-bottom:6px;
}
input,select,textarea{
  width:100%;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:14.5px;color:var(--text);
  background:var(--surface-2);outline:none;transition:.15s;
}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:#5C5C64}
input:focus,select:focus,textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,185,60,.12);
}
input.ro,textarea.ro{
  background:rgba(255,255,255,.02);color:var(--muted);
  border-style:dashed;cursor:not-allowed;
}
input[type=date],input[type=file]{color-scheme:dark}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23E8B93C' d='M5 7 0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;
}
select option{background:var(--surface-2);color:var(--text)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.hint{font-size:11px;color:var(--faint);line-height:1.6;margin-top:8px}

/* =========================================================
   TOMBOL
========================================================= */
.btn{
  border:none;border-radius:var(--r-sm);padding:13px 18px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-block{width:100%;margin-bottom:12px}
.btn-sm{padding:9px 13px;font-size:12.5px;border-radius:9px}
.btn-primary{background:var(--grad-gold);color:#16120A}
.btn-primary:hover{filter:brightness(1.06)}
.btn-dark{background:transparent;color:var(--gold);border:1px solid var(--gold-line)}
.btn-dark:hover{background:var(--gold-soft)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-danger{background:transparent;color:var(--red);border:1px solid rgba(248,113,113,.32)}
.btn-danger:hover{background:var(--red-soft)}
.btn-success{background:var(--green);color:#08210F}

/* =========================================================
   TOPBAR & MENU BAWAH
========================================================= */
.topbar{
  position:sticky;top:0;z-index:40;background:var(--ink);
  border-bottom:1px solid var(--hair);
  padding:11px 15px;display:flex;align-items:center;justify-content:space-between;
}
.topbar-left{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.logo-sm{height:28px;width:auto;display:block;flex:none}
.topbar-title{min-width:0}
.topbar-title strong,.topbar-title span{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
.topbar-title strong{font-size:14px;font-weight:700;letter-spacing:-.1px}
.topbar-title span{font-size:10.5px;color:var(--muted);font-weight:500}
.avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:transparent;border:1px solid var(--gold-line);
  color:var(--gold);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;
}

#/* Ruang bawah harus melebihi tinggi bilah navigasi, DAN ikut
   menghitung safe-area ponsel bernavigasi gestur.

   Dulu tertulis 88px tetap. Di ponsel bergestur, bilahnya bisa
   setinggi 102px — sehingga isi terakhir tertutup. Kalau daftarnya
   panjang, halaman masih bisa digulir sehingga tidak terasa; tetapi
   kalau tinggal satu kartu, halamannya tidak cukup panjang untuk
   digulir dan tombolnya tertutup permanen. */
main{
  padding:14px 15px calc(96px + env(safe-area-inset-bottom));
  max-width:900px;margin:0 auto;
}
.page{display:none}
.page.active{display:block;animation:fade .16s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  background:var(--ink);border-top:1px solid var(--hair);
  display:flex;padding:5px 4px calc(5px + env(safe-area-inset-bottom));
}
.navbtn{
  flex:1;background:none;border:none;cursor:pointer;font-family:inherit;
  padding:7px 2px;border-radius:9px;display:flex;flex-direction:column;
  align-items:center;gap:3px;color:var(--faint);
  font-size:9.5px;font-weight:600;transition:.15s;
}
.navbtn .ic{font-size:18px;line-height:1;opacity:.75}
.navbtn.active{color:var(--gold)}
.navbtn.active .ic{opacity:1}

/* =========================================================
   KARTU & DAFTAR
========================================================= */
.card{
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r);padding:15px;margin-bottom:12px;
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.card-head strong{font-size:14px;font-weight:700}

/* Judul bagian: abu berhuruf renggang, penghitung emas di kanan */
.section-title{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;
  color:var(--muted);margin:20px 0 9px;display:flex;
  align-items:baseline;justify-content:space-between;gap:10px;
}
.section-title .hitung{
  color:var(--gold);font-size:11px;letter-spacing:.2px;
  text-transform:none;font-weight:700;
}

.list{display:flex;flex-direction:column;gap:8px}
.item{
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r);padding:13px;
}
.item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.item-title{font-weight:600;font-size:14px;letter-spacing:-.1px}
.item-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.item-meta{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.65}
.item-actions{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}

.notice{
  background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:var(--r-sm);padding:10px 12px;font-size:11.5px;
  line-height:1.6;margin-bottom:11px;color:var(--gold-lite);
}
.notice.awas{background:var(--amber-soft);border-color:rgba(251,191,36,.3);color:var(--amber)}

/* =========================================================
   MODAL TAMBAH KE KERANJANG
   Warna mengikuti penanda pada rancangan:
   emas = terisi otomatis, putih bergaris = diisi sendiri.
========================================================= */
.blok-otomatis{
  border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:4px 12px;margin-bottom:15px;background:rgba(232,185,60,.045);
}
.brs-o{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--hair);font-size:12.5px;
}
.brs-o:last-child{border-bottom:none}
.brs-o span{color:var(--muted);flex:none}
.brs-o strong{
  color:var(--gold);font-weight:700;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Baris diskon: label kiri, kotak persen kanan */
.brs-d{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.brs-d label{font-size:13px;font-weight:600;color:var(--text);margin:0;flex:1}
.brs-d.qty{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}

.kotak-d{display:flex;align-items:center;gap:6px;flex:none}
.kotak-d input{
  width:74px;text-align:right;padding:8px 10px;font-size:14px;
  font-weight:700;font-variant-numeric:tabular-nums;
}
.kotak-d span{font-size:13px;font-weight:700;color:var(--muted);width:14px}

/* Diskon 1 & 2 terisi otomatis — ditandai emas dan tidak bisa diketik */
.kotak-d.otomatis input{
  background:rgba(232,185,60,.10);border-color:var(--gold-line);
  color:var(--gold);cursor:not-allowed;
}
/* Diskon 3 diisi sendiri */
.kotak-d.manual input{background:var(--surface-2);border-color:var(--line);color:var(--text)}
.kotak-d.manual input:focus{border-color:var(--gold)}

.qty-inp{
  width:60px;text-align:center;padding:7px 4px;font-size:14.5px;
  font-weight:700;font-variant-numeric:tabular-nums;
}

/* Harga setelah diskon & total */
.brs-hasil{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 13px;margin-top:13px;
  border:1px solid var(--hair);border-radius:var(--r-sm);
}
.brs-hasil span{font-size:11.5px;color:var(--muted);font-weight:600}
.brs-hasil strong{font-size:17px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}

.brs-total{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px;margin-top:12px;border-radius:var(--r-sm);
  background:linear-gradient(150deg,#16150F,var(--ink));border:1px solid var(--gold-line);
}
.brs-total span{
  font-size:10px;color:var(--muted);font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;
}
.brs-total strong{
  font-size:21px;font-weight:800;letter-spacing:-.6px;
  color:var(--gold);font-variant-numeric:tabular-nums;
}

/* Rincian bertahap: 1.000.000 → 900.000 → 810.000 → 729.000 */
.rantai{
  display:none;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:9px;padding:9px 11px;
  border:1px dashed var(--line);border-radius:var(--r-sm);
  font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
}
.rantai.ada{display:flex}
.rantai .pnh{color:var(--gold);font-weight:700}
.rantai .akhir{color:var(--gold);font-weight:700}
.rantai .pct{color:var(--faint);font-size:10px}

.diskon-nilai{
  display:inline-flex;align-items:center;gap:5px;
  font-variant-numeric:tabular-nums;
}

.empty{
  text-align:center;padding:34px 20px;color:var(--faint);font-size:12.5px;
  background:transparent;border:1px dashed var(--line);border-radius:var(--r);
}
.info-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--hair);font-size:13px;
}
.info-row:last-child{border:none}
.info-row span{color:var(--muted)}
.info-row strong{font-weight:600;text-align:right}

/* =========================================================
   LABEL & CHIP
========================================================= */
.badge{
  display:inline-block;padding:3px 9px;border-radius:20px;
  font-size:10px;font-weight:700;letter-spacing:.3px;white-space:nowrap;
  border:1px solid transparent;
}
.badge-blue{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-line)}
.badge-green{background:var(--green-soft);color:var(--green);border-color:rgba(61,214,140,.28)}
.badge-amber{background:var(--amber-soft);color:var(--amber);border-color:rgba(251,191,36,.28)}
.badge-red{background:var(--red-soft);color:var(--red);border-color:rgba(248,113,113,.28)}
.badge-gray{background:transparent;color:var(--muted);border-color:var(--line)}
.badge-lock{
  font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.8px;
  text-transform:uppercase;background:transparent;border:1px solid var(--line);
  padding:3px 8px;border-radius:20px;
}
.role-badge{
  display:inline-block;margin-top:9px;padding:4px 13px;border-radius:20px;
  background:transparent;border:1px solid var(--gold-line);color:var(--gold);
  font-size:11px;font-weight:700;letter-spacing:.8px;
}
.pill{
  display:inline-block;min-width:17px;padding:1px 6px;border-radius:20px;
  background:var(--gold);color:#16120A;font-size:10px;font-weight:800;
}

.chip-list{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.chip{
  padding:7px 13px;border-radius:20px;border:1px solid var(--line);
  background:transparent;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;color:var(--muted);transition:.15s;
}
.chip:hover{border-color:var(--gold-line);color:var(--gold)}
.chip.active{background:var(--grad-gold);color:#16120A;border-color:transparent;font-weight:700}

/* =========================================================
   TAB
========================================================= */
.tabbar{
  display:flex;gap:4px;background:transparent;padding:0 0 2px;
  margin-bottom:15px;border-bottom:1px solid var(--hair);
}
.tabbar.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabbar.scroll::-webkit-scrollbar{display:none}
.tab{
  flex:1;white-space:nowrap;padding:9px 11px;border:none;background:none;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  cursor:pointer;transition:.15s;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* =========================================================
   ABSENSI
========================================================= */
.hero-card{
  background:linear-gradient(165deg,#16150F 0%,var(--ink) 62%);
  border:1px solid var(--hair);border-radius:16px;padding:17px;margin-bottom:4px;
}
/* Label "Waktu Server" — dipanggil lewat kelas, bukan lewat tag,
   supaya tidak ikut mengecilkan angka jam di dalam <strong> */
.hero-date .lbl{
  display:block;font-size:9.5px;letter-spacing:2px;color:var(--gold);
  font-weight:700;text-transform:uppercase;
}
.hero-date strong{
  display:block;font-size:40px;font-weight:800;letter-spacing:-2px;
  margin-top:3px;line-height:1.04;color:var(--text);
}
.hero-date strong .jam-utama{
  font-size:inherit;font-weight:inherit;color:var(--text);
  letter-spacing:-2px;text-transform:none;
}
.hero-date strong .dtk{
  font-size:.42em;color:var(--muted);font-weight:600;
  letter-spacing:-.5px;text-transform:none;
}
.hero-tgl{font-size:11.5px;color:var(--muted);margin-top:5px}
.hero-loc{
  margin-top:13px;padding-top:12px;border-top:1px solid var(--hair);
  font-size:11.5px;color:var(--muted);display:flex;align-items:flex-start;gap:8px;
}
.dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  flex:none;margin-top:5px;
}
.dot.off{background:var(--amber)}
/* Keterangan pagar virtual.
   TIDAK boleh memakai flex — tulisan panjang beserta tag <b> di dalamnya
   akan diperlakukan sebagai kolom terpisah dan tampilannya jadi pecah. */
.hero-pagar{
  margin-top:11px;padding:9px 12px;border-radius:11px;
  font-size:11px;font-weight:600;line-height:1.6;display:none;
  border:1px solid transparent;
}
.hero-pagar.dalam{display:block;background:var(--green-soft);color:var(--green);border-color:rgba(61,214,140,.26)}
.hero-pagar.luar{display:block;background:var(--amber-soft);color:var(--amber);border-color:rgba(251,191,36,.26)}
.hero-pagar.mati{display:block;background:transparent;color:var(--faint);border-color:var(--line)}
.hero-pagar b{color:inherit;font-weight:800}

/* Baris absen: penanda tegak, judul, keterangan status, waktu */
.absen-grid{display:flex;flex-direction:column;gap:6px}
.absen-btn{
  width:100%;display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-sm);padding:12px 13px;
  cursor:pointer;font-family:inherit;text-align:left;transition:.15s;
}
.absen-btn .tik{width:3px;height:30px;border-radius:3px;background:var(--line);flex:none}
.absen-btn .ic{font-size:17px;flex:none;opacity:.7;width:20px;text-align:center}
.absen-btn .teks{flex:1;min-width:0}
.absen-btn .lb{display:block;font-size:13px;font-weight:600;color:var(--text)}
.absen-btn .tm{display:block;font-size:10.5px;color:var(--faint);margin-top:2px}
.absen-btn .jam{
  font-size:13px;font-weight:700;color:var(--muted);flex:none;
  font-variant-numeric:tabular-nums;
}
.absen-btn:hover:not(:disabled){border-color:var(--gold-line)}

.absen-btn.siap{border-color:var(--gold-line);background:linear-gradient(115deg,rgba(232,185,60,.07),var(--surface))}
.absen-btn.siap .tik{background:var(--gold)}
.absen-btn.siap .ic{opacity:1}
.absen-btn.siap .tm{color:var(--gold)}
.absen-btn.siap .jam{color:var(--gold);font-size:11px;font-weight:600}

.absen-btn.done{border-color:rgba(61,214,140,.24)}
.absen-btn.done .tik{background:var(--green)}
.absen-btn.done .tm{color:var(--green)}
.absen-btn.done .jam{color:var(--green)}

.absen-btn.tunggu{border-color:rgba(251,191,36,.26)}
.absen-btn.tunggu .tik{background:var(--amber)}
.absen-btn.tunggu .tm{color:var(--amber)}
.absen-btn.tunggu .jam{color:var(--amber)}

.absen-btn.tolak{border-color:rgba(248,113,113,.26)}
.absen-btn.tolak .tik{background:var(--red)}
.absen-btn.tolak .tm{color:var(--red)}
.absen-btn.tolak .jam{color:var(--red)}

/* Hanya baris yang benar-benar belum giliran yang diredupkan.
   Baris yang sudah tercatat tetap terang walaupun tombolnya nonaktif. */
.absen-btn:disabled{opacity:.38;cursor:not-allowed}
.absen-btn.done:disabled,
.absen-btn.tunggu:disabled,
.absen-btn.tolak:disabled{opacity:1;cursor:default}
.absen-btn.full{grid-column:auto}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.stat{
  background:transparent;border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:12px 8px;text-align:center;
}
.stat span{
  display:block;font-size:9px;color:var(--faint);font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;
}
.stat strong{display:block;font-size:16px;font-weight:800;margin-top:4px;letter-spacing:-.5px;color:var(--gold)}

/* =========================================================
   FOTO & KAMERA
========================================================= */
.foto-empty{
  border:1px dashed var(--line);border-radius:var(--r);
  padding:30px 20px;text-align:center;cursor:pointer;
  background:transparent;transition:.15s;
}
.foto-empty:hover{border-color:var(--gold-line);background:var(--gold-soft)}
.foto-empty .cam-icon{font-size:30px;margin-bottom:8px;opacity:.8}
.foto-empty span{display:block;font-size:13px;font-weight:600;color:var(--text)}
.foto-empty small{display:block;font-size:11px;color:var(--faint);margin-top:4px}
.foto-preview img{
  width:100%;border-radius:var(--r);margin-bottom:10px;
  display:block;border:1px solid var(--hair);
}

.modal.modal-full{background:#000;align-items:stretch;backdrop-filter:none;-webkit-backdrop-filter:none}
.modal-full .cam-wrap{
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100%;height:100vh;height:100dvh;background:#000;overflow:hidden;
}
#cam-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;background:#000}
#cam-video.mirror{transform:scaleX(-1)}
.cam-top{
  position:absolute;z-index:3;top:0;left:0;right:0;
  padding:calc(14px + env(safe-area-inset-top)) 16px 16px;
  color:var(--gold);display:flex;justify-content:space-between;align-items:center;
  font-weight:700;font-size:13px;letter-spacing:.3px;
  background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent);
}
.cam-top button{
  background:rgba(255,255,255,.14);border:none;color:#fff;
  width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;line-height:1;
}
.cam-bottom{
  position:absolute;z-index:3;bottom:0;left:0;right:0;
  padding:20px 30px calc(24px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);
}
.cam-shutter{
  width:66px;height:66px;border-radius:50%;background:var(--grad-gold);
  border:4px solid rgba(232,185,60,.3);cursor:pointer;transition:.1s;flex:none;
}
.cam-shutter:active{transform:scale(.92)}
.cam-flip{
  width:44px;height:44px;border-radius:50%;border:none;flex:none;
  background:rgba(255,255,255,.16);color:#fff;font-size:18px;cursor:pointer;
}
.cam-sisa{width:44px;flex:none}
body.terkunci{overflow:hidden}

/* =========================================================
   PRODUK
========================================================= */
.produk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.produk-card{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
.produk-card:hover{border-color:var(--gold-line)}

/* Kotak gambar produk.
   overflow:hidden WAJIB — tanpa ini gambar yang lebih besar dari kotaknya
   akan meluber keluar dan menutupi tulisan di bawahnya. */
.produk-img{
  position:relative;height:104px;flex:none;overflow:hidden;
  background:var(--surface-2);border-bottom:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;cursor:pointer;
}
.produk-img img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Petunjuk kecil bahwa gambar bisa diperbesar */
.produk-img .kaca{
  position:absolute;right:6px;bottom:6px;z-index:2;
  width:22px;height:22px;border-radius:6px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;font-size:11px;opacity:0;transition:.15s;
}
.produk-img:hover .kaca{opacity:1}
@media(hover:none){.produk-img .kaca{opacity:.85}}
/* Kartu yang seluruh badannya bisa diketuk untuk membuka form ubah */
.item.klik{cursor:pointer;transition:.15s;position:relative}
.item.klik:hover{border-color:var(--gold-line);background:rgba(232,185,60,.035)}
.item.klik:active{transform:scale(.995)}
.panah-klik{
  display:block;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--hair);
  font-size:10.5px;font-weight:600;color:var(--faint);
  letter-spacing:.3px;transition:.15s;
}
.item.klik:hover .panah-klik{color:var(--gold)}

/* Bila gambar gagal dimuat, lambang kotak muncul sebagai gantinya */
.produk-img.kosong:after{content:"📦";font-size:28px}
.produk-img.kosong .kaca{display:none}
.thumb.kosong:after{content:"📦";font-size:20px}

/* Thumbnail kecil pada daftar produk di panel admin */
.thumb{
  width:52px;height:52px;flex:none;border-radius:9px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;position:relative;
}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{border-color:var(--gold-line)}
.item-top.berfoto{gap:11px}

/* Penampil gambar ukuran penuh */
.lihat-foto{
  display:none;position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.93);
  align-items:center;justify-content:center;padding:16px;
}
.lihat-foto.open{display:flex}
.lihat-foto img{
  max-width:100%;max-height:82vh;object-fit:contain;
  border-radius:10px;display:block;
}
.lihat-foto .tutup{
  position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer;
}
.lihat-foto .judul{
  position:absolute;left:16px;right:60px;top:calc(20px + env(safe-area-inset-top));
  color:var(--text);font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lihat-foto .kaki{
  position:absolute;left:16px;right:16px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex;gap:9px;justify-content:center;
}

.produk-body{padding:11px;flex:1;display:flex;flex-direction:column}
.produk-kat{font-size:9px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1.1px}
.produk-nama{font-size:13px;font-weight:600;margin:4px 0 2px;line-height:1.3}
.produk-var{font-size:11px;color:var(--faint)}
.produk-harga{font-size:14.5px;font-weight:800;color:var(--text);margin-top:8px;letter-spacing:-.3px}
.produk-stok{font-size:10.5px;color:var(--muted);margin-top:2px;margin-bottom:9px}
.produk-stok.habis{color:var(--red);font-weight:700}
.produk-body .btn{margin-top:auto}

.kotak-stok{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none;vertical-align:middle}
.kotak-stok.biru{background:#3B82F6}
.kotak-stok.hijau{background:var(--green)}
.kotak-stok.kuning{background:var(--amber)}
.kotak-stok.oranye{background:#FB923C}
.kotak-stok.merah{background:var(--red)}
.baris-stok{display:flex;align-items:center;gap:7px;margin-top:2px;margin-bottom:9px}
.baris-stok span{font-size:10.5px;color:var(--muted);font-weight:600}
.legenda{
  display:flex;flex-wrap:wrap;gap:10px;padding:9px 11px;margin-bottom:11px;
  border:1px solid var(--hair);border-radius:var(--r-sm);
}
.legenda div{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--faint);font-weight:600}
.pilih-toko{border-color:var(--gold-line);background:linear-gradient(150deg,#16150F,var(--surface))}

.total-card{background:linear-gradient(150deg,#16150F,var(--ink));border:1px solid var(--gold-line)}
.total-row{display:flex;justify-content:space-between;align-items:center}
.total-row span{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.total-row strong{font-size:21px;font-weight:800;letter-spacing:-.6px;color:var(--gold)}

.qty-box{display:flex;align-items:center;gap:9px}
.qty-btn{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:transparent;font-size:16px;font-weight:700;color:var(--gold);
  cursor:pointer;font-family:inherit;line-height:1;
}
.qty-val{min-width:28px;text-align:center;font-weight:700;font-size:14.5px}

/* =========================================================
   ADMIN & PROFIL
========================================================= */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:6px}
.kpi{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:14px}
.kpi span{font-size:10px;color:var(--faint);font-weight:700;display:block;letter-spacing:.9px;text-transform:uppercase}
.kpi strong{font-size:24px;font-weight:800;letter-spacing:-1px;display:block;margin-top:4px;color:var(--gold)}
.kpi .kpi-ic{font-size:15px;margin-bottom:5px;display:block;opacity:.75;letter-spacing:0}

.profil-card{
  background:linear-gradient(150deg,#16150F,var(--ink));
  border:1px solid var(--hair);border-radius:16px;
  padding:24px;text-align:center;margin-bottom:12px;
}
.avatar-lg{
  width:64px;height:64px;border-radius:50%;margin:0 auto 13px;
  background:transparent;border:1px solid var(--gold-line);
  color:var(--gold);display:grid;place-items:center;font-size:23px;font-weight:800;
}
.profil-card h2{font-size:18px;font-weight:800;letter-spacing:-.4px}
.profil-card p{font-size:12.5px;color:var(--muted);margin-top:2px}

/* =========================================================
   PLANNING & REALIZATION
========================================================= */
.dua-kotak{display:grid;grid-template-columns:1fr;gap:12px}
.kotak{background:transparent;border:1px solid var(--hair);border-radius:var(--r);padding:13px}
.kotak-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--hair);
}
.kotak-head strong{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.btn-tambah{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--gold-line);flex:none;
  background:transparent;color:var(--gold);font-size:17px;font-weight:700;
  line-height:1;cursor:pointer;font-family:inherit;
}
.btn-tambah:hover{background:var(--gold-soft)}

.kartu-plan{
  background:var(--surface);border:1px solid var(--hair);
  border-left:2px solid var(--gold);border-radius:var(--r-sm);
  padding:11px 12px;cursor:pointer;transition:.15s;
}
.kartu-plan:hover{border-color:var(--gold-line);border-left-color:var(--gold)}
.kartu-plan.kunci{border-left-color:var(--line);opacity:.72}
.kartu-plan.siap{border-left-color:var(--green)}
.kartu-plan.tunggu{border-left-color:var(--amber)}
.kartu-plan.tolak{border-left-color:var(--red)}
.kartu-judul{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}
.kartu-sub{font-size:11px;color:var(--faint);margin-top:4px;line-height:1.55}

.form-atas{display:flex;justify-content:space-between;align-items:flex-start;gap:13px;margin-bottom:13px}
.form-atas > div{flex:1}
.form-atas > div:last-child{max-width:170px}
.form-atas label{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.nilai-tetap{
  padding:10px 12px;background:transparent;border:1px dashed var(--line);
  border-radius:var(--r-sm);font-weight:600;font-size:13.5px;color:var(--gold);
}

.baris-plan{
  display:flex;gap:9px;align-items:flex-start;
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:10px;margin-bottom:7px;
}
.baris-no{
  width:24px;height:24px;flex:none;border-radius:7px;
  background:transparent;border:1px solid var(--gold-line);color:var(--gold);
  display:grid;place-items:center;font-weight:700;font-size:11px;
}
.baris-isi{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.baris-isi input{padding:8px 10px;font-size:13px}
.baris-hapus{
  width:24px;height:24px;flex:none;border-radius:6px;border:1px solid var(--line);
  background:transparent;color:var(--faint);cursor:pointer;font-size:11px;line-height:1;
}
.baris-hapus:hover{border-color:var(--red);color:var(--red)}

.baris-real{border:1px solid var(--hair);border-radius:var(--r-sm);padding:11px;margin-bottom:8px}
.baris-real.ya{border-color:rgba(61,214,140,.3)}
.baris-real.tidak{border-color:rgba(248,113,113,.3)}
.real-atas{display:flex;gap:9px;align-items:flex-start}
.real-tujuan{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.45}
.real-tujuan small{display:block;font-weight:400;color:var(--faint);font-size:11px;margin-top:3px}
.real-pilih{display:flex;gap:5px;flex:none}
.tombol-pilih{
  width:33px;height:33px;border-radius:8px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);background:transparent;font-size:14px;line-height:1;
  color:var(--faint);transition:.15s;
}
.tombol-pilih.ya.aktif{background:var(--green);border-color:var(--green);color:#08210F}
.tombol-pilih.tidak.aktif{background:var(--red);border-color:var(--red);color:#2A0A0A}
.lipatan{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:none}
.lipatan.buka{display:block;animation:fade .16s ease}
.lipatan .field{margin-bottom:8px}
.lipatan input,.lipatan select,.lipatan textarea{padding:8px 10px;font-size:13px}

/* =========================================================
   BROSUR & PENGAJUAN
========================================================= */
.brosur{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.brosur-head{
  padding:11px 12px;cursor:pointer;display:flex;
  justify-content:space-between;gap:11px;align-items:center;transition:.15s;
}
.brosur-head:hover{background:rgba(232,185,60,.035)}
.brosur-head strong{font-size:14px;font-weight:600;display:block}
.brosur-head small{
  display:block;font-size:11px;color:var(--faint);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brosur-panah{color:var(--gold);font-size:11px;transition:.2s;flex:none}
.brosur.buka .brosur-panah{transform:rotate(90deg)}
.brosur-isi{display:none;padding:0 12px 13px}
.brosur.buka .brosur-isi{display:block;animation:fade .16s ease}
.brosur-teks{
  font-size:12.5px;color:var(--muted);line-height:1.7;white-space:pre-wrap;
  padding-top:11px;border-top:1px solid var(--hair);margin-bottom:11px;
}
.video-bingkai{
  position:relative;width:100%;padding-bottom:56.25%;
  border-radius:var(--r-sm);overflow:hidden;background:#000;margin-bottom:10px;
}
.video-bingkai iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

.baris-pgj{
  display:flex;gap:9px;align-items:flex-start;
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:10px;margin-bottom:7px;
}
.baris-pgj .isi{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.baris-pgj .duo{display:grid;grid-template-columns:1fr 84px;gap:6px}
.baris-pgj input,.baris-pgj select{padding:8px 10px;font-size:13px}

/* =========================================================
   SLIDER
========================================================= */
.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;padding:0;
  border:none;border-radius:20px;background:var(--line);outline:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--grad-gold);cursor:pointer;border:2px solid var(--ink);
}
.slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--ink);
  background:#E8B93C;cursor:pointer;
}
.slider-tanda{display:flex;justify-content:space-between;font-size:9.5px;color:var(--faint);margin-top:6px;font-weight:600}
.nilai-potensi{color:var(--gold);font-size:14px}

/* =========================================================
   MODAL
========================================================= */
.modal{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.78);backdrop-filter:blur(2px);
  align-items:flex-end;justify-content:center;
  /* Sentuhan di lapisan gelap tidak diteruskan ke body.
     Tanpa ini di iOS Safari, jari yang menggeser isi modal
     bisa terdeteksi oleh body dan memicu scroll halaman,
     yang menyebabkan posisi modal melompat kembali. */
  touch-action:none;
}
.modal.open{display:flex}
.modal-box{
  background:var(--surface);width:100%;max-width:520px;
  border:1px solid var(--line);border-bottom:none;
  border-top:1px solid var(--gold-line);
  border-radius:18px 18px 0 0;max-height:92vh;
  display:flex;flex-direction:column;animation:slideup .2s ease;
  /* Scroll di dalam modal tidak boleh bocor ke body.
     overscroll-behavior mencegah "momentum" saat atas/bawah
     sudah mentok langsung menggulir halaman di belakangnya. */
  overscroll-behavior:contain;
}
.modal-box.lebar{max-width:720px}
@keyframes slideup{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.modal-head{
  padding:16px 17px 13px;border-bottom:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:center;
}
.modal-head strong{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.2px}
.modal-head button{background:none;border:none;font-size:17px;color:var(--faint);cursor:pointer}
.modal-body{
  padding:17px;flex:1;
  overflow-y:auto;
  /* Di iOS Safari, overflow-y:auto saja tidak cukup — scrollnya
     terasa kaku dan sering melompat kembali ke atas. Properti ini
     mengaktifkan momentum scroll yang halus, sama seperti di aplikasi
     native. Tanpa ini tombol di bawah tidak bisa dicapai. */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.modal-foot{
  padding:13px 17px calc(17px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);display:flex;gap:9px;
}
.modal-foot .btn{flex:1}
.modal-foot.antar{justify-content:space-between;align-items:center}
.modal-foot.antar .btn{flex:none;min-width:126px}
.waktu-isi{font-size:10.5px;color:var(--faint);line-height:1.5;flex:1}

/* =========================================================
   NAVIGASI HALAMAN
========================================================= */
.paginasi{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:7px 9px;margin-top:3px;
}
.pg-btn{
  width:33px;height:33px;flex:none;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:transparent;
  color:var(--gold);font-size:15px;font-weight:700;line-height:1;font-family:inherit;transition:.15s;
}
.pg-btn:hover:not(:disabled){border-color:var(--gold);background:var(--gold-soft)}
.pg-btn:active:not(:disabled){transform:scale(.94)}
.pg-btn:disabled{opacity:.25;cursor:not-allowed}
.pg-info{flex:1;text-align:center;font-size:11.5px;font-weight:600;color:var(--text);line-height:1.45}
.pg-info small{display:block;font-size:10px;color:var(--faint);font-weight:500;margin-top:1px}

/* =========================================================
   LOADING & TOAST
========================================================= */
.loading{
  position:fixed;inset:0;z-index:200;background:rgba(12,12,13,.93);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  font-size:12.5px;font-weight:600;color:var(--muted);
}
.spinner{
  width:34px;height:34px;border:2px solid var(--line);
  border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{
  position:fixed;left:50%;bottom:98px;transform:translate(-50%,16px);
  background:var(--surface-2);color:var(--text);border:1px solid var(--gold-line);
  padding:12px 18px;border-radius:11px;font-size:12.5px;font-weight:600;
  z-index:300;max-width:88%;text-align:center;opacity:0;pointer-events:none;
  transition:.24s;box-shadow:0 10px 26px rgba(0,0,0,.6);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:var(--green);color:#08210F;border-color:transparent}
.toast.err{background:var(--red);color:#2A0A0A;border-color:transparent}

/* =========================================================
   LAYAR SEMPIT & DESKTOP
========================================================= */
@media(max-width:430px){
  .logo-sm{height:25px}
  .topbar{padding:10px 13px}
  .topbar-left{gap:9px}
}
@media(min-width:760px){
  .dua-kotak{grid-template-columns:1fr 1fr;gap:14px;align-items:start}
}
@media(min-width:820px){
  #main{padding:24px 24px 40px}
  .produk-grid{grid-template-columns:repeat(4,1fr)}
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
  .logo-lg{width:220px}
  .bottomnav{
    max-width:900px;margin:0 auto;border-radius:14px 14px 0 0;
    border:1px solid var(--hair);border-bottom:none;
  }
  .modal{align-items:center}
  .modal-box{border-radius:18px;border-bottom:1px solid var(--line)}
}

/* =========================================================
   TOMBOL MASUK DENGAN GOOGLE
========================================================= */
.btn-google {
  background: #FFFFFF;
  color: #1F1F1F;
  border: 1px solid #DADCE0;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-google:hover { background: #F4F4F5; }
.btn-google svg { flex: 0 0 auto; }

/* Garis pemisah bertuliskan "atau" */
.pemisah {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--redup, #9A9AA4);
  font-size: 12px;
}
.pemisah::before,
.pemisah::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--garis, #2E2E34);
}

/* =========================================================
   HALAMAN EXPORT
========================================================= */
.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.export-grid .btn { width: 100%; }

/* =========================================================
   BARIS PILIHAN BERCENTANG
========================================================= */
.pilihan {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 10px 0 4px;
  background: #141417;
  border: 1px solid var(--garis, #2E2E34);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.5;
}
.pilihan input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  accent-color: var(--emas, #E8B93C);
  cursor: pointer;
}
.pilihan:hover { border-color: var(--emas, #E8B93C); }

/* =========================================================
   DERETAN TAB — perbaikan untuk tab yang jumlahnya banyak
========================================================= */

/* Di layar lebar, tab dibiarkan turun ke baris berikutnya
   supaya tidak ada menu yang tersembunyi di luar layar. */
@media (min-width: 721px) {
  .tabbar.scroll {
    overflow-x: visible;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .tabbar.scroll .tab { flex: 0 0 auto; }
}

/* Di layar sempit tetap digeser ke samping, dengan bayangan
   di tepi kanan sebagai penanda bahwa masih ada lanjutannya. */
@media (max-width: 720px) {
  .tabbar-bungkus { position: relative; }
  .tabbar-bungkus::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 3px;
    width: 34px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg, #111113) 82%);
  }
  .tabbar-bungkus.mentok::after { opacity: 0; }
  .tabbar.scroll .tab { flex: 0 0 auto; scroll-snap-align: start; }
  .tabbar.scroll { scroll-snap-type: x proximity; }
}

/* Tautan berbentuk teks di dalam kalimat */
.tautan-teks {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gold, #E8B93C);
  text-decoration: underline;
  cursor: pointer;
}
.tautan-teks:hover { opacity: .85; }

/* Kotak peringatan di panel admin */
.kotak-perbaikan {
  background: #2A2109;
  border: 1px solid #6B5514;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.kotak-perbaikan b { color: var(--gold, #E8B93C); }
.kotak-perbaikan .btn { margin-top: 10px; }

/* =========================================================
   TOMBOL BANTUAN DI LAYAR LOGIN
   Dibuat berpasangan, cukup besar untuk disentuh jari
   (tinggi 46px, di atas anjuran minimal 44px).
========================================================= */
.login-bantuan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.btn-bantuan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 10px;
  border: 1px solid var(--hair, #2E2E34);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted, #9A9AA4);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease,
              background .18s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-bantuan svg { flex: 0 0 auto; }
.btn-bantuan span { white-space: nowrap; }

.btn-bantuan:hover {
  border-color: var(--gold, #E8B93C);
  color: var(--gold, #E8B93C);
  background: rgba(232, 185, 60, .07);
}
.btn-bantuan:active { transform: scale(.97); }
.btn-bantuan:focus-visible {
  outline: 2px solid var(--gold, #E8B93C);
  outline-offset: 2px;
}

/* Kolom yang perlu diisi diberi isyarat goyangan */
@keyframes goyangKolom {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.goyang {
  animation: goyangKolom .45s ease;
  border-bottom-color: #E86A6A !important;
}

@media (max-width: 380px) {
  .login-bantuan { grid-template-columns: 1fr; }
}

/* =========================================================
   TABEL ATURAN DISKON
========================================================= */
/* =========================================================
   TABEL DISKON
   ---------------------------------------------------------
   Tujuh kolom terlalu sempit bila dipaksakan muat di layar HP.
   Karena itu tabelnya diberi lebar tetap dan digulir mendatar,
   dengan kolom Seri yang menempel di kiri supaya tidak hilang
   saat digeser.

   Ditambah pemisah tipis antar kolom dan baris berselang warna,
   supaya mata mudah mengikuti satu baris dari kiri ke kanan.
========================================================= */
/* Pembungkus untuk memasang bayangan di tepi kanan — penanda
   bahwa tabelnya masih berlanjut ke samping. */
.td-bungkus { position: relative; }
.td-bungkus::after {
  content: "";
  position: absolute;
  top: 1px; right: 1px; bottom: 15px;
  width: 26px;
  pointer-events: none;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(15, 15, 17, 0), rgba(15, 15, 17, .85));
}

/* Keterangan kecil, hanya tampil di layar sempit */
.td-petunjuk { display: none; }

.td-gulir {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--hair, #2E2E34);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

/* Batang gulir dibuat tipis dan berwarna emas samar */
.td-gulir::-webkit-scrollbar { height: 6px; }
.td-gulir::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
.td-gulir::-webkit-scrollbar-thumb {
  background: var(--gold-deep, #B8891F);
  border-radius: 999px;
  opacity: .6;
}

.tabel-diskon {
  min-width: 620px;            /* di bawah ini kolomnya mulai berdesakan */
  font-size: 12.5px;
}

.td-kepala, .td-baris {
  display: grid;
  grid-template-columns: 1.45fr .85fr .95fr .75fr .75fr .85fr 62px;
  align-items: center;
  gap: 0;
}

/* Pemisah tipis antar kolom */
.td-kepala > span, .td-baris > span {
  padding: 9px 10px;
  border-right: 1px solid rgba(255, 255, 255, .06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-kepala > span:last-child, .td-baris > span:last-child { border-right: 0; }

.td-kepala {
  background: rgba(255, 255, 255, .05);
  color: var(--muted, #9A9AA4);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid var(--hair, #2E2E34);
}

/* Pemisah antar baris */
.td-baris { border-top: 1px solid rgba(255, 255, 255, .05); }
.td-baris:first-of-type { border-top: 0; }

/* Baris berselang warna */
.td-baris.genap { background: rgba(255, 255, 255, .028); }
.td-baris:hover { background: rgba(232, 185, 60, .07); }

/* Kolom Seri menempel di kiri saat digulir mendatar */
.td-seri, .td-kepala > span:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  font-weight: 700;
  background: var(--surface, #17171A);
  border-right: 1px solid var(--hair, #2E2E34);
}
.td-kepala > span:first-child { background: #1E1E22; }
.td-baris.genap .td-seri { background: #1B1B1F; }

.td-d1 { color: var(--gold, #E8B93C); font-weight: 800; }

/* End User bawaannya 0 — diredupkan supaya tidak mengalihkan
   perhatian selama belum diisi angka lain. */
.td-eu { font-weight: 700; }
.td-eu.nol { color: var(--faint, #6A6A72); font-weight: 400; }

.td-aksi { display: flex; gap: 2px; justify-content: flex-end; }
.td-aksi button {
  background: none; border: 0; cursor: pointer;
  font-size: 13px; padding: 4px; border-radius: 6px; line-height: 1;
}
.td-aksi button:hover { background: rgba(255, 255, 255, .1); }

/* Petunjuk kecil bahwa tabelnya bisa digeser — hanya di layar sempit */
@media (max-width: 700px) {
  .tabel-diskon { font-size: 12px; }
  .td-kepala > span, .td-baris > span { padding: 9px 8px; }

  .td-petunjuk {
    display: block;
    margin: -8px 0 14px;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--faint, #6A6A72);
  }
}

/* Di layar lebar seluruh kolom sudah muat, jadi bayangannya
   tidak perlu ditampilkan. */
@media (min-width: 760px) {
  .td-bungkus::after { display: none; }
}

.hint-inline { font-weight: 400; color: var(--muted, #9A9AA4); font-size: 11px; }

/* =========================================================
   PEMBERITAHUAN BERKAS BEDA VERSI
========================================================= */
.beda-versi {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 32px);
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #2A1408;
  border: 1px solid #8A4A18;
  color: #F3D8B9;
  font-size: 12.5px;
  line-height: 1.55;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
.beda-versi b { color: #F0A050; }
.beda-versi button {
  align-self: flex-end;
  margin-top: 4px;
  background: rgba(240, 160, 80, .16);
  border: 1px solid #8A4A18;
  color: #F0A050;
  font: inherit;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 9px;
  cursor: pointer;
}
.beda-versi button:hover { background: rgba(240, 160, 80, .3); }

/* Kotak pemberitahuan yang perlu perhatian */
.notice-warn {
  background: #2A2109;
  border-color: #6B5514;
  color: #F3D8B9;
}
.notice-warn b { color: var(--gold, #E8B93C); }

/* Ringkasan hasil saringan pada daftar stok */
.ringkas-saring {
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hair, #2E2E34);
  font-size: 12.5px;
  color: var(--muted, #9A9AA4);
}
.ringkas-saring b { color: var(--gold, #E8B93C); }

/* Kartu ringkasan yang perlu perhatian */
.kpi.kpi-warn {
  background: #2A2109;
  border-color: #6B5514;
}

/* =========================================================
   PINTU PEMBUKA HALAMAN MASUK
   Dibuat dengan CSS biasa, tanpa pustaka tambahan, supaya
   tidak menambah berkas yang harus diunduh.
========================================================= */

.pintu-panggung {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 10px 0 6px;
  transition: opacity .5s ease, transform .5s ease;
}
.pintu-panggung.pergi {
  opacity: 0;
  transform: scale(.92) translateY(-14px);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* cahaya yang menyembur dari balik pintu */
.pintu-cahaya {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  transition: opacity .9s ease;
  background: radial-gradient(48% 44% at 50% 46%,
              rgba(232, 185, 60, .30) 0%,
              rgba(184, 137, 31, .12) 42%,
              rgba(0, 0, 0, 0) 72%);
}
.pintu-cahaya.nyala { opacity: 1; }

.kusen {
  position: relative;
  width: 168px;
  height: 262px;
  border-radius: 8px 8px 0 0;
  background: #08080A;
  box-shadow: 0 0 0 8px #241E15, 0 24px 46px rgba(0, 0, 0, .6);
  perspective: 1300px;
}

.pintu-dalam {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 8px 8px 0 0;
  transition: opacity .5s ease;
  background: linear-gradient(160deg, #FFE0A0 0%, #E8B93C 52%, #7A5A24 100%);
}
.pintu-dalam.nyala { opacity: 1; }

.pintu {
  position: absolute;
  inset: 0;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(105deg, #2E2822 0%, #43382C 48%, #241E18 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.65, .02, .25, 1);
  -webkit-tap-highlight-color: transparent;
}
.pintu.getar { animation: pintuGetar .36s ease; }
.pintu.terbuka { transform: rotateY(-78deg); }
.pintu:focus-visible { outline: 2px solid var(--gold, #E8B93C); outline-offset: 12px; }

@keyframes pintuGetar {
  0%   { transform: translateX(0); }
  22%  { transform: translateX(-4px); }
  48%  { transform: translateX(3px); }
  72%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.pintu-panel {
  position: absolute;
  left: 18px; right: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  background: rgba(0, 0, 0, .16);
}
.pintu-panel.atas  { top: 20px; height: 84px; }
.pintu-panel.bawah { top: 142px; height: 100px; }

.pintu-plat {
  position: absolute;
  top: 112px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid rgba(232, 185, 60, .38);
  border-radius: 3px;
  background: rgba(0, 0, 0, .28);
  line-height: 0;
}
.pintu-plat img { width: 62px; height: auto; opacity: .92; }

.pintu-gagang {
  position: absolute;
  right: 13px; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-soft, #F8DC85), var(--gold-deep, #B8891F));
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .3);
}

.pintu-riak {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(232, 185, 60, .75);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.pintu-riak.mekar { animation: riakMekar .6s ease-out; }

@keyframes riakMekar {
  from { opacity: .9; transform: scale(.4); }
  to   { opacity: 0;  transform: scale(4.6); }
}

.pintu-petunjuk {
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted, #9A9AA4);
}
.pintu-titik {
  display: inline-block;
  margin-left: 8px;
  letter-spacing: .3em;
  color: var(--gold, #E8B93C);
}

.pintu-lewati {
  background: none;
  border: 0;
  color: var(--muted, #9A9AA4);
  font: inherit;
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pintu-lewati:hover { color: var(--gold, #E8B93C); }

/* Kartu masuk menunggu di balik pintu */
.login-card.tersembunyi {
  opacity: 0;
  transform: translateY(24px) scale(.97);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}
.login-card.muncul {
  animation: kartuMuncul .65s cubic-bezier(.2, .8, .3, 1.1) both;
}
@keyframes kartuMuncul {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Perangkat yang meminta pengurangan gerak: pintu dilewati */
@media (prefers-reduced-motion: reduce) {
  .pintu, .pintu-panggung, .pintu-dalam, .pintu-cahaya { transition: none !important; }
  .pintu.getar, .pintu-riak.mekar, .login-card.muncul { animation: none !important; }
}

@media (max-width: 420px) {
  .kusen { width: 140px; height: 218px; }
  .pintu-panel.atas  { top: 16px; height: 68px; }
  .pintu-panel.bawah { top: 118px; height: 84px; }
  .pintu-plat { top: 92px; }
  .pintu-plat img { width: 52px; }
}

/* =========================================================
   PERJALANAN ORDER — JEJAK TUJUH TAHAP
========================================================= */
.jejak { margin-top: 4px; }

.jejak-baris {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  position: relative;
}
/* garis penyambung antar tahap */
.jejak-baris::before {
  content: "";
  position: absolute;
  left: 12px; top: 32px; bottom: -9px;
  width: 2px;
  background: var(--hair, #2E2E34);
}
.jejak-baris:last-child::before { display: none; }

.jejak-titik {
  flex: 0 0 25px;
  width: 25px; height: 25px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800;
  background: #1A1A1D;
  border: 1.5px solid var(--hair, #2E2E34);
  color: var(--muted, #9A9AA4);
  position: relative; z-index: 1;
}
.jejak-baris.selesai .jejak-titik {
  background: rgba(92, 201, 138, .16);
  border-color: #5CC98A;
  color: #5CC98A;
}
.jejak-baris.berjalan .jejak-titik {
  background: var(--gold, #E8B93C);
  border-color: var(--gold, #E8B93C);
  color: #20180A;
  box-shadow: 0 0 0 4px rgba(232, 185, 60, .16);
}
.jejak-baris.selesai::before { background: rgba(92, 201, 138, .4); }

.jejak-isi { flex: 1; min-width: 0; padding-top: 2px; }
.jejak-judul { font-size: 13px; font-weight: 700; line-height: 1.35; }
.jejak-baris.nanti .jejak-judul { color: var(--muted, #9A9AA4); font-weight: 500; }
.jejak-baris.berjalan .jejak-judul { color: var(--gold, #E8B93C); }

.jejak-oleh { font-size: 12px; color: var(--muted, #9A9AA4); margin-top: 2px; line-height: 1.5; }
.jejak-waktu { font-size: 11px; color: var(--faint, #6B6B75); }
.jejak-catatan {
  font-size: 12px; margin-top: 4px; padding: 6px 9px;
  background: rgba(255, 255, 255, .04);
  border-radius: 7px;
  color: var(--muted, #9A9AA4);
}

/* Keterangan bila tahap ini bukan wewenang orang yang sedang melihat */
.tunggu-tahap {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed var(--hair, #2E2E34);
  color: var(--muted, #9A9AA4);
  font-size: 13px;
  text-align: center;
}
.tunggu-tahap b { color: var(--gold, #E8B93C); }

.tombol-kecil {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.tombol-kecil .btn { flex: 1; }

/* Kotak keterangan di dalam jendela */
.kotak-info {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hair, #2E2E34);
  margin-bottom: 14px;
  font-size: 13.5px;
}

/* Baris daftar yang perlu perhatian */
.item.item-warn {
  border-color: rgba(232, 185, 60, .45);
  background: linear-gradient(90deg, rgba(232, 185, 60, .05), transparent 40%);
}

/* =========================================================
   KAMERA HARUS DI ATAS SEGALANYA
   ---------------------------------------------------------
   Kamera dipanggil dari dalam jendela lain — misalnya driver
   menandai barang sampai dari rincian order. Karena keduanya
   sama-sama z-index 100 dan jendela order berada lebih bawah
   di halaman, tombolnya menimpa tombol jepret.
========================================================= */
.modal.modal-full { z-index: 300; }

/* Jendela lain disembunyikan sementara selagi kamera terbuka,
   supaya tidak ada tombol yang tembus dari belakang. */
body.kamera-aktif .modal:not(.modal-full) { display: none !important; }
body.kamera-aktif .pb-kj-tombol,
body.kamera-aktif #bottomnav,
body.kamera-aktif .beda-versi { display: none !important; }

/* Ruang aman supaya tombol jepret tidak tertutup bilah bawah HP */
.cam-bottom { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }

/* =========================================================
   LENCANA JUMLAH PADA SARINGAN TAHAP & TAB
   Bulatan merah berisi angka, supaya terlihat berapa order
   yang masih menunggu tanpa perlu membuka satu per satu.
========================================================= */
.chip { position: relative; }

.chip-hitung {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-left: 7px;
  border-radius: 999px;
  background: #D93F3F;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
/* Tahap yang menunggu tindakan orang yang sedang membuka: dibuat menonjol */
.chip-hitung.giliran {
  background: linear-gradient(180deg, #F8DC85, #B8891F);
  color: #20180A;
  box-shadow: 0 0 0 3px rgba(232, 185, 60, .22);
  animation: denyutLencana 1.8s ease-in-out infinite;
}
@keyframes denyutLencana {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232, 185, 60, .22); }
  50%      { box-shadow: 0 0 0 6px rgba(232, 185, 60, .06); }
}
.chip.active .chip-hitung { background: #20180A; color: var(--gold, #E8B93C); }
.chip.active .chip-hitung.giliran { background: #20180A; color: var(--gold, #E8B93C); }

/* Lencana pada tab panel admin dan menu bawah */
.tab-hitung {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  margin-left: 5px;
  border-radius: 999px;
  background: #D93F3F;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.navbtn { position: relative; }
.nav-hitung {
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #D93F3F;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--bg, #111113);
}

/* =========================================================
   UNGGAH BUKTI PEMBAYARAN
========================================================= */
.kotak-unggah {
  padding: 22px 16px;
  border: 1px dashed var(--hair, #2E2E34);
  border-radius: 11px;
  text-align: center;
  color: var(--muted, #9A9AA4);
  font-size: 13px;
  background: rgba(255, 255, 255, .02);
}
.pratinjau-bukti {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 11px;
  border: 1px solid var(--hair, #2E2E34);
  background: #0D0D0F;
  display: block;
}

/* =========================================================
   BARIS TAGIHAN MANDIRI
========================================================= */
.baris-tagihan {
  padding: 12px 13px;
  margin-bottom: 10px;
  border: 1px solid var(--hair, #2E2E34);
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
}
.baris-tagihan .field:last-of-type { margin-bottom: 6px; }

.baris-kaki {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px dashed var(--hair, #2E2E34);
  font-size: 12.5px;
  color: var(--muted, #9A9AA4);
}
.baris-kaki b { color: var(--gold, #E8B93C); }

/* =========================================================
   BATANG CAPAIAN TARGET
========================================================= */
.batang {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  margin: 7px 0 5px;
}
.batang-isi {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep, #B8891F), var(--gold, #E8B93C));
  transition: width .5s ease;
}
.batang-isi.tercapai {
  background: linear-gradient(90deg, #3F9E63, #5CC98A);
}
.batang-isi.kurang {
  background: linear-gradient(90deg, #A34141, #E86A6A);
}

/* Menu bawah dengan enam tombol */
@media (max-width: 420px) {
  .navbtn { font-size: 9.5px; }
  .navbtn span.ic { font-size: 17px; }
}


/* =========================================================
   IMPOR PRODUK DARI CSV
========================================================= */
.langkah-impor {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.langkah-impor:last-of-type { border-bottom: 0; }

.li-nomor {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #F8DC85, #B8891F);
  color: #20180A;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.li-isi { flex: 1; min-width: 0; }
.li-isi b { display: block; margin-bottom: 2px; font-size: 13.5px; }
.li-isi .hint { margin: 0 0 8px; }

/* Tabel contoh baris yang akan diimpor */
.tabel-impor { min-width: 480px; font-size: 12.5px; }
.ti-kepala, .ti-baris {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  align-items: center;
}
.ti-kepala > span, .ti-baris > span {
  padding: 8px 10px;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.ti-kepala > span:last-child, .ti-baris > span:last-child { border-right: 0; }
.ti-kepala {
  background: rgba(255, 255, 255, .05);
  color: var(--muted, #9A9AA4);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid var(--hair, #2E2E34);
}
.ti-baris { border-top: 1px solid rgba(255, 255, 255, .05); }
.ti-baris:first-of-type { border-top: 0; }
.ti-baris.genap { background: rgba(255, 255, 255, .028); }

/* Lencana jumlah pada saringan kategori produk — netral, bukan
   penanda pekerjaan yang menunggu seperti pada saringan tahap order. */
.chip-hitung.netral {
  background: rgba(255, 255, 255, .12);
  color: var(--muted, #9A9AA4);
  font-weight: 700;
  box-shadow: none;
  animation: none;
}
.chip.active .chip-hitung.netral {
  background: #20180A;
  color: var(--gold, #E8B93C);
}

/* =========================================================
   KAKI JENDELA RINCIAN ORDER
   ---------------------------------------------------------
   Isinya bisa banyak: tombol tahap, tugaskan driver, proforma,
   catat pembayaran, invoice, ditambah deretan tombol kecil.

   Sebelumnya semuanya dipaksa berjajar dalam satu baris karena
   .modal-foot memakai flex mendatar — akibatnya tulisan tombol
   terpotong dan sulit dibaca, terutama di HP.

   Sekarang tombol utama ditumpuk ke bawah, dan tombol kecil
   melipat sendiri ke baris berikutnya bila tidak muat.
========================================================= */
#order-detail-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
#order-detail-foot > .btn { flex: none; width: 100%; }

#order-detail-foot .tombol-kecil {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 0;
}
#order-detail-foot .tombol-kecil .btn {
  flex: 1 1 auto;
  min-width: 116px;
  white-space: nowrap;
}

/* Keterangan tahap — misalnya "Menunggu Finance" */
#order-detail-foot .tunggu-tahap { margin: 0; }

/* Jendela lain tetap mendatar, hanya diberi kemampuan melipat
   supaya tidak ada tombol yang terpotong di layar sempit. */
.modal-foot { flex-wrap: wrap; }
.modal-foot .btn { min-width: 108px; }

/* =========================================================
   PENYUNTING SLIDE HALAMAN DEPAN
========================================================= */
.slide-baris { display: flex; gap: 12px; align-items: flex-start; }

.slide-gbr {
  flex: 0 0 96px;
  height: 96px;
  border-radius: 10px;
  border: 1px dashed var(--hair, #2E2E34);
  background: rgba(255, 255, 255, .03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  font-size: 10.5px;
  color: var(--faint, #6A6A72);
  line-height: 1.5;
  transition: .18s;
}
.slide-gbr:hover { border-color: var(--gold, #E8B93C); }
.slide-gbr img { width: 100%; height: 100%; object-fit: cover; }

.slide-isi { flex: 1; min-width: 0; }
.slide-isi .field { margin-bottom: 7px; }
.slide-isi .field input { padding: 9px 11px; font-size: 12.5px; }

.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.slide-aksi { display: flex; gap: 6px; margin-top: 2px; }
.slide-aksi .btn { flex: 0 0 auto; min-width: 44px; }
.slide-aksi .btn:last-child { margin-left: auto; }
.slide-aksi .btn:disabled { opacity: .35; cursor: not-allowed; }

@media (max-width: 560px) {
  .slide-gbr { flex-basis: 74px; height: 74px; }
  .dua-kolom { grid-template-columns: 1fr; }
}

/* Pemilihan produk unggulan */
.pilih-ung {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  transition: .15s;
}
.pilih-ung input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: #E8B93C; }
.pilih-ung.aktif { border-color: var(--gold-line, rgba(232,185,60,.32)); background: rgba(232, 185, 60, .06); }

/* =========================================================
   TINDAK LANJUT KUNJUNGAN
========================================================= */
.tindak-kotak {
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px dashed var(--gold-line, rgba(232, 185, 60, .3));
  background: rgba(232, 185, 60, .04);
}
.tindak-kotak .field:last-child { margin-bottom: 0; }

/* Baris pada daftar tindak lanjut — diberi garis tepi kiri
   supaya yang lewat tempo langsung terlihat saat digulir. */
.tindak-baris { border-left: 3px solid transparent; }
.tindak-baris.lewat { border-left-color: #E86A6A; background: rgba(232, 106, 106, .05); }
.tindak-baris.hariini { border-left-color: #E8B93C; background: rgba(232, 185, 60, .05); }

.tindak-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.tindak-aksi .btn { flex: 1 1 auto; min-width: 128px; }

/* =========================================================
   FOTO QC GUDANG
========================================================= */
.qc-daftar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.qc-item { position: relative; aspect-ratio: 1; }
.qc-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--hair, #2E2E34);
}
.qc-buang {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(10, 10, 12, .78);
  color: #FFFFFF; font-size: 12px; line-height: 1;
  cursor: pointer;
}
.qc-buang:hover { background: #D93F3F; }

/* Galeri foto QC pada rincian order */
.qc-galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}
.qc-galeri img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--hair, #2E2E34);
  cursor: zoom-in;
}

/* =========================================================
   PO GLOBAL
========================================================= */
.modal-lebar { max-width: 780px; }

.po-baris .field { margin-bottom: 6px; }
.po-baris .field input,
.po-baris .field select { padding: 9px 11px; font-size: 12.5px; }

.grid-3 { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 7px; }

.po-baris-kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  font-weight: 700;
  color: var(--gold, #E8B93C);
  font-size: 13px;
}
.po-baris-kaki .btn { flex: 0 0 auto; }

@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-3 .field:last-child { grid-column: 1 / -1; }
}

/* =========================================================
   DOKUMEN PERSYARATAN CLIENT
========================================================= */
.dok-baris { align-items: flex-start; gap: 10px; }
.dok-baris .dok-aksi { display: flex; gap: 6px; flex: 0 0 auto; }
.dok-baris .dok-aksi .btn { min-width: 62px; }

@media (max-width: 520px) {
  .dok-baris { flex-direction: column; align-items: stretch; }
  .dok-baris .dok-aksi { justify-content: flex-end; }
}

/* =========================================================
   RINCIAN KOMISI
========================================================= */
.komisi-order {
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--hair, #2E2E34);
}
.komisi-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
}
.komisi-order .info-row { padding: 5px 0; }
.komisi-order .tindak-aksi { margin-top: 8px; }

/* =========================================================
   MENU PANEL ADMIN
   ---------------------------------------------------------
   Dulu 31 tab berjajar dalam satu deret yang melipat — sulit
   dicari, dan tidak jelas mana yang berhubungan dengan mana.

   Sekarang dikelompokkan menurut alur kerja, dan tiap menu
   berupa tombol berikon supaya bisa dikenali sekilas tanpa
   harus membaca seluruh tulisannya.
========================================================= */
.adm-menu { margin-bottom: 18px; }

.adm-grup { margin-bottom: 16px; }
.adm-grup.hidden { display: none; }

.adm-grup-judul {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--faint, #6A6A72);
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--hair, #2E2E34);
}

.adm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px;
}

.adm-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 11px;
  border: 1px solid var(--hair, #2E2E34);
  background: var(--surface, #17171A);
  color: var(--text, #E8E8EA);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: .16s;
}
.adm-btn:hover {
  border-color: var(--gold-line, rgba(232, 185, 60, .38));
  background: rgba(232, 185, 60, .05);
}

.adm-btn.active {
  background: var(--grad-gold);
  border-color: transparent;
  color: #16120A;
}

.adm-ikon {
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
}

.adm-teks {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

/* Lencana ditaruh di pojok supaya tidak menggeser tulisannya
   saat angkanya muncul atau hilang. */
.adm-btn .pill {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #D93F3F;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg, #0F0F11);
}
.adm-btn.active .pill { box-shadow: 0 0 0 2px #E8B93C; }

@media (max-width: 560px) {
  .adm-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .adm-btn { padding: 10px; font-size: 12px; }
  .adm-ikon { font-size: 14px; }
}

/* =========================================================
   MENU ADMIN — kelompok yang bisa dilipat
   ---------------------------------------------------------
   Judul kelompok jadi tombol. Hanya satu kelompok terbuka pada
   satu waktu, supaya panel isinya tidak terdorong jauh ke bawah.
========================================================= */
.adm-grup-judul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 2px 8px;
  border: 0;
  border-bottom: 1px solid var(--hair, #2E2E34);
  background: transparent;
  color: var(--faint, #6A6A72);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color .16s;
}
.adm-grup-judul:hover { color: var(--gold, #E8B93C); }

.adm-grup.terbuka > .adm-grup-judul {
  color: var(--gold, #E8B93C);
  border-bottom-color: var(--gold-line, rgba(232, 185, 60, .32));
}

.adm-panah {
  font-size: 11px;
  letter-spacing: 0;
  transition: transform .2s;
}
.adm-grup.terbuka .adm-panah { transform: rotate(180deg); }

/* Isinya disembunyikan sampai kelompoknya dibuka */
.adm-grup .adm-grid {
  display: none;
  padding-top: 8px;
}
.adm-grup.terbuka .adm-grid {
  display: grid;
  animation: adm-turun .18s ease;
}

@keyframes adm-turun {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lencana tetap terlihat walau kelompoknya tertutup — supaya
   tidak perlu membuka satu per satu untuk tahu ada yang menunggu. */
.adm-grup-lencana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  margin-right: 8px;
  border-radius: 999px;
  background: #D93F3F;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}
.adm-grup-lencana.hidden { display: none; }

/* =========================================================
   KELOMPOK MENU YANG PUNYA TUGAS MENUNGGU
   ---------------------------------------------------------
   Diberi cahaya supaya terlihat lebih dulu saat seluruh
   kelompok masih tertutup — tidak perlu dibuka satu per satu
   untuk tahu di mana ada pekerjaan.

   Cahayanya sengaja lembut dan berdenyut pelan. Kalau terlalu
   terang, ia justru mengganggu saat dipandang seharian.
========================================================= */
.adm-grup.menyala > .adm-grup-judul {
  color: var(--gold, #E8B93C);
  border-bottom-color: rgba(232, 185, 60, .55);
  text-shadow: 0 0 9px rgba(232, 185, 60, .45);
}

.adm-grup.menyala > .adm-grup-judul .adm-grup-lencana {
  box-shadow: 0 0 0 1px rgba(217, 63, 63, .5),
              0 0 10px rgba(217, 63, 63, .65);
  animation: denyut 2.4s ease-in-out infinite;
}

@keyframes denyut {
  0%, 100% { box-shadow: 0 0 0 1px rgba(217, 63, 63, .5),
                         0 0 8px  rgba(217, 63, 63, .55); }
  50%      { box-shadow: 0 0 0 1px rgba(217, 63, 63, .7),
                         0 0 16px rgba(217, 63, 63, .95); }
}

/* Kelompok yang sedang terbuka tidak perlu ikut berdenyut —
   isinya sudah terlihat. */
.adm-grup.menyala.terbuka > .adm-grup-judul .adm-grup-lencana {
  animation: none;
}

/* Hormati pengaturan ponsel yang mengurangi gerak */
@media (prefers-reduced-motion: reduce) {
  .adm-grup.menyala > .adm-grup-judul .adm-grup-lencana { animation: none; }
}