/* ==========================================================================
   CV Wahana Seni Promotion — stylesheet utama
   Urutan: reset → base → tipografi → layout → komponen → section → responsif
   ========================================================================== */

/* --------------------------------------------------------------- 1. Reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- 2. Base */

html, body { max-width: 100%; }

body {
  font-family: var(--wh-font);
  font-size: var(--wh-body-size);
  line-height: 1.6;
  color: var(--wh-text);
  background: var(--wh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--wh-accent); color: #000; }

:focus-visible {
  outline: 2px solid var(--wh-accent);
  outline-offset: 3px;
  border-radius: var(--wh-radius);
}

.wh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--wh-accent);
  color: #000;
  font-weight: 700;
}
.wh-skip:focus { left: 8px; top: 8px; }

/* ----------------------------------------------------------- 3. Tipografi */

/* Semua judul memakai font display (Barlow Semi Condensed); sisanya
   mewarisi Montserrat dari body. Lebar Semi Condensed yang lebih rapat itu
   disengaja — itu yang membuatnya sedekat mungkin dengan Nexover. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wh-font-display);
  font-weight: 700;
  line-height: 1.1;
}
.wh-h1, .wh-h2, .wh-h3, .wh-h4 { font-family: var(--wh-font-display); }

/* H1 — spesifikasi persis dari switchblade-awwwards.vercel.app */
.wh-h1, h1.wh-h1 {
  font-size: var(--wh-h1-size);
  font-weight: 900;
  line-height: var(--wh-h1-lh);
  letter-spacing: var(--wh-h1-ls);
}

.wh-h2 {
  font-size: var(--wh-h2-size);
  font-weight: 900;
  line-height: calc(.98em + 3pt);
  letter-spacing: -0.01em;
}

.wh-h3 {
  font-size: var(--wh-h3-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.wh-h4 {
  font-size: var(--wh-h4-size);
  font-weight: 700;
  line-height: 1.3;
}

.wh-lead {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.55;
  color: var(--wh-text-soft);
}

.wh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--wh-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wh-accent-text);
}
.wh-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--wh-accent);
}

.wh-muted { color: var(--wh-text-soft); }

/* Aksen highlight pada heading */
.wh-mark-accent { color: var(--wh-accent-deep); }
.wh-mark-red   { color: var(--wh-red); }

/* -------------------------------------------------------------- 4. Layout */

/* Cair: lebarnya mengikuti layar, margin kiri-kanannya tetap. Lihat catatan
   di tokens.css kenapa patokan 1440px dibuang. */
.wh-shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wh-gutter);
}

.wh-shell--tight { max-width: var(--wh-shell-tight); }

.wh-section { padding-block: var(--wh-section); }

.wh-section--base    { background: var(--wh-bg); }
.wh-section--alt { background: var(--wh-bg-alt); }
.wh-section--raised { background: var(--wh-surface); }

.wh-section--band {
  background: var(--wh-band);
  color: var(--wh-text);
}
.wh-section--band .wh-lead,
.wh-section--band .wh-muted { color: var(--wh-text-soft); }

.wh-section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.wh-section-head .wh-eyebrow { margin-bottom: 18px; }
.wh-section-head .wh-lead { margin-top: 20px; }

.wh-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.wh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wh-grid--4 { grid-template-columns: repeat(4, 1fr); }

.wh-rule {
  height: 1px;
  border: 0;
  background: var(--wh-line);
  margin: 0;
}

/* ------------------------------------------------------------- 5. Tombol */

.wh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--wh-radius);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-align: center;
  transition: background var(--wh-fast) var(--wh-ease),
              color var(--wh-fast) var(--wh-ease),
              border-color var(--wh-fast) var(--wh-ease),
              transform var(--wh-fast) var(--wh-ease);
}
.wh-btn:active { transform: translateY(1px); }

/* Latarnya --wh-accent-deep, bukan --wh-accent: teks putih di atas merah
   terang #ED1C24 cuma 4,4:1 — di bawah ambang AA 4,5:1 untuk teks ukuran
   tombol. Di #C2151C jadi 6,1:1. */
.wh-btn--primary {
  background: var(--wh-accent-deep);
  color: #fff;
}
.wh-btn--primary:hover { background: var(--wh-accent); }

.wh-btn--red {
  background: var(--wh-red);
  color: #fff;
}
.wh-btn--red:hover { background: var(--wh-red-bright); }

.wh-btn--ghost {
  border: 1px solid var(--wh-line-strong);
  color: var(--wh-text);
}
.wh-btn--ghost:hover {
  border-color: var(--wh-accent);
  color: var(--wh-accent);
}

.wh-btn--wa {
  background: transparent;
  border: 1px solid var(--wh-accent-deep);
  color: var(--wh-accent-text);
}
.wh-btn--wa:hover { background: #FFF1F1; border-color: var(--wh-accent-text); }

.wh-section--band .wh-btn--ghost {
  border-color: var(--wh-line);
  color: var(--wh-text);
}
.wh-section--band .wh-btn--ghost:hover {
  border-color: var(--wh-accent-deep);
  color: var(--wh-accent-deep);
}

.wh-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Link panah */
.wh-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--wh-accent-text);
}
.wh-link svg { transition: transform var(--wh-fast) var(--wh-ease); }
.wh-link:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------- 6. Header */

.wh-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wh-line);
}

.wh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}

.wh-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.wh-brand img { width: auto; height: 38px; }   /* mark aslinya 289x256, kunci tingginya */
.wh-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.wh-brand__name {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.wh-brand__sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wh-text-faint);
}

.wh-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.wh-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--wh-text-soft);
  transition: color var(--wh-fast) var(--wh-ease);
}
.wh-nav a:hover,
.wh-nav .current-menu-item > a,
.wh-nav .current_page_item > a { color: var(--wh-text); }

/* --- Menu lipat "Produk" ---------------------------------------------- */

/* Dibuka lewat :hover DAN :focus-within. focus-within itu yang membuatnya
   bisa dipakai tanpa tetikus: tab ke "Produk" dan panelnya ikut terbuka. */
.wh-nav__has-panel { position: relative; }

.wh-nav__link { display: inline-flex; align-items: center; gap: 5px; }

.wh-nav__caret {
  transition: transform var(--wh-fast) var(--wh-ease);
}
.wh-nav__has-panel:hover .wh-nav__caret,
.wh-nav__has-panel:focus-within .wh-nav__caret { transform: rotate(180deg); }

.wh-panel {
  position: absolute;
  top: 100%;
  left: -24px;
  z-index: 60;
  /* Lebar dipatok. Panel ini position:absolute sehingga lebarnya
     shrink-to-fit; tanpa angka tetap, kolom daftarnya mengkerut sampai nyaris
     nol dan tiap kata jatuh ke barisnya sendiri. */
  width: 568px;
  /* Jembatan 14px di atas panel: tanpa itu panel tertutup saat kursor
     menyeberangi celah antara teks menu dan kotaknya. */
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 220ms var(--wh-ease),
              transform 220ms var(--wh-ease),
              visibility 0s linear 220ms;
}
.wh-nav__has-panel:hover .wh-panel,
.wh-nav__has-panel:focus-within .wh-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.wh-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 208px;
  gap: 22px;
  padding: 18px;
  background: var(--wh-surface);
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  box-shadow: 0 26px 54px -18px rgba(18, 18, 18, 0.26);
}

.wh-panel__list { list-style: none; padding: 0; margin: 0; }

.wh-panel__item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--wh-radius);
  transition: background var(--wh-fast) var(--wh-ease);
}
.wh-panel__item:hover { background: var(--wh-bg-alt); }

.wh-panel__name {
  display: block;
  font-family: var(--wh-font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--wh-text);
}
.wh-panel__desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--wh-text-faint);
}

.wh-panel__all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wh-accent-text);
}

/* Foto kategori: semua ditumpuk di satu sel grid, hanya yang .is-active yang
   terlihat. Menumpuknya (bukan mengganti src) berarti tidak ada kedip saat
   ganti kategori — semua foto sudah terunduh sejak panel dibuka. */
.wh-panel__media {
  display: grid;
  align-self: start;
  aspect-ratio: 1 / 1;
  padding: 16px;
  background: var(--wh-bg-alt);
  border-radius: var(--wh-radius);
  overflow: hidden;
}
.wh-panel__img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 280ms var(--wh-ease), transform 280ms var(--wh-ease);
}
.wh-panel__img.is-active { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wh-panel, .wh-panel__img { transition-duration: 1ms; }
  .wh-panel__img { transform: none; }
}

.wh-header__cta { display: flex; align-items: center; gap: 12px; }
.wh-header__cta .wh-btn { padding: 11px 20px; font-size: 14px; }

.wh-burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wh-line-strong);
  border-radius: var(--wh-radius-sm);
}
.wh-burger span {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--wh-text);
}
.wh-burger span::before,
.wh-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--wh-text);
  transition: transform var(--wh-fast) var(--wh-ease);
}
.wh-burger span::before { top: -6px; }
.wh-burger span::after  { top: 6px; }

.wh-burger[aria-expanded="true"] span { background: transparent; }
.wh-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.wh-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.wh-mobile-nav {
  display: none;
  border-top: 1px solid var(--wh-line);
  background: var(--wh-bg);
  padding: 18px var(--wh-gutter) 28px;
}
.wh-mobile-nav.is-open { display: block; }
.wh-mobile-nav a {
  display: block;
  padding: 13px 0;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--wh-line);
}
/* Kategori produk di menu ponsel: daftar bertakuk di bawah item "Produk".
   Panel hover berfoto tidak berguna tanpa tetikus, jadi di sini kategorinya
   cukup jadi tautan biasa yang lebih kecil dan menjorok. */
.wh-mobile-nav__sub { padding-left: 14px; border-left: 2px solid var(--wh-line); }
.wh-mobile-nav__sub a {
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--wh-text-soft);
}
.wh-mobile-nav__sub a:last-child { border-bottom: 0; }

.wh-mobile-nav .wh-btn { margin-top: 18px; width: 100%; }

/* --------------------------------------------------------------- 7. Hero */

