/* ============================================================
   KAIRO KONSOL — TEMA
   Aturan tetap: efek hanya boleh ada kalau menyampaikan sesuatu.
   Denyut = sedang menunggu. Merah = bahaya. Nyala = angka penting.
   ============================================================ */
:root {
  --font: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-judul: 'Space Grotesk', system-ui, sans-serif;

  --bg:      #05060b;
  --kaca:    rgba(11, 17, 27, .82);
  --fg:      #c3cede;
  --terang:  #eef5ff;
  --redup:   #66748c;
  --line:    rgba(96, 124, 164, .22);

  --aksen:   #22e4ff;
  --baik:    #2bffb0;
  --netral:  #ffc857;
  --buruk:   #ff2e6b;
}

body { color: var(--fg); background: var(--bg); }

/* Latar markas: dinding komando yang sama dengan lobi, diburamkan
   kuat dan digelapkan. Inilah yang mengusir hitam kosong dan membuat
   konsol terasa berada DI DALAM markas, bukan di halaman terpisah. */
.latar-ruang {
  background: url('../aset/ruang/depan.jpg') center/cover no-repeat;
  /* .55, bukan .30. Aset dinding yang baru jauh lebih gelap dari yang
     lama, dan pada .30 latarnya jatuh jadi hitam pekat. */
  filter: blur(16px) brightness(.55) saturate(1.15);
  transform: scale(1.08);
}
.latar-tirai {
  background:
    radial-gradient(1100px 620px at 20% 0%, rgba(34,228,255,.10), transparent 62%),
    radial-gradient(900px 540px at 92% 12%, rgba(255,46,136,.08), transparent 62%),
    /* Diringankan supaya monitor yang bergerak di belakangnya tembus.
       Bagian bawah tetap pekat: di situ teks konsolnya berada. */
    linear-gradient(180deg, rgba(5,6,11,.56), rgba(5,6,11,.80) 55%, rgba(5,6,11,.91));
}
.pindai { opacity: .3;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }

/* bilah */
.bilah { border-bottom: 1px solid var(--line); color: var(--redup);
  background: linear-gradient(180deg, rgba(5,6,11,.6), transparent); }
.merek { color: var(--terang); }
.merek .ikon { color: var(--aksen); filter: drop-shadow(0 0 9px rgba(34,228,255,.65)); }
.bilah-pisah { opacity: .4; }
.titik-hidup { background: var(--baik); box-shadow: 0 0 10px var(--baik);
  animation: nadi 2.4s ease-in-out infinite; }
body.sibuk .titik-hidup { background: var(--aksen); box-shadow: 0 0 10px var(--aksen);
  animation-duration: .9s; }
@keyframes nadi { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.terang { color: var(--terang); }
.redup  { color: var(--redup); }
.echo   { color: var(--terang); }
.sigil  { color: var(--aksen); text-shadow: 0 0 10px rgba(34,228,255,.55); }
.besar-judul { color: var(--terang); text-shadow: 0 0 26px rgba(34,228,255,.22); }
.boot { color: var(--aksen); }
.boot-ok { color: var(--redup); }

/* pemisah bab */
.pemisah { color: var(--aksen); opacity: .85; }
.pemisah::after { background: linear-gradient(90deg,
  rgba(34,228,255,.35), transparent); }

/* proses */
.proses-titik { border-color: var(--line); }
.proses-label { color: var(--fg); }
.proses-label .ikon { color: var(--redup); }
.proses-status { color: var(--aksen); }
.proses:not(.ok):not(.gagal) .proses-status { animation: nadi 1.1s ease-in-out infinite; }
.proses.ok    .proses-status, .proses.ok .ikon { color: var(--baik); }
.proses.gagal .proses-status { color: var(--buruk); }

/* kotak kaca */
.kotak { background: var(--kaca); border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 38px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.035); }
.kotak::before, .kotak::after { border-color: var(--aksen-kotak, var(--aksen)); opacity: .65; }
.kotak-judul { color: var(--redup); }
.kotak-judul .ikon-judul { color: var(--aksen-kotak, var(--aksen)); }
.kotak-avatar { border: 2px solid var(--aksen-kotak, var(--aksen));
  box-shadow: 0 0 16px color-mix(in srgb, var(--aksen-kotak, var(--aksen)) 50%, transparent); }
