/* ============================================================================
   AIRPH Plus — landing.css   (airph.my/plus)

   Terjemahan HTML/CSS bagi AIRPH-PLUS-15-Landing-v2.ai
   (dijana oleh 04-Skrip-Reka/bina_pluslanding2.py, satu artboard 1240 x 6500).

   Yang diambil daripada .ai: teks, urutan seksyen, warna, hierarki.
   Yang TIDAK diambil: koordinat mutlak. Artboard 1240pt itu satu saiz sahaja;
   laman sebenar mesti hidup dari 360px hingga 1600px+. Jadi setiap seksyen
   dibina semula dengan Grid/Flex + clamp().

   METRIK MENGIKAT (pengguna = cikgu 50–60 tahun, sama seperti asas.css sistem):
       teks badan   >= 17px
       butang       >= 52px tinggi  (nav 48px, masih > 44px sasaran tekan)
       sasaran tekan>= 44px
       kontras teks >= 4.5:1 (AA). --kelabu-m TIDAK dipakai untuk teks.
   Jangan kecilkan kerana mahu muat lebih banyak.
   ========================================================================= */

/* ─────────────────────────────── TOKEN ─────────────────────────────── */
:root{
  /* jenama — daripada plus_papan.py / plus_mark.py */
  --ungu:#6B38D4; --ungu-g:#41199B; --ungu-m:#8E63E4; --ungu-l:#F3EFFF;

  /* neutral */
  --putih:#FFFFFF; --dakwat:#151C27; --kelabu2:#454C5B; --kelabu-m:#A8AEBC;
  --krim:#F7F8FB; --garis:#E4E7EF;

  /* status */
  --hijau-t:#0B6B40; --hijau-l:#E3F2EA;
  --amber:#7A4E00;   --amber-l:#FCEFD6;
  --merah:#B3261E;   --merah-l:#FDE7E7;
  --biru-t:#1B4B9E;  --biru-l:#E7F0FF;

  /* peranan permukaan — hanya blok ini bertukar untuk mod gelap */
  --latar:var(--putih);
  --latar2:var(--krim);
  --kad:var(--putih);
  --kad-dalam:var(--krim);
  --sempadan:var(--garis);
  --teks:var(--dakwat);
  --teks2:var(--kelabu2);
  --aksen:var(--ungu);
  --aksen-g:var(--ungu-g);
  --aksen-l:var(--ungu-l);
  --aksen-atas:var(--putih);
  --pejal:var(--ungu);              /* blok ungu pejal (CTA, butang utama) */
  --pejal-teks:#FFFFFF;
  --pejal-sub:#E4DBFF;
  --bayang:0 1px 2px rgba(21,28,39,.05);
  --bayang-kad:0 2px 10px rgba(21,28,39,.05);

  /* corak jenama */
  --ck-warna:var(--ungu-m);
  --ck-hantu:var(--ungu-l);
  --ck-lut:.065;

  /* metrik */
  --bungkus:1160px;
  --gutter:clamp(16px, 4vw, 40px);
  --r-kad:16px; --r-kecil:12px; --r-medan:10px;
  --sek-y:clamp(56px, 7vw, 88px);

  color-scheme:light;
}

@media (prefers-color-scheme: dark){
  :root{
    /* token gelap rasmi AIRPH-PLUS-04: aksen WAJIB #A98BFF —
       #6B38D4 tidak cukup kontras atas latar gelap. */
    --latar:#101319;
    --latar2:#141821;
    --kad:#1A1F29;
    --kad-dalam:#171B23;
    --sempadan:#2C3342;
    --teks:#EEF1F6;
    --teks2:#A9B2C4;
    --kelabu-m:#79839A;
    --aksen:#A98BFF;
    --aksen-g:#D3C4FF;
    --aksen-l:#241D3C;
    --aksen-atas:#101319;
    --pejal:#4C2A9B;
    --pejal-teks:#FFFFFF;
    --pejal-sub:#D7CBFF;
    --hijau-t:#4ADE8A; --hijau-l:#12301F;
    --amber:#F0B65C;   --amber-l:#2E2413;
    --merah:#FF8A80;   --merah-l:#2E1815;
    --biru-t:#8FB6FF;  --biru-l:#16233A;
    --bayang:0 1px 2px rgba(0,0,0,.45);
    --bayang-kad:0 2px 12px rgba(0,0,0,.45);
    --ck-warna:#A98BFF;
    --ck-hantu:#3A2E63;
    --ck-lut:.10;
    color-scheme:dark;
  }
}

