/* ═══════════════════════════════════════════════════════════════
   Order Acceleration System — Fase 4
   Gaya bersama sisi pelanggan dan panel admin.
   Palet ungu dikunci dari logo DAG; sisanya diambil dari dunia
   dokumen ekspor (kertas formulir, stempel bea cukai, tinta freight).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#17102b;
  --ink-2:#241a3f;
  --indigo:#2b1464;
  --lilac:#855ba6;
  --manifest:#eceee7;
  --stamp:#c1342d;
  --transit:#1d6f6a;
  --amber:#b57a24;

  --paper:#ffffff;
  --rule:#d8dad0;
  --rule-soft:#e6e8e0;
  --muted:#6d6a78;
  --muted-2:#918e9b;
  --r:12px;
  --nav-h:64px;
  --rail-w:264px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  background:var(--manifest);
  color:var(--ink);
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.display-face{font-family:'Archivo',system-ui,sans-serif;letter-spacing:-.02em;margin:0}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--lilac);outline-offset:2px;border-radius:3px}
img{max-width:100%}
a{color:var(--indigo)}

/* ── Bootstrap disesuaikan ───────────────────────────────────── */
.text-primary{color:var(--indigo)!important}
.bg-primary{background-color:var(--indigo)!important}
.btn{font-weight:600;border-radius:9px;font-size:.88rem}
.btn-primary{background-color:var(--indigo);border-color:var(--indigo);color:#fff}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  background-color:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}
.btn-outline-primary{color:var(--indigo);border-color:#c6bcd8}
.btn-outline-primary:hover{background-color:var(--indigo);border-color:var(--indigo);color:#fff}
.btn-lg{font-size:.95rem;padding:.7rem 1.5rem}
.btn-sm{font-size:.8rem;padding:.3rem .7rem}
.form-control,.form-select{border-color:var(--rule);border-radius:9px;font-size:.92rem;color:var(--ink);padding:.55rem .8rem}
.form-control:focus,.form-select:focus{border-color:var(--lilac);box-shadow:0 0 0 3px rgba(133,91,166,.15)}
.form-control::placeholder{color:var(--muted-2)}
.form-label{font-size:.76rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace;color:var(--muted);margin-bottom:.35rem}
.form-text{font-size:.78rem;color:var(--muted-2)}

/* ── Komponen bersama ────────────────────────────────────────── */
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lilac);display:flex;align-items:center;gap:9px;margin-bottom:11px;
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--lilac)}

