/* Teman Inovasi, situs hub.
   Satu berkas, tanpa kerangka kerja. Urutannya: peubah, dasar, kerangka,
   pita, kartu, adegan, gerak, layar kecil.

   Aturan yang mengikat berkas ini:
   - Yang dianimasikan hanya `transform` dan `opacity`. Menganimasikan lebar,
     tinggi, atau `top` memaksa tata letak dihitung ulang tiap bingkai.
   - Keadaan AKHIR tiap animasi adalah keadaan bawaan. Gerak hanya berjalan
     kalau `html.js` ada dan elemennya sudah ditandai `.tampil`. Tanpa
     JavaScript, halaman tampil utuh, bukan kosong.
   - Tiap gerak punya pasangan `prefers-reduced-motion` di akhir berkas. */

@font-face {
  font-family: "Bricolage";
  src: url(/static/bricolage.b185fdad1d.woff2) format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url(/static/jakarta.153fc85b70.woff2) format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --tinta: #0b0a16;
  --tinta-2: #171331;
  --tinta-3: #241c4d;
  --kertas: #fbf8f3;
  --putih: #fff;
  --ungu: #6b46ff;
  --ungu-terang: #a58bff;
  --asam: #d6f546;
  --karang: #ff5a36;
  --teks: #14121f;
  --teks-lembut: #55536b;
  --teks-balik: #f4f1ff;
  --teks-balik-lembut: #b7b0d8;
  --garis: #e7e0d4;
  --garis-balik: rgba(255, 255, 255, .16);

  --p: var(--ungu);
  --p-tinta: #5433d6;
  --p-sinar: var(--ungu-terang);
  --p-depan: #fff;

  --lebar: 1180px;
  --sela: clamp(20px, 4vw, 40px);
  --lengkung: 26px;
  --bayang: 0 24px 60px -28px rgba(11, 10, 22, .35);
}

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

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

body {
  margin: 0;
  background: var(--kertas);
  color: var(--teks);
  font: 400 clamp(16px, .55vw + 14.4px, 18px)/1.65 Jakarta, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .adg-angka, .langkah-no, .masalah-no {
  font-family: Bricolage, Jakarta, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.4vw + .6rem, 4.6rem); }
h2 { font-size: clamp(1.9rem, 2.6vw + .9rem, 3.1rem); }
h3 { font-size: clamp(1.25rem, .7vw + 1.05rem, 1.6rem); letter-spacing: -.02em; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.bungkus { width: min(100% - var(--sela) * 2, var(--lebar)); margin-inline: auto; }

.lewati {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--asam); color: var(--tinta); padding: 12px 20px;
  border-radius: 0 0 14px 0; font-weight: 700;
}
.lewati:focus { left: 0; }

:focus-visible { outline: 3px solid var(--ungu); outline-offset: 3px; border-radius: 6px; }
[data-gelap] :focus-visible { outline-color: var(--asam); }

/* ---------------------------------------------------------------- kepala */

.kepala {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 10, 22, .82);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--garis-balik);
  color: var(--teks-balik);
}
.kepala-isi { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.merek {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: Bricolage, Jakarta, sans-serif; font-weight: 700; font-size: 1.08rem;
  text-decoration: none; letter-spacing: -.02em; white-space: nowrap;
  /* Tinggi sentuh 44px walau hurufnya cuma 30px: merek adalah tautan pulang,
     dan tautan pulang yang meleset di layar sentuh memaksa orang menekan
     tombol kembali peramban. */
  padding-block: 7px;
}
.merek b { font-weight: 800; }
.merek-tanda {
  width: 30px; height: 30px; display: grid; place-items: center; flex: none;
  border-radius: 10px; background: var(--ungu); color: var(--asam);
}
.merek-tanda svg { width: 19px; height: 19px; }

.nav {
  margin-left: auto; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
  border-radius: 12px; text-decoration: none; font-size: .95rem; font-weight: 600;
  color: var(--teks-balik-lembut); white-space: nowrap;
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--putih); background: rgba(255, 255, 255, .08); }
.nav a[aria-current] { color: var(--asam); background: rgba(214, 245, 70, .12); }

/* ---------------------------------------------------------------- tombol */

