/* =========================================================
   GOLDENVEST — DESIGN TOKENS
   Hitam premium + putih premium + emas, dicampur
   Display: 'Playfair Display' (mewah) | Body: 'Inter' | Data: 'JetBrains Mono'
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --black:#0a0a0a;
  --black-soft:#121212;
  --charcoal:#1a1a1a;
  --line: rgba(212,175,55,0.18);
  --line-soft: rgba(255,255,255,0.08);
  --white:#fdfcf8;
  --paper:#f7f3e9;
  --text-hi:#f5f1e6;
  --text-mid:#b9b2a0;
  --text-low:#7a7363;
  --gold:#d4af37;
  --gold-light:#f0d978;
  --gold-deep:#9c7a1f;
  --gold-soft: rgba(212,175,55,0.14);
  --green:#2e9e5b;
  --red:#c0392b;
  --ink:#1c1810;
  --ink-mid:#6b6354;
  --ink-low:#a39c8a;
  --radius:16px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,0.7);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(212,175,55,0.14), transparent 60%),
    radial-gradient(600px 360px at 8% 30%, rgba(212,175,55,0.07), transparent 65%),
    repeating-linear-gradient(115deg, rgba(212,175,55,0.05) 0px, rgba(212,175,55,0.05) 1px, transparent 1px, transparent 68px),
    linear-gradient(180deg, var(--black) 0%, var(--black) 220px, var(--paper) 220px, var(--paper) 100%);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,.display{ font-family:'Playfair Display', serif; letter-spacing:0.01em; }
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
::selection{ background:var(--gold-soft); }

.gold-text{
  background:linear-gradient(120deg, var(--gold-light), var(--gold) 45%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Brand ---------- */
.brand{ display:flex; align-items:center; gap:10px; font-family:'Playfair Display'; font-weight:700; font-size:19px; }
.brand img{ width:34px; height:34px; border-radius:50%; box-shadow:0 0 0 1px var(--line); }
.brand b{ font-weight:700; }

/* ---------- Auth pages ---------- */
.auth-wrap{ min-height:100vh; display:grid; grid-template-columns: 1.1fr 1fr; }
@media (max-width: 880px){ .auth-wrap{ grid-template-columns: 1fr; } .auth-aside{ display:none; } }
.auth-aside{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.1), var(--black) 88%),
    repeating-linear-gradient(115deg, rgba(212,175,55,0.06) 0px, rgba(212,175,55,0.06) 1px, transparent 1px, transparent 70px),
    var(--black-soft);
  padding:48px;
  display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid var(--line);
}
.auth-aside__quote{ max-width:430px; }
.auth-aside__quote h2{ font-size:32px; line-height:1.3; margin:0 0 14px; color:var(--text-hi); }
.auth-aside__quote p{ color:var(--text-mid); margin:0; font-size:14.5px; line-height:1.7; }
.auth-aside__stat{ display:flex; gap:30px; margin-top:38px; }
.auth-aside__stat div b{ display:block; font-family:'Playfair Display'; font-size:23px; color:var(--gold); }
.auth-aside__stat div span{ color:var(--text-low); font-size:12px; }

.auth-form{
  display:flex; align-items:center; justify-content:center; padding:32px;
  background:
    radial-gradient(500px 320px at 50% 0%, rgba(212,175,55,0.08), transparent 65%),
    var(--black);
}
.auth-card{ width:100%; max-width:390px; }
.auth-card .brand{ margin-bottom:30px; justify-content:center; }
.auth-card h1{ font-size:25px; margin:0 0 6px; text-align:center; color:var(--text-hi); }
.auth-card .sub{ color:var(--text-mid); font-size:14px; margin:0 0 28px; text-align:center; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color:var(--text-mid); margin-bottom:6px; letter-spacing:.02em; }
.field input{
  width:100%; background:var(--charcoal); border:1px solid var(--line-soft); color:var(--text-hi);
  padding:13px 14px; border-radius:10px; font-size:14.5px;
}
.field input::placeholder{ color:var(--text-low); }
.field input:focus{ border-color:var(--gold); }

