:root{
  --bg:#0d0d0d;
  --surface:#111111;
  --surface-2:#1a1a1a;
  --surface-3:#222222;
  --border:#2a2a2a;
  --border-soft:rgba(255,255,255,.08);
  --gold:#D4A017;
  --gold-bright:#F0C040;
  --gold-dim:#8B6914;
  --crimson:#c23a4d;
  --crimson-bright:#e5556a;
  --green:#22c55e;
  --green-bg:rgba(34,197,94,.14);
  --amber:#d0973f;
  --amber-bg:rgba(208,151,63,.14);
  --slate:#8a8a8a;
  --slate-bg:rgba(138,138,138,.14);
  --info:#4f8fc4;
  --info-bg:rgba(79,143,196,.14);
  --text:#e8e8e8;
  --text-muted:#aaaaaa;
  --text-dim:#666666;
  --radius:12px;
  --shadow: 0 20px 60px -12px rgba(0,0,0,.55);
  --font-display:'Outfit',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(212,160,23,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(212,160,23,.05), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
body::-webkit-scrollbar{width:7px;height:7px;}
body::-webkit-scrollbar-track{background:transparent;}
body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.mono{font-family:var(--font-mono);}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:700;}
::selection{background:var(--gold);color:#0d0d0d;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

/* ---------- keyframes ---------- */
@keyframes slideUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes shimmer{0%{background-position:-200% center;}100%{background-position:200% center;}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 3px var(--green-bg);}50%{box-shadow:0 0 0 6px rgba(34,197,94,.05);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes heroFloat{0%,100%{transform:translateY(0) scale(1) rotate(0deg);}25%{transform:translateY(-10px) scale(1.005) rotate(.4deg);}75%{transform:translateY(-5px) scale(1.002) rotate(-.4deg);}}
@keyframes spinSlow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes spinReverse{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
@keyframes badgePop{0%{opacity:0;transform:scale(.7) rotate(-8deg);}70%{transform:scale(1.04) rotate(1.5deg);}100%{opacity:1;transform:scale(1) rotate(0deg);}}
@keyframes orbit{from{transform:rotate(0deg) translateX(58px) rotate(0deg);}to{transform:rotate(360deg) translateX(58px) rotate(-360deg);}}

.animate-in{animation:slideUp .7s cubic-bezier(.22,1,.36,1) both;}

/* ---------- shell ---------- */
.shell{max-width:1240px;margin:0 auto;padding:0 24px 60px;}
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(13,13,13,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(212,160,23,.12);
  box-shadow:0 4px 30px rgba(0,0,0,.4);
  animation:fadeIn .6s ease both;
}
.topbar-inner{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:14px;min-height:60px;}
.seal{
  width:42px;height:42px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.seal svg{width:22px;height:22px;}
.seal img{width:250%;height:250%;object-fit:contain;display:block;}
.brand{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.02em;color:#fff;}
.brand-sub{font-size:10.5px;color:var(--text-dim);letter-spacing:.2px;margin-top:1px;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.clock{
  font-size:13px;color:var(--text-muted);border:1px solid rgba(212,160,23,.2);
  background:rgba(212,160,23,.08);
  border-radius:999px;padding:6px 14px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);
}
.clock-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulseGlow 2s infinite;}
.btn{
  border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--text);
  border-radius:9px;padding:10px 18px;font-size:13px;font-weight:500;font-family:var(--font-display);
  display:inline-flex;align-items:center;gap:7px;transition:all .2s ease;
}
.btn:hover{border-color:rgba(212,160,23,.5);color:var(--gold);}
.btn-primary{
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-bright) 40%,var(--gold) 60%,var(--gold-dim) 100%);
  background-size:200% auto;animation:shimmer 3.5s linear infinite;
  border:none;color:#000;font-weight:700;box-shadow:0 4px 20px rgba(212,160,23,.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(212,160,23,.5);color:#000;}
.btn-outline-crimson{border:1px solid var(--crimson);color:var(--crimson-bright);background:transparent;}
.btn-outline-crimson:hover{background:rgba(194,58,77,.1);border-color:var(--crimson-bright);}
.btn-ghost{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--text-muted);}
.btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.25);}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none;transform:none;}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:8px;}
.user-chip{
  display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:5px 12px 5px 6px;font-size:12.5px;background:rgba(255,255,255,.03);
}
.user-chip .av{width:22px;height:22px;border-radius:50%;background:var(--crimson);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;}
.user-chip-name{text-transform:uppercase;}

