/* bentang/css/brand.css — halaman masuk platform Bentang 3D.

   Token warna SAMA dengan aplikasi (site_k1k4/css/style.css) supaya pindah dari
   halaman ini ke modul tidak terasa seperti dua produk berbeda. Tidak ada CDN,
   tidak ada font eksternal: halaman ini harus jalan dari file:// juga. */

:root {
  --bg: #0d1526;
  --bg2: #101a2e;
  --panel: #121d33;
  --panel2: #16223a;
  --line: #22314f;
  --line2: #2c3d5e;
  --fg: #e6ecf5;
  --muted: #94a3b8;
  --dim: #64748b;
  --accent: #e94560;
  --accent2: #38bdf8;
  --amber: #f59e0b;
  --teal: #2dd4bf;
  --green: #34d399;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-size: 15px; line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ─────────────────────────────  header  ───────────────────────────── */
#topbar {
  position: sticky; top: 0; z-index: 20; height: 62px; flex: none;
  display: flex; align-items: center; gap: 20px;
  padding: 0 28px;
  background: rgba(16, 26, 46, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: #0d1526 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M5 21c4 0 4-4 8-4s4 4 8 4 4-4 6-4' fill='none' stroke='%2338bdf8' stroke-width='2.2' stroke-linecap='round'/><path d='M5 15c4 0 4-4 8-4s4 4 8 4 4-4 6-4' fill='none' stroke='%232ecc71' stroke-width='2.2' stroke-linecap='round' opacity='.8'/><circle cx='16' cy='24' r='2.6' fill='%23e94560'/></svg>") center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18);
}
.brand b { font-size: 15px; letter-spacing: .2px; font-weight: 700; }
.brand b span { color: var(--muted); font-weight: 500; }
#topnav { display: flex; gap: 22px; margin-left: 10px; }
#topnav a { font-size: 13px; color: var(--muted); transition: color .15s; }
#topnav a:hover { color: var(--fg); }
#topnav a.on { color: var(--fg); font-weight: 600; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.langsw { display: flex; border: 1px solid var(--line2); border-radius: 7px; overflow: hidden; }
.langbtn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; padding: 4px 9px;
}
.langbtn.active { background: var(--panel2); color: var(--fg); }
/* background sengaja direset: .btn juga dipakai pada <button>, dan tanpa ini
   peramban memberi buttonface terang dengan teks hampir putih — tombolnya
   hilang. .btn.primary menimpanya dengan sendirinya (lebih spesifik). */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; font-family: inherit; color: inherit;
  border-radius: 9px; padding: 11px 20px; font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.btn.primary { background: var(--accent2); color: #04121f; }
.btn.primary:hover { background: #5cc9fa; }
.btn.ghost { border-color: var(--line2); color: var(--fg); }
.btn.ghost:hover { background: var(--panel2); border-color: #3c527a; }
.btn.sm { padding: 8px 14px; font-size: 12.5px; }

/* ─────────────────────────────  hero  ───────────────────────────── */
.hero { position: relative; padding: 76px 0 26px; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -40% 30% 40% -20%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(56, 189, 248, .13), transparent 70%);
}
.hero .wrap { position: relative; }
.kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 18px;
}
.hero h1 {
  font-size: 46px; line-height: 1.12; letter-spacing: -.9px; font-weight: 800;
  max-width: 830px;
}
.hero h1 em { font-style: normal; color: var(--accent2); }
.hero .lead { margin-top: 20px; max-width: 660px; font-size: 16px; color: #b9c6d8; }
.hero .cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero .facts {
  margin-top: 26px; font-size: 12.5px; color: var(--dim);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.hero .facts i { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }

/* ─────────────────────────────  section  ───────────────────────────── */
section.block { padding: 54px 0; border-top: 1px solid rgba(34, 49, 79, .7); }
section.block:first-of-type { border-top: 0; }
.shead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
h2 { font-size: 25px; letter-spacing: -.35px; font-weight: 700; }
.shead p { font-size: 13px; color: var(--dim); }
.slead { max-width: 720px; color: var(--muted); font-size: 14px; margin-bottom: 30px; }

/* ── alur empat tahap ── */
.flow { display: flex; align-items: stretch; gap: 0; }
.stage {
  flex: 1 1 0; min-width: 0; position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 9px;
  transition: border-color .15s, background .15s, transform .12s;
}
a.stage:hover { border-color: #3c527a; background: var(--panel2); transform: translateY(-2px); }
.stage.live { border-top: 2px solid rgba(52, 211, 153, .7); }
.stage.next { border-top: 2px solid rgba(245, 158, 11, .7); }
.stage.plan { border-top: 2px solid rgba(100, 116, 139, .55); }
.stage .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.num { font-size: 11px; font-weight: 800; color: var(--dim); letter-spacing: 1px; }
.chip {
  font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; border: 1px solid; white-space: nowrap;
}
.chip.live { color: var(--green); border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .09); }
.chip.next { color: var(--amber); border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .09); }
.chip.part { color: var(--amber); border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .09); }
.chip.plan { color: var(--dim); border-color: rgba(100, 116, 139, .45); background: rgba(100, 116, 139, .1); }
.stage h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.1px; }
.stage p { font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1; }
.stage .io {
  font-size: 11.5px; color: #8ea6c4; line-height: 1.45;
  border-left: 2px solid rgba(56, 189, 248, .45); padding-left: 9px;
}
.stage .io b { color: var(--teal); font-weight: 700; font-size: 10px; letter-spacing: .5px;
  text-transform: uppercase; flex: none; }
