/* =====================================================================
   Mulya Academy — "Buku Makmal" (revamp 2026)
   Konsep: buku latihan petak + buku makmal + nota cikgu.
   Token jenama: ungu #8615BB · ink #201332 · cyan #29C5D9 · lime #D6F36C
   Hierarki: 65% latar cerah · 25% ink · 10% aksen
   ===================================================================== */
:root {
  --ungu: #8615BB;
  --ungu-700: #6A0F95;
  --ungu-100: #F1E6FA;
  --ungu-50: #F8F2FD;
  --ink: #201332;
  --ink-80: #3A2D4D;
  --ink-60: #5E5370;
  --cyan: #29C5D9;
  --cyan-700: #0B6B78;
  --cyan-50: #EAFAFC;
  --lime: #D6F36C;
  --lime-50: #F8FDE6;
  --kertas: #FFFBF4;
  --garis: #E6DFD3;
  --wa: #25D366;
  --petak: rgba(41,197,217,.13);
  --petak-kuat: rgba(41,197,217,.24);
  --r: 8px;
  --r-lg: 14px;
  --bayang-keras: 4px 4px 0 var(--ink);
  --font: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --tangan: "Caveat", "Segoe Print", cursive;
  --lebar: 1200px;
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--kertas); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -.035em; }
h3 { font-size: 1.2rem; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--ungu); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--lebar), 100% - 32px); margin-inline: auto; }

