/* =========================================================
   PACU PICU — stylesheet
   Token warna & ukuran diambil dari file Figma "State : Idle".
   ========================================================= */

@font-face {
  /* Font display dari desain, filenya ada di assets/fonts/ (lisensi webfont
     ditanggung klien). local() dicoba duluan buat yang kebetulan udah
     ter-install di komputernya, tapi file .woff2/.ttf di bawah ini yang
     bikin fontnya kepakai buat SEMUA pengunjung, bukan cuma yang punya
     font-nya ter-install lokal. */
  font-family: 'Super Dream';
  src:
    local('Super Dream'),
    url('assets/fonts/SuperDream.woff2') format('woff2'),
    url('assets/fonts/SuperDream-ax3vE.ttf') format('truetype');
  font-display: swap;
}

:root {
  --blue: #0116da;
  --blue-card: #115dcc;
  --blue-frame: #515fdc;
  --yellow: #edd815;
  --yellow-bg: #f5e200;
  --yellow-line: #f5d400;
  --navy: #012451;
  --orange: #eb7123;
  /* Digelapin tipis dari #ED1C24 di Figma supaya teks putih 18px lolos AA (4.8:1) */
  --red: #e31017;
  /* Khusus lingkaran foto di kartu testimoni — di Figma merahnya beda tipis
     dari --red, jadi dikasih token sendiri biar nggak dikira salah ambil. */
  --red-deep: #d10e31;
  /* Latar section FAQ. Digelapin dari #00A2B1 di Figma supaya teks putih
     20px di atasnya lolos kontras AA (3,09:1 -> 4,65:1). Perlakuan yang sama
     kayak merah #ED1C24 -> #E31017 di atas. */
  --teal: #00818c;
  /* Garis tipis pinggiran kartu (Open Issue, Tipe Ide, FAQ) */
  --card-border: #bebebe;
  --gray: #575757;
  --white: #fff;

  --shadow-btn: 3px 5px 0 #000;
  --shadow-card: 7px 10px 0 #000;
  --shadow-card-lg: 14px 12px 0 #000;
  --shadow-card-xl: 14px 12px 0 #000;
  --shadow-badge: 7px 5px 0 #000;

  --radius: 12px;
  --radius-pill: 1000px;

  --container: 1240px;
  --gutter: 20px;

  --font-display: 'Super Dream', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  color-scheme: light;
}


/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;

  /* Offset buat navbar yang nempel di atas. Pas JS nyala, offsetnya diurus
     initAnchor() di script.js — soalnya scroll-padding ikut ngegeser titik
     berhenti scroll-snap juga, dan itu bikin tiap section mendarat 110px
     kejauhan dengan section sebelumnya keintip di atasnya. */
  scroll-padding-top: 110px;

  /* Gulungan mendarat rapi di awal tiap section, nggak berhenti di
     tengah-tengah.

     "proximity", BUKAN "mandatory". Mandatory maksa tiap gulungan mendarat
     di titik snap — di situs ini ada section yang lebih tinggi dari layar
     (Tentang, Arsip), dan dengan mandatory isinya bisa kelewat nggak
     kejangkau. Proximity cuma narik kalau posisinya udah dekat, jadi nggak
     pernah nyandera pengunjung. */
  scroll-snap-type: y proximity;
}

html.js {
  scroll-padding-top: 0;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* "clip", BUKAN "hidden". Sekilas sama-sama motong luberan horizontal,
     tapi "hidden" bikin <body> jadi scroll container — dan itu mematikan
     position: sticky di dalamnya, termasuk efek tumpuk section Opening.
     "clip" motong tanpa bikin scroll container. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

/* Atribut hidden harus beneran nyembunyiin.

   Aturan bawaan browser buat [hidden] itu cuma selektor atribut, jadi dia
   KALAH sama selektor class yang punya display sendiri. Akibatnya tombol
   "Daftar Jadi Pemicu" (.btn, display: inline-flex) tetap kelihatan walau
   script.js udah masang hidden pas pendaftaran ditutup — orang jadi diajak
   daftar ke form yang udah tutup. Sama halnya .countdown (display: grid).

   !important dipakai sengaja: hidden itu instruksi mutlak, bukan saran. */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
fieldset {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--yellow-bg);
  color: var(--navy);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 200;
  background: var(--yellow-bg);
  color: var(--navy);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-weight: 800;
}

/* ---------- typography ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.display--xl {
  font-size: clamp(1.75rem, 4.4vw, 3rem);
}

.display--xxl {
  font-size: clamp(2rem, 5vw, 3.375rem);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-btn);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition:
    transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn--lg {
  min-height: 56px;
  padding: 16px 24px;
  font-size: 1.125rem;
}

/* Figma: padding 12/20, teks 18px, ikon 32px -> tinggi total 56px */
.btn--pill {
  min-height: 56px;
  padding: 12px 20px;
  font-size: 1.125rem;
}

.btn--block {
  width: 100%;
}

.btn--yellow {
  background: var(--yellow);
  color: var(--navy);
}

.btn--white {
  background: var(--white);
  color: var(--navy);
}

.btn--red {
  background: var(--red);
  color: var(--white);
}

.btn--blue {
  background: var(--blue-card);
  color: var(--white);
}

.btn:hover {
  transform: translate(-1px, -2px);
  box-shadow: 5px 8px 0 #000;
}

.btn:active {
  transform: translate(3px, 5px);
  box-shadow: 0 0 0 #000;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-btn);
}

.btn__icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn__icon--lg {
  width: 32px;
  height: 32px;
}

.btn--white .btn__icon,
.btn--yellow .btn__icon {
  filter: brightness(0) saturate(100%) invert(9%) sepia(58%) saturate(3574%) hue-rotate(201deg)
    brightness(96%) contrast(99%);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--shadow-btn);
}

/* ---------- navbar ---------- */

.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  transition:
    padding 260ms ease-out,
    opacity 260ms ease-out,
    transform 260ms ease-out;
}

/* Selama pengunjung masih di layar Opening, navbar disembunyikan total —
   dia baru nongol begitu Hero nyentuh atas layar. Lihat initNavbar di
   script.js; pointer-events dimatiin biar link-nya nggak bisa keklik
   atau ke-tab selagi nggak kelihatan.

   Dikunci ke "html.js" biar class is-hidden yang udah nempel di HTML
   nggak bikin navbar-nya ilang permanen kalau JavaScript-nya mati. */
html.js .navbar.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.navbar__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--container);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: rgba(1, 22, 218, 0.55);
  backdrop-filter: blur(12px);
  transition:
    max-width 260ms ease-out,
    border-radius 260ms ease-out,
    background-color 260ms ease-out,
    padding 260ms ease-out;
}

.navbar__logo {
  display: none;
  flex: none;
  align-items: center;
  min-height: 44px;
}

.navbar__logo img {
  height: 40px;
  width: auto;
}

.navbar__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.25rem;
}

.navbar__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.03em;
  color: var(--white);
  transition: background-color 150ms ease-out;
}

.navbar__links a:hover {
  background: rgba(255, 255, 255, 0.16);
}

.navbar__toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  flex-direction: column;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  cursor: pointer;
}

.navbar__toggle span {
  display: block;
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--navy);
}

/* state: sudah di-scroll -> bar memanjang & nempel di atas */
.navbar.is-stuck {
  padding: 0;
}

.navbar.is-stuck .navbar__bar {
  max-width: 100%;
  border-radius: 0;
  padding: 8px 24px;
  background: var(--blue);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.navbar.is-stuck .navbar__logo {
  display: inline-flex;
}


/* =========================================================
   HALAMAN UTAMA — semua section, urut sesuai halaman
   (desain Figma "New Update", node 48:870)
   ========================================================= */

/* ---------- potongan yang dipakai banyak section ---------- */

/* Label kecil di atas judul section — teks biasa, bukan pill */
.kicker {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kicker--red {
  color: var(--red);
}

.section-head .kicker {
  margin-bottom: 8px;
}

.link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.section-head {
  max-width: 60.625rem;
  margin-inline: auto;
  text-align: center;
}

.section-head--invert {
  color: var(--white);
}

.section-head--narrow {
  max-width: 48.5rem;
}

.section-head__lead {
  margin-top: 16px;
  margin-inline: auto;
  max-width: 51.875rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.section-head--narrow .section-head__lead {
  max-width: none;
}

.section-head__lead--left {
  margin-inline: 0;
  text-align: left;
}

/* Pita papan catur kuning-biru di dasar section biru (Figma: image 8).
   Dipasang lewat background biar gampang di-tile dan nggak nambah <img>. */
.checker {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 32px;
  background-image: url('assets/img/checker-strip.png');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  pointer-events: none;
}

/* Kartu "panel": kepala kuning + badan putih. Dipakai Open Issue & Tipe Ide. */
.panel-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-card-xl);
}

/* Kepalanya pakai font display (Super Dream), bukan Inter tebal. Super Dream
   badannya lebih ramping dan huruf besarnya lebih pendek dari Inter Bold di
   ukuran yang sama, jadi ukurannya dinaikin 24 -> 28px biar bobotnya di
   kartu tetap sama kayak sebelumnya. Jarak hurufnya dilebarin dikit,
   ngikut perlakuan font display di tempat lain (.snk-item__title). */
.panel-card__head {
  flex: none;
  padding: 16px;
  background: var(--yellow-bg);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--navy);
}

.panel-card__body {
  flex: 1;
  padding: 16px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--blue);
  min-height: 100svh;
  --hero-pad-top: 124px;
  --hero-pad-bottom: 72px;
  padding-top: var(--hero-pad-top);
  padding-bottom: var(--hero-pad-bottom);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.33;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__logo {
  width: clamp(180px, 22vw, 249px);
  height: auto;
}

/* Figma: Super Dream 24px, "(safe space)" disorot kuning */
.hero__eyebrow {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.25;
  color: var(--white);
}

.hero__eyebrow .accent {
  color: var(--yellow-bg);
}

/* Figma: 80px, "Bad Idea!" kuning */
.hero__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5.6vw, 5rem);
  line-height: 1;
  color: var(--white);
  text-shadow: 7px 9px 0 rgba(0, 0, 0, 0.5);
}

.hero__title .accent {
  color: var(--yellow-bg);
}

.hero__lead {
  margin-top: 19px;
  max-width: 596px;
  font-size: clamp(1rem, 1.55vw, 1.375rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Baris pengumuman kuning di atas tombol */
.hero__pengumuman {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 40px;
  max-width: 520px;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--yellow-bg);
}

.hero__pengumuman img {
  flex: none;
  width: 13px;
  height: auto;
  margin-top: 2px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

/* Visual hero: satu gambar utuh (assets/img/hero-visual.png). Sengaja
   nggak dikasih animasi ngambang — beda dari maskot section lain. */
.hero__visual {
  width: 100%;
  max-width: 479px;
  height: auto;
  margin-inline: auto;
}

/* ---------- opening (obrolan dua karakter) ---------- */

/* Figma 80:177 — frame 1440x740. Judul nempel di atas (y=67), obrolannya
   mentok di tepi bawah (karakter kanan bawahnya persis di y=740), penanda
   scroll ngambang di tengah bawah.

   Dibikin setinggi layar karena ini layar pembuka. Ruang lebih di layar
   tinggi ditaruh di ANTARA judul dan obrolannya — bukan di bawah — supaya
   karakternya tetap kelihatan berdiri di tepi bawah kayak desain. */
/* Dipaku di atas layar, lalu ketimpa semua section di bawahnya sambil
   pengunjung nge-scroll — Opening-nya sendiri nggak ikut jalan.

   Sticky-nya ngukur ke <main>, jadi dia kepaku sepanjang halaman dan
   kelihatan lagi pas di-scroll balik ke atas. Syaratnya dua: <body> nggak
   boleh jadi scroll container (lihat overflow-x: clip di atas), dan semua
   section sesudahnya harus punya posisi + latar nggak transparan supaya
   beneran nutup (lihat aturan sesudah ini). */
.opening {
  position: sticky;
  top: 0;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--red);
  min-height: 100svh;
  /* Angka Figma (67px) dipasang di blok >=1200px. Di mode tumpuk isinya
     lebih tinggi karena obrolannya dua baris ke bawah, jadi paddingnya
     dirapatin biar penanda scroll nggak kepotong di layar pendek. */
  padding-block: 40px 24px;
}

/* Yang nutup Opening. Wajib punya posisi biar ke-gambar di atas elemen
   sticky, dan latarnya wajib solid — kalau transparan, Opening-nya keliatan
   nembus dari belakang. Semuanya udah punya latar sendiri; di sini cuma
   urusan tumpukannya. */
.hero,
.issue,
.tentang,
.tipe,
.snk,
.faq,
.daftar,
.gallery,
.kontak,
.footer {
  position: relative;
  z-index: 1;
}

.opening__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Panggung obrolannya di Figma 1248px (x=96 sampai x=1344 di frame 1440),
   lebih lebar dari --container. Jadi containernya dilebarin khusus di sini
   supaya jarak ke tepi layarnya sama persis kayak desain. */
.opening .container {
  position: relative;
  max-width: calc(1248px + var(--gutter) * 2);
}

/* Judul + obrolannya dijaga sebagai SATU blok yang jaraknya tetap, lalu
   bloknya ditaruh di tengah. Dulu pakai space-between: judul nempel atas,
   obrolan nempel bawah — di layar yang lebih tinggi dari frame Figma (740px)
   sisa ruangnya numpuk jadi celah merah kosong di tengah, dan itu kelihatan
   banget di layar 1050px ke atas. */
.opening__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

/* ---- judul ---- */

/* Figma: blok 624px rata tengah, jarak eyebrow ke judul 16px */
.opening__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 624px;
  margin-inline: auto;
  text-align: center;
}

