/* ============ HEADER ============
   Terukur @1280: static 90.84px (28.42 banner + 62.41 content),
   fixed 62.41px. Tinggi content bukan angka tetap, dia ditentukan
   kolom tengah: 2.5rem + tinggi baris link + 2.4rem. */
.site-header {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: -1px;
  visibility: hidden;
  transition:
    transform 1s var(--ease-in-overshoot),
    visibility 1s;
}
.site-header.is-shown {
  visibility: visible;
}

/* Halaman yang meminta header transparan menaruh header statisnya di LUAR
   alur secara PERMANEN, bukan cuma selagi .is-transparent menempel.

   Ini perbaikan bug, bukan selera. Sebelumnya position: absolute ikut
   .is-transparent, padahal kelas itu dilepas begitu scrollY melewati 4px.
   Akibatnya header masuk kembali ke alur di tengah gulir dan SELURUH
   halaman melompat 92px, lalu melompat balik saat digulir naik lagi.

   Terukur di 1194 lebar: posisi atas hero 0 -> 92 dan tinggi dokumen
   9301 -> 9393, cuma karena berpindah dua piksel dari y=3 ke y=5.

   Deviasi dari Coterie tetap berlaku dan tetap disengaja: mereka membiarkan
   header relative lalu menarik section pertama naik dengan margin negatif.
   Yang berubah cuma pemicunya, dari kelas yang bergoyang saat gulir menjadi
   atribut halaman yang diam. */
body[data-header-transparent="true"] .site-header--static {
  position: absolute;
  top: 0;
  left: 0;
}

/* .is-transparent sekarang HANYA mengurus warna. Jangan kembalikan
   position ke sini. */

/* Header kedua, fixed, tanpa banner. Diparkir di atas layar lalu
   diturunkan dengan translateY(100%).
   Terukur @1280: top -58.5174px, yaitu calc(6.7rem - 1px) negatif. */
.site-header--fixed {
  position: fixed;
  top: calc(var(--header-height-fixed) * -1);
  left: 0;
  will-change: transform;
}
.site-header--fixed.is-shown {
  transform: translateY(100%) translateZ(0);
}

/* Token warna hidup di .site-header__content, bukan di <header>. Persis seperti
   Coterie, dan itu yang membuat header fixed tetap solid walau berada
   di halaman yang header statisnya transparan. */
.site-header__content {
  --color: var(--black);
  --color-bg: var(--white);
  --cta-hover-bg: var(--blue600);
  --cta-hover-color: var(--white);
  position: relative;
  display: grid;
  /* Terverifikasi @900: 300px 300px 300px. @1280 hasilnya
     212.13 / 761.70 / 306.17 karena 1fr itu minmax(auto, 1fr):
     kolom nav melampaui jatah sepertiga, membeku di min-content,
     sisa ruang jatuh ke kolom kiri. */
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  min-height: 6rem;
  color: var(--color);
  background: var(--color-bg);
}
.site-header--static.is-transparent .site-header__content {
  --color: var(--white);
  --color-bg: transparent;
  --cta-hover-bg: var(--white);
  --cta-hover-color: var(--black);
  /* Terukur 0.25s cubic-bezier(0.66, 0, 0.34, 1). Coterie menulisnya
     sebagai transition-all; di sini propertinya disebut satu per satu
     supaya tidak ikut menganimasikan layout. */
  transition:
    color 0.25s cubic-bezier(0.66, 0, 0.34, 1),
    background-color 0.25s cubic-bezier(0.66, 0, 0.34, 1);
}
/* Garis pemisah, semua currentColor opacity 0.2. Terukur. */
.site-header__content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
}

/* Sel grid polos. header_left di Coterie bukan grid item langsung. */
.site-header__left-cell {
  min-width: 0;
}

/* Terukur @1280: inline-flex, lebar hug 167.98px, tinggi 59.5px.
   Bukan 100% kolom dan bukan 100% tinggi baris. */
.site-header__left {
  display: inline-flex;
  align-items: center;
  padding: 2.2rem 0 2.2rem var(--margin);
}
/* Terukur: 1px vertikal di tepi kanan, currentColor opacity 0.2.
   position: relative baru muncul di 1024 ke atas, jadi di bawah itu
   garisnya menempel ke .site-header__content. Diikuti apa adanya. */
.site-header__left::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: currentColor;
  opacity: 0.2;
}

.site-header__burger-btn {
  display: flex;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0;
}
/* Burger: 3 garis 2px, content-box, jarak merata. Terukur 15 x 12. */
.site-header__burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: content-box;
  width: 15px;
  height: 12px;
}
.site-header__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease-in-overshoot);
}
/* Terukur: hover dan focus merenggangkan garis atas dan bawah 100%. */
@media (hover: hover) {
  .site-header__burger-btn:hover .site-header__burger span:first-child {
    transform: translate3d(0, -100%, 0);
  }
  .site-header__burger-btn:hover .site-header__burger span:last-child {
    transform: translate3d(0, 100%, 0);
  }
}
.site-header__burger-btn:focus-visible .site-header__burger span:first-child {
  transform: translate3d(0, -100%, 0);
}
.site-header__burger-btn:focus-visible .site-header__burger span:last-child {
  transform: translate3d(0, 100%, 0);
}
/* Terukur saat drawer terbuka: garis berpencar 250% dan opacity 0. */
.site-header__burger.is-open span {
  opacity: 0;
}
.site-header__burger.is-open span:first-child {
  transform: translate3d(0, -250%, 0);
}
.site-header__burger.is-open span:last-child {
  transform: translate3d(0, 250%, 0);
}

