/* Lapisan gerak dan interaksi (laman utama sahaja).

   Peraturan:
   - Semua gerakan hidup di bawah html.gerak. Kelas ini diletak oleh js/gerak-awal.js hanya jika pelawat
     TIDAK minta gerakan dikurangkan (tetapan sistem pada peranti mereka). Tanpanya, laman statik dan lengkap.
   - Hanya opacity dan sifat transform individu (translate, rotate, scale) digerakkan, supaya tiada
     susun atur berubah dan gerakan kekal di GPU.
   - Gerakan masuk guna "backwards" bukan "both": selepas habis, keadaan biasa elemen yang terpakai,
     jadi kesan hover tidak disekat oleh bingkai kunci.
   - Gerakan berulang (gelung) sengaja sedikit dan perlahan. */

:root {
  --melonjak: cubic-bezier(0.3, 1.5, 0.5, 1);
  --meluncur: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =====================================================================
   1. Komponen baharu: kelihatan dan berfungsi tanpa gerakan
   ===================================================================== */

.kata {
  display: inline-block;
}

/* Bar kemajuan skrol */
.skrol {
  display: none;
}

/* Hiasan hero dan penutup: pelekat yang terapung. Semuanya aria-hidden dan tidak boleh diklik. */
.hero,
.penutup {
  position: relative;
  overflow: hidden;
}
.hero > .lajur__isi,
.penutup > .lajur__isi {
  position: relative;
  z-index: 1;
}
.hiasan {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hiasan__lajur {
  position: relative;
  width: min(100%, 66rem);
  height: 100%;
  margin-inline: auto;
}
.stiker {
  position: absolute;
  width: var(--u, 2.75rem);
  height: var(--u, 2.75rem);
}
.stiker svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(2px 3px 0 rgba(20, 33, 61, 0.9));
}
.s1 { --u: 3rem;    top: 1.5%;  left: 0; }
.s2 { --u: 2.6rem;  top: 2.5%;  right: 1%; }
.s3 { --u: 3.1rem;  top: 47%;   left: -0.2%; }
.s4 { --u: 3.1rem;  top: 54%;   right: -0.2%; }
.s5 { --u: 2.4rem;  top: 66%;   left: 3%; }
.s6 { --u: 2.8rem;  top: 8.5%;  left: 12%; }
.s7 { --u: 2.2rem;  top: 76%;   right: 2%; }
@media (max-width: 40rem) {
  .s6,
  .s7 {
    display: none;
  }
}
/* Penutup: pelekat hanya di sudut atas dan bawah, jauh daripada tajuk, harga dan butang. */
.penutup .stiker { --u: 2.2rem; }
@media (min-width: 40rem) {
  .penutup .stiker { --u: 2.8rem; }
}
.penutup .s1 { top: 0.5rem;    left: 4%;  right: auto; bottom: auto; }
.penutup .s2 { top: 0.5rem;    right: 4%; left: auto;  bottom: auto; }
.penutup .s3 { bottom: 0.6rem; left: 5%;  right: auto; top: auto; }
.penutup .s4 { bottom: 0.6rem; right: 5%; left: auto;  top: auto; }

/* Reben bergerak: Faham, Buat, Tawarkan, Teruskan. Tanpa gerakan ia menjadi sepanduk statik. */
.reben {
  overflow: hidden;
  padding-block: 0.75rem;
  background: var(--matahari);
  border-block: var(--garis);
}
.reben__baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0;
  font-family: var(--paparan);
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1;
  white-space: nowrap;
}
.reben__baris li {
  display: flex;
  align-items: center;
}
.reben__baris li::after {
  content: '\2726';
  padding-inline: 0.9em;
  font-size: 0.7em;
  color: var(--cili);
}
.reben__trek {
  display: flex;
  width: max-content;
}
.reben__trek .reben__baris {
  flex-wrap: nowrap;
  flex: none;
}

/* Perjalanan: Robi berjalan dari satu perhentian ke satu lagi */
.perjalanan {
  position: relative;
}
.perjalanan__robi {
  display: none;
}