/* Figma: Super Dream 24px, kuning */
.opening__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 3.4vw, 1.5rem);
  line-height: 1.2;
  color: var(--yellow-bg);
}

/* Figma: Super Dream 48px putih (display--xl mentok di 48px) */
.opening__title {
  color: var(--white);
}

/* ---- penanda scroll ---- */

/* Figma: teks di atas, ikon 52px di bawahnya, jarak 8px, rata tengah */
.opening__scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: center;
  max-width: 496px;
  margin-top: 24px;
  color: var(--white);
}

.opening__scroll-text {
  font-size: clamp(0.9375rem, 2.6vw, 1.125rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
}

.opening__scroll-icon {
  width: 52px;
  height: 52px;
  flex: none;
}

/* Di layar sempit dua obrolannya ditumpuk ke bawah — kalau dipaksa sebaris,
   gelembungnya tinggal selebar dua-tiga kata. Versi sebaris persis Figma
   baru nyala dari 1200px ke atas (lihat blok responsive di bawah). */
.opening__chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Satu grup = karakter + gelembung omongannya */
.opening__grup {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 560px;
}

/* Yang di kiri ngomong dua kali, jadi gelembungnya ditumpuk */
.opening__bubbles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Karakternya selalu di atas gelembung, ngikut urutan layer di Figma */
.opening__char {
  position: relative;
  z-index: 1;
  flex: none;
}

.opening__char img {
  width: 100%;
  height: auto;
}

.opening__grup--kiri .opening__char {
  width: 32%;
}

.opening__grup--kanan .opening__char {
  width: 38%;
  margin-left: -10%;
  align-self: flex-end;
}

.opening__grup--kiri .opening__bubbles {
  margin-left: -6%;
}

.opening__grup--kiri .opening__bubble {
  padding-left: 40px;
}

.opening__grup--kanan .opening__bubble {
  padding-right: 32px;
}

/* Tanda "pusing" putih di atas kepala. Figma: diputar -150deg lalu dibalik
   vertikal — gabungannya bikin garisnya nunjuk ke kiri atas.
   Selektornya sengaja dobel class: kalau cuma ".opening__spark" dia kalah
   sama ".opening__char img" di atas, dan lebarnya jadi ikut 100%. */
.opening__char .opening__spark {
  position: absolute;
  /* Angkanya dihitung dari kotak SESUDAH diputar (itu yang dipakai Figma),
     makanya nggak bulat: 21% / 0,85% bikin posisinya pas sama desain. */
  left: 21%;
  top: 0.85%;
  width: 8.9%;
  height: auto;
  transform: rotate(-150deg) scaleY(-1);
  transform-origin: center;
}

/* Figma: putih, sudut 26px, bayangan 14px 12px hitam. Sisi yang ketiban
   karakter dikasih padding ekstra biar teksnya nggak ketutupan. */
.opening__bubble {
  padding: 20px;
  border-radius: 26px;
  background: var(--white);
  box-shadow: var(--shadow-card-xl);
  font-weight: 700;
  font-size: clamp(1rem, 3.2vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* Gelembung kedua yang di kiri: lebih kecil (Figma 16px, bukan 20px) dan
   sudut kiri-atasnya hampir siku (6px) — itu yang bikin dia kelihatan
   nyambung balik ke orangnya, kayak balasan susulan. */
.opening__bubble--k2 {
  border-radius: 6px 26px 26px 38px;
  font-size: clamp(0.875rem, 2.8vw, 1rem);
  line-height: 1.2;
}

/* ---------- open issue ---------- */

.issue {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding-block: 80px;
  box-shadow: var(--shadow-card-xl);
}

/* Corak besar abu-abu tipis di latar */
.issue__watermark {
  position: absolute;
  left: -58%;
  top: -34%;
  width: 224%;
  max-width: none;
  pointer-events: none;
}

.issue .container {
  position: relative;
}

/* Issue-nya udah lebih dari sebaris, jadi kartunya digeser ke samping —
   bukan dibikin grid yang makin turun ke bawah dan manjangin halaman.
   Rel-nya selebar layar (di luar .container) biar kartu paling kanan
   kepotong di tepi: itu petunjuk masih ada lanjutannya. */
.issue-rail {
  position: relative;
  margin-top: 64px;
}

.issues {
  display: flex;
  /* Figma 72:81: jarak antar kartu 40px */
  gap: 2.5rem;
  align-items: stretch;
  overflow-x: auto;
  /* Lihat catatan panjang di .rail__track: kalau cuma sumbu-x yang diisi,
     browser diam-diam bikin sumbu-y ikut 'auto' dan rel ini nangkep scroll
     vertikal halaman pas kursornya lagi di atas kartu. */
  overflow-y: hidden;
  /* Kartu pertama sejajar tepi luar container, persis kayak rel Arsip */
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  /* Bayangan kartunya 14x12 dan ada cincin fokus keyboard — tanpa ruang ini
     dua-duanya kepotong sama overflow-y: hidden di atas. */
  padding-block: 4px 22px;
  /* Sengaja TANPA scroll-snap. scroll-snap-align nyejajarin kartu ke tepi
     scrollport — yang nggak ngitung padding-inline di atas — jadi begitu
     halaman dimuat rel-nya langsung kegeser sendiri 219px dan kartu
     pertamanya nempel tepi layar, bukan sejajar container. Rel Arsip juga
     nggak pakai snap, jadi sekalian seragam. */
  overscroll-behavior-x: contain;
  /* Diseret pakai mouse — lihat setupRail di script.js */
  cursor: grab;
  /* Scrollbar-nya disembunyiin: geser pakai seret/swipe. Isinya tetap
     kejangkau keyboard karena tiap kartu punya tombol yang bisa di-Tab. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.issues::-webkit-scrollbar {
  display: none;
}

.issues.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Figma 72:81 - kartu 386,667px, border 1px, radius 16, bayangan 14x12.
   Isinya: logo, judul, deskripsi (dipotong 3 baris), lalu bar kuning
   "Baca Selengkapnya" selebar kartu di paling bawah. */
.issue-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-card-xl);
}

/* Cuma yang di dalam rel yang lebarnya dipatok. Di issue.html kartunya
   dipasang di grid biasa, jadi di sana lebarnya ikut kolom. */
.issues .issue-card {
  flex: none;
  /* Figma: 386,667px. Di layar sempit dipotong 82vw biar kartu berikutnya
     tetap keintip sedikit — itu yang bikin orang ngeh bisa digeser. */
  width: min(24.1667rem, 82vw);
}

/* Tombol "Lihat Semua Issue", di bawah rel dan ketengah */
.issue-semua {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* Figma: padding 24, jarak logo ke teks 24 */
.issue-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 24px;
}

/* Tingginya dipatok 114px biar judul semua kartu mulai di baris yang sama,
   walau logonya beda-beda ukuran. Lebar & tinggi gambarnya sendiri dibawa
   dari data.js lewat atribut style (lihat renderOpenIssues). */
.issue-card__logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 114px;
}

.issue-card__logo img {
  /* Figma: posternya SUCI sudutnya 7px. Logo lain latarnya transparan,
     jadi radius di situ nggak ngaruh. */
  border-radius: 7px;
  object-fit: contain;
}

.issue-card__teks {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  text-align: center;
}

/* Figma: Inter Bold 22px, tinggi baris 32px */
.issue-card__judul {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4545;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* Figma: 20px/32px, dipatok 3 baris (96px), sisanya kepotong.
   Warnanya #474747, beda tipis dari --gray (#575757) yang dipakai di
   tempat lain, jadi dikasih nilai sendiri di sini. */
.issue-card__text {
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #474747;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Figma: bar kuning selebar kartu, padding 16, teks Inter Bold 18px.
   Bentuknya bar, bukan tombol melayang, jadi border-radius-nya ngandelin
   overflow: hidden di .issue-card. */
.issue-card__more {
  flex: none;
  width: 100%;
  padding: 16px;
  border: 0;
  background: var(--yellow-bg);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.issue-card__more:hover {
  background: var(--yellow);
}

.issue-card--pending .issue-card__judul {
  color: var(--gray);
}

.issue-card--pending {
  border-style: dashed;
  border-width: 2px;
  box-shadow: none;
}

.issue-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* Figma: jarak teks ke tombol 64px. Pas turun ke dua baris di layar
     sempit, 64px kelewat lega — jadi jarak barisnya dipisah, 24px. */
  gap: 1.5rem 4rem;
  margin-top: 64px;
  padding: 24px;
  border-radius: 16px;
  background: var(--blue);
}

.issue-cta__text {
  flex: 1 1 320px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  color: var(--white);
}

/* ---------- tentang (about + alur + benefit) ---------- */

.tentang {
  position: relative;
  overflow: hidden;
  background: var(--yellow-bg);
  padding-block: 80px;
}

.tentang__swirl {
  position: absolute;
  width: 1830px;
  max-width: none;
  opacity: 0.55;
  pointer-events: none;
}

.tentang__swirl--a {
  left: -220px;
  top: -84px;
  transform: rotate(-15deg);
}

.tentang__swirl--b {
  left: -415px;
  bottom: -320px;
  transform: rotate(-30deg);
}

.tentang .container {
  position: relative;
}

.tentang__intro {
  position: relative;
}

.tentang__hashtag {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--navy);
}

/* ---- alur ---- */

.alur {
  margin-top: 96px;
}

.alur__title {
  text-align: center;
  color: var(--navy);
}

/* Figma: kartunya selebar isinya (nggak dipaksa sama rata), jarak 54px,
   dan barisnya rata tengah. */
.alur-steps {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 56px;
}

/* Dua panah lengkung putus-putus yang nyambungin ketiga kartu. Cuma muncul
   di layar lebar — di layar sempit kartunya ketumpuk jadi nggak nyambung. */
/* Figma: panahnya 675,5 x 81,675 dan ujung bawahnya nempel persis di tepi
   atas baris kartu. Lebarnya 55% dari container (1240px) = ~682px. */
.alur-steps__arc {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  width: 55%;
  max-width: none;
  height: auto;
  aspect-ratio: 675.5 / 81.675;
  transform: translateX(-50%);
  pointer-events: none;
}

.alur-step {
  /* Figma: kartunya nggak melar, cuma selebar teks terpanjangnya */
  flex: none;
  max-width: 100%;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--blue-card);
  box-shadow: var(--shadow-card-xl);
  color: var(--white);
}

.alur-step__title {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  letter-spacing: 0.02em;
  color: var(--white);
}

.alur-step__body {
  margin-top: 4px;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* ---- benefit ---- */

.benefit {
  margin-top: 104px;
}

.benefit .section-head {
  max-width: 65.625rem;
}

.benefit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 2rem;
  margin-top: 64px;
  align-items: start;
}

/* Di layar lebar kartu tengahnya ditarik naik (lihat blok RESPONSIVE).
   Tarikan itu dikompensasi di sini biar kartunya nggak naik nabrak
   sub-heading di atasnya. */
@media (min-width: 1024px) {
  .benefit-cards {
    margin-top: 136px;
  }
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8125rem;
  padding: 24px;
  border-radius: 26px;
  background: var(--white);
  box-shadow: var(--shadow-card-xl);
  text-align: center;
}

.benefit-card__img {
  width: min(200px, 70%);
  height: auto;
}

.benefit-card__text {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.benefit-card__plus {
  margin-block: 2px;
}

.benefit-card__note {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ---------- tipe ide ---------- */

.tipe {
  position: relative;
  overflow: hidden;
  background: var(--red);
  padding-block: 80px;
}

.tipe__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.tipe .container {
  position: relative;
}

.panel-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 64px;
  align-items: stretch;
}

.check-list {
  display: grid;
  gap: 0.75rem;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.check-list img {
  flex: none;
  width: 32px;
  height: 32px;
}

/* ---------- peraturan / syarat & ketentuan ---------- */

.snk {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding-block: 88px;
}

.snk__swirl {
  position: absolute;
  max-width: none;
  opacity: 0.6;
  pointer-events: none;
}

.snk__swirl--a {
  right: -18%;
  top: -26%;
  width: 78%;
}

.snk__swirl--b {
  left: -19%;
  bottom: -30%;
  width: 62%;
}

.snk__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.snk__intro {
  position: relative;
}

.snk__mascot {
  display: none;
  width: 304px;
  /* Wajib: atribut height di HTML-nya kebaca browser sebagai tinggi tetap
     728px. Tanpa baris ini gambarnya dipaksa 304x728 alias gepeng. */
  height: auto;
  margin-top: 48px;
}

.snk-items {
  display: grid;
  gap: 1.5rem;
}

/* Dua kolom: nomor di kiri, judul & isi di kanan.

   Dulu ini flex, dan judul+isi dibungkus satu <div>. Akibatnya nomornya cuma
   bisa disejajarin sama PUNCAK bloknya, bukan sama judulnya — dan karena
   kotak nomornya lebih tinggi dari satu baris judul, dia kelihatan naik
   sendiri. Sekarang ketiganya jadi anak langsung: nomornya nempati baris 1
   kolom 1, judulnya baris 1 kolom 2, isinya baris 2 kolom 2. Nomor dan judul
   otomatis sebaris, berapa pun panjang judulnya. */
.snk-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0;
  align-items: center;
}

/* Garis tipis pemisah antar poin, kecuali sebelum poin pertama */
.snk-item + .snk-item {
  padding-top: 24px;
  border-top: 1px solid #d9d9d9;
}

/* Tingginya sengaja dibikin mepet setinggi satu baris judul (~40px). Versi
   lamanya 52px — itu 12px lebih jangkung dari judulnya, dan selisih itu
   yang bikin baris pertamanya kedorong turun begitu nomornya ditaruh
   sebaris. */
.snk-item__no {
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--red);
  box-shadow: var(--shadow-badge);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.12;
  color: var(--white);
}

.snk-item__title {
  grid-column: 2;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: 0.02em;
  color: var(--navy);
}

/* Nempel ke judulnya (dulu 12px). Isinya penjelasan judul di atasnya, jadi
   dua-duanya dibaca sebagai satu blok — bukan dua hal terpisah. */
.snk-item__body {
  grid-column: 2;
  margin-top: 4px;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* ---------- faq ---------- */

/* Birunya sama persis kayak Hero (--blue). Teks putih di atasnya kontrasnya
   9,9:1 — lebih lega dari tosca yang dipakai sebelumnya (4,65:1). */
.faq {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  padding-block: 80px;
}

/* Figma 72:273: satu corak nutup seluruh section dengan transparansi 33%,
   bukan tiga swirl yang ditempel di pojok-pojok kayak versi sebelumnya.
   File coraknya sama persis dengan yang dipakai Hero & Gallery, jadi nggak
   nambah aset baru.

   Dipasang inset: 0 + object-fit: cover. Jadi pas ada FAQ yang dibuka dan
   section-nya numbuh, coraknya ikut memanjang — bukan geser sendiri kayak
   tiga swirl yang dulu. */
.faq__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.33;
  pointer-events: none;
}

.faq .container {
  position: relative;
}

/* Dulu dipatok max-width: 62.5rem (1000px) — di layar lebar itu lebih
   sempit dari isi container-nya sendiri (1176px di 1920), jadi tiap kartu
   pertanyaan kelihatan nyisain ruang kosong di kiri-kanan. Sekarang
   selebar container penuh, sama kayak elemen lain di halaman ini. */
.faq-list {
  display: grid;
  gap: 1.5rem;
  margin-top: 48px;
}

.faq-item {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 16px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  cursor: pointer;
  /* Hapus segitiga bawaan browser — penandanya pakai ikon +/- di kanan */
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

/* Dua ikon ditumpuk pas di posisi yang sama, yang kelihatan cuma satu —
   gantian lewat opacity ngikutin atribut [open] bawaan <details>. */
.faq-item__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
}

.faq-item__icon img {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  transition: opacity 150ms ease-out;
}

.faq-item__icon-minus {
  opacity: 0;
}

.faq-item[open] .faq-item__icon-plus {
  opacity: 0;
}

.faq-item[open] .faq-item__icon-minus {
  opacity: 1;
}

/* Jawaban FAQ nggak langsung nongol. Munculnya disapu dari ATAS ke BAWAH
   pakai clip-path, kayak gulungan yang dibuka — bukan fade barengan yang
   bikin teksnya kerasa mengembang dari tengah.

   clip-path: inset(atas kanan BAWAH kiri). Mulai dari bawah dipotong 100%
   (nggak ada yang kelihatan), lalu potongannya dibuka sampai 0. Ditambah
   geser turun dikit biar nggak kaku. Yang dianimasiin isinya, soalnya
   <details> sendiri nggak bisa ditransisi. */
.faq-item__a {
  padding: 0 16px 16px;
  animation: faq-buka 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes faq-buka {
  from {
    opacity: 0.3;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

/* Kotaknya ikut ngangkat dikit pas kebuka, jadi kelihatan aktif */
.faq-item {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item[open] {
  transform: translate(-2px, -4px);
  box-shadow: 10px 13px 0 #000;
}

/* Ikon +/- ikut muter dikit pas ganti, biar nggak cuma tuker gambar */
.faq-item__icon img {
  transition:
    opacity 200ms ease-out,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item[open] .faq-item__icon img {
  transform: rotate(180deg);
}

.faq-item__a p {
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.faq-item__a b {
  font-weight: 700;
}

/* ---------- daftar (call to action) ---------- */

.daftar {
  position: relative;
  overflow: hidden;
  background: var(--red);
  padding-block: 88px;
}

/* Corak latar section daftar. Dipasang lewat background-image (bukan <img>)
   supaya gampang diatur ukurannya dan nggak ikut alur dokumen. */
.daftar__bg {
  position: absolute;
  inset: 0;
  opacity: 0.83;
  background-image: url('assets/img/submit-bg.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.daftar .container {
  position: relative;
}

.daftar__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.daftar__kicker {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--yellow-bg);
  text-transform: uppercase;
}

.daftar__title {
  margin-top: 20px;
  color: var(--white);
  text-shadow: 4px 5px 0 rgba(0, 0, 0, 0.35);
}

.daftar__lead {
  margin-top: 20px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Dulu bentuknya pill berbingkai. Sekarang daftar centang, nyamain section
   "Semua ide valid" — ukuran teks & ikonnya ikut .check-list, di sini cuma
   warnanya yang disesuaikan buat latar merah. */
.daftar__nudges {
  margin-top: 28px;
}

.daftar__nudges li {
  /* .check-list aslinya navy karena dipakai di atas kartu putih */
  color: var(--white);
}

/* Ikon centangnya aslinya teal (#00A2B1). Di atas merah (--red) kontrasnya
   cuma 1,57:1 alias nggak kelihatan, jadi diputihin — jadi 4,8:1. */
.daftar__nudges img {
  filter: brightness(0) invert(1);
}

.daftar__card {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--white);
}

.daftar__card-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---- hitung mundur ---- */

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 12px;
}

.countdown__box {
  padding: 12px 4px;
  border-radius: var(--radius);
  background: var(--navy);
  text-align: center;
}

.countdown__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.4vw, 1.875rem);
  line-height: 1;
  /* Angkanya ganti tiap detik — lebar digit disamain biar kotaknya
     nggak goyang-goyang tiap pergantian angka. */
  font-variant-numeric: tabular-nums;
  color: var(--yellow);
}

.countdown__label {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.daftar__deadline {
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray);
}

/* ---- sisa kuota ---- */

.daftar__kuota {
  margin-top: 24px;
}

.daftar__kuota-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.daftar__kuota-angka {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.daftar__bar {
  overflow: hidden;
  height: 18px;
  margin-top: 10px;
  border: 3px solid var(--navy);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.daftar__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--red);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.daftar__kuota-sisa {
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--red);
}

.daftar__card .btn--yellow {
  margin-top: 24px;
}

/* Nongol gantiin "Sisa waktu pendaftaran" kalau kuotanya penuh / tanggalnya
   kelewat. Ditaruh paling atas kartu (lihat urutannya di index.html) jadi
   jadi JUDUL kartu, bukan catatan kecil yang nyempil di bawah info kuota —
   makanya gayanya judul (bold, navy, nempel kiri), bukan kotak notifikasi
   kayak sebelumnya. */
.daftar__tutup {
  margin-bottom: 20px;
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.daftar__fineprint {
  margin-top: 20px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray);
}

/* ---------- gallery (arsip + testimoni) ---------- */

.gallery {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  padding-block: 88px 120px;
}

.gallery__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.33;
  pointer-events: none;
}

.gallery .container {
  position: relative;
}

/* ---- rel jemuran ----
   Garisnya lurus melintang, kartunya rata semua, dan barisnya bisa diseret
   ke samping. Rel-nya sengaja selebar layar (bukan selebar container) biar
   kartu paling kanan kepotong di tepi — itu petunjuk masih ada lanjutannya. */
.rail {
  position: relative;
  margin-top: 72px;
}

/* Garis jemurannya nggak ikut digeser — dia nempel ke section, jadi kartunya
   yang jalan di belakangnya. Figma: 8px di bawah ujung atas jepitan. */
.rail__line {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  /* SVG-nya cuma 2px tinggi dan preserveAspectRatio="none", jadi tingginya
     ditentuin di sini — bukan dari file gambarnya. */
  height: 3px;
  pointer-events: none;
}

.rail__track {
  display: flex;
  /* Figma: jarak antar kartu 74px */
  gap: 4.625rem;
  overflow-x: auto;
  /* Kalau cuma overflow-x yang diisi, browser diam-diam ngitung overflow-y
     jadi "auto" juga (aturan CSS: satu sumbu 'auto', satu lagi 'visible' ->
     yang visible dipaksa jadi 'auto'). Efeknya rel ini diam-diam jadi wadah
     scroll VERTIKAL juga — meski isinya nggak butuh — dan itu yang bikin
     scroll/geser dua-jari di atas kartu ketangkep sama rel-nya sendiri,
     bukan nge-scroll halaman. Makanya overflow-y ditegasin "hidden" di
     sini, biar rel ini cuma scroll ke samping. */
  overflow-y: hidden;
  /* Figma: kartu pertama sejajar tepi luar container (100px di layar 1440) */
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  /* Ruang buat cincin fokus keyboard biar nggak kepotong rel */
  padding-bottom: 6px;
  overscroll-behavior-x: contain;
  /* Diseret pakai mouse — lihat setupRail di script.js */
  cursor: grab;
  /* Scrollbar-nya disembunyiin: geser pakai seret/swipe. Isinya tetap
     kejangkau keyboard karena tiap kartu itu link yang bisa di-Tab, dan
     browser otomatis nggeser rel-nya pas elemen ke-fokus. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail__track::-webkit-scrollbar {
  display: none;
}

/* Pas lagi diseret: kursor berubah dan teks nggak ikut ke-blok */
.rail__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.rail__item {
  position: relative;
  flex: none;
  /* Figma: kartunya lebar tetap 300px, nggak ikut melebar */
  width: 300px;
}

/* Jepitan nangkring di tengah atas kartu, nindih tepi atasnya */
.rail__pin {
  position: absolute;
  top: 0;
  /* Figma: pas di tengah kartu. Ditulis relatif (50% dikurangi separuh
     lebar jepitan), bukan 132px mati — di HP kartunya lebih sempit dari
     300px dan angka matinya bikin jepitannya melenceng ke kiri. */
  left: calc(50% - 18px);
  width: 36px;
  height: 63px;
  z-index: 1;
}

/* Figma: badan kartu mulai 47px di bawah ujung atas jepitan */
.rail__item .photo-card {
  margin-top: 47px;
}

/* Kartu foto: dipakai kartu arsip. Sengaja tanpa drop shadow. */
.photo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 5px solid var(--white);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-card:hover {
  transform: translate(-3px, -6px);
}

.photo-card__media {
  aspect-ratio: 392 / 267;
  overflow: hidden;
  background: var(--blue-frame);
}

.photo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-card:hover .photo-card__media img {
  transform: scale(1.06);
}

.photo-card__caption {
  flex: 1;
  padding: 14px 16px;
  background: var(--white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--navy);
}

.rail__item .photo-card__caption {
  /* Figma: padding 10px, teksnya pakai Inter (bukan font display), dan
     line-height "normal" (~1.2) — bukan 1.5 bawaan body. */
  padding: 10px;
  font-family: var(--font-body);
  line-height: 1.2;
}

.volume__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.volume__no {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.volume__date {
  flex: none;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* Ajakan buka materi, di bawah rel. Figma 128:295.

   Ukurannya ditulis rem, bukan px, biar ikut menyusut bareng skala seragam
   desktop (di >=1024px ukuran font root dikali --s). Di bawah 1024px
   1rem tetap 16px, jadi angkanya kebaca langsung sebagai px Figma. */
.gallery__outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 88px auto 0;
  text-align: center;
}

/* Figma 128:261: Super Dream 54px, lebar 864 */
.gallery__outro-title {
  max-width: 54rem;
  color: var(--white);
}

/* Figma 128:290: Inter Medium 20/28, lebar 776 */
.gallery__outro-text {
  margin-top: 0.625rem;
  max-width: 48.5rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Figma 128:143 — kolase 634x540. Empat cover slide + karakternya udah jadi
   satu gambar utuh (lengkap sama miring-miringnya), jadi nggak perlu disusun
   ulang per kartu di CSS.

   Kolasenya sendiri yang jadi tombolnya, ngikut desain: "klik kolase di
   bawah ini". Makanya nggak ada tombol kuning terpisah lagi. */
.materi-kolase {
  /* Jangkar buat tombol "Akses Materi" yang ditaruh di tengahnya */
  position: relative;
  display: block;
  margin-top: 1.625rem;
  width: min(39.625rem, 100%);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.materi-kolase img {
  width: 100%;
  height: auto;
  transition: opacity 200ms ease-out;
}

/* Kolasenya diredupin pas tombolnya nongol, biar tombolnya nggak tenggelam
   di gambar yang ramai. Yang diredupin cuma <img>-nya, bukan link-nya —
   kalau di link, tombolnya ikut ketarik jadi ikut pudar. */
.materi-kolase:hover img,
.materi-kolase:focus-visible img {
  opacity: 0.6;
}

/* Kolasenya diklik, jadi dia perlu nunjukin dirinya bisa diklik. Naik dikit
   + membesar tipis — sengaja lebih kalem dari cover kecil yang dulu, karena
   objeknya jauh lebih besar. */
.materi-kolase:hover {
  transform: translateY(-6px) scale(1.02);
}

/* Tombol "Akses Materi": nongol di tengah kolase waktu kursornya lewat.

   pointer-events: none penting — tanpa itu, begitu tombolnya muncul dia
   nangkep kursor, .btn:hover ikut nyala, dan transform-nya nimpa
   translate(-50%, -50%) di bawah ini alias tombolnya loncat dari tengah.
   Kliknya tetap jalan karena yang jadi link itu kolasenya, bukan tombol.

   :focus-visible ikut dipasang biar yang pakai keyboard juga kebagian
   petunjuknya — kalau cuma :hover, mereka nggak pernah lihat tombol ini. */
.materi-kolase__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition:
    opacity 200ms ease-out,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.materi-kolase:hover .materi-kolase__btn,
.materi-kolase:focus-visible .materi-kolase__btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- testimoni ---- */

.testi {
  margin-top: 104px;
}

.testi__title {
  text-align: center;
  color: var(--white);
}

/* Semua kartu kelihatan sekaligus — nggak ada geser ke samping. */
.testi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 1.5rem;
  margin-top: 64px;
}

/* Padding & lingkaran fotonya sengaja rem, bukan px mentah.

   Dulu dua-duanya px (24 dan 100) sementara lebar kartunya ikut skala
   seragam desktop. Jadi di 1024px kartunya nyusut ke 200px tapi padding
   dan fotonya tetap segede aslinya — sisa buat nama cuma 44px, dan nama
   sepanjang "Anwariksono" nyembur keluar kartu. Sekarang ketiganya
   menyusut bareng. Di bawah 1024px 1rem tetap 16px, jadi tampilan HP &
   tablet nggak berubah sama sekali. */
.testi-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: var(--white);
}

.testi-card__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Figma 72:424: lingkarannya bukan merah polos — ada corak merah di
   belakang orangnya. Filenya sama persis dengan latar section "Semua ide
   valid", jadi nggak nambah aset. Warna solid di bawah tetap dipasang
   sebagai jaring pengaman kalau gambarnya gagal dimuat. */
.testi-card__avatar {
  position: relative;
  flex: none;
  overflow: hidden;
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  background: var(--red-deep) url('assets/img/tipe-bg.jpg') center / cover;
}

/* Foto orangnya berupa potongan (bukan foto kotak), ditaruh nempel atas dan
   rata tengah — 76% bikin tinggi alaminya pas ngisi lingkaran. */
.testi-card__avatar img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 76%;
  height: auto;
  transform: translateX(-50%);
}

/* Sebagian foto dibingkai lebih rapat: orangnya ngisi penuh lingkaran,
   bukan ngambang kecil di tengahnya. Angkanya dari Figma 72:424 — lebar
   141px, digeser 12px ke atas, di lingkaran 100px. */
.testi-card__avatar--penuh img {
  top: -12%;
  width: 141%;
}

/* Tanpa min-width: 0, blok nama ini nolak menyusut di bawah lebar teksnya
   (bawaan flex item min-width-nya "auto") — nama panjang kayak
   "Anwariksono" jadi nyembur keluar kartu sampai nimpa kartu sebelahnya
   di layar sempit. */
.testi-card__ident {
  min-width: 0;
}

.testi-card__name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* Nama satu kata yang kepanjangan tetap dipatah, bukan diterusin keluar.
     "break-word", bukan "anywhere": patah di spasi dulu, motong di tengah
     kata cuma kalau satu katanya sendiri emang nggak muat. */
  overflow-wrap: break-word;
  color: var(--navy);
}

.testi-card__unit {
  margin-top: 4px;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.testi-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

/* Figma 72:424: warnanya navy, bukan merah. Huruf besar-kecilnya juga
   nggak dipaksa KAPITAL lewat CSS lagi — di Figma dua kutipan lama emang
   ditulis kapital sementara yang baru nggak, jadi keputusannya dipindah ke
   teks masing-masing di data.js. */
.testi-card__headline {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  letter-spacing: 0.02em;
  color: var(--navy);
}

.testi-card__quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.testi-card__quote p {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* ---------- pop up isi lengkap satu issue ---------- */

.issue-modal {
  width: min(680px, calc(100vw - 40px));
  max-height: min(82vh, 640px);
  padding: 0;
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card-lg);
  overflow: hidden;
}

/* Dipisah dari aturan di atas: <dialog> yang lagi ketutup itu display:none
   dari browser, jadi display-nya cuma boleh diisi pas [open] — kalau ditulis
   di blok biasa, pop up-nya bakal nongol terus. */
.issue-modal[open] {
  display: flex;
  flex-direction: column;
}

.issue-modal::backdrop {
  background: rgba(1, 36, 81, 0.72);
}

.issue-modal__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 24px 24px 16px;
  border-bottom: 2px dashed var(--yellow-line);
}

.issue-modal__pill {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.issue-modal__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* Ditarik keluar dikit biar ikonnya lurus sama tepi kanan isi pop up,
     tanpa ngorbanin area sentuh 44px. */
  margin: -10px -10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--navy);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.issue-modal__close:hover {
  background: rgba(1, 36, 81, 0.1);
}

.issue-modal__close img {
  width: 20px;
  height: 20px;
}

/* Isinya yang di-scroll, bukan seluruh pop up — jadi nama project di atas
   tetap kelihatan walau teksnya panjang. */
.issue-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 28px;
}

.issue-modal__body p {
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gray);
}

/* ---------- kontak ---------- */

.kontak {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding-block: 88px;
}

/* Lapisan paling belakang: corak garis punya Open Issue. Warnanya #F5F5F5 —
   lebih muda lagi dari yang lengkung, jadi dia kebaca sebagai tekstur, bukan
   sebagai bentuk. Ditaruh paling atas di HTML biar ketimpa yang lain. */
.kontak__corak {
  position: absolute;
  left: -32%;
  top: -22%;
  width: 176%;
  max-width: none;
  pointer-events: none;
}

/* Ornamen lengkung, pinjem aset punya section S&K. Nggak pakai opacity 0.6
   kayak di sana: di S&K corak itu cuma latar belakang jauh, sementara di
   Kontak dia satu-satunya isi selain dua kartu — kalau diredupin lagi dari
   #F2F2F2 jadi nyaris nggak kelihatan. Abu-abunya sendiri udah lembut, cuma
   5% lebih gelap dari putih, jadi teksnya tetap gampang kebaca.

   Dicermin (scaleX(-1)) dan ditaruh di sisi seberang punya S&K biar nggak
   kebaca sebagai tempelan yang sama persis. */
.kontak__swirl {
  position: absolute;
  max-width: none;
  pointer-events: none;
  transform: scaleX(-1);
}

/* Empat sudut, ukurannya beda-beda biar nggak kelihatan simetris kaku.
   Semuanya jauh lebih kecil dari yang di S&K (78%/62%) walaupun asetnya
   sama. Sebabnya section ini setinggi layar tapi isinya cuma judul + dua
   kartu: corak selebar itu bukan lagi jadi aksen sudut, tapi nutup hampir
   seluruh section — kesannya bukan "ada ornamen", tapi "background-nya
   berubah jadi abu-abu". */
.kontak__swirl--a {
  left: -6%;
  top: -14%;
  width: 26%;
}

.kontak__swirl--b {
  right: -5%;
  bottom: -16%;
  width: 22%;
}

.kontak__swirl--c {
  right: 3%;
  top: -18%;
  width: 15%;
  transform: scaleX(-1) rotate(24deg);
}

.kontak__swirl--d {
  left: 2%;
  bottom: -20%;
  width: 17%;
  transform: scaleX(-1) rotate(-18deg);
}

.kontak .container {
  position: relative;
}

/* Lebar tiap kartu dibatasi 20rem, bukan dibiarin 1fr. Panitianya tinggal
   dua orang, dan tanpa batas ini dua kartunya ditarik melar masing-masing
   ~600px sampai selebar container — nama pendek di tengah kotak sepanjang
   itu kelihatan kosong melompong. Barisnya ketengah, jadi mau isinya dua
   atau empat kartu, letaknya tetap rapi. */
.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 20rem));
  justify-content: center;
  gap: 1.75rem;
  margin-top: 56px;
}

