/* =====================================================================
   Garis waktu sejarah interaktif (3.46.0). Hanya dimuat di sejarah.html.
   Semua aturan di bawah baru berlaku setelah sejarah-interaktif.js menambah kelas
   .gw-wadah; tanpa skrip, garis waktu lama dari styles.css tetap tampil.
   ===================================================================== */

.gw-wadah { position: relative; }

/* ---------- Bagian atas yang menempel: deretan tahun + panel foto ---------- */
.gw-atas {
  position: sticky; top: var(--header-h); z-index: 20;
  display: flex; flex-direction: column; gap: 8px;
  margin-inline: -20px; padding: 8px 20px 12px;
  background: var(--cl-canvas, var(--putih));
  box-shadow: 0 10px 14px -12px rgba(var(--cl-ink-shadow, 0, 0, 0), 0.3);
}
@media (min-width: 720px) { .gw-atas { margin-inline: -32px; padding-inline: 32px; } }

.gw-rel { position: relative; min-width: 0; }
.gw-rel-isi {
  position: relative; display: flex; gap: 8px;
  padding: 4px 18px; margin-inline: -18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent, #0b1d2e 18px, #0b1d2e calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, transparent, #0b1d2e 18px, #0b1d2e calc(100% - 18px), transparent);
}
.gw-rel-isi::-webkit-scrollbar { display: none; }
@media (hover: hover) { .gw-rel-isi { cursor: grab; } }
.gw-rel-isi.diseret { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.gw-pil {
  flex: none; scroll-snap-align: center;
  min-height: 44px; max-width: 11rem; padding: 0 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--garis); border-radius: 999px;
  background: var(--cl-surface-hi, var(--putih)); color: var(--teks-redup);
  font: 600 0.9375rem / 1 var(--font-judul); font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer; touch-action: pan-x;
  transition: background-color .25s, color .25s, border-color .25s;
}
.gw-pil:hover { border-color: var(--tinta); color: var(--tinta); }
.gw-pil[aria-current="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* ---------- Panel foto ---------- */
.gw-stage {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 16 / 9; max-height: 30vh; max-height: 30svh; width: 100%;
  border-radius: var(--r-m); background: var(--tinta);
  touch-action: pan-y; user-select: none;
}
.gw-lapis { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.gw-lapis.aktif { opacity: 1; }
.gw-lapis img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); -webkit-user-drag: none; }
.gw-lapis.aktif img { transform: scale(1); }
.gw-lapis-teks { background: var(--tinta) var(--pola); }

.gw-ket {
  position: absolute; inset: auto 0 0 0; pointer-events: none;
  padding: 36px 16px 14px;
  background: linear-gradient(to top, rgba(8, 24, 40, 0.78), rgba(8, 24, 40, 0));
  color: #fff;
}
.gw-ket-tahun { display: block; font: 600 1.5rem / 1.1 var(--font-judul); font-variant-numeric: lining-nums tabular-nums; }
.gw-ket-judul { display: block; margin-top: 4px; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }

/* ---------- Butir-butir: yang sedang dibaca tampil penuh, lainnya redup ---------- */
.gw-wadah .garis-waktu { margin-top: 20px; padding-bottom: 8px; }
.gw-wadah .gw-item { min-height: 38svh; transition: opacity .35s ease; }
.gw-wadah .gw-item:not(.aktif) { opacity: 0.7; }
.gw-wadah .gw-item:last-child { min-height: 0; }
.gw-wadah .gw-item::before { transition: transform .35s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow .35s; }
.gw-wadah .gw-item.aktif::before { transform: scale(1.35); }
.gw-wadah .gw-item.aktif .gw-tahun { color: var(--tinta); }

/* Foto di dalam butir tetap ada untuk pembaca layar, tapi tidak terlihat (sudah tampil di panel) */
.gw-wadah.punya-foto .gw-foto {
  position: absolute; width: 1px; height: 1px; margin: -1px; aspect-ratio: auto;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; padding: 0;
}

/* ---------- Layar lebar: panel foto di kiri (menempel), butir di kanan ---------- */
@media (min-width: 900px) {
  .gw-wadah.punya-foto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 64px; align-items: start; }
  .gw-wadah.punya-foto .gw-atas {
    top: calc(var(--header-h) + 24px);
    flex-direction: column-reverse; gap: 14px;
    margin: 0; padding: 0; background: none; box-shadow: none;
  }
  .gw-wadah.punya-foto .gw-stage { aspect-ratio: 4 / 3; max-height: none; box-shadow: var(--clay-gelap, none); }
  .gw-wadah.punya-foto .gw-ket-tahun { font-size: 2rem; }
  .gw-wadah.punya-foto .gw-ket-judul { font-size: 1.0625rem; }

  .gw-wadah.punya-foto .garis-waktu { max-width: none; margin: 0; padding-left: 28px; }
  .gw-wadah.punya-foto .garis-waktu::before { left: 7px; }
  .gw-wadah.punya-foto .gw-item { display: block; min-height: 52vh; padding-bottom: 34px; }
  .gw-wadah.punya-foto .gw-item::before { left: -28px; top: 7px; }
  .gw-wadah.punya-foto .gw-tahun { margin-bottom: 4px; text-align: left; font-size: 1.0625rem; }
  .gw-wadah.punya-foto .gw-isi h3 { font-size: 1.375rem; }
  .gw-wadah.punya-foto .gw-item:last-child { min-height: 0; }

  /* tanpa foto sama sekali: satu kolom, deretan tahun menempel di atas */
  .gw-wadah.tanpa-foto .gw-atas { max-width: 46rem; margin-inline: auto; padding-inline: 0; background: none; box-shadow: none; }
  .gw-wadah.tanpa-foto .gw-item { min-height: 30vh; }
  .gw-wadah.tanpa-foto .gw-item:last-child { min-height: 0; }
}

/* Kurangi gerak: tanpa pudar/zoom/denyut */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="penuh"]) .gw-lapis,
  :root:not([data-motion="penuh"]) .gw-lapis img,
  :root:not([data-motion="penuh"]) .gw-pil,
  :root:not([data-motion="penuh"]) .gw-wadah .gw-item,
  :root:not([data-motion="penuh"]) .gw-wadah .gw-item::before { transition: none; }
  :root:not([data-motion="penuh"]) .gw-lapis img { transform: none; }
  :root:not([data-motion="penuh"]) .gw-wadah .gw-item.aktif::before { transform: none; }
}