/* Hero sekarang satu layar penuh dan memuat strip logo klien di kakinya.
   Strip itu dulu section sendiri; digabung ke sini supaya klaim "500+ brand"
   dan buktinya terbaca sekaligus tanpa perlu scroll.

   `min-height`, bukan `height`: kalau copy-nya tidak muat (layar pendek,
   font diperbesar pengguna), hero boleh tumbuh daripada memotong isinya. */
.wh-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--wh-header-h));
  padding-top: clamp(14px, 1.8vw, 26px);
  overflow: hidden;
}

/* Cahaya hijau dan merah yang sangat lembut di belakang hero. */
.wh-hero::before {
  content: "";
  position: absolute;
  top: -24%;
  right: -10%;
  width: min(820px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(57,181,74,0.10) 0%, rgba(57,181,74,0) 68%);
  pointer-events: none;
}
.wh-hero::after {
  content: "";
  position: absolute;
  bottom: -32%;
  left: -14%;
  width: min(700px, 74vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(237,28,36,0.06) 0%, rgba(237,28,36,0) 70%);
  pointer-events: none;
}

.wh-hero__inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(12px, 1.5vw, 24px);
  align-items: center;
  padding-block: clamp(12px, 1.5vw, 24px);
}

/* Kolom kiri dibatasi: shell sudah cair, tanpa ini baris teksnya ikut
   melebar sampai tak terbaca di layar 2500px. */
.wh-hero__copy { max-width: 46rem; }

.wh-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  margin-bottom: clamp(16px, 2vw, 24px);
  border: 1px solid var(--wh-line-strong);
  border-radius: var(--wh-radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--wh-text-soft);
}

.wh-hero__title { margin-bottom: clamp(10px, 1.2vw, 16px); }

/* Baris kedua judul: menyampaikan MOQ dan posisi harga sebelum pembaca masuk
   ke paragraf. Dibuat lebih besar dari lead tapi jelas di bawah H1. */
.wh-hero__sub {
  margin-bottom: clamp(14px, 1.8vw, 20px);
  /* Diturunkan dari clamp(18px, 1.9vw, 24px) — pada layar lebar 24px terlalu
     dekat ke H1 dan baris ini jadi ikut terbaca sebagai judul, bukan
     penjelasnya. */
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--wh-text);
}

/* Lead hero diturunkan dari .wh-lead bawaan (maks 21px). Setelah sub-head
   dikecilkan, lead 21px jadi LEBIH besar daripada sub-head di atasnya dan
   urutan bacanya terbalik. Tangganya sekarang 50 / 20 / 18. */
.wh-hero__lead {
  max-width: 48ch;
  margin-bottom: clamp(20px, 2.4vw, 28px);
  font-size: clamp(15.5px, 1.35vw, 18px);
}

/* Tiga poin kepercayaan di bawah tombol. Centang hijau, bukan bullet:
   daftar ini dibaca sebagai jaminan, bukan sebagai daftar isi. */
.wh-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2vw, 28px);
  margin-top: clamp(18px, 2.2vw, 26px);
  list-style: none;
  padding: 0;
}
.wh-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wh-text-soft);
}
.wh-hero__points svg { flex-shrink: 0; color: var(--wh-accent-deep); }

/* Kartu foto produk, mengikuti hero situs live: kartu putih dimiringkan
   sedikit, dengan dua badge yang menggantung di sudutnya. Fotonya 684x639,
   jauh lebih besar daripada cutout katalog yang hanya 400px. */
.wh-hero__card {
  position: relative;
  justify-self: end;
  width: 100%;
  /* Dibesarkan dari 540px: bukti sosial pindah ke kolom kiri, jadi kolom
     kanan tidak lagi berbagi tinggi dengan strip logo. Tetap dibatasi tinggi
     layar juga — pada layar pendek-lebar, kartu yang hanya dibatasi lebar
     akan mendorong isi hero keluar dari lipatan. */
  max-width: none;
  padding: 20px;
  background: #fff;
  border-radius: var(--wh-radius);
  box-shadow: 0 24px 48px -14px rgba(18, 18, 18, 0.22);
  transform: rotate(3deg);
  animation: wh-float 7s ease-in-out infinite;
}
.wh-hero__card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wh-radius);
}

@keyframes wh-float {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-20px); }
}

/* Badge menggantung di sudut kartu. */
.wh-hero__tag {
  position: absolute;
  z-index: 2;
  padding: 9px 17px;
  border-radius: var(--wh-radius);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(18, 18, 18, 0.16);
}
.wh-hero__tag--quality {
  top: -14px;
  right: -14px;
  background: #FCD34D;
  color: var(--wh-red-deep);
  transform: rotate(12deg);
}
.wh-hero__tag--moq {
  bottom: -14px;
  left: -14px;
  background: var(--wh-accent-deep);
  color: #fff;
  transform: rotate(-12deg);
}

/* Kartu yang bergoyang terus bisa mengganggu; hormati preferensi pengguna. */
@media (prefers-reduced-motion: reduce) {
  .wh-hero__card { animation: none; }
}

/* Mode ringkas untuk layar pendek-lebar (laptop 1366x768, 1440x900).
   Hero harus muat satu layar berikut strip logonya, dan di tinggi segitu
   skala penuh tidak cukup. Yang dipangkas jarak antar blok dan ukuran H1 —
   urutan serta isi copy-nya tetap sama persis. */
@media (min-width: 1081px) and (max-height: 960px) {
  .wh-hero                { padding-top: 10px; }
  .wh-hero__inner         { padding-block: 10px; }
  .wh-hero__badge         { margin-bottom: 12px; }
  .wh-hero .wh-h1         { font-size: clamp(34px, 3.6vw, 50px); }
  .wh-hero__title         { margin-bottom: 8px; }
  /* Sub-head dan lead diturunkan BERSAMA supaya tangganya tetap menurun
     (sub selalu di atas lead); kalau hanya salah satu yang dikecilkan,
     urutan bacanya terbalik di layar pendek. */
  .wh-hero__sub           { margin-bottom: 12px; font-size: clamp(16px, 1.35vw, 18.5px); }
  .wh-hero__lead          { font-size: clamp(14.5px, 1.15vw, 16.5px); }
  .wh-hero__lead          { margin-bottom: 16px; }
  .wh-hero__points        { margin-top: 14px; }

  .wh-hero__proof         { margin-top: 16px; padding-top: 14px; }
  .wh-hero__proof .wh-clients__label { margin-bottom: 10px; }
}

/* Tingkat kedua untuk laptop 1366x768, layar desktop paling pendek yang masih
   umum. Tanpa ini strip logonya meleset sekitar 6px di bawah lipatan. */
@media (min-width: 1081px) and (max-height: 820px) {
  .wh-hero .wh-h1  { font-size: clamp(32px, 3.2vw, 44px); }
  .wh-hero__sub    { margin-bottom: 10px; }
  .wh-hero__lead   { margin-bottom: 10px; }
  .wh-hero__points { margin-top: 8px; }
  .wh-hero__proof  { margin-top: 10px; padding-top: 8px; }
  .wh-hero__proof .wh-clients__label { margin-bottom: 8px; }
  /* Sisa 2px terakhir supaya hero benar-benar berhenti di lipatan pada
     laptop 1366x768 — layar desktop terpendek yang masih umum. */
  .wh-hero        { padding-top: 6px; }
  .wh-hero__inner { padding-block: 6px; }

}

/* ------------------------------------------------------- 8. Baris angka */

/* Dipindah ke dalam section Workshop — dulu pita penuh tersendiri. */
.wh-numbers {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: clamp(16px, 2.4vw, 30px) clamp(26px, 4vw, 54px);
  margin-top: clamp(26px, 3.2vw, 38px);
}
.wh-numbers__num {
  display: block;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wh-accent-deep);
}
.wh-numbers__lbl {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--wh-text-faint);
}

/* ---------------------------------------------------- 9. Kartu & masalah */

.wh-card {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--wh-surface);
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow);
  transition: border-color var(--wh-normal) var(--wh-ease),
              box-shadow var(--wh-normal) var(--wh-ease),
              transform var(--wh-normal) var(--wh-ease);
}
.wh-card:hover {
  border-color: var(--wh-line-strong);
  box-shadow: var(--wh-shadow-lift);
  transform: translateY(-3px);
}
.wh-card__title { margin-bottom: 10px; }
.wh-card__body { font-size: 15px; color: var(--wh-text-soft); }

/* Tabel perbandingan: menggantikan sepuluh kartu masalah + solusi. */
.wh-compare {
  background: var(--wh-surface);
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow);
  overflow: hidden;
}

.wh-compare__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--wh-line);
}
.wh-compare__label {
  padding: 14px clamp(18px, 2.4vw, 28px);
  font-size: var(--wh-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wh-compare__label--bad  { color: var(--wh-text-faint); }
.wh-compare__label--good {
  color: var(--wh-accent-text);
  background: rgba(57, 181, 74, 0.06);
  border-left: 1px solid var(--wh-line);
}

.wh-compare__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--wh-line);
}
.wh-compare__row:first-of-type { border-top: 0; }

.wh-compare__bad,
.wh-compare__good {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: clamp(14px, 1.8vw, 19px) clamp(18px, 2.4vw, 28px);
  font-size: 15px;
  line-height: 1.45;
}
.wh-compare__bad svg,
.wh-compare__good svg { flex-shrink: 0; margin-top: 4px; }

.wh-compare__bad {
  color: var(--wh-text-faint);
}
.wh-compare__bad svg { color: var(--wh-red); }

.wh-compare__good {
  color: var(--wh-text);
  font-weight: 500;
  background: rgba(57, 181, 74, 0.06);
  border-left: 1px solid var(--wh-line);
}
.wh-compare__good svg { color: var(--wh-accent-deep); }

/* ------------------------------------------------------------ 10. Produk */

.wh-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
}

/* Shell sudah cair, jadi yang menahan ubin supaya tidak membengkak adalah
   jumlah kolomnya. Lompat 3 -> 6, melewati 4 dan 5: homepage menampilkan 6
   produk dan katalog 18, dua-duanya habis dibagi 3 dan 6 — jadi tidak pernah
   ada baris terakhir yang pincang. Pada 2560px ubinnya ~380px, pas. */
