/* ============ DRAWER MOBILE ============
   Terukur dari .sideNav_* Coterie @375. Panel masuk dari kiri:
   right 100% memarkirnya penuh di luar layar, translateX(100%)
   menariknya masuk. Tutup 0.8s cubic-bezier(0.77, 0, 0.175, 1),
   buka 1s cubic-bezier(0.16, 1.08, 0.38, 0.98). */
.side-nav {
  display: flex;
  position: fixed;
  z-index: 20;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
  min-height: 100%;
  /* Sumbernya menulis overflow: clip lalu overflow-y: scroll di rule
     terpisah. Dipadatkan supaya tidak jadi kombinasi terlarang. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  visibility: hidden;
  background-color: var(--white);
  color: var(--black);
  transition:
    transform 0.8s var(--ease-out-quart),
    visibility 0.8s;
}
.side-nav::-webkit-scrollbar {
  display: none;
}
.side-nav.is-open {
  visibility: visible;
  transform: translate3d(100%, 0, 0);
  /* Dua nilai: transform 1s, visibility 0s. Visibility yang beranimasi
     1s tampak sama saja karena interpolasinya langsung melompat ke
     visible, TAPI selama transisi belum mulai nilai terhitungnya masih
     hidden, dan elemen hidden menolak .focus(). Itu membuat fokus
     gagal masuk drawer saat dibuka. Arah tutup tetap 0.8s dari rule
     dasar, jadi drawer tetap terlihat selama meluncur keluar.
     Sumbernya memakai pola yang sama di panel submenu. */
  transition-duration: 1s, 0s;
  transition-timing-function: var(--ease-in-overshoot);
}
.side-nav > nav {
  display: flex;
  width: 100%;
  align-items: flex-start;
  flex-direction: column;
}
/* Shield. Terukur rgba(20, 20, 20, 0.25). Token --overlay hanya 0.2,
   jadi nilainya ditulis literal di sini. */
.side-nav__shield {
  position: fixed;
  z-index: 19;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(20, 20, 20, 0.25);
  cursor: pointer;
  pointer-events: none;
  transform: translateX(-100%);
  transition:
    opacity 0.8s var(--ease-out-quart),
    visibility 0.8s var(--ease-out-quart),
    transform 0s linear 0.8s;
}
.side-nav__shield.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: all;
  transition:
    opacity 1s var(--ease-in-overshoot),
    visibility 1s var(--ease-in-overshoot),
    transform 0s linear;
}
/* Terukur tinggi 60px @375, yaitu 6rem, dengan padding 1.4rem var(--margin).
   Baris ikonnya 44px, jadi dia lebih tinggi daripada content box dan
   di-center keluar padding. Itu memang yang terjadi di sumbernya:
   tombol mulai di y 7.5 dan berakhir di 51.5, masih di dalam 0 sampai 60. */
.side-nav__head {
  display: grid;
  position: sticky;
  z-index: 19;
  top: 0;
  width: 100%;
  height: 6rem;
  align-content: center;
  grid-template-columns: repeat(3, 1fr);
  padding: 1.4rem var(--margin);
  background-color: var(--white);
  border-bottom: 1px solid var(--grey-disabled);
}
.side-nav__cross {
  display: flex;
  align-items: center;
  width: 26px;
  height: 44px;
  padding: 0 1rem 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.side-nav__cross svg {
  width: 1.6rem;
  height: 1.6rem;
}
.side-nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  color: inherit;
}
/* Di sumbernya logo drawer menumpang kelas milik header, jadi blok ini
   ikut terkunci ke blok itu. Di sini logo drawer punya kelas sendiri dan
   ketiga barisnya ditulis langsung. Duplikasi tiga baris ini disengaja,
   lebih murah daripada kaitan silang antar blok. */