.panel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r)}
.panel-head{padding:15px 19px;border-bottom:1px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-head h2{font-size:1rem;font-weight:700}
.panel-head .sub{font-family:'IBM Plex Mono',monospace;font-size:.69rem;color:var(--muted-2);margin-top:2px}
.panel-body{padding:19px}
.panel-body.flush{padding:0}

.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:.71rem;font-weight:600;white-space:nowrap;border:1px solid transparent;
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill-good{background:rgba(29,111,106,.1);color:var(--transit);border-color:rgba(29,111,106,.22)}
/* Amber dipakai apa adanya sebagai warna isian pada batang ledger dan
   penanda statistik, tetapi sebagai teks kecil di atas latarnya sendiri ia
   hanya mencapai kontras 3,19:1 — di bawah ambang 4,5:1. Yang digelapkan
   cukup teks pilnya, supaya isian di tempat lain tidak ikut berubah rona. */
.pill-wait{background:rgba(181,122,36,.12);color:#8a5c1a;border-color:rgba(181,122,36,.24)}
.pill-alert{background:rgba(193,52,45,.09);color:var(--stamp);border-color:rgba(193,52,45,.2)}
.pill-move{background:rgba(43,20,100,.08);color:var(--indigo);border-color:rgba(43,20,100,.18)}
.pill-idle{background:#f1f1ef;color:var(--muted);border-color:var(--rule)}

.empty{text-align:center;padding:58px 24px}
.empty i{font-size:2.1rem;color:var(--rule);display:block;margin-bottom:15px}
.empty b{display:block;font-family:'Archivo',sans-serif;font-size:1.08rem;margin-bottom:6px}
.empty p{font-size:.9rem;color:var(--muted);margin:0 auto 18px;max-width:42ch}

.formula{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--muted);
  background:var(--manifest);border:1px solid var(--rule);border-radius:9px;
  padding:12px 14px;line-height:1.75;
}
.formula b{color:var(--ink)}

.notice{
  border-radius:10px;padding:14px 16px;font-size:.87rem;display:flex;gap:12px;align-items:flex-start;
  border:1px solid;line-height:1.55;
}
.notice i{font-size:.95rem;margin-top:3px;flex-shrink:0}
.notice b{display:block;margin-bottom:3px}
.notice-info{background:rgba(43,20,100,.05);border-color:rgba(43,20,100,.18);color:var(--ink-2)}
.notice-warn{background:rgba(193,52,45,.06);border-color:rgba(193,52,45,.24);color:#7d2a24}
.notice-ok{background:rgba(29,111,106,.07);border-color:rgba(29,111,106,.22);color:#134f4b}
.notice .acts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}

/* ── Ledger estimasi A + B + C (elemen tanda tangan) ─────────── */
.ledger-track{
  display:flex;height:9px;border-radius:5px;overflow:hidden;
  background:var(--rule-soft);border:1px solid var(--rule);
}
.ledger-track span{display:block;transition:width .5s cubic-bezier(.4,0,.2,1)}
.seg-a{background:var(--stamp)}
.seg-b{background:var(--amber)}
.seg-c{background:var(--indigo)}
/* Bagian rentang Komponen C - arsir menandai waktu yang belum pasti */
.seg-c-flex{
  background:repeating-linear-gradient(
    135deg,
    var(--indigo) 0 3px,
    rgba(43,20,100,.28) 3px 6px
  );
}
.ledger-legend{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:9px;
  font-family:'IBM Plex Mono',monospace;font-size:.71rem;color:var(--muted);
}
.ledger-legend .lg{display:flex;align-items:center;gap:5px;white-space:nowrap}
.ledger-legend .sw{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.ledger-legend .sw.a{background:var(--stamp)}
.ledger-legend .sw.b{background:var(--amber)}
.ledger-legend .sw.c{background:var(--indigo)}
.ledger-total{margin-left:auto;font-family:'Archivo',sans-serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.ledger-hero .ledger-track{height:14px;border-radius:7px}
.ledger-mini .ledger-track{height:5px;border-radius:3px}

/* ═══ SISI PELANGGAN ═══════════════════════════════════════════ */
/* Header menggantung. Melayang di atas halaman alih-alih menempel ke
   tepinya, sehingga kertas katalog terlihat lewat di bawahnya — sebuah
   docket yang terangkat, bukan bilah yang dipaku. Blur dijaga tipis dan
   bayangannya rendah: yang memisahkannya dari halaman adalah garis rambut
   yang sama dengan seluruh sistem, bukan cahaya yang mengambang. */
body.sisi-user{padding-top:calc(var(--nav-h) + 28px)}

.nav-lapis{
  position:fixed;top:14px;left:0;right:0;z-index:1030;
  padding:0 18px;pointer-events:none;
}
.topnav{
  max-width:1240px;margin:0 auto;height:var(--nav-h);pointer-events:auto;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 10px 26px -20px rgba(23,16,43,.45);
  display:flex;align-items:center;gap:18px;padding:0 16px 0 14px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex-shrink:0}
.brand-mark{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(150deg,var(--lilac),var(--indigo));
  display:grid;place-items:center;color:#fff;font-size:.9rem;
}
.brand b{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.02rem;display:block;line-height:1.15}
/* Logo DAG berlatar putih, jadi ditempatkan di kotak putih membulat
   supaya tetap bersih di atas sidebar admin yang gelap. */
.brand-mark.brand-logo{background:#fff;padding:3px;overflow:hidden}
.brand-mark.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand span{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);display:block}

/* Menu teks di tengah; kelompok ikon menempel ke kanan */
.mainnav{display:flex;align-items:center;gap:2px;margin:0 auto}
.navlink{
  display:flex;align-items:center;gap:7px;padding:8px 14px;border:0;background:none;
  border-radius:9px;color:var(--muted);font:inherit;font-size:.88rem;font-weight:500;
  cursor:pointer;text-decoration:none;transition:color .16s,background .16s;white-space:nowrap;
}
.navlink:hover{color:var(--ink);background:var(--manifest)}
.navlink.is-active{color:var(--indigo);font-weight:600;background:rgba(133,91,166,.1)}

.navtool{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ikonlink{
  position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  color:var(--muted);text-decoration:none;font-size:1.02rem;
  transition:color .16s,background .16s;
}
.ikonlink:hover{color:var(--ink);background:var(--manifest)}
.ikonlink.is-active{color:var(--indigo);background:rgba(133,91,166,.1)}
.ikonlink .count,.navlink .count{
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:700;
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--stamp);color:#fff;display:grid;place-items:center;
}
.ikonlink .count{position:absolute;top:2px;right:1px;border:2px solid #fff}

.lang{display:flex;border:1px solid var(--rule);border-radius:9px;overflow:hidden;flex-shrink:0;margin-right:2px}
.lang a{
  border:0;background:#fff;padding:6px 10px;font-family:'IBM Plex Mono',monospace;
  font-size:.71rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
  text-decoration:none;transition:.16s;
}
.lang a:hover{background:var(--manifest);color:var(--ink)}
.lang a.is-active{background:var(--indigo);color:#fff}
#navToggle{display:none;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--rule);background:#fff;color:var(--ink-2);place-items:center;cursor:pointer}

/* ── Halaman layanan dan kontak ───────────────────────────────── */
.layanan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.layanan{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:22px;
}
.layanan-ikon{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(150deg,var(--lilac),var(--indigo));color:#fff;font-size:1.05rem;
}
.layanan h2{font-size:1.02rem;font-weight:700;margin-bottom:8px}
.layanan p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0}

.layanan-tautan{
  display:inline-block;margin-top:12px;font-size:.86rem;font-weight:600;
  color:var(--indigo);text-decoration:none;
}
.layanan-tautan:hover{text-decoration:underline}

/* Tabel banding maklon. Kolom pertama menamai apa yang dibandingkan, dua
   kolom sisanya dua pilihan yang sedang ditimbang — jadi kepala barisnya
   ikut menjadi th, bukan sekadar sel biasa.
   Aturan padding tabel bersama hanya menyasar td, sehingga kepala baris di
   dalam tbody tidak pernah tersentuh dan jatuh ke bawaan peramban. Di sini
   ia diberi paddingnya sendiri, sedikit lebih lega di kiri karena kolom itu
   yang menamai barisnya. */
.banding th[scope=row]{
  width:30%;min-width:170px;
  padding:13px 16px 13px 20px;
  font-family:inherit;text-transform:none;letter-spacing:0;
  font-size:.86rem;font-weight:600;color:var(--ink-2);
  /* Bukan var(--manifest): warna itu sama persis dengan latar halaman,
     1,00:1, sehingga kolomnya terbaca menyatu alih-alih sebagai pita
     tersendiri. Nada yang lebih dalam ini 1,46:1 terhadap panel putih di
     sebelahnya, dan teksnya tetap 11,08:1. Garis kanan menegaskan
     pembagiannya: kolom ini menamai, dua kolom sisanya menjawab. */
  background:#d3d7ca;border-bottom:1px solid #c3c8b6;border-right:1px solid #c3c8b6;
  vertical-align:middle;
}
.banding tbody tr:last-child th[scope=row]{border-bottom:0}
.banding thead th{font-size:.8rem}
.banding td{font-size:.88rem;color:var(--muted);line-height:1.55}

/* Penanda asal. Isiannya pekat, bukan warna tembus pandang: di atas kolom
   label yang sudah berwarna kertas, warna beralfa rendah kehilangan
   bentuknya dan terbaca sebagai noda.
   Bobotnya sengaja tidak sama. "Dari Anda" muncul tiga kali dari empat —
   itu keadaan yang lazim. Yang benar-benar membedakan kedua pilihan hanya
   satu sel: spesifikasi yang datang dari pabrik. Sel itu yang diberi warna
   penuh, sisanya dibiarkan tenang, supaya mata jatuh ke tempat perbedaannya
   sungguh berada. */
.asal{
  display:inline-block;padding:4px 12px;border-radius:20px;
  font-size:.78rem;font-weight:600;border:1px solid transparent;white-space:nowrap;
}
.asal-pabrik{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.asal-buyer{background:#dbe9e7;color:#155450;border-color:#c2dbd8}

.pasar-daftar{display:flex;flex-wrap:wrap;gap:8px}
.pasar{
  background:var(--manifest);border:1px solid var(--rule);border-radius:8px;
  padding:6px 12px;font-size:.85rem;font-weight:500;color:var(--ink-2);
}

.layanan-ajak{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.layanan-ajak h2{font-size:1.05rem;font-weight:700;margin-bottom:5px}
.layanan-ajak p{color:var(--muted);font-size:.9rem;margin:0;max-width:56ch}

/* ── Laci keranjang ───────────────────────────────────────────── */
.laci-tirai{
  position:fixed;inset:0;z-index:1040;background:rgba(23,16,43,.42);
  opacity:0;transition:opacity .26s;
}
.laci-tirai.is-on{opacity:1}
.laci{
  position:fixed;top:0;right:0;bottom:0;z-index:1041;width:min(420px,100%);
  background:var(--paper);border-left:1px solid var(--rule);
  box-shadow:-24px 0 48px -32px rgba(23,16,43,.5);
  transform:translateX(100%);transition:transform .26s ease;
  display:flex;flex-direction:column;
}
.laci.is-open{transform:translateX(0)}
body.laci-terbuka{overflow:hidden}

.laci-kepala{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--rule);flex-shrink:0;
}
.laci-kepala h2{font-size:1.05rem;font-weight:700}
.laci-kepala button{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--rule);background:#fff;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;font-size:1rem;transition:.16s;
}
.laci-kepala button:hover{color:var(--ink);background:var(--manifest)}

.laci-badan{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column}
.laci-tunggu{padding:34px 20px;text-align:center;color:var(--muted);font-size:.9rem}
.laci-isi{padding:6px 20px;flex:1 1 auto}

.laci-baris{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--rule-soft);align-items:flex-start}
.laci-baris:last-child{border-bottom:0}
.laci-gambar{
  width:60px;height:60px;flex-shrink:0;border-radius:10px;border:1px solid var(--rule-soft);
  background:var(--manifest);display:grid;place-items:center;overflow:hidden;color:var(--lilac);
}
.laci-gambar img{width:100%;height:100%;object-fit:contain;padding:5px;display:block}
.laci-teks{flex:1 1 auto;min-width:0}
.laci-teks h3{font-size:.88rem;font-weight:600;line-height:1.35;margin-bottom:2px}
.laci-kode{font-size:.68rem;color:var(--muted-2);display:block;margin-bottom:8px}
.laci-kaki{display:flex;align-items:center;justify-content:space-between;gap:10px}
.laci-harga{font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;color:var(--indigo)}
.laci-satuan{display:block;margin-top:6px;font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;color:var(--muted-2)}

.laci-qty{display:flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;height:32px;background:#fff}
.laci-qty button{
  width:28px;border:0;background:var(--manifest);color:var(--ink-2);font-weight:700;
  cursor:pointer;display:grid;place-items:center;font-size:.85rem;transition:background .16s;
}
.laci-qty button:hover{background:var(--rule-soft)}
.laci-qty input{
  width:52px;border:0;border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.8rem;
  color:var(--ink);-moz-appearance:textfield;background:#fff;
}
.laci-qty input::-webkit-outer-spin-button,.laci-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.laci-qty input:focus{outline:none;background:#fdfcff}

.laci-buang button{
  width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--muted-2);cursor:pointer;display:grid;place-items:center;font-size:.85rem;transition:.16s;
}
.laci-buang button:hover{color:var(--stamp);border-color:var(--rule);background:#fff}

.laci-kaki-panel{
  flex-shrink:0;padding:18px 20px;border-top:1px solid var(--rule);background:var(--manifest);
}
.laci-nota{font-size:.78rem;color:var(--muted);margin:8px 0 14px}
.laci-lanjut{display:block;text-align:center;margin-top:12px;font-size:.85rem;
  color:var(--indigo);text-decoration:none;font-weight:500}
.laci-lanjut:hover{text-decoration:underline}
.laci-kosong{padding:56px 24px;text-align:center}
.laci-kosong i{font-size:2rem;color:var(--rule);display:block;margin-bottom:14px}
.laci-kosong b{display:block;font-size:1rem;margin-bottom:6px}
.laci-kosong p{color:var(--muted);font-size:.88rem;margin-bottom:18px}

/* Latar hero: kolase produk dari situs resmi, diberi lapisan gradasi
   supaya teks di atasnya tetap terbaca. */
/* Hero ditarik naik sampai batas atas halaman sehingga header yang
   menggantung melayang di atasnya, bukan bersanding di bawahnya. Ruang yang
   hilang itu dikembalikan sebagai padding di dalam hero-grid, jadi teksnya
   tetap bebas dari header. */
.hero{
  position:relative;overflow:hidden;
  margin-top:calc(-1 * (var(--nav-h) + 28px));
}
/* Banner redirect berada di atas hero, jadi hero tidak ditarik naik di sana:
   yang tertutup header justru pesannya. */
.entry-banner + .hero{margin-top:0}

.hero::before{
  content:"";position:absolute;inset:0;
  background:url("../img/hero-produk.png") right bottom / auto 118% no-repeat;
  pointer-events:none;
}
/* Selubung gradasi: gambar tampil penuh di kanan lalu memudar ke kertas di
   kiri, tempat teksnya berdiri. Tanpa ini judul putih-hitam bertabrakan
   dengan kemasan produk yang ramai. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    var(--paper) 26%,
    rgba(255,255,255,.94) 44%,
    rgba(255,255,255,.62) 66%,
    rgba(255,255,255,.28) 100%);
}
.hero-grid{position:relative;z-index:1}
@media (max-width:1080px){
  .hero::before{background-position:center bottom;background-size:auto 82%}
  .hero::after{background:linear-gradient(180deg,var(--paper) 38%,rgba(255,255,255,.9) 62%,rgba(255,255,255,.5) 100%)}
}
.brand span{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);display:block}

.mainnav{display:flex;align-items:center;gap:3px;margin-left:auto}
.navlink{
  display:flex;align-items:center;gap:7px;padding:7px 13px;border:0;background:none;
  border-radius:8px;color:var(--muted);font:inherit;font-size:.87rem;font-weight:500;
  cursor:pointer;text-decoration:none;transition:color .16s,background .16s;white-space:nowrap;
}
.navlink i{font-size:.82rem}
.navlink:hover{color:var(--ink);background:var(--manifest)}
.navlink.is-active{color:var(--indigo);font-weight:600;background:rgba(133,91,166,.1)}
.navlink .count{
  font-family:'IBM Plex Mono',monospace;font-size:.63rem;font-weight:600;min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;background:var(--stamp);color:#fff;display:grid;place-items:center;
}
.lang{display:flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;flex-shrink:0;margin-left:8px}
.lang a{
  border:0;background:#fff;padding:6px 11px;font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
  text-decoration:none;transition:.16s;
}
.lang a:hover{background:var(--manifest);color:var(--ink)}
.lang a.is-active{background:var(--indigo);color:#fff}
#navToggle{display:none;margin-left:auto;width:38px;height:38px;border-radius:9px;
  border:1px solid var(--rule);background:#fff;color:var(--ink-2);place-items:center;cursor:pointer}

.shell{max-width:1240px;margin:0 auto;padding:0 32px}
.section{padding-top:34px;padding-bottom:34px}
.view-head{margin-bottom:26px}
.view-head h1{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;margin-bottom:6px}
.view-head p{color:var(--muted);font-size:.95rem;margin:0;max-width:64ch}

/* Hero — kertas bergaris seperti formulir manifest */
.hero{
  border-bottom:1px solid var(--rule);
  background:
    repeating-linear-gradient(180deg,transparent 0 31px,var(--rule-soft) 31px 32px),
    var(--paper);
}
.hero-grid{
  max-width:1240px;margin:0 auto;
  padding:calc(56px + var(--nav-h) + 28px) 26px 48px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
}
.hero h1{font-size:clamp(2rem,4.6vw,3.15rem);font-weight:800;line-height:1.06;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--indigo);display:block}
.hero .lede{font-size:1.02rem;color:var(--muted);max-width:46ch;margin-bottom:24px}
.hero-facts{display:flex;gap:26px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--rule)}
.hero-facts .f b{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.35rem;display:block;line-height:1}
.hero-facts .f span{font-family:'IBM Plex Mono',monospace;font-size:.67rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);display:block;margin-top:5px}

.quote-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px -22px rgba(23,16,43,.28);
}
.quote-head{
  padding:14px 20px;border-bottom:1px solid var(--rule-soft);background:var(--manifest);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.quote-head .t{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.quote-head .live{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;color:var(--transit);letter-spacing:.06em}
.quote-head .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--transit)}
.quote-body{padding:20px}
.quote-total{display:flex;align-items:baseline;gap:10px;margin:18px 0 4px}
.quote-total b{font-family:'Archivo',sans-serif;font-weight:800;font-size:3.1rem;line-height:1;letter-spacing:-.03em}
.quote-total span{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--muted);letter-spacing:.06em}
.quote-note{font-size:.82rem;color:var(--muted);margin:12px 0 0}

.filter-bar{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:14px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:22px;
}
.search-wrap{position:relative;flex:1 1 260px;min-width:0}
.search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted-2);font-size:.85rem}
.search-wrap input{padding-left:38px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  border:1px solid var(--rule);background:#fff;color:var(--muted);border-radius:20px;
  padding:6px 15px;font-size:.82rem;font-weight:500;cursor:pointer;transition:.18s;
  white-space:nowrap;text-decoration:none;display:inline-block;
}
.chip:hover{border-color:var(--lilac);color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.result-count{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--muted-2);
  letter-spacing:.05em;margin-left:auto;white-space:nowrap}

/* Kartu produk */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.pcard{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:border-color .22s,box-shadow .22s,transform .22s;
}
.pcard:hover{border-color:var(--lilac);box-shadow:0 14px 30px -18px rgba(23,16,43,.32);transform:translateY(-3px)}
.pcard.is-target{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(43,20,100,.12)}
.pcard-top{
  /* Kotaknya persegi mengikuti aset produk yang memang 1:1, dengan batas
     tinggi supaya kartu di layar lebar tidak ikut memanjang. overflow
     mengurung efek perbesaran saat kursor lewat. */
  /* min-height menjaga kotak tetap punya tinggi bila aspect-ratio tidak
     didukung; tanpa itu kotaknya runtuh karena gambarnya di luar alur. */
  aspect-ratio:1/1;max-height:240px;min-height:110px;
  background:var(--manifest);border-bottom:1px solid var(--rule-soft);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.pcard-ico{
  width:66px;height:66px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--lilac),var(--indigo));color:#fff;font-size:1.6rem;
  box-shadow:0 10px 20px -8px rgba(43,20,100,.5);transition:transform .25s;
}
.pcard:hover .pcard-ico{transform:translateY(-3px) scale(1.04)}
/* Gambar produk memenuhi kepala kartu; ikon dipakai bila belum bergambar */
.pcard-img{
  /* Ditambatkan ke keempat sisi kotaknya, bukan diberi tinggi persen.
     Tinggi persen bergantung pada tinggi induk yang terselesaikan; begitu
     tidak terselesaikan, gambar jatuh ke tinggi alaminya — pada aset 1:1
     itu berarti setinggi lebar kartu, dan ia menindih judul di bawahnya. */
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:contain;display:block;padding:12px;
  transition:transform .25s;
}
.pcard:hover .pcard-img{transform:scale(1.05)}
#gridProduk{transition:opacity .18s}
.pcode{
  position:absolute;top:11px;left:11px;z-index:2;background:#fff;border:1px solid var(--rule);
  padding:3px 8px;border-radius:6px;font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;font-weight:600;letter-spacing:.05em;color:var(--ink-2);
  box-shadow:0 1px 4px rgba(23,16,43,.16);
}
/* Pil ketersediaan memakai warna tembus pandang, yang memang tepat ketika ia
   duduk di atas kertas putih di halaman lain. Di sini ia berada di atas foto
   produk, jadi warnanya bercampur dengan gambar dan hilang terbaca pada foto
   gelap. Alas putih pekat dipasang di belakangnya, bukan pilnya yang diubah,
   supaya seluruh ragam warna pil tetap berlaku apa adanya — termasuk yang
   ditambahkan kemudian. */
