/* kreasipandawa.id · "Pabrik Kata-Kata"
   Palet kit merek: hitam #151515 · krem #EFE6D2 · tulang #F2F0EA · mustard #D6A12B · kraft #C49A6C
   Huruf: Anton (judul) · Yesteryear (tulisan tangan logo) · Mona Sans (isi). Semua di-host sendiri. */

@font-face { font-family: "Anton"; src: url(/aset/huruf/anton.woff2?v=b81797d139) format("woff2"); font-display: swap; }
@font-face { font-family: "Yesteryear"; src: url(/aset/huruf/yesteryear.woff2?v=38ba9bed9e) format("woff2"); font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url(/aset/huruf/mona-sans.woff2?v=4e3b6fbfd8) format("woff2"); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; }

:root {
  --hitam: #151515; --hitam-2: #0B0B0B; --arang: #1F1E1B; --arang-2: #2A2824; --garis: #3A362F;
  --krem: #EFE6D2; --tulang: #F2F0EA; --mustard: #D6A12B; --mustard-tua: #8A6512; --kraft: #C49A6C;
  --redup: #A69F8F; --redup-gelap: #5C564B;
  --f-judul: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --f-tangan: "Yesteryear", "Brush Script MT", cursive;
  --f-isi: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lebar: 1320px; --tepi: clamp(16px, 4vw, 56px); --kepala: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1); --pegas: cubic-bezier(.34, 1.56, .64, 1);
  --kin-h: clamp(190px, 50vw, 300px);
  color-scheme: dark;
}
@media (min-width: 1024px) { :root { --kepala: 78px; --kin-h: min(42vh, 420px); } }

/* ------------------------------------------------------------------ dasar */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kepala) + 16px); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; background: var(--hitam) url(/aset/img/grain.svg?v=27528e507d); color: var(--krem);
  font-family: var(--f-isi); font-size: 1.0625rem; line-height: 1.6; font-weight: 420; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--mustard); color: var(--hitam); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wadah { width: min(100% - 2 * var(--tepi), var(--lebar)); margin-inline: auto; }
.lompat { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--mustard); color: var(--hitam); padding: 10px 16px;
  border-radius: 10px; font-weight: 700; text-decoration: none; transition: top .2s; }
.lompat:focus { top: 12px; }
.ikon { width: 1em; height: 1em; flex: none; }

.label { font-family: var(--f-isi); font-weight: 700; font-stretch: 75%; font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mustard); line-height: 1.35; }
.label--gelap { color: var(--hitam); }
.tangan { font-family: var(--f-tangan); font-weight: 400; letter-spacing: 0; text-transform: none; }
.aksen { color: var(--mustard); }
h2 { font-family: var(--f-judul); font-weight: 400; font-size: clamp(2.7rem, 6.6vw, 5.8rem); line-height: .93;
  text-transform: uppercase; letter-spacing: .003em; text-wrap: balance; }
.bagian { position: relative; padding-block: clamp(76px, 10vw, 150px); }
.bagian--terang { background: var(--tulang) url(/aset/img/tisu-hitam.svg?v=9521dd59dd); color: var(--hitam); }
.judul-bagian { display: grid; gap: 18px; margin-bottom: clamp(38px, 5vw, 70px); }
.judul-bagian > p:last-child, .judul-bagian > div + p { max-width: 58ch; color: var(--redup); font-size: 1.08rem; }
.bagian--terang .judul-bagian p:last-child { color: var(--redup-gelap); }
.judul-bagian--tengah { text-align: center; justify-items: center; }
@media (min-width: 1024px) {
  .judul-bagian--baris { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 56px; }
}
.titik { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mustard); flex: none;
  margin-top: .55em; box-shadow: 0 0 0 0 rgba(214, 161, 43, .6); animation: denyut 2.2s ease-out infinite; }
@keyframes denyut { 0% { box-shadow: 0 0 0 0 rgba(214, 161, 43, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(214, 161, 43, 0); } }

/* ------------------------------------------------------------------ tombol */
.tombol { --bg: var(--mustard); --fg: var(--hitam); --bayang: var(--krem);
  display: inline-flex; align-items: center; justify-content: center; gap: .65em; min-height: 54px; padding: .85em 1.5em;
  border-radius: 999px; background: var(--bg); color: var(--fg); border: 2px solid var(--bg);
  font-weight: 760; font-stretch: 82%; font-size: .95rem; letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  line-height: 1.1; cursor: pointer; box-shadow: 0 0 0 0 var(--bayang);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .2s, color .2s; }
.tombol .ikon { width: 1.3em; height: 1.3em; transition: transform .28s var(--ease); }
.tombol:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 0 var(--bayang); }
.tombol:hover .ikon:last-child:not(:first-child) { transform: translateX(3px); }
.tombol:active { transform: translate(0, 0); box-shadow: 0 0 0 0 var(--bayang); }
.tombol--garis { --bg: transparent; --fg: var(--krem); --bayang: var(--mustard); border-color: currentColor; }
.tombol--hitam { --bg: var(--hitam); --fg: var(--krem); --bayang: var(--tulang); }
.tombol--kecil { min-height: 42px; padding: .55em 1.05em; font-size: .8rem; }
.tombol--besar { min-height: 62px; width: 100%; font-size: 1rem; }
.bagian--terang .tombol, .custom .tombol, .kontak .tombol { --bayang: var(--hitam); }
.tautan-panah { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--mustard); padding-bottom: 2px; }
.tautan-panah .ikon { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
.tautan-panah:hover .ikon { transform: translateX(4px); }
.bulat { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.bulat--hitam { background: #111; border-color: #6b665c; }
.bulat--putih { background: #fff; border-color: #cfc8b8; }

/* ------------------------------------------------------------------ kepala */
.kepala { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--kepala); transition: background-color .3s, box-shadow .3s; }
.kepala--padat, .menu-buka .kepala { background: rgba(21, 21, 21, .96); box-shadow: 0 1px 0 var(--garis); }
.kepala__isi { height: 100%; display: flex; align-items: center; gap: 16px; width: min(100% - 2 * var(--tepi), var(--lebar)); margin-inline: auto; }
.kepala__logo { color: var(--krem); flex: none; display: block; }
.kepala__logo .logo { width: clamp(112px, 10vw, 146px); height: auto; aspect-ratio: 287 / 139; }
.kepala__wa { margin-left: auto; }
.kepala__menu { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--krem); background: transparent;
  display: grid; place-items: center; cursor: pointer; flex: none; }
.kepala__garis, .kepala__garis::before { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease); }
.kepala__garis { position: relative; transform: translateY(-3px); }
.kepala__garis::before { content: ""; position: absolute; left: 0; top: 6px; }
.menu-buka .kepala__garis { transform: translateY(0) rotate(45deg); }
.menu-buka .kepala__garis::before { transform: translateY(-6px) rotate(-90deg); }
.kepala__nav { display: none; }
.menu-buka .kepala__nav { display: flex; position: fixed; inset: var(--kepala) 0 0; flex-direction: column; gap: 4px;
  padding: 24px var(--tepi) 40px; background: var(--hitam) url(/aset/img/tisu-krem.svg?v=b3e4e32260); overflow-y: auto; }
.menu-buka .kepala__nav a { font-family: var(--f-judul); font-size: clamp(2.4rem, 11vw, 3.4rem); text-transform: uppercase;
  text-decoration: none; line-height: 1.15; border-bottom: 1px solid var(--garis); padding: 6px 0; }
.menu-buka { overflow: hidden; }
@media (min-width: 1024px) {
  .kepala__nav, .menu-buka .kepala__nav { display: flex; position: static; flex-direction: row; gap: clamp(16px, 2vw, 30px);
    margin-left: auto; padding: 0; background: none; overflow: visible; }
  .kepala__nav a, .menu-buka .kepala__nav a { font-family: var(--f-isi); font-size: .92rem; font-weight: 620; font-stretch: 86%;
    letter-spacing: .02em; text-transform: none; text-decoration: none; position: relative; padding: 6px 0; border: 0; line-height: 1.4; }
  .kepala__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mustard);
    transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
  .kepala__nav a:hover::after, .kepala__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
  .kepala__wa { margin-left: 10px; }
  .kepala__menu { display: none; }
}