.side-nav__logo-mark {
  width: 8.9rem;
  max-width: 9rem;
  height: 1.8rem;
}
.side-nav__icons {
  display: flex;
  justify-content: flex-end;
}
.side-nav__icon {
  padding: 1.2rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.side-nav__icon svg {
  width: 2rem;
  height: 2rem;
}
/* Terukur: flex column, space-between, gap 3.2rem, padding-right margin.
   Saat submenu terbuka daftar ini ikut terdorong -50 persen, yaitu
   187.5px di 375. Easing dorongnya beda sendiri dan tidak ada di
   tokens.css, jadi ditulis literal. */
.side-nav__wrap {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.2rem;
  /* Yang bergulir isi drawer, bukan panelnya. Tanpa ini daftar link
     panjang mendorong seluruh panel ikut bergulir. */
  overflow: auto;
  padding-right: var(--margin);
  transform: translateZ(0);
  transition: transform 0.8s var(--ease-out-quart);
}
.side-nav__wrap.is-hidden {
  transform: translate3d(-50%, 0, 0);
  transition: transform 0.6s cubic-bezier(0.22, 1.1, 0.48, 1);
}
.side-nav__links {
  list-style: none;
  margin: 0;
  padding: 2.4rem var(--margin) 0;
}
/* Terukur h-22, lebar 100%, space-between, margin-bottom 1.5rem.
   Tinggi 24.2 di 375 datang dari t-22 (22px) dikali line-height 1.1.
   position relative wajib: titik biru dipasang sebagai ::before.
   align-items center, bukan baseline, supaya chevron 1.6rem ikut
   duduk di tengah baris dan tidak menambah tinggi.
   Reset background dan border dipakai karena item bersubmenu
   memakai <button>, bukan <a>. */
.side-nav__link {
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
/* Titik biru di kiri, diameter 1rem, mengembang dari scale(0). */
.side-nav__link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 1rem;
  height: 1rem;
  background: var(--blue);
  border-radius: 50%;
  transform: translateY(-50%) scale(0);
}
.side-nav__label {
  display: block;
  position: relative;
}
/* Label item bersubmenu dikunci selebar 10 kolom plus 11 gutter,
   yaitu 303.7px di 375. Jumlah gutter memang lebih banyak satu
   daripada kolom di sumbernya, tidak dikoreksi. */
.side-nav__link--sub .side-nav__label {
  width: calc(10 * var(--col) + 11 * var(--gutter));
}
.side-nav__chevron {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: auto;
  /* Ini posisi DIAM-nya, bukan posisi hover: chevron di markup
     menghadap bawah, rotasi -90 membuatnya menunjuk kanan. */
  transform: rotate(-90deg);
}
.side-nav__link::before,
.side-nav__label,
.side-nav__chevron {
  transition: transform 0.6s var(--ease-out-quart);
}
/* Tiga gerakan sekaligus saat link aktif. Chevron memakai translateY
   di ruang yang SUDAH diputar, jadi hasilnya geser 2rem ke kanan,
   bukan ke bawah. Jeda 0.13s membuatnya menyusul label.
   Hover dipisah ke media query supaya di layar sentuh state-nya
   tidak menempel setelah tap, dan drawer ini memang layar sentuh. */
.side-nav__link:active::before,
.side-nav__link:focus-visible::before {
  transform: translateY(-50%) scale(1) translateZ(0);
  transition-timing-function: var(--ease-in-overshoot);
}
.side-nav__link:active .side-nav__label,
.side-nav__link:focus-visible .side-nav__label {
  transform: translateX(3rem) translateZ(0);
  transition-timing-function: var(--ease-in-overshoot);
}
.side-nav__link:active .side-nav__chevron,
.side-nav__link:focus-visible .side-nav__chevron {
  transform: rotate(-90deg) translateY(2rem);
  transition-timing-function: var(--ease-in-overshoot);
  transition-delay: 0.13s;
}
@media (hover: hover) {
  .side-nav__link:hover::before {
    transform: translateY(-50%) scale(1) translateZ(0);
    transition-timing-function: var(--ease-in-overshoot);
  }
  .side-nav__link:hover .side-nav__label {
    transform: translateX(3rem) translateZ(0);
    transition-timing-function: var(--ease-in-overshoot);
  }
  .side-nav__link:hover .side-nav__chevron {
    transform: rotate(-90deg) translateY(2rem);
    transition-timing-function: var(--ease-in-overshoot);
    transition-delay: 0.13s;
  }
}
/* Badge bersarang di dalam label, jadi geser 3rem-nya ikut label.
   Sumbernya JUGA menargetkan badge di selector transform yang sama,
   dan karena bersarang hasilnya bergeser dua kali. Itu tidak ditiru.
   bottom 1.5rem yang mengangkatnya jadi superscript, ditiru. */
.side-nav__badge {
  position: relative;
  bottom: 1.5rem;
  padding-left: 0.4rem;
  font-size: max(1.1rem, 11px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--blue);
}

/* --- Sublinks bawah drawer ---
   Lebar 33% dihitung dari lebar konten .side-nav__footer-links, yaitu
   375 - 16 (padding kanan .side-nav__wrap) - 32 (padding sendiri) = 327.
   33% dari 327 dikurangi satu gutter = 98.2px, cocok dengan hasil ukur. */
.side-nav__footer-links {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  gap: 0.8rem var(--gutter);
  margin: 0;
  padding: 2.4rem var(--margin) 3.2rem;
  list-style: none;
  border-top: 1px solid var(--hairline);
}
.side-nav__footer-item {
  width: calc(33% - var(--gutter));
  opacity: 0.9;
}
.side-nav__footer-link {
  color: inherit;
  text-decoration: none;
}

/* --- Garis bawah yang tumbuh dari kiri. Dipakai tombol "All" dan
   tautan kaki drawer. Sumbernya memakai background-image gradient, bukan
   text-decoration, supaya tebalnya tetap 1px dan bisa dianimasikan. */
.side-nav__underline {
  display: inline;
  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);
}
.side-nav__back:active .side-nav__underline,
.side-nav__back:focus-visible .side-nav__underline,
.side-nav__footer-link:active,
.side-nav__footer-link:focus-visible {
  background-size: 100% 1px;
  transition-timing-function: var(--ease-in-overshoot);
}
@media (hover: hover) {
  .side-nav__back:hover .side-nav__underline,
  .side-nav__footer-link:hover {
    background-size: 100% 1px;
    transition-timing-function: var(--ease-in-overshoot);
  }
}