/* "Ngam untuk anda": senarai yang boleh ditanda */
.ngam {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ngam__legend {
  display: block;
  width: 100%;
  margin: 0 0 1.1rem;
  padding: 0;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
}
.ngam__senarai {
  gap: 0.35rem;
}
.ngam__senarai li {
  display: block;
}
.ngam__senarai li::before {
  content: none;
}
.ngam__pilih {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.8rem;
  align-items: start;
  min-height: 2.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 14px;
  cursor: pointer;
}
.ngam__pilih input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ngam__kotak {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--kertas);
  border: 2px solid var(--dakwat);
  border-radius: 50%;
}
.ngam__kotak::after {
  content: '';
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E")
    center / 70% no-repeat;
  scale: 0;
}
.ngam__pilih input:checked + .ngam__kotak {
  background: var(--pandan);
}
.ngam__pilih input:checked + .ngam__kotak::after {
  scale: 1;
}
.ngam__pilih input:focus-visible + .ngam__kotak {
  outline: 4px solid var(--fokus);
  outline-offset: 3px;
}
.ngam__teks {
  padding-top: 0.15rem;
  line-height: 1.4;
  text-align: left;
}
.ngam__hasil {
  margin-top: 1.25rem;
  padding: 1.1rem 1rem 1.25rem;
  background: var(--kertas);
  border: var(--garis);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--dakwat);
  text-align: center;
}
.ngam__hasil[hidden] {
  display: none;
}
.ngam__pesan {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
}
.ngam__hasil .butang {
  margin-top: 1rem;
}
@media (hover: hover) {
  .ngam__pilih:hover {
    background: rgba(255, 255, 255, 0.4);
  }
}

/* Pelan 30 hari: kotak yang boleh ditanda */
.jejak {
  margin: 0 0 1.75rem;
  padding: 1rem;
  background: var(--langit);
  border: var(--garis);
  border-radius: 16px;
}
.jejak[hidden] {
  display: none;
}
.jejak__tajuk {
  margin-bottom: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}
.jejak__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
}
@media (min-width: 34rem) {
  .jejak__grid {
    grid-template-columns: repeat(10, 1fr);
  }
}
.jejak__hari {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  background: var(--kertas);
  color: var(--dakwat);
  border: 2px solid var(--dakwat);
  border-radius: 10px;
  font: 700 1rem/1 var(--teks);
  cursor: pointer;
}
.jejak__hari[aria-pressed='true'] {
  background: var(--pandan);
  font-size: 0;
}
.jejak__hari[aria-pressed='true']::before {
  content: '\2713';
  font-size: 1.3rem;
  line-height: 1;
}
.jejak__kira {
  margin-top: 0.8rem;
  font-weight: 700;
}
.jejak__kira strong {
  font-family: var(--paparan);
  font-weight: 400;
  font-size: 1.4rem;
}

/* Kemajuan Robi dalam demo */
.kemajuan-robi {
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 1rem;
}
.kemajuan-robi li {
  width: 1rem;
  height: 1rem;
  background: var(--kertas);
  border: 2px solid var(--dakwat);
  border-radius: 50%;
}
.kemajuan-robi li.siap {
  background: var(--pandan);
}

/* Konfeti dan riak */
.konfeti {
  position: fixed;
  z-index: 70;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--dakwat);
  border-radius: 2px;
  pointer-events: none;
}
.konfeti--bulat {
  border-radius: 50%;
}
.konfeti--garis {
  width: 1.1rem;
  height: 0.45rem;
  border-radius: 999px;
}
.riak {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(20, 33, 61, 0.22);
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
}

/* =====================================================================
   2. Gerakan (hanya bila html.gerak)
   ===================================================================== */