@media (min-width: 1900px) {
  .wh-products__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Grid lain yang jumlah isinya tidak tetap: lebar ubin yang dipatok, kolomnya
   menyesuaikan. Tanpa ini kartu artikel jadi selebar setengah layar. */
@media (min-width: 1700px) {
  .wh-posts,
  .wh-grid--3 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}

/* Kartu produk gaya Blunt: foto yang bekerja, teks seminimal mungkin. */
.wh-product {
  position: relative;
  display: flex;
  flex-direction: column;
}

.wh-product__media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  aspect-ratio: 1 / 1;
  /* Pada lebar di antara dua breakpoint kolom, ubin persegi bisa tumbuh
     sampai ~600px dan fotonya (maks 340px) tenggelam di tengah ruang kosong.
     Batas ini membuatnya melebar mendatar, bukan membesar ke segala arah. */
  max-height: 460px;
  padding: 22px 26px 30px;
  overflow: hidden;
  background: var(--wh-bg-alt);
  border-radius: var(--wh-radius);
  transition: background var(--wh-normal) var(--wh-ease);
}
.wh-product:hover .wh-product__media { background: #EFEEE9; }

/* Tagline duduk DI ATAS foto, bukan di bawahnya. */
.wh-product__tagline {
  flex-shrink: 0;
  min-height: calc(2 * 1.35em);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--wh-text-faint);
  /* z-index + posisi relatif: tagline harus duduk DI ATAS lapisan hover,
     bukan di belakangnya — kalau tertimpa, warnanya jadi abu gelap di atas
     latar gelap dan praktis hilang. */
  position: relative;
  z-index: 3;
  transition: color var(--wh-normal) var(--wh-ease);
}
.wh-product:hover .wh-product__tagline,
.wh-product:focus-within .wh-product__tagline { color: rgba(255, 255, 255, 0.72); }

/* Cutout HD 1:1: gunakan sisa tinggi frame, tampilkan seluruh tas dan tali. */
.wh-product__media img {
  flex: 1 1 0%;
  min-height: 0;
  align-self: center;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 0;
  object-fit: contain;
  transition: transform 480ms var(--wh-ease);
}
.wh-product:hover .wh-product__media img { transform: none; }

/* Lapisan hover: "Cocok untuk" + tag acara, naik dari bawah menutupi foto.
   Tujuannya menjawab satu pertanyaan yang selalu muncul di kepala calon klien
   saat melihat katalog — "ini cocoknya buat apa?" — tanpa menambah teks
   permanen yang membuat grid-nya ramai. */
.wh-product__hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 22px;
  /* Jauh lebih terang daripada versi pertama (0,94/0,86/0,55) — fotonya
     produk, dan kalau tertutup gelap pekat pembaca kehilangan hal yang
     justru sedang dilihatnya. Gradien tetap menebal di bawah supaya pil
     tagnya tetap terbaca. */
  background: linear-gradient(to top,
              rgba(20, 24, 21, 0.72) 0%,
              rgba(20, 24, 21, 0.46) 48%,
              rgba(20, 24, 21, 0.12) 100%);
  opacity: 0;
  /* visibility ikut ditransisikan supaya lapisan tidak menangkap klik saat
     tersembunyi, tapi tetap bisa memudar dengan halus. */
  visibility: hidden;
  transition: opacity var(--wh-normal) var(--wh-ease),
              visibility 0s linear var(--wh-normal);
}

.wh-product:hover .wh-product__hover,
.wh-product:focus-within .wh-product__hover {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.wh-product__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Tag naik sedikit satu per satu. Jedanya kecil (40ms) — cukup untuk terasa
   hidup, tidak sampai membuat orang menunggu. */
.wh-product__tag {
  padding: 6px 12px;
  border-radius: var(--wh-radius);
  /* Pilnya sendiri yang dibuat pekat, bukan overlay-nya — begitu overlay
     diterangkan, pil transparan jadi tidak terbaca di atas foto terang. */
  background: rgba(14, 17, 15, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(3px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 340ms var(--wh-ease), opacity 340ms var(--wh-ease);
}
.wh-product:hover .wh-product__tag,
.wh-product:focus-within .wh-product__tag { transform: none; opacity: 1; }
.wh-product:hover .wh-product__tag:nth-child(2) { transition-delay: 40ms; }
.wh-product:hover .wh-product__tag:nth-child(3) { transition-delay: 80ms; }
.wh-product:hover .wh-product__tag:nth-child(4) { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .wh-product__tag { transform: none; transition: opacity 120ms linear; }
}

/* Di layar sentuh tidak ada hover: lapisan ini tidak akan pernah muncul dan
   hanya menambah markup mati, jadi disembunyikan sepenuhnya. Informasinya
   tetap ada di halaman detail produk. */
@media (hover: none) {
  .wh-product__hover { display: none; }
}

/* Badge "Paling Populer" — garis luar bercahaya, bukan bidang terisi.
   Terisi penuh akan beradu dengan foto produk di belakangnya; outline
   bercahaya menandai tanpa menutupi. */
.wh-product__populer {
  position: absolute;
  top: -14px;
  right: 14px;
  z-index: 3;
  padding: 6px 13px;
  border: 1.5px solid var(--wh-accent);
  border-radius: var(--wh-radius);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wh-accent-text);
  box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.14),
              0 0 18px rgba(237, 28, 36, 0.45);
  animation: wh-glow 2.6s ease-in-out infinite;
}

@keyframes wh-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.12),
                         0 0 14px rgba(237, 28, 36, 0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(237, 28, 36, 0.18),
                         0 0 24px rgba(237, 28, 36, 0.60); }
}

@media (prefers-reduced-motion: reduce) {
  .wh-product__populer { animation: none; }
}

/* Ubin produk populer ikut diberi garis tipis supaya kartunya menonjol dari
   kartu lain dalam grid, bukan hanya badge-nya. */
.wh-product--populer .wh-product__media {
  box-shadow: inset 0 0 0 1.5px rgba(237, 28, 36, 0.38);
}

.wh-product__body { padding: 17px 2px 0; }

.wh-product__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.wh-product__name a { transition: color var(--wh-fast) var(--wh-ease); }
.wh-product:hover .wh-product__name a { color: var(--wh-accent-text); }

.wh-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 9px;
}
.wh-product__meta div { display: flex; gap: 6px; }
.wh-product__meta dt {
  font-size: 13px;
  color: var(--wh-text-faint);
}
.wh-product__meta dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--wh-text-soft);
}

/* ----------------------------------------------------------- 11. Bukti */

/* Bukti sosial di kaki kolom KIRI hero — rata kiri, sejajar dengan teks di
   atasnya. Sebelumnya strip ini melebar penuh ke tepi layar; dirapatkan ke
   kolom teks supaya hanya ada satu garis tepi kiri yang dibaca mata.

   Logo dibuat abu-abu secara default: lima logo farmasi penuh warna
   (magenta, merah, biru, kuning) berjejer akan bertabrakan dengan hijau brand
   dan merebut perhatian dari H1. Warna aslinya muncul saat hover. */
.wh-hero__proof {
  margin-top: clamp(22px, 2.8vw, 34px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--wh-line);
}

.wh-clients__label {
  margin-bottom: clamp(12px, 1.5vw, 18px);
  font-size: var(--wh-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--wh-text-faint);
}

.wh-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 1.6vw, 24px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.wh-logos__item {
  display: flex;
  align-items: center;
}

/* Lima logo ini rasionya jauh berbeda (Eisai 1,77 sampai United Tractors 5,35).
   Kalau disamakan tingginya saja, yang lebar jadi raksasa. Jadi tingginya
   dibatasi DAN lebarnya dibatasi: object-fit mengecilkan yang terlalu lebar
   sampai muat, sehingga bobot optiknya setara. */
.wh-logos__item img {
  height: calc(clamp(32px, 3vw, 42px) - 4pt);
  max-width: calc(clamp(110px, 11vw, 154px) - 4pt);
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter var(--wh-normal) var(--wh-ease),
              opacity var(--wh-normal) var(--wh-ease);
}

.wh-logos__item img:hover { filter: none; opacity: 1; }

@media (min-width: 1081px) {
  /* The benefits determine the shared width; logos end at the final 100%. */
  .wh-hero__trust { width: max-content; max-width: 100%; }
  .wh-hero__trust .wh-hero__proof { contain: inline-size; }
  .wh-hero__proof .wh-logos {
    display: grid;
    grid-template-columns: 2.8fr 1.775fr 2.275fr 2.683fr 4.055fr;
  }
  .wh-hero__proof .wh-logos__item { min-width: 0; }
  .wh-hero__proof .wh-logos__item img { max-width: 100%; object-position: left center; }
  .wh-hero__proof .wh-logos__item:last-child { justify-content: flex-end; }
  .wh-hero__proof .wh-logos__item:last-child img { object-position: right center; }
}

@media (min-width: 1081px) and (max-width: 1280px) {
  .wh-hero__trust .wh-hero__points { column-gap: 12px; }
}

@media (hover: none) {
  .wh-logos__item img { filter: none; opacity: 0.9; }
}

/* Baris judul section: judul di kiri, satu link di kanan.
   Menggantikan blok judul + paragraf + dua tombol yang dulu makan tempat. */
.wh-section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: clamp(26px, 3.4vw, 42px);
}

/* Alur lima langkah sebagai lintasan lari: satu garis menyambung dari START
   sampai bendera finish.

   Garisnya digambar per langkah (::after) dengan `gap: 0` — jaraknya diambil
   dari padding — supaya garisnya bersambung tanpa putus, DAN supaya saat grid
   membungkus di layar sempit tiap baris otomatis dapat lintasannya sendiri
   (garis absolut tunggal akan menembus celah antar baris). */
.wh-marathon {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.wh-marathon__step {
  position: relative;
  padding: 0 clamp(12px, 1.6vw, 24px) 0 0;
}

/* Ruas lintasan. Ujung kiri ruas pertama dan ujung kanan ruas terakhir
   ditarik masuk setengah penanda supaya garisnya berhenti tepat di tengah
   penanda, bukan menjulur keluar. */
.wh-marathon__step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--wh-line-strong);
}
.wh-marathon__step:first-child::after { left: 21px; }
.wh-marathon__step:last-child::after  { right: 21px; }

