/* Lapisan gerak dan interaksi (laman utama dan halaman pengesahan).

   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.
   - Sedikit dan tenang, sesuai dengan laman yang profesional: satu urutan masuk di hero, satu detik pada
     rincian pakej (baris demi baris, harga dicoret, cop PERCUMA), dan gerakan yang menjawab tindakan pelawat
     (buka soalan, tanda kotak, tukar pakej, ralat borang). Tiada gelung hiasan. */

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

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

.kata {
  display: inline-block;
}

/* Bar kemajuan skrol */
.skrol {
  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 1rem;
  padding: 0;
  text-align: center;
  color: var(--kelabu);
  font-weight: 600;
  font-size: 0.9375rem;
}
.ngam__senarai {
  gap: 0.5rem;
}
.ngam__senarai li {
  display: block;
}
.ngam__senarai li::before {
  content: none;
}
.ngam__pilih {
  position: relative;
  display: grid;
  grid-template-columns: 1.375rem 1fr;
  gap: 0.875rem;
  align-items: start;
  padding: 0.875rem 1rem;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 10px;
  cursor: pointer;
}
.ngam__pilih:has(input:checked) {
  background: var(--pucuk);
  border-color: var(--daun);
}
.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: 1.375rem;
  height: 1.375rem;
  margin-top: 0.05rem;
  background: var(--kertas);
  border: 1.5px solid var(--garis-kuat);
  border-radius: 5px;
}
.ngam__kotak::after {
  content: '';
  width: 100%;
  height: 100%;
  background: var(--tanda-putih) center / 78% no-repeat;
  scale: 0;
}
.ngam__pilih input:checked + .ngam__kotak {
  background: var(--daun);
  border-color: var(--daun);
}
.ngam__pilih input:checked + .ngam__kotak::after {
  scale: 1;
}
.ngam__pilih input:focus-visible + .ngam__kotak {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}
.ngam__teks {
  line-height: 1.45;
}
.ngam__hasil {
  margin-top: 1rem;
  padding: 1.25rem;
  text-align: center;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-left: 4px solid var(--daun);
  border-radius: 10px;
}
.ngam__hasil[hidden] {
  display: none;
}
.ngam__pesan {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.ngam__hasil .butang {
  margin-top: 1rem;
}
@media (hover: hover) {
  .ngam__pilih:hover {
    border-color: var(--garis-kuat);
  }
}
.ngam__pilih:active {
  border-color: var(--kelabu);
}

/* Pelan 30 hari: kotak yang boleh ditanda */
.jejak {
  margin: 0 0 2rem;
  padding: 1.25rem;
  background: var(--kabus);
  border-radius: 12px;
}
.jejak[hidden] {
  display: none;
}
.jejak__tajuk {
  margin-bottom: 0.9rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.jejak__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.375rem;
}
@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(--kelabu);
  border: 1px solid var(--garis-kuat);
  border-radius: 6px;
  font: 600 0.875rem/1 var(--teks);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.jejak__hari[aria-pressed='true'] {
  background: var(--daun) var(--tanda-putih) center / 58% no-repeat;
  border-color: var(--daun);
  color: transparent;
}
@media (hover: hover) {
  .jejak__hari:hover {
    border-color: var(--dakwat);
  }
}
.jejak__hari:active {
  border-color: var(--dakwat);
}
.jejak__kira {
  margin-top: 0.9rem;
  text-align: center;
  color: var(--kelabu);
  font-weight: 600;
  font-size: 0.9375rem;
}
.jejak__kira strong {
  color: var(--dakwat);
  font-weight: 800;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* Kemajuan Robi dalam demo */
.kemajuan-robi {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.9rem;
}
.kemajuan-robi li {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--garis);
  border-radius: 50%;
}
.kemajuan-robi li.siap {
  background: var(--daun);
}

/* Konfeti (halaman pengesahan pesanan sahaja) */
.konfeti {
  position: fixed;
  z-index: 70;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 1px;
  pointer-events: none;
}
.konfeti--bulat {
  border-radius: 50%;
}
.konfeti--garis {
  width: 0.9rem;
  height: 0.3rem;
}

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

/* ---------- Bar skrol ---------- */
html.gerak .skrol {
  display: block;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  background: var(--daun);
  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;
  }
}

/* ---------- Hero: satu urutan masuk yang diatur ---------- */
@keyframes naik-kata {
  from { translate: 0 0.32em; }
}
@keyframes naik-halus {
  from { opacity: 0; translate: 0 0.75rem; }
}
/* Kulit ebook boleh jadi LCP di skrin lebar: transform sahaja, tanpa opacity */
@keyframes kulit-masuk {
  from { translate: 0 1.25rem; scale: 0.97; }
}

/* Tajuk: perkataan naik satu demi satu (transform sahaja, supaya teks LCP tidak tertangguh) */
html.gerak .tajuk--utama .kata {
  animation: naik-kata 0.7s var(--meluncur) backwards;
  animation-delay: calc(var(--k, 0) * 0.045s);
}
.kata:nth-child(2) { --k: 1; }
.kata:nth-child(3) { --k: 2; }
.kata:nth-child(5) { --k: 3; }
.kata:nth-child(6) { --k: 4; } /* "Website AI" satu blok, supaya "AI" tidak tinggal seorang di baris akhir */