/* ------------------------------------------------------------------ pembuka */
.pembuka { position: relative; display: grid; padding-top: var(--kepala); background: var(--hitam); }
@media (min-width: 1024px) { .pembuka { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 100svh; } }
.pembuka__kiri { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 26px var(--tepi) 34px; }
@media (min-width: 1024px) {
  .pembuka__kiri { padding: clamp(24px, 4vh, 56px) 56px clamp(24px, 4vh, 48px) max(var(--tepi), calc((100vw - var(--lebar)) / 2)); }
}
.pembuka__h1 { font-size: .78rem; }
.pembuka__h1 span { color: var(--redup); }
.kinetik { height: var(--kin-h); display: flex; align-items: flex-end; overflow: hidden; }
.kinetik__teks { width: 100%; font-family: var(--f-judul); font-weight: 400; text-transform: uppercase; line-height: .9;
  font-size: clamp(3.3rem, 16.5vw, 5.8rem); letter-spacing: .002em; }
@media (min-width: 1024px) { .kinetik__teks { font-size: clamp(5rem, 7.6vw, 9.4rem); } }
.k-kata { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .07em; margin-bottom: -.07em; }
.k-kata > span { display: inline-block; transform: translateY(0); animation: kata-naik .9s var(--ease) both;
  animation-delay: calc(.1s + var(--i) * 70ms); transition: transform .62s var(--ease); transition-delay: calc(var(--i) * 48ms); }
.k-kata--aksen { color: var(--mustard); }
@keyframes kata-naik { from { transform: translateY(108%); } }
.kinetik__teks.keluar .k-kata > span { transform: translateY(-108%); transition-duration: .4s; transition-delay: calc(var(--i) * 26ms); }
.kinetik__teks.siap .k-kata > span { transform: translateY(108%); transition: none; animation: none; }
.kinetik__teks.hidup .k-kata > span { animation: none; }
.pembuka__lead { max-width: 52ch; color: #d9d1bf; font-size: clamp(1rem, 1.2vw, 1.12rem); }
.pembuka__aksi { display: flex; flex-wrap: wrap; gap: 12px; }
.pembuka__catatan { display: flex; gap: 12px; font-size: .9rem; color: var(--redup); max-width: 52ch; }
.fakta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--garis); margin-top: 6px; }
.fakta li { padding: 12px 10px 0 0; font-size: .82rem; color: var(--redup); line-height: 1.3; }
.fakta b { display: block; font-family: var(--f-judul); font-weight: 400; font-size: 1.55rem; color: var(--krem); letter-spacing: .01em; }
@media (min-width: 640px) { .fakta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.segel-putar { display: none; }
@media (min-width: 1024px) {
  .segel-putar { display: block; position: absolute; z-index: 5; right: -64px; top: 14%; width: 128px; height: auto;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); animation: putar-pelan 28s linear infinite; }
}
@keyframes putar-pelan { to { transform: rotate(360deg); } }
.pembuka__kanan { position: relative; min-height: min(106vw, 520px); background: var(--mustard) url(/aset/img/tisu-hitam.svg?v=9521dd59dd);
  color: var(--hitam); overflow: clip; }
@media (max-width: 1023px) {
  /* HP: kaos 3D naik ke layar pertama, tepat di bawah kalimat raksasa; tombol tetap terlihat tanpa gulir */
  .pembuka { display: flex; flex-direction: column; }
  .pembuka__kiri { display: contents; }
  .pembuka__h1 { order: 1; margin: 20px var(--tepi) 0; }
  .kinetik { order: 2; margin: 8px var(--tepi) 16px; height: clamp(160px, 44vw, 280px); }
  .pembuka__kanan { order: 3; }
  .pembuka__aksi { order: 4; margin: 20px var(--tepi) 0; }
  .pembuka__lead { order: 5; margin: 20px var(--tepi) 0; }
  .pembuka__catatan { order: 6; margin: 14px var(--tepi) 0; }
  .fakta { order: 7; margin: 20px var(--tepi) 34px; }
  .pembuka .kaos3d { width: min(74%, 540px); margin-top: -13%; }
  .pembuka .panggung__petunjuk { left: 5%; top: 4%; font-size: 1.15rem; }
  .pembuka__aksi { gap: 10px; }
  .pembuka__aksi .tombol { padding: .8em 1.1em; font-size: .84rem; min-height: 50px; }
}
@media (min-width: 1024px) { .pembuka__kanan { min-height: 0; } }
.pembuka__kanan::before { content: "RECEH TAPI BERKELAS"; position: absolute; left: -2%; right: -2%; top: 50%; transform: translateY(-50%) rotate(-90deg);
  font-family: var(--f-judul); font-size: 1rem; letter-spacing: .5em; color: rgba(21, 21, 21, .16); text-align: center; white-space: nowrap; display: none; }
.panggung { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1700px; }
.kaos3d { position: relative; z-index: 2; width: min(88%, 620px); aspect-ratio: 1; margin-top: -4%; cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; border-radius: 24px; }
.kaos3d:active { cursor: grabbing; }
.kaos3d:focus-visible { outline: 3px solid var(--hitam); outline-offset: 6px; }
.kaos3d__putar { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(0deg); will-change: transform; }
.kaos3d__muka { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  -webkit-user-drag: none; pointer-events: none; }
.kaos3d__muka--belakang { transform: rotateY(180deg); }
.kaos3d__bayang { position: absolute; z-index: 1; left: 50%; top: 50%; width: 46%; height: 6%; margin: 29% 0 0 -23%; border-radius: 50%;
  background: rgba(21, 21, 21, .32); filter: blur(12px); transform: scaleX(var(--bayang, 1)); }
.hangtag { position: absolute; z-index: 3; left: 66%; top: 21%; width: clamp(54px, 6.4vw, 90px); transform-origin: 50% 0;
  pointer-events: none; will-change: transform; }
.hangtag.di-belakang { z-index: 1; }
.hangtag__tali { display: block; width: 2px; height: clamp(22px, 3vw, 38px); margin: 0 auto; background: var(--hitam); border-radius: 2px; }
.hangtag__kartu { display: block; position: relative; margin-top: -3px; border-radius: 5px; box-shadow: 0 10px 18px rgba(21, 21, 21, .3); }
.hangtag__kartu img { width: 100%; border-radius: 5px; }
.hangtag__sku { position: absolute; left: 11%; right: 11%; bottom: 5%; background: #fff; color: var(--hitam); border-radius: 2px;
  font: 700 clamp(7px, .62vw, 9.5px)/1.1 var(--f-isi); font-stretch: 75%; letter-spacing: .06em; text-align: center; padding: 3px 3px 2px; }
.hangtag__batang { display: block; height: 7px; margin-top: 2px;
  background: repeating-linear-gradient(90deg, #151515 0 1px, transparent 1px 2px, #151515 2px 4px, transparent 4px 5px, #151515 5px 6px, transparent 6px 8px); }
.panggung__keterangan { position: absolute; left: var(--tepi); bottom: 22px; z-index: 4; display: grid; gap: 2px; max-width: 60%; }
.panggung__keterangan .label { color: var(--hitam); opacity: .7; }
.panggung__keterangan a { display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-judul); font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  text-transform: uppercase; text-decoration: none; line-height: 1.05; }
.panggung__keterangan a .ikon { transition: transform .25s var(--ease); }
.panggung__keterangan a:hover .ikon { transform: translateX(4px); }
.panggung__balik { position: absolute; right: var(--tepi); bottom: 20px; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--hitam); background: transparent; border-radius: 999px; padding: 8px 14px; cursor: pointer;
  font-weight: 700; font-stretch: 80%; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; transition: background-color .2s, color .2s; }
.panggung__balik:hover { background: var(--hitam); color: var(--mustard); }
.panggung__balik .ikon { width: 1.2em; height: 1.2em; }
.panggung__petunjuk { position: absolute; left: 7%; top: 7%; z-index: 4; font-family: var(--f-tangan); font-size: clamp(1.3rem, 2vw, 1.8rem);
  transform: rotate(-8deg); color: var(--hitam); pointer-events: none; transition: opacity .6s; }