/* Penanda duduk DI ATAS garis, ditarik naik separuh tingginya.

   Pergeseran mendatar: tanpa ini tiap penanda menempel di tepi kiri kolomnya,
   sehingga penanda terakhir berhenti seperlima layar sebelum tepi kanan dan
   lintasannya terlihat pincang. Rumusnya menyebar kelima penanda rata dari
   tepi ke tepi — persentase di sini relatif terhadap lebar KOLOM (1/5 lebar
   total), jadi 25% kolom = 1/20 lebar total, dan 10.5px = seperempat lebar
   penanda. Pada langkah terakhir (--i: 4) hasilnya tepat `100% - 42px`,
   yaitu rata tepi kanan. */
.wh-marathon__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-bottom: 14px;
  margin-left: calc(var(--i, 0) * (25% - 10.5px));
  border: 2px solid var(--wh-accent-deep);
  border-radius: var(--wh-radius);
  background: var(--wh-band);
  font-family: var(--wh-font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--wh-accent-text);
}

/* Teks ikut bergeser bersama penandanya, kalau tidak ia melayang lepas dari
   penanda yang sudah pindah. */
.wh-marathon__name,
.wh-marathon__meta { margin-left: calc(var(--i, 0) * (25% - 10.5px)); }

/* Langkah terakhir dikecualikan: penandanya rata tepi kanan, jadi kalau
   teksnya ikut digeser sejauh itu ia hanya kebagian selebar penanda (42px)
   dan "Gratis Jabodetabek" pecah jadi tiga baris. Teksnya dibiarkan memakai
   lebar kolom penuh lalu dirata-kanankan, sehingga tetap berakhir persis di
   bawah penandanya. */
.wh-marathon__step:last-child { padding-right: 0; }
.wh-marathon__step:last-child .wh-marathon__name {
  margin-left: 0;
  justify-content: flex-end;
}
.wh-marathon__step:last-child .wh-marathon__meta {
  margin-left: 0;
  text-align: right;
}

/* Bendera finish: penanda terisi penuh, ikonnya putih. Inilah titik yang
   dituju seluruh lintasan, jadi dia yang paling berat secara visual. */
.wh-marathon__step--finish .wh-marathon__marker {
  background: var(--wh-accent-deep);
  border-color: var(--wh-accent-deep);
  color: #fff;
}

.wh-marathon__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 700;
  line-height: 1.2;
}

/* Label START / FINISH. Kecil saja — metaforanya sudah terbaca dari garis
   dan benderanya; label ini hanya menamai kedua ujungnya. */
.wh-marathon__flag {
  padding: 3px 8px;
  border-radius: var(--wh-radius);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.wh-marathon__flag--start {
  background: var(--wh-surface);
  border: 1px solid var(--wh-line-strong);
  color: var(--wh-text-faint);
}
.wh-marathon__flag--finish {
  background: var(--wh-accent-deep);
  color: #fff;
}

.wh-marathon__meta {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--wh-text-faint);
}

/* Catatan kasus di bawah baris angka workshop. */
.wh-casenote {
  max-width: 48ch;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-left: 16px;
  border-left: 2px solid var(--wh-accent);
  font-size: 15px;
  line-height: 1.55;
  color: var(--wh-text-soft);
}
.wh-casenote b { color: var(--wh-text); font-weight: 700; }

/* ------------------------------------------------ 11b. Testimoni klien */

/* Satu layar penuh, satu kutipan pada satu waktu. Kekuatannya dari ruang
   kosong di sekitarnya, jadi section ini sengaja tidak diisi apa pun lain. */
.wh-quotes {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: clamp(72px, 9vw, 128px);
  background: var(--wh-bg);
  border-block: 1px solid var(--wh-line);
}

.wh-quotes__inner { width: 100%; text-align: center; }

.wh-quotes__eyebrow {
  margin-bottom: clamp(26px, 3.4vw, 46px);
  font-size: var(--wh-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wh-text-faint);
}

/* Semua kutipan ditumpuk di sel grid yang sama supaya tinggi section tidak
   melompat saat berganti. */
.wh-quotes__stage { display: grid; }

.wh-quotes__item {
  grid-area: 1 / 1;
  margin: 0;
  /* Lebar eksplisit, bukan satuan ch: `ch` mengikuti font-size elemen ini
     (warisan body), bukan font-size kutipannya — pakai ch di sini
     menghasilkan kolom sempit setinggi layar. */
  max-width: min(100%, 1100px);
  justify-self: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 520ms var(--wh-ease),
              transform 520ms var(--wh-ease),
              visibility 0s linear 520ms;
}
.wh-quotes__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.wh-quotes__mark {
  display: block;
  margin-bottom: -8px;
  font-family: var(--wh-font-display);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 900;
  line-height: 0.7;
  color: var(--wh-accent);
  opacity: 0.26;
}

.wh-quotes__text {
  margin: 0;
  font-size: var(--wh-quote-size);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.wh-quotes__who {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(26px, 3.2vw, 44px);
  text-align: left;
}

.wh-quotes__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--wh-radius);
  background: var(--wh-accent-deep);
  font-family: var(--wh-font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}

.wh-quotes__name {
  display: block;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 700;
  color: var(--wh-text);
}
.wh-quotes__org {
  display: block;
  margin-top: 1px;
  font-size: clamp(13px, 1.15vw, 14.5px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wh-text-faint);
}

.wh-quotes__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(34px, 4.4vw, 56px);
}

.wh-quotes__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--wh-line-strong);
  border-radius: var(--wh-radius);
  color: var(--wh-text-soft);
  transition: border-color var(--wh-fast) var(--wh-ease),
              color var(--wh-fast) var(--wh-ease);
}
.wh-quotes__arrow:hover {
  border-color: var(--wh-accent);
  color: var(--wh-accent-text);
}

.wh-quotes__dots { display: flex; gap: 10px; }

.wh-quotes__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: var(--wh-radius);
  background: var(--wh-line-strong);
  transition: background var(--wh-fast) var(--wh-ease),
              transform var(--wh-fast) var(--wh-ease);
}
.wh-quotes__dot:hover { background: var(--wh-text-faint); }
.wh-quotes__dot.is-active {
  background: var(--wh-accent);
  transform: scale(1.3);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------- 12. Workshop */

.wh-workshop__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.wh-workshop__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
}
.wh-workshop__shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  aspect-ratio: 3 / 2;
}
.wh-workshop__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--wh-ease);
}
.wh-workshop__shot:hover img { transform: scale(1.06); }
.wh-workshop__shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 14px 11px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}



/* ---------------------------------------------------------- 13. Proses */

.wh-steps { display: grid; gap: 0; }

.wh-step {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--wh-line);
}
.wh-step:last-child { border-bottom: 1px solid var(--wh-line); }

.wh-step__num {
  font-size: clamp(34px, 4.4vw, 50px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--wh-accent-deep);
}
.wh-step__title { margin-bottom: 7px; }
.wh-step__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--wh-text-soft);
  max-width: 62ch;
}
.wh-step__meta {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--wh-text-soft);
}

/* ------------------------------------------------------------- 14. FAQ */

.wh-faq { display: grid; gap: 0; }

.wh-faq__item { border-top: 1px solid var(--wh-line); }
.wh-faq__item:last-child { border-bottom: 1px solid var(--wh-line); }

.wh-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  transition: color var(--wh-fast) var(--wh-ease);
}
.wh-faq__q:hover { color: var(--wh-accent-deep); }

.wh-faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.wh-faq__sign::before,
.wh-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--wh-accent);
  transform: translate(-50%, -50%);
  transition: transform var(--wh-normal) var(--wh-ease);
}
.wh-faq__sign::before { width: 15px; height: 2px; }
.wh-faq__sign::after  { width: 2px; height: 15px; }
.wh-faq__q[aria-expanded="true"] .wh-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.wh-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--wh-normal) var(--wh-ease);
}
.wh-faq__a.is-open { grid-template-rows: 1fr; }
.wh-faq__a > div { overflow: hidden; }
.wh-faq__a p {
  padding-bottom: 24px;
  max-width: 76ch;
  font-size: 15px;
  line-height: 1.68;
  color: var(--wh-text-soft);
}
.wh-faq__a p + p { padding-top: 0; margin-top: -8px; }

/* -------------------------------------------------------- 15. CTA & form */

.wh-cta {
  position: relative;
  overflow: hidden;
  background: var(--wh-bg-alt);
}
.wh-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 110vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(57,181,74,0.09) 0%, rgba(57,181,74,0) 62%);
  pointer-events: none;
}
.wh-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.wh-contact-list { display: grid; gap: 16px; margin-top: 30px; }
.wh-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15px;
}
.wh-contact-item svg { flex-shrink: 0; margin-top: 3px; color: var(--wh-accent-deep); }
.wh-contact-item b { display: block; font-weight: 700; }
.wh-contact-item span { color: var(--wh-text-soft); }

/* Form request quote */
.wh-form {
  padding: clamp(24px, 3vw, 34px);
  background: var(--wh-surface);
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow-lift);
}
.wh-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wh-field { display: flex; flex-direction: column; gap: 7px; }
.wh-field--full { grid-column: 1 / -1; }
.wh-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--wh-text-soft);
}
.wh-field label .req { color: var(--wh-red); }
.wh-field input,
.wh-field select,
.wh-field textarea {
  padding: 12px 14px;
  background: var(--wh-bg-alt);
  border: 1px solid var(--wh-line-strong);
  border-radius: var(--wh-radius-sm);
  font-size: 15px;
  color: var(--wh-text);
  color: var(--wh-text);
  transition: border-color var(--wh-fast) var(--wh-ease);
}
.wh-field input::placeholder,
.wh-field textarea::placeholder { color: var(--wh-text-faint); }
.wh-field input:focus,
.wh-field select:focus,
.wh-field textarea:focus {
  outline: none;
  border-color: var(--wh-accent);
}
.wh-field textarea { resize: vertical; min-height: 96px; }
.wh-field select { appearance: none; cursor: pointer; }