html.gerak .hero .kicker {
  animation: naik-halus 0.5s var(--meluncur) backwards;
}
html.gerak .hero .intro {
  animation: naik-halus 0.6s var(--meluncur) 0.25s backwards;
}
html.gerak .hero__fakta {
  animation: naik-halus 0.6s var(--meluncur) 0.35s backwards;
}
html.gerak .hero .cta {
  animation: naik-halus 0.6s var(--meluncur) 0.45s backwards;
}
html.gerak .hero__kulit {
  animation: kulit-masuk 0.9s var(--meluncur) 0.15s backwards;
}

/* ---------- Gerakan masuk semasa skrol ----------
   Elemen disorok hanya selepas js/gerak.js bersedia (html.gerak-sedia), jadi jika skrip gagal,
   semuanya kekal kelihatan. Hanya rincian pakej yang guna ini (lihat PAPAR dalam gerak.js). */
html.gerak.gerak-sedia [data-gerak]:not(.nampak) {
  opacity: 0;
}
html.gerak [data-gerak].nampak {
  animation-duration: 0.55s;
  animation-timing-function: var(--meluncur);
  animation-fill-mode: backwards;
  animation-delay: calc(var(--urutan, 0) * 110ms);
}
html.gerak [data-gerak='baris'].nampak { animation-name: r-baris; }
@keyframes r-baris { from { opacity: 0; translate: 0 0.6rem; } }

/* Rincian pakej: harga asal dicoret, kemudian cop PERCUMA ditekan */
html.gerak .tumpuk__harga s {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left 55% / 100% 1.5px no-repeat;
}
html.gerak .tumpuk li.nampak s {
  animation: coret 0.4s var(--meluncur) backwards;
  animation-delay: calc(var(--urutan, 0) * 110ms + 0.35s);
}
@keyframes coret {
  from { background-size: 0% 1.5px; }
}
html.gerak .tumpuk li.nampak .percuma {
  animation: cop 0.45s var(--tegas) backwards;
  animation-delay: calc(var(--urutan, 0) * 110ms + 0.6s);
}
@keyframes cop {
  from { opacity: 0; scale: 1.6; rotate: -12deg; }
}

/* Butang sedang bekerja (menunggu Billplz): jalur bergerak */
html.gerak #butang-bayar[aria-disabled='true'] {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 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 yang menjawab tindakan pelawat ---------- */

/* Demo Robi: titik kemajuan terisi */
@keyframes isi-titik {
  from { scale: 0.4; }
}
html.gerak .kemajuan-robi li.siap {
  animation: isi-titik 0.35s var(--tegas);
}

/* Ngam: tanda muncul, kotak hasil muncul */
html.gerak .ngam__kotak::after {
  transition: scale 0.2s var(--tegas);
}
html.gerak .ngam__hasil:not([hidden]) {
  animation: naik-halus 0.35s var(--meluncur);
}

/* Pelan 30 hari: hari yang ditanda, dan kiraan */
@keyframes tekan {
  from { scale: 0.82; }
}
html.gerak .jejak .jejak__hari[aria-pressed='true'] {
  animation: tekan 0.3s var(--tegas);
}
@keyframes bunyi {
  40% { scale: 1.08; }
}
html.gerak .jejak__kira strong.bunyi,
html.gerak [data-jumlah-dipilih].bunyi {
  display: inline-block;
  animation: bunyi 0.35s var(--meluncur);
}

/* Borang: ralat menggeletar sedikit */
html.gerak .medan input {
  transition: border-color 0.15s, background-color 0.15s;
}
html.gerak .medan input[aria-invalid='true'] {
  animation: goncang 0.35s ease-in-out;
}
@keyframes goncang {
  25% { translate: -4px 0; }
  50% { translate: 3px 0; }
  75% { translate: -2px 0; }
}
html.gerak .medan__ralat:not(:empty),
html.gerak .borang__status:not(:empty) {
  animation: naik-halus 0.3s var(--meluncur);
}

/* Soalan lazim: buka tutup licin, ikon tambah menjadi pangkah */
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.3s var(--meluncur), content-visibility 0.3s 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 {
  background-image: var(--tambah);
  transition: rotate 0.3s var(--meluncur), border-color 0.15s;
}
html.gerak .soalan details[open] summary::after {
  rotate: 45deg;
}

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

/* ---------- Halaman pengesahan pesanan: bayaran berjaya ---------- */
html.gerak [data-keadaan='dibayar']:not([hidden]) h1 {
  animation: naik-halus 0.5s var(--meluncur) backwards;
}
html.gerak [data-keadaan='dibayar']:not([hidden]) .ringkasan div:not([hidden]) {
  animation: naik-halus 0.45s var(--meluncur) backwards;
}
html.gerak [data-keadaan='dibayar']:not([hidden]) .ringkasan div:nth-child(1) { animation-delay: 0.2s; }
html.gerak [data-keadaan='dibayar']:not([hidden]) .ringkasan div:nth-child(2) { animation-delay: 0.3s; }
html.gerak [data-keadaan='dibayar']:not([hidden]) .ringkasan div:nth-child(3) { animation-delay: 0.4s; }
html.gerak #pautan-ebook:not([hidden]) {
  animation: naik-halus 0.5s var(--meluncur) 0.5s backwards;
}