/* ---------- Bar skrol ---------- */
html.gerak .skrol {
  display: block;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 7px;
  background: var(--matahari);
  border-bottom: 2px solid var(--dakwat);
  transform-origin: left center;
  scale: var(--skrol, 0) 1;
  pointer-events: none;
}
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  html.gerak .skrol {
    scale: 0 1;
    animation: skrol-tumbuh linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes skrol-tumbuh {
  to {
    scale: 1 1;
  }
}

/* ---------- Kepala ---------- */
html.gerak .logo svg {
  transition: rotate 0.35s var(--melonjak), scale 0.35s var(--melonjak);
}
@media (hover: hover) {
  html.gerak .logo:hover svg {
    rotate: -10deg;
    scale: 1.12;
  }
}

/* ---------- Hero: satu urutan masuk yang diatur ---------- */
@keyframes jatuh-kata {
  from { translate: 0 -0.5em; rotate: -6deg; scale: 0.9; }
}
@keyframes pop-masuk {
  from { scale: 0.6; translate: 0 0.6rem; }
}
@keyframes naik-halus {
  from { opacity: 0; translate: 0 0.9rem; }
}
@keyframes kulit-masuk {
  from { scale: 0.78; rotate: -12deg; translate: 0 1.4rem; }
}
@keyframes terapung {
  from { translate: 0 0; rotate: 0deg; }
  to   { translate: 0 -0.7rem; rotate: 2.5deg; }
}
@keyframes sentuh {
  0%, 12%, 100% { rotate: 0deg; scale: 1; }
  3%  { rotate: -2.5deg; scale: 1.04; }
  6%  { rotate: 2.5deg; scale: 1.04; }
  9%  { rotate: -1.5deg; scale: 1.02; }
}
@keyframes cap-bulat {
  0%   { scale: 0; rotate: -90deg; }
  70%  { scale: 1.25; rotate: 8deg; }
  100% { scale: 1; rotate: 0deg; }
}

/* Opening text and prices render immediately, with no entrance delay. */
.kata:nth-child(2) { --k: 1; }
.kata:nth-child(3) { --k: 2; }
.kata:nth-child(4) { --k: 3; } /* "Pertama Anda" dan "Guna AI" satu blok: tiada perkataan tinggal seorang di satu baris */

.hero .senarai-tanda li:nth-child(2) { --k: 1; }
.hero .senarai-tanda li:nth-child(3) { --k: 2; }

/* Kulit ebook: masuk melantun, kemudian terapung perlahan. Condong mengikut penuding (js). */
.kulit-bungkus {
  position: relative;
  width: min(66%, 17rem);
  margin: 2rem auto 0;
}
.kulit-bungkus .hero__kulit {
  width: 100%;
  margin: 0;
}
.kilau {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
}
html.gerak .kulit-bungkus {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.35s var(--meluncur);
}
html.gerak .kulit-bungkus.condong {
  transition-duration: 0.08s;
}
html.gerak .kulit-bungkus .hero__kulit {
  animation: terapung 5.5s ease-in-out infinite alternate;
}
html.gerak .kilau {
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.6), transparent 55%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.25s;
}
html.gerak .kulit-bungkus.condong .kilau {
  opacity: 1;
}

/* Later button emphasis never delays initial visibility. */
html.gerak .hero .cta .butang {
  animation: sentuh 7s ease-in-out 4.5s infinite;
}
html.gerak .hero .cta .butang:hover,
html.gerak .hero .cta .butang:focus-visible {
  animation-play-state: paused;
}

/* Pelekat terapung */
@keyframes stiker-masuk {
  from { scale: 0; rotate: -120deg; }
}
@keyframes hanyut-a { 50% { translate: 0.35rem -0.8rem; rotate: 9deg; } }
@keyframes hanyut-b { 50% { translate: -0.45rem 0.7rem; rotate: -10deg; } }
@keyframes hanyut-c { 50% { translate: 0.3rem 0.5rem; rotate: 14deg; scale: 1.08; } }
@keyframes berkelip { 50% { scale: 0.7; rotate: 25deg; opacity: 0.55; } }
@keyframes paras { to { transform: translateY(calc(var(--paras, -40) * 1px)); } }

