/* 05 · #control-tower (milik S1). Semua pemilih diawali #control-tower atau .ct__ ; warna hanya dari token base.css
   Merah hanya untuk Exception (chip, wadah, satu titik, penanda butir). Amber: simpul sementara, sambungan, jejak. */

html:not(.is-static) #control-tower .scene__sticky { grid-template-rows: auto auto; align-content: center; row-gap: calc(var(--u) * 2.2); }
#control-tower .ct__panel {
  --ct-gap: calc(var(--u) * 2.6);
  height: auto; flex-direction: column; justify-content: center; align-items: stretch;
  gap: calc(var(--u) * 1.6); padding-bottom: calc(var(--u) * 2.8);
}
#control-tower .ct__label { left: 0; bottom: 0; }

/* ── Rantai nilai: enam simpul, sambungan di antaranya ── */
#control-tower .ct__rantai { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ct-gap); transition: opacity .5s var(--ease); }
#control-tower .ct__simpul {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: .55em;
  padding: calc(var(--u) * .8) calc(var(--u) * .9);
  background: var(--c-card); border: 1px solid var(--c-line-2); border-radius: 8px;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.2; color: var(--c-fg);
  opacity: .4; transition: opacity .45s var(--ease), border-color .45s;
}
#control-tower .ct__simpul.is-on { opacity: 1; }
#control-tower .ct__simpul.is-on[data-status="rekon"] { border-color: var(--c-good); }
#control-tower .ct__simpul.is-on[data-status="sementara"] { border-color: var(--c-accent-fill); }
#control-tower .ct__tanda { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-line-2); transition: background .45s; }
#control-tower .ct__simpul.is-on[data-status="rekon"] .ct__tanda { background: var(--c-good); }
#control-tower .ct__simpul.is-on[data-status="sementara"] .ct__tanda { background: var(--c-accent-fill); }
/* garis sambungan + titik sambungan (tempat selisih dibaca) */
#control-tower .ct__simpul + .ct__simpul::before { content: ''; position: absolute; right: 100%; top: 50%; width: var(--ct-gap); border-top: 1.5px solid var(--c-line-2); }
#control-tower .ct__simpul + .ct__simpul::after {
  content: ''; position: absolute; top: 50%; right: calc(100% + var(--ct-gap) / 2 - 6px);
  width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; box-sizing: border-box;
  background: var(--c-card); border: 2px solid var(--c-line-2); transition: border-color .4s;
}
#control-tower .ct__simpul.is-on + .ct__simpul.is-on::after { border-color: var(--c-accent-fill); }
#control-tower[data-state="0"] .ct__simpul.is-on + .ct__simpul.is-on::after { animation: ct-denyut 1.8s ease-in-out infinite; }
@keyframes ct-denyut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
/* partikel di sambungan, kiri ke kanan */
#control-tower .ct__arus { position: absolute; right: 100%; top: 50%; width: var(--ct-gap); height: 0; pointer-events: none; }
#control-tower .ct__arus i { position: absolute; left: 0; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent-fill); opacity: 0; }
html:not(.is-static) #control-tower.is-active .ct__simpul.is-on .ct__arus i { animation: ct-arus 1.9s linear infinite; }
html:not(.is-static) #control-tower.is-active .ct__simpul.is-on .ct__arus i + i { animation-delay: -.95s; }
@keyframes ct-arus { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(calc(var(--ct-gap) - 5px)); opacity: 0; } }

#control-tower .ct__legenda { list-style: none; margin: calc(var(--u) * .75) 0 0; padding: 0; display: flex; justify-content: flex-end; gap: 1.4em; font-size: var(--fs-label); color: var(--c-fg-2); }
#control-tower .ct__legenda li { display: inline-flex; align-items: center; gap: .5em; }
#control-tower .ct__legenda i { width: 10px; height: 10px; border-radius: 50%; }
#control-tower .ct__lg--rekon i { background: var(--c-good); }
#control-tower .ct__lg--sementara i { background: var(--c-accent-fill); }