.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; white-space: nowrap;
  transition: transform .2s cubic-bezier(.34, 1.4, .5, 1), box-shadow .2s, background-color .2s, color .2s;
}
.tombol svg { width: 19px; height: 19px; flex: none; }
.tombol:hover { transform: translateY(-2px); }
.tombol:active { transform: translateY(0); }

.tombol-asam { background: var(--asam); color: var(--tinta); box-shadow: 0 10px 30px -12px rgba(214, 245, 70, .8); }
.tombol-asam:hover { box-shadow: 0 16px 38px -12px rgba(214, 245, 70, .9); }
.tombol-hantu { background: transparent; color: var(--teks-balik); border-color: rgba(255, 255, 255, .28); }
.tombol-hantu:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.tombol-terang { background: var(--putih); color: var(--tinta); }
.tombol-produk { background: var(--p); color: var(--p-depan); }
.tombol-produk:hover { box-shadow: 0 14px 32px -14px var(--p); }

.tautan-sepi {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-weight: 700; font-size: .95rem; color: var(--p-tinta); text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color .2s;
}
.tautan-sepi svg { width: 15px; height: 15px; }
.tautan-sepi:hover { border-bottom-color: currentColor; }

.tombol-baris { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

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

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tinta); color: var(--teks-balik);
  padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
}
.latar-hero { position: absolute; inset: -20% -10%; z-index: -1; }
.gumpal {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .58;
  will-change: transform;
}
.g1 { width: 46vw; height: 46vw; left: -6%; top: -12%; background: var(--ungu); }
.g2 { width: 38vw; height: 38vw; right: -4%; top: 6%; background: #2b63f5; opacity: .42; }
.g3 { width: 30vw; height: 30vw; left: 34%; bottom: -24%; background: var(--karang); opacity: .34; }
/* Halaman produk memakai rona produknya. Hero ungu merek di halaman QR Asli
   yang merah muda terbaca sebagai dua merek yang bertabrakan. */
.hero-produk .g1 { background: var(--p); }
.hero-produk .g2 { background: var(--p-tinta); opacity: .5; }
.hero-produk .kicker { color: var(--p-sinar); }
.hero-produk .titik { background: var(--p-sinar); }

.hero-kisi {
  display: grid; gap: clamp(32px, 5vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}
.hero-kisi-tunggal { grid-template-columns: minmax(0, 760px); }
.hero-kata > * + * { margin-top: 22px; }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--asam);
}
.pita-produk .kicker, .pita-lain .kicker, .pita-masalah .kicker { color: var(--p-tinta); }
.titik { width: 8px; height: 8px; border-radius: 50%; background: var(--asam); flex: none; }

