/* Scroller PDP, hasil ukur di 1280x800.
   Semua ukuran memakai token di tokens.css. Tidak ada angka px hasil
   hitung balik: desain sumber dikunci di 1440 desktop jadi spacing-nya
   selalu rem bulat. Satu satunya px literal di file ini adalah ukuran
   ikon chevron, dan itu memang ditulis px di markup sumber.

   Disalin apa adanya dari clvn-desk/src/components/pdp/scrollers.css,
   437 baris, seluruhnya. Yang berubah HANYA nama. Tiga blok sumbernya
   yang dulu bernama tiga huruf sekarang jadi
   .section-pdp-canvas-scroller, .section-pdp-video-sticky, dan
   .section-pdp-marquee; satu nama elemen yang dulu satu kata gabungan
   sekarang dipisah tanda hubung jadi __nav-btn; nama keyframe dan nama
   view timeline ikut dipanjangkan supaya tidak bentrok. Angka, urutan
   rule, dan isi komentar tidak disentuh.

   Muat SEBELUM mega-nav.css, sama seperti berkas section lain. */

/* --- CanvasScroller, section 1 dan 3 --------------------------
   Satu unit scroller = tinggi viewport dikurangi header sticky, 713.06
   di 1280x800. Tinggi container = sectionCount kali unit itu, dikirim
   dari markup lewat --section-count (5.5 di section 1, 2.5 di section 3).
   Rumus aslinya sama persis:
     height: calc(var(--section-count, 4) * (var(--screen) - var(--header-height))) */
.section-pdp-canvas-scroller {
  --screen: 100svh;
  --unit: calc(var(--screen) - var(--header-height));

  /* Tinggi blok teks, dalam unit scroller. Sumbernya mengirimnya per blok
     lewat --scroller-height di inline style. Terbaca di halaman:
       canvas 1  1 (kosong) + 2 (center) + 2 (left) + 0.5 (kosong)
       canvas 3  0.5 (kosong) + 2 (left)
     Komponen ini cuma merender satu blok isi, jadi --lead adalah blok
     kosong pembukanya dan --span tinggi blok isinya. Default di sini
     varian center, varian left menimpanya di bawah. */
  --lead: 1;
  --span: 2;

  position: relative;
  background: var(--blue-cgi);
  color: var(--black);
  height: calc(var(--section-count) * var(--unit));

  /* WAJIB. Nama view timeline TIDAK terlihat oleh sibling di Chrome,
     cuma oleh elemen yang mendeklarasikan dan turunannya. Sudah diuji
     langsung: tanpa baris ini `animation.timeline` di
     .section-pdp-canvas-scroller__inner--slide adalah null, playState
     "finished", dan transform-nya beku di keyframe `to` seumur halaman.
     timeline-scope menaikkan namanya ke .section-pdp-canvas-scroller
     sehingga anak mana pun bisa memakainya. */
  timeline-scope: --pdp-canvas-scroller-enter;
}

/* Penanda tinggi nol, subjek timeline untuk intro slide. Sengaja BUKAN
   elemen sticky. Dengan subjek setinggi nol, rentang `cover` persis sama
   dengan perjalanan tepi atas section dari bawah viewport ke atas
   viewport, jadi tidak perlu rumus yang ikut berubah kalau
   sectionCount berubah. */
.section-pdp-canvas-scroller__mark {
  height: 0;
  view-timeline-name: --pdp-canvas-scroller-enter;
  view-timeline-axis: block;
}

/* Terukur: sticky, top 0, tinggi 100svh PENUH (800), bukan satu unit
   scroller. Rumus sumbernya: `position: sticky; top: 0; height: var(--screen)`. */
.section-pdp-canvas-scroller__media {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--screen);
  overflow: clip;
}

/* Lapis dalam. Ini yang digeser, bukan
   .section-pdp-canvas-scroller__media. Kalau transform ditempelkan ke
   pembungkus sticky-nya, geser -20 persen ikut menarik kotak sticky
   sehingga media menyembul 160px ke atas dan menutupi hero. Dengan dua
   lapis, geseran dipotong .section-pdp-canvas-scroller__media dan tepi
   section tetap di tempatnya. */
