/* =============================================================================
   MENU "KOPER DATA" (Client Portal, 2026-11-12) -- js/koper-data.js
   Dashboard data padat bergaya terminal, memakai warna tema Lilin:
   api #FF6A3D (aksen/judul), lilin #F3EADB (teks), latar gelap hangat.
   Merah muda = level DI ATAS harga (resisten), hijau = DI BAWAH (support).
   ============================================================================= */
.kd {
  --kd-atas: #FF7A8A;
  --kd-bawah: #5FD39A;
  --kd-panel: rgba(22, 18, 15, 0.92);
  --kd-sel: rgba(30, 24, 19, 0.9);
  --kd-garis: #2E261F;
  --kd-api: #FF6A3D;
  --kd-api-t: #FFB27A;
  --kd-lilin: #F3EADB;
  --kd-redup: #A39886;
  color: var(--kd-lilin);
}
.kd .naik { color: var(--kd-bawah); }
.kd .turun { color: var(--kd-atas); }

.kd-kepala {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.kd-judul {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Fraunces", serif;
  font-size: 24px;
  margin: 0;
  color: var(--kd-lilin);
}
.kd-ikon-koper {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 106, 61, 0.14);
  border: 1px solid rgba(255, 106, 61, 0.45);
  color: var(--kd-api-t);
  box-shadow: 0 6px 20px -8px rgba(255, 106, 61, 0.7);
}
.kd-ikon-koper svg { width: 20px; height: 20px; }
.kd-desc { margin: 6px 0 0; color: var(--kd-redup); font-size: 13.5px; max-width: 640px; }