.wh-form__foot { margin-top: 18px; }
.wh-form__foot .wh-btn { width: 100%; }
.wh-form__note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--wh-text-faint);
}

.wh-notice {
  padding: 13px 16px;
  margin-bottom: 18px;
  border-radius: var(--wh-radius-sm);
  font-size: 14px;
  font-weight: 600;
}
.wh-notice--ok {
  background: rgba(57,181,74,0.12);
  border: 1px solid var(--wh-accent);
  color: var(--wh-accent-bright);
}
.wh-notice--err {
  background: rgba(237,28,36,0.1);
  border: 1px solid var(--wh-red);
  color: var(--wh-red-bright);
}

/* Honeypot — disembunyikan dari manusia, bukan dari bot */
.wh-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ 16. Footer */

.wh-footer {
  background: var(--wh-bg-alt);
  border-top: 1px solid var(--wh-line);
  padding-block: clamp(48px, 6vw, 72px) 0;
}
.wh-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(36px, 4vw, 52px);
}
.wh-footer__brand .wh-brand { margin-bottom: 16px; }
.wh-footer__about {
  font-size: 14px;
  line-height: 1.65;
  color: var(--wh-text-soft);
  max-width: 38ch;
}
.wh-footer__title {
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wh-text-faint);
}
.wh-footer__list { display: grid; gap: 10px; }
.wh-footer__list a,
.wh-footer__list li {
  font-size: 14px;
  color: var(--wh-text-soft);
  transition: color var(--wh-fast) var(--wh-ease);
}
.wh-footer__list a:hover { color: var(--wh-accent-text); }

/* Kredit pembuat di kaki halaman. Sengaja dibuat samar — ini tanda tangan,
   bukan iklan: ia tidak boleh bersaing dengan kontak dan hak cipta milik
   klien di sebelahnya. Warnanya baru penuh saat disentuh kursor. */
.wh-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--wh-text-faint);
  opacity: 0.75;
  transition: opacity var(--wh-normal) var(--wh-ease),
              color var(--wh-normal) var(--wh-ease);
}
.wh-credit:hover {
  opacity: 1;
  color: var(--wh-text);
}
.wh-credit strong { font-weight: 700; }

.wh-credit__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--wh-line-strong);
  border-radius: var(--wh-radius);
  font-family: var(--wh-font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: border-color var(--wh-normal) var(--wh-ease);
}
.wh-credit:hover .wh-credit__mark { border-color: var(--wh-text-soft); }

.wh-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--wh-line);
  font-size: 13px;
  color: var(--wh-text-faint);
}

/* Tombol WhatsApp melayang */
.wh-wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  /* Outline merah mengikuti tombol kontak di seluruh situs. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--wh-radius);
  background: #fff;
  border: 1px solid var(--wh-accent-deep);
  color: var(--wh-accent-text);
  box-shadow: var(--wh-shadow-lift);
  transition: transform var(--wh-fast) var(--wh-ease);
}
.wh-wa-float:hover { background: #FFF1F1; transform: translateY(-2px) scale(1.04); }

/* ----------------------------------------------- 17. Halaman dalam & prosa */

.wh-pagehead {
  padding-block: clamp(48px, 6vw, 84px) clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--wh-line);
  background: var(--wh-bg-alt);
}
.wh-pagehead .wh-eyebrow { margin-bottom: 16px; }
.wh-pagehead .wh-lead { margin-top: 18px; max-width: 64ch; }

.wh-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--wh-text-faint);
}
.wh-crumbs a:hover { color: var(--wh-accent); }
.wh-crumbs span[aria-hidden] { opacity: 0.45; }

.wh-prose { max-width: 72ch; font-size: 17px; line-height: 1.72; color: var(--wh-text-soft); }
.wh-prose > * + * { margin-top: 1.1em; }
.wh-prose h2 {
  margin-top: 1.8em;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--wh-text);
}
.wh-prose h3 {
  margin-top: 1.6em;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  color: var(--wh-text);
}
.wh-prose a { color: var(--wh-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.wh-prose ul, .wh-prose ol { padding-left: 1.3em; }
.wh-prose li + li { margin-top: 0.5em; }
.wh-prose img { border-radius: var(--wh-radius); margin-block: 1.6em; }
.wh-prose blockquote {
  padding-left: 20px;
  border-left: 2px solid var(--wh-accent);
  font-size: 19px;
  color: var(--wh-text);
}
.wh-prose strong { color: var(--wh-text); font-weight: 700; }
.wh-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wh-prose th, .wh-prose td {
  padding: 11px 13px;
  border: 1px solid var(--wh-line);
  text-align: left;
}
.wh-prose th { background: var(--wh-surface); color: var(--wh-text); font-weight: 700; }

/* ------------------------------------------------ 18. Katalog & detail produk */

.wh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: clamp(26px, 3vw, 38px);
}
.wh-filter {
  padding: 9px 17px;
  border: 1px solid var(--wh-line-strong);
  border-radius: var(--wh-radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--wh-text-soft);
  transition: all var(--wh-fast) var(--wh-ease);
}
.wh-filter:hover { border-color: var(--wh-accent-deep); color: var(--wh-text); }
.wh-filter.is-active {
  background: var(--wh-accent-deep);
  border-color: var(--wh-accent-deep);
  color: #fff;
}

.wh-single-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.wh-single-product__media {
  display: grid;
  place-items: center;
  padding: clamp(32px, 5vw, 60px);
  background:
    radial-gradient(circle at 50% 50%, rgba(57,181,74,0.12) 0%, rgba(57,181,74,0) 62%),
    var(--wh-surface);
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
}
.wh-single-product__media { aspect-ratio: 1; padding: clamp(16px, 2.5vw, 32px); }
.wh-single-product__media img { width: 100%; height: 100%; min-height: 0; max-width: 100%; object-fit: contain; }

.wh-spec {
  display: grid;
  gap: 0;
  margin-block: 26px;
}
.wh-spec__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding-block: 13px;
  border-top: 1px solid var(--wh-line);
  font-size: 15px;
}
.wh-spec__row:last-child { border-bottom: 1px solid var(--wh-line); }
.wh-spec__key { font-weight: 600; color: var(--wh-text-faint); }
.wh-spec__val { color: var(--wh-text); }

/* ---------------------------------------------------- 19. Blog & arsip */

.wh-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.wh-post {
  display: flex;
  flex-direction: column;
  background: var(--wh-surface);
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  overflow: hidden;
  box-shadow: var(--wh-shadow);
  transition: border-color var(--wh-normal) var(--wh-ease),
              box-shadow var(--wh-normal) var(--wh-ease),
              transform var(--wh-normal) var(--wh-ease);
}
.wh-post:hover {
  border-color: var(--wh-accent);
  box-shadow: var(--wh-shadow-lift);
  transform: translateY(-3px);
}
.wh-post__media { aspect-ratio: 16 / 10; background: var(--wh-bg-alt); overflow: hidden; }
.wh-post__media img { width: 100%; height: 100%; object-fit: cover; }
.wh-post__body { display: flex; flex-direction: column; flex: 1; gap: 9px; padding: 22px; }
.wh-post__date { font-size: 12px; font-weight: 600; color: var(--wh-text-faint); }
.wh-post__title { font-family: var(--wh-font-display); font-size: 19px; font-weight: 600; line-height: 1.28; }
.wh-post__excerpt {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wh-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wh-empty {
  padding: clamp(44px, 7vw, 84px) 28px;
  text-align: center;
  border: 1px dashed var(--wh-line-strong);
  border-radius: var(--wh-radius);
}
.wh-empty .wh-h3 { margin-bottom: 10px; }

.wh-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 50px);
}
.wh-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wh-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--wh-line-strong);
  border-radius: var(--wh-radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--wh-text-soft);
  transition: all var(--wh-fast) var(--wh-ease);
}
.wh-pagination .page-numbers:hover { border-color: var(--wh-accent); color: var(--wh-text); }
.wh-pagination .page-numbers.current {
  background: var(--wh-accent-deep);
  border-color: var(--wh-accent-deep);
  color: #fff;
}

/* -------------------------------------------------- 20. Animasi masuk */

/* Progressive enhancement: konten TERLIHAT secara default. Hanya disembunyikan
   kalau JS benar-benar aktif (class .js dipasang inline di <head>), sehingga
   kegagalan JS tidak pernah membuat konten hilang. */
.js .wh-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--wh-ease), transform 620ms var(--wh-ease);
}
.js .wh-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .wh-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- 21. Responsif */

@media (max-width: 1080px) {
  /* Saat kolomnya bertumpuk, copy + foto + strip logo tidak akan muat dalam
     satu layar. Memaksakannya hanya membuat isinya terpotong, jadi batas
     100svh dilepas dan hero dibiarkan setinggi isinya. */
  .wh-hero               { min-height: 0; }
  .wh-hero__inner        { grid-template-columns: 1fr; }
  .wh-hero__copy         { max-width: none; }
  .wh-hero__card         { justify-self: start; max-width: 520px;
                           transform: none; animation: none; }
  .wh-workshop__top      { grid-template-columns: 1fr; }
  .wh-proof              { grid-template-columns: 1fr; }
  .wh-cta__inner         { grid-template-columns: 1fr; }
  .wh-single-product     { grid-template-columns: 1fr; }
  .wh-footer__top        { grid-template-columns: 1fr 1fr; }
  .wh-products__grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .wh-nav,
  .wh-header__cta .wh-btn--ghost { display: none; }
  .wh-burger                     { display: flex; }
  /* Nav desktop hilang, jadi panelnya ikut — kategorinya sudah ada sebagai
     daftar biasa di dalam menu burger. */
  .wh-panel                      { display: none; }
}