.kotak-tanda { border: 1px solid currentColor; }
.kotak-data { border-bottom: 1px dashed rgba(96,124,164,.14); }
.kotak-data:last-child { border-bottom: none; }
.kotak-data .nilai { color: var(--terang); }
.catatan { color: var(--netral); opacity: .85; }

.muncul { animation: masuk .38s cubic-bezier(.22,.9,.28,1) both; }
@keyframes masuk { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } }

.v-baik { color: var(--baik); } .v-netral { color: var(--netral); }
.v-buruk { color: var(--buruk); } .v-kosong { color: var(--redup); }
.kotak.v-baik   { border-color: rgba(43,255,176,.35); }
.kotak.v-netral { border-color: rgba(255,200,87,.35); }
.kotak.v-buruk  { border-color: rgba(255,46,107,.42); }
.kotak.v-baik   > .kotak-judul .kotak-tanda { color: var(--baik); }
.kotak.v-netral > .kotak-judul .kotak-tanda { color: var(--netral); }
.kotak.v-buruk  > .kotak-judul .kotak-tanda { color: var(--buruk); }
.kotak.v-kosong > .kotak-judul .kotak-tanda { color: var(--redup); }
.kotak-data.v-baik   .nilai { color: var(--baik); }
.kotak-data.v-netral .nilai { color: var(--netral); }
.kotak-data.v-buruk  .nilai { color: var(--buruk); text-shadow: 0 0 12px rgba(255,46,107,.35); }
.kotak-data.v-kosong .nilai { color: var(--redup); }
.kotak-token { border-color: rgba(34,228,255,.4); }
.kotak-token > .kotak-judul { color: var(--aksen); }

/* gauge */
.gauge-rel { stroke: rgba(96,124,164,.18); }
.gauge-tengah b { color: var(--terang); }
.gauge-tengah span { color: var(--redup); }
.g-baik   .gauge-isi { stroke: var(--baik);   filter: drop-shadow(0 0 8px rgba(43,255,176,.55)); }
.g-baik   .gauge-tengah b { color: var(--baik); }
.g-netral .gauge-isi { stroke: var(--netral); filter: drop-shadow(0 0 8px rgba(255,200,87,.55)); }
.g-netral .gauge-tengah b { color: var(--netral); }
.g-buruk  .gauge-isi { stroke: var(--buruk);  filter: drop-shadow(0 0 8px rgba(255,46,107,.55)); }
.g-buruk  .gauge-tengah b { color: var(--buruk); }
.kotak-vonis { border-color: rgba(34,228,255,.45); }

/* pertentangan — inti alatnya, paling tegas */
.kotak-tentang { border-color: var(--buruk); background: rgba(255,46,107,.07); }
.kotak-tentang::before, .kotak-tentang::after { border-color: var(--buruk); opacity: 1; }
.kotak-tentang > .kotak-judul { color: var(--buruk); letter-spacing: .22em;
  text-shadow: 0 0 14px rgba(255,46,107,.4); }
.kotak-tentang > .kotak-judul .ikon-judul { color: var(--buruk);
  animation: nadi 1.6s ease-in-out infinite; }

/* ---------- rel operator ---------- */
.rel-judul { color: var(--redup); }
.rel-kartu { background: var(--kaca); border: 1px solid var(--line);
  backdrop-filter: blur(10px); }
.rel-kartu img { border: 2px solid var(--line); }
.rel-nama b { color: var(--redup); }
.rel-nama span { color: var(--redup); opacity: .7; }
.rel-sumber { color: var(--redup); opacity: .65; }
.rel-status { color: var(--redup); }
.rel-bar { background: rgba(96,124,164,.14); }
.rel-bar i { background: var(--op); box-shadow: 0 0 10px var(--op); }

/* Kartu menyala mengikuti keadaan — inilah yang membuat rel terasa
   hidup, bukan sekadar daftar nama. */
.rel-kartu[data-status="siaga"] .rel-bar i { width: 12%; opacity: .5; }
.rel-kartu[data-status="siaga"] .rel-nama b { color: var(--fg); }
.rel-kartu[data-status="siaga"] img { border-color: color-mix(in srgb, var(--op) 45%, transparent); }

.rel-kartu[data-status="kerja"] { border-color: color-mix(in srgb, var(--op) 55%, transparent);
  transform: translateX(-3px); }
.rel-kartu[data-status="kerja"] img { border-color: var(--op);
  box-shadow: 0 0 16px color-mix(in srgb, var(--op) 55%, transparent); }