.kd-tab {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 12px;
  background: var(--kd-panel);
  border: 1px solid var(--kd-garis);
}
.kd-tab button,
.kd-sub button {
  font: 600 13px "IBM Plex Sans", sans-serif;
  color: var(--kd-redup);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.kd-tab button:hover,
.kd-sub button:hover { color: var(--kd-lilin); }
.kd-tab button.aktif {
  background: linear-gradient(180deg, #FF7D52, #E85A2E);
  color: #1A0F08;
  box-shadow: 0 6px 18px -8px rgba(255, 106, 61, 0.9);
}

/* ---------- Daftar pasar ---------- */
.kd-saring { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.kd-cari {
  width: 100%;
  box-sizing: border-box;
  background: var(--kd-panel);
  border: 1px solid var(--kd-garis);
  color: var(--kd-lilin);
  border-radius: 10px;
  padding: 11px 14px;
  font: 14px "IBM Plex Sans", sans-serif;
}
.kd-cari:focus { outline: none; border-color: rgba(255, 106, 61, 0.6); }
.kd-sub { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-sub button { padding: 6px 12px; font-size: 12px; border-color: var(--kd-garis); background: var(--kd-panel); }
.kd-sub button.aktif { color: var(--kd-api-t); border-color: rgba(255, 106, 61, 0.6); background: rgba(255, 106, 61, 0.1); }
.kd-daftar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.kd-psr {
  text-align: left;
  background: var(--kd-panel);
  border: 1px solid var(--kd-garis);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--kd-lilin);
  min-width: 0;
  transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s;
}
.kd-psr:hover {
  border-color: rgba(255, 106, 61, 0.6);
  box-shadow: 0 8px 20px -12px rgba(255, 106, 61, 0.8);
}
.kd-psr:active { transform: translateY(1px); }
.kd-psr b { display: block; font: 600 14px "IBM Plex Mono", monospace; color: var(--kd-api-t); }
.kd-psr span {
  display: block;
  font-size: 11.5px;
  color: var(--kd-redup);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.kd-info, .kd-muat { color: var(--kd-redup); font-size: 13px; }
.kd-muat { padding: 24px 4px; }
.kd-gagal { padding: 20px; border: 1px solid var(--kd-garis); border-radius: 12px; background: var(--kd-panel); }
.kd-gagal p { margin: 0 0 12px; color: var(--kd-atas); }

/* ---------- Dashboard ---------- */
.kd-bar-atas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.kd-kembali {
  background: var(--kd-panel);
  border: 1px solid var(--kd-garis);
  color: var(--kd-lilin);
  border-radius: 9px;
  padding: 7px 14px;
  font: 600 12.5px "IBM Plex Sans", sans-serif;
  cursor: pointer;
}
.kd-kembali:hover { border-color: rgba(255, 106, 61, 0.6); color: var(--kd-api-t); }
.kd-catatan-kecil { font-size: 11.5px; color: var(--kd-redup); }

/* Pilihan tampilan Dashboard | Chart */
.kd-tampil {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 10px;
  background: var(--kd-panel);
  border: 1px solid var(--kd-garis);
}
.kd-tampil button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12.5px "IBM Plex Sans", sans-serif;
  color: var(--kd-redup);
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}
.kd-tampil button svg { width: 16px; height: 16px; }
.kd-tampil button:hover { color: var(--kd-lilin); }
.kd-tampil button.aktif {
  background: rgba(255, 106, 61, 0.16);
  color: var(--kd-api-t);
  box-shadow: 0 0 0 1px rgba(255, 106, 61, 0.55) inset;
}

/* Tampilan Chart */
.kd-chart-p { padding: 10px; }
.kd-chart-kepala {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.kd-chart-harga { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: "IBM Plex Mono", monospace; }
.kd-chart-harga .kd-kode { font-size: 15px; }
.kd-chart-nilai { font-size: 22px; font-weight: 700; color: var(--kd-lilin); }
.kd-chart-nilai.naik { color: #7FE3B0; }
.kd-chart-nilai.turun { color: #FF97A3; }
.kd-chart-harga > span:not(.kd-chart-nilai):not(.kd-live) { font-size: 13px; }
.kd-garis-pilih { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--kd-redup); }
.kd-garis-pilih button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11.5px "IBM Plex Sans", sans-serif;
  color: var(--kd-redup);
  background: var(--kd-sel);
  border: 1px solid var(--kd-garis);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}
.kd-garis-pilih button i { width: 14px; height: 0; border-top: 2px dashed var(--kd-warna); opacity: 0.45; }
.kd-garis-pilih button.aktif { color: var(--kd-lilin); border-color: var(--kd-warna); }
.kd-garis-pilih button.aktif i { opacity: 1; }
.kd-chart-alat { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kd-tf {
  display: flex;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.kd-tf::-webkit-scrollbar { display: none; }
.kd-tf button,
.kd-penuh {
  flex: none;
  font: 600 12px "IBM Plex Mono", monospace;
  color: var(--kd-redup);
  background: var(--kd-sel);
  border: 1px solid var(--kd-garis);
  border-radius: 7px;
  padding: 5px 10px;
  cursor: pointer;
}
.kd-tf button:hover, .kd-penuh:hover { color: var(--kd-lilin); }
.kd-tf button.aktif { color: #1A0F08; background: linear-gradient(180deg, #FFB27A, #FF8A55); border-color: transparent; }
.kd-penuh { font-size: 15px; padding: 3px 10px; }
.kd-chart-wadah { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--kd-garis); min-width: 0; }

/* Chart diapit kartu keterangan garis: kiri = di atas harga, kanan = di bawah.
   Kurva SVG (#kd-sambung) menyambung tiap kartu ke garisnya di chart. */
.kd-chart-tiga {
  position: relative;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) 228px;
  gap: 0 44px;
  align-items: stretch;
}
.kd-sambung { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.kd-sambung path { fill: none; stroke-width: 1.3; opacity: 0.5; transition: opacity 0.15s, stroke-width 0.15s; }
.kd-sambung path.sorot { opacity: 1; stroke-width: 2.6; filter: drop-shadow(0 0 4px currentColor); }
.kd-sambung path.luar { stroke-dasharray: 3 4; opacity: 0.3; }
.kd-sambung circle.luar { opacity: 0.35; }
.kd-lv-kol { display: flex; flex-direction: column; min-width: 0; height: 620px; }
.kd-lv-judul {
  font: 600 10.5px "IBM Plex Sans", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--kd-api);
  padding: 2px 2px 8px;
}
.kd-lv-kol.kanan .kd-lv-judul { color: var(--kd-bawah); }
.kd-lv-kol.kiri .kd-lv-judul { color: var(--kd-atas); }
.kd-lv-daftar {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: #3A2E24 transparent;
}
.kd-lvk {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--kd-sel);
  border: 1px solid var(--kd-garis);
  border-left: 3px solid var(--w);
  border-radius: 8px;
  padding: 6px 8px 6px 9px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.kd-lvk:hover, .kd-lvk.sorot {
  border-color: var(--w);
  background: rgba(30, 24, 19, 1);
  box-shadow: 0 0 0 1px var(--w) inset, 0 6px 18px -10px var(--w);
}
.kd-lvk-atas { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kd-lvk-tag {
  flex: none;
  font: 700 10.5px "IBM Plex Mono", monospace;
  color: #120D09;
  background: var(--w);
  border-radius: 4px;
  padding: 1px 5px;
}
.kd-lvk-nama { font-size: 11.5px; color: var(--kd-lilin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-lvk-harga { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 6px; margin-top: 3px; font-family: "IBM Plex Mono", monospace; }
.kd-lvk-harga b { font-size: 13.5px; color: var(--w); font-weight: 600; }
.kd-lvk-jarak { font-size: 10.5px; white-space: nowrap; }
.kd-lvk-ket {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--kd-redup);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kd-lvk-ket i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
  background: transparent;
  border: 1px solid var(--kd-redup);
}
.kd-lvk-ket i.ya { background: var(--kd-api-t); border-color: var(--kd-api-t); box-shadow: 0 0 6px var(--kd-api); }
.kd-lv-kosong { font-size: 11.5px; color: var(--kd-redup); padding: 8px 2px; margin: 0; }
.kd-chart-isi { height: 620px; }
.kd-chart-pesan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  color: var(--kd-redup);
  font-size: 13px;
  background: rgba(16, 12, 9, 0.75);
}
.kd-chart-pesan[hidden] { display: none; }
/* Layar penuh: chart mengisi sisa layar. */
.kd-chart-p:fullscreen,
.kd-chart-p.kd-penuh-css {
  display: flex;
  flex-direction: column;
  background: #0D0B09;
  border-radius: 0;
  padding: 10px;
}
.kd-chart-p.kd-penuh-css { position: fixed; inset: 0; z-index: 1000; }
.kd-chart-p:fullscreen .kd-chart-tiga,
.kd-chart-p.kd-penuh-css .kd-chart-tiga { flex: 1; min-height: 0; }
.kd-chart-p:fullscreen .kd-lv-kol,
.kd-chart-p.kd-penuh-css .kd-lv-kol,
.kd-chart-p:fullscreen .kd-chart-isi,
.kd-chart-p.kd-penuh-css .kd-chart-isi { height: 100%; }
.kd-chart-p:fullscreen .kd-chart-wadah,
.kd-chart-p.kd-penuh-css .kd-chart-wadah { height: 100%; }
@media (max-width: 1280px) {
  .kd-chart-tiga { grid-template-columns: 196px minmax(0, 1fr) 196px; gap: 0 34px; }
}
/* Tablet & HP: kurva disembunyikan, kartu pindah ke bawah chart (2 kolom). */
@media (max-width: 1000px) {
  .kd-chart-tiga { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .kd-chart-tiga > .kd-chart-wadah { grid-column: 1 / -1; order: -1; }
  .kd-sambung { display: none; }
  .kd-lv-kol { height: auto; }
  .kd-lv-daftar { overflow: visible; }
  .kd-chart-p:fullscreen .kd-lv-kol,
  .kd-chart-p.kd-penuh-css .kd-lv-kol { display: none; }
  .kd-chart-p:fullscreen .kd-chart-tiga,
  .kd-chart-p.kd-penuh-css .kd-chart-tiga { grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .kd-chart-isi { height: 460px; }
  /* HP: tidak ada kursor untuk melihat keterangan penuh -> tampilkan utuh. */
  .kd-lvk-ket { white-space: normal; }
  .kd-lvk-atas { align-items: flex-start; }
  .kd-lvk-nama { white-space: normal; line-height: 1.3; }
  .kd-chart-p { padding: 8px 6px; }
}

.kd-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}
.kd-panel {
  background: var(--kd-panel);
  border: 1px solid var(--kd-garis);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 178, 122, 0.05);
}
.kd-panel > h3 {
  margin: 0 0 10px;
  font: 600 11px "IBM Plex Sans", sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--kd-api);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kd-panel > h3::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kd-api);
  box-shadow: 0 0 8px var(--kd-api);
}
.kd-hero { grid-column: span 4; }
.kd-pivot { grid-column: span 3; }
.kd-kuat-p { grid-column: span 5; }
.kd-ohlc { grid-column: span 4; }
.kd-gerak { grid-column: span 5; }
.kd-zona { grid-column: span 3; }
.kd-arah { grid-column: span 4; }
.kd-rentang-p { grid-column: span 8; }

/* Harga */
.kd-hero {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 106, 61, 0.16), transparent 60%),
    var(--kd-panel);
  border-color: rgba(255, 106, 61, 0.35);
}
.kd-hero-atas { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
/* Panel harga: isinya di TENGAH kartu (2026-11-12, permintaan user). */
.kd-hero { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.kd-hero .kd-hero-atas { flex-direction: column; align-items: center; gap: 6px; }
.kd-hero .kd-harga { margin: 10px auto 12px; }
.kd-hero .kd-ubah > div { text-align: center; }
/* Desktop: panel harga di tengah baris atas (Pivot | Harga | Kekuatan). */
@media (min-width: 1201px) {
  .kd-pivot { order: -1; }
}
.kd-kode { font: 700 18px "IBM Plex Mono", monospace; color: var(--kd-api-t); }
.kd-nama { font-size: 12px; color: var(--kd-redup); margin-top: 2px; }
.kd-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px "IBM Plex Mono", monospace;
  color: var(--kd-redup);
  white-space: nowrap;
}
.kd-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kd-bawah);
  box-shadow: 0 0 8px var(--kd-bawah);
  animation: kd-denyut 1.6s ease-in-out infinite;
}
@keyframes kd-denyut { 50% { opacity: 0.35; } }
.kd-harga {
  font: 700 clamp(34px, 5vw, 56px) / 1.1 "IBM Plex Mono", monospace;
  color: var(--kd-lilin);
  margin: 12px 0 10px;
  letter-spacing: -1px;
  text-shadow: 0 0 28px rgba(255, 106, 61, 0.35);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.kd-harga.naik { color: #7FE3B0; }
.kd-harga.turun { color: #FF97A3; }
.kd-harga.kedip-naik { animation: kd-kedip-naik 0.7s; }
.kd-harga.kedip-turun { animation: kd-kedip-turun 0.7s; }
@keyframes kd-kedip-naik { from { background: rgba(95, 211, 154, 0.22); } }
@keyframes kd-kedip-turun { from { background: rgba(255, 122, 138, 0.22); } }
.kd-ubah { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kd-ubah.kd-rg { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.kd-ubah > div {
  background: var(--kd-sel);
  border: 1px solid var(--kd-garis);
  border-radius: 8px;
  padding: 6px 8px;
  min-width: 0;
}
.kd-ubah span { display: block; font-size: 10.5px; color: var(--kd-redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-ubah b { font: 600 13px "IBM Plex Mono", monospace; }

/* Tabel */
.kd-tabel { width: 100%; border-collapse: separate; border-spacing: 0 3px; font: 12.5px "IBM Plex Mono", monospace; }
.kd-tabel th {
  text-align: right;
  font: 600 10.5px "IBM Plex Sans", sans-serif;
  color: var(--kd-redup);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 0 6px 2px;
}
.kd-tabel th:first-child { text-align: left; }
.kd-tabel td { text-align: right; padding: 4px 6px; background: var(--kd-sel); }
.kd-tabel td:first-child { text-align: left; border-radius: 6px 0 0 6px; }
.kd-tabel td:last-child { border-radius: 0 6px 6px 0; }
.kd-tabel td.atas { color: var(--kd-atas); }
.kd-tabel td.bawah { color: var(--kd-bawah); }
.kd-tf { color: var(--kd-api-t) !important; font-weight: 600; }
.kd-bar {
  position: relative;
  height: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  min-width: 70px;
}
.kd-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: rgba(163, 152, 134, 0.45); }
.kd-bar.naik i { background: linear-gradient(90deg, rgba(95, 211, 154, 0.25), rgba(95, 211, 154, 0.75)); }
.kd-bar.turun i { background: linear-gradient(90deg, rgba(255, 122, 138, 0.25), rgba(255, 122, 138, 0.75)); }
.kd-bar span { position: relative; font-size: 11px; color: var(--kd-lilin); padding-right: 5px; line-height: 16px; display: block; text-align: right; }

/* Kolom level */
.kd-kolom { display: grid; gap: 6px; }
.kd-kolom.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kd-kolom.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kd-kolom.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kd-kol { min-width: 0; }
.kd-kol-j {
  font: 600 10.5px "IBM Plex Sans", sans-serif;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #1A0F08;
  background: linear-gradient(180deg, #FFB27A, #FF8A55);
  border-radius: 6px;
  padding: 4px 6px;
  text-align: center;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kd-lv {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 3px 6px;
  margin-bottom: 3px;
  border-radius: 5px;
  background: var(--kd-sel);
  font: 12px "IBM Plex Mono", monospace;
  border-left: 2px solid transparent;
}
.kd-lv span { color: var(--kd-redup); }
.kd-lv b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-lv.atas b { color: var(--kd-atas); }
.kd-lv.bawah b { color: var(--kd-bawah); }
.kd-lv.eq { background: rgba(255, 181, 71, 0.12); }
.kd-lv.eq span { color: #FFB547; }
.kd-lv.kuat span { color: var(--kd-api-t); font-weight: 600; }
.kd-lv.dekat {
  border-left-color: var(--kd-api);
  background: rgba(255, 106, 61, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 106, 61, 0.35) inset;
}
.kd-sublabel { font-size: 11px; color: var(--kd-redup); margin: 2px 0 6px; }
.kd-sublabel:not(:first-of-type) { margin-top: 10px; }
.kd-ket { font-size: 11px; color: var(--kd-redup); margin: 8px 0 0; }

/* Kunci arah */
.kd-bias {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--kd-sel);
  border: 1px solid var(--kd-garis);
  margin-bottom: 8px;
}
.kd-bias.naik { border-color: rgba(95, 211, 154, 0.5); background: rgba(95, 211, 154, 0.08); }
.kd-bias.turun { border-color: rgba(255, 122, 138, 0.5); background: rgba(255, 122, 138, 0.08); }
.kd-bias-panah { font-size: 26px; line-height: 1; }
.kd-bias b { display: block; font-size: 13.5px; color: var(--kd-lilin); }
.kd-bias small { color: var(--kd-redup); font-size: 11.5px; }
.kd-arah-b {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--kd-sel);
  margin-bottom: 4px;
  font-size: 12px;
}
.kd-arah-b span { color: var(--kd-redup); min-width: 0; }
.kd-arah-b b { font: 500 12.5px "IBM Plex Mono", monospace; white-space: nowrap; }
.kd-arah-b.atas b { color: var(--kd-atas); }
.kd-arah-b.bawah b { color: var(--kd-bawah); }
.kd-arah-b.tembus { box-shadow: 0 0 0 1px currentColor inset; }
.kd-arah-b.naik.tembus { color: var(--kd-bawah); }
.kd-arah-b.turun.tembus { color: var(--kd-atas); }
.kd-arah-b.panas b { color: #FFB547; }

/* Rentang periode */
.kd-rentang { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 10px 8px; }
.kd-rentang-b { min-width: 0; }
.kd-mini { font-size: 11.5px; }
.kd-mini td { padding: 3px 5px; white-space: nowrap; }

.kd-disclaimer { font-size: 11.5px; color: var(--kd-redup); margin: 12px 2px 0; line-height: 1.5; }

/* ---------- Layar sedang & HP ---------- */
@media (max-width: 1200px) {
  /* Tablet: harga | pivot, kekuatan | OHLC, pergerakan penuh,
     Camarilla | kunci arah, rentang penuh -- tanpa ruang kosong. */
  .kd-hero { grid-column: span 7; }
  .kd-pivot { grid-column: span 5; }
  .kd-kuat-p, .kd-ohlc { grid-column: span 6; }
  .kd-gerak { grid-column: span 12; }
  .kd-zona { grid-column: span 5; }
  .kd-arah { grid-column: span 7; }
  .kd-rentang-p { grid-column: span 12; }
}
@media (max-width: 760px) {
  .kd-grid { grid-template-columns: minmax(0, 1fr); }
  .kd-grid > .kd-panel { grid-column: auto; }
  .kd-tab { width: 100%; box-sizing: border-box; }
  .kd-tab button { flex: 1; padding: 8px 6px; }
  .kd-kolom.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-daftar { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .kd-ubah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .kd-kolom.k3 { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   OTAK RINGKASAN CHART (di bawah chart Koper Data, 2026-11-12)
   Input (grafik mini) -> fitur -> kesimpulan (bola titik), garis waktu level,
   peta kekuatan timeframe. Kabel SVG #kd-rk-kabel menyambung kolom-kolomnya.
   ============================================================================= */
.kd-ringkas { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.kd-ringkas .kd-panel > h3 small {
  margin-left: auto;
  font: 400 11px "IBM Plex Sans", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kd-redup);
}
.kd-rk-jaring {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1.2fr);
  gap: 0 70px;
  align-items: center;
}
.kd-rk-kabel { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.kd-rk-kol { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; z-index: 1; }
.kd-rk-kol-j {
  font: 600 10px "IBM Plex Sans", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--kd-redup);
  margin-bottom: 2px;
}
.kd-rk-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  grid-template-rows: auto auto;
  gap: 0 10px;
  align-items: center;
  background: var(--kd-sel);
  border: 1px solid var(--kd-garis);
  border-radius: 8px;
  padding: 6px 8px;
}
.kd-rk-in-atas { display: flex; flex-direction: column; min-width: 0; }
.kd-rk-in-atas span { font-size: 10.5px; color: var(--kd-redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-rk-in-atas b { font: 600 15px "IBM Plex Mono", monospace; color: var(--kd-lilin); }
.kd-rk-in-sub { grid-column: 1; font: 10.5px "IBM Plex Mono", monospace; color: var(--kd-redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-rk-input > svg, .kd-rk-input > .kd-rk-batang { grid-column: 2; grid-row: 1 / span 2; }
.kd .panas { color: #FFB547; }
.kd-rk-spark { width: 120px; height: 30px; display: block; }
.kd-rk-nol { stroke: rgba(243, 234, 219, 0.2); stroke-dasharray: 2 3; }
.kd-rk-batang { display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.kd-rk-batang span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.kd-rk-batang i { display: block; border-radius: 2px 2px 0 0; background: rgba(163, 152, 134, 0.5); }
.kd-rk-batang span.naik i { background: #5FD39A; }
.kd-rk-batang span.turun i { background: #FF7A8A; }
.kd-rk-batang em { display: none; }

.kd-rk-fitur { gap: 10px; }
.kd-rk-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--kd-sel);
  border: 1px solid var(--kd-garis);
  font-size: 12px;
}
.kd-rk-node i { width: 9px; height: 9px; border-radius: 50%; background: #FFB547; box-shadow: 0 0 8px #FFB547; flex: none; }
.kd-rk-node.naik i { background: #5FD39A; box-shadow: 0 0 8px #5FD39A; }
.kd-rk-node.turun i { background: #FF7A8A; box-shadow: 0 0 8px #FF7A8A; }
.kd-rk-node.vol i { background: #C9A0FF; box-shadow: 0 0 8px #C9A0FF; }
.kd-rk-node span { flex: 1; color: var(--kd-lilin); }
.kd-rk-node b { font: 600 12.5px "IBM Plex Mono", monospace; }
.kd-rk-node.naik b { color: #5FD39A; }
.kd-rk-node.turun b { color: #FF7A8A; }
.kd-rk-node.netral b { color: #FFB547; }
.kd-rk-node.vol b { color: #C9A0FF; }

.kd-rk-bola-wadah { position: relative; display: flex; align-items: center; justify-content: center; }
.kd-rk-bola-slot { width: 100%; max-width: 300px; }
.kd-rk-bola { display: block; width: 100%; aspect-ratio: 1; }
.kd-rk-kesimpulan {
  position: absolute;
  text-align: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(13, 11, 9, 0.82);
  border: 1px solid var(--kd-garis);
  backdrop-filter: blur(2px);
}
.kd-rk-kesimpulan b { display: block; font: 700 17px "IBM Plex Mono", monospace; }
.kd-rk-kesimpulan span { font-size: 11px; color: var(--kd-redup); }
.kd-rk-kesimpulan.naik { border-color: rgba(95, 211, 154, 0.6); }
.kd-rk-kesimpulan.naik b { color: #5FD39A; }
.kd-rk-kesimpulan.turun { border-color: rgba(255, 122, 138, 0.6); }
.kd-rk-kesimpulan.turun b { color: #FF7A8A; }
.kd-rk-kesimpulan.netral b { color: #FFB547; }
.kd-rk-alasan { margin: 8px 0 0; padding: 0 0 0 16px; font-size: 11.5px; color: var(--kd-redup); line-height: 1.55; }

.kd-rk-bawah { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
.kd-rk-jalur-daftar { display: flex; flex-direction: column; gap: 5px; }
.kd-rk-jalur {
  display: grid;
  grid-template-columns: 52px 78px minmax(0, 1fr) 112px;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
}
.kd-rk-jalur .kd-lvk-tag { text-align: center; background: var(--w); }
.kd-rk-jalur-harga { font-family: "IBM Plex Mono", monospace; color: var(--w); }
.kd-rk-sel { display: flex; gap: 1px; height: 14px; min-width: 0; }
.kd-rk-sel i { flex: 1; border-radius: 1px; position: relative; }
.kd-rk-sel i.a { background: rgba(95, 211, 154, 0.55); }
.kd-rk-sel i.b { background: rgba(255, 122, 138, 0.5); }
.kd-rk-sel i.s::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--w);
  box-shadow: 0 0 5px var(--w);
}
.kd-rk-sejak { font-size: 10.5px; text-align: right; white-space: nowrap; }
.kd-rk-peta { width: 100%; border-collapse: separate; border-spacing: 3px; font: 12px "IBM Plex Mono", monospace; }
.kd-rk-peta th { font: 600 10.5px "IBM Plex Sans", sans-serif; color: var(--kd-redup); text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 4px; }
.kd-rk-peta tbody th { color: var(--kd-api-t); font-family: "IBM Plex Mono", monospace; text-align: left; }
.kd-rk-peta td { text-align: center; padding: 5px 4px; border-radius: 4px; color: #F7EFE3; }

@media (max-width: 1100px) {
  .kd-rk-bawah { grid-template-columns: minmax(0, 1fr); }
}
/* HP & tablet tegak: kolom bertumpuk, kabel disembunyikan. */
@media (max-width: 860px) {
  .kd-rk-jaring { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kd-rk-kabel { display: none; }
  .kd-rk-fitur { flex-direction: row; flex-wrap: wrap; }
  .kd-rk-fitur .kd-rk-kol-j { width: 100%; }
  .kd-rk-node { flex: 1 1 140px; }
  .kd-ringkas .kd-panel > h3 { flex-wrap: wrap; }
  .kd-ringkas .kd-panel > h3 small { margin-left: 14px; width: 100%; }
}
@media (max-width: 520px) {
  .kd-rk-input { grid-template-columns: minmax(0, 1fr) 96px; }
  .kd-rk-spark { width: 96px; }
  .kd-rk-jalur { grid-template-columns: 46px minmax(0, 1fr) 76px; }
  .kd-rk-jalur-harga { display: none; }
  .kd-rk-sejak { font-size: 10px; white-space: normal; }
}