.pstock{
  position:absolute;top:11px;right:11px;z-index:2;
  display:flex;background:#fff;border-radius:20px;
  box-shadow:0 1px 4px rgba(23,16,43,.16);
}
.pcard-body{padding:15px;display:flex;flex-direction:column;flex:1 1 auto}
.pcat{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--muted-2);
  letter-spacing:.05em;display:flex;align-items:center;gap:6px;margin-bottom:7px}
.pcat::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--lilac);flex-shrink:0}
.ptitle{
  font-size:.95rem;font-weight:600;line-height:1.38;margin-bottom:13px;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pprice{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:13px}
.pprice .amt{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.3rem;line-height:1;color:var(--indigo)}
.pprice .unit{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--muted-2);display:block;margin-top:4px}
.moq{
  background:var(--manifest);border:1px solid var(--rule);color:var(--ink-2);
  padding:3px 8px;border-radius:6px;font-family:'IBM Plex Mono',monospace;
  font-size:.69rem;font-weight:600;white-space:nowrap;
}
.peta{border-top:1px dashed var(--rule);padding-top:11px;margin-bottom:13px}
.peta-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.peta-row .lbl{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2)}
.peta-row .val{font-family:'Archivo',sans-serif;font-weight:700;font-size:.92rem}
.pactions{margin-top:auto;display:flex;gap:9px}

