/* NecroVM · mockup meja otopsi.
   Kontras terukur (WCAG, teks di latar):
   terang #F4F1EA · tinta #141413 16.34, redup #5A574E 6.40, hijau #14663F 6.20, merah #8A3B2E 6.78
   gelap #1B1B18 · tinta #F2EFE6 15.01, redup #B3AFA1 7.86, hijau #63BC8C 7.48, merah #D08A7A 6.25
   terminal #141413 · merah #D08A7A 6.67
   tag manila #E6D9B8 · tinta #141413 13.15, stempel hijau #14663F 4.99
   aplikasi 2014 #FFFFFF · teks #333333 12.63, tautan #337AB7 4.56, meta #666666 5.74
   Garis pemindai #1B8A5A hanya hiasan, bukan teks. */

:root {
  --kertas: #F4F1EA;
  --tinta: #141413;
  --redup: #5A574E;
  --garis: #D8D2C4;
  --hijau: #14663F;
  --merah: #8A3B2E;
  --pindai: #1B8A5A;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kertas: #1B1B18;
    --tinta: #F2EFE6;
    --redup: #B3AFA1;
    --garis: #3A3A34;
    --hijau: #63BC8C;
    --merah: #D08A7A;
    --pindai: #1B8A5A;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.lembar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.mono {
  font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

code {
  font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
}

h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}

h3 {
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.kepala {
  position: relative;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--garis);
}

.kepala-baris {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.kepala-kanan {
  flex-shrink: 0;
  text-align: right;
}

.merek {
  margin: 0 0 8px;
  color: var(--redup);
  font-size: 14px;
}

.meta {
  margin: 0;
  color: var(--redup);
  font-size: 14px;
}

.status {
  display: none;
  margin: 12px 0 0;
  color: var(--hijau);
  font-weight: 500;
}

.status.gagal {
  color: var(--merah);
}

html[data-keadaan="mati"] .status[data-untuk="mati"],
html[data-keadaan="bangkit"] .status[data-untuk="bangkit"],
html[data-keadaan="sertifikat"] .status[data-untuk="sertifikat"] {
  display: block;
}

/* Label jenazah: benda kertas manila, miring 2 derajat, lubang
   bermata logam + seutas tali. Bayangan netral lembut karena ini benda. */
.tag {
  position: relative;
  margin: 4px 0 0;
  padding: 12px 16px 12px 44px;
  background: #E6D9B8;
  border: 1px solid #C9B98F;
  border-radius: 4px;
  box-shadow: 2px 4px 8px rgba(20, 20, 19, 0.18);
  transform: rotate(-2deg);
}

.tag-tali {
  position: absolute;
  top: -24px;
  left: 19px;
  width: 2px;
  height: 32px;
  background: #A68B5B;
  transform: rotate(24deg);
  transform-origin: bottom center;
}

.tag-lubang {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #8F8F86;
  background: var(--kertas);
}

.tag-isi {
  margin: 0;
  color: #141413;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.stempel {
  display: none;
  position: absolute;
  right: 8px;
  bottom: 4px;
  margin: 0;
  color: #14663F;
  font-size: 14px;
  font-weight: 500;
  transform: rotate(-8deg);
}

.stempel::after {
  content: "HIDUP KEMBALI 6 Nov 2026";
  position: absolute;
  left: 1px;
  top: 1px;
  opacity: 0.35;
}

html[data-keadaan="sertifikat"] .stempel {
  display: block;
}

.kartu-otopsi {
  padding: 12px 0;
  border-bottom: 1px solid var(--garis);
}

.fakta {
  margin: 0;
}

.fakta div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  padding: 4px 0;
  border-top: 1px solid var(--garis);
}

.fakta div > * {
  min-width: 0;
}

.fakta dt {
  margin: 0;
  color: var(--redup);
  font-size: 14px;
}

.fakta dd {
  margin: 0;
}

.langkah {
  margin: 0;
  padding: 0 0 0 24px;
}

.langkah li {
  margin: 0 0 4px;
  padding: 0;
}