/* ── Bagian bawah: neraca (s0) · enam wadah + daftar perhatian (s1–s2). Tinggi tetap agar narasi tidak melompat ── */
#control-tower .ct__bawah {
  --ct-sisi: 24%;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--ct-sisi); column-gap: calc(var(--u) * 2);
  align-items: start; height: calc(var(--u) * 22.4);
}

/* Neraca: enam batang tanpa angka; celah selisih berdenyut. Tinggi batang hanya ilustrasi */
#control-tower .ct__neraca {
  grid-area: 1 / 1 / 2 / 3; display: flex; gap: var(--ct-gap); height: calc(var(--u) * 18);
  border-bottom: 1px solid var(--c-line-2); transition: opacity .45s var(--ease);
}
#control-tower .ct__neraca-batang { position: relative; flex: 1 1 0; }
#control-tower .ct__neraca-batang i { position: absolute; left: 35%; right: 35%; bottom: 0; }
#control-tower .ct__isi {
  height: var(--h); background: var(--c-line); border-radius: 4px 4px 0 0;
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease);
}
#control-tower .ct__neraca-batang .ct__celah {
  bottom: var(--h); height: calc(var(--p) - var(--h));
  border: 1.5px dashed var(--c-accent-fill); border-bottom: 0; border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; transition: opacity .4s var(--ease);
}
/* Garis taraf: puncak batang sebelumnya diteruskan (garis putus) sampai celah batang ini */
#control-tower .ct__taraf { position: absolute; bottom: var(--p); left: -100%; right: 65%; border-top: 1.5px dashed var(--c-accent-fill); opacity: 0; transition: opacity .4s var(--ease); }
#control-tower .ct__neraca-batang { --sela: var(--ct-gap); }
#control-tower .ct__neraca-batang .ct__taraf { left: calc(-35% - var(--sela)); }
#control-tower .ct__neraca-batang.is-on .ct__taraf { opacity: .9; transition-delay: .45s; }
#control-tower .ct__neraca-batang.is-on .ct__isi { transform: none; }
#control-tower .ct__neraca-batang.is-on .ct__celah { opacity: 1; transition-delay: .45s; }
html:not(.is-static) #control-tower.is-active[data-state="0"] .ct__neraca-batang.is-on .ct__celah { animation: ct-celah 1.8s ease-in-out .9s infinite; }
@keyframes ct-celah { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#control-tower[data-state="1"] .ct__neraca, #control-tower[data-state="2"] .ct__neraca { opacity: 0; }

/* Enam wadah kelompok selisih */
#control-tower .ct__wadah {
  grid-area: 1 / 1 / 2 / 2; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * .9);
  opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .5s var(--ease);
}
#control-tower .ct__wadah li { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * .6); transition: opacity .45s var(--ease); }
#control-tower .ct__chip {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3em;
  padding: .25em .5em; border-radius: 6px; border: 1px solid var(--c-line-2); background: var(--c-card);
  font-size: var(--fs-label); font-weight: 600; line-height: 1.2; color: var(--c-fg-2);
}
#control-tower .ct__bak { display: block; height: calc(var(--u) * 14); border: 1.5px solid var(--c-line-2); border-top: 0; border-radius: 0 0 10px 10px; background: var(--c-card); }
#control-tower .ct__wadah--ex .ct__chip { color: var(--c-alert); border-color: var(--c-alert); }
#control-tower .ct__wadah--ex .ct__bak { border-color: var(--c-alert); }
#control-tower[data-state="1"] .ct__wadah, #control-tower[data-state="2"] .ct__wadah { opacity: 1; transform: none; }
/* s2 "belum aktif": bidang dan garis meredup, teks tetap abu terbaca (≥ 4,5:1) */
#control-tower[data-state="2"] .ct__wadah li:not(.ct__wadah--ex) .ct__bak { opacity: .35; }
#control-tower[data-state="2"] .ct__wadah li:not(.ct__wadah--ex) .ct__chip { border-color: var(--c-line); }
#control-tower[data-state="2"] .ct__simpul.is-on { border-color: var(--c-line); color: var(--c-muted); }
#control-tower[data-state="2"] .ct__simpul .ct__tanda, #control-tower[data-state="2"] .ct__simpul::before,
#control-tower[data-state="2"] .ct__simpul::after, #control-tower[data-state="2"] .ct__arus { opacity: .45; }