.qty{display:flex;border:1px solid var(--rule);border-radius:9px;overflow:hidden;height:40px;flex-shrink:0;background:#fff}
.qty button{
  width:32px;border:0;background:var(--manifest);color:var(--ink-2);font-weight:700;
  cursor:pointer;transition:background .16s;display:grid;place-items:center;font-size:.9rem;
}
.qty button:hover{background:var(--rule-soft)}
.qty input{
  width:48px;border:0;border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.85rem;
  color:var(--ink);-moz-appearance:textfield;background:#fff;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:none;background:#fdfcff}
.add{flex:1 1 auto;height:40px;border-radius:9px;display:grid;place-items:center;padding:0 12px}

/* Keranjang */
.cart-layout{display:grid;grid-template-columns:1fr 350px;gap:20px;align-items:start}
/* Ringkasan tetap terlihat sementara isian digulir: di titik menyanggupi
   pesanan, angka yang akan dibayar tidak boleh hilang dari layar. Jarak
   atasnya memberi ruang untuk header yang menggantung. */
.cart-layout > aside{position:sticky;top:calc(var(--nav-h) + 32px)}

/* Penanda bagian di dalam satu panel. Sengaja bukan kartu terpisah
   berbayang: memotong isian jadi kartu-kartu seragam membuat setiap bagian
   tampak sama pentingnya, padahal tujuan dan identitas adalah dua langkah
   berurutan pada satu formulir. */
.bagian-label{
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:12px;
}
.cart-line{display:grid;grid-template-columns:56px 1fr auto;gap:15px;align-items:center;
  padding:15px 19px;border-bottom:1px solid var(--rule-soft)}
.cart-line:last-child{border-bottom:0}
.cart-thumb{width:56px;height:56px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--lilac),var(--indigo));color:#fff;font-size:1.1rem}
.cart-info b{display:block;font-size:.9rem;font-weight:600;line-height:1.35}
.cart-info span{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted-2)}
.cart-ctrl{display:flex;align-items:center;gap:13px}
.cart-sum{font-family:'Archivo',sans-serif;font-weight:700;font-size:.98rem;min-width:82px;text-align:right}
.icon-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--rule);background:#fff;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.16s;flex-shrink:0;
}
.icon-btn:hover{border-color:var(--stamp);color:var(--stamp);background:rgba(193,52,45,.05)}