@media (max-width: 920px) {
  .wh-products__grid,
  .wh-posts,
  .wh-grid--3,
  .wh-grid--4                    { grid-template-columns: repeat(2, 1fr); }
  .wh-step                       { grid-template-columns: 60px 1fr; }
  .wh-step__meta                 { grid-column: 2; justify-self: start; margin-top: 10px; }
  /* Lintasan membungkus jadi dua baris; tiap baris dapat garisnya sendiri
     karena garisnya milik tiap langkah, bukan satu garis absolut. */
  /* Begitu grid membungkus, SEMUA penataan rata-tepi dibatalkan: penanda
     kembali menempel di kiri kolomnya, teks langkah terakhir kembali rata
     kiri (kalau tidak, teksnya rata kanan sementara penandanya di kiri), dan
     ruas lintasan langkah terakhir dipotong supaya berhenti di benderanya —
     tanpa itu garisnya menjulur ke kanan melewati finish. */
  .wh-marathon                   { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .wh-marathon__marker,
  .wh-marathon__name,
  .wh-marathon__meta             { margin-left: 0; }
  .wh-marathon__step             { padding-right: clamp(12px, 1.6vw, 24px); }
  .wh-marathon__step:last-child .wh-marathon__name { justify-content: flex-start; }
  .wh-marathon__step:last-child .wh-marathon__meta { text-align: left; }
  .wh-marathon__step:first-child::after { left: 0; }
  .wh-marathon__step:last-child::after  { right: calc(100% - 21px); }
  .wh-quotes                     { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wh-posts,
  .wh-grid--2,
  .wh-grid--3,
  .wh-grid--4,
  .wh-form__grid,
  .wh-workshop__gallery { grid-template-columns: 1fr; }

  /* Tabel perbandingan bertumpuk: pasangan keluhan/jawaban tetap berdampingan
     secara vertikal, kepala kolom disembunyikan karena tidak lagi relevan. */
  .wh-compare__head  { display: none; }
  .wh-compare__row   { grid-template-columns: 1fr; }
  .wh-compare__good  { border-left: 0; border-top: 1px solid var(--wh-line); }

  /* Katalog tetap 2 kolom di ponsel: tas itu objek kecil, satu kolom hanya
     memperpanjang scroll tanpa menambah kejelasan. */
  .wh-products__grid    { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wh-product__media    { padding: 14px 14px 18px; gap: 10px; }
  .wh-product__tagline  { font-size: 11px; }
  .wh-product__name     { font-size: 15px; }

  /* Header di layar kecil: sisakan brand + burger saja. Tombol "Minta
     Penawaran" sudah ada di dalam menu burger, jadi tidak perlu dobel —
     tanpa ini header melebar melewati viewport 390px. */
  .wh-header__cta .wh-btn { display: none; }
  .wh-header__inner       { gap: 12px; }
  .wh-brand__name         { font-size: 14px; }

  /* H1: pertahankan rasio switchblade (bobot 900, lh .92, ls -.01em), tapi
     turunkan lantai ukurannya supaya "Konveksi tas custom" tidak melebar
     keluar layar. */
  .wh-h1, h1.wh-h1 { font-size: clamp(28px, 8.4vw, 40px); }
  .wh-h2           { font-size: clamp(26px, 7.2vw, 34px); }

  /* Di ponsel kartu dibuat lurus: kemiringan 3 derajat memakan lebar dan
     membuat badge-nya nyaris keluar layar. */
  .wh-hero__card     { max-width: none; padding: 14px; }
  .wh-hero__tag      { font-size: 12px; padding: 7px 13px; }
  .wh-hero__tag--quality { top: -11px; right: -6px; }
  .wh-hero__tag--moq     { bottom: -11px; left: -6px; }
  .wh-marathon       { grid-template-columns: repeat(2, 1fr); }
  .wh-marathon__marker { width: 36px; height: 36px; margin-top: -18px; }
  .wh-marathon__step--finish::before { width: 18px; }
  .wh-quotes         { grid-template-columns: 1fr; }
  .wh-numbers        { gap: 14px 26px; }
  .wh-spec__row      { grid-template-columns: 1fr; gap: 3px; }
  .wh-footer__top    { grid-template-columns: 1fr; }
  .wh-btn-row .wh-btn { width: 100%; }
  .wh-wa-float       { width: 52px; height: 52px; }
}

/* ------------------------------------------------------- 22. Cetak */

@media print {
  .wh-header, .wh-footer, .wh-wa-float, .wh-form { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------- 23. Responsive catalogue arc
   JS measures the stage, reserves rotated-card bounds, and fades WHOLE cards
   inside the edges. No fixed-radius wheel, top crop, or mask at wide zoom. */
.wh-archero {
  --wh-arc-card: clamp(92px, 28vw, 230px);
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--wh-header-h));
  padding-top: clamp(36px, 4vw, 64px);
  padding-bottom: 20px;
  background: var(--wh-bg);
}
.wh-archero__copy { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.wh-archero__title { margin: 0; }
.wh-archero__lead { margin: 20px auto 0; max-width: 56ch; }
.wh-archero__btns { justify-content: center; margin-top: 26px; }
.wh-archero__stage { position: relative; width: 100%; margin-top: 28px; }
.wh-archero__wheel { display: flex; gap: 24px; overflow-x: auto; padding: 32px; }
.wh-archero__card { flex: 0 0 var(--wh-arc-card); width: var(--wh-arc-card); margin: 0; }
.wh-archero__frame {
  display: block;
  aspect-ratio: 1;
  padding: clamp(10px, 1vw, 16px);
  background: var(--wh-surface);
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow);
}
.wh-archero__frame img { width: 100%; height: 100%; object-fit: contain; }
.wh-archero__card figcaption { margin-top: 10px; font-size: 12px; line-height: 1.4; font-weight: 600; text-align: center; color: var(--wh-text-soft); }
.wh-archero.is-ready .wh-archero__wheel { display: block; padding: 0; overflow: visible; }
.wh-archero.is-ready .wh-archero__card { position: absolute; top: 0; left: 0; will-change: transform; }
.wh-archero__pause { align-self: center; font-size: 12px; color: var(--wh-text-soft); padding: 8px 14px; border: 1px solid var(--wh-line-strong); border-radius: var(--wh-radius); }
.wh-archero__pause:hover { color: var(--wh-accent-text); border-color: var(--wh-accent); }
.wh-archero__pause[hidden] { display: none; }
@media (max-width: 640px) {
  .wh-archero__card figcaption { font-size: 10px; }
  .wh-archero__lead { font-size: 15px; }
}

/* ------------------------------------------- 24. Halaman Tentang Kami */

/* Kolom teks diukur dari PANJANG BARIS (62ch), bukan dari pecahan lebar layar.
   Dengan 1fr, .wh-prose tetap berhenti di 72ch sementara kolomnya terus
   melebar — sisanya jadi lubang kosong di antara teks dan foto, dan fotonya
   terdorong mengecil di pojok kanan. Dibalik: teks ambil secukupnya, foto
   ambil sisanya. */
.wh-about__intro {
  display: grid;
  grid-template-columns: minmax(0, 52ch) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.wh-about__intro > .wh-prose {
  justify-self: center;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.55;
  text-align: left;
}

/* Dua foto bersebelahan, yang kanan diturunkan. Sejajar rata atas membuat
   keduanya terbaca sebagai satu kotak lebar, bukan dua foto. */
.wh-about__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.wh-about__shot { margin: 0; }

/* HARUS berada setelah `.wh-about__shot { margin: 0 }`: specificity-nya sama
   (satu kelas), jadi yang menang urutan. Ditulis sebelum itu, shorthand
   `margin` menghapus offset ini diam-diam dan kedua foto rata atas lagi. */
.wh-about__shot--b { margin-top: clamp(24px, 3.4vw, 46px); }

.wh-about__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wh-radius);
  border: 1px solid var(--wh-line);
}

/* Pasangan foto di samping prosa dipotong POTRET. Aslinya lanskap 3:2, dan
   pada lebar kolomnya itu cuma setinggi 180px — dua pita tipis di sebelah
   blok teks setinggi 300px, terbaca seperti tempelan. Potret 4:5 membuat
   tingginya sebanding dengan teks yang didampinginya. Isi kedua foto
   (mesin potong, rak bahan) ada di tengah bingkai, jadi aman dipangkas
   kiri-kanan. */
.wh-about__pair img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  height: auto;
}

.wh-about__band { margin: 0; }
/* Dipangkas jadi PITA. Rasio asli 3:2 pada lebar penuh menghasilkan foto
   setinggi hampir satu layar yang menelan halaman; isi yang penting (meja
   produksi memanjang) ada di tengah bingkai, jadi pangkasan atas-bawah tidak
   membuang apa pun. */
.wh-about__band img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--wh-radius);
}

@media (max-width: 700px) {
  /* Di ponsel pita selebar ini tinggal setinggi 150px dan isinya tidak
     terbaca lagi — dikembalikan ke rasio yang lebih tinggi. */
  .wh-about__band img { aspect-ratio: 3 / 2; }
}
.wh-about__band figcaption {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 14px;
  color: var(--wh-text-faint);
}

.wh-about__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

/* Strip angka di halaman ini berdiri sendiri di tengah pita, bukan menempel
   di kolom teks seperti di homepage. */
.wh-numbers--center {
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  text-align: center;
  margin-top: 0;
}

@media (max-width: 900px) {
  .wh-about__intro,
  .wh-about__split { grid-template-columns: minmax(0, 1fr); }

  /* Foto selalu MENGIKUTI teks yang dijelaskannya, termasuk di section yang
     di layar lebar fotonya ada di kiri. */
  .wh-about__split > .wh-about__shot { order: 2; }
  .wh-numbers--center { grid-template-columns: repeat(2, auto); }
}

@media (max-width: 560px) {
  .wh-about__pair { grid-template-columns: minmax(0, 1fr); }
  .wh-about__shot--b { margin-top: 0; }
}

