/* ── Font ──────────────────────────────────────────────────────────── */
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-900.woff2') format('woff2'); font-weight: 900; font-display: swap; font-style: normal; }

/* ── Token ─────────────────────────────────────────────────────────── */
:root {
  /* Diselaraskan dengan absen.pakaikloa.com: neo-brutalism — garis hitam
     tebal, bayangan keras tanpa blur, aksen oranye + hijau. */
  --kertas: #EDE7DA;          /* kanvas merek. Diukur dari absen.pakaikloa.com
                                 (#EBE3D6 di layar) dan persis warna latar tempat
                                 logo resminya diekspor. #FFFCF6 yang sempat aku
                                 pakai itu warna PERMUKAAN kartu mereka, bukan kanvas. */
  --permukaan-2: #FFFCF6;
  --tinta: #0A0A0A;
  --permukaan: #FFFFFF;
  --teks-2: #5B5447;          /* lebih gelap dari #6B6455 milik Absen: teks bisa jatuh
                                 di atas titik latar (#D8D0BE), dan di situ #6B6455
                                 cuma 3,82:1 — gagal AA. Ini 4,88:1. */
  --teks-2-gelap: #BDB6A6;
  --kertas-gelap: #1A1917;
  --oranye: #FF9E00;
  --hijau: #00B12D;
  --mint: #E8F8F0;
  --peach: #FFF4E1;
  --titik: #D8D0BE;
  --hairline: #E3DCCB;        /* pemisah lembut, bukan garis struktural */

  --garis: 2px solid var(--tinta);
  --bayang: 4px 4px 0 var(--tinta);
  --bayang-kecil: 3px 3px 0 var(--tinta);

  --font: 'Satoshi', system-ui, -apple-system, sans-serif;
  --lebar: 1200px;
  --sela: clamp(1.25rem, 4vw, 3rem);
  --sy: 0;   /* piksel scroll, ditulis motion.js */
  --mx: 0;   /* kursor mendatar di dalam hero, -1..1, ditulis motion.js */
  --my: 0;   /* kursor tegak di dalam hero, -1..1, ditulis motion.js */
}

/* ── Reset secukupnya ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  /* Titik halus di atas krem — ciri paling langsung situs Absen. */
  background-color: var(--kertas);
  background-image: radial-gradient(var(--titik) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  color: var(--tinta);
  font: 400 clamp(1rem, 0.95rem + 0.25vw, 1.125rem)/1.6 var(--font);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Utilitas ──────────────────────────────────────────────────────── */
.lewati {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--kertas);
  padding: .75rem 1rem; text-decoration: none;
}
.lewati:focus { left: .5rem; top: .5rem; }

.blok { max-width: var(--lebar); margin-inline: auto; padding: clamp(4rem, 10vw, 8rem) var(--sela); }
/* Penanda section: titik hijau kecil lalu huruf kapital ber-tracking —
   pola label yang dipakai situs Absen. */
.penanda {
  font-weight: 800; font-size: .8125rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teks-2); margin: 0 0 1rem;
  display: flex; align-items: center; gap: .55rem;
}
.penanda::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--hijau); border: 1.5px solid var(--tinta); flex: none;
}
.blok .penanda { justify-content: flex-start; }
/* Wordmark di dalam penanda: disejajarkan ke tinggi huruf label, bukan
   ukuran aslinya — width/height di HTML cuma menjaga rasio saat memuat. */
