/* onetwoclick — gaya utama. Vanilla CSS, telefon dahulu.
   Warna ikut logo (keputusan Topik 6, 08-10-2026): koral #FF5A36 + biru gelap #121A2E.
   Mod gelap ikut tetapan telefon (prefers-color-scheme). Semua warna dikawal token di :root. */

@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fon/NotoSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fon/NotoSans-Bold.woff2') format('woff2'); }

:root {
  /* Jenama */
  --utama: #121A2E;                   /* biru gelap (dakwat logo) */
  --utama-hover: #22304F;
  --atas-utama: #FFFFFF;
  --aksen: #FF5A36;                   /* koral logo */
  --aksen-hover: #E8401F;
  --atas-aksen: #121A2E;
  --aksen-teks: #B8321A;              /* koral gelap untuk teks atas latar cerah (kontras AA) */
  --aksen-lembut: #FFEDE7;
  --kaca: hsl(0 0% 100% / 0.92);      /* kepala & bar bawah lutsinar */
  --fokus-bayang: hsl(224 44% 13% / 0.14);
  --pautan: #121A2E;
  --logo-ikon: #FF5A36;
  --logo-ikon-2: #E8401F;
  --logo-klik: #FF5A36;
  --logo-teks: #121A2E;

  /* Permukaan & teks */
  --latar: hsl(220 30% 98%);
  --permukaan: hsl(0 0% 100%);
  --permukaan-2: hsl(220 30% 95.5%);
  --garis: hsl(222 20% 88%);
  --garis-kuat: hsl(222 16% 76%);
  --teks: hsl(224 40% 14%);
  --teks-lembut: hsl(222 12% 38%);

  /* Status */
  --berjaya: hsl(152 60% 26%);
  --berjaya-lembut: hsl(148 50% 94%);
  --amaran: hsl(28 85% 30%);
  --amaran-lembut: hsl(42 95% 92%);
  --bahaya: hsl(356 66% 40%);
  --bahaya-lembut: hsl(356 85% 96%);
  --info-lembut: hsl(220 70% 96%);

  --bayang: 0 1px 2px hsl(224 40% 20% / 0.06), 0 8px 24px -12px hsl(224 40% 20% / 0.18);
  --bayang-angkat: 0 2px 6px hsl(224 40% 20% / 0.08), 0 18px 40px -18px hsl(224 40% 20% / 0.28);
  --jejari: 16px;
  --jejari-kecil: 12px;
  --lebar: 1120px;
  --mudah: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fon: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light dark;
}

/* Mod gelap: ikut tetapan telefon/komputer. */
@media (prefers-color-scheme: dark) {
  :root {
    --utama: #FF5A36;
    --utama-hover: #FF7655;
    --atas-utama: #121A2E;
    --aksen: #FF7A5C;
    --aksen-hover: #FF5A36;
    --atas-aksen: #121A2E;
    --aksen-teks: #FF8F75;
    --aksen-lembut: hsl(12 60% 18%);
    --logo-teks: #F2F4F8;
    --kaca: hsl(226 40% 9% / 0.9);
    --fokus-bayang: hsl(12 100% 60% / 0.22);
    --pautan: #FF9B83;

    --latar: #0D1220;
    --permukaan: #151C2E;
    --permukaan-2: #1C2439;
    --garis: #2A3450;
    --garis-kuat: #3B4768;
    --teks: #E9EDF5;
    --teks-lembut: #A7B0C5;

    --berjaya: hsl(150 55% 62%);
    --berjaya-lembut: hsl(152 40% 14%);
    --amaran: hsl(38 90% 66%);
    --amaran-lembut: hsl(36 50% 15%);
    --bahaya: hsl(356 85% 72%);
    --bahaya-lembut: hsl(356 45% 17%);
    --info-lembut: hsl(222 40% 17%);
    --bayang: 0 1px 2px hsl(0 0% 0% / 0.3), 0 8px 24px -12px hsl(0 0% 0% / 0.6);
    --bayang-angkat: 0 2px 6px hsl(0 0% 0% / 0.35), 0 18px 40px -18px hsl(0 0% 0% / 0.7);
  }
  .kod-qr svg, img.boleh-imbas { background: #fff; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0; font-family: var(--fon); font-size: 16px; line-height: 1.6; color: var(--teks);
  background: var(--latar); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 6vw, 2.75rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.3rem, 4vw, 1.75rem); margin: 1.6em 0 0.5em; }
