/* 04 · #command-center (milik S1). Semua pemilih diawali #command-center atau .cc__ ; warna hanya dari token base.css */

#command-center .cc__panel { justify-content: center; }
#command-center .cc__tumpuk { display: grid; width: 100%; }
#command-center .cc__panggung { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
/* Profil di atas tangkapan fokus seutuhnya (termasuk anotasinya) */
#command-center .cc__panggung--profil { z-index: 5; }
#command-center .cc__atas { position: relative; height: calc(var(--u) * 3); flex: none; }
#command-center .cc__bingkai { position: relative; aspect-ratio: 16 / 10; }
#command-center .cc__layar { position: absolute; inset: 0; }
#command-center .cc__layar img { width: 100%; height: 100%; object-fit: cover; }
#command-center .cc__kaki { margin: calc(var(--u) * .7) 0 0; }

/* Transisi dari #lapisan: tangkapan membesar dari lempeng Command Center (padanan statis: langsung tampil) */
#command-center .cc__tumpuk { transition: transform .8s var(--ease), opacity .6s var(--ease); }
html:not(.is-static) #command-center:not(.is-active) .cc__tumpuk { transform: scale(.9) translateY(calc(var(--u) * 2)); opacity: .2; }

/* Lapisan SVG (scrim berlubang, kotak sorot, garis tunjuk), dibangun JS dalam koordinat 1600 × 1000 */
#command-center .cc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
#command-center .cc__scrim { fill: var(--bg-primary); opacity: 0; transition: opacity .5s var(--ease); }
#command-center .cc__kotak { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s var(--ease), stroke-width .2s; pointer-events: all; }
#command-center .cc__tunjuk { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s var(--ease); }
#command-center .cc__ujung { fill: var(--accent); opacity: 0; transition: opacity .4s var(--ease); }
#command-center .cc__kotak.is-on, #command-center .cc__tunjuk.is-on, #command-center .cc__ujung.is-on { opacity: 1; }
#command-center .cc__scrim.is-on { opacity: .42; }

/* Anotasi: teks HTML; posisi --x/--y pecahan bingkai */
#command-center .cc__catat {
  position: absolute; z-index: 3; margin: 0; max-width: 30%;
  padding: .32em .7em; border-radius: 6px; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
  color: var(--text-primary); font-size: var(--fs-label); font-weight: 600; line-height: 1.3; text-wrap: balance;
  opacity: 0; transition: opacity .4s var(--ease), transform .45s var(--ease), border-color .2s, background .2s;
}
#command-center .cc__catat.is-on { opacity: 1; }
#command-center .cc__catat--atas { left: var(--x); bottom: calc(var(--u) * .9); max-width: none; white-space: nowrap; transform: translate(-50%, 6px); }
#command-center .cc__catat--atas.is-on { transform: translate(-50%, 0); }
#command-center .cc__catat--atas::after { content: ''; position: absolute; left: 50%; top: 100%; height: calc(var(--u) * .9 + 1px); border-left: 1.5px solid var(--accent); }
#command-center .cc__catat--bawah { left: var(--x); top: var(--y); transform: translate(-50%, 6px); white-space: nowrap; max-width: none; }
#command-center .cc__catat--bawah.is-on { transform: translate(-50%, 0); }
#command-center .cc__catat--kiri { right: calc(100% - var(--x)); top: var(--y); transform: translate(-6px, -50%); }
#command-center .cc__catat--kiri.is-on { transform: translate(0, -50%); }
#command-center .cc__catat span { color: var(--accent); }

/* Interaksi ringan: arahkan tetikus ke anotasi atau kotak → bagiannya menonjol */
#command-center .cc__catat:hover, #command-center .cc__catat.is-tunjuk { background: color-mix(in srgb, var(--accent) 22%, var(--bg-primary)); }
#command-center .cc__kotak.is-tunjuk { stroke-width: 3.5; }

