/* SINAR-NIAGA — Marketplace Koperasi
   Tema hijau koperasi. Semua aset lokal (tanpa CDN). */

:root{
  --g900:#052e1f; --g800:#0a4430; --g700:#0d5c40; --g600:#137a55;
  --g500:#1a9b6e; --g400:#35b98a; --g100:#e4f4eb; --g50:#f1faf5;
  --gold:#c8a24a; --gold-100:#fbf3dd;
  --ink:#11251c; --mut:#5e7268; --line:#e0eae4; --bg:#f5f8f6; --putih:#fff;
  --merah:#d94848; --merah-100:#fdeaea; --biru:#2769c7; --biru-100:#e8f0fd;
  --kuning:#a8730a; --kuning-100:#fdf4df;
  --r8:8px; --r12:12px; --r16:16px; --r22:22px;
  --bayang:0 12px 30px rgba(8,52,34,.07); --bayang-2:0 18px 46px rgba(8,52,34,.12);
  --head-h:auto;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--g700);text-decoration:none}
a:hover{color:var(--g500)}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.25;color:var(--ink)}
h1{font-size:1.7rem}h2{font-size:1.3rem}h3{font-size:1.05rem}h4{font-size:.95rem}
p{margin:.35rem 0 .8rem}
small{font-size:.8rem}
ul,ol{margin:.4rem 0 .9rem;padding-left:1.2rem}
.mut{color:var(--mut)}
.merah{color:var(--merah)}
.hijau{color:var(--g600)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99;border-radius:8px}
.utama{min-height:52vh;padding-top:20px;padding-bottom:44px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ============ Tombol ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;
  background:var(--g700);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;font-size:.9rem;
  cursor:pointer;line-height:1.2;text-align:center;transition:.16s background,.16s transform}