html.gerak .stiker {
  animation: stiker-masuk 0.7s var(--melonjak) backwards;
  animation-delay: calc(0.9s + var(--i, 0) * 0.1s);
}
html.gerak .stiker svg {
  animation: hanyut-a 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
.s2 { --i: 1; --paras: -70; }
.s3 { --i: 2; --paras: -30; }
.s4 { --i: 3; --paras: -90; }
.s5 { --i: 4; --paras: -50; }
.s6 { --i: 5; --paras: -60; }
.s7 { --i: 6; --paras: -110; }
.s1 { --paras: -40; }
html.gerak .s2 svg, html.gerak .s5 svg { animation-name: hanyut-b; animation-duration: 8.5s; }
html.gerak .s4 svg, html.gerak .s7 svg { animation-name: hanyut-c; animation-duration: 6.5s; }
html.gerak .s1 svg, html.gerak .s2 svg { animation-name: berkelip; animation-duration: 3.4s; }
html.gerak .penutup .s3 svg, html.gerak .penutup .s4 svg { animation-name: berkelip; animation-duration: 4.2s; }
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  html.gerak .hero .stiker {
    animation: stiker-masuk 0.7s var(--melonjak) backwards, paras linear both;
    animation-delay: calc(0.9s + var(--i, 0) * 0.1s), 0s;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0 110vh;
  }
}

/* ---------- Reben bergerak ---------- */
@keyframes reben-jalan {
  to { translate: -50% 0; }
}
html.gerak .reben--jalan .reben__trek {
  animation: reben-jalan 36s linear infinite;
}
html.gerak .reben--jalan:hover .reben__trek {
  animation-play-state: paused;
}

/* ---------- Butang: kilat, riak, magnet ---------- */
html.gerak .butang {
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease, translate 0.25s var(--meluncur);
}
html.gerak .butang--cta {
  translate: var(--tx, 0) var(--ty, 0);
}
html.gerak .butang--cta::before {
  content: '';
  position: absolute;
  inset: -10% auto -10% 0;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  translate: -180% 0;
  transform: skewX(-20deg);
  pointer-events: none;
  animation: kilat 5.5s ease-in-out 2.5s infinite;
}
@keyframes kilat {
  0%, 35%, 100% { translate: -180% 0; }
  65% { translate: 420% 0; }
}
@media (hover: hover) {
  html.gerak .butang--cta:hover::before {
    animation-duration: 1.1s;
  }
  html.gerak .butang--cta:hover::after {
    animation: anak-panah 0.6s ease-in-out infinite alternate;
  }
}
@keyframes anak-panah {
  to { translate: 0.35em 0; }
}
html.gerak .riak {
  animation: riak 0.6s ease-out forwards;
}
@keyframes riak {
  to { scale: 150; opacity: 0; }
}
/* Butang sedang bekerja (menunggu Billplz): jalur bergerak */
html.gerak #butang-bayar[aria-disabled='true'] {
  background-image: repeating-linear-gradient(-45deg, rgba(20, 33, 61, 0.14) 0 0.8rem, transparent 0.8rem 1.6rem);
  background-size: 2.26rem 100%;
  animation: jalur 0.7s linear infinite;
}
@keyframes jalur {
  to { background-position: 2.26rem 0; }
}

/* ---------- Gerakan masuk semasa skrol ----------
   Elemen disorok hanya selepas js/gerak.js bersedia (html.gerak-sedia), jadi jika skrip gagal,
   semuanya kekal kelihatan. Setiap jenis ada watak sendiri, bukan satu "naik" untuk semua. */