.btn-primary{
  width:100%;
  background:linear-gradient(120deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color:#1a1404; border:none; padding:13.5px 16px; border-radius:10px;
  font-weight:700; font-size:14.5px; cursor:pointer; letter-spacing:.01em;
  transition:filter .15s ease, transform .15s ease;
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:active{ transform:translateY(1px); }
.btn-ghost{
  background:transparent; border:1px solid var(--line); color:var(--text-hi);
  padding:11px 16px; border-radius:10px; font-size:13.5px; cursor:pointer;
}

/* Field di dalam panel putih (contoh: form Tarik Saldo) — versi terang */
.panel .field label{ color:var(--ink-mid); }
.panel .field input{ background:var(--paper); border:1px solid rgba(28,24,16,0.15); color:var(--ink); }
.panel .field input::placeholder{ color:var(--ink-low); }
.panel .field input:focus{ border-color:var(--gold-deep); }

.alert-error{
  background:rgba(192,57,43,0.12); border:1px solid rgba(192,57,43,0.35); color:#ff9d92;
  padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:18px;
}
.alert-success{
  background:rgba(46,158,91,0.12); border:1px solid rgba(46,158,91,0.35); color:#79e0a3;
  padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:18px;
}
.auth-foot{ margin-top:22px; font-size:13.5px; color:var(--text-mid); text-align:center; }
.auth-foot a{ color:var(--gold); font-weight:600; }
.demo-hint{
  margin-top:18px; padding:12px 14px; border-radius:10px;
  background:var(--charcoal); border:1px solid var(--line);
  font-size:12.5px; color:var(--text-mid); text-align:center;
}
.demo-hint b{ color:var(--gold); }

/* ---------- App shell ---------- */
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; background:var(--black-soft); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.app-header .brand, .app-header .brand b{ color:var(--text-hi); }
.avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display'; font-weight:700; font-size:15px; color:#1a1404;
}
.app-content{ max-width:720px; margin:0 auto; padding:18px 16px 100px; }

/* ---------- Bottom nav (5 tabs ala screenshot) ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(10,10,10,0.92); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:9px 6px calc(env(safe-area-inset-bottom,0px) + 9px);
}
.bn-item{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-low); font-size:11px; min-width:56px; padding:6px 4px; border-radius:12px; }
.bn-item .ic{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:17px; }
.bn-item.active{ color:var(--gold); }
.bn-item.active .ic{
  background:var(--gold-soft); border-radius:10px; color:var(--gold);
}

/* ---------- Hero / header cards ---------- */
.page-eyebrow{ color:var(--gold); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.page-title{ font-size:24px; margin:2px 0 16px; color:var(--text-hi); }

.hero-card{
  position:relative; overflow:hidden;
  background:linear-gradient(155deg, var(--charcoal), var(--black) 75%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; margin-bottom:16px; box-shadow:var(--shadow);
}
.hero-card::after{
  content:''; position:absolute; top:-50px; right:-50px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,0.22), transparent 70%);
}
.hero-card .badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft); color:var(--gold);
  padding:5px 12px; border-radius:20px; font-size:11.5px; font-weight:600; margin-bottom:14px;
}
.hero-card .label{ color:var(--text-mid); font-size:12.5px; margin-bottom:6px; }
.hero-card .value{ font-family:'Playfair Display'; font-size:32px; font-weight:700; }
.hero-card .value.gold{ color:var(--gold); }
.hero-card .desc{ color:var(--text-mid); font-size:13px; margin-top:10px; line-height:1.6; }
.hero-card .actions{ display:flex; gap:10px; margin-top:18px; }
.hero-card .actions a, .hero-card .actions button{ flex:1; text-align:center; }