/* ---------- hero ---------- */
.hero{padding:56px 0 30px;}
.hero.hero-with-media{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;}
.hero-media{width:100%;display:flex;align-items:center;justify-content:center;position:relative;}
.hero-media::before{
  content:'';position:absolute;inset:-12%;border-radius:50%;
  background:radial-gradient(circle,rgba(212,160,23,.22) 0%,rgba(212,160,23,.06) 50%,transparent 72%);
  filter:blur(24px);animation:pulseGlow 3.5s ease-in-out infinite;z-index:0;
}
.hero-media::after{
  content:'';position:absolute;inset:-4%;border-radius:50%;
  border:1.5px dashed rgba(212,160,23,.25);animation:spinSlow 20s linear infinite;z-index:1;
}
.hero-img{
  width:100%;max-width:390px;height:auto;max-height:390px;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;position:relative;z-index:2;
  box-shadow:0 0 0 2px rgba(212,160,23,.5), 0 0 40px rgba(212,160,23,.3), 0 20px 60px rgba(0,0,0,.6);
  display:block;animation:heroFloat 7s ease-in-out infinite, badgePop 1s .2s cubic-bezier(.34,1.56,.64,1) both;
}
@media (max-width:900px){
  .hero.hero-with-media{grid-template-columns:1fr;gap:36px;}
  .hero-img{max-height:260px;max-width:260px;margin:0 auto;}
}
.hero.hero-with-media h1,.hero.hero-with-media p{max-width:none;}
.hero-text{animation:slideUp .7s cubic-bezier(.22,1,.36,1) both;}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:20px;font-family:var(--font-mono);
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--gold);flex:none;}
.hero h1{
  font-family:var(--font-display);font-size:clamp(28px,4.4vw,50px);font-weight:800;
  line-height:1.14;letter-spacing:-.02em;margin:0 0 18px;max-width:720px;color:#fff;
}
.hero p{color:#aaa;font-size:15px;max-width:540px;line-height:1.7;margin:0 0 30px;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;}

.howitworks{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:44px;border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg,rgba(212,160,23,.03) 0%,transparent 100%);}
.hiw-step{padding:26px 18px;border-right:1px solid var(--border-soft);position:relative;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .3s ease;}
.hiw-step:last-child{border-right:none;}
.hiw-step:hover{transform:translateY(-4px);background:rgba(255,255,255,.02);box-shadow:0 20px 40px rgba(0,0,0,.35);}
.hiw-step::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity .3s ease;}
.hiw-step:hover::before{opacity:1;}
.hiw-num{font-family:var(--font-mono);font-size:11px;color:var(--gold);margin-bottom:10px;font-weight:600;letter-spacing:.05em;}
.hiw-step h3{font-size:14px;margin:0 0 6px;font-weight:700;font-family:var(--font-display);color:#fff;}
.hiw-step p{font-size:12px;color:var(--text-dim);margin:0;line-height:1.55;}

/* ---------- grid ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:48px 0 20px;flex-wrap:wrap;gap:8px;}
.section-head h2{font-size:21px;font-weight:700;margin:0;color:#fff;}
.section-head span{font-size:12px;color:var(--text-dim);font-family:var(--font-mono);}
/* ---------- filter bar ---------- */
.filter-bar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;
  background:rgba(255,255,255,.02);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:24px;backdrop-filter:blur(8px);
}
.filter-field{display:flex;flex-direction:column;gap:6px;min-width:140px;}
.filter-field label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono);}
.filter-field .input{padding:9px 12px;font-size:13px;}
.filter-search{flex:1 1 200px;min-width:180px;}
.filter-range-inputs{display:flex;align-items:center;gap:6px;}
.filter-range-inputs .input{width:120px;padding:9px 10px;font-size:12.5px;}
.filter-range-inputs span{color:var(--text-dim);font-size:12px;}
#btnResetFilter{margin-left:auto;align-self:center;color:#888;}
@media (max-width:760px){
  .filter-bar{flex-direction:column;align-items:stretch;}
  .filter-field{min-width:0;width:100%;}
  .filter-range-inputs .input{width:100%;flex:1;}
  #btnResetFilter{margin-left:0;align-self:flex-start;}
}