.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;font-size:.9rem}
.sum-row .k{color:var(--muted)}
.sum-row .v{font-family:'IBM Plex Mono',monospace;font-weight:600}
.sum-total{border-top:1px solid var(--rule);margin-top:9px;padding-top:14px}
.sum-total .k{font-weight:600;color:var(--ink);font-size:.95rem}
.sum-total .v{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.5rem;color:var(--indigo)}

/* Checkout */
.step-rail{display:flex;margin-bottom:26px;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#fff}
.step{flex:1 1 0;padding:13px 17px;border-right:1px solid var(--rule-soft);
  display:flex;gap:11px;align-items:center;min-width:0}
.step:last-child{border-right:0}
.step .n{
  width:25px;height:25px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;
  background:var(--manifest);border:1px solid var(--rule);color:var(--muted);
}
.step .s{min-width:0}
.step .s b{display:block;font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step .s span{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:var(--muted-2)}
.step.is-on{background:rgba(133,91,166,.07)}
.step.is-on .n{background:var(--indigo);border-color:var(--indigo);color:#fff}
.step.is-done .n{background:var(--transit);border-color:var(--transit);color:#fff}

/* Akun & notifikasi */
.acct-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-soft);font-size:.88rem}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted);flex-shrink:0}
.kv .v{font-weight:600;text-align:right;word-break:break-word}