.sorot {
  background: linear-gradient(100deg, var(--asam) 0%, #9df0c4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-produk .sorot { background: none; color: var(--p-sinar); }

.hero-sub { font-size: clamp(1.05rem, .5vw + .95rem, 1.28rem); color: var(--teks-balik-lembut); max-width: 33em; }
.hero-untuk { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--p-sinar); font-weight: 600; }
.hero-untuk svg { width: 17px; height: 17px; flex: none; }
.hero-gambar { position: relative; }

/* ---------------------------------------------------------------- pita pilih

   Pita selebar layar, tapi tidak bergerak. Butirnya tautan, jadi ia harus
   bisa dibaca sampai habis dan ditekan, dua hal yang tidak bisa dilakukan
   teks yang menggulung sendiri. */

.pilih {
  background: var(--asam); color: var(--tinta);
  padding: clamp(26px, 3.4vw, 40px) 0; border-block: 3px solid var(--tinta);
}
.pilih-judul {
  font-family: Bricolage, Jakarta, sans-serif; font-weight: 800;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 18px; opacity: .72;
}
.pilih-kisi {
  display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.pilih-kisi a {
  display: flex; align-items: center; gap: 10px; height: 100%;
  min-height: 52px; padding: 12px 16px; border-radius: 14px;
  background: var(--putih); border: 2px solid var(--tinta);
  color: var(--tinta); text-decoration: none;
  font-family: Bricolage, Jakarta, sans-serif; font-weight: 700;
  font-size: 1rem; line-height: 1.25;
  box-shadow: 0 2px 0 var(--tinta);
  transition: transform .16s, box-shadow .16s, background-color .16s;
}
.pilih-titik { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--p); }
/* Panah didorong ke kanan dan diredupkan: ia penunjuk arah, bukan hiasan yang
   ikut menuntut perhatian dari kalimatnya. */
.pilih-kisi a svg { width: 17px; height: 17px; flex: none; margin-left: auto; opacity: .38; transition: opacity .16s, transform .16s; }
.pilih-kisi a:hover { transform: translateY(-3px); box-shadow: 0 5px 0 var(--tinta); }
.pilih-kisi a:hover svg { opacity: 1; transform: translateX(3px); }
.pilih-kisi a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* --------------------------------------------------------- penanda ilustrasi */

.kartu-gambar, .hero-gambar { position: relative; }
.tanda-ilustrasi {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(11, 10, 22, .62); color: rgba(255, 255, 255, .82);
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  pointer-events: none;
}

/* ---------------------------------------------------------------- pita */

.pita { padding: clamp(56px, 8vw, 108px) 0; }
.pita-gelap, .pita-ajak { color: var(--teks-balik); position: relative; overflow: hidden; }
.pita-gelap {
  background:
    radial-gradient(60% 70% at 18% 0%, rgba(107, 70, 255, .34), transparent 62%),
    radial-gradient(48% 60% at 92% 96%, rgba(255, 90, 54, .2), transparent 64%),
    var(--tinta);
}
.pita-produk { background: var(--kertas); }
.pita-masalah { background: var(--putih); }
.pita-lain { background: var(--kertas); }

.kepala-pita { max-width: 30ch; margin-bottom: clamp(32px, 4vw, 56px); }
.kepala-pita .kicker { margin-bottom: 14px; }
.kepala-tengah { margin-inline: auto; text-align: center; }
.kepala-tengah .kicker { justify-content: center; }

.prosa { max-width: 40rem; }
.prosa h2 { margin-top: 1.8em; }
.prosa h2:first-child { margin-top: 0; }
.prosa p { margin-top: 1em; color: var(--teks-lembut); }
.prosa a { color: var(--ungu); font-weight: 600; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- kartu produk */

.kisi-kartu {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.kartu {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--lengkung); box-shadow: var(--bayang);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
}
.kartu:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(11, 10, 22, .5); }
.kartu-gambar { background: var(--tinta-2); padding: 18px 18px 0; }
.kartu-gambar .adegan { width: 100%; height: auto; }
/* Pendar di adegan mesin sengaja dibiarkan meluber keluar viewBox. Kalau
   dipotong, tepi kotak SVG kelihatan sebagai bidang terang bersudut siku
   di tengah hero, dan itu terbaca sebagai gambar yang salah potong. */
.adegan-mesin { overflow: visible; }
.kartu-kata { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.cip {
  align-self: flex-start; padding: 6px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--p) 13%, transparent);
  color: var(--p-tinta); font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.kartu-janji { color: var(--teks-lembut); }
.kartu-untuk { display: flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 600; color: var(--p-tinta); }
.kartu-untuk svg { width: 16px; height: 16px; flex: none; }
.kartu-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: auto; padding-top: 6px; }

/* ---------------------------------------------------------------- langkah */