/* ---------- rekap ---------- */
.rekap-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin:20px 0 24px;}
.rekap-export-group{display:flex;gap:8px;flex-wrap:wrap;flex:none;}
.rekap-head h1{font-family:var(--font-display);font-size:26px;margin:0 0 6px;color:#fff;}
.rekap-head p{color:var(--text-dim);font-size:13px;margin:0;max-width:520px;}
.rekap-period{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.02);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:16px 18px;
}
.rekap-period .filter-field{min-width:130px;}
.rekap-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px;}
.rekap-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0;}
@media (max-width:900px){.rekap-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.rekap-cards{grid-template-columns:1fr;}}
.rekap-card{
  border-radius:var(--radius);padding:20px 22px;border:1px solid var(--border-soft);
  background:rgba(255,255,255,.02);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.rekap-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.4);border-color:rgba(212,160,23,.25);}
.rekap-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;}
.rekap-card.coming_soon::before{background:var(--info);}
.rekap-card.pending::before{background:var(--amber);}
.rekap-card.live::before{background:var(--green);}
.rekap-card.ended::before{background:var(--slate);}
.rekap-card .rk-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);display:flex;align-items:center;gap:7px;margin-bottom:12px;font-family:var(--font-mono);}
.rekap-card .rk-label .dot{width:7px;height:7px;border-radius:50%;}
.rekap-card.coming_soon .dot{background:var(--info);}
.rekap-card.pending .dot{background:var(--amber);}
.rekap-card.live .dot{background:var(--green);box-shadow:0 0 6px var(--green);}
.rekap-card.ended .dot{background:var(--slate);}
.rekap-card .rk-count{font-family:var(--font-display);font-size:34px;font-weight:800;line-height:1;margin-bottom:6px;color:#fff;}
.rekap-card .rk-count span{font-size:13px;font-weight:400;color:var(--text-dim);font-family:var(--font-body);margin-left:4px;}
.rekap-card .rk-value{font-family:var(--font-mono);font-size:15px;color:var(--gold);font-weight:600;}
.rekap-card .rk-value-label{font-size:10px;color:var(--text-dim);margin-top:3px;}

.rekap-bar-wrap{background:rgba(255,255,255,.02);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px 22px;margin-bottom:20px;}
.rekap-bar-title{font-size:11.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;display:flex;justify-content:space-between;font-family:var(--font-mono);}
.rekap-bar-title b{color:var(--gold);font-family:var(--font-mono);font-weight:600;}
.rekap-bar{display:flex;width:100%;height:12px;border-radius:999px;overflow:hidden;background:var(--surface-3);}
.rekap-bar-seg{height:100%;transition:width .5s cubic-bezier(.22,1,.36,1);}
.rekap-bar-seg.coming_soon{background:var(--info);}
.rekap-bar-seg.pending{background:var(--amber);}
.rekap-bar-seg.live{background:var(--green);}
.rekap-bar-seg.ended{background:var(--slate);}
.rekap-legend{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap;}
.rekap-legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted);}
.rekap-legend-item .dot{width:8px;height:8px;border-radius:50%;}
.rekap-legend-item.coming_soon .dot{background:var(--info);}
.rekap-legend-item.pending .dot{background:var(--amber);}
.rekap-legend-item.live .dot{background:var(--green);}
.rekap-legend-item.ended .dot{background:var(--slate);}

