/* AIRPH Plus — landing v4 (desktop dahulu). Reka bentuk: 02-Reka-Sistem/AIRPH-PLUS-22-Landing-v4.ai
   (bina_pluslanding4.py, 1440 lebar; unit penjana = px). Token sama dengan 09-App/public/aset/css/app.css. */
:root {
  --ungu: #6B38D4; --ungu-g: #41199B; --ungu-m: #8E63E4; --ungu-l: #F3EFFF; --zon-ungu: #F1ECFE;
  --putih: #FFFFFF; --dakwat: #151C27; --kelabu: #454C5B; --garis: #E4E7EF; --sidebar: #F4F5F9;
  --teal-t: #0B5E57; --zon-teal: #E5F3F0; --biru-t: #1B4B9E; --zon-biru: #EAF1FB;
  --hijau-t: #08573A; --hijau-l: #E3F2EA; --amber-t: #5C3A00; --amber-l: #FCEFD6;
  --fon: "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: Menlo, "SF Mono", Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--putih); color: var(--dakwat); font-family: var(--fon); font-size: 18px; line-height: 1.35; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--ungu); outline-offset: 3px; }
.langkau { position: absolute; left: -9999px; }
.langkau:focus { left: 16px; top: 16px; z-index: 99; background: #fff; padding: 10px 16px; border-radius: 12px; }
.bekas { max-width: 1440px; margin: 0 auto; padding: 0 64px; }

/* butang */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 28px; border-radius: 16px; font-weight: 700; font-size: 18px; border: 2px solid var(--garis); background: var(--putih); color: var(--dakwat); white-space: nowrap; }
.btn.utama { background: var(--ungu); border-color: var(--ungu); color: var(--putih); }
.btn.utama:hover { background: var(--ungu-g); border-color: var(--ungu-g); }
.btn.kedua:hover { border-color: var(--ungu-m); }
.btn.besar { height: 72px; font-size: 21px; padding: 0 40px; }
.btn.penuh { width: 100%; height: 40px; font-size: 17px; border-radius: 16px; }
.btn.putih { background: var(--putih); border-color: var(--putih); color: var(--ungu-g); width: 340px; height: 64px; font-size: 21px; }

/* nav */
.nav { height: 92px; border-bottom: 1.2px solid var(--garis); background: var(--putih); position: sticky; top: 0; z-index: 20; }
.nav-dalam { height: 100%; display: flex; align-items: center; }
.jenama { display: flex; align-items: center; gap: 2px; font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.jenama img { width: 56px; height: 44px; }
.jenama b { color: var(--ungu); }
.jenama.kecil { font-size: 18px; }
.jenama.kecil img { width: 46px; height: 36px; }
.nav-pautan { display: flex; gap: 50px; margin-left: 286px; }
.nav-pautan a { font-weight: 700; font-size: 18px; color: var(--kelabu); }
.nav-pautan a:hover { color: var(--ungu-g); }
.nav-btn { margin-left: auto; display: flex; gap: 14px; }
.nav-btn .btn:first-child { width: 170px; }
.nav-btn .btn:last-child { width: 184px; }

/* hero */
.hero { background: #F7F5FF url(../img/corak-hero.svg) right top / 120px repeat; background-size: 120px; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0 47.2% 0 0; background: #F7F5FF; }
.hero-dalam { position: relative; min-height: 700px; display: flex; align-items: flex-start; justify-content: space-between; }
.hero-kiri { padding-top: 92px; }
.lencana-hijau { display: inline-flex; align-items: center; justify-content: center; width: 290px; height: 44px; border-radius: 22px; background: var(--hijau-l); color: var(--hijau-t); font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: .08em; }
.hero h1 { margin-top: 30px; font-size: 66px; line-height: 76px; letter-spacing: -.03em; }
.hero h1 span { color: var(--ungu); }
.hero-sub { margin-top: 30px; font-size: 24px; color: var(--kelabu); }
.hero-btn { display: flex; gap: 16px; margin-top: 30px; }
.hero-btn .btn:first-child { width: 310px; padding: 0; }
.hero-btn .btn:last-child { width: 200px; padding: 0; }
.hero-nota { margin-top: 32px; font-size: 18px; color: var(--kelabu); display: flex; align-items: center; gap: 12px; }

/* mock app */
.mock { margin-top: 76px; width: 616px; height: 548px; display: flex; background: var(--putih); border: 1.4px solid var(--garis); border-radius: 22px; box-shadow: 6px 10px 0 #E2DCF7; overflow: hidden; flex: none; }
.mock-sb { width: 150px; border-right: 1.2px solid var(--garis); padding: 16px 10px; display: flex; flex-direction: column; gap: 10px; }
.m-zon { border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; }
.m-zon.ungu { background: var(--zon-ungu); gap: 10px; height: 120px; }
.m-zon.teal { background: var(--zon-teal); height: 230px; padding: 16px 16px; gap: 15px; color: var(--teal-t); font-weight: 700; font-size: 13px; }
.m-zon.biru { background: var(--zon-biru); flex: 1; padding: 18px 16px; color: var(--biru-t); font-weight: 700; font-size: 13px; }
.m-jana { background: var(--ungu); color: #fff; border-radius: 10px; height: 40px; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.m-folder { background: #fff; border: 1px solid var(--garis); border-radius: 10px; height: 34px; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; }
.mock-utama { flex: 1; padding: 28px 24px 30px 22px; display: flex; flex-direction: column; }
.m-mesej { align-self: flex-end; background: var(--sidebar); border-radius: 22px; width: 306px; height: 44px; display: grid; place-items: center; font-size: 16px; }
.m-siap { margin: 22px 0 14px; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.m-kad { border: 1.4px solid var(--garis); border-radius: 16px; padding: 16px 10px; height: 300px; display: flex; flex-direction: column; gap: 8px; }
.m-baris { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.m-baris b { width: 82px; }
.m-baris.tunda { background: var(--amber-l); color: var(--amber-t); font-weight: 700; font-size: 13px; }
.cip { background: var(--ungu-l); color: var(--ungu-g); border-radius: 13px; padding: 4px 10px; font-weight: 700; font-size: 12px; }
.m-gabung { margin: 6px 0 0 6px; align-self: flex-start; background: var(--ungu); color: #fff; border-radius: 12px; width: 190px; height: 42px; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.m-input { margin-top: auto; height: 66px; border: 1.4px solid var(--garis); border-radius: 18px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; color: var(--kelabu); font-size: 15px; }
.m-input i { width: 36px; height: 36px; border-radius: 50%; background: var(--ungu); }
.kilau { display: inline-block; width: 22px; height: 22px; background: currentColor; clip-path: path("M11 0C11 8 14 11 22 11 14 11 11 14 11 22 11 14 8 11 0 11 8 11 11 8 11 0Z"); color: var(--ungu); flex: none; }

/* seksyen umum */
.seksyen { padding: 66px 0 0; }
.seksyen.kelabu { background: var(--sidebar); }
.eyebrow { text-align: center; font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: .16em; color: var(--ungu-g); }
.seksyen h2 { text-align: center; font-size: 44px; letter-spacing: -.02em; margin-top: 18px; }
.seksyen h2.kecil { font-size: 40px; margin-top: 22px; }
.sub-tengah { text-align: center; font-size: 22px; color: var(--kelabu); margin-top: 22px; }

#cara { min-height: 420px; }
.langkah { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 26px; }
.lk { height: 180px; border-radius: 22px; padding: 24px 32px; }
.lk.teal { background: var(--zon-teal); } .lk.ungu { background: var(--zon-ungu); } .lk.biru { background: var(--zon-biru); }
.lk-atas { display: flex; align-items: center; gap: 20px; margin-left: -8px; }
.lk .no { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 26px; flex: none; }
.lk.teal .no { background: var(--teal-t); } .lk.ungu .no { background: var(--ungu-g); } .lk.biru .no { background: var(--biru-t); }
.lk h3 { font-size: 28px; letter-spacing: -.01em; }
.lk p { font-size: 21px; color: var(--kelabu); margin-top: 32px; }

#ciri { min-height: 620px; }
.ciri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 34px; }
.kad-ciri { background: #fff; border: 1.4px solid var(--garis); border-radius: 20px; height: 176px; padding: 28px 28px 0; }
.kc-atas { display: flex; align-items: center; gap: 20px; }
.kc-atas h3 { flex: 1; font-size: 24px; letter-spacing: -.02em; white-space: nowrap; }
.kc-ik { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.kc-ik .kilau { width: 28px; height: 28px; clip-path: path("M14 0C14 10 18 14 28 14 18 14 14 18 14 28 14 18 10 14 0 14 10 14 14 10 14 0Z"); }
.kc-ik.amber { background: var(--amber-l); color: var(--amber-t); } .kc-ik.ungu { background: var(--zon-ungu); color: var(--ungu-g); }
.kc-ik.teal { background: var(--zon-teal); color: var(--teal-t); } .kc-ik.biru { background: var(--zon-biru); color: var(--biru-t); }
.kc-ik .kilau { color: inherit; }
.kad-ciri p { font-size: 18.5px; color: var(--kelabu); margin-top: 20px; }

#harga { min-height: 640px; }
.harga { display: flex; justify-content: center; gap: 36px; margin-top: 32px; }
.kad-harga { width: 520px; height: 330px; border: 1.6px solid var(--garis); border-radius: 24px; padding: 32px 40px 0; background: #fff; display: flex; flex-direction: column; }
.kad-harga.utama { background: var(--zon-ungu); border: 3px solid var(--ungu); }
.kh-atas { display: flex; justify-content: space-between; align-items: center; }
.kh-nama { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .12em; color: var(--ungu-g); }
.lencana-amber { display: inline-grid; place-items: center; width: 160px; height: 34px; border-radius: 17px; background: var(--amber-l); color: var(--amber-t); font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; }
.kad-harga s { font-size: 24px; color: var(--kelabu); margin-top: 34px; }
.kh-harga { display: flex; align-items: baseline; gap: 12px; margin-top: -6px; }
.kh-harga b { font-size: 88px; letter-spacing: -.03em; line-height: 1; }
.kh-harga span { font-size: 22px; color: var(--kelabu); }
.kad-harga p { font-size: 20px; color: var(--kelabu); margin: 14px 0 14px; }

.bayar { min-height: 360px; padding-top: 58px; }
.bayar-l { margin-top: 26px; }
.kad-bayar { background: #fff; border: 1.4px solid var(--garis); border-radius: 20px; height: 120px; padding: 0 28px 0 34px; display: flex; align-items: center; gap: 22px; }
.kad-bayar .no { width: 52px; height: 52px; border-radius: 50%; background: var(--ungu-l); color: var(--ungu-g); display: grid; place-items: center; font-weight: 700; font-size: 24px; flex: none; }
.kad-bayar h3 { flex: 1; font-size: 26px; letter-spacing: -.01em; }

#soalan { min-height: 500px; }
.soalan { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; margin-top: 28px; }
.kad-sq { border: 1.4px solid var(--garis); border-radius: 20px; height: 124px; padding: 30px 28px 0 32px; display: flex; justify-content: space-between; align-items: flex-start; }
.kad-sq h3 { font-size: 23px; letter-spacing: -.01em; }
.kad-sq p { font-size: 20px; color: var(--kelabu); margin-top: 16px; }

.cta-luar { min-height: 300px; padding-top: 20px; }
.cta { height: 240px; border-radius: 28px; background: var(--ungu-g) url(../img/corak-cta.svg) 0 0 / 96px repeat; color: #fff; text-align: center; padding-top: 52px; }
.cta h2 { font-size: 46px; letter-spacing: -.02em; }
.cta p { font-size: 22px; color: #E4DBFF; margin: 10px 0 18px; }

.kaki { height: 130px; padding-top: 20px; }
.kaki-dalam { display: flex; justify-content: space-between; align-items: center; border-top: 1.2px solid var(--garis); padding-top: 24px; margin: 0 64px; padding-left: 0; padding-right: 0; font-size: 16px; color: var(--kelabu); }
.kaki .jenama { color: var(--dakwat); }

/* info (i) */
.info-w { position: relative; display: inline-flex; flex: none; }
.info { width: 24px; height: 24px; border-radius: 50%; border: 1.8px solid var(--ungu); background: #fff; color: var(--ungu); font: 700 15px/1 var(--fon); display: grid; place-items: center; cursor: pointer; padding: 0; }
.info:hover { background: var(--ungu-l); }
.info-pop { display: none; position: absolute; right: -12px; top: calc(100% + 10px); z-index: 30; width: 300px; background: var(--dakwat); color: #fff; font-size: 16px; font-weight: 400; line-height: 1.45; padding: 14px 16px; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.2); text-align: left; letter-spacing: 0; }
.hero-nota .info-pop { left: -12px; right: auto; }
.info-w.buka .info-pop { display: block; }

/* bawah 1440: susun lajur, tiada reka bentuk telefon */
@media (max-width: 1340px) {
  .nav-pautan { margin-left: auto; margin-right: 32px; gap: 32px; }
  .hero-dalam { flex-direction: column; padding-bottom: 64px; }
  .hero::before { inset: 0; }
  .mock { margin-top: 48px; max-width: 100%; }
  .harga { flex-direction: column; align-items: center; }
  .kad-harga { width: min(520px, 100%); }
}
@media (max-width: 1100px) {
  .langkah, .ciri { grid-template-columns: 1fr 1fr; }
  .soalan { grid-template-columns: 1fr; }
  .kad-ciri, .lk, .kad-sq { height: auto; padding-bottom: 28px; }
  .kc-atas h3 { white-space: normal; }
  .langkah > *, .ciri > * { min-width: 0; }
  .nav-pautan { display: none; }
}
@media (max-width: 760px) {
  .bekas { padding: 0 16px; }
  .kaki-dalam { margin: 0 16px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .langkah, .ciri { grid-template-columns: 1fr; }
  .hero h1 { font-size: 44px; line-height: 52px; }
  .hero-btn { flex-direction: column; }
  .mock { display: none; }
  .nav-btn .btn:first-child { display: none; }
  .btn.putih { width: auto; }
  .cta { height: auto; padding: 40px 16px; }
  .cta h2 { font-size: 32px; }
}

/* ===================================== 27 Okt 2026: ciri baharu (bina_pluslanding4.py) */
/* mock: sidebar baharu — atas tetap + tab Sediakan | Sejarah */
.mock-sb { width: 178px; }
.m-zon.ungu { height: 120px; }
.m-jana { font-size: 13px; }
.m-tab { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; background: var(--sidebar); border-radius: 12px; height: 38px; }
.m-tab span { display: grid; place-items: center; font-weight: 700; font-size: 10.5px; color: var(--kelabu); border-radius: 9px; }
.m-tab span.aktif { background: var(--zon-teal); color: var(--teal-t); box-shadow: inset 0 0 0 1.4px var(--teal-t); }
.m-zon.teal.m-senarai { height: auto; flex: 1; gap: 0; padding: 16px; color: var(--dakwat); font-size: 13px; }
.m-senarai span { display: flex; justify-content: space-between; align-items: center; height: 48px; margin-top: -10px; }
.m-senarai span::after { content: "✓"; width: 16px; height: 16px; border-radius: 50%; background: var(--hijau-l); color: var(--hijau-t); display: grid; place-items: center; font-size: 10px; }
#ciri { min-height: 700px; }
.ciri { grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 34px; }
.kad-ciri { height: 200px; padding: 24px 24px 0; }
.kc-atas { justify-content: space-between; align-items: flex-start; }
.kc-ik { width: 52px; height: 52px; border-radius: 15px; }
.kc-ik .kilau { width: 26px; height: 26px; clip-path: path("M13 0C13 9 17 13 26 13 17 13 13 17 13 26 13 17 9 13 0 13 9 13 13 9 13 0Z"); }
.kad-ciri h3 { font-size: 22px; letter-spacing: -.01em; margin-top: 22px; }
.kad-ciri p { font-size: 14.5px; margin-top: 12px; letter-spacing: -.005em; }
.bayar { min-height: 380px; }
.kb-teks { flex: 1; }
.kb-teks h3 { font-size: 26px; letter-spacing: -.01em; }
.kb-teks p { font-size: 17px; color: var(--hijau-t); margin-top: 6px; }
#soalan { min-height: 650px; }
@media (max-width: 1340px) { .ciri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) { .kad-ciri { height: auto; padding-bottom: 24px; } }
@media (max-width: 760px) { .ciri { grid-template-columns: 1fr; } .kad-bayar { height: auto; padding: 20px; } }