html.gerak.gerak-sedia [data-gerak]:not(.nampak) {
  opacity: 0;
}
html.gerak [data-gerak].nampak {
  animation-duration: 0.65s;
  animation-timing-function: var(--melonjak);
  animation-fill-mode: backwards;
  animation-delay: calc(var(--urutan, 0) * 85ms);
}
html.gerak [data-gerak='naik'].nampak   { animation-name: r-naik; }
html.gerak [data-gerak='pop'].nampak    { animation-name: r-pop; }
html.gerak [data-gerak='sisi'].nampak   { animation-name: r-sisi; }
html.gerak [data-gerak='putar'].nampak  { animation-name: r-putar; animation-duration: 0.8s; }
html.gerak [data-gerak='tajuk'].nampak  { animation-name: r-tajuk; animation-timing-function: var(--meluncur); }
[data-sisi='kanan'] { --dx: 2.5rem; --sudut: 4deg; }
@keyframes r-naik  { from { opacity: 0; translate: 0 1.6rem; } }
@keyframes r-pop   { from { opacity: 0; scale: 0.78; rotate: var(--sudut, -3deg); translate: 0 1rem; } }
@keyframes r-sisi  { from { opacity: 0; translate: var(--dx, -2.5rem) 0; rotate: var(--sudut, -4deg); } }
@keyframes r-putar { from { opacity: 0; scale: 0.2; rotate: -270deg; } }
@keyframes r-tajuk { from { opacity: 0; translate: 0 1rem; scale: 0.97; } }