.penanda__logo { height: 1.25rem; width: auto; }
.judul { font-weight: 900; font-size: clamp(1.85rem, 1.2rem + 2.9vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 1.5rem; text-wrap: balance; }

.tombol {
  display: inline-block; padding: .75rem 1.35rem; border-radius: 999px;
  background: var(--tinta); color: var(--kertas);
  border: var(--garis); box-shadow: var(--bayang);
  font-weight: 800; font-size: .9375rem; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Angkat ke kiri-atas sambil bayangannya memanjang — gerak khas gaya ini. */
.tombol:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.tombol:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.tombol--sunyi { background: var(--permukaan); color: var(--tinta); }
/* Di panel gelap, bayangan hitam tak terlihat — dipindah ke oranye. */
.tombol--terang { background: var(--kertas); color: var(--tinta); box-shadow: 4px 4px 0 var(--oranye); }
.tombol--terang:hover { box-shadow: 6px 6px 0 var(--oranye); }
.tombol--kecil { padding: .45rem 1rem; font-size: .875rem; box-shadow: var(--bayang-kecil); }
.tombol--kecil:hover { box-shadow: 5px 5px 0 var(--tinta); }

/* ── Nav ───────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1rem var(--sela);
  transition: background .3s ease, box-shadow .3s ease;
}
.nav__merek { margin-right: auto; display: block; }
.nav .tombol--kecil { background: var(--oranye); color: var(--tinta); }
.nav__tautan { display: flex; gap: 1.5rem; font-size: .9375rem; font-weight: 700; }
.nav__tautan a { text-decoration: none; }
.nav__tautan a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav--solid { background: var(--kertas); box-shadow: 0 2px 0 var(--tinta); }
@media (max-width: 720px) { .nav__tautan { display: none; } }


/* Teks badge selalu HITAM: putih di atas hijau cuma 2,87:1 dan di atas oranye
   2,07:1 — dua-duanya gagal WCAG AA. Hitam memberi 6,91:1 dan 9,56:1. */
.badge {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em;
  padding: .28rem .6rem; border-radius: 999px;
  border: var(--garis); color: var(--tinta);
}
.badge[data-status="live"]   { background: var(--hijau); }
.badge[data-status="segera"] { background: var(--oranye); }

/* ── Produk: tiga baris berselang-seling ───────────────────────────── */
.produk { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.blok__kepala { margin-bottom: 1rem; }

.baris {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
@media (min-width: 900px) {
  .baris { grid-template-columns: 1fr 1fr; }
  /* Baris genap dibalik: visual pindah ke kanan. `order` dipakai, BUKAN
     menukar urutan di HTML — urutan DOM tetap visual-lalu-teks supaya
     pembaca layar dan keyboard membacanya sama di ketiga baris. */
  .baris--balik .baris__visual { order: 2; }
}

.baris__visual {
  position: relative;
  background: var(--permukaan); border: var(--garis); border-radius: 18px;
  box-shadow: var(--bayang); padding: clamp(1rem, 3vw, 2rem);
  display: grid; place-items: center;
}
.baris__gambar { width: 100%; height: auto; display: block; }
/* Video baris memakai poster sebagai isi diamnya; tanpa JS itu yang tampil.
   Latarnya transparan — videonya sendiri sudah beralfa. */
.baris__video { background: transparent; }
.baris__no {
  position: absolute; top: -.9rem; left: -.9rem;
  display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem;
  padding: 0 .5rem; border: var(--garis); border-radius: 999px;
  background: var(--peach); color: var(--tinta);
  font-weight: 900; font-size: .875rem;
}

.baris__isi { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.baris__nama { margin: 0; }
.baris__nama img { height: 34px; width: auto; display: block; }
.baris__posisi { margin: 0; font-weight: 700; font-size: 1.0625rem; max-width: 46ch; }
.baris__poin { margin: 0; padding-left: 1.15rem; color: var(--teks-2); display: grid; gap: .5rem; }
.baris__poin li { max-width: 52ch; }

/* Poin masuk bertahap, digerbangi html.js seperti reveal lainnya. */
html.js .baris[data-reveal] .baris__poin li { opacity: 0; transform: translateY(6px); }
html.js .baris[data-reveal].is-in .baris__poin li {
  opacity: 1; transform: none;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
html.js .baris[data-reveal].is-in .baris__poin li:nth-child(1) { transition-delay: 180ms; }
html.js .baris[data-reveal].is-in .baris__poin li:nth-child(2) { transition-delay: 260ms; }
html.js .baris[data-reveal].is-in .baris__poin li:nth-child(3) { transition-delay: 340ms; }
html.js .baris[data-reveal].is-in .baris__poin li:nth-child(4) { transition-delay: 420ms; }
html.motion-gagal .baris__poin li { opacity: 1; transform: none; }

/* ── Kloapreneur: cerita nyata ─────────────────────────────────────── */
/* Section ini memakai PERMUKAAN, bukan kanvas krem seperti tetangganya.
   Sebelumnya Produk dan Kloapreneur sama-sama krem tanpa pemisah apa pun, dan
   jarak 8rem di antaranya terbaca seperti ada yang gagal dimuat — bukan
   seperti pergantian bagian. Polanya menyalin section merek di atas: latar
   satu tingkat lebih terang, dikurung garis atas-bawah. */
.kloapreneur {
  max-width: none;
  background: var(--permukaan-2);
  border-block: var(--garis);
  display: grid; grid-template-columns: minmax(0, var(--lebar));
  justify-content: center;
}

.cerita { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; align-items: start; }
@media (min-width: 660px) { .cerita { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cerita { grid-template-columns: repeat(3, 1fr); } }

.kartu-cerita {
  display: flex; flex-direction: column; gap: .85rem;
  background: var(--permukaan); border: var(--garis); border-radius: 16px;
  box-shadow: var(--bayang); padding: 1.35rem 1.4rem;
}
/* Tanpa ini `hidden` kalah dari `display: flex` di atas. */
.kartu-cerita[hidden] { display: none; }
.kartu-cerita:nth-child(3n+2) { background: var(--permukaan-2); }

.bintang { display: inline-flex; gap: .15rem; }
.kartu-cerita__kutip {
  margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.55;
  color: var(--tinta); text-wrap: pretty;
}
/* Tanda kutipnya digambar CSS supaya teks yang disalin tetap bersih. */
.kartu-cerita__kutip::before { content: '\201C'; }
.kartu-cerita__kutip::after  { content: '\201D'; }

.kartu-cerita__orang { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding-top: .25rem; }
.kartu-cerita__inisial {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: var(--garis); border-radius: 50%; background: var(--mint);
  font-size: .8125rem; font-weight: 900; letter-spacing: .02em;
}
.kartu-cerita__nama { margin: 0; font-size: .9375rem; font-weight: 900; letter-spacing: -.01em; }
.kartu-cerita__peran { margin: .1rem 0 0; font-size: .8125rem; font-weight: 700; color: var(--teks-2); }

.cerita__lagi { margin: 1.75rem 0 0; display: flex; justify-content: center; }
.tombol--lagi { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-family: inherit; }
.tombol--lagi svg { transition: transform .2s ease; }
.tombol--lagi[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Kartu masuk bertahap, digerbangi html.js seperti reveal lainnya. Penundaan
   hanya untuk enam yang tampil duluan; sisanya muncul seketika saat dibuka. */
html.js .cerita[data-reveal] .kartu-cerita { opacity: 0; transform: translateY(6px); }
html.js .cerita[data-reveal].is-in .kartu-cerita {
  opacity: 1; transform: none;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
html.js .cerita[data-reveal].is-in .kartu-cerita:nth-child(1) { transition-delay: 60ms; }
html.js .cerita[data-reveal].is-in .kartu-cerita:nth-child(2) { transition-delay: 120ms; }
html.js .cerita[data-reveal].is-in .kartu-cerita:nth-child(3) { transition-delay: 180ms; }
html.js .cerita[data-reveal].is-in .kartu-cerita:nth-child(4) { transition-delay: 240ms; }
html.js .cerita[data-reveal].is-in .kartu-cerita:nth-child(5) { transition-delay: 300ms; }
html.js .cerita[data-reveal].is-in .kartu-cerita:nth-child(6) { transition-delay: 360ms; }
html.motion-gagal .kartu-cerita { opacity: 1; transform: none; }

/* ── Konsultasi (satu-satunya section gelap) ───────────────────────── */
/* Satu kolom terkurung: semua anak mulai dari tepi kiri yang sama.
   `margin-inline: auto` per-anak tidak dipakai — tiap anak punya max-width
   sendiri (mis. 62ch), jadi auto-margin men-center masing-masing pada lebar
   berbeda dan tepi kirinya jadi tidak segaris. */
.ajakan {
  max-width: none; background: var(--tinta); color: var(--kertas);
  display: grid; grid-template-columns: minmax(0, var(--lebar));
  justify-content: center; justify-items: start; gap: 0;
}
.ajakan > * { margin-inline: 0; }
.ajakan .penanda { color: var(--teks-2-gelap); }
.ajakan .penanda::before { background: var(--oranye); border-color: var(--kertas); }
.ajakan__teks { color: var(--teks-2-gelap); max-width: 62ch; }
.ajakan__poin {
  margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem;
  color: var(--teks-2-gelap); max-width: 62ch;
}
.ajakan__poin li { padding-left: 1.35rem; position: relative; }
.ajakan__poin b { color: var(--kertas); }
/* Penanda daftar digambar sendiri: bullet bawaan ikut warna teks redup dan
   nyaris hilang di latar hitam. */
.ajakan__poin li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--oranye);
}
.ajakan :focus-visible { outline-color: var(--kertas); }

/* ── Tentang ───────────────────────────────────────────────────────── */

/* ── Footer ────────────────────────────────────────────────────────── */
.footer { border-top: var(--garis); padding: 3rem var(--sela); display: grid; gap: 2rem; max-width: var(--lebar); margin-inline: auto; }
.footer__identitas { display: grid; gap: .6rem; justify-items: start; max-width: 34ch; }
.footer__logo { display: block; height: 28px; width: auto; }
.footer__badan { margin: 0; font-weight: 900; font-size: .9375rem; }
.footer__alamat { margin: 0; font-style: normal; font-size: .875rem; line-height: 1.55; color: var(--teks-2); }
.footer__cinta { margin: .35rem 0 0; font-size: .8125rem; font-weight: 700; color: var(--teks-2); }
.footer__kolom { display: grid; gap: .5rem; align-content: start; font-size: .9375rem; }
.footer__judul {
  margin: 0 0 .2rem; font-size: .6875rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta);
}
.footer__kolom a { color: var(--teks-2); text-decoration: none; font-weight: 600; }
.footer__kolom a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.footer__hak { margin: 0; font-size: .875rem; color: var(--teks-2); }
@media (min-width: 560px) { .footer { grid-template-columns: repeat(3, auto); justify-content: space-between; } .footer__identitas { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .footer { grid-template-columns: 1.4fr repeat(3, auto); gap: 2.5rem; align-items: start; }
  .footer__identitas { grid-column: auto; }
  .footer__hak { grid-column: 1 / -1; }
}

/* ── Halaman isi (Tentang, Mengapa) ────────────────────────────────── */
.halaman {
  max-width: 46rem; margin-inline: auto;
  padding: 7.5rem var(--sela) 4rem; display: grid; gap: 2.75rem;
}
.halaman__kepala { display: grid; gap: .85rem; }
.halaman__kepala .judul { margin: 0; }
.halaman__intro { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.6; max-width: 60ch; }
.halaman__blok { display: grid; gap: .85rem; }
.halaman__blok h2 {
  margin: 0; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 900;
  /* Tanpa line-height sendiri, judul yang membungkus mewarisi 1.6 dari body
     dan barisnya renggang seperti paragraf. */
  letter-spacing: -.02em; line-height: 1.2; text-wrap: balance;
}
.halaman__blok p { margin: 0; color: var(--teks-2); line-height: 1.65; max-width: 62ch; }
.halaman__blok b { color: var(--tinta); }
.halaman__daftar { margin: 0; padding-left: 1.15rem; display: grid; gap: .5rem; color: var(--teks-2); max-width: 62ch; }
.halaman__blok .tombol { margin-top: .5rem; }

/* ── Reveal: HANYA disembunyikan kalau JS hidup ────────────────────── */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); }
html.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
/* Poin kartu masuk satu per satu setelah kartunya tampil. Digerbangi html.js
   seperti reveal lainnya: tanpa JS, poinnya langsung terbaca. */

/* Jaring pengaman: motion.js tidak pernah jalan → paksa tampil. */
html.motion-gagal [data-reveal] { opacity: 1; transform: none; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* Tinggi PASTI, bukan min-height. Dengan min-height, tinggi baris grid
     ditentukan isinya, jadi .hero__isi tidak pernah punya batas dan
     `flex-shrink` pada panggung tidak pernah bekerja — hero-nya yang memanjang
     melewati layar dan tautan terakhir jatuh di bawah lipatan.
     `min-height` di bawah ini cuma lantai untuk layar yang sangat pendek. */
  height: 100svh; min-height: 42rem;
  overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  padding: 4.75rem var(--sela) 2rem;
  isolation: isolate;
}
.hero__lapis { position: absolute; inset: -10% -5%; pointer-events: none; z-index: -1; }

/* Lapisan 1 — grid hairline */
.hero__grid {
  /* Titik yang sama dengan body, tapi lebih rapat — memberi kedalaman saat
     lapisannya bergeser parallax. */
  background-image: radial-gradient(var(--titik) 1.6px, transparent 1.6px);
  background-size: 30px 30px;
  opacity: .8;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
}

/* Lapisan 2 — bentuk geometris raksasa */
/* Dua sumber gerak digabung di satu properti: perpindahan antar-tab (--tab-x/y)
   dan tarikan kursor (--mx/--my x --tarik). Keduanya transform, tidak ada
   properti layout yang dianimasikan. Transisi .5s membuat kursor terasa
   teredam, bukan menempel kaku. */
.bentuk {
  position: absolute; display: block;
  /* Di kanvas krem terang yang lama, mint & peach ini nyaris tak terlihat.
     Di kanvas merek #EDE7DA keduanya jadi bidang warna yang bersaing dengan
     video — diredam supaya kembali jadi kedalaman, bukan dekorasi. */
  opacity: .5;
  transform:
    translate3d(calc(var(--tab-x, 0px) + var(--mx) * var(--tarik, 12) * 1px),
                calc(var(--tab-y, 0px) + var(--my) * var(--tarik, 12) * 1px), 0)
    scale(var(--tab-skala, 1));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-radius .5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.bentuk--bulat { width: 46vmax; height: 46vmax; border-radius: 50%; background: var(--mint); inset-inline-start: -12vmax; inset-block-start: 2vmax; --tarik: 18; }
.bentuk--kotak { width: 34vmax; height: 34vmax; border-radius: 12vmax 2vmax 12vmax 2vmax; background: var(--peach); inset-inline-end: -8vmax; inset-block-end: -6vmax; --tarik: -11; }

/* Tiap tab menggeser latarnya sendiri. Yang berubah cuma nilai, bukan aturan. */
.hero[data-produk="pos"]       .bentuk--bulat { --tab-x: 0px;    --tab-y: 0px;    --tab-skala: 1; }
.hero[data-produk="pos"]       .bentuk--kotak { --tab-x: 0px;    --tab-y: 0px;    --tab-skala: 1; }
.hero[data-produk="absen"]     .bentuk--bulat { --tab-x: 9vmax;  --tab-y: -7vmax; --tab-skala: .82; }
.hero[data-produk="absen"]     .bentuk--kotak { --tab-x: -6vmax; --tab-y: 4vmax;  --tab-skala: 1.15; }
.hero[data-produk="kloaverse"] .bentuk--bulat { --tab-x: 4vmax;  --tab-y: 8vmax;  --tab-skala: 1.2; }
.hero[data-produk="kloaverse"] .bentuk--kotak { --tab-x: -11vmax; --tab-y: -9vmax; --tab-skala: .7; }

/* ── Tab hero: pill pemilih di antara headline dan panggung ────────── */
/* Duduk tepat di bawah kata sorot yang ikut berganti — keduanya bereaksi pada
   klik yang sama, dan itu yang membuat pill terbaca sebagai pengalih. */
.tab { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 .5rem; flex: 0 0 auto; }
.tab__tombol {
  min-height: 44px; padding: .6rem 1.1rem; cursor: pointer;
  display: grid; place-items: center;
  border: var(--garis); border-radius: 999px;
  background: var(--permukaan); color: var(--tinta);
  box-shadow: var(--bayang-kecil);
  font: 800 .9375rem/1 var(--font); letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.tab__tombol:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.tab__tombol[aria-selected="true"] {
  background: var(--tinta); color: var(--kertas);
  transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--oranye);
}

/* Logo produk di dalam tab. Ketiganya memuat tinta hitam (POS, verse,
   "absen pakai"), yang lenyap di atas tab aktif yang berlatar hitam — jadi ada
   dua varian dan yang dipakai ditentukan aria-selected. Nama tab ada di
   aria-label tombolnya, BUKAN di alt gambar: gambar yang di-display:none
   hilang dari pohon aksesibilitas, dan tombolnya akan kehilangan nama. */
.tab__logo { display: block; height: 19px; width: auto; }
.tab__logo--terang { display: none; }
.tab__tombol[aria-selected="true"] .tab__logo--gelap { display: none; }
.tab__tombol[aria-selected="true"] .tab__logo--terang { display: block; }

.panel { flex: 0 0 auto; display: grid; gap: 1rem; justify-items: center; animation: panel-masuk .24s cubic-bezier(.16,1,.3,1) both; }
/* `display: grid` di atas mengalahkan gaya bawaan [hidden]; tanpa baris ini
   atribut hidden dari JS tidak berpengaruh sama sekali. */
.panel[hidden] { display: none; }
.panel__teks { margin: 0; color: var(--teks-2); max-width: 46ch; }
.panel__aksi { margin: 0; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center; }
@keyframes panel-masuk { from { opacity: 0; transform: translateY(12px); } }

.hero__lanjut { margin: 1rem 0 0; font-size: .875rem; flex: 0 0 auto; }
.hero__lanjut a { color: var(--tinta); text-decoration: none; font-weight: 800; }
.hero__lanjut a::after { content: " \2193"; }
.hero__lanjut a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }

/* Lapisan 4 — butir */
.hero__butir {
  z-index: 1; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__isi {
  position: relative; z-index: 2; text-align: center;
  max-width: 52rem; width: 100%; margin-inline: auto;
  display: flex; flex-direction: column; justify-content: center;
}

/* Di layar sempit isi hero jauh lebih tinggi dari layarnya. Dengan tinggi
   dipatok 100svh + isi ditengahkan, judulnya berhenti tepat di bawah nav dan
   terasa menempel. Di sini hero dibiarkan tumbuh: 100svh jadi lantai, bukan
   langit-langit, dan isinya mulai dari atas dengan ruang untuk nav.

   LETAKNYA HARUS DI BAWAH aturan .hero dan .hero__isi di atas. Media query
   TIDAK menambah kekhususan; blok ini pernah ditaruh ~200 baris lebih atas
   dan diam-diam dikalahkan aturan dasarnya, jadi perbaikan jaraknya tidak
   pernah berlaku di HP sama sekali. */
@media (max-width: 720px) {
  .hero { height: auto; min-height: 100svh; padding-top: 8.5rem; padding-bottom: 2.5rem; }
  .hero__isi { justify-content: flex-start; }
}
/* ── Headline kinetik ──────────────────────────────────────────────── */
/* Merek dipakai sebagai kalimat: "Pakai Kloa buat …" — dan kata terakhirnya
   milik tab yang aktif. <br> di HTML disengaja: baris kedua selalu kata
   sorot sendirian, jadi tinggi headline stabil di ketiga tab. */
.hero__judul {
  /* Sub-headline sengaja TIDAK ada: headline + logo tab sudah menyebut ketiga
     produk. Margin ini satu-satunya pemisah ke tab, jadi jangan terlalu tipis —
     bayangan kata sorot ikut memakan ruang di bawahnya. */
  margin: 0 0 1.1rem; flex: 0 0 auto;
  font-weight: 900; font-size: clamp(1.8rem, .9rem + 3.6vw, 3.25rem);
  line-height: 1.12; letter-spacing: -.035em;
}
.hero__kata {
  display: none;
  margin-top: .12em;
  padding: .02em .3em .06em;
  background: var(--oranye); border: var(--garis); border-radius: .28em;
  box-shadow: var(--bayang-kecil);
  transform: rotate(-1.2deg);
  animation: panel-masuk .24s cubic-bezier(.16,1,.3,1) both;
}
/* Kata aktif dipilih data-produk milik hero — atribut itu sudah ada di HTML
   (pos), jadi tanpa JS pun headline utuh; motion.js tinggal menggantinya. */
.hero[data-produk="pos"]       .hero__kata[data-produk="pos"],
.hero[data-produk="absen"]     .hero__kata[data-produk="absen"],
.hero[data-produk="kloaverse"] .hero__kata[data-produk="kloaverse"] { display: inline-block; }

/* ── Panggung video maskot ─────────────────────────────────────────── */
/* Tiap video dirapatkan ke isinya masing-masing, jadi rasionya berbeda:
   POS dua karakter (1.29), Absen tiga karakter (1.78). Di layar sempit
   panggung dikunci ke rasio produk yang aktif supaya tidak ada pita kosong. */
.pentas {
  /* SATU rasio untuk semua tab, bukan per produk. Tiap video punya rasio
     sendiri (POS 1.52, Kloaverse 1.60, Absen 1.95), dan kalau panggung ikut
     berubah, seluruh isi di bawahnya melompat 43px tiap kali tab Absen
     dipilih — termasuk tab bar yang barusan diklik. Dipatok ke rasio video
     paling TINGGI (angka rasio terkecil) supaya semuanya muat; yang lebih
     lebar diberi ruang kosong di atas-bawah oleh `object-fit: contain`.
     Menambah video baru yang lebih tinggi? Perkecil angka ini. */
  --rasio: 952 / 626;
  position: relative;
  /* Tingginya = lebar dibagi rasio video, DIBATASI sisa tinggi hero.
     Sebelumnya panggung melar mengisi sisa tinggi apa pun rasionya, dan di
     jendela yang tinggi ia menyisakan ratusan piksel kosong yang tidak bisa
     dipakai video — teks di bawahnya jadi terdorong jauh.
     `flex: 0 1 auto` + `min-height: 0` yang mengizinkannya menyusut. */
  aspect-ratio: var(--rasio);
  flex: 0 1 auto; width: 100%; min-height: 0;
  margin: 0 0 1rem;
  overflow: clip;
  /* SENGAJA tanpa bingkai: video beralfa dibuat supaya maskot melayang di
     kanvas berbintik. Kartu putih pernah dicoba dan terasa murahan — kalau
     panggung mau diberi wadah lagi, lihat dulu riwayat percakapan 2026-08-30. */
}
.pentas__video {
  /* Kotaknya dipatok ke panggung, bukan dihitung dari rasio aspek videonya.
     `height: 100%` pada grid item tidak resolve di sini, jadi kotaknya jadi
     setinggi lebarnya dan meluber menimpa subheadline serta tab. Dengan
     inset: 0 ukurannya pasti, dan object-fit yang mengurus rasio. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Video beralfa: latarnya tembus ke cream, jadi tidak perlu background. */
}
.pentas__video[hidden] { display: none; }

/* ── Parallax ──────────────────────────────────────────────────────── */
/* Fallback: motion.js menulis --sy (piksel scroll) di :root. */
[data-lapisan] { transform: translate3d(0, calc(var(--sy) * var(--kecepatan) * -1px), 0); will-change: transform; }

/* Peningkatan progresif: kalau browser punya scroll-driven animations,
   gerak dipindah ke compositor dan --sy tidak lagi dipakai. */
@supports (animation-timeline: scroll()) {
  [data-lapisan] {
    transform: none;
    animation: geser-lapisan linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  @keyframes geser-lapisan { to { transform: translate3d(0, calc(var(--kecepatan) * -100vh), 0); } }

}

#sentinel-nav { height: 1px; }

/* ── Merek yang sudah pakai ────────────────────────────────────────── */
.merek {
  border-block: var(--garis);
  background: var(--permukaan-2);
  padding: 2.5rem 0;
  overflow: clip;
}
.merek__judul {
  margin: 0 0 1.75rem; text-align: center;
  font-size: .8125rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teks-2);
}
.merek__baris { overflow: clip; }
.merek__baris + .merek__baris { margin-top: 1.5rem; }
.merek__jalur { display: flex; align-items: center; width: max-content; animation: merek-jalan 46s linear infinite; }
.merek__baris--balik .merek__jalur { animation-direction: reverse; }
.merek__set { display: flex; align-items: center; }
/* Jarak lewat margin per-logo, BUKAN `gap`: dengan gap, lebar separuh jalur
   tidak sama persis dengan separuh totalnya dan gulirannya menyentak tiap
   putaran. */
.merek__logo {
  height: 72px; width: auto; margin-right: 3rem; flex: none;
  /* Diabukan seperti di kloapos.com, TAPI tanpa peredupan opacity: dengan
     opacity .6 delapan dari dua puluh logo nyaris lenyap di latar terang.
     Kontras + sedikit digelapkan mengembalikan tiga di antaranya. */
  filter: grayscale(1) contrast(1.2) brightness(.9);
  transition: filter .2s ease;
}
.merek__logo:hover { filter: none; }
@keyframes merek-jalan { to { transform: translateX(-50%); } }
@media (max-width: 560px) { .merek__logo { height: 54px; margin-right: 2rem; } }

/* Nav fixed menutupi judul saat anchor diklik — beri ruang di atas target. */
:target, main > section[id] { scroll-margin-top: 5rem; }

/* Layar sentuh tidak punya kursor — matikan tarikannya. */
@media (pointer: coarse), (hover: none) {
  .hero { --mx: 0; --my: 0; }
}

/* Layar sangat sempit: ketiga pill harus muat SATU baris — yang wrap ke
   baris kedua merusak komposisi headline-tab-panggung.
   Tingginya tetap ≥44px (target sentuh); yang menyempit hanya sisi datar. */
@media (max-width: 480px) {
  .tab { gap: .3rem; }
  .tab__tombol { padding: .45rem .7rem; }
  .tab__logo { height: 15px; }
}

/* Layar sempit: amplitudo dikecilkan, butir dimatikan. */
@media (max-width: 768px) {
  .hero__butir { display: none; }
  /* Padding hero SENGAJA tidak diatur di sini. Blok ini dulu memaksa
     padding-top: 4.5rem supaya hero muat di layar 844px — alasan yang sudah
     hilang sejak hero boleh tumbuh di layar sempit. Karena blok ini berada
     LEBIH BAWAH, aturannya menimpa blok 720px di atas dan membuat perbaikan
     jarak judul-ke-nav tidak pernah berlaku di HP. Jaraknya diatur di satu
     tempat saja: blok (max-width: 720px). */
  .pentas { margin-bottom: 1rem; }
  [data-lapisan] { transform: translate3d(0, calc(var(--sy) * var(--kecepatan) * -.5px), 0); }
  @supports (animation-timeline: scroll()) {
    @keyframes geser-lapisan { to { transform: translate3d(0, calc(var(--kecepatan) * -50vh), 0); } }
  }
}

/* ── Reduced motion: matikan gerak, JANGAN sembunyikan konten ──────── */
@media (prefers-reduced-motion: reduce) {
  :root { --sy: 0; --mx: 0; --my: 0; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js .baris__poin li { opacity: 1; transform: none; }
  html.js .kartu-cerita { opacity: 1; transform: none; }
  [data-lapisan] { transform: none; }
  .bentuk { transition: none; }
  /* Marquee berhenti; jalurnya dibungkus jadi baris statis dan salinan
     keduanya disembunyikan supaya tiap logo tidak tampil dua kali. */
  .merek__jalur { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 1.25rem; }
  .merek__salinan { display: none; }
}