/* ============ SUBMENU BERTINGKAT ============
   Bukan accordion. Push-navigation dua level: panel masuk dari KANAN
   sementara daftar level 1 terdorong ke kiri.

   Wadahnya position fixed, tapi saat drawer terbuka .side-nav sedang
   ber-transform, dan elemen ber-transform jadi containing block untuk
   anak fixed. Jadi panel ini terkurung di dalam drawer dan ikut
   meluncur bersamanya, bukan menempel ke viewport. */
.side-nav__subs {
  display: flex;
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  align-items: flex-start;
  flex-direction: column;
  overflow: clip;
  overscroll-behavior: contain;
  /* Hanya panel yang aktif yang menerima klik. */
  pointer-events: none;
}
/* Padding terukur 83.0 atas, 16.0 samping, 24.0 bawah di 375.
   Yang atas adalah 2.4rem ditambah tinggi header drawer, karena
   header sticky z-index 19 menimpa panel ini. */
.side-nav__sub {
  display: flex;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  align-items: flex-start;
  flex-direction: column;
  padding: calc(2.4rem + var(--header-height-fixed)) var(--margin) 2.4rem;
  visibility: hidden;
  background-color: var(--white);
  transform: translate3d(100%, 0, 0);
  /* Durasi 0 dengan delay 0.78s. Saat drawer ditutup panel TETAP di
     tempatnya 780ms lalu hilang seketika, jadi dia ikut meluncur
     keluar bersama drawer. Angkanya 780 dan bukan 800 supaya panel
     sudah hilang sebelum transform .side-nav kembali ke none, karena di
     detik itu containing block-nya melompat ke viewport. */
  transition:
    transform 0s cubic-bezier(0.66, 0, 0.34, 1),
    visibility 0s;
  transition-delay: 0.78s;
}
/* Drawer terbuka: panel yang tidak aktif keluar ke kanan, 0.8s. */
.side-nav.is-open .side-nav__sub {
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
  transition:
    transform 0.8s cubic-bezier(0.66, 0, 0.34, 1),
    visibility 0.8s;
  transition-delay: 0s;
}
/* Panel aktif masuk dari kanan, 0.6s. */
.side-nav.is-open .side-nav__sub.is-open {
  visibility: visible;
  transform: translateZ(0);
  pointer-events: auto;
  transition:
    transform 0.6s var(--ease-in-overshoot),
    visibility 0s;
  transition-delay: 0s;
}
/* Tombol kembali, bertuliskan "All". Terukur 34.8 x 20.8 di 375.
   Angka itu TIDAK akan cocok persis selama font masih placeholder:
   keduanya lebar dan tinggi kotak teks. Sumbernya tidak menyetel
   line-height sama sekali di sini (class p-17 yang dipakai tidak
   punya rule), jadi normal juga yang dipakai di sini. Sisa selisih
   1 sampai 2px murni metrik font. */