/* Logo SVG inline, fill currentColor supaya ikut token warna.
   Terukur 8.9rem x 1.8rem: 89x18 @375, 104.29x21.09 @900, 79.05x15.98 @1280. */
.site-header__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.site-header__logo {
  width: 8.9rem;
  height: 1.8rem;
}

/* Kolom tengah versi mobile: hanya logo. Inilah yang menentukan tinggi
   baris di bawah 1024, terukur 67px @375 dan 78.49px @900. */
.site-header__center-mobile {
  display: flex;
  justify-content: center;
  padding: 2.5rem var(--col) 2.4rem 2.5rem;
}

.site-header__center {
  display: flex;
  justify-content: center;
  padding: 2.5rem var(--col) 2.4rem 2.5rem;
}
/* Breakpoint nav desktop adalah 1024, bukan 1280. Yang berhenti di 1280
   cuma CTA teks (class hideBelow1280 milik Coterie). Keduanya saling
   melengkapi: di 1024 nav muat justru karena CTA teksnya sudah hilang. */
@media (max-width: 1023.98px) {
  .site-header__center {
    display: none;
  }
}
@media (min-width: 1024px) {
  .site-header__center-mobile {
    display: none;
  }
}

.site-header__link-wrap {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 1.5rem;
}
.site-header__link {
  font-size: clamp(12.6px, 1.4rem, 14px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--color);
  text-decoration: none;
  white-space: nowrap;
  /* Terukur 1.26px @1280 = 0.1em. Ini ruang untuk garis bawah hover,
     dan dia yang membuat tinggi baris link 18.9px, bukan 17.64px. */
  padding-bottom: 0.1em;
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.6s var(--ease-media);
}
@media (hover: hover) {
  .site-header__link:hover {
    background-size: 100% 1px;
    transition-timing-function: var(--ease-in-overshoot);
  }
}
.site-header__link:focus-visible {
  background-size: 100% 1px;
  transition-timing-function: var(--ease-in-overshoot);
}
/* Badge NEW: sibling dari link, bukan anaknya. Terukur display block,
   top -0.8rem, 11px, w600, ls 0.02em, tanpa background, tanpa padding,
   tanpa margin. Jarak 2px ke link datang dari gap .site-header__link-wrap. */
.site-header__new {
  display: block;
  position: relative;
  top: -0.8rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blue);
  pointer-events: none;
}
/* Chevron submenu. Terukur tutup 0.3s cubic-bezier(0.66, 0, 0.34, 1),
   buka rotate(180deg) 0.2s cubic-bezier(0.16, 1.08, 0.38, 0.98).
   Pemicunya hover, terverifikasi lewat mouseenter di sumbernya. */
.site-header__chevron {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 4px;
  transform: rotate(0deg) translateZ(0);
  transition: transform 0.3s cubic-bezier(0.66, 0, 0.34, 1);
}
@media (hover: hover) {
  .site-header__link-wrap:hover .site-header__chevron {
    transform: rotate(180deg) translateZ(0);
    transition: transform 0.2s var(--ease-in-overshoot);
  }
}
/* ponytail: panel mega nav TIDAK dibangun. Isinya tidak ada di
   reference-copy.ts dan aturan DATA BEFORE BUILD melarang mengarangnya.
   Yang ditiru cuma pemicu dan geraknya. */

.site-header__right {
  display: flex;
  height: 100%;
  justify-content: flex-end;
  /* Terukur di header_right: font-size 1.2rem, ls -0.02em. */
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.site-header__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color);
  text-decoration: none;
  transition:
    color 0.6s var(--ease-media),
    background-color 0.6s var(--ease-media);
}
@media (hover: hover) {
  .site-header__cta:hover {
    color: var(--cta-hover-color);
    background-color: var(--cta-hover-bg);
    transition-duration: 0.2s;
  }
}
.site-header__cta:focus-visible,
.site-header__cta:active {
  color: var(--cta-hover-color);
  background-color: var(--cta-hover-bg);
  transition-duration: 0.2s;
}
/* Terukur: padding CTA 3rem dan garis pemisah kiri baru ada di 1024
   ke atas. Di bawah itu ikon memakai var(--margin) dan tanpa garis. */
.site-header__cta-icon {
  padding: 0 var(--margin);
}
.site-header__cta-icon svg {
  width: 2rem;
  height: 2rem;
}
@media (min-width: 1024px) {
  .site-header__cta {
    padding: 0 3rem;
  }
  .site-header__cta::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: currentColor;
    opacity: 0.2;
  }
  .site-header__cta-icon {
    width: 8rem;
    height: 100%;
  }
}
/* CTA teks: terukur 12.6px lh 1.4 ls 0.02em w600, lebar 164.05 @1280. */
.site-header__cta-text {
  font-size: clamp(12.6px, 1.4rem, 14px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-weight: 600;
}
@media (max-width: 1279.98px) {
  .site-header__cta-text {
    display: none;
  }
}

/* Di bawah 1024 logo desktop mati, logo pindah ke kolom tengah. */
@media (max-width: 1023.98px) {
  .site-header__left .site-header__logo-link {
    display: none;
  }
}
@media (min-width: 1024px) {
  .site-header__left {
    position: relative;
    column-gap: 2rem;
    padding: 2.5rem var(--col) 2.4rem 2.5rem;
  }
}