/* 14 · #jalan (milik S3). Semua pemilih diawali #jalan atau .jl__
   Grid papan: lima tahap + kotak Exploration (kolom 6). Baris 2 bilah pilot (kolom 1–3), baris 3 rincian per langkah.
   Proporsi segmen garis waktu (minggu 0 · 1–2 · 3–10 · 11–12) dipakai bersama bilah dan labelnya (--jl-seg). */

/* Narasi + papan dipusatkan sebagai satu kelompok vertikal */
#jalan .scene__sticky { grid-template-rows: auto auto; align-content: center; }
#jalan .jl__panel { height: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: calc(var(--u) * 1.2); padding-top: calc(var(--u) * .6); }
/* Headline yang berganti rata bawah, agar kalimat pendukung tetap rapat di bawahnya */
.jl__narasi .swap:first-child > * { align-self: end; }
.jl__papan {
  --jl-gap: calc(var(--u) * 1.5);
  --jl-seg: 1.7fr 2fr 6fr 2.1fr;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, .92fr);
  column-gap: var(--jl-gap); align-items: stretch;
}

/* ── Baris 1: lima blok tahap ── */
.jl__tahap { grid-column: 1 / 6; grid-row: 1; display: grid; grid-template-columns: subgrid; list-style: none; margin: 0; padding: 0; }
.jl__blok {
  position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * .35);
  min-height: calc(var(--u) * 8.4); padding: calc(var(--u) * 1) calc(var(--u) * 1.05) calc(var(--u) * 1.1);
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: 10px;
  transition: opacity .5s var(--ease) calc(var(--k) * 90ms), transform .5s var(--ease) calc(var(--k) * 90ms), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.jl__no { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 2.1); line-height: 1; color: var(--c-accent); }