/* Daftar perhatian + jejak penelusuran */
#control-tower .ct__sisi { grid-area: 1 / 2 / 2 / 3; display: flex; flex-direction: column; opacity: 0; transform: translateX(14px); transition: opacity .45s var(--ease), transform .5s var(--ease); }
#control-tower[data-state="1"] .ct__sisi, #control-tower[data-state="2"] .ct__sisi { opacity: 1; transform: none; }
#control-tower .ct__perhatian { border: 1px solid var(--c-line-2); border-radius: 10px; background: var(--c-card); padding: calc(var(--u) * .75) calc(var(--u) * .9); }
#control-tower .ct__sisi-judul { margin: 0; font-size: var(--fs-label); font-weight: 700; color: var(--c-fg); }
#control-tower .ct__perhatian-isi { position: relative; min-height: calc(var(--u) * 4.4); margin-top: calc(var(--u) * .5); border-radius: 6px; background: var(--c-card-2); display: flex; align-items: center; }
#control-tower .ct__butir {
  width: 100%; padding: calc(var(--u) * .6) calc(var(--u) * .7); border-radius: 6px;
  background: var(--c-card); border: 1px solid var(--c-accent-fill); box-shadow: var(--c-shadow);
  opacity: 0; transform: scale(.2); transition: opacity .35s var(--ease), transform .55s var(--ease);
}
#control-tower .ct__butir p { margin: 0; display: flex; gap: .5em; align-items: baseline; font-size: var(--fs-label); font-weight: 600; line-height: 1.3; color: var(--c-fg); }
#control-tower .ct__butir p::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-alert); transform: translateY(-1px); }
#control-tower[data-state="2"] .ct__butir { opacity: 1; transform: none; transition-delay: .15s; }

#control-tower .ct__jejak { position: relative; margin-top: calc(var(--u) * 1.1); padding-left: calc(var(--u) * 1.5); display: flex; flex-direction: column; gap: calc(var(--u) * .9); }
#control-tower .ct__jejak::before {
  content: ''; position: absolute; left: calc(var(--u) * .45); top: calc(var(--u) * -1.1); bottom: calc(var(--u) * 1.6);
  border-left: 2px solid var(--c-accent-fill); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease);
}
#control-tower .ct__tingkat {
  position: relative; padding: calc(var(--u) * .6) calc(var(--u) * .8); border: 1px solid var(--c-line-2); border-radius: 8px; background: var(--c-card);
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .45s var(--ease);
}
#control-tower .ct__tingkat::before { content: ''; position: absolute; right: 100%; top: calc(var(--u) * 1.1); width: calc(var(--u) * 1.05); border-top: 2px solid var(--c-accent-fill); }
#control-tower .ct__tingkat-judul { margin: 0; font-size: var(--fs-label); font-weight: 600; line-height: 1.25; color: var(--c-fg); }
#control-tower .ct__baris { display: block; height: calc(var(--u) * .8); margin-top: calc(var(--u) * .45); border-radius: 3px; background: var(--c-card-2); }
#control-tower .ct__baris--pilih { background: color-mix(in srgb, var(--accent) 28%, var(--c-card)); box-shadow: 0 0 0 1.5px var(--c-accent-fill); }
#control-tower .ct__dok-ikon { display: block; height: calc(var(--u) * 2.3); width: auto; margin-top: calc(var(--u) * .45); overflow: visible; }
#control-tower .ct__ik { fill: none; stroke: var(--c-fg-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#control-tower .ct__ik--isi { stroke: var(--c-accent-fill); stroke-width: 2.2; }
#control-tower[data-state="2"] .ct__jejak::before { transform: none; transition-delay: .45s; }
#control-tower[data-state="2"] .ct__batch { opacity: 1; transform: none; transition-delay: .6s; }
#control-tower[data-state="2"] .ct__dok { opacity: 1; transform: none; transition-delay: .95s; }