.section-pdp-canvas-scroller__inner {
  width: 100%;
  height: 100%;
}

/* Kanvas naik sampai 20 persen tingginya lalu duduk di 0 saat section
   masuk. Hanya section 1, canvas 3 tidak punya ini.

   JANGAN pakai shorthand `animation`. Shorthand menyetel duration ke 0s,
   dan dengan timeline scroll itu membekukan animasi di satu nilai.
   Duration wajib `auto`. Pola dan alasannya sama dengan blok item
   di sticky-text-gallery.css.

   Fallback aman: kalau browser belum mendukung animation-timeline,
   deklarasi duration `auto` ikut invalid, duration jatuh ke 0s, dan
   fill-mode both mendaratkan elemen di keyframe `to`, yaitu posisi
   diamnya. Jadi tanpa dukungan pun tampilannya benar, cuma tanpa gerak. */
.section-pdp-canvas-scroller__inner--slide {
  animation-name: pdp-canvas-scroller-intro-slide;
  animation-duration: auto;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --pdp-canvas-scroller-enter;
  animation-range: cover 0% cover 100%;
}
/* Arahnya NAIK, bukan turun. Rumus sumbernya:
     t = max(0, (1 - ratio) * 20);  transform = translate3d(0, -t%, 0)
   Tandanya negatif, jadi di awal masuk kanvas terangkat 20 persen
   tingginya lalu turun ke 0 saat section pinned. */
