/* 01b · #kami (scene gelap; disusun ulang 21 Okt 2026). Semua pemilih diawali #kami atau .km__ ; warna dari token base.css,
   ditambah enam warna kategori untuk linimasa titik (bidang pekerjaan). Semua ≥ 3:1 terhadap latar #0d1117 (grafis) dan
   teks legenda memakai --c-fg-2, bukan warna kategori. Amber = command center, CCTV, keamanan (paling dekat dengan TIEI). */

#kami {
  --km-J: #38bdf8;  /* jaringan dan satelit */
  --km-C: #f59e0b;  /* command center, CCTV, keamanan */
  --km-A: #a78bfa;  /* audio-visual */
  --km-T: #f472b6;  /* aplikasi dan TI */
  --km-K: #c8b893;  /* konstruksi dan MEP */
  --km-L: #8b949e;  /* lainnya */
}
#kami .km__panel { align-items: stretch; }
#kami .km__bidang { width: 100%; height: 100%; grid-template: 100% / 100%; }
#kami .km__bidang > * { min-height: 0; min-width: 0; }

/* ── s0: identitas + linimasa titik ── */
#kami .km__s0 { height: 100%; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(var(--u) * 4); align-items: center; }
#kami .km__identitas { display: flex; flex-direction: column; gap: calc(var(--u) * 2.6); }
#kami .km__logo { display: block; width: min(100%, calc(var(--u) * 27)); height: auto; }
#kami .km__angka { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.3); }
#kami .km__angka li { display: flex; align-items: baseline; gap: .6em; padding-top: calc(var(--u) * .9); border-top: 1px solid var(--c-line); }
#kami .km__angka .angka { font-size: calc(var(--fs-angka) * .62); min-width: 1.9em; }
#kami .km__angka span { font-size: var(--fs-lead); font-weight: 600; color: var(--c-fg-2); }

#kami .km__grafik { margin: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
#kami .km__plot { position: relative; height: calc(var(--u) * 27); min-height: 280px; }
#kami .km__titik { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#kami .km__dasar { stroke: var(--c-line-2); stroke-width: 1; }
#kami .km__tahun { fill: var(--c-fg-2); font: 600 var(--fs-label) var(--font); }
#kami .km__jumlah { fill: var(--c-muted); font: 600 var(--fs-kecil) var(--font); }
#kami .km__dot { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform .35s var(--ease), opacity .25s var(--ease); }
#kami .km__dot.is-on { transform: none; opacity: 1; }
#kami .km__dot[data-g="J"] { fill: var(--km-J); } #kami .km__dot[data-g="C"] { fill: var(--km-C); }
#kami .km__dot[data-g="A"] { fill: var(--km-A); } #kami .km__dot[data-g="T"] { fill: var(--km-T); }
#kami .km__dot[data-g="K"] { fill: var(--km-K); } #kami .km__dot[data-g="L"] { fill: var(--km-L); }
#kami .km__cincin { fill: none; stroke: var(--text-primary); stroke-width: 2; opacity: 0; transition: opacity .3s var(--ease); }
#kami .km__tunjuk { fill: none; stroke: var(--text-secondary); stroke-width: 1.2; opacity: 0; transition: opacity .3s var(--ease); }
#kami .km__catat {
  position: absolute; z-index: 2; margin: 0; white-space: nowrap;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.3; color: var(--c-fg);
  padding: .3em .65em; border-radius: 6px; background: var(--c-card); border: 1px solid var(--c-line-2);
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
#kami .km__sorot-on .km__cincin, #kami .km__sorot-on .km__tunjuk { opacity: 1; }
#kami .km__catat b, #kami .km__catat span { display: block; }
#kami .km__catat span { font-weight: 500; color: var(--c-fg-2); }
#kami .km__plot.km__sorot-on .km__catat { opacity: 1; transform: none; }
#kami .km__legenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, max-content); gap: .45em calc(var(--u) * 2.2); font-size: var(--fs-label); color: var(--c-fg-2); }
#kami .km__legenda li { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
#kami .km__legenda i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
#kami .km__legenda b { color: var(--c-fg); font-weight: 700; }
#kami .km__legenda [data-g="J"] i { background: var(--km-J); } #kami .km__legenda [data-g="C"] i { background: var(--km-C); }
#kami .km__legenda [data-g="A"] i { background: var(--km-A); } #kami .km__legenda [data-g="T"] i { background: var(--km-T); }
#kami .km__legenda [data-g="K"] i { background: var(--km-K); } #kami .km__legenda [data-g="L"] i { background: var(--km-L); }
#kami .km__kaki { margin: 0; }

/* ── s1: dinding nama klien + strip mitra ── */
#kami .km__s1 { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 4); }
#kami .km__klien { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(var(--u) * 4); }
#kami .km__kelompok h3, #kami .km__mitra h3 { margin: 0 0 calc(var(--u) * 1); font-size: var(--fs-label); font-weight: 600; color: var(--c-fg-2); padding-bottom: calc(var(--u) * .6); border-bottom: 1px solid var(--c-line); }
#kami .km__kelompok ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7) calc(var(--u) * 1.6); }
#kami .km__kelompok li { font-size: calc(var(--fs-lead) * 1.3); font-weight: 600; line-height: 1.3; color: var(--c-fg); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
#kami .km__kelompok li:nth-child(n) { transition-delay: calc(var(--i, 0) * 45ms); }
#kami[data-state="1"] .km__kelompok li { opacity: 1; transform: none; }
#kami .km__mitra ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.6) calc(var(--u) * 2.2); }
#kami .km__mitra img { display: block; height: calc(var(--u) * 2.6 * var(--h, 1)); width: auto; opacity: .92; }
#kami .km__mitra { opacity: 0; transition: opacity .5s var(--ease) .5s; }
#kami[data-state="1"] .km__mitra { opacity: 1; }

/* ── Mode statis ── */
.is-static #kami .km__bidang { height: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.is-static #kami .km__s0, .is-static #kami .km__s1 { height: auto; }
.is-static #kami .km__dot { transform: none; opacity: 1; }
.is-static #kami .km__catat { opacity: 1; transform: none; }
.is-static #kami .km__cincin, .is-static #kami .km__tunjuk { opacity: 1; }
.is-static #kami .km__kelompok li, .is-static #kami .km__mitra { opacity: 1; transform: none; }

@media (max-width: 860px) {
  #kami .km__s0, #kami .km__klien { grid-template-columns: 1fr; }
  #kami .km__legenda { grid-template-columns: repeat(2, max-content); }
  #kami .km__catat { white-space: normal; max-width: 60%; }
}