/* Monitor detak: garis statis SVG di atas kedua panel. */
.detak {
  padding: 12px 0;
  border-bottom: 1px solid var(--garis);
}

.detak-svg {
  display: block;
  width: 100%;
  height: 64px;
}

.detak-kisi {
  fill: none;
  stroke: var(--garis);
  stroke-width: 1;
  opacity: 0.6;
}

.detak-garis-mati {
  fill: none;
  stroke: var(--redup);
  stroke-width: 2;
}

.detak-garis-hidup {
  fill: none;
  stroke: var(--pindai);
  stroke-width: 2;
}

.detak-hidup {
  display: none;
}

html[data-keadaan="bangkit"] .detak-mati,
html[data-keadaan="sertifikat"] .detak-mati {
  display: none;
}

html[data-keadaan="bangkit"] .detak-hidup,
html[data-keadaan="sertifikat"] .detak-hidup {
  display: block;
}

.detak-label {
  margin: 8px 0 0;
  color: var(--redup);
  font-size: 14px;
}

.detak-label-hidup {
  display: none;
  color: var(--hijau);
  font-weight: 500;
}

html[data-keadaan="bangkit"] .detak-label-hidup,
html[data-keadaan="sertifikat"] .detak-label-hidup {
  display: inline;
}

html[data-keadaan="bangkit"] .detak-label-mati,
html[data-keadaan="sertifikat"] .detak-label-mati {
  display: none;
}

.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--garis);
}

html[data-keadaan="bangkit"] .panel,
html[data-keadaan="sertifikat"] .panel {
  grid-template-columns: 5fr 7fr;
}

.panel-kiri,
.panel-kanan {
  min-width: 0;
}

.tangkapan {
  margin: 0 0 16px;
}

.tangkapan svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--garis);
}

.tangkapan figcaption {
  margin: 8px 0 0;
  color: var(--redup);
  font-size: 14px;
}

.console {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--garis);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre;
}

.arsip {
  margin: 16px 0 0;
  padding: 12px;
  border: 1px solid var(--garis);
}

.arsip h3 {
  margin: 0 0 8px;
}

.arsip-kepala {
  margin: 0 0 8px;
  color: var(--redup);
  font-size: 14px;
}

.arsip-tanda {
  float: right;
  color: var(--redup);
}

