/* PCS26 borang daftar — identiti "kad pembaca": jubin suku kata di hero, kad ahli di hujung.
   Fon sama dengan app tracker (Fredoka + Nunito Sans) supaya satu keluarga jenama. */
:root {
  --navy: #0d2a5c;
  --navy-2: #173f80;
  --navy-3: #2a5aa8;
  --kuning: #ffc72c;
  --kuning-2: #ffe08a;
  --kertas: #eef3fb;
  --putih: #ffffff;
  --dakwat: #14213d;
  --dakwat-2: #56627a;
  --garis: #d3ddee;
  --hijau: #1f8f50;
  --merah: #c8362b;
  --display: "Fredoka", "Nunito Sans", system-ui, sans-serif;
  --teks: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-besar: 22px;
  --r-sederhana: 14px;
  --r-kecil: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kertas);
  color: var(--dakwat);
  font-family: var(--teks);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.lajur { max-width: 520px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.sorok { display: none; }
.jarak { margin-top: 16px; }
.lubang { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bantu { color: var(--dakwat-2); font-weight: 400; }
.kecil { font-size: 13px; margin: 6px 0 0; }
a { color: var(--navy-3); }

/* ───────── Hero ───────── */
.hero {
  background: var(--navy);
  color: var(--putih);
  padding: 18px 0 92px;
  position: relative;
  overflow: hidden;
}
.hero::after { /* garis buku latihan, sangat halus */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 35px, rgba(255,255,255,.045) 35px 36px);
}
.hero .lajur { position: relative; z-index: 1; }
.jenama { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 17px; }
.jenama img { border-radius: 9px; }

.jubin { display: flex; gap: 10px; margin: 30px 0 18px; }
.jubin span {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1;
  color: var(--navy); background: var(--kuning);
  border-radius: 18px;
  box-shadow: 0 6px 0 #c99a12;
}
.jubin .j1 { transform: rotate(-5deg); }
.jubin .j2 { transform: rotate(4deg) translateY(6px); background: var(--putih); box-shadow: 0 6px 0 #b9c7e0; }
@media (prefers-reduced-motion: no-preference) {
  .jubin span { animation: lompat .7s cubic-bezier(.2,1.4,.4,1) both; }
  .jubin .j2 { animation-delay: .12s; }
  @keyframes lompat { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
}

.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 8.4vw, 40px); line-height: 1.08; letter-spacing: -.01em;
  margin: 0 0 10px; max-width: 14ch;
}
.hero-teks { margin: 0; color: #c9d6ee; font-size: 16px; max-width: 36ch; }
.fakta { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fakta li {
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-sederhana);
  padding: 10px 10px 9px; display: flex; flex-direction: column;
}
.fakta b { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.2; }
.fakta span { font-size: 12.5px; color: #b6c5e3; }

/* ───────── Tiket harga ───────── */
.tiket {
  position: relative; margin-top: -64px; z-index: 2;
  background: var(--putih); border-radius: var(--r-besar);
  padding: 16px 18px 14px;
  box-shadow: 0 18px 40px -18px rgba(13,42,92,.45);
}
.tiket::before, .tiket::after { /* takuk tiket, sebaris dengan garis putus-putus */
  content: ""; position: absolute; top: 64px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--kertas);
}
.tiket::before { left: -11px; }
.tiket::after { right: -11px; }
.tiket-harga { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.tiket-kecil { font-size: 14px; color: var(--dakwat-2); order: 2; text-align: right; max-width: 9ch; line-height: 1.25; }
.tiket-angka { display: flex; align-items: baseline; gap: 10px; }
.tiket-angka b { font-family: var(--display); font-weight: 700; font-size: 44px; color: var(--navy); line-height: 1; }
.tiket-angka s { color: var(--dakwat-2); font-size: 15px; }
.tiket-isi {
  list-style: none; padding: 14px 0 0; margin: 0; border-top: 2px dashed var(--garis);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 13.5px; font-weight: 700; line-height: 1.3;
}
.tiket-isi li { padding-left: 20px; position: relative; }
.tiket-isi li::before {
  content: ""; position: absolute; left: 1px; top: 4px; width: 11px; height: 6px;
  border-left: 2.5px solid var(--hijau); border-bottom: 2.5px solid var(--hijau); transform: rotate(-45deg);
}
.tiket-nota { margin: 12px 0 0; padding: 9px 12px; background: var(--kertas); border-radius: var(--r-kecil); font-size: 14px; color: var(--dakwat-2); }
.tiket-nota b { color: var(--navy); }

/* ───────── Bonus ───────── */
.bonus {
  margin-top: 14px; display: flex; gap: 14px; align-items: center;
  background: var(--kuning); color: var(--navy); border-radius: var(--r-sederhana); padding: 12px 14px;
}
.bonus p { margin: 0; font-size: 14px; line-height: 1.45; }
.bonus-tarikh {
  flex: none; background: var(--navy); color: var(--kuning); border-radius: 12px;
  padding: 6px 10px; text-align: center; display: flex; flex-direction: column; line-height: 1.1;
}
.bonus-tarikh span { font-size: 11px; color: #fff; }
.bonus-tarikh b { font-family: var(--display); font-size: 19px; }

.muat { text-align: center; color: var(--dakwat-2); padding: 40px 0; }

/* ───────── Borang ───────── */
#borang { padding-bottom: 120px; }
.langkah {
  border: 0; margin: 18px 0 0; padding: 18px 16px 20px;
  background: var(--putih); border-radius: var(--r-besar);
  min-width: 0;
}
.langkah legend {
  float: left; width: 100%; padding: 0; margin: 0 0 6px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--navy);
}
.langkah legend + * { clear: both; }
.no {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 9px; background: var(--kertas); color: var(--navy);
  font-size: 16px; transition: background .2s, color .2s;
}
.langkah.lengkap .no { background: var(--hijau); color: #fff; font-size: 0; }
.langkah.lengkap .no::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-2px) rotate(-45deg); }

.soalan { display: block; font-weight: 700; font-size: 15px; margin: 18px 0 8px; }
.soalan .bantu { font-size: 13px; margin-left: 4px; }
.medan {
  width: 100%; font: inherit; font-size: 17px; padding: 13px 14px;
  border: 1.5px solid var(--garis); border-radius: var(--r-sederhana);
  background: var(--putih); color: var(--dakwat);
}
.medan::placeholder { color: #9aa6bc; }
.medan:focus { outline: none; border-color: var(--navy-3); box-shadow: 0 0 0 3px rgba(42,90,168,.18); }

/* Chip pilihan (cawangan, umur, saiz, sumber) */
.chip-grid { display: grid; gap: 8px; }
.chip-grid.dua { grid-template-columns: 1fr 1fr; }
.chip-grid.umur { grid-template-columns: repeat(5, 1fr); }
.chip-grid.saiz { grid-template-columns: repeat(5, 1fr); }
.chip, .kad-pilih {
  position: relative; cursor: pointer; user-select: none;
  border: 1.5px solid var(--garis); border-radius: var(--r-sederhana); background: var(--putih);
  transition: border-color .15s, background .15s, transform .1s;
}
.chip { display: grid; place-items: center; min-height: 48px; padding: 8px 10px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.2; }
.chip-grid.dua .chip { justify-items: start; text-align: left; padding-left: 14px; }
.chip input, .kad-pilih input { position: absolute; opacity: 0; pointer-events: none; }
.chip:active, .kad-pilih:active { transform: scale(.97); }
.chip.dipilih, .kad-pilih.dipilih { border-color: var(--navy); background: var(--navy); color: #fff; }
.chip.fokus, .kad-pilih.fokus { outline: 3px solid rgba(42,90,168,.45); outline-offset: 2px; }

.kad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kad-pilih { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.kad-pilih b { font-family: var(--display); font-weight: 600; font-size: 18px; }
.kad-pilih span { font-size: 13px; color: var(--dakwat-2); }
.kad-pilih.dipilih span { color: #c9d6ee; }
.kad-pilih.penuh { border-style: dashed; }
.kad-pilih.penuh span::after { content: " (penuh)"; color: var(--merah); font-weight: 700; }
.kad-pilih.dipilih.penuh span::after { color: var(--kuning); }

.info { font-size: 13.5px; color: var(--dakwat-2); background: var(--kertas); border-radius: var(--r-kecil); padding: 9px 12px; margin: 10px 0 0; }
.info.amaran { background: #fff3cf; color: #6b4e00; }

.setuju { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; font-size: 14.5px; border-bottom: 1px solid var(--kertas); cursor: pointer; }
.setuju:last-of-type { border-bottom: 0; }
.setuju input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--navy); }
.tag { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 6px; margin-left: 4px; white-space: nowrap; background: var(--kertas); color: var(--navy-3); }
.tag.wajib { background: #fde7e5; color: var(--merah); }
.notis { font-size: 13.5px; color: var(--dakwat-2); margin-top: 6px; }
.notis summary { cursor: pointer; color: var(--navy-3); font-weight: 700; padding: 6px 0; }

.ralat {
  display: none; margin-top: 18px; background: #fde7e5; color: #8e1f17;
  border-radius: var(--r-sederhana); padding: 12px 14px; font-size: 14.5px;
}
.ralat ul { margin: 4px 0 0 18px; padding: 0; }
.ralat:focus { outline: none; }

/* Bar hantar melekat di bawah */
.bar-hantar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--garis);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.bar-isi { display: flex; flex-direction: column; gap: 8px; }
.kemajuan { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dakwat-2); }
.kemajuan-teks { flex: none; }
.kemajuan-trek { flex: 1; height: 6px; background: var(--kertas); border-radius: 99px; overflow: hidden; }
.kemajuan-trek span { display: block; height: 100%; width: 0; background: var(--hijau); border-radius: 99px; transition: width .3s ease; }
button.utama {
  width: 100%; border: 0; border-radius: var(--r-sederhana); padding: 15px;
  background: var(--navy); color: #fff; font-family: var(--display); font-weight: 600; font-size: 19px; cursor: pointer;
}
button.utama.sedia { background: var(--kuning); color: var(--navy); }
button.utama:focus-visible { outline: 3px solid var(--navy-3); outline-offset: 2px; }
button.utama:disabled { opacity: .6; cursor: wait; }

/* ───────── Berjaya: kad pembaca ───────── */
.berjaya { display: none; padding: 22px 0 40px; }
.kad-ahli {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff; border-radius: var(--r-besar);
  padding: 0 20px 20px; box-shadow: 0 22px 44px -20px rgba(13,42,92,.6);
}
.kad-atas {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 -20px 16px; padding: 12px 20px; background: var(--kuning); color: var(--navy);
  font-family: var(--display); font-weight: 600;
}
.kad-atas b { font-size: 18px; }
.kad-label { margin: 0; color: #c9d6ee; font-size: 14px; }
.kad-id { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: .02em; margin: 2px 0 14px; }
.kad-data { margin: 0; display: grid; gap: 8px; }
.kad-data div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed rgba(255,255,255,.22); padding-top: 8px; }
.kad-data dt { color: #b6c5e3; font-size: 13.5px; }
.kad-data dd { margin: 0; font-weight: 700; text-align: right; }
.kad-cop {
  position: absolute; right: 16px; top: 62px; transform: rotate(-12deg);
  border: 2.5px solid var(--kuning); color: var(--kuning); border-radius: 10px;
  padding: 3px 10px; font-family: var(--display); font-weight: 700; font-size: 15px; opacity: .9;
}
.kad-cop.tunggu { border-color: #ffb4a8; color: #ffb4a8; }
@media (prefers-reduced-motion: no-preference) {
  .berjaya.tunjuk .kad-ahli { animation: kad .5s cubic-bezier(.2,1.2,.4,1) both; }
  .berjaya.tunjuk .kad-cop { animation: cop .35s .45s cubic-bezier(.3,1.6,.5,1) both; }
  @keyframes kad { from { opacity: 0; transform: translateY(24px) rotate(-2deg); } to { opacity: 1; transform: none; } }
  @keyframes cop { from { opacity: 0; transform: rotate(-12deg) scale(1.8); } to { opacity: .9; transform: rotate(-12deg) scale(1); } }
}
.berjaya-teks { margin: 18px 0 4px; font-size: 15.5px; }
.seterusnya { margin: 16px 0 0; padding: 14px 16px 14px 36px; background: var(--putih); border-radius: var(--r-sederhana); font-size: 14.5px; }
.seterusnya li { padding: 3px 0; }
a.wa {
  display: block; text-align: center; background: var(--hijau); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 18px; border-radius: var(--r-sederhana); padding: 14px; margin-top: 14px;
}

.kaki { text-align: center; color: var(--dakwat-2); font-size: 12.5px; padding-top: 6px; padding-bottom: 130px; }
.berjaya.tunjuk ~ .kaki, body.siap .kaki { padding-bottom: 28px; }

@media (min-width: 560px) {
  .langkah { padding: 22px 22px 24px; }
  .chip-grid.umur, .chip-grid.saiz { grid-template-columns: repeat(10, 1fr); }
}