.rekap-table-wrap{background:rgba(255,255,255,.02);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;}
.rekap-table{width:100%;border-collapse:collapse;font-size:13px;}
.rekap-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);padding:13px 16px;border-bottom:1px solid var(--border-soft);background:rgba(255,255,255,.03);font-family:var(--font-mono);}
.rekap-table td{padding:13px 16px;border-bottom:1px dashed var(--border-soft);vertical-align:middle;}
.rekap-table tr:last-child td{border-bottom:none;}
.rekap-table tr:hover td{background:rgba(255,255,255,.02);}
.rekap-table .rt-nama{font-weight:600;color:#fff;}
.rekap-table .rt-nilai{font-family:var(--font-mono);color:var(--gold);text-align:right;}
.rekap-empty{padding:40px 20px;text-align:center;color:var(--text-dim);font-size:13px;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.card{
  background:rgba(255,255,255,.02);border:1px solid var(--border-soft);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.card:hover{border-color:rgba(212,160,23,.3);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(212,160,23,.2);}
.card-media{height:190px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.card-media svg{width:56px;height:56px;opacity:.92;}
.card:hover .card-media img{transform:scale(1.05);}
.card-media img{transition:transform .4s ease;}
.status-pill{
  position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:5px 11px;border-radius:999px;text-transform:uppercase;display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);color:#ccc;font-family:var(--font-mono);
}
.status-pill.live{border-color:rgba(34,197,94,.6);}
.status-pill.pending{border-color:rgba(208,151,63,.6);}
.status-pill.ended{border-color:rgba(138,138,138,.6);}
.status-pill.coming_soon{border-color:rgba(79,143,196,.6);}
.status-pill.eksternal-pill{
  left:auto;right:10px;border-color:rgba(194,58,77,.65);
}
.eksternal-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--crimson-bright);background:rgba(194,58,77,.12);border:1px solid rgba(194,58,77,.35);
  border-radius:999px;padding:5px 12px;margin-bottom:14px;
}
.eksternal-box{text-align:left;}
.coming-soon-box{text-align:left;}
.coming-soon-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--info);background:var(--info-bg);border:1px solid rgba(79,143,196,.35);
  border-radius:999px;padding:5px 12px;margin-bottom:14px;
}
.eksternal-url{
  margin-top:10px;font-size:11px;color:var(--text-dim);word-break:break-all;
  font-family:var(--font-mono);text-align:center;
}
.status-dot{width:6px;height:6px;border-radius:50%;flex:none;}
.status-pill.live .status-dot{background:var(--green);box-shadow:0 0 6px var(--green);}
.status-pill.pending .status-dot{background:var(--amber);box-shadow:0 0 6px var(--amber);}
.status-pill.ended .status-dot{background:var(--slate);box-shadow:0 0 6px var(--slate);}
.status-pill.coming_soon .status-dot{background:var(--info);box-shadow:0 0 6px var(--info);}
.status-dot.live{animation:pulse 1.4s infinite;}
.card-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card-cat{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-family:var(--font-mono);}
.card-title{font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.3;color:#fff;}
.card-row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:12px;border-top:1px solid var(--border-soft);}
.card-row .lbl{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;font-family:var(--font-mono);}
.card-row .val{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;}
.card-row .val.mono{font-family:var(--font-mono);}
.card-row div:last-child .val{color:var(--gold);}
.card-timer{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);}

