/* Token diangkat dari design/*.dc.html supaya prototipe dan desain tidak bercabang.
Kalau salah satu berubah, yang lain harus ikut. */
:root {
--navy: #16324F; --navy-2: #1D3E60; --navy-3: #23486C;
--amber: #A86A0B; --teal: #7FD3B4;
--naik: #C6362C; --turun: #17795E; /* merah naik, hijau turun — konvensi bursa Taiwan */
--tolak: #8A2F27;
--ground: #EEF0F2; --surface: #FFFFFF; --ink: #101418;
--abu: #6B7683; --abu-2: #4A535E; --garis: #D3D8DE;
--biru-mark: #2F74C0; --oranye-mark: #B5730C;
}
* { box-sizing: border-box; }
body {
margin: 0; display: flex; min-height: 100vh;
font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
background: var(--ground); color: var(--ink); font-size: 14px;
-webkit-font-smoothing: antialiased;
}
.mono, .num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
a { color: var(--navy); }
/* ---- rail ---- */
.rail { width: 224px; flex: none; background: var(--navy); padding: 24px 16px;
display: flex; flex-direction: column; gap: 26px; }
.merek { display: flex; flex-direction: column; gap: 3px; padding-left: 8px; }
.merek b { font-size: 15px; color: #fff; letter-spacing: -0.01em; }
.merek span { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.09em;
color: #7E9BB8; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 5px;
color: #A9C0D6; text-decoration: none; font-size: 13.5px; }
.nav a:hover { background: #1D3E60; color: #DCE7F0; }
.nav a.on { background: var(--navy-3); color: #fff; font-weight: 600; }
.nav .hit { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 11px;
font-weight: 600; background: var(--naik); color: #fff; padding: 1px 6px; border-radius: 9px; }
.status-kotak { margin-top: auto; background: var(--navy-2); border-radius: 6px; padding: 12px;
display: flex; flex-direction: column; gap: 7px; }
.status-kotak .lbl { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.09em;
color: #7E9BB8; text-transform: uppercase; }
.status-kotak .mesin { font-size: 12.5px; color: #DCE7F0; display: flex; align-items: baseline; gap: 6px; }
.status-kotak small { font-size: 11.5px; color: #7E9BB8; line-height: 1.45; }
.titik { width: 7px; height: 7px; border-radius: 50%; background: #45C08D; flex: none; }
.titik.kuning { background: #E8B872; }
/* ---- isi ---- */
.isi { flex: 1; padding: 26px 32px 48px; min-width: 0; }
.kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.kepala h1 { margin: 0; font-size: 22px; letter-spacing: -0.015em; }
.kicker { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em;
color: var(--abu); text-transform: uppercase; margin-bottom: 5px; }
.kartu { background: var(--surface); border-radius: 8px; padding: 16px 18px; margin-bottom: 12px; }
.kartu.rapat { padding: 13px 16px; }
h2 { font-size: 15px; margin: 22px 0 10px; }
/* ---- lencana status ---- */
.lencana { display: inline-flex; align-items: center; gap: 5px; font-family: "IBM Plex Mono", monospace;
font-size: 10px; letter-spacing: 0.07em; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; }
.l-terbit { background: var(--navy); color: #fff; }
.l-ditolak { background: #F9EAE8; color: var(--tolak); box-shadow: inset 0 0 0 1px var(--tolak); }
.l-ditahan { background: #FBF2E3; color: #8A560A; box-shadow: inset 0 0 0 1px var(--amber); }
.l-dilewati { background: #E3E6EA; color: #5C6773; box-shadow: inset 0 0 0 1px #A8B0BA; }
/* ---- pita sumber data ---- */
.pita { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 6px;
font-size: 12px; line-height: 1.5; margin-bottom: 16px; }
.pita.fixture { background: #FBF2E3; color: #5F4409; border-left: 3px solid var(--amber); }
.pita.nyata { background: #EFF7F3; color: #12604A; border-left: 3px solid var(--turun); }
.pita.bahaya { background: #F9EAE8; color: #6B2620; border-left: 3px solid var(--tolak); }
/* ---- baris feed ---- */
.baris { display: flex; align-items: flex-start; gap: 14px; padding: 13px 16px; background: var(--surface);
border-radius: 8px; margin-bottom: 8px; text-decoration: none; color: inherit; }
.baris:hover { box-shadow: 0 0 0 1.5px var(--navy); }
.baris .kiri { width: 96px; flex: none; }
.baris .kode { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; }
.baris .tgl { font-size: 11px; color: var(--abu); }
.baris .tengah { flex: 1; min-width: 0; }
.baris .judul { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.baris .sub { font-size: 11.5px; color: var(--abu); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; }
.baris .kanan { flex: none; text-align: right; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
/* ---- angka ---- */
.delta { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; }
.delta.naik { color: var(--naik); } .delta.turun { color: var(--turun); }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--garis); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--abu-2); font-size: 12.5px; }
.kv .v { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 600; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { text-align: right; padding: 6px 9px; border-bottom: 1px solid var(--garis); }
th:first-child, td:first-child { text-align: left; }
th { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.05em;
color: var(--abu); text-transform: uppercase; font-weight: 500; }
td.num { font-family: "IBM Plex Mono", monospace; }
tr.sorot td { background: #F4F7FA; font-weight: 600; }
/* ---- pemeriksaan ---- */
.cek { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--garis); font-size: 12.5px; }
.cek:last-child { border-bottom: 0; }
.cek .tanda { flex: none; width: 15px; font-weight: 700; }
.cek.ok .tanda { color: var(--turun); } .cek.x .tanda { color: var(--tolak); }
.cek .nama { font-weight: 600; width: 230px; flex: none; }
.cek .why { color: var(--abu-2); line-height: 1.45; }
/* ---- jejak ---- */
.langkah { display: flex; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--garis); }
.langkah:last-child { border-bottom: 0; }
.langkah .no { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #fff; background: var(--navy);
width: 21px; height: 21px; border-radius: 50%; display: flex; align-items: center;
justify-content: center; flex: none; }
.langkah.tolak .no { background: var(--tolak); }
.langkah.berhenti .no { background: var(--abu); }
pre { background: #F4F6F8; border-radius: 5px; padding: 10px 12px; overflow-x: auto;
font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.55; margin: 7px 0 0; }
.sitasi { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.kutip { border-left: 3px solid var(--amber); background: #FBF7EF; padding: 9px 12px;
font-size: 12.5px; line-height: 1.55; border-radius: 0 5px 5px 0; }
.kosong { padding: 34px; text-align: center; color: var(--abu); font-size: 13px; }
/* --- penarikan dinamis & watchlist --- */
.titik.merah { background: #E0695C; }
.nav .hit.abu { background: #2A4D72; }
.tombol { font: 600 12.5px "Instrument Sans", sans-serif; background: var(--navy); color: #fff; border: 0;
border-radius: 5px; padding: 8px 13px; cursor: pointer; }
.tombol:hover { background: var(--navy-3); }
.tombol.tipis { background: transparent; color: var(--tolak); box-shadow: inset 0 0 0 1px #E2B8B2; padding: 5px 10px; font-size: 11.5px; }
.isian { font: 500 14px "IBM Plex Mono", monospace; padding: 8px 10px; border: 1px solid var(--garis);
border-radius: 5px; width: 140px; }
table.wl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.wl th { text-align: left; font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--abu); padding: 8px 10px; border-bottom: 1px solid var(--garis); }
table.wl td { padding: 10px; border-bottom: 1px solid var(--garis); text-align: left; }
table.wl tr:last-child td { border-bottom: 0; }
/* --- pilihan bahasa --- */
.bahasa { margin-top: 18px; padding-left: 8px; }
.bahasa .lbl { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.09em;
color: #7E9BB8; text-transform: uppercase; display: block; margin-bottom: 6px; }
.bahasa div { display: flex; gap: 4px; }
.bahasa a { font: 600 11.5px "IBM Plex Mono", monospace; color: #A9BDD1; padding: 4px 9px; border-radius: 4px;
box-shadow: inset 0 0 0 1px #2A4D72; }
.bahasa a.on { background: var(--navy-3); color: #fff; box-shadow: none; }