.rel-kartu[data-status="kerja"] .rel-nama b { color: var(--op); }
.rel-kartu[data-status="kerja"] .rel-status { color: var(--op); animation: nadi 1s ease-in-out infinite; }
.rel-kartu[data-status="kerja"] .rel-bar i { width: 100%;
  animation: geser 1.1s ease-in-out infinite; }
@keyframes geser { 0% { width: 8%; margin-left: 0 } 50% { width: 55%; margin-left: 45% }
  100% { width: 8%; margin-left: 92% } }

.rel-kartu[data-status="ok"] { border-color: color-mix(in srgb, var(--op) 45%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--op) 14%, transparent); }
.rel-kartu[data-status="ok"] img { border-color: var(--op);
  box-shadow: 0 0 14px color-mix(in srgb, var(--op) 45%, transparent); }
.rel-kartu[data-status="ok"] .rel-nama b { color: var(--op); }
.rel-kartu[data-status="ok"] .rel-bar i { width: 100%; }
.rel-kartu[data-status="ok"] .rel-status { color: var(--op); }

.rel-kartu[data-status="gagal"] { border-color: rgba(255,46,107,.45); }
.rel-kartu[data-status="gagal"] .rel-status { color: var(--buruk); }
.rel-kartu[data-status="gagal"] .rel-bar i { width: 100%;
  background: var(--buruk); box-shadow: 0 0 10px var(--buruk); }

/* Vonis akhir mewarnai kartu — sekali lihat rel, sudah tahu hasilnya. */
.rel-kartu[data-vonis="buruk"] .rel-status { color: var(--buruk); }
.rel-kartu[data-vonis="buruk"] { border-color: rgba(255,46,107,.5); }
.rel-kartu[data-vonis="netral"] .rel-status { color: var(--netral); }

/* prompt */
.prompt { background: var(--kaca); border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  transition: border-color .2s, box-shadow .2s; }
.prompt:focus-within { border-color: rgba(34,228,255,.55);
  box-shadow: 0 0 0 1px rgba(34,228,255,.22), 0 0 34px rgba(34,228,255,.14); }
.prompt input { color: var(--terang); caret-color: var(--aksen); }
.prompt input::placeholder { color: var(--redup); }
.prompt-kirim { background: var(--aksen); color: #04121a;
  box-shadow: 0 0 16px rgba(34,228,255,.4); }
.prompt-kirim:hover { filter: brightness(1.15); }
body.sibuk .prompt-kirim { opacity: .45; }

.layar, .rel-op { scrollbar-color: rgba(96,124,164,.35) transparent; }

@media (prefers-reduced-motion: reduce) {
  .muncul { animation: none; }
  .titik-hidup, .rel-bar i, .rel-status, .proses-status { animation: none !important; }
}

/* tombol salin alamat */
.tombol-salin { background: transparent; color: var(--aksen);
  border: 1px solid rgba(34,228,255,.4); transition: background .15s, color .15s; }
.tombol-salin:hover { background: rgba(34,228,255,.14); color: var(--terang); }
.mono-ca { color: var(--terang); }

/* ============================================================
   EFEK KONSOL
   Semua di bawah ini murni CSS dan digerakkan oleh dua hal saja:
   atribut data-status pada kartu operator, dan dua kelas di <body>
   (.boot saat konsol dibuka, .sibuk selama pemindaian).
   ============================================================ */

/* --- latar monitor hidup ---
   Kanvasnya cuma 400x225 lalu diregangkan. Peregangan itu sendiri sudah
   memburamkan, jadi blur-nya cukup tipis dan murah. */
.latar-monitor {
  position: fixed; inset: -3%;
  width: 106%; height: 106%;
  z-index: 0;
  filter: blur(9px) saturate(1.25);
  opacity: .52;
  pointer-events: none;
}
.latar-ruang { opacity: .55; }