/* ── Titik selisih: jatuh dari sambungan ke wadah (posisi px dari JS: --x0/--y0 → --x1/--y1, Exception → --x2/--y2) ── */
#control-tower .ct__titik { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#control-tower .ct__titik i {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--c-fg-2); opacity: 0; transform: translate(var(--x0), var(--y0));
  transition: transform .9s cubic-bezier(.55, 0, .8, .4), opacity .2s;
}
#control-tower .ct__titik.is-diam i { transition: none !important; }
#control-tower[data-state="1"] .ct__titik i, #control-tower[data-state="2"] .ct__titik i { opacity: 1; transform: translate(var(--x1), var(--y1)); }
#control-tower[data-state="1"] .ct__titik i { transition-delay: var(--t); }
#control-tower[data-state="2"] .ct__titik i:not(.ct__titik--ex) { opacity: .35; }
#control-tower .ct__titik .ct__titik--ex { background: var(--c-alert); }
#control-tower[data-state="1"] .ct__titik .ct__titik--ex { transform: translate(var(--x2), var(--y2)); animation: ct-ex 2.1s var(--ease) .25s both; }
#control-tower[data-state="2"] .ct__titik .ct__titik--ex { transform: translate(var(--x2), var(--y2)); opacity: 0; }
@keyframes ct-ex {
  0% { transform: translate(var(--x0), var(--y0)); opacity: 0; }
  8% { opacity: 1; }
  40%, 58% { transform: translate(var(--x1), var(--y1)); opacity: 1; }
  100% { transform: translate(var(--x2), var(--y2)); opacity: 1; }
}

/* Mode statis: neraca tetap terlihat di atas wadah (keadaan s0 + s2) */
.is-static #control-tower .ct__titik i { transition: none; }
.is-static #control-tower .ct__bawah { height: auto; grid-template-rows: auto auto; row-gap: calc(var(--u) * 2); }
.is-static #control-tower .ct__neraca { grid-area: 1 / 1 / 2 / 3; opacity: 1; }
.is-static #control-tower .ct__wadah { grid-area: 2 / 1 / 3 / 2; }
.is-static #control-tower .ct__sisi { grid-area: 2 / 2 / 3 / 3; }
.is-static #control-tower .ct__titik i:not(.ct__titik--ex), .is-static #control-tower .ct__wadah li .ct__bak, .is-static #control-tower .ct__simpul .ct__tanda { opacity: 1; }

@media (max-width: 860px) {
  #control-tower .ct__panel { --ct-gap: 14px; }
  #control-tower .ct__rantai { flex-wrap: wrap; row-gap: 10px; }
  #control-tower .ct__simpul { flex: 1 1 30%; }
  #control-tower .ct__simpul::before, #control-tower .ct__simpul::after, #control-tower .ct__arus, #control-tower .ct__titik { display: none !important; }
  #control-tower .ct__bawah, .is-static #control-tower .ct__bawah { grid-template-columns: minmax(0, 1fr); }
  #control-tower .ct__neraca { display: none; }
  #control-tower .ct__wadah, .is-static #control-tower .ct__wadah { grid-area: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #control-tower .ct__sisi, .is-static #control-tower .ct__sisi { grid-area: auto; margin-top: 18px; }
  #control-tower .ct__panel { padding-bottom: 0; }
  #control-tower .ct__label { position: static; align-self: flex-start; }
}