.arsip-isi {
  margin: 0 0 8px;
  padding: 12px;
  border: 1px solid var(--garis);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

.arsip-catatan {
  margin: 0;
  color: var(--redup);
  font-size: 14px;
}

.status-hidup {
  display: none;
  margin: 0 0 8px;
  color: var(--hijau);
  font-weight: 500;
}

html[data-keadaan="bangkit"] .status-hidup,
html[data-keadaan="sertifikat"] .status-hidup {
  display: block;
}

.bingkai {
  position: relative;
  height: 360px;
  border: 1px solid var(--garis);
  overflow: hidden;
}

html[data-keadaan="bangkit"] .panel-kanan .bingkai,
html[data-keadaan="sertifikat"] .panel-kanan .bingkai {
  border: 1px solid var(--pindai);
}

.bingkai iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

.belum {
  display: none;
  margin: 0;
  padding: 16px;
  color: var(--redup);
}

html[data-keadaan="mati"] .belum {
  display: block;
}

html[data-keadaan="mati"] .bingkai iframe {
  display: none;
}

.catatan {
  margin: 8px 0 0;
  color: var(--redup);
  font-size: 14px;
}

.pindai {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: none;
  height: 2px;
  background: var(--pindai);
}

html[data-keadaan="bangkit"] .pindai {
  display: block;
  animation: pindai 800ms linear 1;
}

@keyframes pindai {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(360px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-keadaan="bangkit"] .pindai {
    display: none;
    animation: none;
  }
}

html[data-keadaan="bangkit"][data-bingkai="pemindai"] .pindai {
  display: block;
  animation: none;
  top: 50%;
}

.sertifikat {
  display: none;
  padding: 16px 0;
  border-bottom: 1px solid var(--garis);
}

html[data-keadaan="sertifikat"] .sertifikat {
  display: block;
}

.sidik {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.pita-log {
  padding: 16px 0 0;
}

.log {
  margin: 0;
  padding: 0;
  list-style: none;
}

.log li {
  padding: 8px 0;
  border-top: 1px solid var(--garis);
  font-size: 14px;
}

.log li span {
  color: var(--redup);
  margin: 0 8px 0 0;
}

@media (max-width: 720px) {
  .lembar {
    padding: 16px;
  }

  .kepala-baris {
    flex-direction: column;
    gap: 16px;
  }

  .kepala-kanan {
    text-align: left;
  }

  .panel,
  html[data-keadaan="bangkit"] .panel,
  html[data-keadaan="sertifikat"] .panel {
    grid-template-columns: 1fr;
  }

  .fakta div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .console {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: visible;
  }

  .arsip-isi {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: visible;
  }
}

/* QC Jinx 6 Nov: tangkapan terminal sebagai teks asli, bukan SVG yang
   mengecil bersama panel (sempat ~7px di 390). Ukuran tetap 14px,
   baris panjang digulir mendatar di dalam blok. */
.terminal {
  max-width: 100%;
  min-width: 0;
  background: #141413;
  border: 1px solid var(--garis);
}
.terminal-kepala {
  padding: 8px 16px;
  background: #242422;
  color: #F2EFE6;
  font-size: 14px;
}
.terminal-isi {
  margin: 0;
  padding: 16px;
  color: #F2EFE6;
  font-size: 14px;
  line-height: 2;
  white-space: pre;
  overflow-x: auto;
}
.terminal-gagal {
  color: #D08A7A;
}
.panel-kiri {
  min-width: 0;
}

/* QC Jinx 6 Nov: nomor log satu kolom tetap; baris yang patah di 390 tetap lurus dengan teksnya. */
.log li {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  column-gap: 8px;
  overflow-wrap: anywhere;
}
.log li span {
  margin: 0;
}

/* QC Jinx 6 Nov (sebelum dikirim ke Jon). */
/* 1) Stempel: satu lapis tinta, di ruang kosong di bawah isi tag, terbaca. */
.stempel::after { content: none; }
html[data-keadaan="sertifikat"] .tag { padding-bottom: 44px; }
.stempel {
  right: auto;
  left: 44px;
  bottom: 12px;
  padding: 4px 8px;
  border: 1.5px solid #14663F;
  border-radius: 2px;
  letter-spacing: 0;
  white-space: nowrap;
  transform: rotate(-4deg);
}
/* 2) Konsol + arsip membungkus di semua lebar, tidak terpotong. */
.console, .arsip-isi {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: visible;
}
/* 4) Status di kolom kiri, rapat dengan meta. */
.kepala-baris .status { margin: 16px 0 0; }

/* Mode putar B4: halaman diputar sebagai satu sesi terminal. */
.kontrol {
  display: none;
  margin: 0 0 8px;
  text-align: right;
}

html.mode-putar .kontrol {
  display: block;
}

.kontrol-tombol {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--redup);
  font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  cursor: pointer;
}

.kontrol-tombol:hover,
.kontrol-tombol:focus-visible {
  text-decoration: underline;
}

.kontrol-pemisah {
  color: var(--redup);
}

/* Teks penuh untuk pembaca layar; salinan ketik disembunyikan. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Kursor blok padat di ujung teks yang diketik. */
.kursor {
  color: inherit;
}

/* Stempel jaringan di log: muncul sesudah jeda, bukan diketik. */
html.mode-putar .log-cap {
  visibility: hidden;
}

html.mode-putar .log-cap.tampil {
  visibility: visible;
}

/* Status disembunyikan sampai langkah wafat di mode putar. */
html.mode-putar:not(.status-tampil) .status {
  display: none;
}

/* Stempel hidup kembali: dicap sekali, skala 1.08 ke 1 dalam 150 ms. */
html.mode-putar .stempel {
  opacity: 0;
  transform: rotate(-4deg) scale(1.08);
  transition: transform 150ms ease-out, opacity 150ms ease-out;
}

html.mode-putar .stempel.dicap {
  opacity: 1;
  transform: rotate(-4deg) scale(1);
}

/* Bingkai aplikasi tersembunyi sampai sapuan pemindai selesai. */
html.mode-putar[data-keadaan="bangkit"]:not(.aplikasi-tampil) .bingkai iframe {
  visibility: hidden;
}

/* Monitor detak progresif: garis digambar ulang lewat JS. */
.detak-putar {
  display: none;
}

html.mode-putar .detak-putar {
  display: block;
}

html.mode-putar .detak-mati,
html.mode-putar .detak-hidup {
  display: none;
}

html.mode-putar.putar-selesai .detak-putar {
  display: none;
}

html.mode-putar.putar-selesai[data-keadaan="sertifikat"] .detak-hidup {
  display: block;
}

.detak-garis-putar {
  fill: none;
  stroke: var(--redup);
  stroke-width: 2;
}

.detak-garis-putar.hidup {
  stroke: var(--pindai);
}

html.mode-putar .detak.denyut-lengkap .detak-label-hidup {
  display: inline;
}

html.mode-putar .detak.denyut-lengkap .detak-label-mati {
  display: none;
}

/* QC Jinx 7 Nov: selama putar, tag tidak melar sebelum stempel benar-benar dicap. */
html.mode-putar[data-keadaan="sertifikat"] .tag:not(:has(.stempel.dicap)) { padding-bottom: 12px; }

/* QC Jinx 7 Nov: grid nomor|teks memindahkan kursor ketik ke baris baru (kursor jadi sel grid).
   Ganti indentasi gantung: kursor tetap sebaris, sambungan baris tetap lurus dengan teks. */
.log li {
  display: block;
  padding-left: calc(2ch + 8px);
  text-indent: calc(-2ch - 8px);
}
.log li > span:first-child {
  display: inline-block;
  width: 2ch;
  margin: 0 8px 0 0;
  text-indent: 0;
}

/* Tambahan aplikasi data-driven (di luar salinan mockup B4). */
.muat {
  margin: 16px 0;
  font-size: 14px;
  color: var(--redup);
}

.muat.galat {
  color: var(--merah);
}

.catatan-contoh {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--redup);
}