/* --- urutan menyala saat konsol dibuka --- */
@keyframes konsol-sapu {
  from { transform: translateY(-100%); opacity: 0; }
  25%  { opacity: 1; }
  to   { transform: translateY(100vh); opacity: 0; }
}
body.boot::after {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 22vh;
  z-index: 45; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(34,228,255,.16), transparent);
  animation: konsol-sapu 1.1s ease-out both;
}
@keyframes kartu-masuk {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
body.boot .rel-kartu { animation: kartu-masuk .5s ease-out both; }
body.boot .rel-kartu:nth-child(2) { animation-delay: .10s; }
body.boot .rel-kartu:nth-child(3) { animation-delay: .20s; }
body.boot .rel-kartu:nth-child(4) { animation-delay: .30s; }
body.boot .rel-kartu:nth-child(5) { animation-delay: .40s; }
@keyframes layar-masuk { from { opacity: 0; filter: brightness(2.4); } to { opacity: 1; } }
body.boot .layar { animation: layar-masuk .7s ease-out both; }

/* --- sapuan radar di bilah atas, hanya saat memindai --- */
.titik-hidup { position: relative; }
body.sibuk .titik-hidup::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg,
              color-mix(in srgb, var(--aksen) 70%, transparent) 45deg, transparent 90deg);
  animation: radar 1.15s linear infinite;
}
@keyframes radar { to { transform: rotate(360deg); } }
body.sibuk #status-sistem { animation: kedip-status 1.15s ease-in-out infinite; }
@keyframes kedip-status { 50% { opacity: .45; } }

/* --- kartu operator sedang bekerja ---
   Cincin sapuan mengelilingi avatar. Dipasang pada pembungkusnya, bukan
   pada <img>, supaya foto tidak ikut berputar. */
.rel-atas { position: relative; }
.rel-kartu[data-status="kerja"] .rel-atas::before {
  content: ''; position: absolute; left: -3px; top: -3px;
  width: 46px; height: 46px;   /* avatar 40px + 3px tiap sisi */
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg,
              var(--op) 70deg, transparent 140deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
          mask: radial-gradient(circle, transparent 58%, #000 60%);
  animation: radar .9s linear infinite;
  pointer-events: none;
}
/* Bilah tak tentu: kita tidak tahu berapa lama sumbernya menjawab,
   jadi yang bergerak potongan pendek yang menyeberang, bukan isi 0-100%. */
.rel-kartu[data-status="kerja"] .rel-bar i {
  width: 34% !important;
  animation: bar-lalu 1.05s ease-in-out infinite;
}
@keyframes bar-lalu {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}
.rel-kartu[data-status="kerja"] .rel-status { animation: kedip-status 1.05s ease-in-out infinite; }

/* --- laporan masuk: satu kilatan warna operator --- */
@keyframes kartu-lapor {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--op) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.rel-kartu[data-status="ok"] { animation: kartu-lapor .75s ease-out; }

/* --- sumber mati: getar pendek, sekali --- */
@keyframes kartu-gagal {
  0%,100% { transform: none; }
  20% { transform: translateX(-3px); } 40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); } 80% { transform: translateX(2px); }
}
.rel-kartu[data-status="gagal"] { animation: kartu-gagal .38s ease-in-out; }

/* --- garis pertentangan ---
   Inti produknya: memperlihatkan SIAPA yang berselisih dengan siapa,
   bukan cuma menceritakannya di paragraf. */
.konflik-lapis {
  position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none; z-index: 3;
}
/* Jalur kosong selebar 16px di tepi kiri rel, tempat kurung siku
   pertentangan digambar. Tanpa ini garisnya menimpa isi kartu. */
.rel-op { padding-left: 16px; }
.rel-judul { margin-left: -16px; }
.konflik-garis {
  fill: none; stroke: var(--buruk); stroke-width: 1.6;
  stroke-dasharray: 5 4;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--buruk) 60%, transparent));
  animation: konflik-tarik .55s ease-out both, konflik-jalan 1.1s linear infinite .55s;
}
@keyframes konflik-tarik { from { opacity: 0; stroke-dashoffset: 40; } to { opacity: .95; } }
@keyframes konflik-jalan { to { stroke-dashoffset: -18; } }
.konflik-simpul {
  fill: var(--buruk);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--buruk) 70%, transparent));
  animation: simpul-denyut 1.3s ease-in-out infinite;
}
@keyframes simpul-denyut { 50% { opacity: .35; r: 2.4; } }

/* Kartu yang terlibat pertentangan ikut ditandai — garis saja mudah
   terlewat kalau matanya sedang di kolom teks. */
.rel-kartu.bentrok {
  border-color: color-mix(in srgb, var(--buruk) 55%, transparent);
  animation: bentrok-denyut 1.9s ease-in-out infinite;
}
@keyframes bentrok-denyut {
  50% { box-shadow: 0 0 14px color-mix(in srgb, var(--buruk) 26%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .latar-monitor, body.boot::after { animation: none; }
  .rel-kartu, .rel-bar i, .konflik-garis, .konflik-simpul,
  .titik-hidup::after, #status-sistem { animation: none !important; }
}