.stage .go { font-size: 12px; font-weight: 700; color: var(--accent2); }
.arrow {
  flex: 0 0 30px; display: flex; align-items: center; justify-content: center;
  color: #44618c;
}
.arrow svg { width: 24px; height: 13px; }

/* ── lingkaran balik ── */
.loop {
  margin-top: 14px; display: flex; align-items: center; gap: 14px;
  border: 1px dashed rgba(56, 189, 248, .34); border-radius: 11px;
  background: rgba(56, 189, 248, .045); padding: 12px 16px;
}
.loop svg { flex: none; width: 22px; height: 22px; color: var(--accent2); }
.loop p { font-size: 12.5px; color: #b9c6d8; }
.loop b { color: var(--fg); }

/* ── alas Data Cloud: ruang kerja, bukan tahap keempat ── */
.base {
  display: grid; grid-template-columns: 176px minmax(0, 1fr) 272px 152px;
  gap: 20px; align-items: center; margin-top: 14px; padding: 16px 20px;
  border: 1px solid rgba(56, 189, 248, .32); border-radius: 13px;
  background: linear-gradient(90deg, rgba(56, 189, 248, .1), rgba(56, 189, 248, .025) 60%, transparent);
  transition: border-color .15s, background .15s;
}
.base:hover { border-color: rgba(56, 189, 248, .62); }
.basel { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.basetag { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent2); }
.base h3 { font-size: 15.5px; font-weight: 700; }
.base > p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.base .io { border-left: 2px solid rgba(56, 189, 248, .45); padding-left: 9px;
  font-size: 11.5px; color: #8ea6c4; }
.base .go { font-size: 12px; font-weight: 700; color: var(--accent2); text-align: right; }

/* ── angka terukur ── */
.nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

/* ── kontrak data ── */
.contract { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start; }
.contract p { color: var(--muted); font-size: 13.5px; margin-bottom: 12px; }
.contract ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.contract li { font-size: 12.5px; color: var(--muted); padding-left: 18px; position: relative; }
.contract li::before { content: '▪'; position: absolute; left: 0; color: var(--accent2); }
pre.code {
  background: #0a1120; border: 1px solid var(--line); border-radius: 11px;
  padding: 16px 18px; overflow: auto; font-size: 12px; line-height: 1.7;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #cbd5e1;
}
pre.code i { color: var(--dim); font-style: normal; }
pre.code b { color: var(--accent2); font-weight: 600; }
pre.code s { color: var(--teal); text-decoration: none; }

/* ─────────────────────────────  footer  ───────────────────────────── */
footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--bg2); padding: 30px 0; }
footer .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
footer p { font-size: 12px; color: var(--dim); }
footer .fnav { margin-left: auto; display: flex; gap: 18px; font-size: 12px; }
footer .fnav a { color: var(--muted); }
footer .fnav a:hover { color: var(--fg); }