/* Tajuk: penanda kuning menyapu masuk (latar cerah), garis bawah kuning menyapu (latar gelap) */
html.gerak .t2 .sorot {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
html.gerak .lajur--dakwat .t2 .sorot {
  background-image: linear-gradient(var(--matahari), var(--matahari));
  background-position: left 96%;
  background-size: 100% 0.1em;
}
html.gerak.gerak-sedia .t2:not(.nampak) .sorot {
  background-size: 0% 100%;
}
html.gerak.gerak-sedia .lajur--dakwat .t2:not(.nampak) .sorot {
  background-size: 0% 0.1em;
}
html.gerak .t2.nampak .sorot {
  animation: sorot-sapu 0.8s var(--meluncur) 0.3s backwards;
}
html.gerak .lajur--dakwat .t2.nampak .sorot {
  animation-name: sorot-garis;
}
@keyframes sorot-sapu  { from { background-size: 0% 100%; } }
@keyframes sorot-garis { from { background-size: 0% 0.1em; } }

/* Masalah: kad melantun, ikon bergoyang, dan menggeletar bila disentuh */
html.gerak .kad-senarai li.nampak span {
  animation: goyang-ikon 0.7s var(--melonjak) 0.45s backwards;
}
@keyframes goyang-ikon {
  from { rotate: -25deg; scale: 0.4; }
  45%  { rotate: 14deg; scale: 1.25; }
}
@media (hover: hover) {
  html.gerak .kad-senarai li {
    transition: translate 0.25s var(--melonjak), rotate 0.25s var(--melonjak), box-shadow 0.25s;
  }
  html.gerak .kad-senarai li:hover {
    translate: 0 -3px;
    rotate: -0.8deg;
    box-shadow: 4px 5px 0 var(--dakwat);
  }
  html.gerak .kad-senarai li:hover span {
    animation: goyang-ikon 0.5s var(--melonjak);
  }
}

/* Kos: kotak menang berdenyut perlahan selepas masuk */
html.gerak .banding__kotak--menang.nampak {
  animation: r-sisi 0.65s var(--melonjak) backwards, angguk 3.4s ease-in-out 1.2s infinite;
  animation-delay: calc(var(--urutan, 0) * 85ms), 1.2s;
}
@keyframes angguk {
  50% { scale: 1.045; }
}

/* Demo Robi: mata mengikut penuding, berkelip, melompat bila disentuh */
html.gerak .robi .mata {
  translate: calc(var(--mx, 0) * 4px) calc(var(--my, 0) * 3px);
  transition: translate 0.12s linear;
}
html.gerak .robi:not(.robi--kerja) .mata {
  animation: kelip-santai 4.6s ease-in-out infinite;
}
@keyframes kelip-santai {
  0%, 94%, 100% { scale: 1 1; }
  97% { scale: 1 0.12; }
}
html.gerak .robi {
  cursor: pointer;
}
html.gerak .robi--kerja {
  animation: getar 0.35s ease-in-out infinite alternate;
}
@keyframes getar {
  from { rotate: -2deg; }
  to   { rotate: 2deg; }
}
html.gerak .gelembung {
  transition: translate 0.2s var(--melonjak);
}
html.gerak .kemajuan-robi li.siap {
  animation: cap-bulat 0.4s var(--melonjak);
}

/* Perjalanan: perhentian aktif diterangkan, Robi berjalan ke sana */
html.gerak .perjalanan__robi {
  display: block;
  position: absolute;
  top: 0;
  right: -0.35rem;
  z-index: 2;
  width: 3.1rem;
  height: 3.35rem;
  pointer-events: none;
  translate: 0 var(--robi-y, 0px);
  transform-origin: 50% 100%;
  transition: translate 0.7s var(--melonjak);
  filter: drop-shadow(2px 3px 0 rgba(20, 33, 61, 0.9));
  animation: jalan-robi 0.5s ease-in-out infinite alternate;
}
@keyframes jalan-robi {
  from { rotate: -4deg; }
  to   { rotate: 4deg; }
}
html.gerak .langkah li {
  padding-right: 3.6rem;
  transition: background-color 0.35s, translate 0.45s var(--melonjak), box-shadow 0.35s;
}
html.gerak .langkah li::before {
  transition: scale 0.45s var(--melonjak), rotate 0.45s var(--melonjak), background-color 0.3s, color 0.3s;
}
html.gerak .langkah li.aktif {
  background: var(--matahari-muda);
  translate: 0.25rem -2px;
  box-shadow: 4px 5px 0 var(--dakwat);
}
html.gerak .langkah li.aktif::before {
  background: var(--matahari);
  color: var(--dakwat);
  box-shadow: inset 0 0 0 3px var(--dakwat);
  scale: 1.18;
  rotate: -8deg;
}

/* Dalam ebook: angka melantun, tick melukis, kotak pelan 30 hari bergelombang */
@media (hover: hover) {
  html.gerak .angka li {
    transition: translate 0.25s var(--melonjak), rotate 0.25s var(--melonjak);
  }
  html.gerak .angka li:hover {
    translate: 0 -4px;
    rotate: -1.5deg;
  }
}
html.gerak .senarai-tanda li.nampak::before {
  animation: cap-bulat 0.5s var(--melonjak) backwards;
  animation-delay: calc(var(--urutan, 0) * 85ms + 0.15s);
}
html.gerak .jejak.nampak .jejak__hari {
  animation: gelombang 0.5s var(--melonjak) backwards;
  animation-delay: calc(0.3s + var(--n, 0) * 22ms);
}
@keyframes gelombang {
  from { scale: 0.3; rotate: -20deg; opacity: 0; }
  60%  { scale: 1.15; }
}
html.gerak .jejak .jejak__hari[aria-pressed='true'] {
  animation: cop-hari 0.45s var(--melonjak);
}
@keyframes cop-hari {
  from { scale: 1.7; rotate: -25deg; }
  60%  { scale: 0.88; }
}
@media (hover: hover) {
  html.gerak .jejak__hari:hover {
    translate: 0 -2px;
    background: var(--matahari-muda);
  }
  html.gerak .jejak__hari[aria-pressed='true']:hover {
    background: var(--pandan);
  }
}
html.gerak .jejak__kira strong.bunyi,
html.gerak [data-jumlah-dipilih].bunyi {
  display: inline-block;
  animation: bunyi 0.45s var(--melonjak);
}
@keyframes bunyi {
  40% { scale: 1.2; rotate: -2deg; }
}

/* Ngam: kad hasil melantun muncul, tanda bulat melantun bila ditanda */
html.gerak .ngam__pilih input:checked + .ngam__kotak {
  animation: cap-bulat 0.4s var(--melonjak);
}
html.gerak .ngam__kotak::after {
  transition: scale 0.25s var(--melonjak);
}
html.gerak .ngam__hasil:not([hidden]) {
  animation: r-pop 0.5s var(--melonjak);
}

/* Included items use the existing stack entrance effect. */
html.gerak .tumpuk__harga s {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left 55% / 100% 2px no-repeat;
}
html.gerak .tumpuk li.nampak s {
  animation: coret 0.45s var(--meluncur) backwards;
  animation-delay: calc(var(--urutan, 0) * 85ms + 0.5s);
}
@keyframes coret {
  from { background-size: 0% 2px; }
}
html.gerak .tumpuk li.nampak .percuma {
  animation: cop 0.55s var(--melonjak) backwards;
  animation-delay: calc(var(--urutan, 0) * 85ms + 0.85s);
}
@keyframes cop {
  from { scale: 2.6; rotate: -22deg; opacity: 0; }
  55%  { scale: 0.88; opacity: 1; }
}
@media (hover: hover) {
  html.gerak .tumpuk li {
    transition: translate 0.25s var(--melonjak), rotate 0.25s var(--melonjak);
  }
  html.gerak .tumpuk li:hover {
    translate: 0 -3px;
    rotate: -0.5deg;
  }
  html.gerak .tumpuk__gambar {
    transition: rotate 0.3s var(--melonjak), scale 0.3s var(--melonjak);
  }
  html.gerak .tumpuk li:hover .tumpuk__gambar {
    rotate: -7deg;
    scale: 1.1;
  }
}
html.gerak .nilai-jumlah strong {
  background: linear-gradient(transparent 70%, rgba(255, 199, 44, 0.35) 70%) no-repeat left / 100% 100%;
}
html.gerak .nilai-jumlah.nampak strong {
  animation: sorot-sapu 0.7s var(--meluncur) 0.5s backwards;
}

/* Pakej: kad terbaik berkilau dan benderanya bergoyang */
html.gerak .kad--terbaik::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 199, 44, 0.4) 50%, transparent 62%) 200% 0 / 250% 100% no-repeat;
  pointer-events: none;
  animation: kilau-kad 6s ease-in-out 2s infinite;
}
@keyframes kilau-kad {
  0% { background-position: 200% 0; }
  30%, 100% { background-position: -100% 0; }
}
html.gerak .kad__bendera {
  transform-origin: right center;
  animation: goyang-bendera 3.2s ease-in-out infinite;
}
@keyframes goyang-bendera {
  0%, 100% { rotate: 0deg; }
  25% { rotate: 3deg; }
  75% { rotate: -2.5deg; }
}
html.gerak .kad.nampak .kad__harga {
  animation: bunyi 0.6s var(--melonjak) 0.5s backwards;
  transform-origin: left center;
}
@media (hover: hover) {
  html.gerak .kad {
    transition: translate 0.25s var(--melonjak), box-shadow 0.25s;
  }
  html.gerak .kad:hover {
    translate: 0 -5px;
  }
  html.gerak .kad--terbaik:hover {
    box-shadow: 0 13px 0 var(--dakwat);
  }
}

