/* =====================================================================
   BX3 SEJARAH - tahun sebagai tab di garis waktu + satu panel (foto 16:10 + tahun besar, judul, kalimat).
   Ringkas: judul kiri & panah kanan sebaris, foto dibatasi tinggi layar → section muat satu layar desktop.
   Garis waktu: bintang Bingxue per tahun (belum dilewati coklat muda, sudah oranye) + penanda bintang oranye
   yang berjalan (sambil berputar 45° per tahun) dari tahun lama ke tahun tujuan, garis isi oranye ikut memanjang.
   Posisi diletakkan JS (bx3-history.js). Tanpa JS v3: semua tahun bertumpuk, tanpa tab & panah.
   ===================================================================== */

.bx3.bx3-hist{--bx3-max:var(--bx3-wide);display:block;background:var(--bx3-cream);padding:clamp(56px,5.5vw,104px) var(--bx3-pad-x);overflow:hidden}
.bx3.bx3-hist--white{background:var(--bx3-white)}
.bx3 .bx3-hist__in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head ctrl" "nav nav" "stage stage";column-gap:32px;max-width:var(--bx3-max);margin:0 auto}
.bx3 .bx3-hist__head{grid-area:head;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.bx3 .bx3-hist__head .bx3-text{margin-top:clamp(14px,1.6vw,28px)}
.bx3 .bx3-hist__ctrl{grid-area:ctrl;align-self:end;display:flex;align-items:center;gap:14px}
.bx3 .bx3-hist__nav{grid-area:nav;position:relative;min-width:0;margin-top:clamp(28px,3vw,48px)}
.bx3 .bx3-hist__stage{grid-area:stage;display:grid;row-gap:clamp(56px,6vw,96px);min-width:0;margin-top:clamp(24px,2.6vw,40px)}

/* ---------- Garis waktu ---------- */
.bx3 .bx3-hist__years{position:relative;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;--bx3-hd:0ms;--bx3-he:cubic-bezier(.65,0,.35,1)}
.bx3 .bx3-hist__years::-webkit-scrollbar{display:none}
.bx3 :is(.bx3-hist__base,.bx3-hist__fill,.bx3-hist__mark){position:absolute;left:0;pointer-events:none}
.bx3 :is(.bx3-hist__base,.bx3-hist__fill){bottom:16px;width:0;height:1px;background:var(--bx3-line-btn)}
.bx3 .bx3-hist__fill{bottom:15.5px;height:2px;border-radius:2px;background:var(--bx3-orange);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--bx3-hd) var(--bx3-he)}
.bx3 .bx3-hist__mark{bottom:1.5px;z-index:1;width:30px;height:30px;margin-left:-15px;transform:translate3d(var(--bx3-hx,0px),0,0);transition:transform var(--bx3-hd) var(--bx3-he)}
.bx3 .bx3-hist__mark::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,102,0,.2) 0,rgba(255,102,0,.08) 45%,rgba(255,102,0,0) 70%)}
.bx3 .bx3-hist__mark::after{content:"";position:absolute;inset:5px;background:var(--bx3-orange);-webkit-mask:var(--bx3-star) 50% 50%/contain no-repeat;mask:var(--bx3-star) 50% 50%/contain no-repeat;transform:rotate(var(--bx3-hrot,0deg));transition:transform var(--bx3-hd) var(--bx3-he)}
/* tombol tahun: lebar sama rata (tebal huruf tahun aktif tidak menggeser posisi bintang) */
.bx3 button.bx3-hist__y[type="button"]{position:relative;flex:1 1 0;min-width:76px;margin:0;padding:12px 10px 38px;border:0;border-radius:0;font-family:var(--bx3-font);font-size:clamp(.9375rem,1vw,1.0625rem);font-weight:400;line-height:1;letter-spacing:.02em;white-space:nowrap;color:var(--bx3-ink-soft);background:transparent;box-shadow:none;transition:color var(--bx3-t) var(--bx3-ease)}
.bx3 button.bx3-hist__y[type="button"]:is(:hover,:focus,:focus-visible,:active){color:var(--bx3-ink);background:transparent;border-color:transparent}
.bx3 button.bx3-hist__y[type="button"]:focus-visible{outline:2px solid var(--bx3-choc);outline-offset:-2px;border-radius:6px}
.bx3 button.bx3-hist__y[type="button"]::after{content:"";position:absolute;left:50%;bottom:10px;z-index:1;width:13px;height:13px;margin-left:-6.5px;background:#D9C3AE;-webkit-mask:var(--bx3-star) 50% 50%/contain no-repeat;mask:var(--bx3-star) 50% 50%/contain no-repeat;transition:background-color .18s var(--bx3-ease) var(--bx3-sd,0ms),opacity .18s var(--bx3-ease) var(--bx3-sd,0ms)}
.bx3 button.bx3-hist__y[type="button"].is-past::after{background:var(--bx3-orange)}
.bx3 button.bx3-hist__y[type="button"][aria-selected="true"]{color:var(--bx3-ink);font-weight:700}
.bx3 button.bx3-hist__y[type="button"][aria-selected="true"]::after{background:var(--bx3-orange);opacity:0}

/* ---------- Panel ---------- */
.bx3 .bx3-hist__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.4vw,80px);align-items:center;min-width:0}
.bx3 .bx3-hist__panel--text{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.bx3 .bx3-hist__panel--text .bx3-hist__body{max-width:34em}
.bx3 .bx3-hist__panel--text :is(.bx3-hist__text,.bx3-hist__note){margin-inline:auto}
/* foto 16:10, tingginya dibatasi sisa layar (layar − header − judul/garis waktu ±132px+18,6vw) → section muat satu layar desktop */
.bx3 .bx3-hist__img{width:100%;aspect-ratio:16/10;max-height:max(200px,calc(100vh - 236px - 18.6vw));border-radius:var(--bx3-r);isolation:isolate}
.bx3 .bx3-hist__body{min-width:0}
.bx3 .bx3-hist__year{font-size:clamp(3.5rem,6.4vw,6.5rem);font-weight:700;line-height:.85;letter-spacing:-.03em;color:var(--bx3-orange);font-variant-numeric:tabular-nums}
.bx3 .bx3-hist__title{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(1.125rem,1.5vw,1.5rem);font-weight:700;line-height:1.3;color:var(--bx3-ink)}
.bx3 .bx3-hist__text{margin-top:10px;max-width:28em;font-size:var(--bx3-fs-body);line-height:1.8;color:var(--bx3-ink-soft);white-space:pre-line}
.bx3 .bx3-hist__note{margin-top:14px;max-width:36em;font-size:var(--bx3-fs-xs);line-height:1.6;color:var(--bx3-ink-soft);opacity:.85}
.bx3 .bx3-hist__note::before{content:"* "}

/* ---------- Panah ---------- */
.bx3 button.bx3-hist__arrow[type="button"]{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--bx3-line-btn);border-radius:50%;color:var(--bx3-ink);background:transparent;transition:background-color var(--bx3-t) var(--bx3-ease),border-color var(--bx3-t) var(--bx3-ease),color var(--bx3-t) var(--bx3-ease),opacity var(--bx3-t) var(--bx3-ease)}
.bx3 button.bx3-hist__arrow[type="button"]:is(:hover,:focus-visible):not(:disabled){background:var(--bx3-choc);border-color:var(--bx3-choc);color:var(--bx3-white)}
.bx3 button.bx3-hist__arrow[type="button"]:disabled{opacity:.3;cursor:default}
.bx3 button.bx3-hist__arrow[type="button"] svg{width:18px;height:18px}
.bx3 .bx3-hist__count{min-width:4.5em;font-size:var(--bx3-fs-sm);line-height:1;text-align:center;color:var(--bx3-ink-soft);font-variant-numeric:tabular-nums}