.track{list-style:none;margin:0;padding:0}
.track li{display:flex;gap:14px;padding-bottom:19px;position:relative}
.track li:last-child{padding-bottom:0}
.track li::before{content:"";position:absolute;left:8px;top:20px;bottom:-2px;width:1px;background:var(--rule)}
.track li:last-child::before{display:none}
.track .dot{width:17px;height:17px;border-radius:50%;flex-shrink:0;background:#fff;
  border:2px solid var(--rule);margin-top:3px;z-index:1}
.track li.is-done .dot{background:var(--transit);border-color:var(--transit)}
.track li.is-now .dot{background:var(--indigo);border-color:var(--indigo);box-shadow:0 0 0 4px rgba(43,20,100,.14)}
.track .tx b{display:block;font-size:.88rem;font-weight:600}
.track .tx span{font-family:'IBM Plex Mono',monospace;font-size:.69rem;color:var(--muted-2)}

.notif{display:flex;gap:14px;padding:15px 19px;border-bottom:1px solid var(--rule-soft);align-items:flex-start}
.notif:last-child{border-bottom:0}
.notif.is-new{background:rgba(133,91,166,.05)}
.notif-ico{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:var(--manifest);border:1px solid var(--rule);color:var(--indigo);font-size:.84rem}
.notif-ico.warn{color:var(--amber)}
.notif-ico.good{color:var(--transit)}
.notif-tx{flex:1 1 auto;min-width:0}
.notif-tx b{display:block;font-size:.88rem;font-weight:600;margin-bottom:2px}
.notif-tx p{margin:0;font-size:.84rem;color:var(--muted)}
.notif-tx time{font-family:'IBM Plex Mono',monospace;font-size:.67rem;color:var(--muted-2);display:block;margin-top:5px}

/* Banner pintu masuk redirect dari web katalog */
.entry-banner{
  background:var(--ink);color:#fff;padding:11px 26px;font-size:.86rem;
  display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;
}
.entry-banner .mono{color:var(--lilac)}
.entry-banner a{color:rgba(255,255,255,.85);text-decoration:underline}

/* Sasaran tautan Kontak. Tanpa jarak ini baris pertama footer berhenti
   tepat di bawah header yang menggantung dan tertutup olehnya. */
footer.situs{scroll-margin-top:calc(var(--nav-h) + 28px)}
footer.situs{background:var(--ink);color:rgba(255,255,255,.66);padding:52px 0 26px;margin-top:60px}
footer.situs h5{color:#fff;font-size:.9rem;font-weight:700;margin-bottom:15px;letter-spacing:0}
footer.situs a{color:rgba(255,255,255,.66);text-decoration:none;transition:color .16s}
footer.situs a:hover{color:#fff}
footer.situs ul{list-style:none;margin:0;padding:0}
footer.situs li{margin-bottom:9px;font-size:.86rem}
footer.situs .fbar{
  border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:rgba(255,255,255,.42);
}

/* ═══ PANEL ADMIN ══════════════════════════════════════════════ */
body.sisi-admin{font-size:14.5px;line-height:1.55}
#shell{display:flex;min-height:100vh}
#rail{
  width:var(--rail-w);position:fixed;top:0;left:0;bottom:0;z-index:1040;
  background:var(--ink);color:#fff;display:flex;flex-direction:column;transition:transform .28s ease;
}
#main{margin-left:var(--rail-w);flex:1 1 auto;min-width:0;display:flex;flex-direction:column}

.rail-brand{padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;gap:11px;flex-shrink:0}
.rail-brand .brand-mark{background:linear-gradient(150deg,var(--lilac) 0%,var(--indigo) 100%)}
.brand-text{line-height:1.15;min-width:0}
.brand-text b{font-family:'Archivo',sans-serif;font-weight:800;font-size:.95rem;
  letter-spacing:-.01em;display:block;color:#fff}
.brand-text span{font-family:'IBM Plex Mono',monospace;font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}

.rail-nav{flex:1 1 auto;overflow-y:auto;padding:14px 0 10px;scrollbar-width:thin}
.rail-nav::-webkit-scrollbar{width:5px}
.rail-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.nav-group{font-family:'IBM Plex Mono',monospace;font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.34);padding:16px 20px 7px}
.nav-group:first-child{padding-top:2px}
.rail-nav ul{list-style:none;margin:0;padding:0}
.rail-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 20px 9px 17px;border:0;background:none;color:rgba(255,255,255,.72);
  font:inherit;font-size:.875rem;text-decoration:none;cursor:pointer;
  border-left:3px solid transparent;transition:background .16s,color .16s,border-color .16s;
}
.rail-item i.ico{width:17px;text-align:center;font-size:.85rem;opacity:.85;flex-shrink:0}
.rail-item .lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-item .code{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.05em;
  color:rgba(255,255,255,.3);flex-shrink:0}
.rail-item:hover{background:rgba(255,255,255,.05);color:#fff}
.rail-item.is-active{background:rgba(133,91,166,.16);color:#fff;border-left-color:var(--lilac);font-weight:600}
.rail-item.is-active .code{color:var(--lilac)}
.rail-foot{flex-shrink:0;padding:13px 20px;border-top:1px solid rgba(255,255,255,.09);
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:rgba(255,255,255,.36);
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.rail-foot a{color:rgba(255,255,255,.6);text-decoration:none}
.rail-foot a:hover{color:#fff}

.topbar{
  position:sticky;top:0;z-index:1020;background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--rule);padding:11px 26px;display:flex;align-items:center;gap:16px;
}
.topbar .tb-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.02rem;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-code{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.09em;
  background:var(--manifest);border:1px solid var(--rule);color:var(--indigo);
  padding:2px 7px;border-radius:5px;flex-shrink:0}
.tb-spacer{flex:1 1 auto}
.tb-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--rule);background:#fff;
  color:var(--ink-2);display:grid;place-items:center;position:relative;cursor:pointer;
  transition:border-color .16s,color .16s;text-decoration:none}
.tb-btn:hover{border-color:var(--lilac);color:var(--indigo)}
.tb-btn .dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--stamp);color:#fff;font-family:'IBM Plex Mono',monospace;
  font-size:.6rem;font-weight:600;display:grid;place-items:center;border:2px solid #fff}