/* Borang: pilihan pakej melantun, ralat menggeletar, jumlah berdenyut bila bertukar */
html.gerak .pakej__pilihan input:checked + .pakej__kotak {
  animation: pilih-pop 0.4s var(--melonjak);
}
@keyframes pilih-pop {
  40% { scale: 1.025; }
}
html.gerak .pakej__nama::before {
  transition: background-color 0.2s, box-shadow 0.2s, scale 0.3s var(--melonjak);
}
html.gerak .pakej__pilihan input:checked + .pakej__kotak .pakej__nama::before {
  scale: 1.15;
}
html.gerak .medan input {
  transition: border-color 0.2s, box-shadow 0.2s;
}
html.gerak .medan input[aria-invalid='true'] {
  animation: goncang 0.45s ease-in-out;
}
@keyframes goncang {
  20% { translate: -7px 0; }
  40% { translate: 6px 0; }
  60% { translate: -4px 0; }
  80% { translate: 3px 0; }
}
html.gerak .medan__ralat:not(:empty),
html.gerak .borang__status:not(:empty) {
  animation: r-pop 0.35s var(--melonjak);
}

/* Pilihan kedai dalam demo: kapsul melantun bila dipilih */
html.gerak .cip span {
  transition: background-color 0.15s, color 0.15s, scale 0.25s var(--melonjak);
}
html.gerak .cip input:checked + span {
  animation: pilih-pop 0.4s var(--melonjak);
}
@media (hover: hover) {
  html.gerak .cip:hover span {
    scale: 1.06;
  }
}