/* ---------- media placeholder gradients per category ---------- */
.media-kendaraan{background:linear-gradient(150deg,#2a1a10,#111111 70%);}
.media-elektronik{background:linear-gradient(150deg,#10202a,#111111 70%);}
.media-properti{background:linear-gradient(150deg,#2a2410,#111111 70%);}
.media-lainnya{background:linear-gradient(150deg,#1e1425,#111111 70%);}

/* ---------- detail ---------- */
.detail-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-top:18px;align-items:start;}
@media (max-width:860px){.detail-wrap{grid-template-columns:1fr;}}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);margin:20px 0 4px;border:none;background:none;padding:0;transition:color .2s;}
.back-link:hover{color:var(--gold);}
.detail-media{height:300px;border-radius:var(--radius);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;overflow:hidden;}
.detail-media svg{width:100px;height:100px;opacity:.9;}
.detail-panel{background:rgba(255,255,255,.02);border:1px solid var(--border-soft);border-radius:var(--radius);padding:22px;}
.detail-panel + .detail-panel{margin-top:16px;}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13.5px;}
.kv dt{color:var(--text-dim);}
.kv dd{margin:0;font-family:var(--font-mono);color:#ddd;}
.desc{font-size:14px;color:var(--text-muted);line-height:1.75;margin-top:10px;}

.bidbox{background:rgba(255,255,255,.02);border:1px solid var(--border-soft);border-radius:var(--radius);padding:22px;position:relative;overflow:hidden;}
.bidbox-top{display:flex;gap:16px;align-items:center;margin-bottom:16px;}
.ring-wrap{position:relative;width:76px;height:76px;flex:none;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-track{fill:none;stroke:var(--border);stroke-width:6;}
.ring-prog{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .4s;}
.ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.ring-center .n{font-family:var(--font-mono);font-weight:700;font-size:15px;color:#fff;}
.ring-center .u{font-size:8.5px;color:var(--text-dim);text-transform:uppercase;}
.cur-lbl{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-family:var(--font-mono);}
.cur-val{font-family:var(--font-display);font-size:27px;font-weight:800;color:var(--gold);}
.timer-line{font-size:12px;color:var(--text-muted);margin-top:3px;}

.bidform{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.bid-stepper{display:flex;align-items:stretch;gap:8px;}
.bid-stepper .input{text-align:center;flex:1;min-width:0;}
.bid-step-btn{
  flex:none;width:44px;border-radius:9px;border:1px solid var(--border-soft);background:rgba(255,255,255,.04);
  color:var(--gold);font-size:20px;font-weight:600;line-height:1;cursor:pointer;transition:.15s;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.bid-step-btn:hover{border-color:var(--gold);background:rgba(212,160,23,.1);}
.bid-step-btn:active{transform:scale(0.94);}
.bid-stepper input[type="number"]::-webkit-outer-spin-button,
.bid-stepper input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.bid-stepper input[type="number"]{-moz-appearance:textfield;}
.bidform label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);}
.input{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border-soft);border-radius:9px;
  padding:11px 12px;color:var(--text);font-size:14px;outline:none;transition:border-color .2s;
}
.input:focus{border-color:rgba(212,160,23,.5);}
.input::placeholder{color:#555;}
.input:disabled{opacity:.5;cursor:not-allowed;}
select.input{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23D4A017' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;
}
select.input option {
    background: var(--surface-2);
    /* Background gelap */
    color: var(--text);
    /* Teks terang */
}
.hint{font-size:11.5px;color:var(--text-dim);}
.hint b{color:var(--gold);font-weight:600;}
.err{font-size:12px;color:var(--crimson-bright);background:rgba(194,58,77,.1);border:1px solid rgba(194,58,77,.3);padding:8px 10px;border-radius:8px;display:none;}
.ok{font-size:12px;color:var(--green);background:var(--green-bg);border:1px solid rgba(34,197,94,.3);padding:8px 10px;border-radius:8px;display:none;}

.ledger{margin-top:14px;}
.ledger-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.ledger-head span{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);}
.ledger-list{display:flex;flex-direction:column;gap:0;max-height:220px;overflow-y:auto;border-top:1px solid var(--border-soft);}
.ledger-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--border-soft);font-size:12.5px;}
.ledger-row-mine{background:rgba(212,160,23,.07);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:8px;}
.ledger-mine-tag{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  color:var(--gold);background:rgba(212,160,23,.14);border:1px solid rgba(212,160,23,.4);
  border-radius:999px;padding:1px 7px;margin-left:5px;vertical-align:middle;text-transform:none;
}
.ledger-seq{font-family:var(--font-mono);color:var(--text-dim);font-size:11px;width:34px;flex:none;}
.ledger-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;}
.ledger-name-clickable{cursor:pointer;color:var(--gold-bright,var(--gold));text-decoration:underline dotted;text-underline-offset:2px;}
.ledger-name-clickable:hover{color:var(--gold);}
.ledger-time{font-family:var(--font-mono);color:var(--text-dim);font-size:10.5px;flex:none;white-space:nowrap;}
.ledger-amt{font-family:var(--font-mono);font-weight:600;color:var(--gold);}
.ledger-empty{color:var(--text-dim);font-size:12.5px;padding:14px 2px;}
.ledger-locked{color:var(--text-dim);font-size:12.5px;padding:14px 12px;background:rgba(148,148,148,.08);border:1px dashed var(--border-soft);border-radius:8px;line-height:1.5;text-align:center;}
.ledger-locked .btn{width:100%;justify-content:center;}

.winner-card{border:1px solid var(--gold);background:linear-gradient(160deg,rgba(212,160,23,.12),transparent);border-radius:var(--radius);padding:22px;text-align:center;}
.winner-card-mine{border-color:var(--gold-bright);box-shadow:0 0 0 3px rgba(212,160,23,.15),0 20px 50px -12px rgba(212,160,23,.35);}
.winner-card-mine .tag{color:var(--gold-bright);font-size:12.5px;}
.winner-card .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700;font-family:var(--font-mono);}
.winner-card h3{margin:8px 0 4px;font-family:var(--font-display);font-size:22px;color:#fff;text-transform:uppercase;}
.winner-card .amt{font-family:var(--font-display);font-size:26px;color:var(--gold);font-weight:800;margin:6px 0 10px;}
.winner-card p{font-size:12.5px;color:var(--text-muted);margin:0 0 14px;}
.winner-officer-detail{
  margin-top:16px;padding-top:16px;border-top:1px dashed rgba(212,160,23,.3);
  text-align:left;
}
.winner-officer-detail .wod-title{
  font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--crimson-bright);
  margin-bottom:10px;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);
}
.winner-officer-detail dl.kv dd{word-break:break-word;}

/* ---------- modal ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(4,4,4,.8);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:18px;
  animation:fadeIn .2s ease both;
}
.modal{
  background:#131313;border:1px solid var(--border-soft);border-radius:16px;
  width:100%;max-width:460px;max-height:88vh;overflow-y:auto;padding:28px;
  box-shadow:var(--shadow);animation:slideUp .35s cubic-bezier(.22,1,.36,1) both;
}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.modal-head h2{font-family:var(--font-display);font-size:20px;margin:0;color:#fff;}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:20px;line-height:1;padding:2px;transition:color .2s;}
.modal-close:hover{color:#fff;}
.modal-sub{font-size:12.5px;color:var(--text-dim);margin:0 0 20px;line-height:1.55;}
.field{margin-bottom:14px;}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:42px;}
.pw-toggle{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;border-radius:6px;
  -webkit-tap-highlight-color:transparent;
}
.pw-toggle:hover{color:var(--gold);background:rgba(212,160,23,.08);}
.field label{display:block;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-family:var(--font-mono);}
.upload{
  border:1.5px dashed var(--border);border-radius:10px;padding:16px;text-align:center;font-size:12.5px;
  color:var(--text-dim);cursor:pointer;position:relative;transition:.2s;
}
.upload:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,160,23,.04);}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.upload-preview{width:100%;max-height:130px;object-fit:contain;border-radius:8px;margin-top:8px;display:none;}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--text-dim);margin:14px 0 4px;line-height:1.5;}
.consent input{margin-top:2px;}

/* ---------- admin ---------- */
.admin-list{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.admin-item{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border-soft);border-radius:10px;padding:11px 13px;font-size:12.5px;transition:border-color .2s,background .2s;}
.admin-item:hover{border-color:rgba(212,160,23,.25);background:rgba(255,255,255,.02);}
.admin-item .n{font-weight:600;color:#fff;}
.eksternal-tag{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  color:var(--crimson-bright);background:rgba(194,58,77,.14);border:1px solid rgba(194,58,77,.35);
  border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle;
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:480px){.two-col{grid-template-columns:1fr;}}

/* ---------- gallery ---------- */
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.status-pill{z-index:2;}
.gallery-main{width:100%;height:300px;border-radius:var(--radius);border:1px solid var(--border-soft);overflow:hidden;position:relative;background:var(--surface-2);margin-bottom:10px;cursor:zoom-in;}
.gallery-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.gallery-main:hover img{transform:scale(1.03);}
.gallery-main:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.gallery-zoom-btn{
  position:absolute;right:10px;bottom:10px;z-index:2;
  background:rgba(0,0,0,.7);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:20px;padding:6px 12px;font-size:12px;line-height:1;cursor:zoom-in;
  backdrop-filter:blur(8px);transition:.2s;
}
.gallery-zoom-btn:hover{background:rgba(0,0,0,.9);border-color:rgba(212,160,23,.4);}
.gallery-thumbs{display:flex;gap:8px;overflow-x:auto;margin-bottom:18px;padding-bottom:2px;}
.gallery-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;flex:none;opacity:.6;transition:.2s;}
.gallery-thumbs img:hover{opacity:1;}
.gallery-thumbs img.active{border-color:var(--gold);opacity:1;}

/* ---------- lightbox foto (galeri, tanpa crop) ---------- */
.lightbox-overlay{background:rgba(0,0,0,.92);padding:14px;}
.lightbox{
  position:relative;width:100%;height:100%;max-width:1100px;max-height:90vh;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-img{max-width:100%;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:8px;display:block;box-shadow:var(--shadow);}
.lightbox-close{
  position:absolute;top:-6px;right:-6px;background:var(--surface-3);color:var(--text);
  border:1px solid var(--border);width:36px;height:36px;border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer;z-index:3;transition:color .2s;
}
.lightbox-close:hover{color:var(--gold);}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.2);
  width:42px;height:42px;border-radius:50%;font-size:16px;cursor:pointer;transition:.2s;
}
.lightbox-nav:hover{background:rgba(0,0,0,.85);border-color:rgba(212,160,23,.4);}
.lightbox-prev{left:6px;}
.lightbox-next{right:6px;}
.lightbox-counter{
  position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  color:var(--text-dim);font-size:12px;background:rgba(0,0,0,.6);
  padding:3px 10px;border-radius:20px;font-family:var(--font-mono);
}
@media (max-width:640px){
  .lightbox-nav{width:36px;height:36px;font-size:14px;}
  .lightbox-close{top:6px;right:6px;}
}
@media (max-width:480px){
  .ledger-row{flex-wrap:wrap;row-gap:2px;}
  .ledger-time{order:3;flex:1 0 100%;padding-left:44px;font-size:10px;}
  .ledger-amt{order:2;}
}
.uploaded-by{font-size:11.5px;color:var(--text-dim);margin-top:12px;padding-top:12px;border-top:1px dashed var(--border-soft);}
.uploaded-by b{color:var(--text-muted);font-weight:600;}