.panggung__petunjuk::after { content: ""; position: absolute; right: -30px; top: 70%; width: 34px; height: 26px; border-right: 2px solid;
  border-bottom: 2px solid; border-radius: 0 0 26px 0; transform: rotate(24deg); }
.panggung--disentuh .panggung__petunjuk { opacity: 0; }
@media (min-width: 1024px) { .panggung__keterangan { left: 40px; bottom: 34px; } .panggung__balik { right: 40px; bottom: 32px; } }

/* ------------------------------------------------------------------ pita berjalan */
.pita { position: relative; padding-block: clamp(46px, 6vw, 84px); overflow: clip; background: var(--hitam); }
.pita__jalur { display: flex; overflow: hidden; margin-inline: -6%; position: relative; }
.pita__jalur--satu { z-index: 2; background: var(--mustard); color: var(--hitam); transform: rotate(-2.4deg); border-block: 3px solid var(--hitam-2); }
.pita__jalur--dua { background: var(--arang); color: var(--krem); transform: rotate(1.8deg); margin-top: -12px; border-block: 1px solid var(--garis); }
.pita__isi { display: flex; flex: none; animation: pita-jalan 90s linear infinite; }
.pita__jalur--dua .pita__isi { animation-direction: reverse; animation-duration: 110s; }
.pita__isi li { display: flex; align-items: center; gap: 20px; padding: 14px 10px; flex: none;
  font-family: var(--f-judul); font-size: clamp(1.45rem, 2.8vw, 2.35rem); text-transform: uppercase; line-height: 1.05; white-space: nowrap; }
