/* 10 · #kasus (milik S2, scene terang). Semua pemilih diawali #kasus atau .ks__ */

#kasus .swap > * { align-self: start; }

/* Narasi s0: penghitung merah (dugaan di luar WIUP) dan kalimat pengaman */
#kasus .ks__hitung { margin: calc(var(--u) * .4) 0 calc(var(--u) * .9); display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; }
#kasus .ks__hitung .angka { color: var(--c-alert); }
#kasus .ks__n { font-size: calc(var(--fs-angka) * .8); }
#kasus .ks__pisah { display: inline-block; width: 1px; height: calc(var(--u) * 3); background: var(--c-line-2); margin: 0 calc(var(--u) * 1.2); align-self: center; }
#kasus .ks__aman {
  display: inline-flex; align-items: center; gap: .55em; margin: 0;
  padding: .45em .8em; border-radius: 8px; border: 1px solid var(--c-line-2); background: var(--c-card);
  font-size: var(--fs-body); color: var(--c-fg);
}
#kasus .ks__aman::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: var(--c-alert); flex: none; }

/* Bidang persegi panel: kartu peta, berkas bukti, dan alur kasus ditumpuk di kotak yang sama */
#kasus .ks__bidang {
  position: relative; width: min(100%, calc(100vh - var(--pad-atas) - var(--pad-bawah))); aspect-ratio: 1;
}

/* s0: kartu peta */
#kasus .ks__peta {
  position: absolute; inset: 0; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--c-line-2); box-shadow: var(--c-shadow); background: #0a0e13;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
#kasus[data-state="1"] .ks__peta { opacity: .35; }
#kasus[data-state="2"] .ks__peta, .is-static #kasus .ks__peta { opacity: 0; transform: scale(.97); }
#kasus .ks__legenda { gap: .55em; }
#kasus .ks__legenda.label-data--simulasi::before { display: none; }
#kasus .ks__garis-wiup { display: inline-block; width: 18px; height: 0; border-top: 2px dashed var(--kat-wiup); }
#kasus .ks__atribusi { position: absolute; right: calc(var(--u) * .8); bottom: calc(var(--u) * .7); z-index: 5; }

/* Bukaan: amber dulu (sambungan #peruntukan), lalu 137 di dalam meredup dan 64 di luar menjadi merah */
#kasus .ks__poli { fill: var(--accent); fill-opacity: .16; stroke: var(--accent); stroke-width: 1.3; stroke-linejoin: round; transition: opacity .6s var(--ease), fill .35s, stroke .35s, fill-opacity .35s; }
#kasus .ks--merah .ks__dalam .ks__poli { opacity: .45; }
#kasus .ks--merah .ks__poli--luar { fill: var(--alert); stroke: var(--alert); fill-opacity: .3; stroke-width: 1.6; transition-delay: var(--d); }
#kasus .ks__wiup path { fill: none; stroke: var(--kat-wiup); stroke-width: 1.7; stroke-dasharray: 6 4; stroke-linejoin: round; }
#kasus .ks__mask-garis { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
#kasus .ks__tanda circle { fill: none; stroke: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s; }
#kasus[data-state="1"] .ks__tanda circle { opacity: 1; }