/* ---------- multi photo upload (admin) ---------- */
.multi-upload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:10px;}
.multi-upload-grid .thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--border-soft);}
.multi-upload-grid .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.multi-upload-grid .thumb button{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.75);color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.multi-upload-grid .thumb button:hover{background:var(--crimson);}

/* ---------- auth chips ---------- */
.logout-btn{background:none;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;padding:0 0 0 3px;border-left:1px solid var(--border-soft);padding-left:8px;transition:color .2s;}
.logout-btn:hover{color:var(--crimson-bright);}
.officer-group{display:flex;align-items:center;gap:8px;}

.footer{margin-top:70px;padding-top:22px;border-top:1px solid var(--border-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.02em;}
.footer b{color:var(--gold);font-weight:700;}
.badge-demo{display:inline-flex;align-items:center;gap:6px;background:var(--slate-bg);color:var(--slate);border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:600;letter-spacing:.05em;}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1a1a1a;border:1px solid var(--border);padding:11px 18px;border-radius:10px;font-size:13px;z-index:200;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;}
.idle-warning{
  position:relative;z-index:301;
  background:linear-gradient(90deg, rgba(208,151,63,.16), rgba(208,151,63,.08));
  border-bottom:1px solid rgba(208,151,63,.5);
  padding:10px 18px;display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:13px;color:var(--amber);flex-wrap:wrap;text-align:center;
}
.idle-warning b{font-family:var(--font-mono);color:var(--gold-bright);}
.toast.show{opacity:1;transform:translate(-50%,-6px);}