h3 { font-size: 1.08rem; margin: 1.2em 0 0.4em; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--pautan); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--utama-hover); text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
img { height: auto; }
:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; border-radius: 6px; }
.tersembunyi { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lompat { position: absolute; left: 12px; top: -60px; z-index: 40; padding: 10px 14px; background: var(--utama); color: var(--atas-utama); border-radius: 10px; }
.lompat:focus { top: 12px; color: var(--atas-utama); }

.bekas { width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 16px; }
.bekas-sempit { max-width: 760px; }

/* ---------- Kepala ---------- */
.kepala {
  position: sticky; top: 0; z-index: 20;
  background: var(--kaca); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--garis);
}
.kepala .bekas { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.jenama { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo-svg { display: block; height: 28px; width: auto; }
.logo-g1 { stop-color: var(--logo-ikon); }
.logo-g2 { stop-color: var(--logo-ikon-2); }
.logo-titik, .logo-teks { fill: var(--logo-teks); }
.logo-klik { fill: var(--logo-klik); }
.nav { display: none; align-items: center; gap: 2px; }
.nav a, .menu-telefon nav a { text-decoration: none; color: var(--teks-lembut); font-weight: 700; font-size: 0.92rem; border-radius: 999px; padding: 8px 12px; transition: background 160ms var(--mudah), color 160ms var(--mudah); }
.nav a:hover, .nav a[aria-current='page'] { background: var(--permukaan-2); color: var(--teks); }
.nav .nav-portal, .menu-telefon .nav-portal { margin-left: 6px; border: 1.5px solid var(--utama); color: var(--utama); }
.nav .nav-portal:hover { background: var(--utama); color: var(--atas-utama); }
.menu-telefon { position: relative; }
.menu-telefon summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--garis); font-weight: 700; font-size: 0.92rem; cursor: pointer; user-select: none; }
.menu-telefon summary::-webkit-details-marker { display: none; }
.menu-telefon[open] summary { background: var(--permukaan-2); }
.menu-telefon nav { position: absolute; right: 0; top: calc(100% + 8px); width: min(280px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 8px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--jejari); box-shadow: var(--bayang-angkat); animation: muncul 160ms var(--mudah); }
.menu-telefon nav a { padding: 12px 14px; border-radius: 10px; font-size: 1rem; }
.menu-telefon nav a:hover, .menu-telefon nav a[aria-current='page'] { background: var(--permukaan-2); color: var(--teks); }
.menu-telefon .nav-portal { margin: 6px 0 0; text-align: center; }
@keyframes muncul { from { opacity: 0; transform: translateY(-4px); } }
@media (min-width: 880px) {
  .nav { display: flex; }
  .menu-telefon { display: none; }
  .logo-svg { height: 32px; }
}

/* ---------- Kaki ---------- */
.kaki { margin-top: 72px; padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--permukaan); border-top: 1px solid var(--garis); color: var(--teks-lembut); font-size: 0.9rem; }
.kaki-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.kaki-grid nav { display: grid; gap: 6px; align-content: start; }
.kaki a { color: var(--teks-lembut); }
.kaki a:hover { color: var(--teks); }
.kaki-tajuk { margin: 0 0 6px; color: var(--teks); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.kaki-syarikat p { margin: 0 0 10px; }
.kaki-nota { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--garis); font-size: 0.84rem; }
@media (min-width: 760px) { .kaki-grid { grid-template-columns: 1.6fr 1fr 1fr; } }