/* ---------- Tanpa JS v3: semua tahun bertumpuk ---------- */
html:not(.bx3-js) .bx3 :is(.bx3-hist__nav,.bx3-hist__ctrl){display:none}
/* ---------- Dengan JS: semua panel di satu sel (tinggi = panel tertinggi, tidak melompat) ---------- */
.bx3-js .bx3 .bx3-hist__panel{grid-area:1/1}
.bx3-js .bx3 .bx3-hist__panel:not(.is-on){visibility:hidden;opacity:0;pointer-events:none}
.bx3-js .bx3 .bx3-hist__panel.is-on{animation:bx3-hist-in .55s var(--bx3-ease) both}
.bx3-js .bx3 .bx3-hist__panel.is-on .bx3-hist__img>img{animation:bx3-hist-zoom 1.1s var(--bx3-ease) both}
@keyframes bx3-hist-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes bx3-hist-zoom{from{transform:scale(1.05)}to{transform:none}}

@media (max-width:899px){
  .bx3 .bx3-hist__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "nav" "stage" "ctrl"}
  .bx3 .bx3-hist__ctrl{justify-self:start;margin-top:clamp(24px,3vw,40px)}
  .bx3 .bx3-hist__panel{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
  .bx3 .bx3-hist__panel--text{align-items:center}
  .bx3 .bx3-hist__img{max-height:none}
}
@media (max-width:767px){
  .bx3 .bx3-hist__years{margin:0 calc(var(--bx3-pad-x) * -1);padding:0 var(--bx3-pad-x)}
  .bx3 button.bx3-hist__y[type="button"]{min-width:68px;flex:0 0 auto}
  .bx3 .bx3-hist__year{font-size:clamp(3rem,15vw,4rem)}
}
@media (prefers-reduced-motion:reduce){
  .bx3 .bx3-hist__panel,.bx3 .bx3-hist__img>img{animation:none!important}
}