.arsip .fakta {
  margin: 0 0 8px;
}

.arsip .fakta div {
  margin-bottom: 8px;
}

/* QC Jinx 7 Nov: path file panjang di kartu Jejak AST tidak boleh melebarkan halaman 390. */
.arsip .fakta div { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 721px) { .arsip .fakta div { grid-template-columns: 176px minmax(0, 1fr); } }
.arsip .fakta dt, .arsip .fakta dd { min-width: 0; overflow-wrap: anywhere; }

/* QC Jinx 7 Nov: baris terminal panjang membungkus seperti terminal asli, tidak terpotong di kanan. */
.terminal-isi { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }

/* Pop-up pilih bahasa: slip kertas formulir kamar jenazah di tengah,
   lapisan belakang netral gelap transparan. Muncul sekali, opacity 150 ms. */
.bahasa-lapisan {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.bahasa-lapisan[hidden] {
  display: none;
}

.bahasa-lapisan.tampil {
  opacity: 1;
}

.bahasa-slip {
  width: 100%;
  max-width: 560px;
  padding: 24px;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 4px;
}

.bahasa-kepala {
  margin: 0 0 16px;
  color: var(--redup);
  font-size: 14px;
}

.bahasa-pilihan-baris {
  display: flex;
  gap: 12px;
}

.bahasa-pilihan {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--garis);
  border-radius: 4px;
  background: none;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}

.bahasa-pilihan:hover,
.bahasa-pilihan:focus-visible {
  border-color: var(--tinta);
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.bahasa-nama {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}

.bahasa-sub {
  display: block;
  margin: 8px 0 0;
  color: var(--redup);
  font-size: 14px;
}

/* Saklar bahasa di kontrol: yang aktif bertinta penuh. */
.saklar-bahasa {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.saklar-pilihan.aktif {
  color: var(--tinta);
  font-weight: 500;
}

@media (max-width: 720px) {
  .bahasa-pilihan-baris {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bahasa-lapisan {
    transition: none;
  }
}