/* s1: profil Bangka Tengah. Gambar diperbesar 2× ke kartu profil (titik tetap pembesaran = sudut kiri atas wilayah potong) */
#command-center .cc__layar--zoom img { position: absolute; left: -36%; top: -35%; width: 200%; height: 200%; max-width: none; transform: scale(.97); transform-origin: 36% 35%; transition: transform .5s var(--ease); }
/* Mulai hampir di skala akhir (bukan .5 = tangkapan utuh): baris bawah popup (Darat/laut, Cadangan … ton Sn, tanpa ID register) tidak pernah masuk bingkai */
#command-center .cc__panggung--profil { opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
#command-center[data-state="1"] .cc__panggung--profil { opacity: 1; pointer-events: auto; transition-delay: .5s; }
#command-center[data-state="1"] .cc__layar--zoom img { transform: none; transition-delay: .7s; }
#command-center[data-state="1"] .cc__panggung--fokus .cc__kaki, #command-center[data-state="1"] .cc__panggung--fokus .cc__catat,
#command-center[data-state="1"] .cc__panggung--fokus .cc__svg { opacity: 0; }
#command-center .cc__panggung--fokus .cc__svg { transition: opacity .3s var(--ease); }
/* Sorotan profil berurutan setelah gambar membesar */
#command-center .cc__panggung--profil .cc__catat, #command-center .cc__panggung--profil .cc__kotak, #command-center .cc__panggung--profil .cc__tunjuk, #command-center .cc__panggung--profil .cc__ujung, #command-center .cc__panggung--profil .cc__scrim { opacity: 0; }
#command-center[data-state="1"] .cc__panggung--profil .cc__scrim { opacity: .42; transition-delay: 1.1s; }
#command-center[data-state="1"] .cc__panggung--profil [data-b="1"], #command-center[data-state="1"] .cc__panggung--profil .cc__b1 { opacity: 1; transition-delay: 1.15s; }
#command-center[data-state="1"] .cc__panggung--profil [data-b="2"], #command-center[data-state="1"] .cc__panggung--profil .cc__b2 { opacity: 1; transition-delay: 1.25s; }
#command-center[data-state="1"] .cc__panggung--profil [data-b="3"], #command-center[data-state="1"] .cc__panggung--profil .cc__b3 { opacity: 1; transition-delay: 1.35s; }
#command-center[data-state="1"] .cc__panggung--profil .cc__catat--kiri { transform: translate(0, -50%); }

/* Kursor animasi: bergerak ke Bangka Tengah, mengklik, lalu hilang (gerak dikurangi: langsung ke akhir, tersembunyi) */
#command-center .cc__kursor { position: absolute; z-index: 4; left: 78%; top: 86%; width: calc(var(--u) * 1.5); opacity: 0; pointer-events: none; }
#command-center .cc__kursor svg { display: block; width: 100%; height: auto; overflow: visible; }
#command-center .cc__kursor path { fill: var(--text-primary); stroke: var(--bg-primary); stroke-width: 1.4; stroke-linejoin: round; }
#command-center .cc__kursor::after {
  content: ''; position: absolute; left: 0; top: 0; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4);
  margin: calc(var(--u) * -1.2) 0 0 calc(var(--u) * -1.2); border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(.3);
}
html:not(.is-static) #command-center.is-active[data-state="1"] .cc__kursor { animation: cc-kursor 1s var(--ease) both; }
html:not(.is-static) #command-center.is-active[data-state="1"] .cc__kursor::after { animation: cc-klik .45s ease-out .42s both; }
@keyframes cc-kursor {
  0% { left: 78%; top: 86%; opacity: 0; }
  12% { opacity: 1; }
  45% { left: 35.5%; top: 54.5%; opacity: 1; }
  80% { left: 35.5%; top: 54.5%; opacity: 1; }
  100% { left: 35.5%; top: 54.5%; opacity: 0; }
}
@keyframes cc-klik { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }

/* Mode statis: dua tangkapan bertumpuk, semua anotasi tampil */
.is-static #command-center .cc__tumpuk { gap: calc(var(--u) * 2.4); }
.is-static #command-center .cc__panggung { grid-area: auto; }
.is-static #command-center .cc__panggung--profil { opacity: 1; }
.is-static #command-center .cc__panggung--profil .cc__atas { height: 0; }
.is-static #command-center .cc__panggung--fokus .cc__kaki, .is-static #command-center .cc__panggung--fokus .cc__catat,
.is-static #command-center .cc__panggung--fokus .cc__svg { opacity: 1; }
.is-static #command-center .cc__kursor { display: none; }
.is-static #command-center .cc__panggung--profil, .is-static #command-center .cc__panggung--profil * { transition: none !important; }

/* Layar sempit (mode baca): anotasi menjadi daftar di bawah gambar; kotak dan garis tunjuk disembunyikan */
@media (max-width: 860px) {
  #command-center .cc__atas { height: auto; margin-bottom: 8px; }
  #command-center .cc__panggung--profil .cc__atas { display: none; }
  #command-center .cc__bingkai { aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 8px; }
  #command-center .cc__layar { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; }
  #command-center .cc__svg { display: none; }
  #command-center .cc__catat, #command-center .cc__catat--atas, #command-center .cc__catat--bawah, #command-center .cc__catat--kiri,
  #command-center .cc__catat.is-on, #command-center .cc__catat--atas.is-on, #command-center .cc__catat--bawah.is-on, #command-center .cc__catat--kiri.is-on,
  #command-center[data-state="1"] .cc__panggung--profil .cc__catat--kiri {
    position: static; transform: none; max-width: none; white-space: normal; font-size: 14px;
  }
  #command-center .cc__catat--atas::after { display: none; }
  #command-center .cc__kursor { display: none; }
}