/* ------------------------------------------- 25. Revisions 2026-11-06 */
.wh-hero__inner { padding-block: clamp(30px, 3vw, 56px); }
.wh-hero__card { padding: 8px; }
.wh-hero__card img { object-fit: contain; }
.wh-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.wh-footer__contacts li { display: flex; align-items: flex-start; gap: 12px; }
.wh-footer__contacts .wh-icon { color: var(--wh-accent-text); width: 19px; height: 19px; flex-basis: 19px; margin-top: 3px; }
.wh-footer__contacts a { overflow-wrap: anywhere; }
.wh-filters, #persiapan { scroll-margin-top: calc(var(--wh-header-h) + 24px); }
.wh-category-catalog { padding-top: clamp(32px, 4vw, 64px); }
.wh-single-product__media { min-width: 0; }
.wh-single-product__media img { height: auto; aspect-ratio: 1; }
.wh-pagehead .wh-link { display: inline-block; margin-top: 24px; }
.wh-section-head > .wh-h2:first-child { margin-top: 0 !important; }
.wh-pagehead .wh-h1:first-child { margin-top: 0 !important; }

/* A separate editorial case study, with the product given its own canvas. */
.wh-success { background: #F8F5F2; border-block: 1px solid var(--wh-line); }
.wh-success__layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 100px); }
.wh-success__visual { position: relative; isolation: isolate; min-width: 0; }
.wh-success__quantity { position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); padding-right: .07em; white-space: nowrap; font: 700 clamp(120px, 23vw, 480px)/.9 var(--wh-font-display); letter-spacing: -.07em; color: #E9DDD6; }
.wh-success__visual img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding-top: 6%; }
.wh-success__copy { max-width: 680px; }
.wh-success__copy > p { margin-top: 20px; color: var(--wh-text-soft); }
.wh-success__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; padding-block: 22px; border-block: 1px solid var(--wh-line-strong); }
.wh-success__stats dt { font: 700 clamp(30px, 3.5vw, 50px)/1.2 var(--wh-font-display); color: var(--wh-accent-text); }
.wh-success__stats dd { margin-top: 6px; font-size: 12px; color: var(--wh-text-soft); }

/* Natural scroll drives the line; no scroll hijacking or pinned screen. */
.wh-journey { background: #fff; }
.wh-timeline { position: relative; max-width: 1360px; margin-inline: auto; }
.wh-timeline__rail { position: absolute; top: 28px; bottom: 28px; left: 50%; width: 2px; background: var(--wh-line); transform: translateX(-50%); }
.wh-timeline__progress { display: block; width: 100%; height: 100%; background: var(--wh-accent-deep); transform: scaleY(var(--timeline-progress, 0)); transform-origin: top; }
.wh-timeline__list { list-style: none; padding: 0; margin: 0; }
.wh-timeline__step { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: start; padding-bottom: clamp(40px, 5vw, 76px); }
.wh-timeline__step:last-child { padding-bottom: 0; }
.wh-timeline__number { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--wh-radius); border: 1px solid var(--wh-line-strong); background: #fff; font-weight: 700; font-size: 15px; transition: background .25s, color .25s, box-shadow .25s; z-index: 2; }
.wh-timeline__card { position: relative; grid-column: 1; padding: clamp(24px, 3vw, 44px); background: var(--wh-bg-alt); border: 1px solid var(--wh-line); border-radius: var(--wh-radius); transition: border-color .25s, box-shadow .25s; }
.wh-timeline__card::after { content: ''; position: absolute; top: 27px; left: 100%; width: 21px; height: 1px; background: var(--wh-line-strong); }
.wh-timeline__step:nth-child(even) .wh-timeline__card { grid-column: 3; }
.wh-timeline__step:nth-child(even) .wh-timeline__card::after { left: auto; right: 100%; }
.wh-timeline__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.wh-timeline__icon { padding: 12px; border: 1px solid #EAC8C8; border-radius: var(--wh-radius); color: var(--wh-accent-text); }
.wh-timeline__meta { font-size: 13px; font-weight: 600; color: var(--wh-accent-text); }
.wh-timeline__card p { margin-top: 16px; color: var(--wh-text-soft); font-size: 16px; line-height: 1.8; }
.wh-timeline__step.is-passed .wh-timeline__number { background: var(--wh-accent-deep); color: #fff; border-color: var(--wh-accent-deep); }
.wh-timeline__step.is-current .wh-timeline__number { box-shadow: 0 0 0 7px #F9E6E6; }
.wh-timeline__step.is-current .wh-timeline__card { border-color: #D99FA2; box-shadow: var(--wh-shadow); }

/* Preparation follows the reference's numbered line + visual examples. */
.wh-prep { background: var(--wh-bg-alt); border-block: 1px solid var(--wh-line); }
.wh-prep .wh-section-head { max-width: 720px; }
.wh-prep .wh-section-head .wh-lead { margin-top: 18px; }
.wh-prep__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 0; list-style: none; padding: 0; }
.wh-prep__item { position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--wh-line-strong); padding: 26px clamp(20px, 3vw, 44px) 0 0; }
.wh-prep__item::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--wh-accent-deep); border-radius: var(--wh-radius); }
.wh-prep__number { font: 700 16px/1 var(--wh-font-display); color: var(--wh-accent-text); margin-bottom: 14px; }
.wh-prep__item > p { margin: 12px 0 22px; max-width: 42ch; color: var(--wh-text-soft); font-size: 14px; line-height: 1.75; }
.wh-prep__visual { display: grid; justify-items: center; gap: 16px; min-height: 176px; margin-top: auto; padding: 28px 16px 20px; border: 1px solid #EDDCDC; border-radius: var(--wh-radius); background: #FFF7F5; }
.wh-prep__visual .wh-icon { width: 76px; height: 76px; stroke-width: 1; color: var(--wh-accent-text); }
.wh-prep__visual span { font-size: 12px; font-weight: 600; text-align: center; }
.wh-prep__help { margin: 42px 0 18px; max-width: 65ch; color: var(--wh-text-soft); }
@media (min-width: 1800px) { .wh-prep__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .wh-hero__inner { gap: 36px; padding-block: 28px 48px; }
  .wh-hero__card { justify-self: center; width: 100%; max-width: 640px; }
}
@media (max-width: 800px) {
  .wh-success__layout { grid-template-columns: 1fr; }
  .wh-success__visual { width: min(100%, 560px); margin-inline: auto; }
  .wh-success__quantity { font-size: clamp(120px, 42vw, 280px); }
  .wh-timeline__rail { left: 22px; top: 22px; bottom: 22px; }
  .wh-timeline__step { grid-template-columns: 64px minmax(0, 1fr); padding-bottom: 32px; }
  .wh-timeline__number { left: 22px; width: 44px; height: 44px; font-size: 13px; }
  .wh-timeline__card, .wh-timeline__step:nth-child(even) .wh-timeline__card { grid-column: 2; padding: 22px; }
  .wh-timeline__card::after, .wh-timeline__step:nth-child(even) .wh-timeline__card::after { top: 21px; left: auto; right: 100%; width: 20px; }
  .wh-timeline__card p { font-size: 14px; }
  .wh-prep__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .wh-product__populer { top: -15px; right: 8px; font-size: 9px; padding: 6px 10px; }
  .wh-hero__card { width: calc(100% - 12px); }
  .wh-prep__grid { grid-template-columns: 1fr; gap: 30px; }
  .wh-prep__item { padding-right: 0; }
  .wh-prep__visual { min-height: 155px; }
  .wh-timeline__step { grid-template-columns: 54px minmax(0, 1fr); }
  .wh-timeline__card { padding: 18px !important; }
  .wh-timeline__card::after, .wh-timeline__step:nth-child(even) .wh-timeline__card::after { width: 10px; }
  .wh-timeline__top { gap: 8px; }
}
@media print {
  .wh-timeline__progress { transform: none; }
  .wh-timeline__card, .wh-prep__item { break-inside: avoid; }
  .wh-archero__pause { display: none; }
}

/* 2026-11-06 follow-up: align the photo with the full text/logo column. */
.wh-hero { overflow: visible; padding-top: 0; }
.wh-hero::before {
  inset: 0 0 auto;
  width: 100%; height: min(70%, 520px); aspect-ratio: auto;
  background: radial-gradient(ellipse at 88% 0, rgba(57,181,74,.10), transparent 65%),
              radial-gradient(ellipse at 10% 0, rgba(237,28,36,.055), transparent 65%);
  -webkit-mask-image: linear-gradient(#000 0%, transparent 100%);
  mask-image: linear-gradient(#000 0%, transparent 100%);
}
.wh-hero::after { display: none; }
.wh-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 1.6vw, 30px); align-content: center; align-items: center; padding-block: clamp(48px, 6vw, 88px); }
.wh-hero__copy {
  max-width: none; min-width: 0; container-type: inline-size;
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
}
.wh-hero .wh-hero__copy > :is(.wh-hero__badge, .wh-hero__title, .wh-hero__sub, .wh-hero__lead, .wh-btn-row, .wh-hero__trust) { margin-block: 0; }
.wh-hero .wh-hero__trust .wh-hero__points { margin-block: 0; }
.wh-hero .wh-hero__trust .wh-hero__proof { margin-top: 28px; padding-top: 0; }
.wh-hero .wh-hero__title { font-size: clamp(28px, 5.4cqi, 52px); line-height: calc(1.06em + 3pt); letter-spacing: -.035em; white-space: nowrap; }
.wh-hero__card {
  position: relative; align-self: center; justify-self: center;
  width: 90%; max-width: none; min-width: 0; min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 0; transform: rotate(3deg); animation: wh-float 6s ease-in-out infinite;
  border-radius: var(--wh-radius); box-shadow: 0 12px 32px -12px rgba(18,18,18,.14);
}
.wh-hero__card img { position: absolute; inset: -9%; width: 118%; height: 118%; max-width: none; object-fit: contain; border-radius: var(--wh-radius); }
.wh-hero__proof { border-top: 0; }
.wh-hero__tag--quality { top: -12px; right: -8px; transform: rotate(12deg); }
.wh-hero__tag--moq { bottom: -12px; left: -8px; transform: rotate(-12deg); }
.wh-brand .wh-brand__logo { width: 116px; height: 64px; object-fit: contain; }
.wh-footer__brand .wh-brand__logo { width: 154px; height: 100px; }
.wh-credit { gap: 8px; margin-right: 54px; }
.wh-credit__mark { width: 30px; height: 30px; flex: 0 0 30px; padding: 3px; }
.wh-credit__logo { width: 100%; height: auto; object-fit: contain; }
.wh-wa-float, .wh-wa-float:hover { background: transparent; border: 0; box-shadow: none; }
.wh-wa-float img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1080px) {
  .wh-hero__inner { grid-template-columns: 1fr; gap: 32px; padding-block: 36px 48px; }
  .wh-hero .wh-hero__title { font-size: clamp(28px, 5.4cqi, 48px); white-space: normal; }
  .wh-hero__card { width: min(90%, 414px); aspect-ratio: 1; justify-self: center; }
  .wh-hero__card img { inset: 0; width: 100%; height: 100%; }
}
@media (max-width: 640px) {
  .wh-brand .wh-brand__logo { width: 100px; height: 60px; }
  .wh-footer__brand .wh-brand__logo { width: 154px; height: 100px; }
  .wh-hero__tag { padding: 6px 10px; font-size: 11px; }
}

/* Motion follows the live hero: the card carries both tilted text badges. */
@media (prefers-reduced-motion: reduce) {
  .wh-hero__card { animation: none; }
}

/* WhatsApp green glow pulses around the actual transparent icon. */
.wh-wa-float img { animation: wh-wa-glow 2.8s ease-in-out infinite; }
@keyframes wh-wa-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(37,211,102,.3)) drop-shadow(0 0 7px rgba(37,211,102,.16)); }
  50% { filter: drop-shadow(0 0 7px rgba(37,211,102,.65)) drop-shadow(0 0 17px rgba(37,211,102,.38)); }
}
@media (prefers-reduced-motion: reduce) {
  .wh-wa-float img { animation: none; filter: drop-shadow(0 0 6px rgba(37,211,102,.35)); }
}