/* ---------- Asas susun atur ---------- */
.seksyen { padding: 48px 0 8px; }
.seksyen-kepala { max-width: 640px; margin: 0 0 24px; }
.seksyen-kepala.tengah { text-align: center; margin-inline: auto; }
.seksyen-kepala h2 { margin: 10px 0 8px; }
.seksyen-kepala p { color: var(--teks-lembut); margin: 0; }
.pil { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--aksen-lembut); color: var(--aksen-teks); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lead { font-size: clamp(1.04rem, 2.6vw, 1.18rem); color: var(--teks-lembut); max-width: 58ch; }
.emas { color: var(--aksen-teks); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.kad { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--jejari); padding: 20px; box-shadow: var(--bayang); min-width: 0; }
.kad + .kad { margin-top: 16px; }
.grid > .kad + .kad { margin-top: 0; }
.kad > :first-child { margin-top: 0; }
.kad > :last-child { margin-bottom: 0; }

/* ---------- Hero laman utama ---------- */
.hero { padding: 40px 0 16px; }
.hero h1 { max-width: 20ch; }
.hero .identiti { font-size: clamp(1.1rem, 3vw, 1.3rem); font-weight: 700; color: var(--teks); max-width: 46ch; margin-bottom: 10px; }
.hero .slogan { font-size: clamp(2rem, 7.5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; margin: 14px 0 16px; }
.hero .slogan span { color: var(--aksen-teks); }
.tindakan { display: grid; gap: 10px; margin: 24px 0 8px; }
@media (min-width: 560px) { .tindakan { display: flex; flex-wrap: wrap; } }

/* Langkah bernombor */
.langkah-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: l; list-style: none; padding: 0; margin: 0; }
.langkah-grid li { counter-increment: l; position: relative; padding: 20px 18px 18px; border-radius: var(--jejari); background: var(--permukaan); border: 1px solid var(--garis); }
.langkah-grid li::before { content: counter(l); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--utama); color: var(--atas-utama); font-weight: 700; margin-bottom: 12px; }
.langkah-grid h3 { margin: 0 0 6px; }
.langkah-grid p { margin: 0; color: var(--teks-lembut); font-size: 0.95rem; }

/* Kelebihan / ciri */
.ciri { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.ciri .kad h3 { margin: 10px 0 6px; }
.ciri .kad p { color: var(--teks-lembut); margin: 0; font-size: 0.95rem; }
.ikon-ciri { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--aksen-lembut); color: var(--aksen-teks); }
.ikon-ciri svg { width: 22px; height: 22px; }

/* Kad produk (laman umum & kedai) */
.produk { display: flex; flex-direction: column; gap: 10px; transition: transform 200ms var(--mudah), box-shadow 200ms var(--mudah); }
@media (hover: hover) { .produk:hover { transform: translateY(-2px); box-shadow: var(--bayang-angkat); } }
.produk .ilustrasi { position: relative; height: 150px; margin: -20px -20px 6px; display: grid; place-items: center; background: linear-gradient(160deg, var(--aksen-lembut), var(--permukaan-2)); border-bottom: 1px solid var(--garis); border-radius: var(--jejari) var(--jejari) 0 0; }
.produk .ilustrasi svg { width: 112px; height: 112px; }
.produk .hiasan { position: absolute; left: 10px; bottom: 8px; font-size: 0.68rem; color: var(--teks-lembut); background: var(--kaca); padding: 2px 8px; border-radius: 999px; }
.produk .jenis { font-size: 0.75rem; font-weight: 700; color: var(--aksen-teks); text-transform: uppercase; letter-spacing: 0.08em; }
.produk h3 { margin: 0; }
.produk p { color: var(--teks-lembut); font-size: 0.94rem; margin: 0; }
.produk .harga { font-size: 1.35rem; font-weight: 700; }
.produk .akan-datang { align-self: flex-start; }
.nota-hiasan { font-size: 0.84rem; color: var(--teks-lembut); margin-top: 12px; }