.tb-user{display:flex;align-items:center;gap:9px;border:0;background:none;cursor:pointer;padding:0;
  color:inherit;text-align:left;text-decoration:none}
.tb-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(150deg,var(--lilac),var(--indigo));color:#fff;display:grid;
  place-items:center;font-family:'Archivo',sans-serif;font-weight:700;font-size:.8rem}
.tb-user .who{line-height:1.2}
.tb-user .who b{display:block;font-size:.8rem;font-weight:600}
.tb-user .who span{display:block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--muted-2)}
.tb-locale{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.09em;
  color:var(--muted);border-left:1px solid var(--rule);padding-left:14px;white-space:nowrap}

.page{padding:26px 26px 56px;flex:1 1 auto}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:1.55rem;font-weight:700;margin:0 0 5px}
.page-head p{color:var(--muted);font-size:.9rem;margin:0;max-width:62ch}

.stat-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:15px 17px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rule)}
.stat.is-alert::after{background:var(--stamp)}
.stat.is-wait::after{background:var(--amber)}
.stat.is-good::after{background:var(--transit)}
.stat.is-key::after{background:var(--indigo)}
.stat.is-move::after{background:var(--lilac)}
.stat .k{font-family:'IBM Plex Mono',monospace;font-size:.67rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.stat .v{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.85rem;line-height:1;letter-spacing:-.02em}
.stat .d{font-size:.76rem;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:5px}

.mini-list{list-style:none;margin:0;padding:0}
.mini-list li{display:flex;align-items:center;gap:13px;padding:12px 18px;border-bottom:1px solid var(--rule-soft)}
.mini-list li:last-child{border-bottom:0}
.mini-list .m-main{flex:1 1 auto;min-width:0}
.mini-list .m-main b{display:block;font-size:.86rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mini-list .m-main span{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--muted-2)}
.mini-list .m-side{text-align:right;flex-shrink:0}

.eta-row{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.eta-row:last-child{border-bottom:0;padding-bottom:0}
.eta-row .cty{font-weight:600;font-size:.85rem}
.eta-row .cty small{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  color:var(--muted-2);font-weight:400}

.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tile{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:18px;
  display:flex;flex-direction:column;gap:9px}
.tile .t-ico{width:34px;height:34px;border-radius:8px;background:var(--manifest);
  border:1px solid var(--rule);display:grid;place-items:center;color:var(--indigo);font-size:.88rem}
.tile h3{font-size:.92rem;font-weight:700;margin:0}
.tile p{font-size:.82rem;color:var(--muted);margin:0;flex:1 1 auto}

/* Tabel */
.tbl-wrap{overflow-x:auto}
table.dataTable,.tbl{width:100%!important;font-size:.86rem;margin:0!important;border-collapse:collapse}
table.dataTable thead th,.tbl thead th{
  font-family:'IBM Plex Mono',monospace;font-size:.66rem!important;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600;background:#f7f8f4;
  border-bottom:1px solid var(--rule)!important;border-top:0!important;
  padding:10px 14px!important;white-space:nowrap;
}
table.dataTable tbody td,.tbl tbody td{padding:11px 14px!important;
  border-bottom:1px solid var(--rule-soft)!important;vertical-align:middle;color:var(--ink-2)}
table.dataTable tbody tr:last-child td,.tbl tbody tr:last-child td{border-bottom:0!important}
table.dataTable tbody tr:hover td,.tbl tbody tr:hover td{background:#faf9fc}
.cell-strong{font-weight:600;color:var(--ink)}
/* Baris yang sedang dibuka pada layar bertingkat Negara & Pelabuhan */
.baris-terpilih td{background:rgba(133,91,166,.09)!important}
.baris-terpilih td:first-child{box-shadow:inset 3px 0 0 var(--lilac)}
/* Gambar produk pada tabel admin dan modal */
.thumb-produk{
  width:42px;height:42px;border-radius:8px;object-fit:cover;
  border:1px solid var(--rule);background:var(--manifest);display:block;
}
.thumb-kosong{display:grid;place-items:center;color:var(--muted-2);font-size:.95rem}
.pratinjau-gambar{
  max-width:150px;max-height:150px;border-radius:10px;
  border:1px solid var(--rule);object-fit:cover;
}
.dataTables_processing{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--muted);
  background:rgba(255,255,255,.92);border:1px solid var(--rule);border-radius:8px;padding:6px 12px;
}
.cell-sub{display:block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;
  color:var(--muted-2);font-weight:400;margin-top:1px}
.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;text-align:right}
.num-zero{color:var(--muted-2)}
.num-low{color:var(--stamp);font-weight:600}

.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length{padding:13px 16px 11px}
.dataTables_wrapper .dataTables_filter{float:right}
.dataTables_wrapper .dataTables_length{float:left}
.dataTables_wrapper .dataTables_filter label,.dataTables_wrapper .dataTables_length label{
  font-size:.78rem;color:var(--muted);font-weight:500;margin:0;display:flex;align-items:center;gap:8px}
.dataTables_wrapper .dataTables_filter input{border:1px solid var(--rule);border-radius:8px;
  padding:.32rem .7rem;font-size:.83rem;margin:0!important;min-width:190px;color:var(--ink)}
.dataTables_wrapper .dataTables_filter input:focus{outline:none;border-color:var(--lilac);
  box-shadow:0 0 0 3px rgba(133,91,166,.15)}
.dataTables_wrapper .dataTables_info{padding:12px 16px;font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;color:var(--muted-2);border-top:1px solid var(--rule-soft)}
.dataTables_wrapper .dataTables_paginate{padding:9px 16px;border-top:1px solid var(--rule-soft)}
.dataTables_wrapper .page-link{color:var(--indigo);border-color:var(--rule);font-size:.8rem;
  font-family:'IBM Plex Mono',monospace}
.dataTables_wrapper .page-item.active .page-link{background:var(--indigo);border-color:var(--indigo);color:#fff}
.dataTables_wrapper .page-item.disabled .page-link{color:var(--muted-2)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;margin-bottom:16px}

.rail-scrim{position:fixed;inset:0;background:rgba(23,16,43,.5);z-index:1035;opacity:0;
  pointer-events:none;transition:opacity .25s}
.rail-scrim.is-on{opacity:1;pointer-events:auto}
#tbMenu{display:none}

/* ── Responsif ───────────────────────────────────────────────── */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:34px;padding:42px 26px 40px}
  .cart-layout,.acct-grid{grid-template-columns:1fr}
}
@media (max-width:991px){
  #rail{transform:translateX(-100%)}
  #rail.is-open{transform:translateX(0)}
  #main{margin-left:0}
  #tbMenu{display:grid}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .page{padding:20px 16px 46px}
  .topbar{padding:10px 16px;gap:11px}
  .tb-user .who,.tb-locale{display:none}
}
@media (max-width:900px){
  /* Menu teks turun ke panel yang menempel di bawah header menggantung,
     mengikuti lebar dan lengkung header itu — bukan pita selebar layar,
     karena headernya sendiri tidak lagi selebar layar. Kelompok ikon tetap
     di tempatnya: bahasa, akun, dan keranjang justru paling sering dipakai
     di layar kecil. */
  #navToggle{display:grid;order:-1}
  .mainnav{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:#fff;border:1px solid var(--rule);border-radius:14px;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;margin:0;display:none;
    box-shadow:0 18px 34px -22px rgba(23,16,43,.45);
  }
  .topnav{position:relative;gap:10px}
  .mainnav.is-open{display:flex}
  .navlink{justify-content:flex-start;padding:11px 14px}
  .brand span{display:none}
  .step-rail{flex-direction:column}
  .step{border-right:0;border-bottom:1px solid var(--rule-soft)}
  .step:last-child{border-bottom:0}
}
@media (max-width:560px){
  /* Nama merek disembunyikan, bukan dikecilkan: logo sudah menandainya, dan
     ruang yang tersisa lebih berguna untuk ikon yang bisa ditekan. */
  .nav-lapis{padding:0 12px}
  .topnav{gap:8px;padding:0 10px}
  .brand b{display:none}
  .lang a{padding:6px 8px;font-size:.68rem}
  .ikonlink{width:34px;height:34px;font-size:.95rem}
  .laci{width:100%}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .shell,.topnav{padding-left:20px;padding-right:20px}
  .hero-grid{padding:32px 16px 34px}
  .section{padding-top:24px;padding-bottom:24px}
  .filter-bar{padding:12px}
  .result-count{margin-left:0;width:100%}
  .cart-line{grid-template-columns:44px 1fr;row-gap:12px}
  .cart-ctrl{grid-column:1/-1;justify-content:space-between}
  .cart-thumb{width:44px;height:44px;font-size:.95rem}
  .quote-total b{font-size:2.5rem}
  .stat .v{font-size:1.55rem}
  .page-head h1{font-size:1.3rem}
}
/* ── Katalog: jumlah kolom mengikuti lebar layar ──────────────
   Tangganya sengaja ditulis eksplisit, bukan diserahkan ke auto-fill.
   Dengan auto-fill, layar 360px hanya memuat satu kartu karena lebar
   minimumnya tidak terpenuhi — padahal dua kartu berdampingan jauh lebih
   berguna di layar segitu: pengunjung bisa membandingkan tanpa menggulir. */