/* ---------- entrance animation staggering (pure CSS, no JS needed) ---------- */
.eyebrow{animation:slideUp .7s cubic-bezier(.22,1,.36,1) both;}
.hero h1{animation:slideUp .7s .1s cubic-bezier(.22,1,.36,1) both;}
.hero p{animation:slideUp .7s .2s cubic-bezier(.22,1,.36,1) both;}
.hero-actions{animation:slideUp .7s .3s cubic-bezier(.22,1,.36,1) both;}
.howitworks{animation:slideUp .7s .1s cubic-bezier(.22,1,.36,1) both;}
.section-head{animation:fadeIn .6s ease both;}
.filter-bar{animation:slideUp .6s .05s cubic-bezier(.22,1,.36,1) both;}
.grid{animation:slideUp .6s .1s cubic-bezier(.22,1,.36,1) both;}

@media (max-width:760px){
  .howitworks{grid-template-columns:1fr 1fr;}
  .hiw-step{border-bottom:1px solid var(--border-soft);}
  .hiw-step:nth-child(2n){border-right:none;}
}
@media (max-width:480px){
  .howitworks{grid-template-columns:1fr;}
  .brand-sub{display:none;}
}
/* 1. Memaksa popup kalender bawaan browser menjadi mode gelap */
input[type="date"].input,
input[type="datetime-local"].input,
input[type="time"].input {
    color-scheme: dark;
}

/* 2. Mengubah ikon kalender di sebelah kanan input */
input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator,
input[type="time"].input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    /* Membuat ikon yang biasanya hitam menjadi putih terang agar terlihat di background gelap */
    filter: invert(1) opacity(0.7);
    transition: .2s;
}

/* Membuat ikon kalender menyala (warna emas) saat di-hover */
input[type="date"].input::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator:hover,
input[type="time"].input::-webkit-calendar-picker-indicator:hover {
    filter: invert(70%) sepia(50%) saturate(600%) hue-rotate(5deg) brightness(110%);
    opacity: 1;
}
select.input {
    /* Memaksa browser menggunakan tema gelap pada popup list dan highlight */
    color-scheme: dark;
}

/* Mengatur warna elemen option yang sedang terpilih/fokus */
select.input option:checked,
select.input option:focus {
    background-color: var(--surface-3) !important;
    color: var(--gold) !important;
}