/* Isinya putih solid. Bukan cuma soal selera: section Kontak sekarang
   punya lima ornamen abu-abu di belakangnya, dan waktu kartunya masih
   transparan corak itu lewat NEMBUS kartu — garis abu-abu kelihatan di
   belakang nama sama nomor teleponnya. Putih solid yang bikin kartunya
   kebaca sebagai benda di atas latar, bukan bingkai kosong. */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact:hover {
  transform: translate(-3px, -6px);
  box-shadow: 10px 13px 0 #000;
}

/* Figma: nama pakai Inter Bold, bukan font display */
.contact__name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
}

.contact__phone {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.contact .btn {
  margin-top: 20px;
  width: 100%;
  /* Kartunya putih dan tombolnya juga putih (.btn--white) — tanpa garis
     tepi, tombolnya nyaris nyatu sama kartu, cuma kebaca dari box-shadow.
     Garis navy 2px ini yang bikin batasnya jelas. */
  border: 2px solid var(--navy);
}

/* ---------- instagram ---------- */

/* Figma 127:97. Teks rata kiri; tangkapan layar profil di kanan.

   File PNG-nya ("Asset Instagram 3") kartunya LURUS — nggak miring dan nggak
   pakai bayangan, beda dari dua versi sebelumnya. Sudut-sudutnya udah
   membulat dan transparan dari file-nya, jadi di sini nggak perlu
   border-radius atau box-shadow tambahan. */
.ig {
  position: relative;
  overflow: hidden;
  background: var(--yellow-bg);
  /* Bawahnya 0: tangkapan layarnya harus nempel tepi bawah section */
  padding-block: 48px 0;
}

.ig__bg {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.ig__inner {
  position: relative;
}

.ig__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ig__title {
  color: var(--navy);
}

.ig__lead {
  margin-top: 16px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  /* Figma: 20px/28px */
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.ig__btn {
  margin-top: 40px;
}

.ig__shot {
  display: block;
  width: min(420px, 88%);
  height: auto;
  margin: 32px auto 0;
}

/* =========================================================
   SECTION SETINGGI LAYAR & TITIK BERHENTI GULUNGAN
   ========================================================= */

/* Enam section ini dibikin minimal setinggi layar, isinya ketengah.
   "min-height", bukan "height": begitu isinya lebih tinggi dari layar
   (FAQ yang lagi dibuka, S&K di layar pendek, semuanya di HP) section-nya
   tetap manjang ngikut isi — nggak ada yang kepotong. */
.tipe,
.snk,
.faq,
.daftar,
.kontak {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Titik berhenti gulungan CUMA di Hero, nggak di section lain — biar
   sisanya digulung biasa aja tanpa ketarik-tarik.

   scroll-snap-stop: always bikin satu gulungan nggak bisa numpuk lewat
   dari Hero, jadi pengunjung berhenti sekali di sini dulu sebelum lanjut
   ke bawah. Ini versi bawaan browser dari permintaan "user ketahan di
   Hero": nggak ada scroll yang disetop paksa pakai JS, jadi keyboard,
   screen reader, dan layar sentuh tetap jalan normal. */
.hero {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ---------- footer ---------- */

.footer {
  background: var(--navy);
  color: var(--white);
  padding-block: 52px 32px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__logo {
  height: 64px;
  width: auto;
}

.footer__tagline {
  margin-top: 16px;
  max-width: 26.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* Link pendek kayak "FAQ" tetap kena area sentuh 44px */
  min-width: 44px;
  /* 16px di layar 1920 (1rem), dan dikasih lantai 14px biar di layar lebih
     kecil nggak ikut menciut jadi 10-11px kayak sebelumnya — pola yang sama
     dipakai tombol di situs ini. */
  font-size: max(14px, 1rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  transition: color 150ms ease-out;
}

.footer__links a:hover {
  color: var(--yellow);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer__legal {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}


/* =========================================================
   HALAMAN SEMUA ISSUE (issue.html)
   Kartunya sendiri pakai .issue-card yang sama kayak di beranda —
   di sini cuma kepala halaman, tab per unit bisnis, dan grid-nya.
   ========================================================= */

.semua-head {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: var(--white);
  /* Navbar-nya fixed (tingginya ~60px di layar kecil), jadi padding atasnya
     harus ngelewatin itu dulu baru nambah jarak napas. Angka desktopnya lebih
     gede, diatur di blok skala seragam di bawah. Padding bawahnya nyisain
     32px buat pita papan catur. */
  padding-block: 116px 72px;
}

.semua-head__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  pointer-events: none;
}

.semua-head__inner {
  position: relative;
  max-width: 53.75rem;
  text-align: center;
}

/* Panahnya dibalik arahnya lewat rotate — biar nggak perlu nambah satu file
   SVG cuma buat panah ke kiri. */
.semua-head__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
  transition: color 150ms ease-out;
}

.semua-head__back img {
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
  filter: brightness(0) invert(1);
  opacity: 0.82;
}

.semua-head__back:hover {
  color: var(--yellow);
}

.semua-head__title {
  margin-top: 8px;
  text-shadow: 5px 6px 0 rgba(0, 0, 0, 0.45);
}

.semua-head__lead {
  margin-top: 16px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.semua {
  background: var(--white);
  padding-block: 56px 88px;
}

/* ---- tab unit bisnis ---- */

.issue-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.issue-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid var(--navy);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  cursor: pointer;
  transition:
    background-color 150ms ease-out,
    box-shadow 150ms ease-out,
    transform 150ms ease-out;
}

.issue-tab:hover {
  background: var(--yellow);
}

/* Tab yang lagi kebuka: cuma diisi kuning, tanpa bayangan (diminta
   dibuang). Geserannya ikut dibuang juga — tanpa bayangan, tab yang
   pindah 2px cuma kelihatan kayak salah taruh.

   Yang pakai screen reader tetap kebantu dari aria-selected. Buat yang
   susah bedain warna, kuning dan putih beda jauh terangnya, jadi isinya
   tetap kebaca beda walau warnanya nggak kebaca. */
.issue-tab[aria-selected='true'] {
  background: var(--yellow-bg);
}

.issue-tab__jumlah {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.issue-panel {
  margin-top: 48px;
}

/* Panelnya bisa di-fokus biar isinya kejangkau keyboard setelah pindah tab.
   Cincin fokusnya dimatiin pas dia difokus lewat klik — kalau nggak, tiap
   ganti tab muncul kotak kuning gede ngelilingin seluruh daftar. */
.issue-panel:focus {
  outline: none;
}

/* Lebar kolomnya dibatasi 386,667px (angka Figma), bukan 1fr. Sebagian unit
   cuma punya satu-dua issue, dan tanpa batas ini kartunya ditarik melar
   selebar container — beda sendiri dari kartu di beranda. Barisnya ketengah
   biar yang isinya sedikit nggak nyangkut di kiri. Tiga kartu penuh tetap
   pas: 3 x 386,667 + 2 x 40 = 1240 = selebar container. */
.issue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 24.1667rem));
  justify-content: center;
  gap: 2.5rem;
  align-items: stretch;
}

.issue-kosong {
  padding: 32px;
  border: 2px dashed var(--card-border);
  border-radius: 16px;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gray);
  text-align: center;
}

.semua .issue-cta {
  margin-top: 64px;
}

/* =========================================================
   MOTION
   Semuanya otomatis "dipercepat jadi hampir instan" kalau user
   nyalain prefers-reduced-motion (lihat paling bawah file ini).
   ========================================================= */

/* ---------- semua objek nongol dengan cara yang sama: pop ----------

   Dulu ada dua gaya (teks naik 36px sambil memudar, kartu numbuh dari 0,9)
   yang jalan di dua mesin berbeda. Sekarang cuma satu: SEMUA objek numbuh
   dari 0,65 ke ukuran aslinya, ngikut cara objek di layar Opening nongol.

   Kurvanya cubic-bezier(0.34, 1.56, 0.64, 1) — persis punya Opening. Angka
   1,56 itu yang bikin skalanya MELEWATI ukuran asli dikit (puncaknya 1,035)
   lalu balik; itu yang bikin kesannya mantul, bukan cuma membesar.

   Opacity-nya sengaja lompat di 10% pertama, bukan ikut memudar sepanjang
   animasi — jadi nggak ada efek fade sama sekali, yang kebaca murni
   skalanya. Tapi 0% tetap wajib transparan: tanpa itu objeknya kelihatan
   nongkrong kecil dulu selama nunggu gilirannya (animation-delay).

   Kenapa @keyframes, bukan transition? Sebagian kartu punya efek
   naik-dikit-pas-disorot yang butuh `transition` transform sendiri, dan
   satu elemen cuma punya satu `transition`. Waktu munculnya masih pakai
   transition, dua-duanya rebutan properti yang sama dan yang kalah nongol
   mak bedunduk. Animation jalan di jalur terpisah, jadi nggak tabrakan. */
@keyframes pp-pop {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* Disembunyikan HANYA kalau <html> punya class "js" (ditambah inline di
   <head>, lihat index.html) — jadi kalau JavaScript mati/gagal, semua
   elemen .reveal tetap kelihatan normal sejak awal, nggak pernah nyangkut
   transparan selamanya. */
html.js .reveal {
  opacity: 0;
}

/* `backwards` (bukan `both`) itu kuncinya: sebelum gilirannya tiba,
   objeknya nahan keadaan 0% (masih transparan); tapi sesudah selesai,
   animasinya LEPAS — kalau nggak, transform-nya dikunci selamanya dan
   efek hover kartunya jadi mati.

   Elemen dalam grid kartu kasih style="--i: 0/1/2/..." biar nyusul
   berurutan (90ms per elemen), bukan muncul barengan semua. */
html.js .reveal.is-visible {
  opacity: 1;
  animation: pp-pop 620ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* Kartu benefit dikasih jeda lebih panjang dari yang lain: 220ms, bukan
   90ms. Dengan 90ms di atas animasi yang 620ms, selisih munculnya ketutup
   sama durasi animasinya sendiri — ketiganya kelihatan nongol barengan.
   Dengan 220ms, ketiganya jelas gantian satu-satu. */
html.js .benefit-card.is-visible {
  animation-delay: calc(var(--i, 0) * 220ms);
}

/* ---------- Hero mantul sekali pas didarati ----------

   Pasangan dari scroll-snap-stop: always di .hero. Begitu gulungannya
   berhenti di Hero, isinya mantul sekali — penanda kecil kalau di sini
   titik berhentinya, bukan cuma kebetulan lewat.

   Yang dianimasi .hero__inner (pembungkusnya), BUKAN .hero__copy atau
   .hero__visual — dua itu punya class .reveal yang juga main di properti
   transform, dan kalau ditumpuk keduanya bakal rebutan. */
@keyframes pp-hero-mendarat {
  0% {
    transform: translateY(18px);
  }
  55% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(0);
  }
}

html.js .hero.is-landed .hero__inner {
  animation: pp-hero-mendarat 700ms cubic-bezier(0.34, 0.9, 0.36, 1);
}

/* ---------- kartu naik dikit pas disorot ----------

   Ngikut pola yang udah ada di kartu Kontak & kartu foto Arsip, biar
   geraknya kerasa satu keluarga. Sengaja cuma 4px + bayangan sedikit
   melebar — nggak sampai melompat. */
/* Empat kartu ini nggak punya aturan `transition` sendiri di atas, jadi
   di sinilah efek naik-dikit-pas-disorotnya didefinisikan. `.contact`
   sengaja NGGAK ikut: dia udah punya aturannya sendiri, dan geraknya
   memang beda (translate -3px/-6px, bukan -4px). */
.alur-step,
.benefit-card,
.panel-card,
.issue-card {
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.alur-step:hover,
.benefit-card:hover,
.panel-card:hover,
.issue-card:hover {
  transform: translateY(-4px);
  box-shadow: 16px 15px 0 #000;
}

/* ---------- urutan munculnya objek di layar Opening ----------

   Konsepnya bubble chat: objeknya "numbuh" dari kecil ke ukuran aslinya,
   satu-satu, kayak balasan chat yang masuk berurutan. Bedanya sama .reveal
   di atas: ini nggak nunggu di-scroll, tapi jalan sekali pas halaman dibuka
   (dipicu initOpening() di script.js).

   Kalau mau nyetel ritmenya, ubah angka --delay di blok "urutan" bawah —
   itu satu-satunya tempat timing-nya diatur. */

@keyframes opening-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes opening-kiri {
  from {
    opacity: 0;
    transform: translateX(-56px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes opening-kanan {
  from {
    opacity: 0;
    transform: translateX(56px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes opening-naik {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Disembunyikan HANYA kalau JS aktif — pola yang sama kayak .reveal, jadi
   kalau JS mati semua objeknya tetap kelihatan sejak awal. */
html.js .opening-anim {
  opacity: 0;
}

/* fill-mode "both" yang bikin objeknya tetap nggak kelihatan selama masa
   tunggu --delay, bukan nongol dulu baru animasi. */
html.js .opening.is-playing .opening-anim {
  animation-duration: 620ms;
  /* Kurva yang sama kayak hover tombol: sedikit melewati ukuran aslinya
     lalu balik — itu yang bikin kesan "pop" balon chat. */
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
  animation-delay: var(--delay, 0ms);
}

html.js .opening.is-playing .opening-anim--pop {
  animation-name: opening-pop;
}

html.js .opening.is-playing .opening-anim--kiri {
  animation-name: opening-kiri;
}

html.js .opening.is-playing .opening-anim--kanan {
  animation-name: opening-kanan;
}

html.js .opening.is-playing .opening-anim--naik {
  animation-name: opening-naik;
}

/* Balonnya numbuh dari sisi yang nempel ke karakternya, biar kelihatan
   keluar dari orangnya — bukan mengembang dari tengah. */
.opening__grup--kiri .opening__bubble {
  transform-origin: left center;
}

/* Yang kedua nyembul dari pojok kiri-atas, sisi yang sudutnya hampir siku */
.opening__bubble--k2 {
  transform-origin: left top;
}

.opening__grup--kanan .opening__bubble {
  transform-origin: right center;
}

/* ---- urutan: satu-satunya tempat ritmenya diatur ----

   Tujuh objek, urutannya: judul -> karakter kiri -> dua dialognya ->
   karakter kanan -> dialognya -> penanda scroll.

   Jedanya sengaja nggak rata. Ada dua tempat yang dikasih napas lebih
   panjang, biar kerasa kayak obrolan yang ada jeda mikirnya:

     setelah dialog kiri KEDUA -> 1200ms sebelum karakter kanan masuk
     setelah dialog kanan      -> 1300ms sebelum penanda scroll muncul

   Sisanya 550-900ms. Total sampai objek terakhir mulai bergerak 5,15 detik;
   ditambah durasi geraknya sendiri (560ms) jadi sekitar 5,7 detik. Kalau
   mau disetel, angka di blok ini doang yang perlu diubah. */

.opening__heading {
  --delay: 0ms;
}

/* +900 */
.opening__grup--kiri .opening__char {
  --delay: 900ms;
}

/* +600 */
.opening__bubble--k1 {
  --delay: 1500ms;
}

/* +550 */
.opening__bubble--k2 {
  --delay: 2050ms;
}

/* +1200 — napas panjang: yang kiri udah selesai ngomong dua kali */
.opening__grup--kanan .opening__char {
  --delay: 3250ms;
}

/* +600 */
.opening__bubble--n1 {
  --delay: 3850ms;
}

/* +1300 — napas panjang: jawabannya dibiarin kebaca dulu */
.opening__scroll {
  --delay: 5150ms;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1023px) {
  .navbar__links {
    position: absolute;
    inset-inline: 16px;
    top: 84px;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--blue);
    box-shadow: var(--shadow-card);
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity 220ms ease-out,
      transform 220ms ease-out;
  }

  /* is-showing dipasang JS duluan (display:flex) sebelum is-open nambah
     opacity — biar transisi fade+slide-nya beneran kejalan, bukan cuma
     "muncul" tiba-tiba. Lihat NAV_MENU_TRANSITION_MS di script.js. */
  .navbar__links.is-showing {
    display: flex;
  }

  .navbar__links.is-open {
    opacity: 1;
    transform: translateY(0);
  }

  .navbar__links a {
    justify-content: center;
    min-height: 52px;
    background: rgba(255, 255, 255, 0.1);
  }

  .navbar__toggle {
    display: flex;
    margin-left: auto;
  }

  .navbar__logo {
    display: inline-flex;
  }

  .tentang__swirl,
  .snk__swirl {
    opacity: 0.35;
  }

  /* Di HP section-nya jadi jangkung sempit, jadi ukuran & posisi sudut versi
     desktop nggak kepakai: corak atasnya ketarik ke luar layar sampai yang
     kelihatan cuma 21px. Di sini dibesarin dan digeser masuk. */
  .kontak__swirl--a {
    left: -18%;
    top: -4%;
    width: 58%;
  }

  .kontak__swirl--b {
    right: -16%;
    bottom: -4%;
    width: 50%;
  }

  /* Dua sudut sisanya dicabut di HP. Lebar layarnya cuma 360px: empat
     lengkung di situ ketemu semua di tengah dan malah nutupin kartunya,
     bukan lagi jadi aksen sudut. */
  .kontak__swirl--c,
  .kontak__swirl--d {
    display: none;
  }

  .kontak__corak {
    left: -60%;
    top: -8%;
    width: 230%;
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }

  /* Ide Bisnis & Non-Bisnis sejajar mulai dari tablet */
  .panel-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  /* Figma: teks intronya masuk 92px di kiri-kanan, lebih sempit dari judulnya */
  .tentang__intro .section-head {
    padding-inline: 92px;
  }

  /* Tiga langkah sejajar, baru panah penyambungnya masuk akal */
  .alur-steps {
    flex-wrap: nowrap;
    gap: 3.375rem;
    /* Ruang buat panah yang melengkung di atas kartu. Dulu 82px mati — itu
       tinggi panahnya PAS di 1920 doang. Panahnya sendiri lebar 55% dari
       container yang ikut mengecil lewat --s (skala seragam desktop), jadi
       di 1366/1440 tingginya ikut turun ke ~56-59px sementara ruang di
       atas kartu tetap 82px — nyisain celah ~25px, panahnya jadi keliatan
       ngambang nggak nempel. calc(82 * var(--s)) bikin ruangnya ikut
       menyusut bareng panahnya. */
    padding-top: calc(82 * var(--s));
  }

  .alur-steps__arc {
    display: block;
  }

  /* Kartu tengah naik dikit, ngikut desain */
  .benefit-card--mid {
    margin-top: -72px;
  }

  /* Judul + maskot di kiri, daftar poin di kanan */
  .snk__grid {
    grid-template-columns: minmax(0, 35rem) minmax(0, 37.375rem);
    justify-content: space-between;
    gap: 4rem;
  }

  .snk__mascot {
    display: block;
  }

  .daftar__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 4rem;
  }

  /* ---- instagram (Figma 127:97, frame 1440x685) ---- */

  /* Section-nya jadi grid supaya .container bisa ditarik setinggi section.
     Itu yang bikin tangkapan layarnya bisa nempel PAS di tepi bawah
     (align-self: end) sementara teksnya tetap ketengah vertikal. */
  /* Setinggi layar. Grid-nya narik .container setinggi section, dan itu yang
     bikin teksnya bisa ketengah sementara tangkapan layarnya tetap nempel
     tepi bawah (lihat align-self di .ig__shot).

     Sengaja cuma di desktop: di HP tangkapan layarnya ada di alur normal
     paling bawah, jadi kalau section-nya dipanjangin malah nyisa ruang
     kosong di bawah gambarnya — nggak nempel lagi. */
  .ig {
    display: grid;
    min-height: 100svh;
    padding-block: 0;
  }

  /* Corak latar: 3219,12 x 1898,06 ditaruh di x -836,49 dari frame 1440.
     Dipatok ke TENGAH section (bukan tepi kiri) biar posisinya nggak
     geser-geser waktu lebar layarnya berubah. 1556,49 = 836,49 + 720
     (setengah lebar frame Figma). */
  .ig__bg {
    left: 50%;
    top: calc(-594.67 * var(--s));
    width: calc(3219.12 * var(--s));
    margin-left: calc(-1556.49 * var(--s));
  }

  /* Perbandingan kolomnya ngikut Figma (teks 624 : gambar 629), cuma
     dinyatakan sebagai pecahan biar ikut menyempit bareng container situs
     ini yang 64px lebih sempit dari frame Figma.

     Angka 534 buat kolom teks itu BUKAN angka bebas — itu lebar pas yang
     bikin judulnya patah jadi dua baris ("Jangan lewatkan juga / update
     terbaru dari kita"). Kurang sedikit aja, dia jadi tiga baris dan
     patahannya ikut jelek. Jadi kalau jaraknya mau disetel lagi, yang
     digeser ANGKA GAMBARNYA (570), jangan yang 534 — biar kolom teksnya
     nggak berubah sama sekali. Berlaku di semua lebar dari 1024 ke atas,
     karena ketiganya diskalakan bareng lewat --s.

     Jaraknya sendiri dulu cuma 14 — di layar 1366 itu cuma nyisa 10px
     antara ujung teks sama tepi gambar, kelihatan nempel. Sekarang 72,
     yang jadinya 38-72px tergantung lebar layar. Konsekuensinya gambarnya
     mengecil ~8% (692 jadi 634 di 1920); itu disengaja, soalnya jaraknya
     harus diambil dari salah satu kolom dan kolom teks nggak bisa
     diganggu. Tepi kanan gambarnya nggak ikut bergeser — dia tetap
     sejajar sama section-section lain. */
  .ig__inner {
    display: grid;
    grid-template-columns: minmax(0, 534fr) minmax(0, 570fr);
    column-gap: calc(72 * var(--s));
    align-items: center;
  }

  .ig__lead {
    margin-top: calc(16 * var(--s));
  }

  .ig__btn {
    margin-top: calc(40 * var(--s));
  }

  /* Di Figma aset ini lewat sedikit dari tepi container. Di sini dilebarin
     selebar gutter, jadi tepi kanannya mendarat pas di tepi LUAR .container
     — sejajar sama rel kartu Open Issue dan banner CTA-nya. */
  /* align-self: center, bukan end. Dulu gambarnya nempel tepi bawah karena
     section-nya setinggi Figma dan komposisinya emang gitu. Sekarang
     section-nya setinggi layar, dan nempel bawah bikin dia ketinggalan
     sendirian di bawah sementara teksnya ketengah — nggak sejajar.

     Dibleedin dua kali gutter ke kanan (Figma juga ngelewatin tepi
     container), jadi gambarnya makin besar tanpa nyuri lebar teksnya. */
  .ig__shot {
    align-self: center;
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    margin: 0;
  }

  /* Banner "Punya solusi..." dibleedin biar EDGEnya sejajar sama tepi luar
     .container — sama kayak tepi kiri rel kartu Open Issue di atasnya
     (lihat .issue-rail / .rail__track: keduanya pakai formula bleed yang
     sama, cuma di sini ditulis sebagai margin negatif karena elemennya
     masih anak .container, bukan sibling-nya kayak rel).

     Tanpa ini, banner cuma selebar KONTEN .container (dikurangi gutter),
     jadi keliatan lebih sempit ~32-46px dari baris kartu persis di
     atasnya — dua elemen yang harusnya senada malah nggak sejajar.

     Aman di semua lebar >=1024px: --container di lebar manapun di rentang
     ini selalu <=64,6% lebar layar (dari rumus --s), jadi .container
     selalu punya sisa ruang di kiri-kanannya buat di-bleed sebesar
     --gutter tanpa numbrung ke tepi viewport. */
  .issue-cta {
    margin-inline: calc(var(--gutter) * -1);
  }
}

/* ---- opening: satu frame Figma yang diskalakan utuh ----

   Dulu tiap grup dikasih persen sendiri-sendiri. Masalahnya, di layar yang
   lebih tinggi dari frame Figma (740px) sisa ruangnya harus ditaruh di
   suatu tempat, dan ilustrasi kanan jadi ngambang nggak nempel tepi bawah.

   Sekarang seluruh frame 1440x740 diperlakukan sebagai SATU panggung yang
   diskalakan utuh:
     --u  = satu satuan Figma. Semua ukuran teks, padding, radius, dan
            bayangan di dalam panggung ditulis "calc(N * var(--u))", jadi
            N-nya bisa langsung dibaca sebagai angka Figma.
     Letak tiap objek pakai persen dari panggung, jadi ikut menskala.
     Panggungnya dipatok aspect-ratio 1440/740 dan ditempel ke tepi bawah,
     jadi karakter kanan selalu mentok bawah kayak desain. Sisa tinggi di
     layar jangkung numpuk jadi ruang merah DI ATAS judul.

   Efeknya: perbandingan antar elemen, patahan baris teks, semuanya identik
   di 1280, 1440, maupun 1920 — cuma ukurannya yang ikut layar.

   Catatan: 100vw ikut ngitung lebar scrollbar (~15px), jadi ukuran teks
   kelewat gede sekitar 0,8% dari proporsi ideal. Nggak kelihatan mata, dan
   letak antar objek tetap tepat karena pakai persen dari panggung. */
@media (min-width: 1200px) {
  .opening {
    /* Dibatasi 1,3333 (= 1920/1440) biar di layar lebih lebar dari 1920
       dia berhenti tumbuh, sama kayak section lain. */
    --u: min(1.3333px, 100vw / 1440);
    /* Panggungnya nempel tepi bawah biar karakter kanan nggak ngambang */
    justify-content: flex-end;
    padding: 0;
  }

  /* 100vw ikut ngitung lebar scrollbar, jadi --u-nya kelewat gede ~0,8% dan
     tinggi gelembung meleset tipis dari proporsi Figma. Satuan container
     (cqw) ngukur lebar section-nya sendiri, tanpa scrollbar — persis.
     Dibungkus @supports biar browser yang belum dukung tetap kepakai versi
     vw di atas, bukan malah kehilangan --u sama sekali. */
  @supports (container-type: inline-size) {
    .opening {
      container-type: inline-size;
    }

    .opening .opening__inner {
      --u: min(1.3333px, 100cqw / 1440);
    }
  }

  /* Panggungnya = frame Figma, selebar layar penuh. Tingginya nurut lebar
     lewat aspect-ratio.

     Selektornya ".opening .opening__inner", bukan cuma ".opening__inner":
     aturan ".opening .container" di atas lebih spesifik, dan kalau nggak
     ditandingi lebarnya kekunci 1312px sementara ukuran teksnya udah
     ngikut lebar layar — gelembungnya jadi kegedean dan berantakan.

     Frame Figma 1440 itu memang selebar viewport (jarak 96px ke tepi
     kiri-kanan bagian dari desainnya), jadi di sini containernya sengaja
     dilepas dari batas --container. */
  .opening .opening__inner {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    max-width: none;
    padding: 0;
    aspect-ratio: 1440 / 740;
  }

  /* Figma: 624x156 di (408, 67) */
  .opening__heading {
    position: absolute;
    left: 28.333%;
    top: 9.054%;
    width: 43.333%;
    max-width: none;
    margin: 0;
    gap: calc(16 * var(--u));
  }

  .opening__eyebrow {
    font-size: calc(24 * var(--u));
  }

  .opening__title {
    font-size: calc(48 * var(--u));
  }

  /* Dibentang selebar panggung, jadi grup di dalamnya bisa ditaruh pakai
     persen yang angkanya langsung dari koordinat Figma. */
  .opening__chat {
    position: absolute;
    inset: 0;
    display: block;
    gap: 0;
  }

  .opening__grup {
    position: absolute;
    max-width: none;
  }

  /* Figma: 563x355 di (96, 290) */
  .opening__grup--kiri {
    left: 6.667%;
    top: 39.189%;
    width: 39.097%;
    aspect-ratio: 563 / 355;
  }

  /* Figma: 553x392 di (791, 348) */
  .opening__grup--kanan {
    left: 54.931%;
    top: 47.027%;
    width: 38.403%;
    aspect-ratio: 553 / 392;
    margin: 0;
  }

  /* Dibentang penuh biar persen anak-anaknya dihitung dari kotak grup.
     Selektornya disamain sama aturan dasarnya (.opening__grup--kiri
     .opening__bubbles) — kalau cuma ".opening__bubbles" dia kalah spesifik
     dan margin-left: -6% dari versi tumpuk kebawa. */
  .opening__grup .opening__bubbles {
    position: absolute;
    inset: 0;
    display: block;
    margin-left: 0;
  }

  /* Cuma karakternya yang absolut; gelembungnya mengalir (lihat k2). */
  .opening__char {
    position: absolute;
  }

  .opening__grup--kiri .opening__char {
    left: 0;
    top: 0;
    width: 45.29%; /* 255 / 563 */
    margin-left: 0;
  }

  .opening__bubble {
    border-radius: calc(26 * var(--u));
    box-shadow: calc(14 * var(--u)) calc(12 * var(--u)) 0 #000;
    font-size: calc(20 * var(--u));
    line-height: calc(28 * var(--u));
  }

  /* Persen di margin dihitung dari LEBAR kotaknya (563), bukan tinggi —
     jadi 6,04% = 34px pas di lebar desain. */
  .opening__grup--kiri .opening__bubble--k1 {
    margin-left: 31.44%; /* 177 / 563 */
    margin-top: 6.04%; /* 34 / 563 */
    width: 68.56%; /* 386 / 563 */
    /* Figma: 24px keliling, kiri 76px karena ketiban karakternya */
    padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)) calc(76 * var(--u));
  }

  /* k2 MENGALIR 32px di bawah k1, bukan dipatok top: 47,89%. Sekarang
     patahan barisnya udah nggak berubah antar resolusi (semuanya menskala),
     tapi cara ini tetap dipertahankan sebagai jaring pengaman: kalau font
     Inter-nya gagal dimuat dan k1 numbuh sebaris, k2 ikut turun, bukan
     ketindih. Di lebar desain hasilnya sama: 34 + 104 + 32 = 170px. */
  .opening__grup--kiri .opening__bubble--k2 {
    margin-left: 37.48%; /* 211 / 563 */
    margin-top: 5.68%; /* jarak 32px / 563 */
    width: 39.08%; /* 220 / 563 */
    border-radius: calc(6 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u))
      calc(38 * var(--u));
    /* Figma padding-nya 24px, di sini 18px. Bukan salah ambil: patahan
       2-baris terbaik ("Pengen nyiapin makan" / "doang ribet amat yak!")
       butuh 177px, sementara 220 - 48 = 172px. Kurang 5px, jadi teksnya
       patah jadi 3 baris dan gelembungnya 82px bukan 62px. Metrik Inter
       versi web beda tipis dari yang dipakai Figma. */
    padding: calc(12 * var(--u)) calc(18 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.2;
  }

  /* Cuma satu gelembung di sini, jadi mengalir di pojok kiri-atas
     pembungkusnya udah pas di (0, 0) kayak Figma. */
  .opening__grup--kanan .opening__bubble--n1 {
    width: 79.57%; /* 440 / 553 */
    padding: calc(24 * var(--u)) calc(67 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
  }

  .opening__grup--kanan .opening__char {
    left: 39.78%; /* 220 / 553 */
    top: 25.26%; /* 99 / 392 */
    width: 60.22%; /* 333 / 553 */
    margin-left: 0;
    align-self: auto;
  }

  /* Figma: blok 496px di (472, 642). Ditengahin pakai left/right + margin
     auto, BUKAN translateX — keyframe "opening-naik" nulis ulang transform
     dan centeringnya bakal ilang. */
  .opening__scroll {
    position: absolute;
    left: 0;
    right: 0;
    /* Figma naruh dia di y=642 (sisa 16px ke tepi bawah) dan itu kerasa
       mepet banget. Dipatok dari bawah aja, 56 satuan Figma — jadi
       jaraknya ikut menskala bareng yang lain. */
    bottom: calc(56 * var(--u));
    z-index: 2;
    width: calc(496 * var(--u));
    max-width: none;
    margin-block: 0;
    margin-inline: auto;
    gap: calc(8 * var(--u));
  }

  .opening__scroll-text {
    font-size: calc(18 * var(--u));
  }

  .opening__scroll-icon {
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
  }
}

/* ---- hero: satu skala buat semua ukuran layar desktop ----

   Patokannya tampilan di 1920x1080, karena itu yang dianggap paling pas.
   Semua ukuran di hero ditulis "angka-di-1920 x --hu", jadi di layar lain
   komposisinya sama persis, cuma ikut mengecil bareng-bareng.

   --hu dihitung contain-fit: dibandingin ke LEBAR sekaligus TINGGI layar,
   lalu diambil yang paling kecil. Tingginya WAJIB ikut dihitung karena itu
   justru biang keroknya — dulu isi hero tingginya tetap 644px baik di 1440
   maupun 1920, padahal layarnya 900 vs 1080. Jadi di layar pendek isinya
   makan 73% tinggi layar (sesak, tombol mepet pita catur) sementara di
   1920 cuma 60% (lega).

     1920x1080 -> 1        1440x900 -> 0,75        1366x768 -> 0,711

   Dulu di sini ada blok terpisah buat >=1440px yang naikin judul 76,5px
   jadi 92px sekaligus. Lompatan 20% cuma gara-gara lebar naik 5% itu yang
   bikin 1366 dan 1440 kerasa kayak dua desain beda. Sekarang nggak ada
   loncatan: ukurannya menerus ngikut layar.

   Namanya --hu, bukan --u, biar nggak ketuker sama --u punya section
   Opening yang patokannya beda (frame Figma 1440x740). */
@media (min-width: 1024px) {
  .hero {
    /* Ikut --s (skala situs), lalu masih diperkecil lagi kalau layarnya
       luar biasa pendek — hero kan setinggi layar. */
    --hu: min(var(--s), 100svh / 1080);
    --hero-pad-top: calc(108 * var(--hu));
    --hero-pad-bottom: calc(104 * var(--hu));
  }

  /* Lebar & padding sampingnya SENGAJA pakai token --container/--gutter yang
     sama kayak .container milik section lain, bukan angka sendiri.

     Dulu di sini 1500px sementara section lain 1240px, jadi tepi kiri Hero
     menjorok 130px lebih ke luar dari Open Issue, S&K, dan yang lain —
     kelihatan jelas kalau discroll dari Hero ke bawah.

     Kolomnya jadi pecahan (fr), bukan lebar mati 760/600, supaya isinya
     nyesuain sendiri ke kotak yang lebih sempit ini. Perbandingannya tetap
     760:600 kayak Figma. */
  .hero__inner {
    grid-template-columns: minmax(0, 760fr) minmax(0, 600fr);
    gap: calc(60 * var(--hu));
    max-width: var(--container);
    padding-inline: var(--gutter);
  }

  .hero__logo {
    width: calc(249 * var(--hu));
  }

  .hero__eyebrow {
    margin-top: calc(16 * var(--hu));
    font-size: calc(24 * var(--hu));
  }

  .hero__title {
    margin-top: calc(4 * var(--hu));
    font-size: calc(92 * var(--hu));
    text-shadow: calc(7 * var(--hu)) calc(9 * var(--hu)) 0 rgba(0, 0, 0, 0.5);
  }

  .hero__lead {
    margin-top: calc(19 * var(--hu));
    max-width: calc(660 * var(--hu));
    font-size: calc(24 * var(--hu));
  }

  .hero__pengumuman {
    gap: calc(8 * var(--hu));
    margin-top: calc(40 * var(--hu));
    max-width: calc(520 * var(--hu));
    font-size: calc(18 * var(--hu));
  }

  .hero__pengumuman img {
    width: calc(13 * var(--hu));
  }

  .hero__actions {
    gap: calc(24 * var(--hu));
    margin-top: calc(24 * var(--hu));
  }

  /* Tombolnya ikut mengecil TAPI ada batas bawahnya. Di 1366 skalanya
     0,711, dan tanpa batas ini teksnya jadi 11px dengan tinggi 37px —
     kekecilan buat dibaca, dan di bawah area sentuh 44px yang dipegang
     situs ini sejak awal. Yang lain boleh mengecil bebas, yang diklik
     orang nggak. */
  .hero__actions .btn {
    min-height: max(44px, calc(52 * var(--hu)));
    padding: max(10px, calc(16 * var(--hu))) max(14px, calc(20 * var(--hu)));
    font-size: max(14px, calc(16 * var(--hu)));
  }

  .hero__actions .btn__icon {
    width: max(14px, calc(20 * var(--hu)));
    height: max(14px, calc(20 * var(--hu)));
  }

  .hero__visual {
    width: auto;
    max-width: calc(600 * var(--hu));
    /* Jaring pengaman kalau layarnya luar biasa pendek */
    max-height: calc(100svh - var(--hero-pad-top) - var(--hero-pad-bottom) - 16px);
  }
}

/* =========================================================
   SKALA SERAGAM DESKTOP

   Masalahnya: section biasa ukurannya SAMA PERSIS di 1366 dan 1920 —
   container 1240px, judul 48px, kartu 365px. Yang beda cuma sisa ruang di
   kiri-kanan. Jadi di 1366 isinya makan 91% lebar layar, di 1920 cuma 65%.
   Itu yang bikin layar kecil kerasa sesak dan objeknya kebesaran.

   Solusinya satu satuan desain --s, patokannya 1920. Semua ikut mengecil
   bareng, jadi bandingannya tetap sama di resolusi mana pun.

     1366 -> 0,711      1440 -> 0,75      1920 ke atas -> 1

   Dibatasi 1px ke atas: di layar lebih lebar dari 1920 ukurannya berhenti
   tumbuh, isinya tinggal ketengah dengan sisa ruang lebih lega — sama kayak
   perilaku max-width biasa.

   Cuma tiga tuas yang ditarik di sini, bukan ratusan nilai satu-satu:
     1. token --container & --gutter
     2. ukuran font root — 59 dari 60 font di file ini pakai rem/clamp,
        jadi seluruh tipografi ikut cuma dari satu baris
     3. padding vertikal tiap section

   Yang NGGAK ikut menskala, sengaja: tinggi & teks tombol dikasih batas
   bawah (area sentuh 44px), dan garis tipis 1px tetap 1px. */
@media (min-width: 1024px) {
  :root {
    --s: min(1px, 100vw / 1920);
    --container: calc(1240 * var(--s));
    --gutter: calc(32 * var(--s));
  }

  html {
    font-size: calc(16 * var(--s));
  }

  /* Tombolnya ikut mengecil TAPI ada lantainya: di 1366 skalanya 0,711 dan
     tanpa ini teksnya jadi 11px dengan tinggi 37px — di bawah area sentuh
     44px yang dipegang situs ini sejak awal. */
  .btn {
    min-height: max(44px, calc(52 * var(--s)));
    padding: max(10px, calc(16 * var(--s))) max(14px, calc(20 * var(--s)));
    font-size: max(14px, calc(16 * var(--s)));
  }

  .btn--lg,
  .btn--pill {
    min-height: max(44px, calc(56 * var(--s)));
    font-size: max(14px, calc(18 * var(--s)));
  }

  .btn--lg {
    padding: max(10px, calc(16 * var(--s))) max(16px, calc(24 * var(--s)));
  }

  .btn--pill {
    padding: max(8px, calc(12 * var(--s))) max(14px, calc(20 * var(--s)));
  }

  .btn__icon {
    width: max(14px, calc(20 * var(--s)));
    height: max(14px, calc(20 * var(--s)));
  }

  .btn__icon--lg {
    width: max(20px, calc(32 * var(--s)));
    height: max(20px, calc(32 * var(--s)));
  }

  /* Jarak vertikal tiap section */
  .issue,
  .tentang,
  .tipe,
  .faq {
    padding-block: calc(80 * var(--s));
  }

  .snk,
  .daftar,
  .kontak {
    padding-block: calc(88 * var(--s));
  }

  .semua {
    padding-block: calc(56 * var(--s)) calc(88 * var(--s));
  }

  /* Padding atasnya dikasih lantai 140px: navbar-nya fixed setinggi ~108px
     dan ukurannya NGGAK ikut --s (tinggi tombolnya kan dijaga 44px), jadi
     kalau jarak atas ini ikut mengecil, di 1366 judulnya nyaris ketutupan. */
  .semua-head {
    padding-block: max(140px, calc(158 * var(--s))) calc(88 * var(--s));
  }

  .gallery {
    padding-block: calc(88 * var(--s)) calc(120 * var(--s));
  }

  .footer {
    padding-block: calc(52 * var(--s)) calc(32 * var(--s));
  }
}

/* =========================================================
   MOBILE (<= 767px)

   Satu blok khusus layar HP, ditaruh paling bawah supaya menang atas
   aturan-aturan di atasnya. Isinya tiga jenis penyesuaian:

     1. Jarak antar bagian dirapatin. Angka desktop (80-104px) kebawa apa
        adanya ke HP dan bikin tiap section kerasa kejauhan.
     2. Beberapa objek dikecilin — kartu issue, benefit, dan testimoni
        ukurannya dipatok buat layar lebar.
     3. Tiga daftar kartu diubah jadi barisan yang digeser ke samping
        (Open Issue, benefit, testimoni), bukan numpuk ke bawah. Kartu
        berikutnya sengaja keintip di tepi kanan — itu petunjuk bisa
        digeser, tanpa perlu nambah panah atau titik-titik.

   Tablet (768-1023px) sengaja NGGAK ikut: dia lebih dekat ke desktop.
   ========================================================= */
@media (max-width: 767px) {
  /* ---------- tombol: semuanya 16px ---------- */

  /* .btn dasarnya udah 16px. Yang dibesarin cuma dua varian ini, dan di
     layar HP bedanya nggak kepakai — malah bikin tombolnya makan tempat. */
  .btn--lg,
  .btn--pill {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1rem;
  }

  .btn {
    min-height: 48px;
    padding: 12px 18px;
  }

  /* Ikon 32px di tombol pill kegedean buat teks 16px */
  .btn__icon--lg {
    width: 22px;
    height: 22px;
  }

  /* ---------- jarak tiap section ---------- */

  .issue,
  .tentang,
  .tipe,
  .faq {
    padding-block: 48px;
  }

  .snk,
  .daftar,
  .kontak {
    padding-block: 48px;
  }

  .gallery {
    padding-block: 48px 56px;
  }

  /* Jarak dari sub-judul ke isi. Semuanya 48-72px di desktop. */
  .issue-rail,
  .panel-cards,
  .benefit-cards,
  .faq-list,
  .testi-cards,
  .contacts {
    margin-top: 24px;
  }

  .rail {
    margin-top: 28px;
  }

  .section-head__lead {
    margin-top: 12px;
  }

  /* ---------- opening ---------- */

  /* Isi layar pembuka WAJIB muat satu layar. Kalau kelewat tinggi, penanda
     scroll di paling bawah kedorong ke bawah garis lipat — dan begitu
     di-scroll, Opening-nya langsung ketimpa Hero, jadi penandanya nggak
     pernah kelihatan sama sekali. Di 375x667 dulu isinya 707px. */
  .opening {
    padding-block: 28px 20px;
  }

  /* Jarak antara grup obrolan kiri dan kanan. 14px bikin gelembung
     paling bawah keliatan nempel sama yang di atasnya. */
  .opening__chat {
    gap: 32px;
  }

  .opening__bubbles {
    gap: 8px;
  }

  .opening__bubble {
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .opening__grup--kiri .opening__bubble {
    padding-left: 28px;
  }

  .opening__grup--kanan .opening__bubble {
    padding-right: 22px;
  }

  .opening__bubble--k2 {
    border-radius: 6px 18px 18px 26px;
    font-size: 0.8125rem;
  }

  .opening__eyebrow {
    font-size: 0.9375rem;
  }

  .opening__title {
    font-size: 1.5rem;
  }

  .opening__scroll {
    gap: 4px;
    margin-top: 14px;
  }

  .opening__scroll-text {
    font-size: 0.8125rem;
  }

  .opening__scroll-icon {
    width: 38px;
    height: 38px;
  }

  /* ---------- hero ---------- */

  /* Ilustrasinya naik ke paling atas, semua teks rata tengah. */
  /* Isinya dirapatin dari versi desktop. Dengan ilustrasi pindah ke atas,
     ukuran aslinya bikin hero jadi 889px di layar 667px — tombol Daftar
     kedorong jauh ke bawah lipatan. Sekarang sekitar 800px, jadi di layar
     812px tombolnya kelihatan tanpa scroll. */
  .hero {
    --hero-pad-top: 96px;
    /* 77 = 40 jarak yang beneran kelihatan + 5 bayangan tombol + 32 pita
       papan catur.

       Pita caturnya position: absolute nempel di tepi bawah hero, jadi dia
       NUMPANG di dalam padding ini, bukan nambah tinggi sendiri. Kalau
       paddingnya ditulis 40px, yang kesisa buat napas cuma 8px — tombolnya
       kelihatan nempel ke pita. */
    --hero-pad-bottom: 77px;
  }

  .hero__inner {
    gap: 16px;
  }

  .hero__visual {
    order: -1;
    max-width: min(240px, 60vw);
  }

  .hero__copy {
    text-align: center;
  }

  .hero__logo {
    width: 160px;
  }

  .hero__logo,
  .hero__lead {
    margin-inline: auto;
  }

  .hero__eyebrow {
    margin-top: 10px;
  }

  .hero__lead {
    margin-top: 12px;
    font-size: 0.9375rem;
  }

  /* Dua baris ini flex, jadi rata tengahnya diatur lewat justify-content —
     text-align di induknya nggak ngaruh ke posisi item flex. */
  .hero__pengumuman {
    justify-content: center;
    margin-inline: auto;
    margin-top: 16px;
  }

  .hero__actions {
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
  }

  /* Tombolnya selebar layar, biar jadi sasaran tap yang jelas */
  .hero__actions .btn {
    width: 100%;
  }

  /* ---------- open issue ---------- */

  /* Kartunya dikecilin: di HP padding 24px + teks 20px bikin satu kartu
     hampir setinggi layar. */
  .issue-card__body {
    gap: 0.875rem;
    padding: 16px;
  }

  .issue-card__logo {
    height: 76px;
  }

  .issue-card__logo img {
    max-height: 76px;
    width: auto !important;
    height: auto !important;
  }

  .issue-card__teks {
    gap: 0.5rem;
  }

  .issue-card__judul {
    font-size: 1.0625rem;
    line-height: 1.35;
  }

  .issue-card__text {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .issue-card__more {
    padding: 12px;
    font-size: 0.9375rem;
  }

  /* Jaraknya dirapetin dan kartunya disempitin, biar kartu berikutnya
     keintip di tepi kanan — petunjuk kalau barisnya bisa digeser. */
  /* Gap-nya disamain sama .benefit-cards (28px), bukan 16px: kartu issue
     pakai bayangan yang sama (--shadow-card-xl, nyembur 14px ke kanan),
     jadi dari 16px cuma nyisa ~2px yang kelihatan sebagai jarak. */
  .issues {
    gap: 1.75rem;
    padding-block: 2px 18px;
  }

  .issues .issue-card {
    width: 78vw;
  }

  .issue-semua {
    margin-top: 24px;
  }

  .issue-cta {
    gap: 1rem;
    margin-top: 32px;
    padding: 20px;
  }

  /* ---------- tentang: alur & benefit ---------- */

  .alur {
    margin-top: 40px;
  }

  /* 24px, bukan 12px: bayangan kartunya sendiri udah makan 12px ke bawah,
     jadi yang kelihatan sebagai jarak tinggal separuhnya. */
  .alur-steps {
    gap: 1.5rem;
    margin-top: 20px;
  }

  /* Ketiganya selebar layar. Tanpa ini tiap kartu cuma selebar teksnya
     sendiri, jadi panjangnya beda-beda dan barisnya kelihatan miring. */
  .alur-step {
    width: 100%;
    padding: 16px;
  }

  .benefit {
    margin-top: 44px;
  }

  /* Diseret ke samping, bukan numpuk ke bawah — tiga kartu setinggi ini
     ditumpuk bikin section-nya kepanjangan. Margin negatif + padding
     senilai gutter bikin barisnya mentok tepi layar, jadi kartu
     berikutnya keintip. */
  .benefit-cards,
  .testi-cards {
    display: flex;
    grid-template-columns: none;
    align-items: stretch;
    gap: 1rem;
    overflow-x: auto;
    /* Lihat catatan di .rail__track: kalau cuma sumbu-x yang diisi, browser
       diam-diam bikin sumbu-y ikut 'auto' dan rel ini nangkep scroll
       vertikal halaman. */
    overflow-y: hidden;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 18px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .benefit-cards::-webkit-scrollbar,
  .testi-cards::-webkit-scrollbar {
    display: none;
  }

  /* Jaraknya 28px, lebih lebar dari kartu lain: bayangan kartu benefit
     nyembur 14px ke kanan, jadi dari 16px cuma nyisa 2px yang kelihatan
     sebagai jarak — kartunya kayak nempel. */
  .benefit-cards {
    gap: 1.75rem;
  }

  .benefit-card {
    flex: none;
    width: 76vw;
    gap: 0.5rem;
    padding: 16px;
    border-radius: 18px;
  }

  .benefit-card__img {
    width: min(120px, 46%);
  }

  .benefit-card__text {
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  .benefit-card__note {
    font-size: 0.8125rem;
  }

  /* ---------- semua ide valid ---------- */

  .panel-card__head {
    padding: 12px 14px;
    font-size: 1.25rem;
  }

  .panel-card__body {
    padding: 14px;
  }

  .check-list {
    gap: 0.5rem;
  }

  .check-list li {
    gap: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  .check-list img {
    width: 24px;
    height: 24px;
  }

  /* ---------- syarat & ketentuan ---------- */

  .snk__grid {
    gap: 28px;
  }

  .snk-items {
    gap: 1rem;
  }

  .snk-item + .snk-item {
    padding-top: 16px;
  }

  /* Deskripsinya sengaja tetap menjorok sejajar sama judulnya (kolom 2),
     bukan melar sampai ke bawah kotak nomor. */
  .snk-item__body {
    margin-top: 6px;
  }

  /* ---------- pendaftaran ---------- */

  .daftar__grid {
    gap: 28px;
  }

  /* 20px bikin "PENDAFTARAN DIBUKA BERKALA" patah jadi dua baris */
  .daftar__kicker {
    font-size: 0.875rem;
  }

  .daftar__title {
    margin-top: 12px;
  }

  .daftar__lead {
    margin-top: 12px;
  }

  .daftar__nudges {
    margin-top: 20px;
  }

  .daftar__card {
    padding: 20px;
  }

  .daftar__deadline {
    margin-top: 8px;
  }

  .daftar__kuota {
    margin-top: 16px;
  }

  .daftar__card .btn--yellow {
    margin-top: 18px;
  }

  .daftar__fineprint {
    margin-top: 14px;
  }

  /* ---------- arsip ---------- */

  /* Kartunya disempitin dan jaraknya dirapetin dari 74px, supaya kartu
     berikutnya keintip di tepi kanan. */
  .rail__track {
    gap: 1rem;
  }

  .rail__item {
    width: min(300px, 72vw);
  }

  .gallery__outro {
    margin-top: 40px;
  }

  /* Kolase materi: di HP nggak ada hover beneran — layar sentuh cuma punya
     "tap", dan browser sering nyimulasiin :hover abis di-tap sampai
     pengunjung nyentuh tempat lain (sticky hover). Efeknya tombol "Akses
     Materi" bisa nyangkut kelihatan, atau gambarnya nyangkut redup, padahal
     yang diinginkan cukup: disentuh -> linknya kebuka. Makanya di sini
     semua efek hover-nya dimatiin total, dan tombolnya disembunyiin. */
  .materi-kolase__btn {
    display: none;
  }

  .materi-kolase:hover img,
  .materi-kolase:focus-visible img {
    opacity: 1;
  }

  .materi-kolase:hover {
    transform: none;
  }

  /* ---------- testimoni ---------- */

  .testi {
    margin-top: 44px;
  }

  .testi-card {
    flex: none;
    width: 80vw;
    gap: 0.875rem;
    padding: 16px;
  }

  .testi-card__head {
    gap: 0.75rem;
  }

  .testi-card__avatar {
    width: 4.25rem;
    height: 4.25rem;
  }

  .testi-card__name {
    font-size: 1.0625rem;
  }

  .testi-card__unit {
    font-size: 0.875rem;
  }

  .testi-card__body {
    gap: 0.5rem;
  }

  .testi-card__headline {
    font-size: 1.125rem;
  }

  .testi-card__quote {
    gap: 0.625rem;
  }

  .testi-card__quote p {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  /* ---------- halaman semua issue ---------- */

  .semua-head {
    padding-block: 88px 48px;
  }

  .semua {
    padding-block: 32px 48px;
  }

  /* Padding sampingnya dirampingin dari 20px. Dengan 20px, "Kompas TV" dan
     "Kompas.com" nggak muat sebaris dan tab-nya jadi tiga baris — makan
     tinggi layar cuma buat empat tombol. Sekarang dua baris.
     Ukuran teksnya tetap 16px dan tinggi sentuhnya tetap 48px. */
  .issue-tabs {
    gap: 0.625rem;
  }

  .issue-tab {
    gap: 0.375rem;
    padding: 10px 12px;
  }

  .issue-panel {
    margin-top: 28px;
  }

  .semua .issue-cta {
    margin-top: 32px;
  }

  /* ---------- kontak ---------- */

  .contact {
    padding: 20px 16px;
  }

  .contact__name {
    font-size: 1.25rem;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    /* Delay-nya ikut dinolin. Kalau cuma durasinya yang dipangkas, kartu
       yang antre (--i: 2) tetap nahan transparan setengah detik dulu baru
       nongol — persis kelakuan yang mau dihindari. */
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
  }

  /* Aturan di atas cuma mempercepat DURASI, bukan --delay-nya. Kalau
     dibiarin, objek Opening tetap nunggu 3,5 detik baru nongol padahal
     animasinya udah dimatikan. Jadi di sini dipaksa langsung kelihatan. */
  html.js .opening-anim,
  html.js .opening.is-playing .opening-anim {
    opacity: 1;
    animation: none;
  }
}