/* ─────────────────────────────── ASAS ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--latar);
  color:var(--teks);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;                 /* jaring keselamatan: tiada skrol mendatar */
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;line-height:1.16;letter-spacing:-.02em;font-weight:800}
p{margin:0}
img,svg{max-width:100%}
hr{border:0;border-top:1px solid var(--sempadan);margin:0}
.senarai{list-style:none;margin:0;padding:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

a{color:var(--aksen)}

:focus-visible{
  outline:3px solid var(--aksen);
  outline-offset:3px;
  border-radius:6px;
}

.langkau{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--aksen);color:var(--aksen-atas);
  padding:14px 22px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none;
}
.langkau:focus{left:0}

.bungkus{
  width:100%;max-width:var(--bungkus);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ─────────────────────────────── IKON ─────────────────────────────── */
.ikon{width:26px;height:26px;flex:0 0 auto;color:var(--aksen)}
.ikon--besar{width:32px;height:32px}
.ikon--xl{width:42px;height:42px}
.ikon--ungu{color:var(--aksen)}
.ikon--hijau{color:var(--hijau-t)}
.ikon--merah{color:var(--merah)}
.ikon--biru{color:var(--biru-t)}
.ikon--amber{color:var(--amber)}

/* ─────────────────────────── JENAMA / WORDMARK ─────────────────────────── */
.jenama{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--teks);
  min-height:44px;
}
.jenama__mark{width:34px;height:34px;flex:0 0 auto;color:var(--aksen)}
.jenama__kata{
  display:inline-flex;gap:.22em;align-items:baseline;
  font-size:21px;font-weight:800;letter-spacing:-.03em;
}
.jenama__plus{color:var(--aksen)}

/* ─────────────────────────────── BUTANG ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;
  border-radius:var(--r-kecil);
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;text-align:center;
  border:2px solid transparent;
  transition:background-color .15s ease,border-color .15s ease,transform .1s ease;
}
.btn--utama{background:var(--aksen);color:var(--aksen-atas)}
.btn--utama:hover{background:var(--aksen-g)}
.btn--kedua{background:var(--kad);color:var(--teks);border-color:var(--sempadan)}
.btn--kedua:hover{border-color:var(--aksen);color:var(--aksen)}
.btn--putih{background:#FFFFFF;color:#6B38D4}
.btn--putih:hover{background:#F3EFFF}
.btn--besar{min-height:58px;padding:0 34px;font-size:18px}
.btn--kecil{min-height:48px;padding:0 20px;font-size:17px}
.btn:active{transform:translateY(1px)}

/* ─────────────────────────────── CIP ─────────────────────────────── */
.cip{
  display:inline-flex;align-items:center;
  min-height:32px;padding:4px 16px;
  border-radius:999px;
  font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  background:var(--kad-dalam);color:var(--teks2);
  border:1px solid var(--sempadan);
  white-space:nowrap;
}
.cip--hijau{background:var(--hijau-l);color:var(--hijau-t);border-color:transparent}
.cip--ungu {background:var(--aksen-l);color:var(--aksen);border-color:transparent}
.cip--merah{background:var(--merah-l);color:var(--merah);border-color:transparent}
.cip--biru {background:var(--biru-l); color:var(--biru-t);border-color:transparent}
.cip--amber{background:var(--amber-l);color:var(--amber);border-color:transparent}
.cip--pejal{background:var(--aksen);color:var(--aksen-atas);border-color:transparent}
.cip--dakwat{background:var(--teks);color:var(--latar);border-color:transparent}
.cip--tengah{display:flex;width:max-content;margin:0 auto}