/* Keselamatan bayaran */
.jalur-selamat { display: grid; gap: 16px; padding: 24px; border-radius: 20px; background: #121A2E; color: #FFFFFF; border: 1px solid var(--garis); }
.jalur-selamat h2 { margin: 0 0 6px; }
.jalur-selamat p, .jalur-selamat li { color: hsl(220 30% 88%); }
.jalur-selamat ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.jalur-selamat strong { color: var(--atas-utama); }
.jalur-selamat .angka { font-size: 2rem; font-weight: 700; color: var(--aksen); }

/* Soalan lazim */
.soalan { border: 1px solid var(--garis); border-radius: var(--jejari-kecil); background: var(--permukaan); }
.soalan + .soalan { margin-top: 10px; }
.soalan summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.soalan summary::-webkit-details-marker { display: none; }
.soalan summary::after { content: '+'; color: var(--aksen-teks); font-size: 1.3rem; line-height: 1; flex: none; transition: transform 160ms var(--mudah); }
.soalan[open] summary::after { transform: rotate(45deg); }
.soalan > div { padding: 0 16px 14px; color: var(--teks-lembut); }
.soalan > div p:last-child { margin-bottom: 0; }

/* Kad hubungi */
.kad-hubungi { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); padding: 24px; border-radius: 20px; background: var(--permukaan); border: 1px solid var(--garis); box-shadow: var(--bayang); }
.kad-hubungi ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--teks-lembut); }
.kad-hubungi h2 { margin-top: 0; }

/* ---------- Borang ---------- */
label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; }
.medan { margin-bottom: 14px; min-width: 0; }
.bantuan { font-size: 0.86rem; color: var(--teks-lembut); margin-top: 4px; }
input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='datetime-local'], input[type='date'], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--teks);
  background: var(--permukaan); border: 1.5px solid var(--garis-kuat); border-radius: var(--jejari-kecil);
  transition: border-color 140ms var(--mudah), box-shadow 140ms var(--mudah);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--utama); box-shadow: 0 0 0 4px var(--fokus-bayang); }
.pilihan { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--garis-kuat); border-radius: var(--jejari-kecil); background: var(--permukaan); cursor: pointer; font-weight: 400; }
.pilihan input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--utama); }
.pilihan:has(input:checked) { border-color: var(--utama); background: var(--info-lembut); }
.baris-medan { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }

