/* ===== VARIABEL & RESET ===== */
:root {
  --bg:#f1f5f9; --bg-soft:#e2e8f0; --bg-card:#ffffff; --bg-panel:#ffffff;
  --text:#0f172a; --text-soft:#64748b; --border:#e2e8f0;
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --green:#16a34a; --red:#dc2626; --gray:#94a3b8;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 4px 16px rgba(15,23,42,.04);
  --radius:14px;
}
body.dark {
  --bg:#0b1120; --bg-soft:#1e293b; --bg-card:#0f172a; --bg-panel:#1e293b;
  --text:#f1f5f9; --text-soft:#94a3b8; --border:#334155;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
  transition:background .3s,color .3s;
}
.mono { font-family:'JetBrains Mono',monospace; }
.up { color:var(--green) !important; } .down { color:var(--red) !important; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.green { background:var(--green); } .dot.red { background:var(--red); } .dot.gray { background:var(--gray); }

/* ===== TICKER ===== */
.ticker-tape {
  position:fixed; top:0; left:0; right:0; height:34px; z-index:1100;
  background:#0f172a; overflow:hidden; display:flex; align-items:center;
  border-bottom:1px solid #1e293b;
}
.ticker-track {
  display:flex; gap:36px; white-space:nowrap; padding-left:20px;
  animation:scrollTicker 60s linear infinite;
}
.ticker-track:hover { animation-play-state:paused; }
@keyframes scrollTicker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item {
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600;
  color:#e2e8f0; display:flex; gap:8px; align-items:center;
}
.ticker-item b { color:#fff; }
.ticker-item .chg { font-size:11.5px; }

/* ===== NAVBAR ===== */
.navbar {
  position:fixed; top:34px; left:0; right:0; z-index:1000;
  background:var(--bg-card); border-bottom:1px solid var(--border);
  transition:all .2s;
}
.nav-container {
  max-width:1600px; margin:auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo { font-weight:800; font-size:18px; color:var(--text); text-decoration:none; display:flex; align-items:center; gap:8px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(22,163,74,.6); animation:pulse 1.6s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)} 70%{box-shadow:0 0 0 10px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }
.nav-links { display:flex; gap:24px; }
.nav-links a { text-decoration:none; color:var(--text-soft); font-weight:600; font-size:13.5px; transition:color .2s; }
.nav-links a:hover { color:var(--primary); }
.nav-actions { display:flex; align-items:center; gap:10px; }
.clock { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text-soft); font-weight:600; }
.theme-toggle { background:var(--bg-soft); border:1px solid var(--border); width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:14px; color:var(--text); }
.hamburger { display:none; background:none; border:none; font-size:22px; color:var(--text); cursor:pointer; }

/* ===== BUTTONS ===== */
.btn-primary { background:var(--primary); color:#fff; border:none; padding:9px 18px; border-radius:10px; font-weight:700; font-size:13.5px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); padding:9px 18px; border-radius:10px; font-weight:600; font-size:13.5px; cursor:pointer; text-decoration:none; transition:all .15s; }
.btn-ghost:hover { border-color:var(--primary); color:var(--primary); }
.btn-block { width:100%; justify-content:center; }

/* ===== DASHBOARD ===== */
.dash { max-width:1600px; margin:auto; padding:96px 24px 40px; display:flex; flex-direction:column; gap:16px; }
.dash-row { display:grid; gap:16px; }
.row-1 { grid-template-columns:1.4fr 1fr 1fr 1fr; }
.row-2 { grid-template-columns:1fr 1.6fr; }

.panel {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column;
}
.panel-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border); gap:10px; flex-wrap:wrap;
}
.panel-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-soft); display:flex; align-items:center; gap:8px; }
.live-badge { font-size:9.5px; background:var(--green); color:#fff; padding:2px 7px; border-radius:999px; letter-spacing:.5px; animation:pulse2 2s infinite; }
@keyframes pulse2 { 50%{opacity:.55} }
.panel-time { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-soft); }