@keyframes pdp-canvas-scroller-intro-slide {
  from { transform: translate3d(0, -20%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Lintasan blok teks. Menumpuk di atas kanvas, bukan berurutan
   sesudahnya. Kanvas memakan satu layar penuh di flow, margin-top
   negatif ini mengembalikannya lalu menambahkan blok kosong pembuka
   setinggi --lead unit. Aslinya kolom blok ini position absolute
   menutupi seluruh scroller; hasil akhirnya sama, tanpa perlu
   menghitung ulang tinggi kanvas.

   Tinggi --span unit inilah yang membatasi berapa lama
   .section-pdp-canvas-scroller__pin menempel. Tanpa tinggi ini teks akan
   pinned sampai ujung section, yaitu 3921px di canvas 1, bukan 1426px
   seperti aslinya.

   Lebar 1208.88 di 1280, yaitu var(--grid-width), dengan margin kiri
   kanan 35.55 alias var(--margin). Terukur. Ini yang bikin inset
   varian left jadi 86.63, bukan 51.08: margin container ditambah
   padding blok. */
.section-pdp-canvas-scroller__block {
  position: relative;
  width: var(--grid-width);
  max-width: var(--max-width);
  height: calc(var(--span) * var(--unit));
  margin-top: calc(var(--lead) * var(--unit) - var(--screen));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

/* Yang benar benar menempel. 15rem adalah tinggi blok teks default
   sumbernya (--inner-height, fallback 15rem). Dibagi dua supaya titik pin
   jatuh tepat di tengah viewport: 800/2 - 66.62/2 = 333.376. Terukur. */
.section-pdp-canvas-scroller__pin {
  position: sticky;
  top: calc(var(--screen) / 2 - 15rem / 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-pdp-canvas-scroller__heading { margin: 0; }
.section-pdp-canvas-scroller__body {
  margin: 0;
  /* Heading dan body di sumbernya sama sama white-space pre-wrap, jadi
     line break datang dari copy, bukan dari lebar. .t-38 sudah memberi
     pre-wrap lewat tokens.css, .t-14 tidak, jadi diset di sini. */
  white-space: pre-wrap;
}

/* Terukur di 1280: 71.0656px / lh 1 / ls -0.02em, lebar 800.23 dan
   posisi kiri 239.88 (yaitu benar benar center di 1280). */
.section-pdp-canvas-scroller--center .section-pdp-canvas-scroller__pin {
  gap: 4rem;
  align-items: center;
  text-align: center;
}
.section-pdp-canvas-scroller--center .section-pdp-canvas-scroller__block { align-items: center; }
/* 16 kolom + 15 gutter = 800.23px @1280. */
.section-pdp-canvas-scroller--center .section-pdp-canvas-scroller__heading { width: calc(16 * var(--col) + 15 * var(--gutter)); }
/* 6 kolom + 7 gutter di varian center. Varian left cuma 6 gutter.
   Bukan salah ketik, dua rumus itu memang beda di CSS sumbernya. */
.section-pdp-canvas-scroller--center .section-pdp-canvas-scroller__body { width: calc(6 * var(--col) + 7 * var(--gutter)); }

/* Blok kosong pembuka varian left cuma 0.5 unit, bukan 1. Terukur di
   canvas 3: --scroller-height 0.5 lalu 2. */
.section-pdp-canvas-scroller--left { --lead: 0.5; }
.section-pdp-canvas-scroller--left .section-pdp-canvas-scroller__block { align-items: flex-start; }
.section-pdp-canvas-scroller--left .section-pdp-canvas-scroller__pin {
  gap: 2.4rem;
  align-items: flex-start;
  /* Terukur 51.0848px @1280, yaitu tepat 1 kolom + 1 gutter. Ditumpuk
     di atas margin container, jadi tepi kiri heading jatuh di 86.63. */
  padding-left: calc(var(--col) + var(--gutter));
}
.section-pdp-canvas-scroller--left .section-pdp-canvas-scroller__heading { width: fit-content; }
/* 6 kolom + 6 gutter = 306.51px @1280. Ganjil (gutter sama banyak
   dengan kolom), tapi memang begitu terukurnya. */
.section-pdp-canvas-scroller--left .section-pdp-canvas-scroller__body { width: calc(6 * var(--col) + 6 * var(--gutter)); }

/* Mobile dan tablet pakai grid 12 kolom, jadi lebar 16 kolom tidak ada.
   Semua blok teks turun ke 10 kolom + 9 gutter. Rentang ini belum
   diukur seteliti desktop, angkanya menyusul struktur sumbernya:
   di bawah 1024 blok scroller rata tengah dan gap turun ke 1.2rem. */
@media (max-width: 1023px) {
  .section-pdp-canvas-scroller--center .section-pdp-canvas-scroller__heading,
  .section-pdp-canvas-scroller--left .section-pdp-canvas-scroller__heading,
  .section-pdp-canvas-scroller--center .section-pdp-canvas-scroller__body,
  .section-pdp-canvas-scroller--left .section-pdp-canvas-scroller__body { width: calc(10 * var(--col) + 9 * var(--gutter)); }
  .section-pdp-canvas-scroller--center .section-pdp-canvas-scroller__pin,
  .section-pdp-canvas-scroller--left .section-pdp-canvas-scroller__pin { gap: 1.2rem; }
  .section-pdp-canvas-scroller--left .section-pdp-canvas-scroller__pin { padding-left: 0; }
  .section-pdp-canvas-scroller__block { text-align: center; }
}

/* --- VideoSticky, section 2 -----------------------------------
   PERHATIKAN dua satuan berbeda di section ini:
   tinggi SECTION 2.5 kali viewport PENUH (2000px), tidak dikurangi
   header, dari --container-height: 2.5 dikali 100vh di sumbernya.
   Tapi blok teks di dalamnya tetap memakai unit yang DIKURANGI header,
   sama dengan canvas scroller. Bukan salah salin. */
.section-pdp-video-sticky {
  --screen: 100svh;
  --unit: calc(var(--screen) - var(--header-height));
  /* Terukur: 1 unit kosong lalu 1.5 unit blok isi. */
  --lead: 1;
  --span: 1.5;

  position: relative;
  z-index: 0;
  height: calc(2.5 * var(--screen));
  color: var(--black);
}

/* Pita gradien 4rem di tepi atas section, menutup sambungan dengan
   section biru di atasnya. Terukur 35.53px tinggi, z-index 2, dan
   ikut menggulung bersama section karena absolute biasa, bukan sticky.
   Ini gradien KEDUA, berbeda dari overlay di atas video.
   Soal `transparent`, lihat catatan di
   .section-pdp-video-sticky__media::before. */
.section-pdp-video-sticky::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 4rem;
  background-image: linear-gradient(var(--blue-cgi), transparent);
  pointer-events: none;
}

.section-pdp-video-sticky__media {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--screen);
  overflow: clip;
}

/* Gradien menyatukan video dengan latar section di atasnya. Menutupi
   seluruh kotak sticky (inset 0), tapi warnanya habis di 15 persen
   jadi cuma pita atas setinggi 120px yang kelihatan. Terukur
   linear-gradient(#d1e3fb, rgba(209,227,251,0) 15%); `transparent`
   di sini aman karena gradien Chrome menginterpolasi premultiplied,
   jadi tidak ada pita abu di tengah. */
.section-pdp-video-sticky__media::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: linear-gradient(var(--blue-cgi), transparent 15%);
  pointer-events: none;
}

/* Sama persis dengan .section-pdp-canvas-scroller__block dan
   .section-pdp-canvas-scroller__pin. Aslinya juga komponen blok yang
   sama, cuma dipasang di atas video, bukan di atas kanvas.
   z-index 1 supaya teks duduk di atas video dan overlay-nya, tapi di
   bawah pita gradien ::after yang z-index 2. */
.section-pdp-video-sticky__block {
  position: relative;
  z-index: 1;
  width: var(--grid-width);
  max-width: var(--max-width);
  height: calc(var(--span) * var(--unit));
  margin-top: calc(var(--lead) * var(--unit) - var(--screen));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.section-pdp-video-sticky__pin {
  position: sticky;
  top: calc(var(--screen) / 2 - 15rem / 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
  align-items: flex-start;
  padding-left: calc(var(--col) + var(--gutter));
}
.section-pdp-video-sticky__heading { margin: 0; width: fit-content; }
.section-pdp-video-sticky__body {
  margin: 0;
  white-space: pre-wrap;
  width: calc(6 * var(--col) + 6 * var(--gutter));
}

@media (max-width: 1023px) {
  .section-pdp-video-sticky__pin { padding-left: 0; gap: 1.2rem; }
  .section-pdp-video-sticky__block { text-align: center; }
  .section-pdp-video-sticky__heading,
  .section-pdp-video-sticky__body { width: calc(10 * var(--col) + 9 * var(--gutter)); }
}

/* --- PdpMarquee, section 4 ------------------------------------
   Terukur: latar #D1E3FB, tinggi total 407.15 di 1280x800, yaitu
   6rem padding + 42.63 header + 6rem gap + 204.63 item + 6rem padding. */
.section-pdp-marquee {
  display: flex;
  position: relative;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  background: var(--blue-cgi);
  color: var(--black);
  /* Mobile 4rem, desktop 6rem. Dua duanya dari CSS sumbernya. */
  gap: 4rem;
  padding: 4rem 0;
  /* clip, BUKAN hidden. hidden bikin scroll container baru dan
     memunculkan scrollbar horizontal dari track yang meluap. */
  overflow: clip;
}

.section-pdp-marquee__header {
  width: var(--grid-width);
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
/* 8 kolom + 7 gutter = 391.55px @1280. */
.section-pdp-marquee__heading {
  margin: 0;
  width: calc(8 * var(--col) + 7 * var(--gutter));
  white-space: pre-wrap;
}

/* Terukur 8.8832px antar tombol, yaitu 1rem, bukan 0.8rem. */
.section-pdp-marquee__nav {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  height: fit-content;
  flex-shrink: 0;
}
/* Dua kelas, bukan satu, supaya menang atas .u-btn tanpa bergantung
   pada urutan import CSS. Terukur 42.63 persegi, radius pil.
   Warna ikonnya --black, BUKAN --blue600 bawaan tombol secondary:
   sumbernya menimpanya dengan `color: #141414` khusus di controller. */
.section-pdp-marquee .section-pdp-marquee__nav-btn {
  box-sizing: border-box;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  color: var(--black);
  flex-shrink: 0;
}
/* Disabled di sumbernya cuma memudarkan ikon jadi rgba(20,20,20,0.1), yaitu
   --hairline. Pil-nya tetap putih dengan border abu. Tanpa baris ini
   .u-btn:disabled bawaan mengubahnya jadi pil abu penuh. */
.section-pdp-marquee .section-pdp-marquee__nav-btn:disabled {
  background: var(--white);
  color: var(--hairline);
  border-color: var(--grey-border);
}
.section-pdp-marquee__nav-btn--prev svg { transform: rotate(180deg); }

/* Jendela potong. Diam di tempat, TIDAK ikut digeser. Kalau overflow
   dan transform menempel di elemen yang sama, kotak potongnya ikut
   bergeser bersama isinya sehingga jendelanya yang jalan ke kiri.
   padding-left dihitung dari grid, persis rumus sumbernya:
   calc((100% - var(--grid-width)) / 2) = 35.55 di 1280. Padding ada di
   dalam kotak potong, jadi item boleh menyelinap sampai tepi kiri
   layar saat digeser, bukan berhenti di margin. */
.section-pdp-marquee__clip {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-left: calc((100% - var(--grid-width)) / 2);
  overflow: clip;
  user-select: none;
}

/* Aslinya posisi track di-lerp eksponensial di dalam rAF dengan settle
   sekitar 250ms. Diganti transisi CSS: berhentinya sama sama mulus,
   tanpa loop rAF yang jalan terus di background.

   display inline-flex ikut aturan blockification karena induknya flex
   container, jadi computed-nya flex. Tidak mengubah hasil: item
   flex-shrink 0 tetap meluap ke kanan dan tetap dipotong
   .section-pdp-marquee__clip. */
.section-pdp-marquee__track {
  display: inline-flex;
  position: relative;
  flex-direction: row;
  /* Mobile 4rem, desktop 12rem (106.598px terukur). */
  gap: 4rem;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform 0.35s var(--ease-media);
}

/* Terukur tinggi 204.63 = 179.88 angka + 0.8rem gap + 17.64 caption.
   align-items center: angka dan caption sama sama rata tengah. */
.section-pdp-marquee__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: max-content;
  flex-shrink: 0;
}
/* Ruang ekor di ujung track, 4rem di mobile dan 12rem di desktop.
   Terukur di item terakhir sumbernya: padding-right 106.598. */
.section-pdp-marquee__item:last-child { padding-right: 4rem; }

.section-pdp-marquee__value {
  color: var(--black);
  white-space: nowrap;
}

/* Ukuran angka statistik. Terukur di sumbernya: font-size 199.872px
   (22.5rem @1280), line-height 179.885 yaitu 0.9, letter-spacing
   -3.99744 yaitu -0.02em.
   Ditulis di sini, bukan sebagai token, karena tokens.css berhenti di
   lg-t-112 dan file itu di luar cakupan perubahan ini. lg-t-112 memberi
   99.49px, kurang dari separuh, dan itu yang bikin tinggi section
   meleset 80px. Dua kelas supaya menang atas .t-44 tanpa bergantung
   pada urutan import CSS.

   Satuannya ("hr", "yr", "%") justru pas di lg-t-112: terukur 99.4918
   / lh 1 / ls -0.02em, dan kelas itu memberi angka yang sama persis.
   Jadi satuan cukup memakai token, tidak perlu rule di sini. */
@media (min-width: 1024px) {
  .section-pdp-marquee .section-pdp-marquee__value {
    font-size: min(22.5rem, 225px);
    line-height: 0.9;
    letter-spacing: -0.02em;
  }
  .section-pdp-marquee { gap: 6rem; padding: 6rem 0; }
  .section-pdp-marquee__track { gap: 12rem; }
  .section-pdp-marquee__item:last-child { padding-right: 12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .section-pdp-marquee__track { transition-duration: 0.01ms; }
  .section-pdp-canvas-scroller__inner--slide { animation-name: none; }
}