/* ---------- Butang ---------- */
.butang {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  font: 700 1rem/1.2 var(--fon); color: var(--atas-utama); background: var(--utama); border: 0; border-radius: 999px;
  cursor: pointer; text-decoration: none; text-align: center; transition: transform 120ms var(--mudah), background 160ms var(--mudah), box-shadow 160ms var(--mudah);
  box-shadow: 0 8px 20px -12px hsl(224 44% 17% / 0.7);
}
.butang:hover { background: var(--utama-hover); color: var(--atas-utama); text-decoration: none; }
.butang:active { transform: scale(0.97); }
.butang[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.butang.emas { background: var(--aksen); color: var(--atas-aksen); }
.butang.emas:hover { background: var(--aksen-hover); color: var(--atas-aksen); }
.butang.kedua { background: var(--permukaan); color: var(--utama); border: 1.5px solid var(--garis-kuat); box-shadow: none; }
.butang.kedua:hover { background: var(--permukaan-2); color: var(--utama); }
.butang.kecil { min-height: 40px; padding: 8px 16px; font-size: 0.9rem; }
.butang.bahaya { background: var(--bahaya); }
.butang.penuh { width: 100%; }
.butang-teks { background: none; border: 0; padding: 4px 0; color: var(--utama); font: 700 0.92rem var(--fon); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Makluman ---------- */
.makluman { padding: 12px 16px; border-radius: var(--jejari-kecil); font-size: 0.95rem; margin: 12px 0; border: 1px solid transparent; }
.makluman.info { background: var(--info-lembut); border-color: hsl(220 60% 86%); }
.makluman.berjaya { background: var(--berjaya-lembut); color: var(--berjaya); border-color: hsl(150 40% 80%); }
.makluman.amaran { background: var(--amaran-lembut); color: var(--amaran); border-color: hsl(40 80% 78%); }
.makluman.ralat { background: var(--bahaya-lembut); color: var(--bahaya); border-color: hsl(356 70% 86%); }
.draf { background: var(--amaran-lembut); color: var(--amaran); text-align: center; font-size: 0.86rem; font-weight: 700; padding: 8px 16px; }
.isi { background: var(--amaran-lembut); color: var(--amaran); padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* WhatsApp admin (keputusan 1.5 B) */
.butang-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; max-width: 100%;
  padding: 10px 18px; border-radius: 999px; font: 700 0.94rem/1.2 var(--fon); text-decoration: none; text-align: center;
  color: hsl(0 0% 100%); background: hsl(152 60% 28%); border: 0; transition: background 0.18s var(--mudah), transform 0.12s var(--mudah);
}
.butang-wa:hover { background: hsl(152 60% 23%); color: hsl(0 0% 100%); }
.butang-wa:active { transform: scale(0.97); }
.makluman .butang-wa { margin-top: 10px; }
.bantuan-wa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; color: var(--teks-lembut); font-size: 0.92rem; }
.bantuan-wa p { margin: 0; flex: 1 1 200px; min-width: 0; }

/* ---------- Jadual ---------- */
.jadual-balut { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--garis); border-radius: var(--jejari-kecil); background: var(--permukaan); }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--garis); vertical-align: top; }
th { background: var(--permukaan-2); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.nombor, th.nombor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Lencana ---------- */
.lencana { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--permukaan-2); color: var(--teks-lembut); white-space: nowrap; }
.lencana.panjang { white-space: normal; border-radius: 12px; padding: 4px 12px; max-width: 100%; }
.lencana.dibayar, .lencana.diluluskan, .lencana.dibuka, .lencana.diagih, .lencana.diterima { background: var(--berjaya-lembut); color: var(--berjaya); }
.lencana.menunggu, .lencana.menunggu_bayaran, .lencana.belum_dibuka, .lencana.lewat, .lencana.menunggu_kelulusan { background: var(--amaran-lembut); color: var(--amaran); }
.lencana.ditolak, .lencana.digantung, .lencana.gagal, .lencana.semakan_manual, .lencana.pertikaian { background: var(--bahaya-lembut); color: var(--bahaya); }
.lencana.akan-datang { background: var(--aksen-lembut); color: var(--aksen-teks); }

/* ---------- Dokumen (Terma/Privasi/Dasar) ---------- */
.dokumen { padding: 32px 16px 0; }
.dokumen h2 { padding-top: 8px; }
.dokumen ol, .dokumen ul { padding-left: 1.3em; }
.dokumen li { margin-bottom: 0.4em; }
.dokumen .tarikh { color: var(--teks-lembut); font-size: 0.92rem; }

/* ---------- Kedai ---------- */
.hero-kedai { padding: 28px 0 12px; }
.hero-kedai .anjuran { display: flex; align-items: center; gap: 12px; color: var(--teks-lembut); font-size: 0.9rem; margin-bottom: 14px; }
.hero-kedai .anjuran strong { display: block; color: var(--teks); }
.lambang { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--utama); color: var(--atas-utama); font-weight: 700; flex: none; }
.hero-kedai h1 { font-size: clamp(1.6rem, 6vw, 2.6rem); max-width: 22ch; margin-bottom: 8px; }
.kiraan { display: inline-flex; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.kiraan div { min-width: 64px; padding: 10px 12px; border-radius: 14px; background: var(--permukaan); border: 1px solid var(--garis); text-align: center; }
.kiraan b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--utama); font-variant-numeric: tabular-nums; }
.kiraan span { font-size: 0.72rem; color: var(--teks-lembut); text-transform: uppercase; letter-spacing: 0.08em; }
.pautan-carta { background: none; border: 0; padding: 0; color: var(--utama); font: 700 0.92rem var(--fon); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.kad-murid { border-left: 4px solid var(--aksen); }
.kad-murid .kepala-murid { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kad-murid h3 { margin: 0; }
.barang { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--garis); }
.barang:first-of-type { border-top: 0; }
.anggaran { font-size: 0.84rem; color: var(--berjaya); font-weight: 700; }
.langkah-kedai { display: flex; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 0.82rem; color: var(--teks-lembut); flex-wrap: wrap; }
.langkah-kedai li { padding: 4px 10px; border-radius: 999px; background: var(--permukaan-2); }
.langkah-kedai li[aria-current='step'] { background: var(--utama); color: var(--atas-utama); font-weight: 700; }
.syarikat-bayar { font-size: 0.84rem; color: var(--teks-lembut); border-top: 1px solid var(--garis); padding-top: 12px; margin-top: 16px; }

/* Bar troli melekat di bawah */
.troli-bar {
  position: sticky; bottom: 0; z-index: 15; margin-top: 24px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--kaca); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--garis); box-shadow: 0 -8px 24px -16px hsl(224 40% 20% / 0.35);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.troli-bar .jumlah { font-weight: 700; font-size: 1.2rem; }