/* s1: berkas bukti, tumbuh dari titik poligon KOBA-00083 */
#kasus .ks__berkas {
  /* Setinggi isinya, di tengah kartu peta (peta redup tetap terlihat di atas dan bawah) */
  position: absolute; inset: 0; z-index: 3; margin: auto 0; height: fit-content;
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * .75);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4);
  background: var(--c-card); border: 1px solid var(--c-line-2); border-radius: 12px; box-shadow: var(--c-shadow);
  transform: scale(.05); opacity: 0;
  transition: transform .75s var(--ease), opacity .35s var(--ease);
}
#kasus .ks__berkas.on { transform: none; opacity: 1; transition: transform .8s var(--ease) .15s, opacity .35s var(--ease) .15s; }
#kasus .ks__kepala { display: flex; align-items: center; gap: calc(var(--u) * .6); }
#kasus .ks__map { fill: var(--accent); flex: none; }
#kasus .ks__id { margin: 0; font-size: calc(var(--u) * 1.5); font-weight: 700; color: var(--c-fg); letter-spacing: .01em; }
#kasus .ks__pita {
  margin: 0; padding: .5em .8em; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--c-card)); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  font-size: var(--fs-body); font-weight: 600; color: var(--c-accent);
}
#kasus .ks__chip { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#kasus .ks__citra { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .8); }
#kasus .ks__citra figure { margin: 0; min-width: 0; }
#kasus .ks__citra img { width: 100%; aspect-ratio: 640 / 611; object-fit: cover; border-radius: 6px; background: #0a0e13; }
#kasus .ks__citra figcaption { margin-top: 6px; font-size: var(--fs-label); color: var(--c-fg-2); font-weight: 600; white-space: nowrap; }
#kasus .ks__hash {
  margin: 0; display: flex; align-items: center; gap: .6em; flex-wrap: wrap;
  padding-top: calc(var(--u) * .6); border-top: 1px solid var(--c-line);
  font-size: var(--fs-label); color: var(--c-fg-2);
}
#kasus .ks__hash-label { font-weight: 600; }
#kasus .ks__hash-nilai { color: var(--c-fg); min-width: 13ch; }
#kasus .ks__cocok {
  display: inline-flex; align-items: center; gap: .35em; font-weight: 600; color: var(--c-good);
  opacity: 0; transform: translateX(-4px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
#kasus .ks__cocok svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#kasus .ks--cocok .ks__cocok { opacity: 1; transform: none; }

/* s2: alur kasus + G-02 */
#kasus .ks__alur {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: calc(var(--u) * 1.8); align-items: center;
  padding: calc(var(--u) * 2) 0;
}
#kasus .ks__alir { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
#kasus .ks__st { font-size: max(16px, calc(var(--u) * 1.12)); padding: calc(var(--u) * .8) calc(var(--u) * 1.2); white-space: nowrap; transition: border-color .4s, box-shadow .4s, background .4s, color .4s; }
#kasus .ks__st--lewat { color: var(--c-fg-2); }
#kasus .ks__panah { display: block; position: relative; width: 2px; height: calc(var(--u) * 2.6); margin-left: calc(var(--u) * 1.6); background: var(--c-line-2); }
#kasus .ks__panah::after {
  content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  border: 5px solid transparent; border-top: 6px solid var(--c-line-2); border-bottom: 0;
}
#kasus .ks__cabang { display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: calc(var(--u) * .7); row-gap: calc(var(--u) * .9); }
#kasus .ks__garing { font-size: calc(var(--u) * 1.6); color: var(--c-fg-2); font-weight: 400; }
#kasus .ks__hasil {
  grid-column: 3; list-style: none; margin: 0; padding: 0 0 0 calc(var(--u) * .9);
  display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--c-line-2);
  opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
#kasus .ks__hasil li {
  font-size: var(--fs-label); font-weight: 600; color: var(--c-fg-2); white-space: nowrap;
  padding: .3em .7em; border-radius: 999px; border: 1px solid var(--c-line-2); background: var(--c-card);
}
#kasus .ks--hasil .ks__hasil { opacity: 1; transform: none; }
#kasus .ks__kasus {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: .45em; white-space: nowrap;
  font-size: var(--fs-label); font-weight: 700; color: var(--c-fg);
  padding: .32em .75em; border-radius: 999px; background: var(--c-card); border: 1.5px solid var(--c-accent-fill);
  box-shadow: 0 8px 20px -10px rgba(31, 35, 40, .45);
  transition: transform .7s var(--ease);
}
#kasus .ks__kasus i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
#kasus .ks__foto { aspect-ratio: 4 / 5; box-shadow: var(--c-shadow); }
#kasus .ks__label-alur { margin-top: calc(var(--u) * 2.2); }

@media (max-width: 860px) {
  #kasus .ks__bidang { width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; gap: 16px; }
  #kasus .ks__peta { position: relative; aspect-ratio: 1; }
  #kasus .ks__berkas, #kasus .ks__alur { position: relative; inset: auto; transform: none; }
}