/* Soalan lazim: buka tutup licin, ikon berputar */
html.gerak {
  interpolate-size: allow-keywords;
}
@supports (selector(::details-content)) {
  html.gerak .soalan details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.35s var(--meluncur), content-visibility 0.35s var(--meluncur) allow-discrete;
  }
  html.gerak .soalan details[open]::details-content {
    block-size: auto;
  }
}
html.gerak .soalan summary::after,
html.gerak .soalan details[open] summary::after {
  content: '+';
  transition: rotate 0.35s var(--melonjak), background-color 0.25s;
}
html.gerak .soalan details[open] summary::after {
  rotate: 135deg;
  background: var(--pandan);
}
@media (hover: hover) {
  html.gerak .soalan summary:hover::after {
    scale: 1.12;
  }
}

/* Butang melekat: naik melantun bila muncul */
html.gerak .lekat:not([hidden]) {
  animation: lekat-naik 0.55s var(--melonjak);
}
@keyframes lekat-naik {
  from { translate: 0 110%; }
}

/* Penutup: Robi terapung, melambai, berkelip, dan boleh disentuh */
html.gerak .penutup__robi {
  cursor: pointer;
  overflow: visible;
}
html.gerak .penutup__robi.nampak {
  animation: r-pop 0.7s var(--melonjak) backwards, terapung-robi 2.8s ease-in-out 0.9s infinite alternate;
}
@keyframes terapung-robi {
  from { translate: 0 0; rotate: -3deg; }
  to   { translate: 0 -0.6rem; rotate: 3deg; }
}
html.gerak .penutup__robi .tangan {
  transform-box: fill-box;
  transform-origin: 50% 8%;
  animation: lambai 4.2s ease-in-out 1.5s infinite;
}
@keyframes lambai {
  0%, 62%, 100% { rotate: 0deg; }
  68% { rotate: -50deg; }
  74% { rotate: -10deg; }
  80% { rotate: -50deg; }
  86% { rotate: -10deg; }
  92% { rotate: -35deg; }
}
html.gerak .penutup__robi .lampu {
  transform-box: fill-box;
  transform-origin: center;
  animation: lampu-melantun 1.4s ease-in-out infinite;
}
@keyframes lampu-melantun {
  50% { scale: 1.3; fill: var(--matahari); }
}

/* ---------- Halaman pengesahan pesanan: bayaran berjaya diraikan ---------- */
html.gerak [data-keadaan='dibayar']:not([hidden]) h1 {
  animation: r-pop 0.6s var(--melonjak) backwards;
}
html.gerak [data-keadaan='dibayar']:not([hidden]) .ringkasan div:not([hidden]) {
  animation: r-sisi 0.5s var(--melonjak) backwards;
  --dx: -1.5rem;
  --sudut: 0deg;
}
html.gerak [data-keadaan='dibayar']:not([hidden]) .ringkasan div:nth-child(1) { animation-delay: 0.25s; }
html.gerak [data-keadaan='dibayar']:not([hidden]) .ringkasan div:nth-child(2) { animation-delay: 0.35s; }
html.gerak [data-keadaan='dibayar']:not([hidden]) .ringkasan div:nth-child(3) { animation-delay: 0.45s; }
html.gerak #pautan-ebook:not([hidden]) {
  animation: pop-masuk 0.6s var(--melonjak) 0.6s backwards, sentuh 6s ease-in-out 3s infinite;
}
html.gerak .kertas__robi {
  transform-origin: 50% 100%;
  animation: terapung-robi 2.8s ease-in-out infinite alternate;
}