.troli-bar .butang { flex: 0 0 auto; max-width: 320px; white-space: nowrap; padding-inline: 18px; }
.troli-bar > div { min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.troli-bar .bantuan { display: block; margin: 0; }

/* Garis masa pesanan */
.garis-masa { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.garis-masa li { position: relative; padding: 0 0 16px 30px; color: var(--teks-lembut); }
.garis-masa li::before { content: ''; position: absolute; left: 7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--permukaan); border: 2px solid var(--garis-kuat); }
.garis-masa li::after { content: ''; position: absolute; left: 12px; top: 20px; bottom: 0; width: 2px; background: var(--garis); }
.garis-masa li:last-child::after { display: none; }
.garis-masa li.siap { color: var(--teks); font-weight: 700; }
.garis-masa li.siap::before { background: var(--berjaya); border-color: var(--berjaya); }
.garis-masa li.semasa::before { background: var(--aksen); border-color: var(--aksen); }

/* ---------- Papan pemuka ---------- */
.tab { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 16px 0; scrollbar-width: none; }
.tab button { flex: none; min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks-lembut); font: 700 0.92rem var(--fon); cursor: pointer; transition: all 160ms var(--mudah); }
.tab button[aria-selected='true'] { background: var(--utama); color: var(--atas-utama); border-color: transparent; }
.statistik { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.statistik .kad { padding: 16px; margin: 0; }
.statistik .nilai { font-size: 1.5rem; font-weight: 700; }
.statistik .tajuk { font-size: 0.84rem; color: var(--teks-lembut); }
.deret-butang { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.kod-qr { display: grid; justify-items: center; gap: 8px; }
.kod-qr svg { width: min(260px, 100%); height: auto; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--garis); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 50; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--teks); color: var(--permukaan); font-weight: 700; box-shadow: var(--bayang-angkat); transition: transform 220ms var(--mudah), opacity 220ms var(--mudah); pointer-events: none; }
.toast.papar { transform: translate(-50%, 0); opacity: 1; }
.pemuat { display: inline-block; width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pusing 700ms linear infinite; vertical-align: -3px; }
@keyframes pusing { to { transform: rotate(360deg); } }