.side-nav__back {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin-bottom: 2.4rem;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: max(1.4rem, 12.6px);
  line-height: normal;
}
/* Turun 4px untuk sejajar optis dengan chevron. Ini yang menentukan
   tinggi 20.8: 16.8 tinggi baris teks plus 4. */
.side-nav__back .side-nav__underline {
  margin-top: 4px;
}
/* Chevron yang sama, diputar +90 jadi menunjuk kiri. translateY di
   ruang terputar berarti geser ke kiri, bukan ke bawah. */
.side-nav__back-icon {
  width: 1.6rem;
  height: 1.6rem;
  transform: rotate(90deg);
  transition: transform 0.3s var(--ease-in-overshoot);
}
.side-nav__back:active .side-nav__back-icon,
.side-nav__back:focus-visible .side-nav__back-icon {
  transform: rotate(90deg) translateY(0.5rem);
}
@media (hover: hover) {
  .side-nav__back:hover .side-nav__back-icon {
    transform: rotate(90deg) translateY(0.5rem);
  }
}
.side-nav__sub-content {
  width: 100%;
  overflow: auto;
}
.side-nav__sub-title {
  margin: 0 0 2.2rem;
}
.side-nav__sub-links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Sumbernya punya DUA kelas di ukuran 18: p-18 line-height 1.4 dan
   h-18 line-height 1.1. Item submenu memakai yang h. tokens.css cuma
   punya .t-18 versi paragraf, jadi line-height-nya dikembalikan ke
   1.1 di sini. Bedanya nyata: 19.8px per baris, bukan 25.2. */
.side-nav__sub-links .side-nav__link {
  line-height: 1.1;
}

/* --- Blok promo. Terukur 343x119 di 375: lebar 375 dikurangi padding
   16 dua sisi, tinggi dari gambar 8.7rem plus padding 1.6rem dua sisi. */
.side-nav__promo {
  display: flex;
  width: 100%;
  align-items: stretch;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.1rem;
  margin-top: 0.8rem;
  padding: 1.6rem;
  background-color: var(--stone);
  border-radius: 8px;
}
.side-nav__promo-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
}
/* Sumbernya menandai teks ini p-20, TAPI rule .p-20 tidak pernah
   dikirim di bundle CSS mereka, jadi yang benar-benar tampil adalah
   ukuran body, 1.4rem. Yang ditiru hasil render, bukan niat class. */
.side-nav__promo-text {
  margin: 0;
  font-size: max(1.4rem, 12.6px);
  line-height: 1.4;
}
/* Garis bawah versi sapuan. Gradien selebar 500%: 20 persen pertama
   dan 20 persen terakhir solid, tengahnya transparan. Menggeser
   posisinya dari 100% ke 0 membuat garis tersapu keluar lalu masuk
   lagi dari sisi berlawanan. */
.side-nav__promo-cta {
  display: inline;
  width: fit-content;
  padding-bottom: 0.1em;
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(
    90deg,
    currentColor 0,
    currentColor 20%,
    transparent 0,
    transparent 80%,
    currentColor 0
  );
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 500% 1px;
  transition: background-position 0.6s var(--ease-out-quart);
}
.side-nav__promo-cta:active,
.side-nav__promo-cta:focus-visible {
  background-position: 0 100%;
}
@media (hover: hover) {
  .side-nav__promo-cta:hover {
    background-position: 0 100%;
  }
}
.side-nav__promo-img {
  width: 8.7rem;
  height: 8.7rem;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 0.8rem;
  aspect-ratio: 1;
}