.btn:hover{background:var(--g600);color:#fff}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--g600),var(--g500));box-shadow:0 6px 16px rgba(19,122,85,.22)}
.btn-primary:hover{background:linear-gradient(135deg,var(--g700),var(--g600))}
.btn-ghost{background:#fff;color:var(--g700);border-color:var(--line)}
.btn-ghost:hover{background:var(--g50);color:var(--g800)}
.btn-gold{background:linear-gradient(135deg,#d5b45f,var(--gold));color:#3b2d05}
.btn-gold:hover{background:#d5b45f;color:#3b2d05}
.btn-merah{background:var(--merah)}
.btn-merah:hover{background:#bf3b3b}
.btn-kecil{padding:7px 12px;font-size:.82rem;border-radius:8px}
.btn-besar{padding:13px 22px;font-size:1rem}
.btn-blok{width:100%}
.btn-mati{background:#e8eeea;color:#8b9a92;cursor:not-allowed;box-shadow:none}
.btn-mati:hover{background:#e8eeea;color:#8b9a92}
.btn-teks{background:none;border:0;color:var(--g700);padding:4px;cursor:pointer;font-weight:600}
.tautan{color:var(--g700);text-decoration:underline;text-underline-offset:2px}
.aksi-baris{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ============ Topstrip & header publik ============ */
.topstrip{background:linear-gradient(90deg,var(--g900),var(--g700));color:#d9efe4;font-size:.78rem}
.topstrip-in{display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:34px;flex-wrap:wrap}
.topstrip a{color:#eaf7ef;margin-left:14px}
.topstrip-kanan{display:flex;gap:4px;flex-wrap:wrap}
.head{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(9,50,36,.05)}
.head-in{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--g700),var(--g400));color:#fff;font-weight:800;letter-spacing:.5px;overflow:hidden;flex:0 0 auto}
.brand-mark.kecil{width:38px;height:38px;border-radius:10px;font-size:.85rem}
.brand-mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-txt strong{font-size:1.06rem;letter-spacing:.6px;color:var(--g800)}
.brand-txt small{color:var(--mut);font-size:.72rem;letter-spacing:.2px}
.cari{flex:1 1 320px;display:flex;min-width:0;background:var(--g50);border:1.5px solid var(--line);border-radius:999px;padding:4px 4px 4px 16px;gap:6px}
.cari input{flex:1;border:0;background:transparent;outline:none;font-size:.9rem;min-width:0;color:var(--ink)}
.btn-cari{border-radius:999px;padding:8px 18px;font-size:.85rem}
.head-aksi{display:flex;align-items:center;gap:8px;margin-left:auto}
.head-ico,.head-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;background:var(--g50);font-size:1.1rem;border:1px solid var(--line)}
.head-cart{background:var(--g100)}
.dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--merah);color:#fff;
  font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.akun{position:relative}
.head-akun{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:4px 10px 4px 4px;cursor:pointer;font:inherit;color:var(--ink)}
.ava{width:32px;height:32px;border-radius:50%;background:var(--g100);color:var(--g700);display:inline-flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex:0 0 auto}
.head-akun-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left;font-size:.8rem;font-weight:600}
.head-akun-txt small{font-weight:500;color:var(--mut);font-size:.68rem}
.drop{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:245px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--bayang-2);padding:8px;z-index:50}
.drop.open{display:block}
.drop a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;color:var(--ink);font-size:.87rem}
.drop a:hover{background:var(--g50);color:var(--g800)}
.drop-keluar{border-top:1px solid var(--line);margin-top:6px;padding-top:10px !important;color:var(--merah) !important}
.burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:1.15rem;cursor:pointer}
.nav-pub{background:#fff;border-top:1px solid var(--g50)}
.nav-pub-in{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav-pub-in::-webkit-scrollbar{display:none}
.nav-pub a{white-space:nowrap;padding:11px 12px;font-size:.86rem;font-weight:600;color:#3c5348;border-bottom:2px solid transparent}
.nav-pub a:hover{color:var(--g700);background:var(--g50)}
.nav-pub a.on{color:var(--g700);border-bottom-color:var(--g500)}
.nav-kat{color:#fff !important;background:var(--g700);border-radius:8px;margin:6px 8px 6px 0;padding:7px 12px !important;font-size:.82rem !important}
.nav-kat:hover{background:var(--g600);color:#fff !important}
.nav-pesanan{margin-left:auto}

/* ============ Flash ============ */
.flash-wrap:empty{display:none}
.flash-wrap{margin:0 0 16px}
.flash{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:11px 14px;border-radius:10px;font-size:.88rem;
  border:1px solid var(--line);background:#fff;margin-bottom:8px;overflow-wrap:anywhere;min-width:0}
.flash-ok{background:#edf9f2;border-color:#bfe6d1;color:#0d6b45}
.flash-err{background:var(--merah-100);border-color:#f3c6c6;color:#9c2b2b}
.flash-info{background:var(--biru-100);border-color:#c9dcfa;color:#1c4f9c}
.flash-warn{background:var(--kuning-100);border-color:#efdba6;color:#7c5606}

/* ============ Kartu & panel ============ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r16);padding:20px;box-shadow:var(--bayang);margin-bottom:20px;min-width:0}
.card > h2,.card > h3{margin-top:0}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-head h2,.card-head h3{margin:0}
.card-kecil{padding:14px 16px;border-radius:12px;box-shadow:none}
.panel{background:var(--g50);border:1px solid var(--g100);border-radius:12px;padding:14px 16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* Anak grid/flex wajib boleh menyusut: tanpa ini tabel lebar (min-width 560px)
   di dalam kartu memaksa kolom melebar dan halaman meluber di layar kecil. */
.grid2 > *,.grid3 > *,.grid4 > *,.dua-kolom > *,.detail-grid > *{min-width:0}
.baris{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.baris-antara{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.stack > * + *{margin-top:12px}

/* ============ Badge / tag ============ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.badge-ok{background:var(--g100);color:var(--g700)}
.badge-info{background:var(--biru-100);color:#1d4f9c}
.badge-warn{background:var(--kuning-100);color:#7c5606}
.badge-err{background:var(--merah-100);color:#9c2b2b}
.badge-mut{background:#eef2ef;color:#5c6d63}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:.68rem;font-weight:700;letter-spacing:.2px}
.tag-promo{background:var(--merah);color:#fff}
.tag-unggulan{background:var(--gold);color:#3b2d05}
.tag-paket{background:var(--g700);color:#fff}
.tag-umkm{background:#7a4bbd;color:#fff}
.tag-baru{background:var(--g100);color:var(--g700)}
.stok-ada{color:var(--g600);font-weight:600}
.stok-terbatas{color:var(--kuning);font-weight:600}
.stok-habis{color:var(--merah);font-weight:600}
.bintang{color:#d9d9d9;font-size:.85rem;letter-spacing:1px;white-space:nowrap}
.bintang .on{color:#e8b53c}

/* ============ Kategori grid ============ */
.kat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.kat-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:.18s transform,.18s box-shadow}
.kat-item:hover{transform:translateY(-3px);box-shadow:var(--bayang);border-color:#cde6d8}
.kat-ikon{font-size:1.8rem;width:52px;height:52px;border-radius:50%;background:var(--g50);display:flex;align-items:center;justify-content:center}
.kat-item strong{font-size:.86rem}
.kat-item small{color:var(--mut);font-size:.72rem}
.kat-sub{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.kat-sub a{font-size:.7rem;background:var(--g50);border-radius:999px;padding:2px 8px;color:var(--g700)}

/* ============ Hero ============ */
.hero{background:linear-gradient(120deg,var(--g800),var(--g600) 55%,var(--g500));border-radius:var(--r22);color:#fff;
  padding:34px 32px;display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;overflow:hidden;position:relative;margin-bottom:26px}
.hero::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero::before{content:"";position:absolute;left:-60px;bottom:-120px;width:260px;height:260px;border-radius:50%;background:rgba(200,162,74,.18)}
.hero-txt{position:relative;z-index:1}
.hero-kicker{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  padding:5px 12px;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.hero h1{color:#fff;font-size:2.1rem;margin:12px 0 8px;letter-spacing:-.3px}
.hero p{color:#d8f0e4;max-width:52ch;margin-bottom:18px}
.hero-aksi{display:flex;gap:10px;flex-wrap:wrap}
.hero-aksi .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.hero-aksi .btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}
.hero-aksi .btn-gold{background:#f0d68f;color:#3d2f06}
.hero-poin{display:flex;gap:18px;margin-top:20px;flex-wrap:wrap;font-size:.78rem;color:#d8f0e4}
.hero-poin span{display:flex;align-items:center;gap:6px}
.hero-panel{position:relative;z-index:1;display:grid;gap:10px}
.hero-mini{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:12px 14px;
  display:flex;align-items:center;gap:12px;backdrop-filter:blur(4px)}
.hero-mini span:first-child{font-size:1.4rem}
.hero-mini strong{display:block;font-size:.86rem}
.hero-mini small{color:#cfead9;font-size:.72rem}

/* ============ Section & heading ============ */
.seksi{margin:34px 0}
.seksi-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.seksi-head h2{margin:0;font-size:1.25rem;display:flex;align-items:center;gap:8px}
.seksi-head h2::before{content:"";width:4px;height:20px;border-radius:3px;background:var(--g500)}
.seksi-head p{margin:4px 0 0;color:var(--mut);font-size:.84rem}
.seksi-head a{font-size:.85rem;font-weight:600}

/* ============ Produk grid & card ============ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:.18s transform,.18s box-shadow;min-width:0}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--bayang-2);border-color:#cfe7da}
.pcard-media{position:relative;display:block;aspect-ratio:1/1;background:linear-gradient(140deg,var(--g50),#fff);overflow:hidden}
.pimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(150deg,#eef8f2,#dff0e7)}
.pimg img{width:100%;height:100%;object-fit:cover}
.pimg-ikon{font-size:3rem;filter:saturate(1.05)}
.pcard-tags{position:absolute;top:9px;left:9px;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100% - 18px)}
.pcard-habis{position:absolute;inset:auto 0 0 0;background:rgba(17,37,28,.78);color:#fff;text-align:center;font-size:.74rem;
  font-weight:700;padding:5px 8px;letter-spacing:.4px}
.pcard-isi{padding:12px 13px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard-kat{font-size:.68rem;text-transform:uppercase;letter-spacing:.6px;color:var(--g600);font-weight:700}
.pcard-isi h3{margin:0;font-size:.9rem;font-weight:600;line-height:1.35;min-height:2.5em}
.pcard-isi h3 a{color:var(--ink)}
.pcard-isi h3 a:hover{color:var(--g700)}
.pcard-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;font-size:.72rem}
.pcard-harga{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin-top:2px}
.pcard-harga strong{font-size:1.06rem;color:var(--g800)}
.pcard-harga small{color:var(--mut);font-size:.72rem}
.pcard-harga del{color:#9aa9a0;font-size:.76rem}
.pcard-grosir{font-size:.7rem;color:var(--g600);background:var(--g50);border-radius:6px;padding:2px 7px;align-self:flex-start}
.pcard-aksi{display:flex;gap:6px;margin-top:auto;padding-top:8px;align-items:center}
.frm-tambah{flex:1;min-width:0}
.frm-fav{flex:0 0 auto}
.fav-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;color:#b3c1b8;font-size:1.05rem;cursor:pointer;line-height:1}
.fav-btn.on{color:#e0506a;border-color:#f3c9d1;background:#fff5f7}

/* ============ Filter ============ */
.filter-bar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;gap:12px;
  align-items:center;flex-wrap:wrap;margin-bottom:18px;box-shadow:var(--bayang)}
.filter-bar form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1}
.filter-bar select,.filter-bar input{font-size:.84rem}
.katalog-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
.side-filter{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;position:sticky;top:118px;box-shadow:var(--bayang)}
.side-filter h3{font-size:.92rem;margin:0 0 10px}
.side-filter .grup + .grup{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.side-filter a{display:flex;justify-content:space-between;gap:8px;padding:6px 0;font-size:.85rem;color:#3f554a}
.side-filter a.on{color:var(--g700);font-weight:700}
.side-filter a small{color:var(--mut)}
.hasil-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hasil-head p{margin:0;color:var(--mut);font-size:.85rem}

/* ============ Detail produk ============ */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:26px;align-items:start}
.galeri-utama{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.galeri-utama .pimg{font-size:6rem}
.galeri-thumb{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.galeri-thumb button{width:72px;height:72px;padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer}
.galeri-thumb button.on{border-color:var(--g500)}
.galeri-thumb img{width:100%;height:100%;object-fit:cover}
.beli-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--bayang);position:sticky;top:118px}
.beli-box h1{font-size:1.3rem;margin-bottom:6px}
.beli-harga{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0}
.beli-harga strong{font-size:1.75rem;color:var(--g800)}
.beli-harga del{color:#93a49a}
.beli-info{display:grid;gap:6px;font-size:.85rem;color:#3f554a;margin:12px 0;padding:12px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.beli-info div{display:flex;justify-content:space-between;gap:10px}
.beli-info span:first-child{color:var(--mut)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.qty button{width:36px;height:38px;border:0;background:var(--g50);color:var(--g800);font-size:1.1rem;cursor:pointer}
.qty input{width:56px;height:38px;border:0;text-align:center;font:inherit;font-weight:700;color:var(--ink);background:#fff}
.varian-list{display:flex;flex-wrap:wrap;gap:8px}
.varian-list label{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:10px;
  padding:8px 12px;font-size:.84rem;cursor:pointer;background:#fff}
.varian-list input{accent-color:var(--g600)}
.varian-list label:has(input:checked){border-color:var(--g500);background:var(--g50);font-weight:600}
.detail-desc{font-size:.92rem;color:#33493e}
.spesifikasi{display:grid;gap:0;font-size:.88rem}
.spesifikasi div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.spesifikasi span:first-child{color:var(--mut)}
.tier-tbl{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:8px}
.tier-tbl th,.tier-tbl td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.tier-tbl th{background:var(--g50);font-size:.76rem;text-transform:uppercase;letter-spacing:.4px;color:var(--g800)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap;margin-bottom:16px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;font:inherit;font-size:.88rem;
  font-weight:600;color:var(--mut);cursor:pointer}
.tabs button.on{color:var(--g700);border-bottom-color:var(--g500)}
.tab-isi{display:none}.tab-isi.on{display:block}
.ulasan-item{border-bottom:1px solid var(--line);padding:12px 0}
.ulasan-item:last-child{border-bottom:0}
.ulasan-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;font-size:.85rem}
.ulasan-item p{font-size:.88rem;color:#3b5247;margin:4px 0 0}
.ulasan-foto{max-width:120px;border-radius:8px;margin-top:8px;border:1px solid var(--line)}

/* ============ Keranjang / checkout ============ */
.dua-kolom{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start}
.krj-item{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.krj-item:last-child{border-bottom:0}
.krj-img{width:78px;height:78px;border-radius:10px;overflow:hidden;background:var(--g50);display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.krj-img img{width:100%;height:100%;object-fit:cover}
.krj-nama{font-weight:600;font-size:.92rem;display:block;color:var(--ink)}
.krj-meta{font-size:.78rem;color:var(--mut)}
.krj-harga{font-weight:700;color:var(--g800)}
.krj-total{text-align:right;font-weight:700;white-space:nowrap}
.krj-aksi{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.ringkas{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--bayang);position:sticky;top:118px}
.ringkas h3{margin:0 0 12px;font-size:1rem}
.ringkas-baris{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;padding:5px 0;color:#3d5347}
.ringkas-baris.total{border-top:1px dashed var(--line);margin-top:8px;padding-top:12px;font-size:1.05rem;font-weight:800;color:var(--g800)}
.ringkas-baris .hijau{font-weight:600}
.voucher-form{display:flex;gap:6px;margin:10px 0}
.voucher-form input{flex:1;min-width:0}
.langkah{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;font-size:.8rem}
.langkah span{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--mut)}
.langkah span.on{background:var(--g100);border-color:#bfe3d2;color:var(--g800);font-weight:700}
.langkah b{width:18px;height:18px;border-radius:50%;background:var(--g500);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem}
.opsi-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.opsi{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff;cursor:pointer;font-size:.87rem}
.opsi:has(input:checked){border-color:var(--g500);background:var(--g50)}
.opsi input{margin-top:3px;accent-color:var(--g600)}
.opsi strong{display:block;font-size:.88rem}
.opsi small{color:var(--mut);font-size:.75rem}
.alamat-pilih{display:grid;gap:10px}
.alamat-kartu{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;font-size:.87rem;cursor:pointer}
.alamat-kartu:has(input:checked){border-color:var(--g500);background:var(--g50)}
.alamat-kartu strong{display:block}

/* ============ Form ============ */
label{font-size:.84rem;font-weight:600;color:#31483d;display:block;margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=date],
input[type=search],input[type=url],input[type=file],select,textarea{
  width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:9px;font:inherit;font-size:.88rem;
  background:#fff;color:var(--ink);outline:none;transition:.15s border-color,.15s box-shadow}
input:focus,select:focus,textarea:focus{border-color:var(--g500);box-shadow:0 0 0 3px rgba(26,155,110,.12)}
textarea{min-height:90px;resize:vertical}
.frow{margin-bottom:13px}
.frow-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fhint{font-size:.75rem;color:var(--mut);margin-top:3px}
.cek{display:flex;gap:8px;align-items:flex-start;font-weight:500;font-size:.86rem;color:#31483d}
.cek input{margin-top:3px;width:auto;accent-color:var(--g600)}
.form-aksi{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pilahan{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.pilahan a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.82rem;font-weight:600;color:#3e564a}
.pilahan a.on{background:var(--g700);border-color:var(--g700);color:#fff}
.foto-pratinjau{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.foto-pratinjau figure{margin:0;position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;width:96px;background:#fff}
.foto-pratinjau img{width:96px;height:96px;object-fit:cover}
.foto-pratinjau figcaption{padding:4px 6px;font-size:.68rem;display:flex;justify-content:space-between;gap:4px;align-items:center}

/* ============ Tabel ============ */
.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:.85rem;min-width:560px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{background:var(--g50);font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;color:var(--g800);font-weight:700;white-space:nowrap}
.tbl tbody tr:hover{background:#fbfdfc}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .kanan{text-align:right}
.tbl .tengah{text-align:center}
.tbl-aksi{display:flex;gap:6px;flex-wrap:wrap}
.tbl-produk{display:flex;gap:10px;align-items:center;min-width:200px}
.tbl-produk .krj-img{width:42px;height:42px;font-size:1.1rem;border-radius:8px}
.tbl-produk strong{font-size:.85rem;display:block;line-height:1.3}
.tbl-produk small{color:var(--mut);font-size:.73rem}
.ruang-kosong{padding:26px;text-align:center;color:var(--mut)}

/* ============ Status / timeline ============ */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 16px 26px;border-left:2px solid var(--line);margin-left:6px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--g500)}
.timeline strong{font-size:.86rem;display:block}
.timeline small{color:var(--mut);font-size:.75rem}
.timeline p{margin:2px 0 0;font-size:.82rem;color:#3f554a}
.lacak-baris{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lacak-baris:last-child{border-bottom:0}
.pesanan-kartu{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:var(--bayang)}
.pesanan-kepala{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;
  border-bottom:1px dashed var(--line);padding-bottom:10px;margin-bottom:10px}
.pesanan-kepala strong{font-size:.95rem}
.pesanan-kepala small{color:var(--mut);display:block;font-size:.76rem}
.pesanan-kaki{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.pesanan-kaki .total{font-weight:800;color:var(--g800)}
.item-mini{display:flex;gap:10px;padding:6px 0;font-size:.85rem;align-items:center}
.item-mini .krj-img{width:40px;height:40px;font-size:1rem}
.item-mini .nm{flex:1;min-width:0}
.item-mini .nm small{display:block;color:var(--mut);font-size:.74rem}

/* ============ Info box ============ */
.note{position:relative;display:block;background:var(--g50);border:1px solid var(--g100);border-radius:10px;
  padding:12px 14px 12px 42px;font-size:.85rem;color:#2f4a3c;margin:12px 0;overflow-wrap:anywhere}
.note::before{content:"ℹ";position:absolute;left:14px;top:11px;color:var(--g600);font-weight:700}
.note-warn{background:var(--kuning-100);border-color:#efdba6;color:#6b4c08}
.note-warn::before{content:"⚠";color:var(--kuning)}
.note-err{background:var(--merah-100);border-color:#f3c6c6;color:#8f2b2b}
.note-err::before{content:"!";color:var(--merah)}
.note h4{margin:0 0 4px;font-size:.86rem}
.note p{margin:0;font-size:.84rem}
.note a{text-decoration:underline}
.kode{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f1f5f2;border-radius:5px;padding:1px 6px;font-size:.82em}
.salin{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.salin input{flex:1;min-width:130px;font-family:ui-monospace,monospace}

/* ============ Auth ============ */
.auth{max-width:460px;margin:26px auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--bayang-2)}
.auth-wide{max-width:640px}
.auth h1{font-size:1.35rem;margin-bottom:4px}
.auth .sub{color:var(--mut);font-size:.86rem;margin-bottom:18px}
.auth-alt{text-align:center;font-size:.85rem;color:var(--mut);margin-top:16px}
.auth-logo{display:flex;justify-content:center;margin-bottom:14px}
.auth-logo .brand-mark{width:56px;height:56px;font-size:1.1rem}

/* ============ Langkah wizard ============ */
.wizard{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.wizard div{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--mut);flex:1;min-width:180px}
.wizard b{width:24px;height:24px;border-radius:50%;background:#e6eeea;color:#6c8075;display:inline-flex;align-items:center;justify-content:center;font-size:.76rem}
.wizard div.on b{background:var(--g600);color:#fff}
.wizard div.on{color:var(--g800);font-weight:700}

/* ============ Footer ============ */
.kaki{background:var(--g900);color:#cfe3d8;margin-top:40px;padding:38px 0 16px;font-size:.85rem}
.kaki-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.kaki h4{color:#fff;font-size:.88rem;margin:0 0 10px;letter-spacing:.3px}
.kaki a{display:block;color:#cfe3d8;padding:3px 0;font-size:.83rem}
.kaki a:hover{color:#fff}
.brand-kaki .brand-txt strong{color:#fff}
.brand-kaki .brand-txt small{color:#a9c9b7}
.kaki-txt{color:#a9c9b7;font-size:.8rem;margin:10px 0 0;max-width:38ch}
.kaki-bawah{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:14px;display:flex;justify-content:space-between;
  gap:10px;flex-wrap:wrap;font-size:.76rem;color:#9dbfa9}

/* ============ Kosong & paginasi ============ */
.kosong{text-align:center;padding:46px 18px;background:#fff;border:1px dashed #cfe3d8;border-radius:16px}
.kosong-ikon{font-size:2.4rem;margin-bottom:8px}
.kosong h3{margin:0 0 6px;font-size:1rem}
.kosong p{color:var(--mut);font-size:.86rem;max-width:46ch;margin:0 auto 12px}
.paginasi{display:flex;gap:6px;justify-content:center;align-items:center;margin:26px 0 6px;flex-wrap:wrap}
.pag{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:8px;background:#fff;font-size:.84rem;color:#3d5347;padding:0 8px}
.pag.on{background:var(--g700);border-color:var(--g700);color:#fff;font-weight:700}
.pag.mati{opacity:.45}
.remah{font-size:.78rem;color:var(--mut);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.remah a{color:var(--mut)}
.remah a:hover{color:var(--g700)}
.remah strong{color:var(--ink);font-weight:600}

/* ============ Banner promo ============ */
.banner-row{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:22px}
.banner{border-radius:16px;padding:22px;color:#fff;background:linear-gradient(120deg,var(--g700),var(--g500));min-height:130px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;box-shadow:var(--bayang)}
.banner.gold{background:linear-gradient(120deg,#b8912a,#e0c069);color:#3a2c05}
.banner h3{color:inherit;margin:0;font-size:1.15rem}
.banner p{color:inherit;opacity:.9;margin:0;font-size:.84rem}
.banner small{opacity:.85;font-size:.74rem}
.banner a{color:inherit;text-decoration:underline;font-size:.82rem;margin-top:6px}

/* ============ ADMIN ============ */
body.admin{background:#f2f6f3}
.adm{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}
.adm-side{background:linear-gradient(180deg,var(--g900),#072b1d);color:#c6ded1;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.adm-brand{display:flex;gap:10px;align-items:center;padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.adm-brand strong{display:block;color:#fff;font-size:.92rem;letter-spacing:.5px}
.adm-brand small{color:#94b8a3;font-size:.7rem}
.adm-nav{padding:10px 10px 16px;flex:1}
.adm-grup{font-size:.66rem;text-transform:uppercase;letter-spacing:.9px;color:#7fa590;padding:14px 10px 5px;font-weight:700}
.adm-nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:#cfe4d8;font-size:.85rem;margin-bottom:1px}
.adm-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.adm-nav a.on{background:var(--g600);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.adm-ico{width:18px;text-align:center;font-size:.92rem}
.adm-side-kaki{border-top:1px solid rgba(255,255,255,.08);padding:10px 12px;display:flex;gap:8px;flex-wrap:wrap}
.adm-side-kaki a{font-size:.76rem;color:#a9c9b7;background:rgba(255,255,255,.07);padding:5px 9px;border-radius:7px}
.adm-main{min-width:0;display:flex;flex-direction:column}
.adm-top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:12px 22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.adm-judul{min-width:0}
.adm-judul h1{font-size:1.12rem;margin:0}
.adm-judul p{margin:2px 0 0;font-size:.78rem;color:var(--mut)}
.adm-aksi{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.adm-user{display:flex;gap:8px;align-items:center;border-left:1px solid var(--line);padding-left:14px}
.adm-user strong{display:block;font-size:.8rem;line-height:1.2}
.adm-user small{color:var(--mut);font-size:.7rem}
.adm-burger{display:none;margin:0}
.adm-isi{padding:20px 22px 46px;min-width:0}
body.admin .flash-wrap{margin-bottom:12px}
body.admin .card{padding:18px;border-radius:14px}
body.admin h1{font-size:1.2rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;display:flex;flex-direction:column;gap:2px;
  box-shadow:var(--bayang);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-20px;top:-20px;width:70px;height:70px;border-radius:50%;background:var(--g50)}
.stat-ikon{font-size:1.15rem;position:relative;z-index:1}
.stat-label{font-size:.76rem;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.stat-nilai{font-size:1.28rem;color:var(--g800);position:relative;z-index:1}
.stat-ket{font-size:.74rem;color:var(--mut)}
.chart-wrap{position:relative;width:100%;overflow-x:auto}
.chart-wrap canvas{width:100%;height:260px;display:block}
.bar-mini{display:flex;flex-direction:column;gap:8px}
.bar-mini .bar-row{display:grid;grid-template-columns:minmax(90px,1fr) 2.2fr auto;gap:10px;align-items:center;font-size:.82rem}
.bar-mini .bar-track{background:var(--g50);border-radius:999px;height:9px;overflow:hidden}
.bar-mini .bar-fill{height:100%;background:linear-gradient(90deg,var(--g500),var(--g400));border-radius:999px}
.adm-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px}
.adm-filter input,.adm-filter select{width:auto;min-width:130px;font-size:.83rem;padding:7px 10px}
.adm-filter .spasi{margin-left:auto}
.aksi-cepat{display:flex;gap:8px;flex-wrap:wrap}

/* ============ Cetak ============ */
.print-only{display:none}
.dok{background:#fff;max-width:820px;margin:0 auto;padding:30px;border:1px solid var(--line);border-radius:14px}
.dok-kop{display:flex;gap:14px;align-items:center;border-bottom:2.5px solid var(--g800);padding-bottom:12px;margin-bottom:18px}
.dok-kop .brand-mark{width:54px;height:54px}
.dok-kop h2{margin:0;font-size:1.1rem;letter-spacing:.4px}
.dok-kop p{margin:0;font-size:.78rem;color:var(--mut)}
.dok-judul{text-align:center;margin:6px 0 16px}
.dok-judul h3{margin:0;font-size:1.05rem;text-transform:uppercase;letter-spacing:.6px}
.dok-judul small{color:var(--mut)}
.dok-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:.85rem;margin-bottom:16px}
.dok-meta div p{margin:1px 0}
.dok-total{display:flex;justify-content:flex-end}
.dok-total table{font-size:.86rem;min-width:280px;border-collapse:collapse}
.dok-total td{padding:6px 10px;border-bottom:1px solid var(--line)}
.dok-total tr:last-child td{border-top:2px solid var(--g800);font-weight:800;font-size:.98rem}
.sign-row{display:flex;justify-content:space-between;gap:24px;margin-top:36px;text-align:center;font-size:.85rem}
.sign-box{flex:1;min-width:0}
.sign-box .garis{margin-top:60px;border-top:1px solid var(--ink);padding-top:4px}
@media print{
  @page{size:A4 portrait;margin:12mm}
  body{background:#fff;font-size:11.5px}
  .topstrip,.head,.kaki,.no-print,.btn,.adm-side,.adm-top,.flash-wrap{display:none !important}
  .wrap{max-width:100%;padding:0}
  .utama{padding:0}
  .adm{display:block}
  .adm-isi{padding:0}
  .card,.dok{border:0;box-shadow:none;padding:0;margin:0 0 10px;border-radius:0}
  .print-only{display:block}
  .dok{border:0}
  table.tbl{font-size:10.5px;min-width:0}
  .table-wrap{border:0;overflow:visible}
  .tbl th,.tbl td{padding:4px 6px}
  .page-break{break-after:page}
  .hindar{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}

/* ============ Responsif ============ */
@media (max-width:1050px){
  .katalog-layout{grid-template-columns:210px minmax(0,1fr)}
  .detail-grid{grid-template-columns:minmax(0,1fr) 360px}
  .dua-kolom{grid-template-columns:minmax(0,1fr) 320px}
  .kaki-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* Kolom ganda dari style inline (mis. minmax(320px,1fr)) ikut ditumpuk
     agar tidak mendorong lebar halaman di layar kecil. */
  .grid2{grid-template-columns:1fr !important}
  .hero{grid-template-columns:1fr;padding:26px 22px}
  .hero h1{font-size:1.65rem}
  .hero-panel{grid-template-columns:1fr 1fr}
  .detail-grid,.dua-kolom,.katalog-layout{grid-template-columns:1fr}
  .beli-box,.ringkas,.side-filter{position:static}
  .side-filter{order:2}
  .banner-row{grid-template-columns:1fr}
  .grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm{grid-template-columns:1fr}
  .adm-side{position:fixed;left:0;top:0;bottom:0;width:256px;z-index:60;transform:translateX(-102%);transition:.22s transform;height:100vh}
  .adm-side.open{transform:none;box-shadow:0 0 50px rgba(0,0,0,.4)}
  .adm-burger{display:inline-flex;align-items:center;justify-content:center}
  .adm-user{border-left:0;padding-left:0;margin-left:auto}
  .adm-top{padding:10px 14px}
  .adm-isi{padding:16px 14px 40px}
  .adm-judul h1{font-size:1rem}
  .head-in{gap:10px}
  .cari{order:3;flex:1 1 100%}
  .head-akun-txt{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .nav-pub-in{display:none;flex-direction:column;align-items:stretch;padding:8px 14px}
  .nav-pub.open .nav-pub-in{display:flex}
  .nav-pub a{padding:10px;border-bottom:1px solid var(--line);border-radius:6px}
  .nav-kat{margin:0 0 6px}
  .nav-pesanan{margin-left:0}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .wrap{padding:0 13px}
  .publik .utama{padding-top:14px}
  .topstrip-in{justify-content:center;min-height:30px;font-size:.72rem}
  .topstrip-in > span:first-child{display:none}
  .topstrip a{margin:0 6px}
  .hero h1{font-size:1.45rem}
  .hero-poin{gap:10px;font-size:.74rem}
  .hero-panel{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .pcard-isi{padding:9px 10px 11px;gap:4px}
  .pcard-isi h3{font-size:.82rem;min-height:2.6em}
  .pcard-kat{font-size:.62rem}
  .pcard-harga strong{font-size:.96rem}
  .pcard-aksi .btn-kecil{font-size:.75rem;padding:6px 8px}
  .fav-btn{width:30px;height:30px}
  .kat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .seksi{margin:24px 0}
  .seksi-head h2{font-size:1.08rem}
  .grid2,.grid3,.grid4,.frow-2,.frow-3{grid-template-columns:1fr}
  .krj-item{grid-template-columns:62px minmax(0,1fr);gap:10px}
  .krj-img{width:62px;height:62px;font-size:1.4rem}
  .krj-total{grid-column:1/-1;text-align:left}
  .kaki-grid{grid-template-columns:1fr;gap:18px}
  .auth{padding:20px;border-radius:16px}
  .card{padding:15px;border-radius:14px}
  .detail-grid{gap:16px}
  .beli-box{padding:15px}
  .beli-harga strong{font-size:1.5rem}
  .spesifikasi div{grid-template-columns:110px minmax(0,1fr)}
  .dok{padding:16px}
  .dok-meta{grid-template-columns:1fr;gap:8px}
  .sign-row{gap:12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-nilai{font-size:1.05rem}
  .stat{padding:12px}
  .stat-label{font-size:.68rem}
  .flash{font-size:.83rem}
  .tbl{min-width:520px}
  .adm-aksi{width:100%;order:5}
  .head-ico{display:none}
  .hero-aksi .btn{flex:1}
  .timeline li{padding-left:20px}
}
@media (max-width:380px){
  .pgrid{grid-template-columns:1fr}
}

/* ============ FAQ (details) ============ */
details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:8px}
details summary{cursor:pointer;font-size:.9rem;color:var(--ink);list-style:none;display:flex;gap:8px;align-items:flex-start;font-weight:600}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸";color:var(--g600);flex:0 0 auto}
details[open] summary::before{content:"▾"}
details p{font-size:.87rem;color:#3b5247;margin:8px 0 0;padding-left:16px}

/* ============ Gambar kategori ============ */
.kat-ikon{overflow:hidden}
.kat-ikon.has-img{padding:0;background:#fff;border:1px solid var(--line)}
.kat-ikon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.kat-ikon-besar{width:68px;height:68px;font-size:2rem;flex:0 0 auto}
.kat-hero{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:16px 20px;margin-bottom:18px;box-shadow:var(--bayang)}
.kat-hero-img{width:104px;height:104px;border-radius:16px;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:var(--g50);font-size:2.6rem;border:1px solid var(--line)}
.kat-hero-img img{width:100%;height:100%;object-fit:cover}
.kat-hero-txt{min-width:0}
.kat-hero-txt h1{font-size:1.3rem;margin-bottom:2px}
.kat-hero-txt p{color:var(--mut);font-size:.86rem;margin:0 0 8px}
.side-kat{display:flex;align-items:center;gap:8px;min-width:0}
.side-kat-emoji{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;flex:0 0 auto}
.side-kat-img{width:22px;height:22px;border-radius:6px;overflow:hidden;flex:0 0 auto;background:var(--g50);border:1px solid var(--line)}
.side-kat-img img{width:100%;height:100%;object-fit:cover}
.pimg.is-kategori img{object-fit:cover;opacity:.95}
@media (max-width:640px){
  .kat-hero{padding:12px 14px;gap:12px}
  .kat-hero-img{width:72px;height:72px;font-size:2rem;border-radius:12px}
  .kat-hero-txt h1{font-size:1.1rem}
  .kat-ikon-besar{width:56px;height:56px;font-size:1.7rem}
}

/* ============ Galeri foto produk (admin) ============ */
.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.foto-kartu{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;position:relative;display:flex;flex-direction:column}
.foto-kartu img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--g50)}
.foto-kartu figcaption{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 8px;flex-wrap:wrap}
.foto-kartu figcaption form{margin:0}
.foto-utama{position:absolute;top:8px;left:8px}

/* ============ Warna merek SINAR-NIAGA (SINAR biru · NIAGA merah) ============ */
.merk{display:inline;white-space:nowrap}
.merk .merk-sinar{color:#1d4ed8;font-weight:800}
.merk .merk-niaga{color:#d62828;font-weight:800}
.merk .merk-pisah{color:#8aa196;font-weight:700}
/* Latar gelap (footer, sidebar admin) memakai nuansa lebih terang agar terbaca */
.kaki .merk-sinar,.adm-side .merk-sinar,.brand-kaki .merk-sinar,.merk-kaki .merk-sinar{color:#8ec5ff}
.kaki .merk-niaga,.adm-side .merk-niaga,.brand-kaki .merk-niaga,.merk-kaki .merk-niaga{color:#ff9d9d}
.kaki .merk-pisah,.adm-side .merk-pisah,.merk-kaki .merk-pisah{color:#a9c9b7}
/* Monogram logo: huruf awal SINAR biru, NIAGA merah pada chip putih */
.brand-mono{background:#fff !important;border:1.5px solid #dbe9e1;color:#0d5c40;letter-spacing:.5px}
.brand-mono .m-sinar{color:#1d4ed8}
.brand-mono .m-niaga{color:#d62828}
.adm-brand .brand-mono{border-color:rgba(255,255,255,.35)}
/* Judul halaman login & kop dokumen */
.auth h1 .merk .merk-sinar,.auth h1 .merk .merk-niaga{font-weight:800}
.dok-kop h2 .merk-sinar{color:#1d4ed8}
.dok-kop h2 .merk-niaga{color:#d62828}
@media print{
  .merk .merk-sinar,.dok-kop h2 .merk-sinar{color:#1d4ed8 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .merk .merk-niaga,.dok-kop h2 .merk-niaga{color:#d62828 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* Nama merek pada hero (latar hijau gelap) */
.merk-hero .merk-sinar{color:#a8d3ff}
.merk-hero .merk-niaga{color:#ffb1b1}
.merk-hero .merk-pisah{color:#d8f0e4}

/* ============ Tagline beranda ============ */
.hero h1 .hero-aksen{color:#f0d68f;display:inline}
@media (max-width:640px){ .hero h1 .hero-aksen{display:block;margin-top:2px} }

/* ============ Catatan / informasi beranda ============ */
.catatan-kartu h3{display:flex;align-items:center;gap:8px}
.catatan-ikon{font-size:1.25rem;line-height:1;flex:0 0 auto}
.catatan-kartu p{margin-bottom:8px;overflow-wrap:anywhere}

/* Hero tanpa paragraf pengantar: beri jarak antara tagline dan tombol */
.hero-txt .hero-aksi{margin-top:16px}
@media (max-width:640px){ .hero-txt .hero-aksi{margin-top:14px} }

/* ============ Avatar pelanggan & formulir identitas ============ */
.ava.has-img{padding:0;overflow:hidden;background:#fff;border:1px solid var(--line)}
.ava.has-img img{width:100%;height:100%;object-fit:cover;object-position:center 25%;border-radius:inherit}
.ava-besar{width:58px;height:58px;font-size:1.5rem;flex:0 0 auto}
.note-uji{font-size:.82rem}
.note-uji::before{content:"✓"}
.note-uji.note-warn::before{content:"⚠"}
.ktp-mini{width:104px;border:1px solid var(--line);border-radius:8px;display:block}
.ktp-mini-besar{width:100%;max-width:340px;border:1px solid var(--line);border-radius:10px;display:block}

/* ============ Ceklist pernyataan pendaftaran ============ */
.pernyataan-box{display:flex;flex-direction:column;gap:8px}
.pernyataan-item{align-items:flex-start;font-weight:500;font-size:.86rem;line-height:1.45;padding:6px 8px;border-radius:8px}
.pernyataan-item:hover{background:rgba(255,255,255,.55)}
.pernyataan-item input{margin-top:2px;flex:0 0 auto}
.pernyataan-item span{flex:1;min-width:0}
.pernyataan-list{display:flex;flex-direction:column;gap:6px;font-size:.85rem}
.pernyataan-list div{display:flex;gap:8px;align-items:flex-start}