/* ---------- Carta saiz ---------- */
.carta { margin: 0; padding: 20px; border-radius: 20px; background: var(--permukaan); border: 1px solid var(--garis); box-shadow: var(--bayang); min-width: 0; }
.carta figcaption { display: grid; gap: 4px; margin-bottom: 16px; }
.carta figcaption strong { font-size: 1.3rem; }
.carta-label { color: var(--aksen-teks); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.carta .asal { display: block; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--teks-lembut); }
.carta-isi { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; min-width: 0; }
.carta-rajah { width: 100%; max-width: 130px; height: auto; margin: 0 auto; display: block; }
.garis-baju { fill: var(--permukaan-2); stroke: var(--teks-lembut); stroke-width: 2; stroke-linejoin: round; }
.garis-ukur { stroke: var(--aksen-teks); stroke-width: 2.5; stroke-dasharray: 5 4; }
.label-ukur { fill: var(--aksen-teks); font: 700 14px var(--fon); text-anchor: middle; }
.carta-jadual { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; }
.carta-jadual th, .carta-jadual td { padding: 9px 8px; text-align: center; overflow-wrap: anywhere; border-bottom: 1px solid var(--garis); }
.carta-jadual thead th { background: var(--aksen-lembut); color: var(--teks); font-size: 0.86rem; vertical-align: bottom; white-space: normal; }
.carta-jadual thead .unit { display: block; font-size: 0.68rem; color: var(--aksen-teks); font-weight: 700; }
.carta-jadual tbody th { color: var(--utama); font-weight: 700; background: var(--permukaan-2); }
.carta-jadual tbody tr:nth-child(even) td { background: var(--permukaan-2); }
.carta-jadual tbody tr:last-child th, .carta-jadual tbody tr:last-child td { border-bottom: 0; }
.carta-jadual tbody tr.dipilih th, .carta-jadual tbody tr.dipilih td, .carta-jadual tbody tr.dipilih:nth-child(even) td { background: var(--aksen-lembut); }
.carta-nota { margin: 12px 0 0; font-size: 0.82rem; color: var(--teks-lembut); }
.carta-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }

/* Tetingkap (dialog) */
dialog.tetingkap { width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--garis); border-radius: 20px; background: var(--permukaan); color: var(--teks); box-shadow: 0 30px 80px -20px hsl(224 40% 10% / 0.5); }
dialog.tetingkap::backdrop { background: hsl(224 40% 10% / 0.5); backdrop-filter: blur(3px); }
dialog.tetingkap .tetingkap-isi { padding: 18px; overflow: auto; max-height: calc(100dvh - 110px); }
dialog.tetingkap header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--garis); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
@media print {
  .kepala, .troli-bar, .butang, .lompat, .kaki { display: none !important; }
  body { background: #fff; }
  .kad, .carta { box-shadow: none; }
}

/* Ilustrasi garis produk (gambar hiasan) */
.il-garis { fill: none; stroke: var(--utama); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.il-isi { fill: var(--permukaan); }
.il-aksen { fill: var(--aksen); }

/* Senarai butiran dua lajur (halaman pengesahan resit) */
.senarai-butiran { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 8px 16px; margin: 16px 0; }
.senarai-butiran dt { color: var(--teks-lembut); font-size: 0.9rem; }
.senarai-butiran dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Kedai: produk terus dalam kad murid (saiz + butang − / +) ---------- */
.pilihan-produk { display: grid; gap: 10px; margin-top: 14px; }
.baris-produk { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--garis); border-radius: var(--jejari-kecil); background: var(--permukaan-2); transition: box-shadow 0.3s var(--mudah), border-color 0.3s var(--mudah); }
.baris-produk.sorot { border-color: var(--aksen); box-shadow: 0 0 0 4px var(--aksen-lembut); }
.maklumat-produk { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.maklumat-produk strong { font-size: 0.98rem; }
.harga-kecil { font-weight: 700; white-space: nowrap; }
.kawalan-produk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kawalan-produk select { flex: 1 1 140px; min-width: 0; }
.pembilang { display: inline-flex; align-items: center; border: 1px solid var(--garis-kuat); border-radius: 999px; background: var(--permukaan); overflow: hidden; margin-left: auto; }
.pembilang output { min-width: 40px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.butang-bilang { width: 48px; height: 48px; border: 0; background: transparent; color: var(--teks); font-size: 1.4rem; font-weight: 700; cursor: pointer; touch-action: manipulation; transition: background 0.15s var(--mudah), transform 0.1s var(--mudah); }
.butang-bilang[data-tambah] { background: var(--utama); color: var(--atas-utama); }
.butang-bilang:hover:not(:disabled) { filter: brightness(1.08); }
.butang-bilang:active:not(:disabled) { transform: scale(0.94); }
.butang-bilang:disabled { opacity: 0.35; cursor: not-allowed; }
.ringkasan-barang { margin-top: 10px; }
.label-kecil { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aksen-teks); }
@media (prefers-reduced-motion: reduce) { .baris-produk, .butang-bilang { transition: none; } }

/* ---------- Status Sistem ---------- */
.status-ringkas { display: flex; align-items: center; gap: 12px; padding: 16px 18px; margin: 8px 0 16px; border-radius: var(--jejari); border: 1px solid var(--garis); background: var(--permukaan); font-weight: 700; font-size: 1.05rem; }
.status-ringkas .titik { width: 14px; height: 14px; border-radius: 50%; background: var(--garis-kuat); flex: none; }
.status-ringkas.baik { background: var(--berjaya-lembut); color: var(--berjaya); border-color: transparent; }
.status-ringkas.baik .titik, .kotak-hari.baik { background: var(--berjaya); }
.status-ringkas.terganggu { background: var(--amaran-lembut); color: var(--amaran); border-color: transparent; }
.status-ringkas.terganggu .titik, .kotak-hari.terganggu { background: hsl(38 92% 50%); }
.status-ringkas.gangguan { background: var(--bahaya-lembut); color: var(--bahaya); border-color: transparent; }
.status-ringkas.gangguan .titik, .kotak-hari.gangguan { background: var(--bahaya); }
.status-komponen { display: grid; gap: 12px; }
.status-baris h2 { font-size: 1rem; margin: 0; }
.status-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.jalur-hari { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.kotak-hari { display: inline-block; height: 28px; min-width: 0; border-radius: 4px; background: var(--permukaan-2); }
.kotak-hari.tiada { background: var(--garis); }
.label-hari { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--teks-lembut); margin-top: 6px; }
.status-petunjuk { list-style: none; padding: 0; display: grid; gap: 8px; }
.status-petunjuk .kotak-hari { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; }

/* ---------- Galeri tangkapan skrin (laman utama) ---------- */
.galeri { display: grid; gap: 16px; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain; }
.galeri figure { margin: 0; scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.galeri .bingkai { overflow: hidden; border-radius: 22px; border: 1px solid var(--garis); background: var(--permukaan); box-shadow: var(--bayang-angkat); }
.galeri .bingkai img { display: block; width: 100%; height: auto; }
.galeri .bingkai.telefon { border: 8px solid var(--utama); border-radius: 30px; }
.galeri figcaption { font-size: 0.9rem; color: var(--teks-lembut); }
.galeri figcaption strong { display: block; color: var(--teks); }
@media (min-width: 760px) { .galeri { grid-auto-columns: minmax(240px, 300px); } .galeri .lebar { grid-column: span 2; width: 560px; } }
.nota-galeri { font-size: 0.84rem; color: var(--teks-lembut); margin-top: 6px; }

/* ---------- Cara bermula (sekolah) ---------- */
.cara-bermula { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); list-style: none; counter-reset: cb; padding: 0; margin: 0; }
.cara-bermula li { counter-increment: cb; position: relative; padding: 18px 18px 18px 64px; border-radius: var(--jejari); background: var(--permukaan); border: 1px solid var(--garis); }
.cara-bermula li::before { content: counter(cb); position: absolute; left: 16px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--aksen); color: var(--atas-aksen); font-weight: 700; }
.cara-bermula h3 { margin: 0 0 4px; }
.cara-bermula p { margin: 0; color: var(--teks-lembut); font-size: 0.94rem; }
.cara-bermula .masa { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--aksen-teks); }

/* ---------- Panduan bergambar ---------- */
.panduan-langkah { counter-reset: pl; list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.panduan-langkah > li { counter-increment: pl; }
.panduan-langkah h2 { display: flex; gap: 12px; align-items: center; margin: 0 0 8px; }
.panduan-langkah h2::before { content: counter(pl); display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--utama); color: var(--atas-utama); font-size: 1rem; }
.panduan-langkah figure { margin: 12px 0 0; }
.panduan-langkah img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--garis); box-shadow: var(--bayang); }
.panduan-langkah figcaption { font-size: 0.84rem; color: var(--teks-lembut); margin-top: 6px; }