/* ─────────────────────────────  halaman modul  ───────────────────────────── */
.mhead { padding: 46px 0 24px; }
.mhead .row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mhead h1 { font-size: 34px; letter-spacing: -.6px; font-weight: 800; }
.mhead .sub { color: var(--muted); font-size: 14.5px; max-width: 700px; margin-top: 12px; }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .9px; color: var(--dim);
  font-weight: 800; margin-bottom: 12px; }
.card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.card li { font-size: 13px; color: #b9c6d8; padding-left: 16px; position: relative; line-height: 1.5; }
.card li::before { content: '→'; position: absolute; left: 0; color: var(--accent2); font-size: 11px; }
.card p { font-size: 13px; color: var(--muted); }
.card .kv { display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid rgba(34, 49, 79, .8); }
.card .kv:last-child { border-bottom: 0; }
.card .kv p { font-size: 12.5px; margin: 0; }
.card .kv p:first-child { color: var(--dim); flex: none; }
.card .kv p:last-child { color: var(--fg); font-weight: 600; text-align: right; }
/* baris angka pada landing */
.ncell { background: var(--bg2); padding: 18px 16px; }
.nv { font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.ns { font-size: 11.5px; color: var(--dim); margin-top: 5px; line-height: 1.4; }
.note-bar {
  margin-top: 22px; border: 1px solid rgba(245, 158, 11, .32); background: rgba(245, 158, 11, .06);
  border-radius: 11px; padding: 14px 18px; font-size: 12.5px; color: #e8d9bd;
}
.back { font-size: 12.5px; color: var(--muted); }
.back:hover { color: var(--fg); }

@media (max-width: 1080px) {
  .nums { grid-template-columns: repeat(3, 1fr); }
  .base { grid-template-columns: 1fr; gap: 12px; }
  .base .go { text-align: left; }
  .flow { flex-wrap: wrap; }
  .stage { flex: 1 1 46%; }
  .arrow { display: none; }
  .contract { grid-template-columns: 1fr; gap: 20px; }
  .mgrid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: 32px; }
  #topnav { display: none; }
  .nums { grid-template-columns: 1fr 1fr; }
  .stage { flex: 1 1 100%; }
  .wrap { padding: 0 18px; }
}

/* ═══════════════════════════ Data Cloud (penjelajah berkas) ═══════════════
   Halaman ini tidak men-scroll dokumen: toolbar tetap di atas, daftar dan
   panel kanan yang men-scroll sendiri. Sama seperti shell aplikasi, supaya
   kotak cari tidak pernah hilang saat daftar memanjang. */
.dcpage { height: 100vh; overflow: hidden; }
.dcpage .dcwrap {
  flex: 1; min-height: 0; width: 100%; max-width: 1460px; margin: 0 auto;
  padding: 0 28px; display: flex; flex-direction: column;
}
.dchead { flex: none; padding: 24px 0 12px; }
.dchead h1 { font-size: 27px; letter-spacing: -.5px; font-weight: 800; }
.dchead .kicker { margin-bottom: 8px; }
.dchead .sub { color: var(--muted); font-size: 13px; max-width: 720px; margin-top: 8px; }

/* ── toolbar ── */
.dctools {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 0 13px; border-bottom: 1px solid var(--line);
}
.dcsearch { position: relative; flex: 1 1 300px; min-width: 220px; }
.dcin {
  width: 100%; height: 38px; padding: 0 12px 0 34px;
  background: var(--panel); color: var(--fg); font: inherit; font-size: 13px;
  border: 1px solid var(--line2); border-radius: 9px; outline: none;
}
.dcin:focus { border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(56, 189, 248, .12); }
.dcsearch::before {
  content: ''; position: absolute; left: 12px; top: 12px; width: 13px; height: 13px;
  border: 1.8px solid var(--dim); border-radius: 50%; pointer-events: none;
}
.dcsearch::after {
  content: ''; position: absolute; left: 23px; top: 24px; width: 6px; height: 1.8px;
  background: var(--dim); transform: rotate(45deg); pointer-events: none;
}
.dchint { position: absolute; right: 10px; top: 11px; font-size: 10.5px; color: var(--dim); }
.dcchips { display: flex; gap: 6px; flex-wrap: wrap; }
.dcchip {
  border: 1px solid var(--line2); background: transparent; color: var(--muted);
  font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 20px; cursor: pointer;
}
.dcchip b { color: var(--dim); font-weight: 700; margin-left: 4px; }
.dcchip.on { background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .45); color: var(--fg); }
.dcchip.on b { color: var(--accent2); }
.dcright { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.sel {
  background: var(--panel); color: var(--fg); font: inherit; font-size: 12px;
  border: 1px solid var(--line2); border-radius: 8px; padding: 7px 9px; outline: none;
}
.dcsort { width: 104px; }
.dcup { width: 176px; }

/* ── grid tiga kolom ── */
.dcgrid {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 216px minmax(0, 1fr) 324px; gap: 0;
}
.dctree, .dcdetail, .dclist { min-height: 0; overflow: auto; }
.dctree { padding: 16px 14px 20px 0; border-right: 1px solid var(--line); }
.dcdetail { padding: 16px 0 24px 18px; border-left: 1px solid var(--line); }
.dclist { padding: 10px 0 20px 14px; }

.dcttl { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim);
  font-weight: 800; margin-bottom: 10px; }