.kisi-langkah {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(22px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.kisi-langkah li {
  background: rgba(255, 255, 255, .06); border: 1px solid var(--garis-balik);
  backdrop-filter: blur(6px);
  border-radius: var(--lengkung); padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 14px; position: relative;
}
.langkah-no {
  position: absolute; right: 22px; top: 18px;
  font-size: 3.4rem; line-height: 1; color: rgba(255, 255, 255, .09);
}
.langkah-gambar { width: clamp(104px, 9vw, 128px); aspect-ratio: 1; }
.adegan-langkah { width: 100%; height: 100%; }
.kisi-langkah p { color: var(--teks-balik-lembut); font-size: .98rem; }

/* ---------------------------------------------------------------- fitur produk */

.kisi-masalah {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.kisi-masalah li {
  border: 1px solid var(--garis); border-radius: var(--lengkung);
  padding: clamp(24px, 2.6vw, 32px); background: var(--kertas);
  display: flex; flex-direction: column; gap: 12px;
  border-top: 5px solid var(--p);
}
.masalah-no { font-size: 1.1rem; color: var(--p-tinta); letter-spacing: .05em; }
.kisi-masalah p { color: var(--teks-lembut); font-size: .98rem; }

/* ---------------------------------------------------------------- produk lain */

.kisi-lain {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(18px, 2.2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.kisi-lain a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  text-decoration: none; border-radius: var(--lengkung);
  background: var(--putih); border: 1px solid var(--garis);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
}
.kisi-lain a:hover { transform: translateY(-6px); box-shadow: var(--bayang); }
.lain-panel {
  display: grid; place-items: center; background: var(--p); height: 116px;
  position: relative; overflow: hidden;
}
.lain-panel::after {
  content: ""; position: absolute; inset: auto -20% -70% -20%; height: 120px;
  border-radius: 50%; background: rgba(255, 255, 255, .14);
}
.lain-ikon {
  position: relative; width: 52px; height: 52px; color: var(--p-depan);
  transition: transform .3s cubic-bezier(.34, 1.4, .5, 1);
}
.kisi-lain a:hover .lain-ikon { transform: scale(1.12) rotate(-4deg); }
.lain-isi { padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.lain-cip { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--p-tinta); }
.lain-nama { font-family: Bricolage, sans-serif; font-weight: 800; font-size: 1.22rem; letter-spacing: -.02em; }
.lain-baris { color: var(--teks-lembut); font-size: .95rem; }
.lain-ajak {
  margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .95rem; color: var(--p-tinta);
}
.lain-ajak svg { width: 17px; height: 17px; transition: transform .25s; }
.kisi-lain a:hover .lain-ajak svg { transform: translateX(5px); }

/* ---------------------------------------------------------------- ajakan */

.pita-ajak { background: linear-gradient(140deg, var(--tinta-3) 0%, var(--tinta) 62%); }
.ajak-kisi { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.ajak-kisi > div > * + * { margin-top: 20px; }
.ajak-sub { color: var(--teks-balik-lembut); font-size: 1.1rem; max-width: 30em; }
.ajak-ubin-baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ajak-ubin {
  aspect-ratio: 1; border-radius: 24px; background: var(--p); color: var(--p-depan);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 14px; text-align: center; text-decoration: none;
  font-family: Bricolage, sans-serif; font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(.92rem, 1.4vw, 1.08rem);
  /* Ubin mengapung sendiri, dan yang berubah saat disentuh kursor adalah
     ikon dan bayangnya. Kalau hover ikut memakai `transform`, animasi apung
     yang sedang berjalan menang dan efek hovernya tidak pernah terlihat. */
  animation: apung 6.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .8s);
  transition: box-shadow .3s;
}
.ajak-ubin .ikon-produk {
  width: clamp(34px, 4.2vw, 46px); height: auto;
  transition: transform .3s cubic-bezier(.34, 1.4, .5, 1);
}
.ajak-ubin:hover { box-shadow: 0 22px 44px -18px var(--p); }
.ajak-ubin:hover .ikon-produk { transform: scale(1.14) rotate(-5deg); }
.ajak-ubin-nama { line-height: 1.15; }

/* ---------------------------------------------------------------- kaki */

.kaki { background: var(--tinta); color: var(--teks-balik); padding: clamp(48px, 6vw, 76px) 0 34px; border-top: 1px solid var(--garis-balik); }
.kaki-kisi { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
.kaki-merek { display: inline-flex; align-items: center; gap: 10px; padding-block: 7px; text-decoration: none; font-family: Bricolage, sans-serif; font-weight: 800; font-size: 1.15rem; }
.kaki-baris { margin-top: 14px; color: var(--teks-balik-lembut); font-size: .96rem; max-width: 34ch; }
.kaki-judul { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--asam); margin-bottom: 14px; }
.kaki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kaki ul a { overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--teks-balik-lembut); text-decoration: none; font-size: .96rem; transition: color .2s; }
.kaki ul a:hover { color: var(--putih); }
.kaki-tanda { width: 26px; height: 26px; border-radius: 8px; background: var(--p); color: var(--p-depan); display: grid; place-items: center; font-size: .72rem; font-weight: 800; font-family: Bricolage, sans-serif; flex: none; }
.kaki-hak { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--garis-balik); color: var(--teks-balik-lembut); font-size: .88rem; }

/* ---------------------------------------------------------------- adegan */

.adegan { width: 100%; height: auto; }
.adg-teks { font: 700 16px Jakarta, sans-serif; fill: rgba(255, 255, 255, .88); }
.adg-kecil { font: 600 13px Jakarta, sans-serif; fill: rgba(255, 255, 255, .62); }
.adg-redup { fill: rgba(255, 255, 255, .42); }
.adg-pil { font: 800 11px Jakarta, sans-serif; fill: var(--p-depan); letter-spacing: .02em; }
.adg-pil-besar { font-size: 14px; }
.adg-angka { font: 800 17px Bricolage, Jakarta, sans-serif; fill: #fff; }

/* ================================================================ gerak
   Keadaan bawaan tiap elemen di bawah ini adalah keadaan AKHIR animasinya.
   Gerak masuk hanya dipasang lewat `html.js`, jadi halaman tanpa JavaScript
   tampil utuh dan bukan kosong. `.tampil` dipasang IntersectionObserver.
   Adegan di hero tidak menunggu pengamat: ia sudah di layar saat halaman
   dimuat, jadi ia dipicu lewat `.hero-gambar`. */

html.js [data-reveal] { opacity: 0; transform: translateY(26px); }
html.js [data-reveal].tampil {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 90ms),
              transform .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 90ms);
}

/* Gumpal cahaya di latar pita gelap. */
@keyframes hanyut {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(5%, -7%, 0) scale(1.14); }
  66% { transform: translate3d(-6%, 5%, 0) scale(.92); }
}
.g1 { animation: hanyut 26s ease-in-out infinite; }
.g2 { animation: hanyut 32s ease-in-out infinite reverse; }
.g3 { animation: hanyut 22s ease-in-out infinite 3s; }