/* ---------- Kertas graf & pelan biru ---------- */
.kertas {
  background-color: var(--kertas);
  background-image: linear-gradient(var(--petak-kuat) 1px, transparent 1px), linear-gradient(90deg, var(--petak-kuat) 1px, transparent 1px),
    linear-gradient(var(--petak) 1px, transparent 1px), linear-gradient(90deg, var(--petak) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px;
}
.pelan {
  background-color: var(--ink); color: #fff;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* ---------- Tipografi aksen ---------- */
.kod { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-60); }
.pelan .kod { color: #A99DBC; }
.tanda { background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pelan .tanda { background: none; color: var(--lime); }
.tangan { font-family: var(--tangan); font-weight: 600; color: var(--ungu); font-size: 1.6rem; line-height: 1.1; letter-spacing: 0; }
.pelan .tangan { color: var(--lime); }
.lead { font-size: 1.15rem; color: var(--ink-60); max-width: 60ch; }
.pelan .lead { color: #CFC6DD; }
.nota { font-size: .875rem; color: var(--ink-60); }
.pelan .nota { color: #A99DBC; }

/* Lukisan tangan (bulatan, anak panah) */
.bulat { position: relative; display: inline-block; white-space: nowrap; }
.bulat svg { position: absolute; left: -7%; top: -14%; width: 114%; height: 132%; overflow: visible; pointer-events: none; }
.bulat path, .lukis path { fill: none; stroke: var(--ungu); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; }
.pelan .lukis path { stroke: var(--lime); }
.hero .bulat path, .nampak .bulat path, .nampak .lukis path, .lukis.nampak path, .hero .lukis path { animation: lukis 1.3s .6s cubic-bezier(.6,.1,.3,1) forwards; }
@keyframes lukis { to { stroke-dashoffset: 0; } }

/* ---------- Seksyen ---------- */
.sec { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.sec--putih { background: #fff; }
.sec--ungu { background: var(--ungu-50); }
.sec-kepala { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 44px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.pelan .sec-kepala { border-bottom-color: rgba(255,255,255,.35); }
.sec-kepala .kod { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sec-kepala .kod b { color: var(--ungu); font-weight: 700; }
.pelan .sec-kepala .kod b { color: var(--lime); }
.sec-kepala h2 { margin: 0; max-width: 20ch; }
.sec-kepala .lead { margin: 14px 0 0; }
.sec-kepala .sisi { max-width: 300px; text-align: right; padding-bottom: 4px; }
@media (max-width: 760px) { .sec-kepala { grid-template-columns: 1fr; } .sec-kepala .sisi { text-align: left; } }

/* ---------- Butang ---------- */
.btn {
  --bg: var(--ungu); --fg: #fff; --bd: var(--ink); --sh: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px;
  border-radius: var(--r); border: 2px solid var(--bd); background: var(--bg); color: var(--fg);
  font: 800 .975rem/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 4px 4px 0 var(--sh); transition: transform .15s, box-shadow .15s, background .2s, color .2s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sh); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sh); }
.btn--wa { --bg: var(--wa); --fg: #062B14; }
.btn--lime { --bg: var(--lime); --fg: var(--ink); }
.btn--putih { --bg: #fff; --fg: var(--ink); }
.btn--garis { --bg: transparent; --fg: var(--ink); }
.pelan .btn { --bd: #fff; --sh: var(--lime); }
.pelan .btn--garis { --fg: #fff; --sh: rgba(255,255,255,.35); }
.btn--kecil { min-height: 44px; padding: 0 16px; font-size: .9rem; box-shadow: 3px 3px 0 var(--sh); }
.btn--penuh { width: 100%; }
.btn-baris { display: flex; flex-wrap: wrap; gap: 14px; }
.pautan { font-weight: 800; color: var(--ungu); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; display: inline-flex; align-items: center; gap: 6px; }
.pautan:hover { color: var(--ink); }
.pautan svg { width: 16px; height: 16px; transition: transform .2s; }
.pautan:hover svg { transform: translateX(4px); }
.pelan .pautan { color: var(--lime); }

/* ---------- Navigasi ---------- */
.kemajuan { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; background: var(--ungu); transform-origin: left; transform: scaleX(0); }
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(255,251,244,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 2px solid var(--ink); }
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 12px) top/100% 4px no-repeat, repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 60px) top/100% 9px no-repeat;
}
.nav-dalam { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.jenama { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.jenama img { width: 44px; height: 44px; object-fit: contain; }
.jenama b { display: block; font-size: 1.08rem; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.jenama small { display: block; font-family: var(--mono); font-size: .75rem; color: var(--ink-60); letter-spacing: .04em; text-transform: uppercase; }
.nav-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-menu a { display: block; padding: 8px 11px; text-decoration: none; font-weight: 700; font-size: .93rem; color: var(--ink-80); white-space: nowrap; position: relative; }
.nav-menu a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 4px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .25s; z-index: -1; }
.nav-menu a:hover::after, .nav-menu a[aria-current="page"]::after { transform: scaleX(1); }
.nav-menu a[aria-current="page"] { color: var(--ink); }
.nav-kanan { display: flex; align-items: center; gap: 8px; }
.troli-btn, .menu-btn { position: relative; width: 44px; height: 44px; border-radius: var(--r); border: 2px solid var(--ink); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background .2s; }
.troli-btn:hover, .menu-btn:hover { background: var(--lime); }
.troli-btn svg, .menu-btn svg { width: 21px; height: 21px; }
.troli-kira { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; border: 2px solid var(--ink); background: var(--ungu); color: #fff; font: 700 .75rem/1 var(--mono); display: grid; place-items: center; transform: scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.troli-kira.ada { transform: scale(1); }
.troli-kira.pop { animation: pop .4s; }
@keyframes pop { 50% { transform: scale(1.4); } }
.menu-btn { display: none; }
@media (max-width: 1180px) {
  .nav-menu { position: fixed; top: calc(var(--nav-h) + 14px); left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; background: var(--kertas); border: 2px solid var(--ink); box-shadow: var(--bayang-keras); border-radius: var(--r-lg); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s; }
  .nav-menu.buka { opacity: 1; visibility: visible; transform: none; }
  .nav-menu a { padding: 14px; font-size: 1.05rem; border-bottom: 1px dashed var(--garis); }
  .nav-menu li:last-child a { border-bottom: 0; }
  .nav-menu a::after { left: 14px; right: auto; width: 40px; bottom: 9px; }
  .menu-btn { display: grid; }
  .nav-kanan .btn--wa span { display: none; }
  .nav-kanan .btn--wa { width: 44px; padding: 0; }
}
@media (max-width: 400px) { .jenama small { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 7vw, 104px); overflow: hidden; border-bottom: 2px solid var(--ink); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.kod-atas { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; }
.kod-atas span { display: inline-flex; align-items: center; gap: 8px; }
.kod-atas span::before { content: ""; width: 8px; height: 8px; background: var(--ungu); }
.kod-atas span:nth-child(2)::before { background: var(--cyan); border-radius: 50%; }
.kod-atas span:nth-child(3)::before { background: var(--lime); transform: rotate(45deg); outline: 1.5px solid var(--ink); }
.hero h1 { margin-bottom: .32em; font-size: clamp(2.4rem, 4.3vw, 3.75rem); }
.hero h1 .baris { display: block; }
.hero .lead { font-size: 1.18rem; margin-bottom: 30px; color: var(--ink-80); }
.nota-hero { display: flex; align-items: flex-start; gap: 4px; margin: -14px 0 18px 32%; transform: rotate(-3deg); }
.nota-hero svg { width: 40px; height: 34px; flex: none; transform: scaleY(-1); margin-top: -10px; }
@media (max-width: 560px) { .nota-hero { margin-left: 18%; } }
.hero-statistik { display: flex; flex-wrap: wrap; margin-top: 38px; border: 2px solid var(--ink); background: #fff; width: fit-content; max-width: 100%; }
.hero-statistik div { padding: 12px 18px; border-right: 2px solid var(--ink); }
.hero-statistik div:last-child { border-right: 0; }
.hero-statistik b { display: block; font: 700 1.45rem/1.1 var(--mono); letter-spacing: -.03em; }
.hero-statistik span { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; color: var(--ink-60); letter-spacing: .04em; }
@media (max-width: 520px) { .hero-statistik div { padding: 10px 12px; } .hero-statistik b { font-size: 1.15rem; } }
.hero--kecil { padding: clamp(56px, 6vw, 88px) 0; }
.hero--kecil h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); max-width: 17ch; }
.hero--kecil .lead { margin-bottom: 0; }
.hero--kecil .tangan { margin-top: 18px; display: inline-block; transform: rotate(-2deg); }

/* Rajah (figura) */
.rajah { margin: 0; position: relative; }
.rajah-bingkai { background: #fff; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); border-radius: var(--r-lg); overflow: hidden; }
.rajah figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-family: var(--mono); font-size: .75rem; color: var(--ink-60); text-transform: uppercase; letter-spacing: .03em; }
.rajah figcaption b { color: var(--ink); font-weight: 700; }

/* Demo model AI belajar (regresi) */
.model-atas { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--ink); color: #fff; font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.model-atas .lampu { display: inline-flex; align-items: center; gap: 8px; }
.model-atas .lampu i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: kelip 1.2s infinite; }
@keyframes kelip { 50% { opacity: .3; } }
.model-kanvas { position: relative; aspect-ratio: 5/4; cursor: crosshair; touch-action: manipulation; background: #fff; }
.model-kanvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.model-bacaan { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-top: 2px solid var(--ink); font-family: var(--mono); }
.model-bacaan div { padding: 10px 14px; border-right: 1.5px dashed var(--garis); min-width: 0; }
.model-bacaan div:last-child { border-right: 0; }
.model-bacaan small { display: block; font-size: .75rem; text-transform: uppercase; color: var(--ink-60); letter-spacing: .05em; }
.model-bacaan b { font-size: .92rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.model-bacaan .persamaan b { color: var(--ungu); }
.model-alat { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-top: 2px solid var(--ink); background: var(--lime-50); }
.model-alat p { margin: 0; font-size: .85rem; color: var(--ink-80); }
.model-alat button { min-height: 38px; padding: 0 12px; border: 2px solid var(--ink); background: #fff; border-radius: 6px; font: 700 .76rem var(--mono); text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.model-alat button:hover { background: var(--lime); }
@media (max-width: 480px) { .model-bacaan { grid-template-columns: 1fr 1fr; } .model-bacaan .persamaan { grid-column: 1 / -1; border-right: 0; border-bottom: 1.5px dashed var(--garis); } }
.label-tangan { position: absolute; z-index: 2; pointer-events: none; display: flex; align-items: flex-end; gap: 2px; }
.label-tangan svg { width: 42px; height: 40px; }
.label-tangan--atas { top: -46px; right: 4%; transform: rotate(3deg); }
.label-tangan--atas svg { margin-bottom: -22px; }

/* ---------- Pita formula ---------- */
.pita { background: var(--ink); color: #fff; overflow: hidden; border-bottom: 2px solid var(--ink); }
.pita-jalur { display: flex; width: max-content; animation: jalan 55s linear infinite; }
.pita-jalur span { display: inline-flex; align-items: center; gap: 28px; padding: 15px 28px 15px 0; font: 500 1.02rem var(--mono); white-space: nowrap; }
.pita-jalur span::after { content: "+"; color: var(--lime); font-weight: 700; }
.pita-jalur span:nth-child(3n+2) { color: var(--cyan); }
.pita-jalur span:nth-child(3n) { color: #E3C2F7; }
.pita:hover .pita-jalur { animation-play-state: paused; }
@keyframes jalan { to { transform: translateX(-50%); } }

/* ---------- Jadual Berkala Mulya ---------- */
.penapis-audiens { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; align-items: center; }
.penapis-audiens > .kod { margin-right: 6px; }
.penapis-audiens button { min-height: 44px; padding: 0 15px; border: 2px solid var(--ink); background: #fff; border-radius: var(--r); cursor: pointer; font: 700 .92rem var(--font); color: var(--ink); transition: background .2s, transform .15s, box-shadow .15s; box-shadow: 3px 3px 0 var(--ink); }
.penapis-audiens button:hover { background: var(--lime-50); }
.penapis-audiens button[aria-pressed="true"] { background: var(--ink); color: var(--lime); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.berkala { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .berkala { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .berkala { grid-template-columns: 1fr; } }
.unsur {
  --warna: var(--ungu); --latar: var(--ungu-50);
  position: relative; display: grid; grid-template-columns: 92px 1fr; min-height: 164px; text-decoration: none; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-lg); background: #fff; overflow: hidden; box-shadow: 4px 4px 0 var(--ink);
  transition: transform .25s, box-shadow .25s, opacity .35s, filter .35s;
}
a.unsur:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.unsur.malap, .unsur.malap.nampak { opacity: .28; filter: grayscale(1); box-shadow: 2px 2px 0 var(--ink); }
.unsur.terang { animation: cas .8s both; }
@keyframes cas { 0% { outline: 0 solid var(--lime); } 35% { outline: 7px solid var(--lime); } 100% { outline: 0 solid transparent; } }
.unsur .blok { background: var(--latar); border-right: 2px solid var(--ink); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.unsur .no { font: 700 .8rem var(--mono); color: var(--ink-60); }
.unsur .simbol { font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--warna); }
.unsur .jisim { font: 500 .75rem var(--mono); color: var(--ink-60); text-transform: uppercase; line-height: 1.3; }
.unsur .isi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.unsur h3 { margin: 0; font-size: 1.06rem; }
.unsur p { margin: 0; font-size: .9rem; color: var(--ink-60); line-height: 1.5; }
.unsur .status-pil { margin-top: auto; align-self: flex-start; }
.unsur--cyan { --warna: var(--cyan-700); --latar: var(--cyan-50); }
.unsur--lime { --warna: #5E7A06; --latar: var(--lime-50); }
.unsur--ink { --warna: var(--lime); --latar: var(--ink); }
.unsur--ink .no, .unsur--ink .jisim { color: #A99DBC; }
.status-pil { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 4px; font: 700 .75rem var(--mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; border: 1.5px solid currentColor; }
.status-pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pil.aktif { color: #1F7A3A; background: #EAF7EF; }
.status-pil.minta { color: var(--cyan-700); background: var(--cyan-50); }
.status-pil.datang { color: #8A5A00; background: #FFF6DD; }
.petunjuk { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 24px; align-items: center; }

/* ---------- Bab (teras) ---------- */
.bab-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .bab-grid { grid-template-columns: 1fr; } }
.senarai-bab { list-style: none; margin: 0; padding: 0; counter-reset: bab; }
.senarai-bab li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; border-top: 1.5px solid var(--ink); }
.senarai-bab li:last-child { border-bottom: 1.5px solid var(--ink); }
.senarai-bab li::before { counter-increment: bab; content: "0" counter(bab); font: 700 2rem/1 var(--mono); color: var(--ungu); }
.senarai-bab li:nth-child(2)::before { color: var(--cyan-700); }
.senarai-bab li:nth-child(3)::before { color: #5E7A06; }
.senarai-bab h3 { margin: 0 0 4px; font-size: 1.28rem; }
.senarai-bab p { margin: 0; color: var(--ink-60); }
.polaroid { position: relative; margin: 0; background: #fff; padding: 10px 10px 0; border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.polaroid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.polaroid figcaption { font-family: var(--tangan); font-size: 1.35rem; color: var(--ink-80); padding: 6px 4px 8px; }
.polaroid::before, .polaroid::after { content: ""; position: absolute; width: 84px; height: 24px; background: rgba(214,243,108,.8); top: -11px; z-index: 1; }
.polaroid::before { left: 16px; transform: rotate(-6deg); }
.polaroid::after { right: 16px; transform: rotate(5deg); }
.susunan-foto { position: relative; padding: 14px 12% 70px 0; }
.susunan-foto .polaroid:first-child { transform: rotate(-2.5deg); }
.susunan-foto .polaroid:nth-child(2) { position: absolute; width: 50%; right: 0; bottom: 0; transform: rotate(4deg); }
.susunan-foto .polaroid:nth-child(2) img { aspect-ratio: 1; }

/* ---------- Demo AI: teka perkataan seterusnya ---------- */
.ai-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .ai-grid { grid-template-columns: 1fr; } }
.token-demo { border: 2px solid #fff; border-radius: var(--r-lg); background: #140B22; box-shadow: 8px 8px 0 var(--lime); overflow: hidden; }
.token-atas { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1.5px solid rgba(255,255,255,.2); font: 500 .75rem var(--mono); color: #A99DBC; text-transform: uppercase; }
.token-ayat { padding: 22px 18px 10px; font-size: clamp(1.1rem, 2.2vw, 1.45rem); font-weight: 700; line-height: 1.5; min-height: 120px; color: #fff; }
.token-ayat .tok { display: inline-block; padding: 0 4px; margin: 2px 1px; border-radius: 3px; background: rgba(255,255,255,.07); border-bottom: 2px solid rgba(255,255,255,.22); }
.token-ayat .tok.baru { background: var(--lime); color: var(--ink); border-color: var(--ink); animation: masuk .35s; }
@keyframes masuk { from { transform: translateY(8px); opacity: 0; } }
.token-ayat .kursor { display: inline-block; width: 10px; height: 1.05em; background: var(--lime); vertical-align: -3px; margin-left: 2px; animation: kelip 1s steps(1) infinite; }
.token-calon { padding: 4px 18px 18px; display: grid; gap: 8px; }
.calon { display: grid; grid-template-columns: 130px 1fr 48px; gap: 10px; align-items: center; font: 500 .88rem var(--mono); color: #E8E1F2; }
.calon .bar { height: 14px; background: rgba(255,255,255,.08); overflow: hidden; }
.calon .bar i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.calon.dipilih { color: var(--lime); font-weight: 700; }
.calon.dipilih .bar i { background: var(--lime); }
.calon .pct { text-align: right; color: #A99DBC; }
.token-bawah { padding: 12px 18px; border-top: 1.5px solid rgba(255,255,255,.2); font-size: .86rem; color: #CFC6DD; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.token-bawah button { min-height: 40px; padding: 0 12px; border: 1.5px solid #fff; border-radius: 6px; background: transparent; color: #fff; font: 700 .76rem var(--mono); text-transform: uppercase; cursor: pointer; }
.token-bawah button:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
@media (max-width: 520px) { .calon { grid-template-columns: 96px 1fr 42px; font-size: .78rem; } }
.ikrar { list-style: none; margin: 26px 0 0; padding: 0; }
.ikrar li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 15px 0; border-top: 1px dashed rgba(255,255,255,.28); }
.ikrar li:last-child { border-bottom: 1px dashed rgba(255,255,255,.28); }
.ikrar b { font: 700 1rem var(--mono); color: var(--lime); }
.ikrar h3 { margin: 0 0 2px; font-size: 1.05rem; color: #fff; }
.ikrar p { margin: 0; color: #CFC6DD; font-size: .95rem; }
.lencana-cadangan { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1.5px dashed currentColor; border-radius: 4px; font: 700 .75rem var(--mono); text-transform: uppercase; color: #8A5A00; background: #FFF6DD; margin-bottom: 18px; }
.pelan .lencana-cadangan { color: #FFD66B; background: transparent; }

/* ---------- Sistem orbit pakej ---------- */
.orbit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .orbit-grid { grid-template-columns: 1fr; } }
.sistem { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin-inline: auto; }
.sistem svg { width: 100%; height: 100%; overflow: visible; }
.sistem .lintasan { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .45; transition: stroke .3s, opacity .3s, stroke-width .3s; }
.sistem .lintasan.aktif { stroke: var(--ungu); stroke-dasharray: none; stroke-width: 2.5; opacity: 1; }
.sistem .putar { transform-origin: 260px 260px; animation: putar linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
.sistem .planet { cursor: pointer; }
.sistem .planet circle { stroke: var(--ink); stroke-width: 2.5; transition: r .3s; }
.sistem .planet text { font: 700 11px var(--mono); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.sistem .teras-label { font: 800 15px var(--font); fill: var(--ink); text-anchor: middle; }
.sistem .teras-kod { font: 500 9px var(--mono); fill: var(--ink-60); text-anchor: middle; letter-spacing: .05em; }
.pilih-pakej { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.pilih-pakej button { text-align: left; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: background .2s, transform .15s, box-shadow .15s; box-shadow: 3px 3px 0 var(--ink); }
.pilih-pakej button b { display: block; font-size: 1.05rem; }
.pilih-pakej button small { font: 500 .75rem var(--mono); color: var(--ink-60); text-transform: uppercase; }
.pilih-pakej button[aria-pressed="true"] { background: var(--ink); color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pilih-pakej button[aria-pressed="true"] small { color: var(--lime); }
.butiran-pakej { border: 2px solid var(--ink); border-radius: var(--r-lg); background: #fff; padding: 24px; box-shadow: 6px 6px 0 var(--ungu); }
.butiran-pakej h3 { font-size: 1.6rem; margin-bottom: 4px; }
.butiran-pakej p { color: var(--ink-60); }
.butiran-pakej .spek { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.butiran-pakej .spek span { font: 700 .76rem var(--mono); padding: 5px 10px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--lime-50); }
.meteor-baris { margin-top: 18px; padding: 16px 18px; border: 2px dashed var(--ungu); border-radius: var(--r-lg); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; background: var(--ungu-50); }
.meteor-baris p { margin: 0; max-width: 46ch; font-size: .95rem; color: var(--ink-80); }

/* ---------- Kad umum ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.kad { background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 24px; position: relative; transition: transform .2s, box-shadow .2s; }
.kad:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.kad p { color: var(--ink-60); margin: 0; }
.kad .kod { display: block; margin-bottom: 10px; color: var(--ungu); font-weight: 700; }
.pelan .kad { background: transparent; border-color: rgba(255,255,255,.5); }
.pelan .kad:hover { box-shadow: 5px 5px 0 var(--lime); }
.pelan .kad p { color: #CFC6DD; }
.pelan .kad .kod { color: var(--lime); }
.ikon { width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; margin-bottom: 16px; background: var(--ungu-50); color: var(--ungu); border: 2px solid var(--ink); }
.ikon svg { width: 24px; height: 24px; }
.ikon--cyan { background: var(--cyan-50); color: var(--cyan-700); }
.ikon--lime { background: var(--lime); color: var(--ink); }
.ikon--ink { background: var(--ink); color: var(--lime); }

/* Kedai teaser */
.kategori { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 6px 6px 0 var(--ink); }
.kategori a { padding: 24px 22px; text-decoration: none; border-right: 2px solid var(--ink); display: flex; flex-direction: column; gap: 8px; min-height: 220px; transition: background .2s; position: relative; }
.kategori a:last-child { border-right: 0; }
.kategori a:hover { background: var(--lime-50); }
.kategori .ikon { margin-bottom: auto; }
.kategori h3 { margin: 12px 0 0; }
.kategori p { margin: 0; color: var(--ink-60); font-size: .92rem; }
.kategori .kod { position: absolute; top: 22px; right: 20px; }
@media (max-width: 900px) { .kategori { grid-template-columns: repeat(2, 1fr); } .kategori a:nth-child(2) { border-right: 0; } .kategori a:nth-child(-n+2) { border-bottom: 2px solid var(--ink); } }
@media (max-width: 480px) { .kategori { grid-template-columns: 1fr; } .kategori a { border-right: 0; border-bottom: 2px solid var(--ink); min-height: 0; } .kategori a:last-child { border-bottom: 0; } }

/* Galeri (helaian kontak) */
.helaian { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 800px) { .helaian { grid-template-columns: repeat(2, 1fr); } }
.helaian figure { margin: 0; background: #fff; border: 1.5px solid var(--ink); padding: 8px 8px 0; transition: transform .25s, box-shadow .25s; }
.helaian figure:nth-child(odd) { transform: rotate(-1.2deg); }
.helaian figure:nth-child(even) { transform: rotate(1deg); }
.helaian figure:hover { transform: rotate(0) scale(1.03); z-index: 2; box-shadow: 6px 6px 0 var(--ink); position: relative; }
.helaian img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.helaian figcaption { font: 500 .75rem var(--mono); text-transform: uppercase; padding: 8px 2px 10px; color: var(--ink-60); display: flex; justify-content: space-between; gap: 8px; }

/* Langkah */
.langkah { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); border-radius: var(--r-lg); background: #fff; counter-reset: l; overflow: hidden; }
.langkah > div { padding: 24px; border-right: 2px solid var(--ink); }
.langkah > div:last-child { border-right: 0; }
.langkah > div::before { counter-increment: l; content: "LANGKAH " counter(l, decimal-leading-zero); display: block; font: 700 .75rem var(--mono); color: var(--ungu); margin-bottom: 14px; }
.langkah h3 { margin-bottom: 6px; }
.langkah p { margin: 0; color: var(--ink-60); font-size: .95rem; }
@media (max-width: 900px) { .langkah { grid-template-columns: repeat(2, 1fr); } .langkah > div:nth-child(2) { border-right: 0; } .langkah > div:nth-child(-n+2) { border-bottom: 2px solid var(--ink); } }
@media (max-width: 520px) { .langkah { grid-template-columns: 1fr; } .langkah > div { border-right: 0; border-bottom: 2px solid var(--ink); } .langkah > div:last-child { border-bottom: 0; } }

/* FAQ */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 2px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 4px; font-weight: 800; font-size: 1.06rem; display: grid; grid-template-columns: 56px 1fr 32px; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .kod { color: var(--ungu); }
.faq summary::after { content: "+"; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 6px; display: grid; place-items: center; font: 700 1.1rem var(--mono); transition: transform .25s, background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--lime); }
.faq summary:hover { color: var(--ungu); }
.faq .jawab { padding: 0 4px 22px 72px; color: var(--ink-60); max-width: 80ch; }
@media (max-width: 560px) { .faq summary { grid-template-columns: 38px 1fr 32px; font-size: 1rem; } .faq .jawab { padding-left: 4px; } }

/* ---------- Perkhidmatan (halaman) ---------- */
.blok-servis { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 64px); padding: 56px 0; border-top: 2px solid var(--ink); scroll-margin-top: 100px; }
.blok-servis:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .blok-servis { grid-template-columns: 1fr; } }
.blok-servis .unsur { grid-template-columns: 1fr; min-height: 0; position: sticky; top: 100px; align-self: start; }
.blok-servis .unsur .blok { border-right: 0; border-bottom: 2px solid var(--ink); padding: 18px; min-height: 150px; }
.blok-servis .unsur .simbol { font-size: 4.4rem; }
@media (max-width: 900px) { .blok-servis .unsur { position: static; max-width: 360px; } }
.blok-servis h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 24ch; }
.tawaran { display: grid; margin: 20px 0 24px; border-top: 1.5px solid var(--ink); }
.tawaran > div { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 13px 2px; border-bottom: 1.5px solid var(--ink); }
.tawaran b { display: block; }
.tawaran small { color: var(--ink-60); font-size: .9rem; }
@media (max-width: 480px) { .tawaran > div { grid-template-columns: 1fr; } .tawaran .status-pil { justify-self: start; } }
.untuk-siapa { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; align-items: center; }
.untuk-siapa span:not(.kod) { font-weight: 700; font-size: .85rem; padding: 3px 10px; border-radius: 4px; background: var(--ungu-50); border: 1.5px solid var(--ungu-100); }
.foto-servis { border: 2px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; margin-top: 24px; }
.foto-servis img { width: 100%; aspect-ratio: 16/7; object-fit: cover; }

/* ---------- Tuisyen: tab & subjek ---------- */
.tab-senarai { display: flex; flex-wrap: wrap; border: 2px solid var(--ink); border-radius: var(--r); width: fit-content; max-width: 100%; margin-bottom: 36px; overflow: hidden; background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.tab-senarai button { min-height: 48px; padding: 0 20px; border: 0; border-right: 2px solid var(--ink); background: none; font: 700 .95rem var(--font); color: var(--ink-80); cursor: pointer; transition: background .2s; }
.tab-senarai button:last-child { border-right: 0; }
.tab-senarai button:hover { background: var(--lime-50); }
.tab-senarai button[aria-selected="true"] { background: var(--ink); color: var(--lime); }
@media (max-width: 560px) { .tab-senarai { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .tab-senarai button { padding: 0 8px; } .tab-senarai button:nth-child(2) { border-right: 0; } .tab-senarai button:nth-child(-n+2) { border-bottom: 2px solid var(--ink); } }
.panel { display: none; }
.panel.aktif { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: start; animation: naik .4s; }
@media (max-width: 900px) { .panel.aktif { grid-template-columns: 1fr; } }
@keyframes naik { from { opacity: 0; transform: translateY(10px); } }
.subjek-baris { display: grid; margin: 22px 0; border-top: 1.5px solid var(--ink); }
.subjek { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 13px 2px; border-bottom: 1.5px solid var(--ink); }
.subjek > div { min-width: 0; }
.subjek .kodsub { font: 700 .75rem var(--mono); padding: 6px 6px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--ungu-50); color: var(--ungu); text-align: center; }
.subjek.sains .kodsub { background: var(--cyan-50); color: var(--cyan-700); }
.subjek.addm .kodsub { background: var(--lime-50); color: #5E7A06; }
.subjek b { display: block; }
.subjek small { color: var(--ink-60); }
@media (max-width: 560px) { .subjek { grid-template-columns: 84px 1fr; } .subjek .status-pil { grid-column: 2; justify-self: start; } }
.senarai-semak { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.senarai-semak li { display: flex; gap: 12px; color: var(--ink-80); }
.senarai-semak li svg { flex: none; width: 22px; height: 22px; color: var(--ungu); margin-top: 1px; }
.pelan .senarai-semak li { color: #E8E1F2; }
.pelan .senarai-semak li svg { color: var(--lime); }
.jadual-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: var(--r-lg); background: #fff; box-shadow: 6px 6px 0 var(--ink); }
table.jadual { width: 100%; border-collapse: collapse; min-width: 640px; }
.jadual th, .jadual td { padding: 15px 18px; text-align: left; border-bottom: 1.5px solid var(--garis); }
.jadual thead th { background: var(--ink); color: var(--lime); font: 700 .75rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.jadual tbody tr:hover { background: var(--lime-50); }
.jadual td:first-child { font-weight: 800; }

/* ---------- Tentang ---------- */
.dua-lajur { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .dua-lajur { grid-template-columns: 1fr; } }
.garis-masa { display: grid; border-left: 2px solid var(--ink); margin-left: 8px; }
.garis-masa .titik { position: relative; padding: 0 0 26px 28px; }
.garis-masa .titik::before { content: ""; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; background: var(--ungu); border: 2px solid var(--ink); }
.garis-masa .titik:nth-child(2)::before { background: var(--cyan); border-radius: 50%; }
.garis-masa .titik:nth-child(3)::before { background: var(--lime); transform: rotate(45deg); }
.garis-masa .titik:nth-child(4)::before { background: #fff; border-style: dashed; }
.garis-masa .titik:last-child { padding-bottom: 0; }
.garis-masa .kod { color: var(--ungu); font-weight: 700; }
.garis-masa h3 { margin: 4px 0; font-size: 1.15rem; }
.garis-masa p { color: var(--ink-60); margin: 0; }
.cabang { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 6px 6px 0 var(--ink); }
.cabang > div { padding: 28px; border-right: 2px solid var(--ink); }
.cabang > div:last-child { border-right: 0; }
.cabang p { color: var(--ink-60); margin: 0; }
.cabang .simbol-kecil { font: 800 2.4rem/1 var(--font); color: var(--ungu); letter-spacing: -.05em; margin-bottom: 14px; display: block; }
.cabang > div:nth-child(2) .simbol-kecil { color: var(--cyan-700); }
.cabang > div:nth-child(3) .simbol-kecil { color: #5E7A06; }
@media (max-width: 900px) { .cabang { grid-template-columns: 1fr; } .cabang > div { border-right: 0; border-bottom: 2px solid var(--ink); } .cabang > div:last-child { border-bottom: 0; } }

/* ---------- Hubungi & borang ---------- */
.hubungi-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .hubungi-grid { grid-template-columns: 1fr; } }
.info-kad { border-radius: var(--r-lg); padding: 30px; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--lime); }
.info-baris { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px dashed rgba(255,255,255,.22); }
.info-baris:last-child { border-bottom: 0; }
.info-baris .ikon { margin: 0; width: 46px; height: 46px; background: transparent; color: var(--lime); border-color: rgba(255,255,255,.45); }
.info-baris small { display: block; font: 500 .75rem var(--mono); text-transform: uppercase; color: #A99DBC; letter-spacing: .04em; }
.info-baris a, .info-baris span { color: #fff; text-decoration: none; font-weight: 700; }
.info-baris a:hover { color: var(--lime); }
.peta { border: 2px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; min-height: 340px; background: var(--ungu-50); box-shadow: 6px 6px 0 var(--ink); }
.peta iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.borang { display: grid; gap: 16px; }
.borang .dua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .borang .dua { grid-template-columns: 1fr; } }
.medan { display: grid; gap: 6px; }
.medan label { font: 700 .75rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.medan input, .medan select, .medan textarea { width: 100%; min-height: 48px; border-radius: 6px; border: 2px solid var(--ink); padding: 11px 13px; font: 500 1rem var(--font); color: var(--ink); background: #fff; }
.medan textarea { min-height: 110px; resize: vertical; }
.medan input:focus, .medan select:focus, .medan textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--ungu); }
.medan .ralat { color: #B42318; font-size: .85rem; display: none; }
.medan.salah input, .medan.salah select { border-color: #B42318; }
.medan.salah .ralat { display: block; }

/* ---------- CTA ---------- */
.cta { border: 2px solid var(--ink); border-radius: var(--r-lg); padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; box-shadow: 10px 10px 0 var(--ungu); position: relative; overflow: hidden; }
@media (max-width: 800px) { .cta { grid-template-columns: 1fr; } }
.cta h2 { margin-bottom: .25em; color: #fff; }
.cta p { margin: 0; color: #CFC6DD; font-size: 1.1rem; }
.cta .btn-baris { justify-content: flex-end; }
@media (max-width: 800px) { .cta .btn-baris { justify-content: flex-start; } }

/* ---------- Kedai ---------- */
.kedai-alat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.tapis { display: flex; flex-wrap: wrap; gap: 8px; }
.tapis button { min-height: 44px; padding: 0 14px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 700 .9rem var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s; }
.tapis button:hover { background: var(--lime-50); }
.tapis button[aria-pressed="true"] { background: var(--ink); color: var(--lime); }
.tapis button .kira { font: 500 .75rem var(--mono); opacity: .7; }
.cari { position: relative; flex: 1 1 240px; max-width: 340px; }
.cari input { width: 100%; min-height: 46px; border-radius: 6px; border: 2px solid var(--ink); padding: 0 14px 0 42px; font: 500 1rem var(--font); background: #fff; color: var(--ink); }
.cari input:focus { outline: none; box-shadow: 4px 4px 0 var(--ungu); }
.cari svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-60); }
.sel-peringkat { min-height: 46px; border-radius: 6px; border: 2px solid var(--ink); padding: 0 12px; font: 700 .9rem var(--font); background: #fff; color: var(--ink); cursor: pointer; }
.produk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.produk { background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.produk:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.produk-media { aspect-ratio: 4/3; position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 2px solid var(--ink); }
.produk-media::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(32,19,50,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(32,19,50,.07) 1px, transparent 1px); background-size: 20px 20px; }
.produk-media svg.besar { width: 42%; height: auto; position: relative; transition: transform .4s; }
.produk:hover .produk-media svg.besar { transform: rotate(-6deg) scale(1.08); }
.produk-media .jenis, .produk-media .lencana-baru { position: absolute; top: 12px; padding: 4px 8px; border: 1.5px solid var(--ink); border-radius: 4px; font: 700 .75rem var(--mono); text-transform: uppercase; color: var(--ink); }
.produk-media .jenis { left: 12px; background: #fff; }
.produk-media .lencana-baru { right: 12px; background: var(--lime); }
.m-modul { background: var(--ungu-50); color: var(--ungu); }
.m-video { background: var(--cyan-50); color: var(--cyan-700); }
.m-ebook { background: var(--lime-50); color: #5E7A06; }
.m-alat { background: var(--ink); color: var(--lime); }
.m-alat::before { background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); }
.produk-isi { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.produk-isi .meta { font: 500 .75rem var(--mono); text-transform: uppercase; color: var(--ink-60); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.produk-isi h3 { font-size: 1.05rem; margin: 2px 0 0; }
.produk-isi p { margin: 0; color: var(--ink-60); font-size: .92rem; flex: 1; }
.produk-bawah { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1.5px dashed var(--garis); }
.harga { font: 700 1.15rem var(--mono); }
.harga s { font-size: .82rem; color: var(--ink-60); font-weight: 500; margin-left: 4px; }
.tambah { min-height: 44px; padding: 0 14px; border-radius: 6px; border: 2px solid var(--ink); background: var(--ungu); color: #fff; font: 800 .9rem var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .2s; }
.tambah svg { width: 18px; height: 18px; }
.tambah:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.tambah:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.tambah.ok { background: var(--lime); color: var(--ink); }
.kosong { text-align: center; padding: 50px 20px; color: var(--ink-60); grid-column: 1 / -1; }
.kosong svg { width: 40px; height: 40px; margin: 0 auto; }
.amaran-harga { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 2px dashed #B98A00; border-radius: var(--r); background: #FFF6DD; font-size: .92rem; color: var(--ink-80); margin-bottom: 22px; }
.amaran-harga svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #8A5A00; }

/* Laci troli */
.laci-latar { position: fixed; inset: 0; background: rgba(32,19,50,.5); z-index: 60; opacity: 0; visibility: hidden; transition: .25s; }
.laci { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--kertas); z-index: 61; display: flex; flex-direction: column; border-left: 2px solid var(--ink); transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
body.troli-buka .laci { transform: none; }
body.troli-buka .laci-latar { opacity: 1; visibility: visible; }
.laci-atas { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 2px solid var(--ink); }
.laci-atas h2 { font-size: 1.3rem; margin: 0; }
.tutup { width: 44px; height: 44px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.tutup svg { width: 20px; height: 20px; }
.laci-isi { flex: 1; overflow-y: auto; padding: 8px 22px; }
.baris-troli { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1.5px dashed var(--garis); }
.baris-troli .mini { width: 54px; height: 54px; border-radius: 6px; border: 2px solid var(--ink); display: grid; place-items: center; }
.baris-troli .mini svg { width: 26px; height: 26px; }
.baris-troli b { display: block; font-size: .95rem; line-height: 1.3; }
.baris-troli small { color: var(--ink-60); font-family: var(--mono); font-size: .75rem; }
.kuantiti { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 6px; margin-top: 6px; background: #fff; }
.kuantiti button { width: 36px; height: 34px; border: 0; background: none; cursor: pointer; font: 700 1.1rem var(--mono); color: var(--ink); }
.kuantiti span { min-width: 26px; text-align: center; font: 700 .9rem var(--mono); }
.buang { border: 0; background: none; color: var(--ink-60); cursor: pointer; font: 600 .8rem var(--font); text-decoration: underline; padding: 8px 0; }
.laci-bawah { padding: 18px 22px; border-top: 2px solid var(--ink); background: #fff; }
.jumlah { display: flex; justify-content: space-between; font: 700 1.15rem var(--mono); margin-bottom: 6px; }
.laci-bawah .nota { margin-bottom: 14px; }
.borang-mini { display: grid; gap: 10px; margin-bottom: 14px; }

/* ---------- Footer ---------- */
.footer { padding: 64px 0 26px; border-top: 2px solid var(--ink); overflow: hidden; }
.footer-besar { font-size: clamp(3.2rem, 13vw, 11rem); font-weight: 800; letter-spacing: -.065em; line-height: .82; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.3); margin: 0 0 44px; user-select: none; white-space: nowrap; }
.footer-besar span { color: var(--lime); -webkit-text-stroke: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .jenama b { color: #fff; }
.footer .jenama small { color: #A99DBC; }
.footer .jenama img { background: #fff; border-radius: 6px; padding: 3px; }
.footer p { color: #CFC6DD; }
.footer .footer-tajuk { font: 700 .75rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--lime); margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: #CFC6DD; }
.footer a { color: #CFC6DD; text-decoration: none; }
.footer a:hover { color: var(--lime); }
.footer-bawah { margin-top: 48px; padding-top: 20px; border-top: 1px dashed rgba(255,255,255,.22); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 500 .75rem var(--mono); text-transform: uppercase; color: #A99DBC; }
.sosial { display: flex; gap: 10px; margin-top: 18px; }
.sosial a { width: 44px; height: 44px; border-radius: 6px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.4); }
.sosial a:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.sosial svg { width: 20px; height: 20px; }

/* WhatsApp terapung */
.wa-apung { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #062B14; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.wa-apung:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.wa-apung svg { width: 28px; height: 28px; }
@media (max-width: 640px) { body:has(#produk-grid) .wa-apung { display: none; } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 180%); background: var(--ink); color: #fff; padding: 12px 18px; border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--lime); z-index: 70; font-weight: 600; transition: transform .3s cubic-bezier(.2,.8,.2,1); display: flex; gap: 10px; align-items: center; max-width: calc(100% - 32px); }
.toast.tunjuk { transform: translate(-50%, 0); }
.toast svg { width: 20px; height: 20px; color: var(--lime); flex: none; }

/* Pendedahan semasa tatal */
.muncul { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.muncul.nampak { opacity: 1; transform: none; }
.lambat-1 { transition-delay: .08s; } .lambat-2 { transition-delay: .16s; } .lambat-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .muncul { opacity: 1; transform: none; }
  .bulat path, .lukis path { stroke-dashoffset: 0; }
}
.pelan .rajah figcaption { color: #A99DBC; }
.pelan .rajah figcaption b { color: #fff; }
.hubungi-grid > *, .borang .dua > *, .medan { min-width: 0; }
.medan select { text-overflow: ellipsis; }

/* =====================================================================
   HERO ANGKASA (laman utama) — latar gelap, rangkaian beranimasi, logo dalam orbit
   ===================================================================== */
.hero-angkasa {
  position: relative; min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; overflow: hidden; color: #fff;
  padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 8vw, 110px); border-bottom: 2px solid var(--ink);
  background: radial-gradient(1100px 600px at 85% -10%, rgba(134,21,187,.6), transparent 60%),
              radial-gradient(800px 500px at -10% 110%, rgba(41,197,217,.24), transparent 60%), var(--ink);
}
.hero-angkasa::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
#rangkaian { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-angkasa-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-angkasa-grid { grid-template-columns: 1fr; } }
.hero-angkasa h1 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); margin-bottom: .35em; }
.hero-angkasa h1 .baris2 { display: block; background: linear-gradient(100deg, #D9A6F5 5%, var(--cyan) 55%, var(--lime) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-angkasa .lead { color: #D8D0E4; font-size: 1.18rem; margin-bottom: 30px; }
.hero-angkasa .btn { --bd: #fff; --sh: rgba(255,255,255,.35); }
.hero-angkasa .btn--lime { --sh: var(--ungu); }
.lencana-baris { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.lencana { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font: 700 .76rem var(--mono); text-transform: uppercase; letter-spacing: .04em; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.lencana i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(214,243,108,.2); }
.lencana--cyan i { background: var(--cyan); box-shadow: 0 0 0 4px rgba(41,197,217,.2); }
.hero-fakta { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.hero-fakta b { display: block; font: 700 1.9rem/1 var(--mono); color: #fff; letter-spacing: -.03em; }
.hero-fakta span { font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: #BFB4D0; }

.hero-visual { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin-left: auto; }
.hero-visual .orbit { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.2); animation: putar 60s linear infinite; }
.hero-visual .orbit--2 { inset: 12%; border-style: solid; border-color: rgba(41,197,217,.3); animation-duration: 40s; animation-direction: reverse; }
.hero-visual .orbit--3 { inset: 26%; border-color: rgba(214,243,108,.26); animation-duration: 28s; }
.hero-visual .planet { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 24px var(--lime); }
.hero-visual .orbit--2 .planet { background: var(--cyan); box-shadow: 0 0 24px var(--cyan); top: auto; bottom: -8px; width: 14px; height: 14px; }
.hero-visual .orbit--3 .planet { background: #D9A6F5; box-shadow: 0 0 24px #D9A6F5; width: 12px; height: 12px; top: 50%; left: -6px; }
.hero-logo { position: absolute; inset: 30%; background: #fff; border-radius: 30px; display: grid; place-items: center; padding: 9%; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 10px rgba(255,255,255,.07); animation: apung 6s ease-in-out infinite; }
.hero-logo img { width: 100%; height: 100%; object-fit: contain; }
@keyframes apung { 50% { translate: 0 -12px; } }
.foto-terapung { position: absolute; width: 38%; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 20px 50px rgba(0,0,0,.45); animation: apung 7s ease-in-out infinite; }
.foto-terapung img { width: 100%; height: 100%; object-fit: cover; }
.foto-terapung--a { top: 1%; left: -5%; rotate: -6deg; animation-delay: -2s; }
.foto-terapung--b { bottom: 3%; right: -3%; rotate: 5deg; animation-delay: -4s; }
.cip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; color: var(--ink); font-size: .86rem; font-weight: 800; border: 2px solid var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,.35); animation: apung 8s ease-in-out infinite; white-space: nowrap; }
.cip span { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; border: 1.5px solid var(--ink); }
.cip svg { width: 17px; height: 17px; }
.cip--a { top: 40%; left: -12%; animation-delay: -1s; } .cip--a span { background: var(--ungu-100); color: var(--ungu); }
.cip--b { top: 7%; right: -4%; animation-delay: -5s; } .cip--b span { background: var(--lime); }
.cip--c { bottom: 24%; left: -8%; animation-delay: -3s; } .cip--c span { background: var(--cyan); color: var(--ink); }
.cip--d { bottom: -3%; left: 26%; animation-delay: -6s; } .cip--d span { background: var(--ink); color: var(--lime); }
.tatal { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: rgba(255,255,255,.55); font: 500 .75rem var(--mono); letter-spacing: .16em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tatal::after { content: ""; width: 2px; height: 32px; background: linear-gradient(var(--lime), transparent); animation: titis 1.8s infinite; }
@keyframes titis { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 900px) {
  .hero-visual { max-width: 380px; margin: 16px auto 0; }
  .cip--a { left: -4%; } .cip--c { left: -2%; } .cip--b { right: -2%; }
  .tatal { display: none; }
}
@media (max-width: 420px) { .cip { font-size: .76rem; padding: 6px 10px 6px 6px; } .cip span { width: 26px; height: 26px; } }

/* ---------- Makmal: Cabaran Minda 60 saat ---------- */
.makmal-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .makmal-grid { grid-template-columns: 1fr; } }
.eksperimen-senarai { list-style: none; margin: 4px 0 22px; padding: 0; border-top: 1.5px solid var(--ink); }
.eksperimen-senarai li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 2px; border-bottom: 1.5px solid var(--ink); }
.eksperimen-senarai b { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 6px; font: 700 .9rem var(--mono); background: var(--lime); }
.eksperimen-senarai li:nth-child(2) b { background: var(--cyan); }
.eksperimen-senarai li:nth-child(3) b { background: var(--ungu-100); color: var(--ungu); }
.eksperimen-senarai span { font: 500 .75rem var(--mono); text-transform: uppercase; color: var(--ink-60); letter-spacing: .03em; }
.eksperimen-senarai strong { display: block; font: 800 1.05rem var(--font); text-transform: none; color: var(--ink); letter-spacing: -.01em; }

.kuiz { position: relative; overflow: visible; }
.kuiz-isi { padding: 24px; min-height: 440px; display: flex; flex-direction: column; background-image: linear-gradient(rgba(41,197,217,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(41,197,217,.09) 1px, transparent 1px); background-size: 24px 24px; }
@media (max-width: 520px) { .kuiz-isi { padding: 18px; min-height: 0; } }
.kuiz-mula h3 { font-size: 1.6rem; margin: 6px 0 18px; }
.kuiz-pilih { display: grid; gap: 12px; margin-bottom: 18px; }
.kuiz-pilih button { text-align: left; padding: 16px 18px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .2s; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: inherit; color: var(--ink); }
.kuiz-pilih button b { font-size: 1.15rem; }
.kuiz-pilih button small { font: 500 .75rem var(--mono); text-transform: uppercase; color: var(--ink-60); }
.kuiz-pilih button:hover { background: var(--lime); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.kuiz-pilih button:nth-child(2):hover { background: var(--cyan); }
.kuiz-pilih button:nth-child(3):hover { background: #E3C2F7; }
.kuiz-atas { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kuiz-titik { display: flex; gap: 6px; }
.kuiz-titik i { width: 22px; height: 8px; border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; transition: background .3s; }
.kuiz-titik i.kini { background: var(--ink); }
.kuiz-titik i.betul { background: #2FB463; }
.kuiz-titik i.salah { background: #E5484D; }
.kuiz-topik { margin-left: auto; font: 700 .75rem var(--mono); text-transform: uppercase; padding: 4px 9px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--ungu-50); color: var(--ungu); }
.kuiz-topik.t-sains { background: var(--cyan-50); color: var(--cyan-700); }
.kuiz-topik.t-logik { background: var(--lime-50); color: #5E7A06; }
.kuiz-topik.t-ai { background: var(--ink); color: var(--lime); }
.kuiz-masa { position: relative; width: 46px; height: 46px; display: grid; place-items: center; flex: none; }
.kuiz-masa .cincin { position: absolute; inset: 0; width: 100%; height: 100%; }
.kuiz-masa b { font: 700 .9rem var(--mono); position: relative; }
.kuiz-masa.kritikal b { color: #E5484D; animation: kelip .6s steps(1) infinite; }
.kuiz-masa.kritikal .isi-c { stroke: #E5484D; }
.cincin { transform: rotate(-90deg); }
.cincin .lata { fill: none; stroke: var(--garis); stroke-width: 5; }
.cincin .isi-c { fill: none; stroke: var(--ungu); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .35s linear; }
.cincin.besar .lata, .cincin.besar .isi-c { stroke-width: 10; }
.cincin.besar .isi-c { animation: isiCincin 1.1s cubic-bezier(.2,.8,.2,1); }
@keyframes isiCincin { from { stroke-dashoffset: 327; } }
.kuiz-soalan { font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.3; margin: 0 0 18px; animation: naik .35s; }
.kuiz-pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .kuiz-pilihan { grid-template-columns: 1fr; } }
.kuiz-pilihan button { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; text-align: left; min-height: 56px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; cursor: pointer; font: 600 .98rem var(--font); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s, background .2s; animation: naik .35s backwards; }
.kuiz-pilihan button:nth-child(2) { animation-delay: .05s; }
.kuiz-pilihan button:nth-child(3) { animation-delay: .1s; }
.kuiz-pilihan button:nth-child(4) { animation-delay: .15s; }
.kuiz-pilihan button b { width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 5px; font: 700 .8rem var(--mono); background: var(--kertas); }
.kuiz-pilihan:not(.dijawab) button:hover { background: var(--lime-50); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.kuiz-pilihan button:disabled { cursor: default; color: var(--ink); }
.kuiz-pilihan button.betul { background: #DDF5E6; border-color: #1F7A3A; box-shadow: 3px 3px 0 #1F7A3A; }
.kuiz-pilihan button.betul b { background: #2FB463; color: #fff; border-color: #1F7A3A; }
.kuiz-pilihan button.salah { background: #FDE4E4; border-color: #B42318; box-shadow: 3px 3px 0 #B42318; animation: goncang .4s; }
.kuiz-pilihan button.salah b { background: #E5484D; color: #fff; border-color: #B42318; }
.kuiz-pilihan.dijawab button:not(.betul):not(.salah) { opacity: .45; }
@keyframes goncang { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.kuiz-kenapa { margin-top: 16px; padding: 14px 16px; border: 2px dashed var(--ungu); border-radius: var(--r); background: #fff; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; animation: naik .3s; }
.kuiz-kenapa p { margin: 0; flex: 1 1 260px; color: var(--ink-80); font-size: .95rem; }
.kuiz-kenapa strong { color: var(--ungu); }
.kuiz-hasil { display: grid; gap: 20px; animation: naik .4s; }
.kuiz-hasil > div:nth-child(2) { display: grid; gap: 10px; }
.kuiz-hasil h3 { margin: 0; font-size: 1.35rem; }
.kuiz-skor { display: flex; align-items: center; gap: 18px; }
.kuiz-skor .cincin { width: 110px; height: 110px; flex: none; }
.kuiz-skor b { display: block; font: 700 3rem/1 var(--mono); letter-spacing: -.04em; }
.kuiz-skor b small { font-size: 1.2rem; color: var(--ink-60); }
.kuiz-skor span { font: 500 .75rem var(--mono); text-transform: uppercase; color: var(--ink-60); }
.kuiz-bar { display: grid; gap: 8px; }
.kuiz-bar div { display: grid; grid-template-columns: 92px 1fr 36px; gap: 10px; align-items: center; font: 600 .86rem var(--font); }
.kuiz-bar i { height: 12px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; overflow: hidden; }
.kuiz-bar em { display: block; height: 100%; background: var(--ungu); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.kuiz-bar div:nth-child(2) em { background: var(--cyan); }
.kuiz-bar div:nth-child(3) em { background: #9BBE1E; }
.kuiz-bar div:nth-child(4) em { background: var(--ink); }
.kuiz-bar b { font: 700 .82rem var(--mono); text-align: right; }
.kuiz-cadang { display: grid; gap: 8px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--lime-50); }
.kuiz-cadang a { font-weight: 800; color: var(--ungu); text-decoration: none; }
.kuiz-cadang a:hover { text-decoration: underline; }
.konfeti { position: absolute; top: 40%; width: 9px; height: 14px; border: 1px solid var(--ink); z-index: 5; pointer-events: none; animation: konfeti 1.6s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes konfeti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 340px)) rotate(var(--r)); opacity: 0; } }
.kuiz-kenapa[hidden] { display: none; }

/* ---------- Mulya untuk siapa? ---------- */
.siapa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1080px) { .siapa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .siapa-grid { grid-template-columns: 1fr; } }
.siapa { --warna: var(--ungu); --latar: var(--ungu-50); display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 5px 5px 0 var(--ink); transition: transform .2s, box-shadow .2s; }
.siapa:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.siapa--cyan { --warna: var(--cyan-700); --latar: var(--cyan-50); }
.siapa--lime { --warna: #4F6A00; --latar: var(--lime); }
.siapa--ink { --warna: var(--lime); --latar: var(--ink); }
.siapa-atas { display: flex; align-items: center; justify-content: space-between; }
.siapa-ikon { width: 56px; height: 56px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 12px; background: var(--latar); color: var(--warna); }
.siapa-ikon svg { width: 28px; height: 28px; }
.siapa h3 { margin: 6px 0 0; font-size: 1.3rem; }
.siapa > p { margin: 0; color: var(--ink-60); font-size: .95rem; }
.siapa ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 0; flex: 1; border-top: 1.5px dashed var(--garis); }
.siapa li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1.5px dashed var(--garis); font-size: .93rem; font-weight: 600; color: var(--ink-80); }
.siapa .pautan { align-self: flex-start; }
.st { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; border: 2px solid var(--ink); display: inline-block; flex: none; }
.st--ada { background: #2FB463; }
.st--minta { background: var(--cyan); }
.st--datang { background: #fff; border-style: dashed; }
.petunjuk .pet { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--ink-80); }
.petunjuk .pet .st { margin-top: 0; }

/* Perkhidmatan: kad ikon ringkas (ganti jubin unsur) */
.servis-tag { --warna: var(--ungu); --latar: var(--ungu-50); position: sticky; top: 100px; align-self: start; display: grid; gap: 10px; padding: 22px; background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 5px 5px 0 var(--ink); }
.servis-tag.siapa--cyan { --warna: var(--cyan-700); --latar: var(--cyan-50); }
.servis-tag.siapa--lime { --warna: #4F6A00; --latar: var(--lime); }
.servis-tag.siapa--ink { --warna: var(--lime); --latar: var(--ink); }
.servis-tag .siapa-ikon { width: 72px; height: 72px; border-radius: 16px; }
.servis-tag .siapa-ikon svg { width: 36px; height: 36px; }
.servis-tag b { font-size: 1.05rem; }
@media (max-width: 900px) { .servis-tag { position: static; grid-template-columns: auto 1fr; align-items: center; max-width: 420px; } .servis-tag .siapa-ikon { grid-row: span 2; width: 56px; height: 56px; } }
.lompat { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.lompat a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 15px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; box-shadow: 3px 3px 0 var(--ink); transition: background .2s, transform .15s, box-shadow .15s; }
.lompat a:hover { background: var(--lime); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

/* ---------- Tentang: pengasas, carta organisasi, guru ---------- */
.pengasas { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
@media (max-width: 900px) { .pengasas { grid-template-columns: 1fr; } .pengasas-foto { max-width: 420px; } }
.pengasas-foto { position: relative; }
.pengasas-bingkai { position: relative; border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 8px 8px 0 var(--ungu); overflow: hidden;
  background: linear-gradient(var(--petak-kuat) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--petak-kuat) 1px, transparent 1px) 0 0 / 22px 22px, var(--ungu-50); }
.pengasas-bingkai::before { content: ""; position: absolute; width: 74%; aspect-ratio: 1; left: 13%; top: 14%; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); }
.pengasas-bingkai img { position: relative; display: block; width: 100%; height: auto; }
.pengasas-label { position: absolute; left: 12px; top: 12px; padding: 4px 9px; background: #fff; border: 1.5px solid var(--ink); border-radius: 4px; color: var(--ink); }
.pengasas-nota { position: absolute; right: -6%; bottom: -28px; margin: 0; padding: 6px 12px; background: var(--kertas); border: 1.5px solid var(--ink); border-radius: 6px; transform: rotate(-4deg); max-width: 16ch; text-align: center; }
@media (max-width: 560px) { .pengasas-nota { right: 0; } }
.pengasas h2 { margin-bottom: 6px; }
.pengasas-jawatan { font-weight: 700; color: var(--ungu); margin: 0 0 22px; }
.pengasas-jawatan span { color: var(--ink-60); font-weight: 500; }
.kelayakan { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); border: 2px solid var(--ink); border-radius: var(--r); background: #fff; overflow: hidden; }
.kelayakan li { display: grid; gap: 2px; padding: 14px 16px; border-right: 1.5px dashed var(--garis); border-bottom: 1.5px dashed var(--garis); }
.kelayakan li:nth-child(2n) { border-right: 0; }
.kelayakan li:nth-last-child(-n+2) { border-bottom: 0; }
.kelayakan b { font-size: 1.05rem; }
.kelayakan span { font: 500 .75rem var(--mono); text-transform: uppercase; color: var(--ink-60); letter-spacing: .03em; }
@media (max-width: 480px) { .kelayakan { grid-template-columns: 1fr; } .kelayakan li { border-right: 0; } .kelayakan li:nth-last-child(2) { border-bottom: 1.5px dashed var(--garis); } }

.carta { --garis-carta: 2px solid var(--ink); display: grid; justify-items: center; padding-top: 6px; }
.carta-kotak { display: grid; gap: 3px; padding: 12px 14px; min-width: 0; background: #fff; border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--ink); text-align: center; transition: transform .2s, box-shadow .2s, background .2s; }
.carta-kotak:hover { box-shadow: 6px 6px 0 var(--ungu); background: var(--lime-50); }
.carta-kotak b { font-size: .98rem; line-height: 1.25; }
.carta-kotak span { font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ungu); line-height: 1.35; }
.carta-kotak--ketua { grid-template-columns: 60px auto; align-items: center; gap: 14px; text-align: left; padding: 10px 20px 10px 10px; background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--lime); }
.carta-kotak--ketua:hover { background: var(--ink); box-shadow: 7px 7px 0 var(--lime); }
.carta-kotak--ketua img { width: 60px; height: 60px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid var(--lime); background: var(--ungu); }
.carta-kotak--ketua b { font-size: 1.1rem; display: block; }
.carta-kotak--ketua span { color: var(--lime); }
.carta-puncak { position: relative; padding-bottom: 28px; }
.carta-puncak::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 28px; border-left: var(--garis-carta); }
.carta-cabang { position: relative; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.carta-lajur { position: relative; display: grid; justify-items: center; align-content: start; padding-top: 28px; }
.carta-lajur::before { content: ""; position: absolute; top: 0; left: 50%; height: 28px; border-left: var(--garis-carta); }
.carta-lajur::after { content: ""; position: absolute; top: 0; left: -9px; right: -9px; border-top: var(--garis-carta); }
.carta-lajur:first-child::after { left: 50%; }
.carta-lajur:last-child::after { right: 50%; }
.carta-lajur > .carta-kotak { width: 100%; max-width: 230px; }
.carta-bawah { position: relative; display: grid; gap: 14px; width: 100%; max-width: 230px; margin-top: 22px; padding-left: 22px; }
.carta-bawah::before { content: ""; position: absolute; left: 6px; top: -22px; bottom: 26px; border-left: 2px dashed var(--ink); }
.carta-bawah .carta-kotak { position: relative; text-align: left; box-shadow: 3px 3px 0 var(--ink); background: var(--kertas); }
.carta-bawah .carta-kotak::before { content: ""; position: absolute; left: -18px; top: 50%; width: 16px; border-top: 2px dashed var(--ink); }
.carta-bawah .carta-kotak b { font-size: .92rem; }
/* garisan carta "dilukis" bila muncul */
.carta.muncul { opacity: 1; transform: none; }
.carta .carta-puncak::after, .carta .carta-lajur::before { transform: scaleY(0); transform-origin: top; transition: transform .45s ease .2s; }
.carta .carta-lajur::after { transform: scaleX(0); transition: transform .5s ease .55s; }
.carta .carta-bawah::before { transform: scaleY(0); transform-origin: top; transition: transform .5s ease 1s; }
.carta .carta-puncak .carta-kotak, .carta .carta-lajur > .carta-kotak, .carta .carta-bawah .carta-kotak { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease, box-shadow .2s, background .2s; }
.carta .carta-lajur > .carta-kotak { transition-delay: .85s, .85s, 0s, 0s; }
.carta .carta-bawah .carta-kotak { transition-delay: 1.25s, 1.25s, 0s, 0s; }
.carta .carta-bawah .carta-kotak + .carta-kotak { transition-delay: 1.4s, 1.4s, 0s, 0s; }
.carta.nampak .carta-puncak::after, .carta.nampak .carta-lajur::before, .carta.nampak .carta-bawah::before { transform: scaleY(1); }
.carta.nampak .carta-lajur::after { transform: scaleX(1); }
.carta.nampak .carta-kotak { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .carta-cabang { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .carta-lajur::after { left: -9px; right: -9px; }
  .carta-lajur:nth-child(2)::after { right: 50%; }
  .carta-lajur:nth-child(3)::after { left: 50%; }
  .carta-lajur:nth-child(n+3)::after, .carta-lajur:nth-child(n+3)::before { display: none; }
  .carta-lajur:nth-child(n+3) { padding-top: 0; }
}
@media (max-width: 520px) {
  .carta-cabang { grid-template-columns: 1fr; row-gap: 22px; }
  .carta-lajur::after, .carta-lajur::before { display: none; }
  .carta-lajur { padding-top: 0; }
  .carta-lajur > .carta-kotak, .carta-bawah { max-width: 320px; }
  .carta-puncak { padding-bottom: 22px; }
  .carta-puncak::after { height: 14px; bottom: 4px; }
}

.guru-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .guru-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .guru-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.guru { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 16px; background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg); }
.guru.nampak { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .25s, box-shadow .25s; }
.guru.nampak:hover { transition-delay: 0s; transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 7px 7px 0 var(--ink); }
.guru-foto { position: relative; aspect-ratio: 5 / 6; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(var(--petak-kuat) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, var(--petak-kuat) 1px, transparent 1px) 0 0 / 18px 18px, var(--cyan-50); }
.guru:nth-child(3n+2) .guru-foto { background-color: var(--ungu-50); }
.guru:nth-child(3n) .guru-foto { background-color: var(--lime-50); }
.guru-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.guru:hover .guru-foto img { transform: scale(1.045); }
.guru-foto .kod { position: absolute; left: 8px; top: 8px; padding: 2px 7px; background: #fff; border: 1.5px solid var(--ink); border-radius: 4px; color: var(--ink); font-size: .75rem; }
.guru h3 { margin: 4px 4px 0; font-size: 1.05rem; line-height: 1.25; }
.guru-subjek { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px; padding: 0; }
.sbj { padding: 3px 8px; border: 1.5px solid var(--ink); border-radius: 4px; font: 700 .75rem var(--mono); text-transform: uppercase; letter-spacing: .02em; background: #fff; }
.sbj--mt { background: var(--ungu-100); }
.sbj--sn { background: var(--cyan-50); }
.sbj--bio { background: var(--lime); }
.sbj--fz { background: var(--lime-50); }
.sbj--ba, .sbj--bi { background: #FFF1DE; }
.sbj--pg { background: var(--ink); color: var(--lime); }
.guru--ketua .guru-foto { background-color: var(--lime); }
@media (prefers-reduced-motion: reduce) {
  .carta .carta-puncak::after, .carta .carta-lajur::before, .carta .carta-lajur::after, .carta .carta-bawah::before { transform: none; transition: none; }
  .carta .carta-kotak { opacity: 1; transform: none; transition: none; }
}

/* Harga pakej */
.butiran-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.harga-pakej { text-align: right; }
.harga-pakej b { display: block; font: 700 2.2rem/1 var(--mono); letter-spacing: -.04em; color: var(--ungu); }
.harga-pakej span { font: 500 .75rem var(--mono); text-transform: uppercase; color: var(--ink-60); }
.butiran-pakej .btn-baris { margin-top: 4px; }
.jadual td.yuran { font: 700 1.05rem var(--mono); color: var(--ungu); white-space: nowrap; }
.jadual tr.baris-meteor { background: var(--ungu-50); }

/* =====================================================================
   Halaman pendaftaran (daftar.html)
   ===================================================================== */
.daftar-sec { padding-top: clamp(40px, 5vw, 64px); }
.daftar-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .daftar-grid { grid-template-columns: 1fr; } }
.daftar-borang { display: grid; gap: 22px; min-width: 0; }
.demo-bar { padding: 10px 14px; border: 2px dashed #B98A00; border-radius: var(--r); background: #FFF6DD; font: 700 .78rem var(--mono); color: #8A5A00; text-transform: uppercase; }
.seksyen-d { margin: 0; padding: 24px; border: 2px solid var(--ink); border-radius: var(--r-lg); background: #fff; box-shadow: 5px 5px 0 var(--ink); display: grid; gap: 16px; min-width: 0; }
@media (max-width: 520px) { .seksyen-d { padding: 18px; } }
.seksyen-d legend { display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-left: -8px; font: 800 1.2rem var(--font); }
.seksyen-d legend .no { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 6px; background: var(--lime); font: 700 .95rem var(--mono); }
.seksyen-d .dua { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .seksyen-d .dua { grid-template-columns: 1fr; } }
.seksyen-d .dua > * { min-width: 0; }
.seksyen-d textarea { min-height: 70px; }
.pilihan { font: 500 .75rem var(--font); text-transform: none; color: var(--ink-60); letter-spacing: 0; }
.label-m { font: 700 .75rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.medan.salah .pilih-subjek, .medan.salah .pilih-pakej-d { outline: 2px solid #B42318; outline-offset: 4px; border-radius: 6px; }

.kad-pelajar { display: grid; gap: 14px; padding: 18px; border: 2px dashed var(--ink); border-radius: var(--r-lg); background: var(--kertas); }
.kad-pelajar + .kad-pelajar { margin-top: 14px; }
.kad-pelajar-atas { display: flex; justify-content: space-between; align-items: center; }
.kad-pelajar-atas .kod b { color: var(--ungu); }
.buang-pelajar { border: 0; background: none; font: 700 .82rem var(--font); color: #B42318; cursor: pointer; padding: 8px; }
.tambah-pelajar { min-height: 50px; border: 2px dashed var(--ungu); border-radius: var(--r); background: var(--ungu-50); color: var(--ungu); font: 800 .95rem var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; }
.tambah-pelajar:hover { background: var(--ungu-100); }
.tambah-pelajar b { font-size: 1.3rem; }

.pilih-pakej-d { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pilih-pakej-d label { position: relative; cursor: pointer; }
.pilih-pakej-d input, .pilih-subjek input, .kaedah input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-pakej-d span { display: grid; gap: 2px; height: 100%; padding: 12px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; box-shadow: 3px 3px 0 var(--ink); transition: background .2s, transform .15s, box-shadow .15s; }
.pilih-pakej-d b { font-size: 1.02rem; }
.pilih-pakej-d em { font: 700 1rem var(--mono); font-style: normal; color: var(--ungu); }
.pilih-pakej-d em small { font-size: .75rem; color: var(--ink-60); }
.pilih-pakej-d span > small { font-size: .75rem; color: var(--ink-60); line-height: 1.35; }
.pilih-pakej-d label:hover span { background: var(--lime-50); }
.pilih-pakej-d input:checked + span { background: var(--ink); color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pilih-pakej-d input:checked + span em, .pilih-pakej-d input:checked + span small { color: var(--lime); }
.pilih-pakej-d input:focus-visible + span, .pilih-subjek input:focus-visible + span, .kaedah input:focus-visible + span { outline: 3px solid var(--ungu); outline-offset: 3px; }
.pilih-subjek { display: flex; flex-wrap: wrap; gap: 8px; }
.pilih-subjek label { position: relative; cursor: pointer; }
.pilih-subjek span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 700; font-size: .92rem; transition: background .2s; }
.pilih-subjek span::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; }
.pilih-subjek input:checked + span { background: var(--lime); }
.pilih-subjek input:checked + span::before { background: var(--ink); box-shadow: inset 0 0 0 2px var(--lime); }

.kaedah-bayar { display: grid; gap: 10px; }
.kaedah { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 14px 16px 14px 46px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; cursor: pointer; transition: background .2s; }
.kaedah::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; }
.kaedah:has(input:checked) { background: var(--lime-50); box-shadow: 3px 3px 0 var(--ink); }
.kaedah:has(input:checked)::before { background: var(--ungu); box-shadow: inset 0 0 0 3px #fff; }
.kaedah span { display: grid; }
.kaedah small { color: var(--ink-60); font-size: .85rem; }
.kaedah.mati { opacity: .55; cursor: not-allowed; }
.tag-k { font: 700 .75rem var(--mono); font-style: normal; text-transform: uppercase; padding: 3px 8px; border: 1.5px solid #1F7A3A; border-radius: 4px; color: #1F7A3A; background: #EAF7EF; }
.tag-k--kelabu { color: #8A5A00; border-color: #8A5A00; background: #FFF6DD; }

.panel-qr { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 18px; border: 2px dashed var(--ungu); border-radius: var(--r-lg); background: var(--ungu-50); }
@media (max-width: 600px) { .panel-qr { grid-template-columns: 1fr; } .qr-kotak { max-width: 220px; margin-inline: auto; } }
.panel-qr[hidden] { display: none; }
.qr-kotak { display: block; border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; background: #fff; align-self: start; }
.qr-kotak img { width: 100%; }
.qr-info { display: grid; gap: 10px; align-content: start; min-width: 0; }
.salin-baris { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; }
.salin-baris .kod { grid-column: 1; font-size: .75rem; }
.salin-baris b { grid-column: 1; font: 700 1rem var(--mono); }
.salin-baris .salin { grid-column: 2; grid-row: 1 / span 2; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--lime); font: 700 .75rem var(--mono); cursor: pointer; }
.simpan-qr { font-weight: 800; color: var(--ungu); font-size: .9rem; }
.medan input[type="file"] { padding: 10px; background: #fff; }

.setuju { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .92rem; color: var(--ink-80); cursor: pointer; }
.setuju input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ungu); }
#ralat-pdpa { display: none; color: #B42318; font-size: .85rem; }
.sorok { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ralat-pelayan { padding: 12px 14px; border: 2px solid #B42318; border-radius: var(--r); background: #FDE4E4; color: #7A1A12; font-weight: 600; }

.ringkasan-d { position: sticky; top: 96px; display: grid; gap: 14px; }
@media (max-width: 980px) { .ringkasan-d { position: static; } }
.ringkasan-kad { padding: 22px; border: 2px solid var(--ink); border-radius: var(--r-lg); background: var(--ink); color: #fff; box-shadow: 6px 6px 0 var(--ungu); display: grid; gap: 12px; }
.ringkasan-kad .kod { color: var(--lime); }
.ringkasan-kad .nota { color: #A99DBC; margin: 0; }
.r-pelajar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding-bottom: 12px; border-bottom: 1px dashed rgba(255,255,255,.25); font-size: .88rem; color: #CFC6DD; }
.r-pelajar b { grid-column: 1 / -1; color: #fff; font-size: .98rem; }
.r-pelajar em { font: 700 .88rem var(--mono); font-style: normal; color: #fff; }
.ringkasan-jumlah { display: flex; justify-content: space-between; align-items: baseline; }
.ringkasan-jumlah b { font: 700 1.9rem var(--mono); color: var(--lime); letter-spacing: -.03em; }

.daftar-berjaya { grid-column: 1 / -1; }
.berjaya-kad { position: relative; max-width: 720px; margin-inline: auto; padding: clamp(28px, 5vw, 48px); border: 2px solid var(--ink); border-radius: var(--r-lg); background: #fff; box-shadow: 8px 8px 0 var(--lime); display: grid; gap: 12px; animation: naik .4s; }
.berjaya-kad h2 { font: 700 clamp(1.8rem, 4vw, 2.6rem) var(--mono); color: var(--ungu); margin: 0; }
.berjaya-baris { display: flex; justify-content: space-between; padding: 12px 0; border-block: 1.5px dashed var(--garis); font-weight: 700; }
.berjaya-baris b { font-family: var(--mono); }
.cop { position: absolute; top: 22px; right: 22px; padding: 6px 12px; border: 3px solid #1F7A3A; border-radius: 6px; color: #1F7A3A; font: 700 .9rem var(--mono); transform: rotate(8deg); letter-spacing: .1em; }
.medan[hidden], .daftar-borang [hidden] { display: none !important; }
.pilih-pakej-d label, .pilih-subjek label, .kaedah { font: 500 1rem var(--font); text-transform: none; letter-spacing: 0; }
.pilih-pakej-d em { font-family: var(--mono); }
.ringkasan-d[hidden], .daftar-borang[hidden] { display: none !important; }

/* QA 04 Okt 2026 */
.sel-peringkat { font-size: 16px; }
.pautan { padding-block: 8px; }
.ikrar h3, .garis-masa h3 { letter-spacing: -.015em; }
.footer .footer-tajuk { margin: 0 0 14px; }
.footer-bawah a { color: inherit; text-decoration: underline; }
.privasi article { max-width: 760px; }
.privasi h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 32px 0 10px; }
.privasi h2:first-child { margin-top: 0; }
.privasi ul { padding-left: 1.2em; display: grid; gap: 8px; color: var(--ink-80); }
.privasi p { color: var(--ink-80); }