:root{
  --bg:#060B14; --bg2:#0A1220; --panel:#0E1829; --panel2:#121F35;
  --line:rgba(231,196,106,.16); --line2:rgba(255,255,255,.07);
  --emas:#E7C46A; --emas2:#C9A227; --emas-lembut:rgba(231,196,106,.12);
  --teks:#E9EEF8; --redup:#94A3BA; --redup2:#6C7C93;
  --hijau:#34D399; --merah:#F87171; --biru:#60A5FA; --ungu:#A78BFA;
  --garis:16px; --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(231,196,106,.13), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(58,110,180,.18), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(201,162,39,.08), transparent 60%),
    linear-gradient(180deg,#070D18 0%, #060B14 100%);
  background-color:var(--bg);
  color:var(--teks); min-height:100vh; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .35em;line-height:1.2;letter-spacing:-.01em}
h1{font-size:1.65rem}
h2{font-size:1.18rem}
h3{font-size:1rem}
p{margin:.35em 0}
small{color:var(--redup)}
.ikon{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.18em}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(18px);
  background:rgba(6,11,20,.82);border-bottom:1px solid var(--line2)}
.topbar-isi{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 20px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{filter:drop-shadow(0 2px 8px rgba(231,196,106,.35))}
.brand-teks{display:flex;flex-direction:column;line-height:1}
.brand-teks strong{font-weight:800;letter-spacing:-.02em;font-size:1.02rem;color:#fff}
.brand-teks em{font-style:normal;font-weight:700;font-size:1.02rem;
  background:linear-gradient(92deg,#FFE8A3,#E7C46A 55%,#C9A227);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-atas{display:flex;gap:4px;overflow-x:auto;flex:1 1 auto;min-width:0;scrollbar-width:none}
.nav-atas::-webkit-scrollbar{display:none}
.nav-pil{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:11px;
  color:var(--redup);font-size:.86rem;font-weight:600;white-space:nowrap;border:1px solid transparent;transition:.16s}
.nav-pil:hover{color:var(--teks);background:rgba(255,255,255,.04)}
.nav-pil.aktif{color:#141007;background:linear-gradient(135deg,#FFE9A8,#E7C46A 60%,#D0A93D);
  border-color:rgba(255,255,255,.25);box-shadow:0 6px 18px -8px rgba(231,196,106,.8)}
.nav-tamu .nav-pil{color:#c3cee0}
.topbar-aksi{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.chip-user{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid var(--line2);
  border-radius:999px;background:rgba(255,255,255,.03);max-width:190px}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;
  color:#1a1408;background:linear-gradient(135deg,#FFE9A8,#D8B14A)}
.chip-nama{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- wadah ---------- */
.wadah{max-width:1400px;margin:0 auto;padding:26px 20px 90px}
.wadah-sempit{max-width:860px}
.kepala-halaman{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.kepala-halaman h1{margin:0}
.kepala-halaman .sub{color:var(--redup);font-size:.9rem;margin:2px 0 0}
.kepala-aksi{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- kartu ---------- */
.kartu{background:linear-gradient(160deg,rgba(20,33,54,.92),rgba(12,20,35,.94));
  border:1px solid var(--line2);border-radius:var(--r);padding:20px;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);position:relative}
.kartu.emas{border-color:var(--line);background:linear-gradient(160deg,rgba(28,40,60,.96),rgba(14,22,38,.96))}
.kartu.emas::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;
  background:linear-gradient(140deg,rgba(231,196,106,.5),transparent 45%,rgba(231,196,106,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.kartu-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.kartu-kepala h2{margin:0;font-size:1.02rem}
.kartu-tanpa-pad{padding:0;overflow:hidden}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-samping{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.grid>*{min-width:0}

/* ---------- stat ---------- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat .label{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--redup2);font-weight:700}
.stat .nilai{font-size:1.55rem;font-weight:800;letter-spacing:-.02em}
.stat .nilai.emas{background:linear-gradient(92deg,#FFE8A3,#E7C46A 60%,#C9A227);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .ket{font-size:.8rem;color:var(--redup)}
.stat-ikon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--emas);
  background:var(--emas-lembut);border:1px solid var(--line);margin-bottom:4px}

/* ---------- tombol ---------- */
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:11px;
  font-weight:700;font-size:.88rem;border:1px solid transparent;cursor:pointer;transition:.16s;font-family:inherit;
  background:rgba(255,255,255,.05);color:var(--teks);text-align:center}
.tombol:hover{transform:translateY(-1px)}
.tombol-emas{background:linear-gradient(135deg,#FFE9A8,#E7C46A 55%,#CBA431);color:#191305;
  box-shadow:0 10px 26px -12px rgba(231,196,106,.9)}
.tombol-emas:hover{box-shadow:0 14px 30px -12px rgba(231,196,106,1)}
.tombol-garis{background:transparent;border-color:var(--line);color:#F0E3BE}
.tombol-garis:hover{background:var(--emas-lembut)}
.tombol-gelap{background:rgba(255,255,255,.06);border-color:var(--line2)}
.tombol-bahaya{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.35);color:#FCA5A5}
.tombol-hijau{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.35);color:#6EE7B7}
.tombol-kecil{padding:7px 12px;font-size:.8rem;border-radius:9px}
.tombol-besar{padding:14px 22px;font-size:.95rem;border-radius:13px}
.tombol-blok{width:100%}
.tombol:disabled{opacity:.5;cursor:not-allowed;transform:none}
.tombol svg{width:1.05em;height:1.05em}

/* ---------- form ---------- */
.form-baris{display:grid;gap:14px}
.form-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-3{grid-template-columns:repeat(3,minmax(0,1fr))}
label,.label-form{display:block;font-size:.8rem;font-weight:700;color:#C7D2E3;margin-bottom:6px}
label .wajib{color:var(--emas)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],
input[type=datetime-local],input[type=date],select,textarea{
  width:100%;padding:11px 13px;border-radius:11px;background:rgba(6,12,22,.72);
  border:1px solid var(--line2);color:var(--teks);font-family:inherit;font-size:.9rem;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(231,196,106,.6);
  box-shadow:0 0 0 3px rgba(231,196,106,.12);background:rgba(8,15,27,.9)}
textarea{min-height:110px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3BA' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
input[type=file]{width:100%;padding:9px;border:1px dashed rgba(231,196,106,.35);border-radius:11px;
  background:rgba(231,196,106,.04);color:var(--redup);font-size:.82rem}
input[type=checkbox],input[type=radio]{accent-color:#E7C46A;width:16px;height:16px;vertical-align:-3px}
.petunjuk{font-size:.76rem;color:var(--redup2);margin-top:5px}
.centang{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;color:#C2CEDF}
.centang input{margin-top:3px}

/* ---------- tabel ---------- */
.tabel-bungkus{overflow-x:auto;border-radius:12px;border:1px solid var(--line2)}
table.tabel{width:100%;border-collapse:collapse;font-size:.84rem;min-width:600px}
table.tabel th{text-align:left;padding:10px 12px;background:rgba(255,255,255,.035);color:#B9C6DA;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
table.tabel td{padding:11px 12px;border-top:1px solid var(--line2);vertical-align:middle}
table.tabel tr:hover td{background:rgba(255,255,255,.02)}
.tabel-kosong{text-align:center;color:var(--redup2);padding:26px 12px!important}
.sel-kanan{text-align:right}
.sel-kecil{font-size:.78rem;color:var(--redup)}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:.72rem;
  font-weight:700;white-space:nowrap;border:1px solid transparent}
.badge-hijau{background:rgba(52,211,153,.14);color:#6EE7B7;border-color:rgba(52,211,153,.3)}
.badge-merah{background:rgba(248,113,113,.14);color:#FCA5A5;border-color:rgba(248,113,113,.3)}
.badge-emas{background:rgba(231,196,106,.14);color:#F3D98E;border-color:rgba(231,196,106,.32)}
.badge-biru{background:rgba(96,165,250,.14);color:#93C5FD;border-color:rgba(96,165,250,.3)}
.badge-ungu{background:rgba(167,139,250,.14);color:#C4B5FD;border-color:rgba(167,139,250,.3)}
.badge-netral{background:rgba(255,255,255,.06);color:#B9C6DA;border-color:var(--line2)}

/* ---------- flash ---------- */
.flash{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-radius:12px;margin-bottom:18px;
  font-size:.88rem;border:1px solid var(--line2);background:rgba(255,255,255,.04)}
.flash svg{margin-top:2px}
.flash-sukses{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3);color:#A7F3D0}
.flash-galat{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.32);color:#FECACA}
.flash-info{background:rgba(231,196,106,.09);border-color:rgba(231,196,106,.3);color:#F5E3B0}

/* ---------- kosong ---------- */
.kosong{text-align:center;padding:34px 18px;color:var(--redup);display:flex;flex-direction:column;align-items:center;gap:8px}
.kosong svg{width:34px;height:34px;color:var(--emas);opacity:.8}
.kosong p{margin:0;font-size:.9rem}

/* ---------- progress ---------- */
.progress{height:9px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.progress > span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#C9A227,#E7C46A,#FFE9A8);transition:width .4s}

/* ---------- modal QR ---------- */
.modal-latar{position:fixed;inset:0;background:rgba(3,7,14,.78);backdrop-filter:blur(6px);
  display:none;place-items:center;z-index:80;padding:18px}
.modal-latar.buka{display:grid}
.modal{width:min(420px,100%);background:linear-gradient(170deg,#13203a,#0B1526);border:1px solid var(--line);
  border-radius:18px;padding:22px;text-align:center;box-shadow:0 30px 80px -30px #000}
.kotak-qr{background:#fff;border-radius:14px;padding:12px;display:inline-block;margin:12px 0}
.kotak-qr img{display:block;width:232px;height:232px;image-rendering:pixelated}
.modal-tutup{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--redup);
  font-size:1.3rem;cursor:pointer}

/* ---------- timeline risiko ---------- */
.timeline{display:flex;flex-direction:column;gap:12px}
.tl-item{display:flex;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.025);
  border:1px solid var(--line2);border-left:3px solid var(--redup2)}
.tl-item.kritis{border-left-color:var(--merah);background:rgba(248,113,113,.06)}
.tl-item.peringatan{border-left-color:var(--emas)}
.tl-item.info{border-left-color:var(--biru)}
.tl-item.pembelajaran{border-left-color:var(--ungu);background:rgba(167,139,250,.05)}
.tl-judul{font-size:.86rem;font-weight:700}
.tl-isi{font-size:.83rem;color:#BCC9DB}
.tl-waktu{font-size:.72rem;color:var(--redup2);white-space:nowrap}

/* ---------- landing ---------- */
.hero{padding:56px 0 28px;text-align:center;position:relative}
.hero h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.hero h1 span{background:linear-gradient(92deg,#FFE8A3,#E7C46A 55%,#C9A227);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:#B6C3D8;font-size:1.03rem;max-width:640px;margin:0 auto 22px}
.hero-aksi{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.pil-kecil{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--emas-lembut);color:#F0DFAE;font-size:.76rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}
.bagian{padding:48px 0 12px}
.bagian-judul{text-align:center;margin-bottom:26px}
.bagian-judul h2{font-size:1.6rem}
.bagian-judul p{color:var(--redup);max-width:620px;margin:6px auto 0;font-size:.92rem}
.fitur-ubin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fitur-ubin .kartu{padding:20px}
.fitur-ikon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--emas);
  background:var(--emas-lembut);border:1px solid var(--line);margin-bottom:12px}
.fitur-ubin h3{font-size:.98rem}
.fitur-ubin p{font-size:.85rem;color:var(--redup);margin:0}

/* ---------- harga ---------- */
.harga-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch}
.harga-kartu{display:flex;flex-direction:column;gap:10px;padding:18px;position:relative}
.harga-kartu.unggulan{border-color:rgba(231,196,106,.55);box-shadow:0 20px 50px -30px rgba(231,196,106,.9)}
.harga-label{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:.66rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 10px;border-radius:999px;
  background:linear-gradient(135deg,#FFE9A8,#D8B14A);color:#1a1408}
.harga-nama{font-size:1.05rem;font-weight:800}
.harga-angka{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.harga-angka small{font-size:.75rem;font-weight:600;color:var(--redup)}
.harga-fitur{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;font-size:.82rem;color:#C6D2E4}
.harga-fitur li{display:flex;gap:7px;align-items:flex-start}
.harga-fitur svg{color:var(--emas);margin-top:2px}
.harga-kartu .tombol{margin-top:auto}

/* ---------- langkah ---------- */
.langkah{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:l}
.langkah-item{padding:18px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line2)}
.langkah-nomor{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;
  color:#1a1408;background:linear-gradient(135deg,#FFE9A8,#D8B14A);margin-bottom:10px}

/* ---------- auth ---------- */
.auth-bungkus{min-height:calc(100vh - 200px);display:grid;place-items:center;padding:30px 0}
.auth-kartu{width:min(430px,100%);padding:28px}
.auth-kartu h1{font-size:1.4rem;text-align:center}
.auth-kartu .sub{text-align:center;color:var(--redup);font-size:.86rem;margin-bottom:20px}
.auth-kaki{text-align:center;font-size:.85rem;color:var(--redup);margin-top:16px}

/* ---------- lain ---------- */
.baris-antara{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tumpuk{display:flex;flex-direction:column;gap:12px}
.tumpuk-kecil{display:flex;flex-direction:column;gap:5px}
.sebaris{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pisah{border-top:1px solid var(--line2);margin:16px 0}
.teks-redup{color:var(--redup)}
.teks-kecil{font-size:.8rem}
.teks-emas{color:var(--emas)}
.teks-merah{color:#FCA5A5}
.teks-hijau{color:#6EE7B7}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}
.kode-salin{display:flex;gap:8px;align-items:center;background:rgba(6,12,22,.7);border:1px solid var(--line2);
  border-radius:10px;padding:8px 10px;font-size:.78rem;overflow-x:auto}
.kode-salin code{white-space:nowrap;color:#E9D9A9}
.meter{display:flex;align-items:center;gap:10px}
.meter-bar{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.meter-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#34D399,#6EE7B7)}
.meter-bar span.sedang{background:linear-gradient(90deg,#E7C46A,#FFE9A8)}
.meter-bar span.tinggi{background:linear-gradient(90deg,#F87171,#FCA5A5)}
.kaki{border-top:1px solid var(--line2);padding:22px 20px 26px;text-align:center;color:var(--redup2);
  font-size:.78rem;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.nav-bawah-tamu{display:none}
.daftar-info{display:flex;flex-direction:column;gap:10px}
.info-baris{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;padding:6px 0;border-bottom:1px dashed var(--line2)}
.info-baris:last-child{border-bottom:none}
.info-baris span:first-child{color:var(--redup)}
.info-baris span:last-child{font-weight:600;text-align:right}
.harga-rincian{display:flex;flex-direction:column;gap:6px;font-size:.88rem}
.harga-rincian .total{border-top:1px solid var(--line);padding-top:10px;margin-top:4px;font-weight:800;font-size:1rem}
.harga-rincian .baris{display:flex;justify-content:space-between;gap:10px}
.harga-rincian .baris.muted span:first-child{color:var(--redup)}
.akun-kartu{display:flex;flex-direction:column;gap:12px}
.akun-atas{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.akun-nama{font-weight:700;font-size:.98rem}
.akun-meta{font-size:.78rem;color:var(--redup2)}
.aksi-baris{display:flex;gap:6px;flex-wrap:wrap}
.qr-inline{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pilih-kontak{max-height:290px;overflow:auto;border:1px solid var(--line2);border-radius:12px;padding:8px}
.pilih-baris{display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:9px;font-size:.84rem}
.pilih-baris:hover{background:rgba(255,255,255,.035)}
.pilih-baris .nomor{color:var(--redup2);font-size:.78rem}
.tab-baris{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:8px 14px;border-radius:10px;font-size:.84rem;font-weight:600;color:var(--redup);
  border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.tab.aktif{color:#1a1408;background:linear-gradient(135deg,#FFE9A8,#D8B14A);border-color:transparent}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.75rem;
  border:1px solid var(--line2);background:rgba(255,255,255,.04);color:#C7D2E3}
.daftar-cek{display:flex;flex-direction:column;gap:9px}
.cek-item{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;color:#C2CEDF;
  padding:10px 12px;border-radius:11px;border:1px solid var(--line2);background:rgba(255,255,255,.02)}
.cek-item .ikon{color:var(--emas);margin-top:2px}
.riwayat-baris{padding:11px 0;border-bottom:1px solid var(--line2);font-size:.85rem}
.riwayat-baris:last-child{border-bottom:none}
.tag-input{display:flex;gap:8px;flex-wrap:wrap}
.tag-mini{font-size:.72rem;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:#EAD9AC}
.gulir{overflow-x:auto}

@media (max-width:1100px){
  .harga-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fitur-ubin{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-samping{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .topbar-isi{padding:8px 14px;gap:10px;flex-wrap:wrap}
  .nav-atas{order:3;width:100%;padding-bottom:4px}
  .chip-nama{display:none}
  .chip-user{padding:4px}
  .wadah{padding:18px 14px 84px}
  h1{font-size:1.4rem}
  .grid-2,.grid-3,.grid-4,.form-2,.form-3,.langkah{grid-template-columns:minmax(0,1fr)}
  .harga-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fitur-ubin{grid-template-columns:minmax(0,1fr)}
  .hero{padding:30px 0 10px}
  .hero p.lead{font-size:.94rem}
  .nav-bawah-tamu{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:45;gap:6px;
    background:rgba(8,14,25,.96);border-top:1px solid var(--line2);padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
  .nav-bawah-tamu a{flex:1;text-align:center;padding:9px 6px;border-radius:10px;font-size:.8rem;font-weight:700;
    border:1px solid var(--line2);color:#C7D2E3}
  .nav-bawah-tamu a.tema-emas{background:linear-gradient(135deg,#FFE9A8,#D8B14A);color:#1a1408;border-color:transparent}
  .kaki{margin-bottom:64px}
  table.tabel{min-width:520px}
}
@media (max-width:520px){
  .harga-grid{grid-template-columns:minmax(0,1fr)}
  .kepala-halaman{gap:10px}
  .kartu{padding:16px}
  .topbar-aksi .tombol span{display:none}
  .tombol{padding:9px 13px}
}

/* ---------- navigasi panel admin ---------- */
.admin-nav{display:flex;gap:6px;overflow-x:auto;padding:8px;margin-bottom:22px;
  background:rgba(12,20,35,.72);border:1px solid var(--line2);border-radius:14px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.admin-nav::-webkit-scrollbar{display:none}
.admin-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;white-space:nowrap;
  font-size:.83rem;font-weight:700;color:#B9C6DA;border:1px solid transparent;transition:.15s;flex:0 0 auto}
.admin-tab:hover{background:rgba(255,255,255,.05);color:#fff}
.admin-tab.aktif{color:#1a1408;background:linear-gradient(135deg,#FFE9A8,#E7C46A 60%,#D0A93D);
  box-shadow:0 8px 22px -12px rgba(231,196,106,.9)}
.admin-tab--kembali{margin-left:auto;border-color:var(--line2);color:#C7D2E3}
.admin-tab svg{width:1.05em;height:1.05em}
.codekecil{font-size:.82rem}
@media (max-width:700px){
  .admin-nav{margin:0 -14px 18px;border-radius:0;border-left:none;border-right:none;padding:9px 14px}
  .admin-tab--kembali{margin-left:0}
}

/* ---------- MINI CRM (gaya WhatsApp Web, tema navy–emas) ---------- */
.crm-ringkas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.crm-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line2);font-size:.8rem;color:#C7D2E3}
.crm-chip strong{color:#fff}
.crm-dua{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:16px;align-items:start}
.crm-daftar,.crm-ruang{background:linear-gradient(160deg,rgba(20,33,54,.92),rgba(12,20,35,.95));
  border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.9)}
.crm-daftar{display:flex;flex-direction:column;max-height:calc(100vh - 210px);min-height:420px}
.crm-cari{display:flex;flex-direction:column;gap:8px;padding:12px;border-bottom:1px solid var(--line2);
  background:rgba(6,12,22,.5)}
.crm-cari input,.crm-cari select{font-size:.83rem;padding:9px 11px}
.crm-daftar-isi{overflow-y:auto;flex:1}
.crm-thread{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.05);
  text-decoration:none;color:inherit;transition:background .14s}
.crm-thread:hover{background:rgba(255,255,255,.04)}
.crm-thread.aktif{background:linear-gradient(90deg,rgba(231,196,106,.13),rgba(231,196,106,.03));
  border-left:3px solid var(--emas)}
.crm-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  color:#1a1408;background:linear-gradient(135deg,#FFE9A8,#D8B14A);flex:0 0 auto}
.crm-avatar.kecil{width:34px;height:34px;font-size:.85rem}
.crm-thread-isi{flex:1;min-width:0}
.crm-thread-baris{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.86rem}
.crm-thread-baris strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-thread-waktu{font-size:.7rem;color:var(--redup2);flex:0 0 auto}
.crm-thread-pesan{color:var(--redup);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-thread-meta{font-size:.68rem;color:var(--redup2);margin-top:2px}
.crm-unread{background:linear-gradient(135deg,#FFE9A8,#D8B14A);color:#1a1408;font-weight:800;font-size:.68rem;
  min-width:19px;height:19px;border-radius:999px;display:grid;place-items:center;padding:0 5px;flex:0 0 auto}
.crm-ruang{display:flex;flex-direction:column;min-height:520px;max-height:calc(100vh - 210px)}
.crm-ruang--kosong{align-items:center;justify-content:center;gap:6px;color:var(--redup);text-align:center;padding:30px}
.crm-ruang--kosong svg{width:38px;height:38px;color:var(--emas);opacity:.85}
.crm-ruang-kepala{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line2);
  background:rgba(9,16,28,.65)}
.crm-ruang-nama{font-weight:800;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-ruang-meta{font-size:.74rem;color:var(--redup2)}
.crm-pesan{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;
  background-image:radial-gradient(circle at 20% 10%,rgba(231,196,106,.05),transparent 45%),
    radial-gradient(circle at 85% 80%,rgba(96,165,250,.05),transparent 45%)}
.crm-kosong{text-align:center;color:var(--redup2);font-size:.84rem;margin:auto}
.crm-bubble{max-width:min(78%,560px);padding:8px 11px;border-radius:13px;font-size:.87rem;line-height:1.5;
  position:relative;box-shadow:0 3px 10px -8px #000;word-break:break-word}
.crm-bubble.masuk{align-self:flex-start;background:rgba(30,45,68,.95);border:1px solid rgba(255,255,255,.07);
  border-top-left-radius:4px}
.crm-bubble.keluar{align-self:flex-end;background:linear-gradient(150deg,rgba(231,196,106,.22),rgba(201,162,39,.13));
  border:1px solid rgba(231,196,106,.3);border-top-right-radius:4px}
.crm-isi{white-space:pre-wrap}
.crm-meta{display:flex;justify-content:flex-end;gap:6px;align-items:center;font-size:.66rem;color:var(--redup2);margin-top:3px}
.crm-ack{color:#7DD3A8;font-weight:700}
.crm-ack.warn{color:#FCA5A5}
.crm-media{margin-bottom:5px}
.crm-media img{max-width:100%;max-height:260px;border-radius:10px;display:block;background:rgba(0,0,0,.25)}
.crm-media-nama{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;
  background:rgba(0,0,0,.22);padding:8px 10px;border-radius:9px}
.crm-media-tombol{margin-left:auto;background:rgba(255,255,255,.1);border:1px solid var(--line2);color:#F0E3BE;
  border-radius:8px;padding:4px 9px;font-size:.74rem;cursor:pointer;font-family:inherit}
.crm-media-link{display:block}
.crm-tulis{display:flex;gap:8px;align-items:flex-end;padding:11px 12px;border-top:1px solid var(--line2);
  background:rgba(7,13,24,.8);flex-wrap:wrap}
.crm-tulis textarea{flex:1;min-height:44px;max-height:130px;resize:none;padding:11px 13px;border-radius:12px}
.crm-tulis--mati{align-items:center;gap:9px;font-size:.82rem;color:var(--redup)}
.crm-lampir{position:relative;width:42px;height:42px;border-radius:11px;border:1px solid var(--line2);
  display:grid;place-items:center;cursor:pointer;color:#C7D2E3;flex:0 0 auto}
.crm-lampir input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.crm-lampir:hover{background:rgba(255,255,255,.06)}
.crm-kirim{width:46px;height:42px;padding:0;flex:0 0 auto;border-radius:12px}
.crm-lampir-nama{flex:1 1 100%;font-size:.74rem;color:var(--emas)}
.crm-akun-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:0 16px 16px}
.crm-akun{padding:13px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.crm-akun-atas{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:.88rem}
.crm-akun-angka{display:flex;gap:10px;flex-wrap:wrap;font-size:.78rem;color:#C7D2E3}
.crm-akun-warn{margin-top:7px;font-size:.74rem;color:#FCA5A5}
@media (max-width:900px){
  .crm-dua{grid-template-columns:minmax(0,1fr)}
  .crm-daftar{max-height:none;min-height:0;order:2}
  .crm-ruang{max-height:none;min-height:60vh;order:1}
  .crm-daftar-isi{max-height:46vh}
  .crm-bubble{max-width:86%}
  .crm-ringkas .tab-baris{margin:0!important;width:100%}
}

/* ---------- landing: lencana hero ---------- */
.hero-lencana{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.hero-lencana .chip{background:rgba(231,196,106,.08);border-color:var(--line);color:#EBDCB4;padding:6px 12px;font-size:.76rem}

/* ---------- pintasan panel di topbar (selalu terlihat) ---------- */
.panel-pintasan{white-space:nowrap}
@media (max-width:900px){
  .panel-pintasan span{display:inline}
  .panel-pintasan{padding:7px 10px;font-size:.76rem}
  .topbar-aksi{gap:6px}
}

/* ---------- AUTO POSTING MEDIA SOSIAL ---------- */
.sosmed-ikon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--emas);
  background:var(--emas-lembut);border:1px solid var(--line)}
.sosmed-ikon svg{width:20px;height:20px}
.centang.mati{opacity:.55}
.sosmed-post{padding:14px;border:1px solid var(--line2);border-radius:14px;background:rgba(255,255,255,.025);margin-bottom:12px}
.sosmed-post-isi{font-size:.9rem;line-height:1.5}
.sosmed-target{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.sosmed-target-baris{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 10px;border-radius:9px;background:rgba(6,12,22,.5);font-size:.83rem}
.sosmed-target-baris svg{width:15px;height:15px;color:var(--emas)}