/* ══════════════════════════════ NAV ══════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--latar) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--sempadan);
}
@supports not (backdrop-filter: blur(1px)){ .nav{background:var(--latar)} }

.nav__isi{
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  min-height:72px;
}
.nav__pautan{display:flex;gap:clamp(12px,1.8vw,30px);margin-left:auto}
.nav__pautan a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--teks2);text-decoration:none;
  font-size:17px;font-weight:700;white-space:nowrap;
}
.nav__pautan a:hover{color:var(--aksen)}
.nav__aksi{display:flex;gap:10px;margin-left:clamp(8px,1.5vw,24px)}

/* menu telefon — <details> asli, tiada JS diperlukan untuk buka/tutup */
.menu{position:relative;margin-left:auto;display:none}
.menu__butang{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:12px;
  border:2px solid var(--sempadan);background:var(--kad);
}
.menu__butang::-webkit-details-marker{display:none}
.menu__garis,.menu__garis::before,.menu__garis::after{
  display:block;width:20px;height:2.4px;border-radius:2px;background:var(--teks);
}
.menu__garis{position:relative}
.menu__garis::before,.menu__garis::after{content:"";position:absolute;left:0}
.menu__garis::before{top:-7px}
.menu__garis::after{top:7px}
.menu[open] .menu__garis{background:transparent}
.menu[open] .menu__garis::before{top:0;transform:rotate(45deg)}
.menu[open] .menu__garis::after{top:0;transform:rotate(-45deg)}
.menu__panel{
  position:absolute;right:0;top:calc(100% + 12px);
  width:min(84vw,300px);
  display:flex;flex-direction:column;gap:6px;
  padding:14px;
  background:var(--kad);border:1px solid var(--sempadan);
  border-radius:var(--r-kad);box-shadow:0 18px 40px rgba(21,28,39,.18);
}
.menu__panel > a:not(.btn){
  display:flex;align-items:center;min-height:48px;padding:0 12px;
  border-radius:10px;
  color:var(--teks);text-decoration:none;font-weight:700;font-size:17px;
}
.menu__panel > a:not(.btn):hover{background:var(--kad-dalam);color:var(--aksen)}
.menu__panel .btn{margin-top:6px}