.jl__nama { font-size: max(15px, calc(var(--u) * 1.1)); font-weight: 600; line-height: 1.28; color: var(--c-fg); padding-right: 1.2em; text-wrap: balance; }
/* Penanda keluaran: centang abu di pojok kanan atas */
.jl__keluaran { position: absolute; top: calc(var(--u) * .85); right: calc(var(--u) * .85); width: max(16px, calc(var(--u) * 1.1)); height: max(16px, calc(var(--u) * 1.1)); fill: none; stroke: var(--c-muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
/* Panah urutan di sela blok */
.jl__blok:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; right: calc(var(--jl-gap) / -2 - 4px);
  width: 7px; height: 7px; border-top: 2px solid var(--c-line-2); border-right: 2px solid var(--c-line-2);
  transform: translateY(-50%) rotate(45deg);
}

/* Exploration Intelligence: putus-putus, redup, di luar lingkup */
.jl__eksplorasi {
  grid-column: 6; grid-row: 1; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: .3em;
  padding: calc(var(--u) * .85) calc(var(--u) * .95); border: 1.5px dashed var(--c-line-2); border-radius: 10px;
  font-size: var(--fs-label); line-height: 1.3; color: var(--c-muted);
  transition: opacity .5s var(--ease) calc(var(--k) * 90ms), transform .5s var(--ease) calc(var(--k) * 90ms);
}
.jl__eksplorasi b { display: block; color: var(--c-fg-2); font-weight: 600; }

/* Masuk scene: blok tersusun dari kiri */
#jalan:not(.is-active) .jl__blok, #jalan:not(.is-active) .jl__eksplorasi { opacity: 0; transform: translateX(-14px); }

/* ── Baris 2: bilah pilot (segmen = garis waktu 12 minggu) ── */
.jl__pilot {
  grid-column: 1 / 4; grid-row: 2; position: relative; margin-top: calc(var(--u) * 1.9);
  display: grid; grid-template-columns: var(--jl-seg); height: max(10px, calc(var(--u) * .75));
  border-radius: 999px; overflow: hidden; background: var(--c-card-2); box-shadow: inset 0 0 0 1px var(--c-line);
  opacity: 0; transform-origin: 0 50%;
  transform: translateX(calc(100% + var(--jl-gap))) scaleX(.31);
  transition: opacity .3s var(--ease), transform .85s var(--ease) .2s;
}
.jl__seg { position: relative; z-index: 2; }
.jl__seg:not(:last-of-type) { box-shadow: inset -3px 0 0 var(--c-bg); }
.jl__isi { position: absolute; z-index: 1; inset: 0 auto 0 0; width: calc(var(--isi, 0) * 100%); background: var(--c-accent-fill); }
#jalan[data-state="1"] .jl__pilot, #jalan[data-state="2"] .jl__pilot { opacity: 1; transform: none; }

/* ── Baris 3: rincian ── */
.jl__rinci { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: subgrid; margin-top: calc(var(--u) * 1); }
.jl__minggu { grid-column: 1 / 4; grid-row: 1; align-self: start; justify-self: start; margin: 0; }
.jl__target { grid-column: 4 / 7; grid-row: 1; align-self: start; justify-self: start; margin: 0; white-space: normal; }

.jl__perlu { grid-row: 1; }
.jl__perlu--tahap1 { grid-column: 1 / 3; }
.jl__perlu--pilot { grid-column: 3 / 7; }
.jl__grup { margin: 0 0 calc(var(--u) * .55); font-size: var(--fs-label); font-weight: 700; color: var(--c-accent); }
.jl__perlu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * .5) var(--jl-gap); }
.jl__perlu--pilot ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jl__perlu li {
  display: flex; align-items: flex-start; gap: .65em;
  font-size: max(15px, calc(var(--u) * 1)); line-height: 1.35; color: var(--c-fg);
  opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.jl__perlu.on li { opacity: 1; transform: none; transition-delay: calc(.15s + var(--k) * 90ms); }
/* Kotak periksa kosong (belum dicentang) */
.jl__perlu li i { flex: none; width: 1em; height: 1em; margin-top: .17em; border: 1.5px solid var(--c-line-2); border-radius: 3px; background: var(--c-card); }

/* ── Per langkah ── */
#jalan[data-state="1"] .jl__blok--4 { border-color: var(--c-accent-fill); box-shadow: 0 0 0 1px var(--c-accent-fill) inset, var(--c-shadow); }
#jalan[data-state="2"] .jl__blok--1 { border-color: var(--c-accent-fill); box-shadow: 0 0 0 1px var(--c-accent-fill) inset, var(--c-shadow); }
/* Redup s2 tetap ≥3:1: kartu kehilangan latar putih, teks abu, opasitas ringan */
#jalan[data-state="2"] .jl__blok:not(.jl__blok--1) { opacity: .85; background: transparent; }
#jalan[data-state="2"] .jl__blok:not(.jl__blok--1) .jl__nama,
#jalan[data-state="2"] .jl__blok:not(.jl__blok--1) .jl__no { color: var(--c-muted); transition: color .4s var(--ease); }
#jalan[data-state="2"] .jl__blok:not(.jl__blok--1) .jl__keluaran { opacity: .5; }
#jalan[data-state="2"] .jl__eksplorasi { opacity: .85; }
#jalan[data-state="2"] .jl__pilot { opacity: .6; }

/* Label «Usulan» di narasi, rapat di bawah kalimat pendukung */
.jl__narasi .jl__label { position: static; margin-top: calc(var(--u) * .1); }
/* Ruang baris 2–3 (bilah dan rincian) sudah dipesan sejak s0 agar tata letak tidak melompat; separuhnya
   tidak ikut dipusatkan supaya s0 tidak berat ke atas */
#jalan .jl__panel { margin-bottom: calc(var(--u) * -4.5); }

/* ?static: keadaan akhir utuh; rincian s1 dan s2 berurutan, blok tidak diredupkan */
.is-static #jalan[data-state] .jl__blok, .is-static #jalan[data-state] .jl__blok:not(.jl__blok--1) { opacity: 1; transform: none; }
.is-static #jalan[data-state] .jl__eksplorasi { opacity: 1; transform: none; }
.is-static #jalan[data-state] .jl__blok:not(.jl__blok--1) { background: var(--c-card); }
.is-static #jalan[data-state] .jl__blok:not(.jl__blok--1) .jl__nama { color: var(--c-fg); }
.is-static #jalan[data-state] .jl__blok:not(.jl__blok--1) .jl__no { color: var(--c-accent); }
.is-static #jalan .jl__panel { margin-bottom: 0; }
.is-static #jalan .jl__pilot { opacity: 1; transform: none; transition: none; }
.is-static #jalan .jl__perlu { grid-row: 2; margin-top: calc(var(--u) * 1.6); }
.is-static #jalan .jl__perlu li { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .jl__papan { grid-template-columns: 1fr; row-gap: 10px; }
  .jl__tahap { grid-column: 1; grid-template-columns: 1fr; row-gap: 10px; }
  .jl__eksplorasi, .jl__pilot, .jl__rinci, .jl__minggu, .jl__target, .jl__perlu--tahap1, .jl__perlu--pilot { grid-column: 1; grid-row: auto; }
  .jl__rinci { grid-template-columns: 1fr; row-gap: 14px; }
  .jl__blok:not(:last-child)::after { display: none; }
  .jl__perlu--pilot ul { grid-template-columns: 1fr; }
  .is-static #jalan .jl__perlu { grid-row: auto; margin-top: 4px; }
  .jl__no { font-size: 26px; }
  .jl__blok { min-height: 0; padding: 12px 14px; }
}