/* ===== INDEX PANEL ===== */
.index-panel { background:linear-gradient(135deg,#1e3a8a,#312e81); color:#fff; border:none; }
.index-panel .panel-head { border-bottom-color:rgba(255,255,255,.12); }
.index-panel .panel-title { color:#cbd5e1; }
.index-panel .panel-time { color:#94a3b8; }
.index-body { display:flex; justify-content:space-between; align-items:center; padding:16px; gap:12px; flex:1; }
.index-main { display:flex; flex-direction:column; gap:4px; }
.index-main b { font-size:34px; font-weight:800; letter-spacing:-.5px; }
.index-chg { font-size:14px; font-weight:700; }
.index-spark { width:140px; height:60px; }
.index-spark svg { width:100%; height:100%; }
.index-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.12); }
.index-stats div { padding:10px 16px; border-right:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:2px; }
.index-stats div:last-child { border-right:none; }
.index-stats small { font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; }
.index-stats b { font-size:13.5px; color:#fff; }

/* ===== BREADTH ===== */
.breadth-body { display:flex; align-items:center; gap:16px; padding:16px; flex:1; }
.donut-wrap { position:relative; width:110px; height:110px; flex-shrink:0; }
.donut { width:100%; height:100%; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-center b { font-size:18px; font-weight:800; }
.donut-center small { font-size:10px; color:var(--text-soft); text-transform:uppercase; }
.breadth-legend { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.breadth-legend div { display:flex; align-items:center; gap:8px; }
.breadth-legend b { margin-left:auto; font-weight:700; }

/* ===== MOVERS ===== */
.movers-list { padding:8px; display:flex; flex-direction:column; gap:4px; flex:1; }
.mover-item {
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:8px 10px; border-radius:8px; font-size:13px; transition:background .15s;
}
.mover-item:hover { background:var(--bg-soft); }
.mover-item b { font-weight:800; }
.mover-item .nama { color:var(--text-soft); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mover-item .harga { font-family:'JetBrains Mono',monospace; font-weight:700; }
.mover-item .chg { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12.5px; min-width:60px; text-align:right; }
.skeleton { height:34px; border-radius:8px; background:linear-gradient(90deg,var(--bg-soft) 25%,var(--border) 50%,var(--bg-soft) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ===== AKTIF ===== */
.aktif-list { padding:8px; display:flex; flex-direction:column; gap:6px; flex:1; }
.aktif-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:8px 10px; border-radius:8px; }
.aktif-item:hover { background:var(--bg-soft); }
.aktif-item .bar { width:50px; height:6px; background:var(--bg-soft); border-radius:999px; overflow:hidden; }
.aktif-item .bar span { display:block; height:100%; background:var(--primary); border-radius:999px; transition:width .4s; }
.aktif-item .info { display:flex; flex-direction:column; }
.aktif-item .info b { font-size:13px; }
.aktif-item .info small { font-size:11px; color:var(--text-soft); }
.aktif-item .val { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12.5px; }

/* ===== SEKTOR HEATMAP ===== */
.sektor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; padding:12px; flex:1; }
.sektor-cell {
  border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:2px;
  color:#fff; position:relative; overflow:hidden; transition:transform .15s;
  min-height:72px; justify-content:center;
}
.sektor-cell:hover { transform:scale(1.03); }
.sektor-cell b { font-size:12px; font-weight:700; line-height:1.2; }
.sektor-cell small { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:800; }
.sektor-cell .nilai { font-size:9.5px; opacity:.8; }

/* ===== TABEL ===== */
.tabel-panel { flex:1; }
.tabel-tools { display:flex; gap:8px; flex-wrap:wrap; }
.search-box { display:flex; align-items:center; gap:8px; background:var(--bg-soft); border:1px solid var(--border); border-radius:9px; padding:0 12px; }
.search-box input { border:none; background:none; padding:8px 0; font-size:13px; color:var(--text); outline:none; font-family:inherit; width:180px; }
.tabel-tools select { background:var(--bg-soft); border:1px solid var(--border); border-radius:9px; padding:8px 10px; font-size:13px; color:var(--text); font-family:inherit; cursor:pointer; }
.table-wrap { overflow-x:auto; }
.tabel { width:100%; border-collapse:collapse; }
.tabel th, .tabel td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); font-size:13px; white-space:nowrap; }
.tabel th { background:var(--bg-soft); font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-soft); font-weight:700; position:sticky; top:0; }
.tabel tbody tr { transition:background .12s; }
.tabel tbody tr:hover { background:var(--bg-soft); }
.tabel tbody tr.flash-up { animation:flashUp .8s; }
.tabel tbody tr.flash-down { animation:flashDown .8s; }
@keyframes flashUp { 0%{background:rgba(22,163,74,.25)} 100%{background:transparent} }
@keyframes flashDown { 0%{background:rgba(220,38,38,.25)} 100%{background:transparent} }
.text-right { text-align:right !important; } .text-center { text-align:center !important; }
.empty-row { text-align:center !important; color:var(--text-soft); padding:40px !important; }
.badge-sektor { display:inline-block; background:rgba(37,99,235,.1); color:var(--primary); padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; }
.btn-mini { padding:5px 10px; border-radius:7px; font-size:11.5px; font-weight:700; border:none; cursor:pointer; text-decoration:none; display:inline-block; transition:all .15s; }
.btn-beli { background:rgba(22,163,74,.12); color:var(--green); } .btn-beli:hover { background:var(--green); color:#fff; }
.btn-jual { background:rgba(220,38,38,.12); color:var(--red); } .btn-jual:hover { background:var(--red); color:#fff; }

/* ===== FITUR STRIP ===== */
.fitur-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.fitur-item { background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow); }
.fitur-item span { font-size:24px; }
.fitur-item div { display:flex; flex-direction:column; }
.fitur-item b { font-size:13.5px; }
.fitur-item small { font-size:11.5px; color:var(--text-soft); }

/* ===== FOOTER ===== */
.footer { border-top:1px solid var(--border); background:var(--bg-panel); margin-top:16px; }
.footer-bottom { max-width:1600px; margin:auto; padding:20px 24px; text-align:center; color:var(--text-soft); font-size:12.5px; }

/* ===== MODAL ===== */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.7);
  backdrop-filter:blur(6px); z-index:2000; justify-content:center; align-items:center; padding:20px;
}
.modal-overlay.active { display:flex; }
.modal-box {
  background:var(--bg-card); border-radius:18px; padding:34px; width:100%;
  max-width:400px; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:pop .2s ease-out; border:1px solid var(--border);
}
@keyframes pop { from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }
.modal-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:26px; color:var(--text-soft); cursor:pointer; line-height:1; }
.modal-box h2 { font-size:21px; margin-bottom:6px; }
.modal-sub { color:var(--text-soft); font-size:13px; margin-bottom:20px; }
.modal-box label { display:block; font-size:12.5px; margin:12px 0 6px; font-weight:600; }
.modal-box input { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:10px; font-size:13.5px; background:var(--bg-soft); color:var(--text); font-family:inherit; transition:border .2s; }
.modal-box input:focus { outline:none; border-color:var(--primary); background:var(--bg-card); }
.error-msg { color:var(--red); font-size:12.5px; margin-top:8px; min-height:16px; }
.modal-hint { font-size:11.5px; color:var(--text-soft); margin-top:14px; text-align:center; }

/* ===== APEXCHARTS DARK MODE ===== */
body.dark .apexcharts-tooltip { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text) !important; }
body.dark .apexcharts-tooltip-title { background: var(--bg-soft) !important; border-color: var(--border) !important; }
.apexcharts-menu { background: var(--bg-card) !important; border-color: var(--border) !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1280px) {
  .row-1 { grid-template-columns:1.4fr 1fr 1fr; }
  .row-1 .movers-panel:last-child { grid-column:span 1; }
}
@media (max-width: 1024px) {
  .row-1 { grid-template-columns:1fr 1fr; }
  .row-2 { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .hamburger { display:block; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--bg-card); padding:12px 24px; border-bottom:1px solid var(--border); box-shadow:var(--shadow); }
  .nav-links.open a { padding:10px 0; border-bottom:1px solid var(--border); }
}
@media (max-width: 768px) {
  .dash { padding:88px 12px 30px; }
  .row-1, .row-2 { grid-template-columns:1fr; }
  .index-main b { font-size:28px; }
  .clock { display:none; }
  .tabel th, .tabel td { padding:8px 10px; font-size:12px; }
  .tabel-pasar th:nth-child(3), .tabel-pasar td:nth-child(3),
  .tabel-pasar th:nth-child(7), .tabel-pasar td:nth-child(7),
  .tabel-pasar th:nth-child(8), .tabel-pasar td:nth-child(8),
  .tabel-pasar th:nth-child(9), .tabel-pasar td:nth-child(9) { display:none; }
  .tabel-tools { width:100%; }
  .search-box { flex:1; }
  .search-box input { width:100%; }
}
@media (max-width: 480px) {
  .tabel-pasar th:nth-child(2), .tabel-pasar td:nth-child(2) { display:none; }
  .index-spark { display:none; }
  .fitur-strip { grid-template-columns:1fr 1fr; }
}
/* ===== BOTTOM TICKER (VALAS) ===== */
.bottom-ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 1100;
  display: flex;
  background: #0f172a;
  border-top: 1px solid #1e293b;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}

.bottom-ticker-label {
  background: #1e293b;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-right: 1px solid #334155;
  white-space: nowrap;
  z-index: 2;
}

.ticker-bottom-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker-track-bottom {
  display: flex;
  gap: 36px;
  white-space: nowrap;
  padding-left: 20px;
  animation: scrollTickerBottom 40s linear infinite;
}

.ticker-track-bottom:hover {
  animation-play-state: paused;
}

@keyframes scrollTickerBottom {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-item-bottom {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: #e2e8f0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.ticker-item-bottom b { color: #fff; }
.ticker-item-bottom .chg { font-size: 11.5px; }