/* ══════════════════════════════ CORAK JENAMA ══════════════════════════════ */
.corak{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.corak .ck-hantu{fill:var(--ck-hantu);opacity:.5}
.corak .ck-warna{fill:var(--ck-warna)}
.corak--hero{opacity:var(--ck-lut);height:min(46%,420px);inset:0 0 auto 0}
.corak--cta{opacity:.14}
.corak--cta .ck-hantu{fill:#8E63E4;opacity:.5}
.corak--cta .ck-warna{fill:#FFFFFF}

/* ══════════════════════════════ SEKSYEN AM ══════════════════════════════ */
.sek{padding:var(--sek-y) 0;scroll-margin-top:84px}
.sek--putih{background:var(--latar)}
.sek--krim{background:var(--latar2)}

.eyebrow{
  text-align:center;
  font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--aksen);
  margin-bottom:14px;
}
.h2{
  text-align:center;
  font-size:clamp(26px,3.4vw,38px);
  margin-bottom:14px;
  text-wrap:balance;
}
.sub{
  text-align:center;
  max-width:62ch;margin:0 auto 38px;
  font-size:clamp(17px,1.4vw,19px);
  color:var(--teks2);
  text-wrap:pretty;
}
.sub--kaki{margin:28px auto 0}
.h2 + .grid,.h2 + .aras,.h2 + .faq,.h2 + .dua,.h2 + .borang,.h2 + .peranti{margin-top:38px}
.tutup{
  text-align:center;margin-top:34px;
  font-size:clamp(17px,1.5vw,19px);font-weight:700;
}

/* grid am */
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* kad am */
.kad{
  position:relative;
  background:var(--kad-dalam);
  border:1px solid var(--sempadan);
  border-radius:var(--r-kad);
  padding:clamp(20px,2vw,28px);
}
.kad h3{font-size:clamp(19px,1.7vw,21px);margin-bottom:10px}
.kad p{color:var(--teks2)}
.kad__ikon{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:14px;
  background:var(--aksen-l);
  margin-bottom:18px;
}
.kad__ikon--biru{background:var(--biru-l)}
.kad__ikon--merah{background:var(--merah-l)}

/* jalur nota mendatar */
.jalur{
  display:flex;align-items:flex-start;gap:18px;
  margin-top:clamp(24px,3vw,34px);
  padding:clamp(20px,2.2vw,26px);
  border-radius:var(--r-kad);
}
.jalur--putih{background:var(--kad);border:1px solid var(--sempadan)}
.jalur--krim {background:var(--kad-dalam);border:1px solid var(--sempadan)}
.jalur--ungu {background:var(--aksen-l)}
.jalur__tajuk{font-size:clamp(18px,1.6vw,20px);font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.jalur--ungu .jalur__tajuk{color:var(--aksen)}
.jalur p:not(.jalur__tajuk){color:var(--teks2)}

/* alamat airph.my/plus */
.alamat{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:15px;font-weight:700;letter-spacing:.06em;
  color:var(--aksen);
}
.alamat--kaki{text-align:center;margin-top:26px;font-size:16px}

/* bulat tanda betul */
.bulat-tanda{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--aksen);color:var(--aksen-atas);
  flex:0 0 auto;
}
.bulat-tanda svg{width:16px;height:16px}
.bulat-tanda--besar{
  position:absolute;right:18px;bottom:18px;width:32px;height:32px;
}
.bulat-tanda--besar svg{width:19px;height:19px}

/* ══════════════════════════════ HERO ══════════════════════════════ */
.hero{
  position:relative;
  background:var(--latar2);
  padding:clamp(44px,5.5vw,68px) 0 clamp(48px,6vw,72px);
  overflow:hidden;
}
.hero__isi{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__tajuk{
  font-size:clamp(34px,6vw,58px);
  margin:22px 0 0;
  text-wrap:balance;
}
.hero__tajuk .ungu{color:var(--aksen)}
.hero__sub{
  max-width:60ch;margin:20px auto 0;
  font-size:clamp(17px,1.6vw,20px);
  color:var(--teks2);
  text-wrap:pretty;
}
.hero__aksi{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.hero__aksi .btn{min-width:224px}
.hero__nota{margin-top:26px;font-size:16px;color:var(--teks2)}
/* Harga normal DIPOTONG + harga sebenar sekarang. Guru mesti nampak nilai
   produk, bukan hanya perkataan "percuma" — sebab itu angka normal kekal
   di skrin dan bukan dibuang. <s> sahaja tidak cukup: sesetengah pelayar
   memberi garis nipis yang hampir hilang pada teks kelabu. */
.coret{text-decoration:line-through var(--merah);text-decoration-thickness:2px;color:var(--teks2)}
.kini{color:var(--hijau-t);font-weight:800}
.cta__sub .coret{color:#E4DBFF;text-decoration-color:#FFB4B4}
.cta__sub .kini{color:#fff}
.hero__skrin{margin:clamp(30px,4vw,44px) 0 0;width:100%}
.hero__skrin figcaption{
  margin-top:16px;text-align:center;font-size:16px;color:var(--teks2);
}

/* ══════════════════════════════ TINGKAP (mok app) ══════════════════════════════ */
.tingkap{
  text-align:left;                   /* hero berpusat; skrin app mesti kekal rata kiri */
  background:var(--kad-dalam);
  border:1.6px solid var(--sempadan);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--bayang-kad);
}
.tingkap__bar{
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;
  background:var(--kad);
  border-bottom:1px solid var(--sempadan);
}
.tingkap__titik{
  width:38px;height:8px;flex:0 0 auto;
  background:
    radial-gradient(circle 4px at 4px 4px, var(--sempadan) 98%, transparent 100%) 0 0/13px 8px repeat-x;
}
.tingkap__tajuk{font-size:13px;font-weight:700;color:var(--teks2)}
.tingkap__badan{display:flex;min-height:0}
.tingkap__isi{flex:1 1 auto;min-width:0;padding:clamp(16px,2vw,26px)}

.sisi{
  flex:0 0 176px;
  display:flex;flex-direction:column;gap:12px;
  padding:16px 10px;
  background:var(--kad);
  border-right:1px solid var(--sempadan);
}
.sisi__baris{
  display:block;height:18px;border-radius:8px;
  background:linear-gradient(to right,
    var(--sempadan) 0 13px, transparent 13px 22px, var(--sempadan) 22px 100%);
  background-repeat:no-repeat;
  opacity:.9;
}
.sisi__baris--aktif{
  background:linear-gradient(to right,
    var(--aksen) 0 13px, transparent 13px 22px, var(--aksen) 22px 100%);
  background-repeat:no-repeat;
  box-shadow:0 0 0 8px var(--aksen-l);
  border-radius:8px;
}
.sisi--mini{flex-basis:100px;gap:9px;padding:12px 8px}
.sisi--mini .sisi__baris{height:12px}

.mok__tanya{font-size:clamp(19px,1.9vw,23px);font-weight:800;letter-spacing:-.01em;margin-bottom:16px}
.mok__tanya--mini{font-size:14px;margin-bottom:10px}

.mok__span{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mok__span--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mok__span--mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

.spanbox{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--kad);
  border:1.4px solid var(--sempadan);
  border-radius:var(--r-kecil);
  padding:14px 14px 16px;
}
.spanbox b{display:block;font-size:clamp(17px,1.5vw,19px);letter-spacing:-.01em}
.spanbox span{display:block;margin-top:4px;font-size:15px;color:var(--teks2)}
.spanbox.is-pilih{background:var(--aksen-l);border-color:var(--aksen);border-width:2.4px}
.spanbox.is-pilih b{color:var(--aksen)}
.spanbox .bulat-tanda{align-self:flex-end;margin-top:auto;padding-top:0}
.mok__span--mini .spanbox{padding:9px 9px 11px}
.mok__span--mini .spanbox b{font-size:12px}
.mok__span--mini .pal{display:block;height:6px;border-radius:3px;background:var(--sempadan);margin-top:7px}

.mok__baris{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.mok__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 24px;
  border-radius:var(--r-kecil);
  background:var(--aksen);color:var(--aksen-atas);
  font-size:16px;font-weight:700;
}
.mok__btn--lebar{display:flex;width:100%;max-width:300px}
.mok__btn--mini{min-height:30px;padding:0 12px;font-size:12px;width:max-content}
.mok__kias{display:inline-flex;align-items:center;gap:10px;font-size:16px;color:var(--teks2)}

/* ══════════════════════════════ 03 JANGKA MASA ══════════════════════════════ */
.kad--jangka{
  background:var(--kad);
  padding-bottom:64px;
  border-radius:18px;
}
.kad--jangka h3{font-size:clamp(23px,2.3vw,27px);margin:0}
.kad--jangka .kad__meta{margin-top:4px;font-size:16px;color:var(--teks2)}
.kad--jangka hr{margin:16px 0}
.kad--jangka.is-pilih{background:var(--aksen-l);border-color:var(--aksen);border-width:2.6px}
.kad--jangka.is-pilih h3{color:var(--aksen)}
.kad .lencana{color:var(--aksen-atas)}
.kad--jangka:not(.is-pilih)::before{
  /* Dalam .ai semua tajuk jangka masa duduk pada garis yang sama (y=322); hanya
     kad terpilih ada lencana DI ATASnya. Jadi kad lain perlu tempah ruang itu. */
  content:"";display:block;height:44px;
}
.lencana{
  display:inline-flex;align-items:center;
  min-height:30px;padding:3px 14px;margin-bottom:14px;
  border-radius:999px;background:var(--aksen);color:var(--aksen-atas);
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}

/* ══════════════════════════════ 04 ADAPTIVE UI ══════════════════════════════ */
.aras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.panel{
  background:var(--kad);
  border:1.6px solid var(--sempadan);
  border-radius:18px;
  padding:clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;
}
.panel--ringkas{border-color:var(--aksen);border-width:2.6px}
.panel--lanjutan{background:var(--kad-dalam)}
.panel__kepala{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:26px}
.panel__kepala p{font-size:16px;font-weight:700;color:var(--teks2)}
.panel--ringkas .panel__kepala p{color:var(--aksen)}
.panel__kaki{margin-top:auto;padding-top:22px;font-size:17px;color:var(--teks2)}
.panel__tajuk{font-size:clamp(19px,1.8vw,22px)}
.panel__sub{margin-top:6px;font-size:17px;color:var(--teks2)}
.panel--ringkas .mok__btn--lebar{margin-top:22px}

.medan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.medan__label{display:block;font-size:13px;font-weight:800;color:var(--teks2);margin-bottom:6px}
.medan__kotak{
  display:flex;align-items:center;
  min-height:46px;padding:0 14px;
  background:var(--kad);
  border:1.2px solid var(--sempadan);border-radius:var(--r-medan);
  font-size:16px;
}
.medan__kotak--kosong{color:var(--teks2)}
.medan__kaki{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.medan__kaki .mok__btn{min-height:46px}

.aras__strip{margin-top:clamp(20px,2.4vw,28px)}
.pil{
  /* Lajur/baris DITETAPKAN secara eksplisit. Auto-placement menolak bulat itu
     ke barisnya sendiri apabila lajur jadi sempit. */
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:4px 14px;align-items:center;
  background:var(--kad-dalam);
  border:1px solid var(--sempadan);border-radius:14px;
  padding:16px 20px;
}
.pil__bulat{grid-area:1/1/3/2;display:block;width:14px;height:14px;border-radius:50%;align-self:center}
/* NOTA: bulat ialah <i>, bukan <span> — kalau tidak `.pil span` (0,1,1) akan
   mengalahkan `.pil__bulat` (0,1,0) dan bulat itu melompat ke baris teks. */
.pil__bulat--ungu{background:var(--aksen)}
.pil__bulat--ungum{background:var(--ungu-m)}
.pil__bulat--dakwat{background:var(--teks)}
.pil b{grid-area:1/2/2/3;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pil span{grid-area:2/2/3/3;font-size:16px;color:var(--teks2)}

/* ══════════════════════════════ 05 BORANG SEKOLAH ══════════════════════════════ */
.borang{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.2vw,28px);align-items:start}
.borang__kiri{margin:0}
.borang__kiri figcaption{margin-top:14px;font-size:16px;color:var(--teks2)}
.borang__kanan{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}

.kad--format{background:var(--kad)}
.kad--format h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:clamp(20px,1.9vw,23px)}
.kad--format h3 small{font-size:16px;font-weight:500;color:var(--teks2);letter-spacing:0}

.poin{display:flex;flex-direction:column;gap:10px}
.poin li{
  display:flex;align-items:center;gap:14px;
  min-height:52px;padding:10px 18px;
  background:var(--kad);
  border:1px solid var(--sempadan);border-radius:var(--r-medan);
  font-size:17px;
}
.poin .ikon{width:20px;height:20px}

/* pembina templat (3 lajur dalam tingkap) */
.pembina{display:grid;grid-template-columns:.86fr 1.4fr .84fr;gap:12px;padding:14px}
.palet,.kanvas,.tetapan{
  background:var(--kad);border:1px solid var(--sempadan);border-radius:10px;
  padding:12px 10px;display:flex;flex-direction:column;gap:7px;min-width:0;
}
.palet__tajuk{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teks2);margin-bottom:3px;
}
.palet__item,.blok{
  display:flex;align-items:center;gap:7px;
  min-height:28px;padding:4px 8px;border-radius:7px;
  background:var(--kad-dalam);border:1px solid var(--sempadan);
  font-size:12px;line-height:1.2;color:var(--teks);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.palet__item svg,.blok svg{width:13px;height:13px;flex:0 0 auto;color:var(--kelabu-m)}
.blok{background:var(--kad);font-weight:700}
.blok--aktif{background:var(--aksen-l);border-color:var(--aksen);border-width:1.8px;min-height:44px}
.blok--aktif svg{color:var(--aksen)}
.kanvas{gap:5px}
.tetapan__nama{font-size:15px;font-weight:800;margin:2px 0 4px}
.tetapan__pilih{display:flex;align-items:center;gap:9px;font-size:12px;min-height:24px}
.tetapan__pilih i{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;flex:0 0 auto;border-radius:4px;
  background:var(--aksen);color:var(--aksen-atas);
}
.tetapan__pilih svg{width:11px;height:11px}
.tetapan__nota{
  margin-top:8px;padding:10px;border-radius:8px;
  background:var(--aksen-l);color:var(--teks2);
  font-size:12px;line-height:1.35;
}

/* ══════════════════════════════ 06 BBM ══════════════════════════════ */
.kad--bbm{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bbm__pratonton{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:104px;
  background:var(--kad);border:1px solid var(--sempadan);border-radius:10px;
}
.kad--bbm h3{font-size:clamp(17px,1.5vw,19px);margin:0;text-wrap:pretty}

/* ══════════════════════════════ 07 BAHASA + MUAT TURUN ══════════════════════════════ */
.dua{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,24px);align-items:start}

.bahasa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.bahasa li{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  gap:2px 12px;align-items:center;
  padding:14px;border-radius:var(--r-kecil);
  background:var(--kad-dalam);border:1.2px solid var(--sempadan);
  min-height:76px;
}
.bahasa li.is-pilih{background:var(--aksen-l);border-color:var(--aksen);border-width:2.2px}
.bahasa .radio{
  grid-area:1/1/3/2;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--kelabu-m);background:var(--kad);
}
.bahasa li.is-pilih .radio{border-color:var(--aksen);box-shadow:inset 0 0 0 4px var(--kad),inset 0 0 0 10px var(--aksen)}
.bahasa b{grid-area:1/2/2/3;font-size:17px;letter-spacing:-.01em}
.bahasa li.is-pilih b{color:var(--aksen)}
.bahasa span{grid-area:2/2/3/3;font-size:14px;color:var(--teks2)}

.kelas{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.kelas li{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  gap:2px 16px;align-items:center;
  padding:14px 16px;border-radius:var(--r-kecil);
  background:var(--kad-dalam);border:1.2px solid var(--sempadan);
}
.kelas li.is-pilih{background:var(--aksen-l);border-color:var(--aksen);border-width:2.2px}
.kelas .kotak{
  grid-area:1/1/3/2;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;
  border:2px solid var(--kelabu-m);background:var(--kad);color:transparent;
}
.kelas li.is-pilih .kotak{background:var(--aksen);border-color:var(--aksen);color:var(--aksen-atas)}
.kelas .kotak svg{width:15px;height:15px}
.kelas__meta{grid-area:1/2/2/3;font-size:15px;color:var(--teks2)}
.kelas b{grid-area:2/2/3/3;font-size:18px;letter-spacing:-.01em}
.panel__aksi{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:24px}
.panel__aksi .panel__kaki{margin-top:0;padding-top:0}

/* ══════════════════════════════ 08 PERANTI ══════════════════════════════ */
.peranti{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.52fr);
  gap:clamp(16px,2.4vw,34px);
  align-items:end;
  margin-bottom:34px;
}
.peranti__satu{margin:0;display:flex;flex-direction:column;align-items:center}
.peranti__satu figcaption{margin-top:18px;font-size:16px;font-weight:700}

.komputer{width:100%}
.komputer__skrin{
  background:var(--kad);border:1.8px solid var(--sempadan);border-radius:10px;padding:14px;
}
.komputer__kaki{
  display:block;width:44%;height:9px;margin:0 auto;border-radius:0 0 4px 4px;
  background:var(--sempadan);
}
.tingkap--mini .tingkap__isi{padding:12px}
.tingkap--mini .tingkap__bar{padding:7px 10px;gap:9px}
.tingkap--mini .tingkap__titik{width:28px;height:6px;
  background:radial-gradient(circle 3px at 3px 3px, var(--sempadan) 98%, transparent 100%) 0 0/10px 6px repeat-x}
.tingkap--mini .tingkap__tajuk{font-size:11px}

.tablet{
  width:100%;
  background:var(--kad);border:2px solid var(--sempadan);border-radius:18px;padding:14px;
}
.tablet__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
.tablet__grid span{
  display:block;min-height:52px;border-radius:8px;
  background:var(--kad-dalam);border:1px solid var(--sempadan);
}
.tablet__grid span.is-pilih{background:var(--aksen-l);border-color:var(--aksen);border-width:1.8px}

.telefon{
  width:100%;max-width:170px;
  background:var(--teks);border-radius:22px;padding:22px 9px 18px;position:relative;
}
.telefon__speaker{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:34px;height:5px;border-radius:3px;background:var(--latar);opacity:.35;
}
.telefon__skrin{
  background:var(--kad);border-radius:11px;padding:12px 10px;
  display:flex;flex-direction:column;gap:9px;min-height:190px;
}
.telefon__pilih{
  display:flex;align-items:center;justify-content:center;min-height:34px;
  border-radius:8px;background:var(--aksen-l);border:1.6px solid var(--aksen);
  color:var(--aksen);font-size:13px;font-weight:800;
}
.telefon__baris{display:block;min-height:26px;border-radius:7px;background:var(--kad-dalam);border:1px solid var(--sempadan)}
.telefon .mok__btn--mini{margin-top:auto;width:100%}

/* ══════════════════════════════ 09 FAQ + CTA ══════════════════════════════ */
.faq{display:flex;flex-direction:column;gap:14px}
.faq details{
  background:var(--kad);
  border:1px solid var(--sempadan);border-radius:14px;
  padding:6px 22px 4px;
}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:16px;
  min-height:56px;
  font-size:clamp(17px,1.5vw,19px);font-weight:800;letter-spacing:-.01em;
  text-wrap:pretty;
}
.faq summary::-webkit-details-marker{display:none}
.faq .cev{
  width:20px;height:20px;flex:0 0 auto;margin-left:auto;
  color:var(--teks2);transition:transform .18s ease;
}
.faq details[open] .cev{transform:rotate(90deg);color:var(--aksen)}
.faq details > p{padding:0 36px 18px 0;color:var(--teks2);font-size:17px;text-wrap:pretty}

.cta{
  position:relative;overflow:hidden;
  margin-top:clamp(32px,4vw,46px);
  background:var(--pejal);
  border-radius:20px;
  padding:clamp(34px,4.4vw,52px) var(--gutter);
}
.cta__isi{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta__tajuk{font-size:clamp(25px,3vw,34px);color:var(--pejal-teks);text-wrap:balance}
.cta__sub{margin-top:12px;font-size:clamp(16px,1.4vw,18px);color:var(--pejal-sub)}
.cta .btn{margin-top:26px;min-width:256px}

/* ══════════════════════════════ 10 KAKI ══════════════════════════════ */
.kaki{
  background:var(--latar);
  border-top:1px solid var(--sempadan);
  padding:clamp(36px,4vw,48px) 0 clamp(28px,3vw,36px);
}
.kaki__atas{display:flex;flex-wrap:wrap;gap:26px 40px;justify-content:space-between;align-items:flex-start}
.kaki__slogan{margin-top:10px;font-size:17px;color:var(--teks2)}
.kaki__kanan{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.kaki__pautan{display:flex;flex-wrap:wrap;gap:8px 26px}
.kaki__pautan a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--teks2);text-decoration:none;font-size:17px;font-weight:700;
}
.kaki__pautan a:hover{color:var(--aksen)}
.kaki hr{margin:26px 0 18px}
.kaki__bawah{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.kaki__bawah p{font-size:16px;color:var(--teks2)}

/* ══════════════════════════════ RESPONSIF ══════════════════════════════
   Titik henti dipilih ikut kandungan, bukan ikut nama peranti:
     1100  nav penuh tidak muat lagi -> menu telefon
     980   dua panel bersebelahan jadi terlalu sempit -> bertindan
     720   grid 4 dan 3 lajur jadi tidak terbaca -> 2 lajur
     560   semua jadi satu lajur
   ==================================================================== */

@media (max-width: 1100px){
  .nav__pautan,.nav__aksi{display:none}
  .menu{display:block}
  .peranti{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.55fr)}
}

@media (max-width: 980px){
  .aras,.dua,.borang{grid-template-columns:minmax(0,1fr)}
  .bahasa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sisi{flex-basis:140px}
  .peranti{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:end;
  }
  .peranti--komputer{grid-column:1/-1}
  .komputer{max-width:560px;margin-inline:auto}
  .telefon{max-width:180px}
}

@media (max-width: 860px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mok__span{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pembina{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tetapan{grid-column:1/-1}
  .tetapan{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
  .tetapan .palet__tajuk{width:100%;margin:0}
  .tetapan__nota{width:100%;margin-top:0}
}

@media (max-width: 720px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sisi{display:none}                 /* sidebar mok tiada makna pada telefon */
  .medan,.medan__kaki{grid-template-columns:minmax(0,1fr)}
  .kelas b{font-size:16px}
}

@media (max-width: 560px){
  body{font-size:17px}
  .grid--2,.grid--3,.grid--4,.mok__span,.mok__span--2,.bahasa,.pembina{
    grid-template-columns:minmax(0,1fr);
  }
  .tablet__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__aksi{flex-direction:column;align-items:stretch;width:100%}
  .hero__aksi .btn{width:100%;min-width:0}
  .kad--jangka{padding-bottom:28px}
  .kad--jangka:not(.is-pilih)::before{display:none}   /* satu lajur: tiada apa nak dijajar */
  .bulat-tanda--besar{position:static;margin-top:16px}
  .peranti{grid-template-columns:minmax(0,1fr);justify-items:center}
  .peranti--komputer{grid-column:auto}
  .tablet{max-width:340px}
  .cta .btn{width:100%;min-width:0}
  .faq details{padding-inline:18px}
  .faq details > p{padding-right:0}
  .kaki__atas{flex-direction:column}
  .kaki__pautan{flex-direction:column;gap:0}
  .mok__btn--lebar{max-width:none}
  .jalur{flex-direction:column;gap:12px}
  .mok__baris{flex-direction:column;align-items:flex-start}
  .mok__btn{width:100%}
}

/* Cetak — laman ini jarang dicetak, tapi cikgu memang suka cetak. */
@media print{
  .nav,.corak,.langkau{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  .sek{padding:18pt 0;break-inside:avoid}
  .faq details{break-inside:avoid}
}