/* User-requested trust badge, distinct from removed page breadcrumbs. */
.wh-hero__badge { gap: 8px; max-width: 100%; background: transparent; border: 0; padding: 0; border-radius: 0; line-height: 1.5; }
.wh-hero__badge .wh-icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--wh-accent-deep); }
@media (max-width: 480px) {
  .wh-hero__badge { padding: 0; font-size: 11px; }
}
/* v0.12 — direct contact and editorial reading layout. */
.wh-contact-cta { align-items: center; gap: clamp(36px, 7vw, 120px); }
.wh-contact-cta .wh-lead { margin: 24px 0 30px; max-width: 48ch; }
.wh-contact-cta__details { padding: clamp(24px, 3vw, 48px); border: 1px solid var(--wh-line); border-radius: var(--wh-radius); background: #fff; }
.wh-contact-cta__details .wh-contact-list { margin-top: 0; }
.wh-contact-cta .wh-h2 { max-width: none; font-size: clamp(28px, 3.5vw, 52px); }
.wh-cta__line { display: block; }
@media (min-width: 960px) {
  .wh-cta__line { white-space: nowrap; }
}
.wh-blog-head { padding-block: clamp(56px, 7vw, 100px) 44px; background: #fff; }
.wh-blog-head__row { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--wh-line-strong); }
.wh-blog-head h1 { font-family: var(--wh-font-display); font-weight: 600; font-size: clamp(44px, 6vw, 84px); line-height: calc(.98em + 3pt); letter-spacing: -.035em; }
.wh-blog-head .wh-lead { max-width: 44ch; margin: 0; font-size: clamp(16px, 1.5vw, 19px); }
.wh-blog-index { padding-top: 0; }
.wh-blog-label { display: flex; gap: 16px; align-items: center; margin-bottom: 28px; font-size: 13px; color: var(--wh-text-soft); }
.wh-blog-label::before { content: ''; width: 24px; height: 3px; background: var(--wh-accent); }
.wh-blog-index .wh-posts { gap: 44px 28px; }
.wh-post { background: transparent; box-shadow: none; border: 0; border-radius: var(--wh-radius); }
.wh-post:hover { box-shadow: none; transform: none; }
.wh-post__media { border-radius: var(--wh-radius); overflow: hidden; aspect-ratio: 16/10; background: var(--wh-bg-alt); }
.wh-post__media img { width: 100%; height: 100%; object-fit: cover; }
.wh-post__body { padding: 22px 0 12px; }
.wh-post__date { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--wh-text-soft); }
.wh-post__title { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.02em; margin: 12px 0; }
.wh-post__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wh-post .wh-link { margin-top: 16px; }
.wh-blog-index .wh-post__body > .wh-link { margin-top: auto; padding-top: 16px; }
.wh-reading-progress { position: fixed; inset: 0 0 auto; height: 4px; z-index: 100000; background: #f2e6e6; pointer-events: none; }
.wh-reading-progress span { display: block; height: 100%; background: var(--wh-accent); transform: scaleX(0); transform-origin: left; }
.admin-bar .wh-reading-progress { top: 32px; }
.wh-reading-layout { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 840px); gap: clamp(40px, 5vw, 88px); justify-content: center; align-items: start; padding-block: clamp(48px, 6vw, 88px) 64px; }
.wh-toc { position: sticky; top: calc(var(--wh-header-h) + 32px); padding-top: 4px; max-height: calc(100svh - var(--wh-header-h) - 64px); overflow-y: auto; scrollbar-width: thin; font-size: 13px; }
.wh-toc summary { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; cursor: pointer; padding: 0 0 18px; list-style: none; }
.wh-toc summary::-webkit-details-marker { display: none; }
.wh-toc details:not([open]) summary span { font-size: 0; }
.wh-toc details:not([open]) summary span::after { content: '+'; font-size: 18px; }
.wh-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--wh-line); }
.wh-toc li { margin: 0; }
.wh-toc li a { display: block; padding: 9px 10px 9px 18px; border-left: 2px solid transparent; margin-left: -1px; color: var(--wh-text-soft); line-height: 1.55; text-decoration: none; }
.wh-toc .wh-toc__level-1 a { font-weight: 700; color: var(--wh-text); padding-bottom: 14px; }
.wh-toc li a:hover, .wh-toc li a[aria-current="location"] { color: var(--wh-accent-text); border-left-color: var(--wh-accent); background: #fff5f5; }
.wh-toc__back { display: inline-block; margin-top: 24px; font-weight: 600; color: var(--wh-accent-text); }
.wh-article { min-width: 0; }
.wh-article__header { margin-bottom: 36px; }
.wh-article__meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; color: var(--wh-text-soft); font-size: 12px; margin-bottom: 22px; }
.wh-article__meta a { color: var(--wh-accent-text); font-weight: 700; }
.wh-article__meta > span:last-child { margin-left: auto; }
.wh-article h1 { font-family: var(--wh-font-display); font-size: clamp(34px, 4vw, 58px); line-height: calc(1.04em + 3pt); letter-spacing: -.035em; font-weight: 600; margin: 0 0 22px; text-wrap: balance; }
.wh-article__byline { font-size: 13px; color: var(--wh-text-soft); padding-bottom: 26px; border-bottom: 1px solid var(--wh-line); }
.wh-article__content { max-width: none; font-size: 17px; line-height: 1.85; overflow-wrap: anywhere; }
.wh-article__content h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: calc(1.1em + 3pt); letter-spacing: -.02em; color: var(--wh-text); margin: 1.9em 0 .7em; }
.wh-article__content h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.3; margin: 1.6em 0 .65em; }
.wh-article__content :is(h2,h3) strong { font-weight: inherit; }
.wh-article__content p { margin: 0 0 1.25em; }
.wh-article__content figure { width: 100%; margin: 32px 0; }
.wh-article__content figure:first-child { margin-top: 0; }
.wh-article__content img { width: 100%; height: auto; border-radius: var(--wh-radius); margin: 0; }
.wh-article__content figcaption { font-size: 12px; text-align: center; color: var(--wh-text-soft); margin-top: 12px; }
.wh-article__content a { text-underline-offset: 3px; }
.wh-article__content .wp-block-table { overflow-x: auto; }
.wh-article__content table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.wh-article__content td, .wh-article__content th { padding: 14px 16px; border: 1px solid var(--wh-line-strong); text-align: left; vertical-align: top; }
.wh-article__content tr:first-child { background: var(--wh-bg-alt); }
.wh-article__content :is(h1,h2,h3), #judul-artikel, .wh-anchor-alias { scroll-margin-top: calc(var(--wh-header-h) + 30px); }
.wh-article__end { display: flex; justify-content: space-between; gap: 24px; font-size: 12px; color: var(--wh-text-soft); border-top: 1px solid var(--wh-line); margin-top: 48px; padding-top: 24px; }
.wh-article__end a { color: var(--wh-accent-text); }
.wh-article-related { border-top: 1px solid var(--wh-line); background: var(--wh-bg-alt); }
@media (min-width: 1100px) {
  .blog:not(.paged) .wh-blog-index .wh-post:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; padding-bottom: 44px; border-bottom: 1px solid var(--wh-line); }
  .blog:not(.paged) .wh-blog-index .wh-post:first-child .wh-post__title { font-size: clamp(30px, 3.2vw, 48px); }
}
@media (max-width: 900px) {
  .wh-reading-layout { grid-template-columns: 1fr; gap: 32px; }
  .wh-toc { position: static; max-height: none; padding: 20px; border: 1px solid var(--wh-line); border-radius: var(--wh-radius); background: var(--wh-bg-alt); }
  .wh-toc nav { max-height: 260px; overflow: auto; }
  .wh-toc__back { margin-top: 16px; }
  .wh-blog-head__row { display: block; }
  .wh-blog-head .wh-lead { margin-top: 24px; }
}
@media (max-width: 600px) {
  .wh-article__content { font-size: 16px; line-height: 1.8; }
  .wh-article__meta > span:last-child { margin-left: 0; }
  .wh-article__end { flex-direction: column; gap: 12px; }
  .wh-contact-cta .wh-btn { width: 100%; }
  .wh-article-related .wh-section-head { align-items: start; gap: 20px; }
  .wh-blog-index .wh-posts { grid-template-columns: 1fr; }
}
@media print {
  .wh-reading-progress, .wh-toc, .wh-article-related, .wh-cta { display: none; }
  .wh-reading-layout { display: block; padding: 0; }
}