@media (max-width:1023px){
  .grid{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media (max-width:767px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* Baris jumlah dan tombol tambah butuh sekitar 210px untuk berdampingan.
   Di bawah itu keduanya ditumpuk — ini soal muat atau tidak, jadi batasnya
   dipisahkan dari pengecilan huruf yang sekadar soal rasa. */
@media (max-width:560px){
  .pactions{flex-direction:column;gap:7px}
  .qty{width:100%;height:36px}
  .qty button{width:34px}
  .qty input{flex:1 1 auto;width:auto}
  .add{width:100%;height:36px;font-size:.85rem}
}

/* Pengecilan isi baru berlaku ketika kartunya benar-benar sempit, sekitar
   200px ke bawah. Di 481-767px dua kolom masih selebar kartu desktop, jadi
   mengecilkan hurufnya di sana hanya membuang ruang yang ada. */
@media (max-width:480px){
  /* Nama perusahaan yang lebih panjang menyisakan sedikit ruang di bilah
     atas. Tagline disembunyikan dan nama dibiarkan menyusut, supaya tombol
     menu tidak terdorong keluar: body memotong luapan mendatar, jadi tombol
     yang terdorong benar-benar hilang, bukan sekadar bergeser. */
  .brand{flex-shrink:1;min-width:0}
  .brand > span{min-width:0}
  .brand b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand b + span{display:none}

  .pcard-top{max-height:none}
  .pcard-img{padding:8px}
  .pcard-ico{width:50px;height:50px;border-radius:12px;font-size:1.2rem}
  .pcard-body{padding:11px}
  .pcode{top:8px;left:8px;padding:2px 6px;font-size:.62rem}
  .pstock{top:8px;right:8px}
  .pcat{font-size:.62rem;margin-bottom:5px}
  .ptitle{font-size:.84rem;line-height:1.32;margin-bottom:9px;min-height:2.4em}

  .pprice{flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:9px}
  .pprice .amt{font-size:1.08rem}
  .moq{font-size:.63rem;padding:2px 6px}

  .peta{padding-top:8px;margin-bottom:9px}
  .peta-row{margin-bottom:5px}
  .peta-row .val{font-size:.82rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  /* Lompatan langsung, bukan guliran: gerak panjang menyeberangi halaman
     justru yang paling mengganggu bagi yang meminta gerak minim. */
  html{scroll-behavior:auto}
}

.swal2-popup{font-family:'IBM Plex Sans',sans-serif;border-radius:13px}
.swal2-title{font-family:'Archivo',sans-serif;font-size:1.15rem!important}
.swal2-html-container{font-size:.9rem!important}