/* --- Batas lebar drawer di desktop ----------------------------
   .side-nav dan .side-nav__sub dua duanya width 100%. Di bawah 1024 itu
   memang benar, drawer selebar layar. Mulai 1024 hasilnya panel putih
   selebar viewport, dan di 1680 itu berarti seluruh halaman tertutup putih.
   Hamburger tidak pernah disembunyikan di desktop (lihat
   .site-header__burger-btn, sesuai sumbernya), jadi keadaan ini benar
   benar bisa dicapai dengan satu klik, bukan cuma teori.

   .side-nav__sub perlu batas sendiri: pembungkusnya .side-nav__subs itu
   position fixed, dan selama .side-nav BELUM ber-transform containing
   block-nya adalah viewport, bukan drawer. Jadi width 100% di sana tidak
   ikut terpotong oleh batas .side-nav.

   Lebarnya kini memakai rumus grid sumbernya, 9 kolom + 8 gutter
   ditambah 4rem untuk sepasang padding dalam. 46rem yang lama ternyata
   kebetulan sama dengan lebar KONTEN sumber, jadi yang selama ini hilang
   persis satu pasang padding: panelnya 70px terlalu sempit @1280 dan
   isinya menempel rapat ke tepi. */
@media (min-width: 1024px) {
  .side-nav,
  .side-nav__sub {
    width: calc(9 * var(--col) + 8 * var(--gutter) + 4rem);
    max-width: none;
  }
  /* box-sizing border-box dari reset membuat padding ini memakan ke
     dalam, sehingga kotak isinya kembali selebar 46rem yang lama. */
  .side-nav {
    padding: 4rem var(--col) 4rem var(--margin);
  }
  /* Ikutan wajib dari batas di atas. Lebar label 10 kolom + 11 gutter
     dihitung di grid mobile 12 kolom, hasilnya 303.7px @375. Di grid
     desktop 24 kolom rumus yang sama jadi 528px @1280, lebih lebar
     daripada drawer, jadi chevron terdorong keluar dan dipotong
     overflow-x hidden. Di desktop label dibiarkan sebesar isinya dan
     chevron kembali dipaku ke kanan oleh margin-left auto. */
  .side-nav__link--sub .side-nav__label {
    width: auto;
  }

  /* Panel sendiri sudah memegang padding, jadi anak anaknya melepas
     padding sisi supaya tidak dobel. Ini yang dilakukan sumbernya juga:
     di mobile padding menempel pada anak, di desktop pindah ke panel. */
  .side-nav__links {
    padding: 2rem 0 0;
  }
  .side-nav__footer-links {
    padding: 3.2rem 0 0;
  }

  /* Kepala drawer dimatikan di desktop. Ruang atas sepenuhnya datang
     dari padding panel, dan tombol silang memang tidak ada di sana.
     Konsekuensinya ditangani di js/side-nav.js: fokus saat membuka
     tidak boleh lagi diarahkan ke tombol yang display none. */
  .side-nav__head {
    display: none;
  }

  /* Ritme baris melebar di desktop. Satu aturan ini juga mengenai
     tautan di dalam submenu, sama seperti sumbernya. */
  .side-nav__link {
    margin-bottom: 2.4rem;
  }
  .side-nav__chevron {
    width: 2.4rem;
    height: 2.4rem;
  }

  /* Ditaruh di sini, sesudah .side-nav__sub-title di baris 438, karena
     spesifisitasnya sama (0,1,0) sehingga yang menang urutan sumber. */
  .side-nav__sub-title {
    margin-bottom: 4rem;
  }
  .side-nav__back {
    margin-bottom: 4rem;
  }

  .side-nav__promo {
    margin-top: 1.6rem;
  }
  .side-nav__promo-img {
    width: 12rem;
    height: 12rem;
  }
}

/* Blok prefers-reduced-motion milik sumber sengaja TIDAK diport ke sini.
   css/reset.css di situs ini sudah mematikan transisi lewat selektor
   universal dengan !important, jadi daftar panjang selektor drawer itu
   cuma mengulang hasil yang sama. Catatan: satu satunya baris yang tidak
   tertutup reset global adalah transition-delay: 0s, jadi delay 0.78s di
   .side-nav__sub tetap berlaku saat motion dikurangi. */

/* Shield hanya berguna mulai 1024. Di bawah itu drawer selebar layar
   sehingga shield tertutup penuh dan tidak pernah bisa diklik; sumbernya
   pun mematikannya di lebar mobile. Tidak ada cara menutup yang hilang,
   karena listener klik shield di js/side-nav.js memang tak terjangkau
   di lebar itu, dan tombol silang tetap ada di kepala drawer. */
@media (max-width: 1023.98px) {
  .side-nav__shield {
    display: none;
  }
}