.dcproj { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  padding: 5px 0 10px; }
.dcprojdot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.dcnode {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; text-align: left;
}
.dcnode:hover { background: var(--panel2); color: var(--fg); }
.dcnode.on { background: rgba(56, 189, 248, .12); color: var(--fg); font-weight: 600; }
.dcnode b { color: var(--dim); font-size: 11px; font-weight: 700; }
.dcnode.on b { color: var(--accent2); }
.dcstat { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dcstatrow { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px;
  color: var(--dim); padding: 3px 0; }
.dcstatrow b { color: var(--muted); font-weight: 600; }
.dcnote { font-size: 10.5px; color: var(--dim); line-height: 1.5; margin-top: 12px; }

/* ── daftar ── */
.dcrow {
  display: grid; align-items: center; gap: 10px; width: 100%;
  grid-template-columns: minmax(0, 1fr) 96px 104px 74px 84px 68px;
  border: 0; background: transparent; color: inherit; font: inherit;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(34, 49, 79, .55);
}
.dcrow:hover { background: var(--panel); }
.dcrow.sel { background: rgba(56, 189, 248, .1); box-shadow: inset 2px 0 0 var(--accent2); }
.dchead-row {
  position: sticky; top: 0; z-index: 2; cursor: default;
  background: var(--bg); border-bottom: 1px solid var(--line2);
  font-size: 10px; letter-spacing: .9px; text-transform: uppercase;
  color: var(--dim); font-weight: 800; padding-top: 6px; padding-bottom: 8px;
}
.dchead-row:hover { background: var(--bg); }
.dcname { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dcname b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.dcvirt { font-style: normal; font-size: 9.5px; color: var(--amber); border: 1px solid rgba(245,158,11,.4);
  background: rgba(245,158,11,.08); padding: 1px 5px; border-radius: 20px; flex: none; }
.dcico {
  flex: none; width: 30px; height: 22px; border-radius: 5px; display: flex;
  align-items: center; justify-content: center; font-size: 8px; font-weight: 800;
  letter-spacing: .4px; font-style: normal;
}
.dcico.big { width: 52px; height: 38px; font-size: 11px; border-radius: 8px; }
.dcico.vol { background: rgba(56, 189, 248, .16); color: #7dd3fc; }
.dcico.sht { background: rgba(233, 69, 96, .16); color: #f8a1b0; }
.dcico.sec { background: rgba(45, 212, 191, .15); color: #5eead4; }
.dcico.grd { background: rgba(245, 158, 11, .15); color: #fcd34d; }
.dcico.map { background: rgba(52, 211, 153, .15); color: #6ee7b7; }
.dcico.mod { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
.dcico.doc, .dcico.oth { background: rgba(100, 116, 139, .2); color: #cbd5e1; }
.dcdim { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.dcrow .num { text-align: right; }
.dcstat-chip {
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 20px; text-align: center; border: 1px solid;
  white-space: nowrap;
}
/* di dalam baris, chip status harus rata kiri dengan judul kolomnya —
   tanpa ini chip melayang di tengah kolom dan tampak lepas dari header */
.dcrow .dcstat-chip { justify-self: start; text-align: left; }
.dcstat-chip.draf { color: var(--amber); border-color: rgba(245, 158, 11, .38); }
.dcstat-chip.final { color: var(--green); border-color: rgba(52, 211, 153, .38); }
.dcstat-chip.usang { color: var(--dim); border-color: rgba(100, 116, 139, .4); }
.dcempty, .dcdempty {
  padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px;
  border: 1px dashed var(--line2); border-radius: 12px; margin: 20px 0;
}
.dcempty b { display: block; color: var(--fg); margin-bottom: 6px; font-size: 14px; }
.dcempty p, .dcdempty p { font-size: 12px; color: var(--dim); }

/* ── rincian ── */
.dcname2 { font-size: 14.5px; font-weight: 700; line-height: 1.35; margin: 12px 0 10px;
  word-break: break-all; }
.dcbadges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.dctag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; border: 1px solid var(--line2); color: var(--muted);
  background: transparent;
}
.dctag.b { cursor: pointer; }
.dctag.b:hover { color: var(--fg); border-color: var(--accent2); }
.dctags { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.dcnote2 { font-size: 12px; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
.dckv { border-top: 1px solid var(--line); }
.dckv .kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid rgba(34, 49, 79, .7); }
.dckv .kv p { font-size: 11.5px; margin: 0; }
.dckv .kv p:first-child { color: var(--dim); flex: none; }
.dckv .kv p:last-child { color: var(--fg); text-align: right; font-weight: 600;
  word-break: break-all; }
.dcact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.btn.danger:hover { border-color: rgba(233, 69, 96, .6); color: #fda4af; }
.btn.danger.armed { border-color: var(--accent); color: var(--accent); }
.dcfoot { flex: none; padding: 10px 0 14px; font-size: 11px; color: var(--dim);
  border-top: 1px solid var(--line); margin-top: 10px; }
.dcfoot b { color: var(--muted); }

/* di bawah 1180 px kolom menyusut: yang dibuang adalah jenis berkas dan
   tanggal dibuat (keduanya ada di panel rincian), bukan status — status
   draft/final masih menentukan apakah berkas itu boleh dipakai */
@media (max-width: 1180px) {
  .dcgrid { grid-template-columns: 190px minmax(0, 1fr) 290px; }
  .dcrow { grid-template-columns: minmax(0, 1fr) 84px 78px 64px; }
  .dcrow > :nth-child(2), .dcrow > :nth-child(5) { display: none; }
}
@media (max-width: 900px) {
  .dcpage { height: auto; overflow: auto; }
  .dcgrid { grid-template-columns: 1fr; }
  .dctree, .dcdetail { border: 0; padding: 12px 0; }
  .dclist { padding: 10px 0; }
}

/* ═══════════════════════════ FWI (modul Processing) ═══════════════════════
   Halaman ini memuat hasil eksperimen yang benar-benar dijalankan, jadi ia
   lebih panjang dari halaman penjelajah dan boleh men-scroll dokumen. */
.fwpage { overflow-y: auto; }
.fwwrap { padding-bottom: 60px; }
.fwhead { padding: 46px 0 8px; }
.fwhead h1 { font-size: 34px; letter-spacing: -.8px; font-weight: 800; margin: 10px 0 12px; }
.fwhead .sub { color: var(--muted); font-size: 14px; max-width: 820px; line-height: 1.6; }
.fwchips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }

.fwsec { padding: 40px 0 4px; border-top: 1px solid var(--line); margin-top: 40px; }
.fwsec h2 { font-size: 21px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 10px; }
.fwsec .slead { color: var(--muted); font-size: 13.5px; max-width: 860px; line-height: 1.65; margin-bottom: 20px; }

.fwnums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fwnums-3 { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.fwnote { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.6;
  border-left: 2px solid var(--accent2); padding-left: 12px; }

.fwgrid2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; align-items: start; }
.fwcard { background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; padding: 16px; }
.fwcard h3 { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .3px;
  text-transform: uppercase; margin-bottom: 12px; }
/* Penampang kecepatan 120x160 itu potret (0,9:1). Dua panel berdampingan di
   dalam satu kolom hanya menyisakan ~260 px per panel, dan struktur yang mau
   dilihat justru hilang. Ditumpuk: masing-masing selebar kartu. */
.fwsec2 { display: grid; grid-template-columns: 1fr; gap: 8px; }
.fwsec2 canvas { width: 100%; height: auto; display: block; border-radius: 7px; background: #0a1220; }
.fwcard canvas { width: 100%; height: auto; display: block; }
.fwbar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fwbar span { font-size: 10.5px; color: var(--dim); }
.fwbar b { flex: 1; display: flex; height: 7px; border-radius: 4px; overflow: hidden; }
.fwbar i { flex: 1; }
.fwcap { font-size: 11.5px; color: var(--dim); line-height: 1.55; margin-top: 10px; }

.fwroles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.fwrole { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 15px; }
.fwrtag { font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--accent2); }
.fwrole h3 { font-size: 14px; font-weight: 700; margin: 7px 0 7px; }
.fwrole p { font-size: 12px; color: var(--muted); line-height: 1.6; }

.fwlog { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.fwtab { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.fwtab th { text-align: left; font-size: 9.5px; letter-spacing: .9px; text-transform: uppercase;
  color: var(--dim); font-weight: 800; padding: 10px 12px; border-bottom: 1px solid var(--line2);
  background: var(--bg2); white-space: nowrap; }
.fwtab td { padding: 8px 12px; border-bottom: 1px solid rgba(34,49,79,.55); color: var(--muted); }
.fwtab tr:last-child td { border-bottom: 0; }
.fwtab td.why { color: var(--dim); font-size: 11px; }
.fwtab b.act-continue { color: var(--accent2); }
.fwtab b.act-advance { color: var(--green); }
.fwtab b.act-stop { color: var(--accent); }

.fwfb { display: grid; gap: 10px; }
.fwfbrow { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  border-left: 3px solid var(--line2); }
.fwfbrow.ok { border-left-color: var(--green); }
.fwfbrow.bad { border-left-color: var(--amber); }
.fwfbrow b { display: block; font-size: 12.5px; }
.fwfbrow span { display: block; font-size: 11.5px; color: var(--accent2); margin-top: 4px; }
.fwfbrow p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.fwlim { display: grid; gap: 7px; padding-left: 0; list-style: none; }
.fwlim li { font-size: 12.5px; color: var(--muted); line-height: 1.55; padding-left: 20px;
  position: relative; }
.fwlim li::before { content: '·'; position: absolute; left: 6px; color: var(--amber); font-weight: 800; }
/* catatan kegagalan run pertama: satu-satunya butir yang bukan sekadar batas
   metodologi, jadi ia harus terbaca lebih dulu, bukan tenggelam di daftar */
.fwlim li.fwfail { color: var(--text); background: rgba(233, 69, 96, .07);
  border-left: 2px solid rgba(233, 69, 96, .55); padding: 9px 12px 9px 26px; border-radius: 0 6px 6px 0; }
.fwlim li.fwfail::before { content: '!'; left: 9px; color: #e94560; }

/* galat di atas / di bawah x_max/2: satu-satunya angka yang menjawab
   "apakah FWI memperbaiki model", jadi ia berdiri sendiri, bukan jadi caption */
.fwsplit { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted);
  border-left: 2px solid rgba(56, 189, 248, .45); padding: 6px 0 6px 11px; }
.fwsplit b { color: var(--text); font-weight: 700; }
.fwsplit em { font-style: normal; color: #38bdf8; font-weight: 700; }

/* siapa yang menahan kerusakan: satu paragraf di bawah tabel keputusan */
.fwloopnote { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted);
  background: rgba(245, 158, 11, .07); border-left: 2px solid rgba(245, 158, 11, .5);
  padding: 10px 13px; border-radius: 0 6px 6px 0; }

@media (max-width: 1080px) {
  .fwgrid2 { grid-template-columns: 1fr; }
  .fwroles { grid-template-columns: 1fr; }
  .fwnums, .fwnums-3 { grid-template-columns: 1fr 1fr; }
  .fwfbrow { grid-template-columns: 1fr; gap: 8px; }
  .fwhead h1 { font-size: 27px; }
}

/* ═══════════════════════════ 5D Interpolation (modul Processing) ═══════════════
   Tab konfigurasi untuk peta lubang. Mengikuti pola chip pada FWI,
   tetapi diaktifkan: klik untuk berganti konfigurasi. */
.ipcfg-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.ipcfg-tab {
  border: 1px solid var(--line2); background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 14px;
  border-radius: 8px; cursor: pointer; transition: all .15s;
}
.ipcfg-tab:hover { border-color: #3c527a; color: var(--fg); }
.ipcfg-tab.on {
  background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .45);
  color: var(--fg);
}