.pita__isi a { text-decoration: none; }
.pita__isi a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.pita__jalur--dua a { color: transparent; -webkit-text-stroke: 1.3px var(--krem); transition: color .2s; }
.pita__jalur--dua a:hover { color: var(--krem); text-decoration: none; }
.pita__bintang { width: .5em; height: .5em; color: var(--hitam); }
.pita__jalur--dua .pita__bintang { color: var(--mustard); }
.pita:hover .pita__isi, .pita--jeda .pita__isi { animation-play-state: paused; }
@keyframes pita-jalan { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ mesin kata */
.mesin-bagian { background: var(--hitam); overflow: clip; }
.mesin-bagian::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(214, 161, 43, .12), transparent 70%); }
.mesin-bagian .judul-bagian { position: relative; }
.mesin-wadah { position: relative; display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .mesin-wadah { grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); gap: 60px; } }
.mesin { position: relative; isolation: isolate; padding: 0 46px 30px 0; max-width: 820px; width: 100%; margin-inline: auto; }
.mesin::after { content: ""; position: absolute; left: 4%; right: calc(46px + 4%); bottom: 4px; height: 30px; border-radius: 0 0 18px 18px;
  background: var(--hitam-2); box-shadow: 0 30px 40px -10px rgba(0, 0, 0, .8), inset 0 3px 0 #2b2925; z-index: -1; }
.mesin__lemari { position: relative; color: var(--hitam); border: 3px solid var(--hitam-2); border-radius: 34px 34px 22px 22px; padding: 16px 16px 20px;
  background:
    radial-gradient(circle at 16px 16px, #a99d83 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 16px) 16px, #a99d83 0 3px, transparent 4px),
    radial-gradient(circle at 16px calc(100% - 16px), #a99d83 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), #a99d83 0 3px, transparent 4px),
    var(--krem);
  box-shadow: 10px 10px 0 0 var(--mustard), inset 0 -10px 0 rgba(21, 21, 21, .07), inset 0 3px 0 rgba(255, 255, 255, .6); }
.mesin__atap { background: var(--hitam); border-radius: 20px 20px 10px 10px; padding: 12px 14px 14px; text-align: center; }
.mesin__bohlam { display: flex; justify-content: space-between; padding: 0 2px 10px; }
.bohlam { width: 9px; height: 9px; border-radius: 50%; background: #5a4414; animation: kedip 2.6s steps(1) infinite;
  animation-delay: calc(var(--i) * -.29s); }
.mesin--jalan .bohlam { animation: kejar .54s steps(1) infinite; animation-delay: calc(var(--i) * -.03s); }
.mesin--menang .bohlam { animation: kedip-semua .3s steps(1) 6; }
@keyframes kedip { 0%, 100% { background: #5a4414; box-shadow: none; } 50% { background: var(--mustard); box-shadow: 0 0 10px 2px rgba(214, 161, 43, .6); } }
@keyframes kejar { 0%, 60% { background: #5a4414; box-shadow: none; } 61%, 100% { background: #ffd36b; box-shadow: 0 0 12px 3px rgba(255, 196, 70, .75); } }
@keyframes kedip-semua { 50% { background: #ffd36b; box-shadow: 0 0 14px 4px rgba(255, 196, 70, .8); } }
.mesin__nama { font-family: var(--f-judul); font-size: clamp(1.7rem, 4.2vw, 2.9rem); color: var(--krem); text-transform: uppercase; line-height: 1; }
.mesin__nama .tangan { color: var(--mustard); font-size: 1.12em; margin-left: .08em; }
.mesin__jendela { --h: 60px; margin: 18px 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--hitam-2);
  border-radius: 16px; padding: 9px; position: relative; box-shadow: 0 0 0 4px var(--mustard), 0 0 0 7px var(--hitam-2); }
@media (min-width: 640px) { .mesin__jendela { --h: 78px; grid-template-columns: .95fr 2.35fr .8fr; } }
.gulungan { position: relative; height: calc(var(--h) * 3); overflow: hidden; background: var(--tulang); border-radius: 9px; }
.gulungan--kalimat { grid-column: 1 / -1; order: -1; }
@media (min-width: 640px) { .gulungan--kalimat { grid-column: auto; order: 0; } }
.gulungan::before { content: ""; position: absolute; left: 0; right: 0; top: var(--h); height: var(--h); z-index: 1; pointer-events: none;
  border-block: 2px solid var(--mustard); background: rgba(214, 161, 43, .1); }
.gulungan::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(11, 11, 11, .78), rgba(11, 11, 11, 0) 30%, rgba(11, 11, 11, 0) 70%, rgba(11, 11, 11, .78)); }
.gulungan__pita { display: flex; flex-direction: column; will-change: transform; }
.gulungan__butir { flex: none; height: var(--h); display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 0 10px; font-family: var(--f-judul); text-transform: uppercase; line-height: 1.02; font-size: clamp(.95rem, 1.5vw, 1.18rem); overflow: hidden; }
.gulungan--kalimat .gulungan__butir { font-size: clamp(1.02rem, 1.9vw, 1.42rem); }
.gulungan__butir > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gulungan--lari .gulungan__pita { filter: blur(1.4px); }
.mesin__panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 4px 2px 0; }
.mesin__celah { position: relative; width: 92px; height: 88px; display: grid; place-items: center; perspective: 400px; }
.mesin__lubang { position: absolute; left: 50%; bottom: 6px; width: 40px; height: 7px; margin-left: -20px; border-radius: 6px; background: var(--hitam-2);
  box-shadow: inset 0 2px 0 #000, 0 1px 0 rgba(255, 255, 255, .6); }
.mesin__tulisan { position: absolute; left: 0; right: 0; bottom: -12px; text-align: center; font-size: .56rem; font-weight: 700; font-stretch: 75%;
  letter-spacing: .12em; text-transform: uppercase; color: var(--redup-gelap); }
.koin { position: relative; width: 68px; height: 71px; margin-top: -10px; transform-style: preserve-3d; animation: koin-apung 3.2s ease-in-out infinite; }
.koin__muka, .koin__balik { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.koin__balik { transform: rotateY(180deg); }
.koin__balik img { width: 65px; height: 65px; border-radius: 50%; margin: 1px auto 0; }
.koin .receh { width: 100%; height: 100%; }
.mesin--jalan .koin { animation: koin-putar .52s linear infinite; }
@keyframes koin-apung { 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes koin-putar { from { transform: rotateY(0) translateY(-4px); } to { transform: rotateY(360deg) translateY(-4px); } }
.mesin__lcd { min-width: 0; min-height: 46px; display: flex; align-items: center; padding: 10px 14px; border-radius: 11px;
  background: var(--hitam-2); color: var(--mustard); box-shadow: inset 0 0 0 2px #2c2a26;
  font-weight: 700; font-stretch: 75%; font-size: .84rem; letter-spacing: .15em; text-transform: uppercase; line-height: 1.2;
  text-shadow: 0 0 8px rgba(214, 161, 43, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesin__putar { width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--hitam-2); background: var(--mustard); color: var(--hitam);
  font-family: var(--f-judul); font-size: 1.1rem; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 0 var(--hitam-2);
  transition: transform .12s, box-shadow .12s, background-color .2s; }
.mesin__putar:hover { background: #e7b33c; }
.mesin__putar:active, .mesin--jalan .mesin__putar { transform: translateY(5px); box-shadow: 0 1px 0 var(--hitam-2); }
.mesin__putar:disabled { cursor: progress; }
.tuas { position: absolute; right: 0; top: 28%; width: 44px; height: 150px; border: 0; background: none; padding: 0; cursor: pointer; }
.tuas::after { content: ""; position: absolute; left: -14px; bottom: -18px; width: 54px; height: 38px; background: var(--hitam-2);
  border-radius: 6px 14px 14px 6px; box-shadow: inset -4px -4px 0 #2a2824; }
.tuas__batang { position: absolute; left: 50%; bottom: 0; width: 12px; height: 100%; margin-left: -6px; background: var(--krem);
  border: 3px solid var(--hitam-2); border-radius: 8px; transform-origin: 50% 100%; transition: transform .45s var(--pegas); }
.tuas__bola { position: absolute; left: 50%; top: -20px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: var(--mustard);
  border: 3px solid var(--hitam-2); box-shadow: inset -6px -6px 0 rgba(21, 21, 21, .16), inset 5px 5px 0 rgba(255, 255, 255, .35);
  transition: transform .45s var(--pegas); }
.tuas:hover .tuas__bola { transform: translateY(6px); }
.mesin__catatan { position: absolute; right: -8px; top: calc(28% - 96px); z-index: 2; font-size: 1.75rem; color: var(--krem);
  transform: rotate(9deg); pointer-events: none; text-shadow: 0 0 3px var(--hitam), 0 0 8px var(--hitam), 0 0 14px var(--hitam); }
.mesin--jalan .mesin__catatan { opacity: 0; transition: opacity .2s; }
.tuas--tarik .tuas__batang { transform: scaleY(-.5); transition-duration: .22s; transition-timing-function: ease-in; }
.tuas--tarik .tuas__bola { transform: translateY(225px); transition-duration: .22s; transition-timing-function: ease-in; }

.hasil { display: grid; gap: 20px; align-content: start; max-width: 470px; width: 100%; margin-inline: auto; }
@media (min-width: 720px) and (max-width: 1023px) { .hasil { grid-template-columns: 1fr 1fr; align-items: center; max-width: none; } }
.hasil__panggung { position: relative; aspect-ratio: 1; border-radius: 26px; background: var(--h-bg); overflow: hidden; transition: background-color .6s var(--ease); }
.hasil[data-warna="hitam"] { --h-bg: var(--tulang); }
.hasil[data-warna="putih"] { --h-bg: var(--arang-2); }
.hasil__kaos { width: 100%; height: 100%; object-fit: contain; }
.hasil--baru .hasil__kaos { animation: meluncur 1s var(--pegas) both; }
.hasil--baru .hasil__teks > * { animation: naik-pelan .7s var(--ease) both; animation-delay: calc(.25s + var(--n, 0) * 70ms); }
@keyframes meluncur { from { transform: translateY(70%) rotate(-12deg) scale(.78); opacity: 0; } }
@keyframes naik-pelan { from { transform: translateY(16px); opacity: 0; } }
.hasil__teks { display: grid; gap: 14px; }
.hasil__judul { font-family: var(--f-judul); font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: .95; text-transform: uppercase; text-wrap: balance; }
.hasil__aksi { display: flex; flex-wrap: wrap; gap: 10px; }
.ukuran-cepat { border: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ukuran-cepat legend { float: left; margin-right: 8px; font-weight: 700; font-stretch: 75%; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--redup); }
.ukuran-cepat label { position: relative; }
.ukuran-cepat input, .pilih-warna input, .pilih-ukuran input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ukuran-cepat span { display: grid; place-items: center; min-width: 46px; height: 42px; padding: 0 8px; border: 1.5px solid var(--garis); border-radius: 10px;
  font-family: var(--f-judul); font-size: 1.05rem; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.ukuran-cepat span:hover { border-color: var(--krem); }
.ukuran-cepat input:checked + span { background: var(--mustard); color: var(--hitam); border-color: var(--mustard); }
.ukuran-cepat input:focus-visible + span, .pilih-warna input:focus-visible + span, .pilih-ukuran input:focus-visible + span { outline: 3px solid var(--mustard); outline-offset: 2px; }

/* ------------------------------------------------------------------ rak seri */
.rak { position: relative; }
.rak__kelompok { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding-top: 20px; font-family: var(--f-isi);
  font-weight: 700; font-stretch: 75%; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--redup-gelap); }
.rak__kelompok .tangan { font-size: 2rem; color: var(--hitam); line-height: 1; }
.rak__daftar { border-top: 2px solid var(--hitam); margin-bottom: 44px; }
.rak__baris { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 78px; align-items: center;
  gap: 4px 16px; padding: 16px 6px; border-bottom: 1px solid rgba(21, 21, 21, .2); text-decoration: none; color: var(--hitam);
  transition: color .3s var(--ease); }
.rak__baris::before { content: ""; position: absolute; inset: 0 -6px; z-index: -1; background: var(--hitam); transform: scaleY(0);
  transform-origin: 50% 100%; transition: transform .45s var(--ease); border-radius: 4px; }
.rak__baris:hover, .rak__baris:focus-visible { color: var(--krem); }
.rak__baris:hover::before, .rak__baris:focus-visible::before { transform: scaleY(1); transform-origin: 50% 0; }
.rak__nama { grid-column: 1; font-family: var(--f-judul); font-size: clamp(2.2rem, 8.5vw, 5.2rem); line-height: .95; text-transform: uppercase;
  transition: transform .5s var(--ease); }
.rak__baris:hover .rak__nama { transform: translateX(14px); }
.rak__jumlah { grid-column: 1; font-size: .9rem; font-weight: 600; }
.rak__jumlah b { font-family: var(--f-judul); font-weight: 400; font-size: 1.15rem; color: var(--mustard-tua); margin-right: 2px; }
.rak__baris:hover .rak__jumlah b { color: var(--mustard); }
.rak__desk { grid-column: 1; font-size: .95rem; color: var(--redup-gelap); max-width: 46ch; transition: color .3s; }
.rak__baris:hover .rak__desk { color: #cfc6b3; }
.rak__contoh { display: none; }
.rak__jempol { grid-column: 2; grid-row: 1 / span 3; width: 78px; height: 78px; border-radius: 12px; background: var(--krem); object-fit: contain; }
.rak__panah { display: none; }
.rak__lensa { display: none; }
@media (min-width: 900px) {
  .rak__baris { grid-template-columns: minmax(0, 1.15fr) 120px minmax(0, 1fr) 40px; padding: 18px 8px; }
  .rak__nama, .rak__jumlah, .rak__desk { grid-column: auto; grid-row: 1; }
  .rak__desk { display: grid; gap: 4px; }
  .rak__contoh { display: block; grid-column: 3; grid-row: 2; font-family: var(--f-tangan); font-size: 1.35rem; line-height: 1.1; color: var(--mustard-tua);
    margin-top: -4px; }
  .rak__baris:hover .rak__contoh { color: var(--mustard); }
  .rak__jempol { display: none; }
  .rak__panah { display: block; grid-column: 4; grid-row: 1 / span 2; width: 30px; height: 30px; transition: transform .4s var(--ease); }
  .rak__baris:hover .rak__panah { transform: translateX(6px) rotate(-30deg); color: var(--mustard); }
  .rak__lensa { display: block; position: fixed; left: 0; top: 0; z-index: 40; width: 250px; padding: 12px 12px 30px; background: #fff; border-radius: 6px;
    box-shadow: 0 30px 50px -10px rgba(21, 21, 21, .45); pointer-events: none; opacity: 0;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) rotate(var(--r, -6deg)) scale(var(--s, .6));
    transition: opacity .25s, scale .35s; }
  .rak__lensa img { width: 100%; aspect-ratio: 1; background: var(--tulang); border-radius: 3px; }
  .rak__lensa.tampil { opacity: 1; --s: 1; }
}

/* ------------------------------------------------------------------ unboxing */
.unboxing { background: var(--kraft) url(/aset/img/kraft.webp?v=5e452284e4); color: var(--hitam); overflow: clip; }
.unboxing__isi { display: grid; gap: 34px; align-items: center; }
@media (min-width: 1024px) { .unboxing__isi { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; } }
.unboxing__teks h2 { margin: 14px 0 26px; }
.unboxing .label { color: var(--hitam); }
.unboxing__langkah { display: grid; gap: 4px; }
.unboxing__langkah li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 12px 0;
  border-top: 1px solid rgba(21, 21, 21, .25); transition: opacity .35s; }
.unboxing__langkah li::before { content: attr(data-no); grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hitam); color: var(--krem); font-family: var(--f-judul); font-size: 1.05rem; transition: background-color .3s, color .3s; }
.unboxing__langkah b { font-family: var(--f-judul); font-weight: 400; font-size: 1.35rem; text-transform: uppercase; line-height: 1.1; }
.unboxing__langkah span { font-size: .98rem; color: #3b3328; }
.unboxing__panggung { position: relative; width: min(100%, 520px); aspect-ratio: 10 / 11; margin-inline: auto; perspective: 1500px; }
.ub { position: absolute; display: block; }
.ub--bayang { left: 16%; right: 16%; bottom: 3%; height: 7%; border-radius: 50%; background: rgba(21, 21, 21, .28); filter: blur(14px); }
.ub--kaos { left: 12%; top: 16%; width: 76%; z-index: 3; filter: drop-shadow(0 16px 18px rgba(21, 21, 21, .3)); }
.ub--tisu { top: 13%; width: 38%; height: 77%; z-index: 4; transform-style: preserve-3d; }
.unboxing.dekat .tisu__muka, .unboxing.dekat .tisu__balik { background-image: url(/aset/img/tisu.webp?v=38999764a7); }
.tisu__muka, .tisu__balik { position: absolute; inset: 0; background: #faf9f5 0 0 / 520px auto;
  box-shadow: 0 10px 22px rgba(21, 21, 21, .22); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: inherit; }
.tisu__balik { transform: rotateY(180deg); background-position: -140px -60px; background-color: #f6f4ee; }
.ub--tisu-kiri { left: 12%; transform-origin: 0 50%; transform: rotateY(-156deg); border-radius: 4px 0 0 4px; }
.ub--tisu-kanan { left: 50%; transform-origin: 100% 50%; transform: rotateY(156deg); border-radius: 0 4px 4px 0; }
.ub--segel { left: 4%; top: 3%; width: 17%; z-index: 7; transform: rotate(-16deg); filter: drop-shadow(0 6px 8px rgba(21, 21, 21, .3)); }
.ub--hangtag { left: 71%; top: 10%; width: 16%; z-index: 6; transform-origin: 50% 0; transform: rotate(-8deg); filter: drop-shadow(0 10px 12px rgba(21, 21, 21, .32)); }
.ub--kartu { left: 3%; top: 57%; width: 31%; z-index: 6; transform: rotate(-7deg); filter: drop-shadow(0 12px 14px rgba(21, 21, 21, .3)); }
.ub--zipper { left: 58%; top: 50%; width: 36%; z-index: 2; transform: rotate(9deg); filter: drop-shadow(0 10px 14px rgba(21, 21, 21, .25)); }
.ub--mailer { left: -2%; top: 46%; width: 40%; z-index: 1; transform: rotate(-12deg); filter: drop-shadow(0 12px 16px rgba(21, 21, 21, .3)); }
.ub__badan, .ub__tutup-luar { position: absolute; background: #1b1b1b no-repeat; background-size: 100% auto; }
/* gambar kemasan baru dimuat saat bagian unboxing mendekat (tanpa JS: langsung) */
.unboxing.dekat .ub__badan, .unboxing.dekat .ub__tutup-luar { background-image: url(/aset/img/polymailer.webp?v=383ae4d673); }
.ub__badan { left: 0; right: 0; bottom: 0; top: 13%; background-position: 50% 100%; }
.ub__tutup { position: absolute; left: 0; right: 0; top: 0; height: 13.2%; transform-origin: 50% 100%; transform-style: preserve-3d; }
.ub__tutup-luar { inset: 0; background-position: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ub__tutup-dalam { position: absolute; inset: 0; background: #0c0c0c; transform: rotateY(180deg) rotateZ(180deg); backface-visibility: hidden;
  -webkit-backface-visibility: hidden; border-radius: 0 0 8px 8px; }
/* mode hidup (JS + gerak diizinkan): panggung lengket, semua lapisan digerakkan dari posisi gulir */
.unboxing--hidup { height: 460vh; padding: 0; }
.unboxing--hidup .unboxing__lengket { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center;
  padding-top: var(--kepala); }
.unboxing--hidup .ub--kaos { left: 12%; top: 16%; width: 76%; }
.unboxing--hidup .ub--tisu-kiri, .unboxing--hidup .ub--tisu-kanan { top: 13%; }
.unboxing--hidup .ub--segel { left: 41.5%; top: 40%; width: 17%; }
.unboxing--hidup .ub--zipper { left: 23%; top: 7%; width: 54%; z-index: 8; }
.unboxing--hidup .ub--mailer { left: 18%; top: 3%; width: 64%; z-index: 9; }
.unboxing--hidup .ub--kartu { left: 3%; top: 57%; }
.unboxing--hidup .unboxing__langkah li { opacity: .4; }
.unboxing--hidup .unboxing__langkah li.aktif { opacity: 1; }
.unboxing--hidup .unboxing__langkah li.aktif::before { background: var(--krem); color: var(--hitam); box-shadow: 0 0 0 2px var(--hitam); }
@media (max-width: 1023px) {
  .unboxing--hidup .unboxing__isi { gap: 10px; }
  .unboxing--hidup .unboxing__teks h2 { font-size: clamp(2rem, 9vw, 3rem); margin: 8px 0 10px; }
  .unboxing--hidup .unboxing__langkah li:not(.aktif) { display: none; }
  .unboxing--hidup .unboxing__langkah li { border: 0; padding: 0; opacity: 1; }
  .unboxing--hidup .unboxing__panggung { width: min(92%, 52vh, 440px); }
  .unboxing--hidup .unboxing__teks .label { display: none; }
  .unboxing--hidup .unboxing__teks h2 { font-size: clamp(1.7rem, 7.4vw, 2.6rem); }
}

/* ------------------------------------------------------------------ bahan & ukuran */
.bahan { background: var(--hitam) url(/aset/img/tisu-krem.svg?v=b3e4e32260); }
.bahan__grid { display: grid; gap: 56px; }
@media (min-width: 1024px) { .bahan__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 72px; align-items: start; } }
.spek { display: grid; border-top: 1px solid var(--garis); }
.spek > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--garis); }
.spek dt { color: var(--redup); font-weight: 650; font-stretch: 85%; }
.rawat { position: relative; margin-top: 44px; background: var(--tulang); color: var(--hitam); border-radius: 10px; padding: 28px 26px 24px;
  transform: rotate(-1.4deg); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .8); max-width: 480px; }
.rawat::before { content: ""; position: absolute; top: -14px; left: 50%; width: 76px; height: 28px; margin-left: -38px; background: rgba(214, 161, 43, .82);
  transform: rotate(3deg); }
.rawat__judul { font-family: var(--f-judul); font-size: 1.6rem; text-transform: uppercase; line-height: 1; margin-bottom: 14px; }
.rawat ol { list-style: none; padding: 0; counter-reset: rawat; display: grid; gap: 10px; }
.rawat li { counter-increment: rawat; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .98rem; line-height: 1.45; }
.rawat li::before { content: counter(rawat); width: 26px; height: 26px; border-radius: 50%; background: var(--mustard); display: grid; place-items: center;
  font-weight: 800; font-size: .8rem; }
.rawat__kaki { margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(21, 21, 21, .35); font-size: .9rem; color: var(--redup-gelap); }
.bahan__h3 { font-family: var(--f-judul); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; line-height: 1; }
.bahan__sub { color: var(--redup); margin: 12px 0 22px; max-width: 60ch; font-size: .98rem; }
.ukuran { background: var(--tulang); color: var(--hitam); border-radius: 24px; padding: clamp(18px, 3vw, 30px); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); }
.ukuran__atas { display: grid; gap: 14px; justify-items: center; }
@media (min-width: 560px) { .ukuran__atas { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; } }
.ukuran__pilih { display: flex; gap: 6px; }
@media (min-width: 560px) { .ukuran__pilih { flex-direction: column; } }
.ukuran__pilih button { width: 50px; height: 46px; border-radius: 12px; border: 2px solid var(--hitam); background: transparent; cursor: pointer;
  font-family: var(--f-judul); font-size: 1.15rem; transition: background-color .2s, color .2s; }
.ukuran__pilih button[aria-pressed="true"] { background: var(--hitam); color: var(--mustard); }
.ukuran__gambar { width: 100%; max-width: 380px; margin-inline: auto; overflow: visible; }
.ukuran__kaos { fill: #fff; stroke: var(--hitam); stroke-width: 2.5; stroke-linejoin: round; }
.ukuran__kerah { fill: none; stroke: var(--hitam); stroke-width: 2; }
.ukuran__garis { transition: opacity .3s; }
.ukuran__garis path { fill: none; stroke: var(--mustard-tua); stroke-width: 2.5; stroke-linecap: round; }
.ukuran__garis circle { fill: var(--mustard); stroke: var(--hitam); stroke-width: 1.5; }
.ukuran__garis text { font: 800 12px var(--f-isi); text-anchor: middle; fill: var(--hitam); }
.ukuran__garis .ukuran__nilai { font: 400 17px var(--f-judul); fill: var(--hitam); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.ukuran.ada-sorot .ukuran__garis { opacity: .25; }
.ukuran.ada-sorot .ukuran__garis.nyala { opacity: 1; }
.ukuran__tabel-wadah { margin-top: 18px; overflow-x: auto; }
.ukuran__tabel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .92rem; }
.ukuran__tabel th, .ukuran__tabel td { padding: 9px 6px; text-align: center; border-bottom: 1px solid rgba(21, 21, 21, .15); }
.ukuran__tabel thead th { font-weight: 700; font-stretch: 78%; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; vertical-align: bottom; line-height: 1.2; }
.ukuran__tabel thead i { display: grid; place-items: center; width: 20px; height: 20px; margin: 0 auto 4px; border-radius: 50%; background: var(--mustard);
  font-style: normal; font-size: .72rem; }
.ukuran__tabel tbody th { font-family: var(--f-judul); font-weight: 400; font-size: 1.25rem; text-align: left; padding-left: 10px; }
.ukuran__tabel td { font-family: var(--f-judul); font-size: 1.12rem; }
.ukuran__tabel td:last-child { font-family: var(--f-isi); font-size: .85rem; color: var(--redup-gelap); }
.ukuran__tabel tr.aktif { background: rgba(214, 161, 43, .25); }
.ukuran__tabel [data-kolom].nyala { background: rgba(214, 161, 43, .2); }
.ukuran__tabel tbody tr { cursor: pointer; }
.ukuran__catatan { margin-top: 14px; font-size: .86rem; color: var(--redup-gelap); }

/* ------------------------------------------------------------------ custom */
.custom { background: var(--mustard) url(/aset/img/tisu-hitam.svg?v=9521dd59dd); color: var(--hitam); overflow: clip; }
.custom .judul-bagian p:last-child { color: #3a2e14; }
.tag-daftar { position: relative; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); padding-top: 0; }
.tag-daftar::before { content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 4px; background: var(--hitam); border-radius: 4px; }
.tag { position: relative; display: flex; flex-direction: column; align-items: center; transform: rotate(var(--miring)); transform-origin: 50% 0; }
.tag:hover { animation: ayun 1.6s var(--ease); }
@keyframes ayun { 0% { transform: rotate(var(--miring)); } 25% { transform: rotate(calc(var(--miring) + 6deg)); } 50% { transform: rotate(calc(var(--miring) - 4deg)); }
  75% { transform: rotate(calc(var(--miring) + 1.5deg)); } 100% { transform: rotate(var(--miring)); } }
.tag__tali { width: 2px; height: 40px; background: var(--hitam); }
.tag__kartu { position: relative; width: 100%; max-width: 330px; min-height: 380px; display: flex; flex-direction: column; gap: 10px;
  background: var(--hitam); color: var(--krem); border-radius: 16px; padding: 50px 26px 24px; box-shadow: 0 24px 40px -18px rgba(21, 21, 21, .7); }
.tag__lubang { position: absolute; top: 18px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--mustard);
  box-shadow: inset 0 0 0 3px #080808, 0 0 0 5px rgba(239, 230, 210, .12); }
.tag__nama { font-family: var(--f-judul); font-size: clamp(2.8rem, 5vw, 3.8rem); line-height: .95; text-transform: uppercase; color: var(--mustard); }
.tag__sub { font-family: var(--f-tangan); font-size: 1.6rem; line-height: 1.1; }
.tag__isi { color: #d6cdbb; font-size: 1rem; }
.tag__kaki { margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(239, 230, 210, .3); }
.tag__logo { width: 112px; color: var(--krem); aspect-ratio: 287 / 139; height: auto; }
.custom__aksi { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.custom__aksi .tangan { font-size: 1.5rem; line-height: 1.2; }

/* ------------------------------------------------------------------ tentang */
.tentang { background: var(--hitam); }
.tentang__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .tentang__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; } }
.tentang h2 { margin-top: 14px; font-size: clamp(3rem, 8vw, 7.4rem); }
.lima-koin { display: flex; margin: 34px 0 6px; padding-left: 10px; }
.lima-koin li { width: clamp(60px, 9vw, 108px); margin-left: -10px; animation: goyang 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
.lima-koin .receh { width: 100%; height: auto; aspect-ratio: 432 / 452; }
@keyframes goyang { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
.tentang__coret { font-size: 1.8rem; color: var(--mustard); transform: rotate(-3deg); transform-origin: left; }
.tentang__lead { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.45; color: var(--krem); font-weight: 480; }
.tentang__butir { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--garis); }
.tentang__butir h3 { font-family: var(--f-judul); font-weight: 400; font-size: 1.7rem; text-transform: uppercase; line-height: 1; margin-bottom: 8px; color: var(--mustard); }
.tentang__butir p { color: #cfc7b5; }

/* ------------------------------------------------------------------ kontak & kaki */
.kontak { background: var(--kraft) url(/aset/img/kraft.webp?v=5e452284e4); color: var(--hitam); }
.kontak__kartu { text-align: center; }
.kontak__besar { font-family: var(--f-judul); font-size: clamp(3rem, 10vw, 8.6rem); line-height: .9; text-transform: uppercase; max-width: 11ch; margin-inline: auto; text-wrap: balance; }
.kontak__catatan { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-top: 16px; transform: rotate(-2deg); }
.kontak__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: clamp(50px, 7vw, 90px); border-top: 3px solid var(--hitam); }
.kontak__butir { display: grid; gap: 8px; align-content: start; padding: 24px 22px 30px 0; border-bottom: 1px solid rgba(21, 21, 21, .3); }
.kontak__butir p:not(.label) { font-size: .95rem; color: #3b3328; }
.kontak__nilai { font-family: var(--f-judul); font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.05; text-transform: uppercase; text-decoration: none; word-break: break-word; }
a.kontak__nilai:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.kontak__nilai--kecil { font-size: 1.5rem; }
.kontak__nilai--email { text-transform: none; font-size: clamp(1.35rem, 1.9vw, 1.7rem); letter-spacing: .01em; }
.kontak .kontak__alamat { font-weight: 600; color: var(--hitam); font-size: 1.02rem; }
.kontak .tautan-panah { border-color: var(--hitam); }
@media (min-width: 1024px) { .kontak__butir + .kontak__butir { padding-left: 22px; border-left: 1px solid rgba(21, 21, 21, .3); } }
.kaki { background: var(--hitam-2); padding: 64px 0 28px; }
.kaki__isi { display: grid; gap: 36px; }
@media (min-width: 900px) { .kaki__isi { grid-template-columns: 1.4fr 1fr 1fr; } }
.kaki__logo { display: block; width: 190px; color: var(--krem); margin-bottom: 14px; }
.kaki__logo .logo { width: 100%; height: auto; aspect-ratio: 287 / 139; }
.kaki__merek p { color: var(--redup); max-width: 38ch; }
.kaki__nav, .kaki__kontak { display: grid; gap: 8px; align-content: start; }
.kaki__nav a, .kaki__kontak a { text-decoration: none; width: fit-content; }
.kaki__nav a:hover, .kaki__kontak a:hover { color: var(--mustard); }
.kaki__alamat { color: var(--redup); font-size: .92rem; }
.kaki__bawah { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--garis); display: grid; gap: 6px; font-size: .85rem; color: var(--redup); }
.kaki__bawah a { color: var(--krem); }
.wa-apung { position: fixed; right: 16px; bottom: 16px; z-index: 45; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px;
  border-radius: 999px; background: var(--mustard); color: var(--hitam); text-decoration: none; font-weight: 760; font-stretch: 82%;
  letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 3px 3px 0 var(--hitam-2);
  transform: translateY(130%); transition: transform .45s var(--pegas); }
.wa-apung .ikon { width: 1.5em; height: 1.5em; }
.lewat-pembuka .wa-apung { transform: none; }
.menu-buka .wa-apung { transform: translateY(130%); }
@media (max-width: 1023px) {
  .wa-apung { width: 58px; height: 58px; padding: 0; justify-content: center; right: 14px; bottom: 14px; }
  .wa-apung .ikon { width: 28px; height: 28px; }
  .wa-apung span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (min-width: 1024px) { .wa-apung { display: none; } }

/* ------------------------------------------------------------------ katalog */
.katalog { padding-top: calc(var(--kepala) + 22px); padding-bottom: 110px; }
.remah { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: var(--redup); margin-bottom: 18px; }
.remah a { text-decoration: none; }
.remah a:hover { color: var(--krem); text-decoration: underline; }
.katalog__kepala { display: grid; gap: 14px; }
@media (min-width: 900px) { .katalog__kepala { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 48px; } }
.katalog__kepala h1 { font-family: var(--f-judul); font-weight: 400; font-size: clamp(4rem, 13vw, 10.5rem); line-height: .86; text-transform: uppercase;
  display: flex; align-items: flex-start; gap: .1em; }
.katalog__angka { font-size: .3em; line-height: 1; background: var(--mustard); color: var(--hitam); padding: .14em .32em .1em; border-radius: 999px; margin-top: .25em; }
.katalog__kepala p { color: var(--redup); max-width: 52ch; }
.saring { position: sticky; top: var(--kepala); z-index: 20; display: grid; gap: 10px; margin-top: 28px; padding: 12px 0;
  background: rgba(21, 21, 21, .97); border-bottom: 1px solid var(--garis); }
.saring { grid-template-columns: minmax(0, 1fr) auto; } .saring__seri { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .saring__warna button { padding: 0 11px; }
  .saring__teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .saring__warna .bulat { width: 20px; height: 20px; }
}
.saring__cari { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; background: var(--arang); border: 1.5px solid var(--garis);
  border-radius: 999px; transition: border-color .2s; }
.saring__cari:focus-within { border-color: var(--mustard); }
.saring__cari .ikon { width: 20px; height: 20px; color: var(--redup); }
.saring__cari input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--krem); font: inherit; font-size: 1rem; }
.saring__cari input::placeholder { color: #857e70; }
.saring__warna { display: flex; gap: 4px; padding: 4px; background: var(--arang); border: 1.5px solid var(--garis); border-radius: 999px; width: fit-content; }
.saring__warna button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
  cursor: pointer; font-weight: 650; font-stretch: 88%; transition: background-color .25s, color .25s; }
.saring__warna button[aria-pressed="true"] { background: var(--krem); color: var(--hitam); }
.saring__seri { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--tepi) * -1); padding: 2px var(--tepi); }
.saring__seri::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .saring__seri { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.saring__seri button { flex: none; display: inline-flex; align-items: baseline; gap: 6px; height: 38px; padding: 0 14px; border: 1.5px solid var(--garis); border-radius: 999px;
  background: transparent; cursor: pointer; font-weight: 620; font-stretch: 86%; font-size: .9rem; transition: background-color .2s, border-color .2s, color .2s; align-items: center; }
.saring__seri button small { color: var(--mustard); font-weight: 700; font-size: .78rem; }
.saring__seri button:hover { border-color: var(--krem); }
.saring__seri button[aria-pressed="true"] { background: var(--mustard); border-color: var(--mustard); color: var(--hitam); }
.saring__seri button[aria-pressed="true"] small { color: var(--hitam); }
.saring__hasil { margin: 16px 0 4px; font-size: .9rem; color: var(--redup); }

.grid-kaos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (min-width: 720px) { .grid-kaos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .grid-kaos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.grid-kaos[data-warna="hitam"] { --k-bg: var(--tulang); --k-fg: var(--hitam); --k-kode: var(--mustard-tua); }
.grid-kaos[data-warna="putih"] { --k-bg: var(--arang-2); --k-fg: var(--krem); --k-kode: var(--mustard); }
.kartu { perspective: 900px; }
.kartu[hidden] { display: none; }
.kartu__tautan { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 18px; overflow: hidden; text-decoration: none;
  background: var(--k-bg); color: var(--k-fg); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s var(--ease), background-color .55s var(--ease) calc(var(--i) * 22ms), color .55s var(--ease) calc(var(--i) * 22ms), box-shadow .35s; }
.kartu__tautan::before { content: ""; position: absolute; top: 14px; right: 14px; z-index: 2; width: 11px; height: 11px; border-radius: 50%; background: var(--hitam);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 0 0 2px rgba(214, 161, 43, .55); }
.kartu__tautan::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 48%); }
.kartu__tautan:hover { box-shadow: 0 28px 40px -22px rgba(0, 0, 0, .85); }
.kartu__tautan:hover::after { opacity: 1; }
.kartu__foto { display: block; position: relative; aspect-ratio: 1; padding: 5% 5% 0; }
.kartu__foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .55s var(--ease), opacity .3s; }
.kartu__tautan:hover .kartu__foto img { transform: translateY(-5px) scale(1.04); }
.kartu__foto img.ganti { opacity: .15; }
.kartu__teks { display: grid; gap: 4px; padding: 10px 14px 16px; }
.kartu__kode { font-weight: 750; font-stretch: 75%; font-size: .7rem; letter-spacing: .15em; color: var(--k-kode); transition: color .55s calc(var(--i) * 22ms); }
.kartu__judul { font-family: var(--f-judul); font-size: clamp(1.02rem, 1.55vw, 1.32rem); line-height: 1.04; text-transform: uppercase; }
.kartu__seri { font-size: .78rem; opacity: .7; }
.kosong { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 60px 0; }
.kosong[hidden] { display: none; }
.kosong__receh { width: 120px; height: auto; aspect-ratio: 432 / 452; animation: goyang 3s ease-in-out infinite; }
.kosong__judul { font-family: var(--f-judul); font-size: 2.2rem; text-transform: uppercase; line-height: 1; margin-top: 8px; }
.kosong p:not(.kosong__judul) { color: var(--redup); margin-bottom: 8px; }

/* ------------------------------------------------------------------ halaman kaos */
.produk { padding-top: calc(var(--kepala) + 20px); }
.produk__grid { display: grid; gap: 30px; }
@media (min-width: 1024px) { .produk__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; align-items: start; } }
@media (min-width: 1024px) { .galeri { position: sticky; top: calc(var(--kepala) + 16px); } }
.galeri__panggung { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; background: var(--g-bg); transition: background-color .55s var(--ease); cursor: zoom-in; }
.galeri[data-warna="hitam"] { --g-bg: var(--tulang); }
.galeri[data-warna="putih"] { --g-bg: var(--arang-2); }
.galeri__utama { width: 100%; height: 100%; object-fit: contain; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .4s var(--ease), opacity .25s; }
.galeri__panggung.zoom .galeri__utama { transform: scale(2.1); }
.galeri__panggung.zoom { cursor: zoom-out; }
.galeri__utama.ganti { opacity: .2; }
.galeri__catatan { position: absolute; left: 14px; bottom: 12px; max-width: calc(100% - 28px); padding: 5px 11px; border-radius: 999px;
  background: rgba(21, 21, 21, .82); color: var(--krem); font-size: .74rem; line-height: 1.35; pointer-events: none; }
.galeri__jempol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.galeri__jempol button { display: grid; gap: 6px; padding: 8px 8px 10px; border: 2px solid var(--garis); border-radius: 16px; background: var(--arang); cursor: pointer;
  font-weight: 650; font-stretch: 86%; font-size: .82rem; transition: border-color .2s; }
.galeri__jempol button:hover { border-color: var(--redup); }
.galeri__jempol button[aria-pressed="true"] { border-color: var(--mustard); }
.galeri__jempol img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: var(--g-bg); transition: background-color .55s; }
.produk__label { display: flex; gap: 8px; flex-wrap: wrap; }
.produk__label a { text-decoration: none; }
.produk__label a:hover { text-decoration: underline; }
.produk__judul { margin-top: 12px; font-family: var(--f-judul); font-weight: 400; font-size: clamp(2.7rem, 6.2vw, 5.6rem); line-height: .92; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.produk__judul--panjang { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.produk__judul--sangat { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.produk__b2 { display: block; margin-top: .14em; color: var(--mustard); font-size: .6em; line-height: 1; }
.arti { margin-top: 20px; padding: 2px 0 4px 18px; border-left: 3px solid var(--mustard); }
.arti__label { font-size: 1.8rem; color: var(--mustard); line-height: 1; margin-bottom: 4px; }
.arti__isi { font-size: 1.04rem; color: #e3dbc9; }
.pesan { display: grid; gap: 20px; margin-top: 26px; padding: 22px; background: var(--arang); border: 1px solid var(--garis); border-radius: 22px; }
.pilihan { border: 0; padding: 0; min-width: 0; }
.pilihan legend { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; padding: 0; font-weight: 750; font-stretch: 78%; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--redup); }
.pilihan legend a { color: var(--mustard); letter-spacing: .06em; text-transform: none; font-size: .85rem; font-stretch: 90%; }
.pilihan__isi { display: flex; flex-wrap: wrap; gap: 8px; }
.pilih-warna, .pilih-ukuran { position: relative; }
.pilih-warna span { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1.5px solid var(--garis); border-radius: 999px; cursor: pointer;
  font-weight: 650; transition: border-color .2s, background-color .2s; }
.pilih-warna small { color: var(--redup); font-weight: 500; font-size: .8rem; }
.pilih-warna input:checked + span { border-color: var(--mustard); background: rgba(214, 161, 43, .12); }
.pilih-ukuran span { display: grid; place-items: center; width: 60px; height: 52px; border: 1.5px solid var(--garis); border-radius: 13px; cursor: pointer;
  font-family: var(--f-judul); font-size: 1.35rem; transition: background-color .2s, border-color .2s, color .2s; }
.pilih-ukuran span:hover, .pilih-warna span:hover { border-color: var(--krem); }
.pilih-ukuran small { display: block; margin-top: 4px; text-align: center; font-size: .68rem; color: var(--redup); }
@media (max-width: 480px) {
  .pilihan__isi--ukuran { gap: 6px; }
  .pilih-ukuran span { width: 52px; height: 50px; font-size: 1.25rem; }
  .pilihan__isi:not(.pilihan__isi--ukuran) { display: grid; grid-template-columns: 1fr 1fr; }
  .pilih-warna span { padding: 10px 12px; gap: 8px; flex-wrap: wrap; row-gap: 0; }
  .pilih-warna small { flex-basis: 100%; padding-left: 25px; margin-top: -2px; }
}
.pilih-ukuran input:checked + span { background: var(--mustard); color: var(--hitam); border-color: var(--mustard); }
.pesan__catatan { display: flex; gap: 12px; font-size: .9rem; color: var(--redup); }
.pesan__toko { font-weight: 750; font-stretch: 78%; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--krem); margin-top: -6px; }
.spek--kecil { margin-top: 28px; font-size: .95rem; }
.lipat { border-bottom: 1px solid var(--garis); }
.lipat summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 700; font-stretch: 90%; }
.lipat summary::-webkit-details-marker { display: none; }
.lipat summary::after { content: "+"; font-family: var(--f-judul); font-size: 1.6rem; line-height: 1; color: var(--mustard); transition: transform .3s; }
.lipat[open] summary::after { transform: rotate(45deg); }
.lipat .ukuran { margin-bottom: 18px; }
.lipat__daftar { padding-left: 1.3em; display: grid; gap: 6px; margin-bottom: 18px; color: #d6cdbb; }
.terkait { padding-block: clamp(70px, 9vw, 120px) 30px; }
.terkait__kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 30px; margin-bottom: 24px; }
.terkait h2 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); }
.grid-kaos--geser { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(170px, 46%); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; scrollbar-width: thin; }
.grid-kaos--geser .kartu { scroll-snap-align: start; }
@media (min-width: 720px) { .grid-kaos--geser { grid-auto-columns: minmax(200px, 30%); } }
@media (min-width: 1100px) { .grid-kaos--geser { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.produk__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 30px 90px; }
.produk__nav a { display: grid; gap: 4px; align-content: start; padding: 18px 20px; border: 1px solid var(--garis); border-radius: 18px; text-decoration: none;
  transition: border-color .2s, background-color .2s; }
.produk__nav a:hover { border-color: var(--mustard); background: var(--arang); }
.produk__nav a span:last-child { font-family: var(--f-judul); font-size: clamp(1rem, 1.8vw, 1.4rem); text-transform: uppercase; line-height: 1.08; }
.produk__nav a[rel="next"] { text-align: right; }

/* ------------------------------------------------------------------ 404 */
.hilang { min-height: 100svh; padding: calc(var(--kepala) + 40px) 0 80px; display: grid; justify-items: center; align-content: center; text-align: center; gap: 14px; }
.hilang__receh { width: 150px; height: auto; aspect-ratio: 432 / 452; animation: goyang 2.4s ease-in-out infinite; }
.hilang .hilang__angka { font-family: var(--f-judul); font-size: clamp(7rem, 26vw, 16rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--mustard); }
.hilang h1 { font-family: var(--f-judul); font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; text-transform: uppercase; max-width: 16ch; }
.hilang p { color: var(--redup); max-width: 44ch; }
.hilang__aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }

/* ------------------------------------------------------------------ muncul saat digulir (CSS scroll-driven; konten tetap terlihat tanpa dukungan) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .judul-bagian, .rak__baris, .tag__kartu, .kontak__butir, .tentang__butir, .rawat, .ukuran, .spek > div, .mesin, .hasil {
      animation: muncul linear both; animation-timeline: view(); animation-range: entry 0% entry 220px; }
    @keyframes muncul { from { opacity: .35; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
  }
}

/* ------------------------------------------------------------------ hemat gerak */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .pita__isi { animation: none !important; }
  .pita__jalur { overflow-x: auto; }
}