/* ---------- Mini stat cards ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.stat-row.two{ grid-template-columns:repeat(2,1fr); }
.stat-card{
  background:var(--white); border:1px solid rgba(28,24,16,0.10); border-radius:12px; padding:14px;
  box-shadow:0 8px 20px -14px rgba(0,0,0,0.25);
}
.stat-card .ic{ color:var(--gold-deep); font-size:16px; margin-bottom:8px; }
.stat-card .k{ font-size:11px; color:var(--ink-low); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.stat-card .v{ font-size:16px; font-weight:700; font-family:'Playfair Display'; color:var(--ink); }

/* ---------- Quick actions (4 icon grid) ---------- */
.quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.quick-item{
  background:var(--white); border:1px solid rgba(28,24,16,0.10); border-radius:12px;
  padding:14px 6px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  box-shadow:0 8px 20px -14px rgba(0,0,0,0.25);
}
.quick-item .ic{
  width:38px; height:38px; border-radius:50%; background:var(--gold-soft); color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.quick-item span{ font-size:11.5px; color:var(--ink-mid); }

/* ---------- Generic panel/list ---------- */
.panel{ background:var(--white); border:1px solid rgba(28,24,16,0.10); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:0 10px 24px -16px rgba(0,0,0,0.22); }
.panel h3{ font-size:16px; margin:0 0 4px; color:var(--ink); }
.panel .sub{ color:var(--ink-mid); font-size:12.5px; margin:0 0 16px; }

.list-link{
  display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:12px;
  background:var(--paper); border:1px solid rgba(28,24,16,0.08); margin-bottom:9px;
}
.list-link .ic{
  width:38px; height:38px; border-radius:10px; background:var(--gold-soft); color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;
}
.list-link .tt{ font-size:14px; font-weight:600; color:var(--ink); }
.list-link .dd{ font-size:12px; color:var(--ink-mid); }
.list-link .arrow{ margin-left:auto; color:var(--ink-low); }

/* ---------- Empty state ---------- */
.empty-cta{ border:1px dashed rgba(28,24,16,0.18); border-radius:var(--radius); padding:44px 20px; text-align:center; color:var(--ink-mid); background:var(--white); }
.empty-cta .ic-big{ width:54px; height:54px; border-radius:14px; background:var(--gold-soft); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:22px; }
.empty-cta h3{ color:var(--ink); margin:0 0 6px; font-size:16px; }
.empty-cta p{ font-size:13px; margin:0; }

/* ---------- Product tabs & cards ---------- */
.tier-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.tier-tab{
  flex:1; text-align:center; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600;
  border:1px solid rgba(28,24,16,0.12); color:var(--ink-mid); background:var(--white);
}
.tier-tab.active{ background:linear-gradient(120deg, var(--gold-light), var(--gold-deep)); color:#1a1404; border-color:transparent; }

.product-card{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--charcoal), var(--black-soft));
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:14px;
}
.product-card::after{
  content:''; position:absolute; top:-30px; right:-30px; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,0.18), transparent 70%);
}
.product-card .tier-eyebrow{ color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.product-card h4{ font-family:'Playfair Display'; font-size:19px; margin:4px 0 14px; }
.product-card .price-box{
  background:var(--black); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:14px;
}
.product-card .price-box .k{ font-size:11px; color:var(--text-low); text-transform:uppercase; letter-spacing:.04em; }
.product-card .price-box .v{ font-family:'Playfair Display'; font-size:22px; font-weight:700; color:var(--gold); }
.meta-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.meta-row .m{ font-size:10.5px; color:var(--ink-low); text-transform:uppercase; margin-bottom:3px; }
.meta-row .mv{ font-size:13.5px; font-weight:600; color:var(--ink); }
.meta-row .mv.green{ color:var(--green); }
/* Varian gelap (dipakai di dalam kartu hitam seperti product-card) */
.product-card .meta-row .m{ color:var(--text-low); }
.product-card .meta-row .mv{ color:var(--text-hi); }
.product-card .meta-row .mv.green{ color:var(--green); }
.btn-buy{
  width:100%; background:linear-gradient(120deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color:#1a1404; border:none; padding:12px 16px; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer;
}

/* ---------- Asset card ---------- */
.asset-card{
  background:var(--white); border:1px solid rgba(28,24,16,0.10); border-radius:14px; padding:16px; margin-bottom:12px;
  display:flex; align-items:center; gap:14px; box-shadow:0 8px 20px -14px rgba(0,0,0,0.22);
}
.asset-card .ic{ width:44px; height:44px; border-radius:12px; background:var(--gold-soft); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.asset-card .info{ flex:1; }
.asset-card .info .tt{ font-weight:700; font-size:14.5px; color:var(--ink); }
.asset-card .info .dd{ font-size:12px; color:var(--ink-mid); margin-top:2px; }
.asset-card .val{ text-align:right; }
.asset-card .val .vv{ font-weight:700; color:var(--gold-deep); font-size:14px; }
.asset-card .val .ll{ font-size:10.5px; color:var(--ink-low); }

/* ---------- Welcome modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-card{
  width:100%; max-width:380px; background:linear-gradient(160deg, var(--charcoal), var(--black));
  border:1px solid var(--line); border-radius:20px; padding:30px 26px 26px; text-align:center;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.modal-card::before{
  content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,0.25), transparent 70%);
}
.modal-card img{ width:64px; height:64px; border-radius:50%; margin-bottom:14px; position:relative; box-shadow:0 0 0 3px var(--gold-soft); }
.modal-card h2{ font-size:21px; margin:0 0 8px; position:relative; color:var(--text-hi); }
.modal-card p{ color:var(--text-mid); font-size:13.5px; line-height:1.7; margin:0 0 22px; position:relative; }
.modal-card .btn-primary{ position:relative; }

/* ---------- Misc ---------- */
.dot{ width:8px; height:8px; border-radius:50%; }
.info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.info-item{ background:var(--paper); border:1px solid rgba(28,24,16,0.08); border-radius:10px; padding:13px 15px; }
.info-item .k{ font-size:11px; color:var(--ink-mid); margin-bottom:5px; }
.info-item .v{ font-size:14px; font-weight:600; color:var(--ink); }
.danger-row{
  display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px;
  background:rgba(192,57,43,0.08); border:1px solid rgba(192,57,43,0.25); color:#ff9d92; margin-top:6px;
}
.danger-row button{ background:none; border:none; color:inherit; font-size:13.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%; text-align:left; }

/* =========================================================
   PANEL ADMIN
   ========================================================= */
.adm-body{ max-width:1080px; margin:0 auto; padding:0 18px 60px; }
.adm-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:var(--black-soft); border-bottom:1px solid var(--line);
  max-width:1080px; margin:0 auto;
}
.adm-header .brand, .adm-header .brand b{ color:var(--text-hi); }
.adm-tag{ font-size:10px; background:var(--gold-soft); color:var(--gold); padding:3px 8px; border-radius:6px; letter-spacing:.08em; margin-left:4px; }
.adm-tabs{ display:flex; gap:6px; max-width:1080px; margin:14px auto 18px; padding:0 18px; overflow-x:auto; }
.adm-tab{ padding:9px 16px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-mid); border:1px solid rgba(28,24,16,0.12); white-space:nowrap; background:var(--white); }
.adm-tab.active{ background:linear-gradient(120deg, var(--gold-light), var(--gold-deep)); color:#1a1404; border-color:transparent; }

.adm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
@media (max-width:880px){ .adm-grid{ grid-template-columns:repeat(2,1fr); } }
.adm-card{ background:var(--white); border:1px solid rgba(28,24,16,0.10); border-radius:14px; padding:18px; box-shadow:0 10px 24px -16px rgba(0,0,0,0.2); }
.adm-card .k{ font-size:11.5px; color:var(--ink-mid); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.adm-card .v{ font-family:'Playfair Display'; font-size:22px; font-weight:700; color:var(--gold-deep); }
.adm-card .vv{ font-family:'Playfair Display'; font-size:22px; font-weight:700; color:var(--ink); }

.adm-table-wrap{ overflow-x:auto; background:var(--white); border:1px solid rgba(28,24,16,0.10); border-radius:14px; box-shadow:0 10px 24px -16px rgba(0,0,0,0.2); }
table.adm-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:560px; color:var(--ink); }
table.adm-table th{ text-align:left; color:var(--ink-mid); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; padding:13px 14px; border-bottom:1px solid rgba(28,24,16,0.08); }
table.adm-table td{ padding:13px 14px; border-bottom:1px solid rgba(28,24,16,0.08); vertical-align:top; }
table.adm-table tr:last-child td{ border-bottom:none; }

.pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.pill.pending{ background:rgba(212,175,55,0.15); color:var(--gold); }
.pill.selesai{ background:rgba(46,158,91,0.15); color:var(--green); }
.pill.batal{ background:rgba(192,57,43,0.15); color:#ff9d92; }
.pill.suspicious{ background:rgba(192,57,43,0.18); color:#ff9d92; }
.pill.aman{ background:rgba(46,158,91,0.15); color:var(--green); }

.btn-mini{ padding:7px 13px; border-radius:8px; font-size:12px; font-weight:600; border:none; cursor:pointer; }
.btn-mini.ok{ background:var(--green); color:#0a1a0f; }
.btn-mini.no{ background:var(--red); color:#fff; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }

.adm-section-title{ font-size:16px; margin:24px 0 12px; font-family:'Playfair Display'; color:var(--ink); }
.adm-inline-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--white); border:1px solid rgba(28,24,16,0.10); border-radius:12px; padding:14px; margin-bottom:18px; box-shadow:0 10px 24px -16px rgba(0,0,0,0.2); }
.adm-inline-form input{ background:var(--paper); border:1px solid rgba(28,24,16,0.12); color:var(--ink); padding:10px 12px; border-radius:8px; font-size:13px; flex:1; min-width:140px; }
.adm-inline-form button{ background:linear-gradient(120deg, var(--gold-light), var(--gold-deep)); color:#1a1404; border:none; padding:10px 18px; border-radius:8px; font-weight:700; font-size:13px; cursor:pointer; }