/* Pita berjalan. Dua salinan berjajar, geser tepat separuh, jahitannya hilang. */

/* ---- adegan mesin (hero beranda) */
@keyframes putar { to { transform: rotate(360deg); } }
@keyframes denyut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes apung { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes napas { 0%, 100% { opacity: .38; transform: scale(1); } 50% { opacity: .62; transform: scale(1.1); } }
@keyframes arus { to { stroke-dashoffset: -36; } }

.cincin { transform-origin: 256px 208px; animation: putar 15s linear infinite; }
.inti { transform-origin: 256px 208px; animation: denyut 2.6s ease-in-out infinite; }
.pendar { transform-origin: center; animation: napas 9s ease-in-out infinite; }
.pendar-2 { animation-duration: 12s; animation-delay: 2s; }
.alir { animation: arus 1.6s linear infinite; }
.simpul { transform-box: fill-box; transform-origin: center; animation: apung 5s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }
.ubin { transform-box: fill-box; transform-origin: center; animation: apung 4.4s ease-in-out infinite; animation-delay: calc(var(--i) * .45s); }

/* ---- adegan riset */
@keyframes sapu { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-96px); } }
@keyframes tumbuh { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

.kaca { animation: sapu 6s cubic-bezier(.45, 0, .55, 1) infinite; }
.btg rect { transform-box: fill-box; transform-origin: 50% 100%; }
.btg text, .btg-tanda { transform-box: fill-box; transform-origin: 50% 100%; }
.hero-gambar .btg rect, .tampil .btg rect { animation: tumbuh .85s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * .12s); }
.hero-gambar .btg text, .tampil .btg text { animation: muncul .5s ease-out both; animation-delay: calc(var(--i) * .12s + .5s); }
.hero-gambar .btg-tanda, .tampil .btg-tanda { animation: pop .5s cubic-bezier(.34, 1.5, .5, 1) both 1s; }
@keyframes muncul { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- adegan kurva */
@keyframes tarik { to { stroke-dashoffset: 0; } }
.garis-kamu { stroke-dasharray: 420; stroke-dashoffset: 0; }
.hero-gambar .garis-kamu, .tampil .garis-kamu { animation: tarik 1.5s cubic-bezier(.4, 0, .2, 1) both; stroke-dashoffset: 420; }
.hero-gambar .garis-pasar, .tampil .garis-pasar { animation: arus 1.4s linear infinite; }
.titik-akhir { transform-box: fill-box; transform-origin: center; animation: denyut 2.2s ease-in-out infinite 1.4s; }
.hero-gambar .lencana-naik, .tampil .lencana-naik { transform-box: fill-box; transform-origin: center; animation: pop .55s cubic-bezier(.34, 1.5, .5, 1) both 1.3s; }

/* ---- adegan suara */
@keyframes riak-keluar { from { transform: scale(1); opacity: .85; } to { transform: scale(2.1); opacity: 0; } }
@keyframes getar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.riak { transform-box: fill-box; transform-origin: center; animation: riak-keluar 2.8s ease-out infinite; }
.riak-2 { animation-delay: 1.4s; }
.glb { transform-box: fill-box; transform-origin: 50% 50%; animation: getar 1s ease-in-out infinite; animation-delay: calc(var(--i) * .09s); }
.panah-alir { animation: arus 1.6s linear infinite; }
.hero-gambar .kartu-catat, .tampil .kartu-catat { animation: muncul-kanan .7s cubic-bezier(.22, 1, .36, 1) both .5s; }
@keyframes muncul-kanan { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

/* ---- adegan qr */
@keyframes pindai-turun { 0% { transform: translateY(6px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(158px); opacity: 0; } }
.qr-sel { transform-box: fill-box; transform-origin: center; }
.hero-gambar .qr-sel, .tampil .qr-sel { animation: pop .45s cubic-bezier(.34, 1.5, .5, 1) both; animation-delay: calc(var(--i) * .055s); }
.pindai { animation: pindai-turun 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.hero-gambar .segel, .tampil .segel { transform-box: fill-box; transform-origin: center; animation: pop .6s cubic-bezier(.34, 1.6, .5, 1) both 1s; }

/* ---- adegan langkah */
.kusut { stroke-dasharray: 7 6; animation: arus 2.4s linear infinite; }
.tumpuk rect { transform-box: fill-box; transform-origin: 50% 100%; }
.tampil .tumpuk rect { animation: tumbuh .5s cubic-bezier(.34, 1.4, .5, 1) both; animation-delay: calc(var(--i) * .16s + .2s); }
.terbang { animation: apung 2.4s ease-in-out infinite; }

/* ================================================================ layar kecil */

@media (max-width: 920px) {
  .hero-kisi, .ajak-kisi { grid-template-columns: minmax(0, 1fr); }
  .hero-gambar { order: 1; max-width: 520px; }
  .kaki-kisi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kaki-merek-kolom { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  :root { --lengkung: 22px; }
  .kepala-isi { min-height: 62px; gap: 12px; }
  /* Menu digulir mendatar di layar sempit. Topeng di tepi kanan itu satu
     satunya petunjuk bahwa masih ada butir di luar layar; tanpa itu, menu
     yang terpotong rapi terbaca sebagai menu yang memang cuma sebegitu. */
  .nav {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .nav a { padding: 0 10px; font-size: .9rem; }
  .tombol { width: 100%; }
  .tombol-baris { flex-direction: column; align-items: stretch; }
  .tautan-sepi { justify-content: center; }
  .kartu-aksi { flex-direction: column; align-items: stretch; }
  .kaki-kisi { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pilih-kisi { grid-template-columns: minmax(0, 1fr); }
  .pilih-kisi a { font-size: .96rem; }
}

/* ================================================================ gerak dikurangi
   Bukan sekadar mematikan animasi: tiap adegan harus tetap terbaca beku.
   Karena keadaan bawaan sudah keadaan akhir, cukup mencabut animasinya. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
  .garis-kamu { stroke-dashoffset: 0; }
  .pindai { opacity: 0; }
  .tombol:hover, .kartu:hover, .kisi-lain a:hover { transform: none; }
  .ajak-ubin { animation: none; }
  .ajak-ubin:hover .ikon-produk { transform: none; }
}