/* ============================================================
   hrmsystem.my — LAMAN WEB AWAM
   Tema sama dengan sistem (style.css V4 "Moden Lembut"):
   indigo #3446C8, gelap #17153A, jalur pelangi dari logo,
   Plus Jakarta Sans. Hijau / kuning / merah untuk status sahaja.
   ============================================================ */

:root {
  --utama: #3446C8;
  --utama-2: #26349A;
  --utama-3: #EEF0FC;
  --gelap: #17153A;
  --gelap-2: #2A2760;
  --pelangi: linear-gradient(90deg, #4B3A9C 0%, #B7407F 38%, #E2A357 68%, #3E9A96 100%);

  --dakwat: #1B1D2A;
  --dakwat-2: #3A3E52;
  --kelabu: #5F6479;
  --kertas: #F4F5FA;
  --putih: #FFFFFF;
  --garis: #E3E5EF;
  --garis-2: #F0F1F7;

  --hijau: #157054;
  --hijau-2: #E3F5EE;
  --ochre: #9A5B00;
  --ochre-2: #FFF1DC;
  --merah: #A3203B;
  --merah-2: #FDE8EC;

  --r: 14px;
  --r-besar: 24px;
  --bayang: 0 1px 2px rgba(27,29,42,.05), 0 6px 20px rgba(27,29,42,.04);
  --bayang-besar: 0 40px 90px -30px rgba(23,21,58,.38);
  --ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lebar: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--kertas); color: var(--dakwat);
  font-family: var(--ui); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--utama); text-decoration: none; }
a:hover { color: var(--utama-2); }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.025em; line-height: 1.12; }
p { margin: 0; }
.wang, .angka { font-variant-numeric: tabular-nums; }
.tersembunyi { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(52,70,200,.45); outline-offset: 2px; border-radius: 6px; }

.balut { max-width: var(--lebar); margin: 0 auto; padding: 0 24px; }
.seksyen { padding: 104px 0; }
.seksyen.rapat { padding: 72px 0; }
.kepala { display: flex; flex-direction: column; gap: 16px; margin-bottom: 52px; }
.kepala.tengah { align-items: center; text-align: center; }
.kepala.tengah .lead { max-width: 660px; }
.kening { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--utama); }
.h2 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; letter-spacing: -0.035em; }
.lead { font-size: 18px; line-height: 1.65; color: var(--kelabu); }
.redup { color: var(--kelabu); }
.teks-pelangi { background: var(--pelangi); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Butang ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: var(--r);
  font-family: inherit; font-size: 15.5px; font-weight: 700; line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.utama { background: var(--utama); color: #fff; box-shadow: 0 10px 24px -10px rgba(52,70,200,.7); }
.btn.utama:hover { background: var(--utama-2); color: #fff; }
.btn.gelap { background: var(--gelap); color: #fff; }
.btn.gelap:hover { background: var(--gelap-2); color: #fff; }
.btn.putih { background: #fff; color: var(--gelap); }
.btn.putih:hover { background: var(--utama-3); color: var(--gelap); }
.btn.garis { background: #fff; color: var(--dakwat); border-color: #D6D9E8; }
.btn.garis:hover { background: var(--garis-2); color: var(--dakwat); }
.btn.hantu { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn.hantu:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn.wa { background: #157054; color: #fff; }
.btn.wa:hover { background: #0F5A43; color: #fff; }
.btn.kecil { min-height: 42px; padding: 0 16px; font-size: 14.5px; border-radius: 12px; }
.btn.penuh { width: 100%; }

.cip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--garis-2); color: var(--dakwat-2);
}
.cip.indigo { background: var(--utama-3); color: var(--utama); }
.cip.hijau { background: var(--hijau-2); color: var(--hijau); }
.cip.ochre { background: var(--ochre-2); color: var(--ochre); }
.cip.merah { background: var(--merah-2); color: var(--merah); }
.cip.gelap { background: var(--gelap); color: #fff; }

.ikon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kotak-ikon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.kotak-ikon.indigo { background: var(--utama-3); color: var(--utama); }
.kotak-ikon.hijau { background: var(--hijau-2); color: var(--hijau); }
.kotak-ikon.ochre { background: var(--ochre-2); color: var(--ochre); }
.kotak-ikon.merah { background: var(--merah-2); color: var(--merah); }
.kotak-ikon.kelabu { background: var(--garis-2); color: var(--dakwat-2); }
.kotak-ikon.malam { background: rgba(255,255,255,.08); color: #C9CDFF; }

.kad { background: #fff; border: 1px solid var(--garis); border-radius: var(--r-besar); box-shadow: var(--bayang); }

/* ---------- Pengumuman & navigasi ---------- */
.pengumuman { background: var(--gelap); color: #fff; font-size: 14px; text-align: center; padding: 10px 16px; position: relative; }
.pengumuman::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pelangi); }
.pengumuman a { color: #C9CDFF; font-weight: 700; margin-left: 8px; }

.nav { position: sticky; top: 0; z-index: 60; background: rgba(244,245,250,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.berskrol { border-bottom-color: var(--garis); }
.nav .balut { height: 76px; display: flex; align-items: center; gap: 28px; }
.nav-logo { flex: none; }
.nav-logo img { height: 32px; width: auto; max-width: none; }
.nav-pautan { display: flex; gap: 26px; margin-left: 12px; }
.nav-pautan a { color: var(--dakwat-2); font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav-pautan a:hover { color: var(--utama); }
.nav-kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.suis-bahasa { display: inline-flex; padding: 3px; gap: 2px; background: #fff; border: 1px solid #D6D9E8; border-radius: 12px; }
.suis-bahasa button { height: 34px; min-width: 42px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--kelabu); font: 700 13px var(--ui); cursor: pointer; letter-spacing: .03em; }
.suis-bahasa button[aria-pressed="true"] { background: var(--gelap); color: #fff; }
.suis-bahasa a { height: 34px; min-width: 42px; padding: 0 10px; border-radius: 9px; color: var(--kelabu); font: 700 13px var(--ui); letter-spacing: .03em; display: inline-flex; align-items: center; justify-content: center; }
.suis-bahasa a:hover { color: var(--dakwat); }
.suis-bahasa a[aria-current="true"] { background: var(--gelap); color: #fff; }
.nav-pautan a[aria-current="page"] { color: var(--utama); }
.btn-menu { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #D6D9E8; background: #fff; align-items: center; justify-content: center; cursor: pointer; color: var(--dakwat); }
.menu-telefon { display: none; }
.menu-bahasa { display: none !important; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 84px 0 0; }
.hero::before {
  content: ''; position: absolute; inset: -200px 0 auto 0; height: 900px; pointer-events: none;
  background:
    radial-gradient(600px 380px at 18% 30%, rgba(183,64,127,.12), transparent 70%),
    radial-gradient(640px 400px at 82% 20%, rgba(62,154,150,.14), transparent 70%),
    radial-gradient(700px 420px at 50% 60%, rgba(52,70,200,.12), transparent 70%);
}
.hero .balut { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.lencana {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: #fff; border: 1px solid var(--garis); color: var(--dakwat); font-size: 14px; font-weight: 600; box-shadow: var(--bayang);
}
.lencana .cip { height: 24px; font-size: 11.5px; }
.hero h1 { font-size: clamp(42px, 7vw, 82px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; max-width: 1040px; }
.hero .lead { font-size: clamp(17px, 2vw, 20.5px); max-width: 740px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-semak { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: 14px; color: var(--dakwat-2); }
.hero-semak span { display: inline-flex; align-items: center; gap: 8px; }
.hero-semak svg { width: 16px; height: 16px; stroke: var(--hijau); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Visual produk */
.pentas { position: relative; margin-top: 60px; padding: 0 24px; }
.pentas-dalam { position: relative; max-width: 1140px; margin: 0 auto; }
.bingkai { border-radius: 26px; padding: 10px; background: linear-gradient(180deg, #fff, #E8EAF6); border: 1px solid #DCDFF0; box-shadow: var(--bayang-besar); }
.skrin { display: grid; grid-template-columns: 210px minmax(0, 1fr); border-radius: 18px; overflow: hidden; background: var(--kertas); border: 1px solid var(--garis); min-height: 560px; text-align: left; font-size: 13px; }
.skrin-sisi { background: #fff; border-right: 1px solid var(--garis); padding: 18px 12px; display: flex; flex-direction: column; gap: 3px; }
.skrin-sisi img { height: 24px; width: auto; margin: 0 8px 18px; }
.skrin-sisi .item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--dakwat-2); font-weight: 500; }
.skrin-sisi .item svg { width: 17px; height: 17px; fill: none; stroke: var(--kelabu); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skrin-sisi .item.aktif { background: var(--utama-3); color: var(--utama); font-weight: 700; }
.skrin-sisi .item.aktif svg { stroke: var(--utama); }
.skrin-utama { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.skrin-tajuk { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.skrin-tajuk .t { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.mini-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--utama); color: #fff; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.mini-btn.garis { background: #fff; color: var(--dakwat); border: 1px solid var(--garis); }
.mini-btn.gelap { background: var(--gelap); }
.statistik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat { background: #fff; border-radius: 14px; padding: 12px 14px; border: 1px solid var(--garis); display: flex; align-items: center; gap: 12px; }
.stat .n { font-size: 20px; font-weight: 800; line-height: 1; }
.stat .l { font-size: 11.5px; color: var(--kelabu); margin-top: 3px; }
.stat .kotak-ikon { width: 36px; height: 36px; border-radius: 10px; }
.stat .kotak-ikon .ikon { width: 17px; height: 17px; }
.skrin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; flex-grow: 1; }
.panel { background: #fff; border-radius: 16px; border: 1px solid var(--garis); padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.panel-t { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.baris { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #F7F8FC; }
.baris.kuning { background: #FFF7EA; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11.5px; flex: none; }
.baris .isi { flex-grow: 1; min-width: 0; }
.baris .isi b { display: block; font-size: 13px; }
.baris .isi small { display: block; font-size: 11.5px; color: var(--kelabu); }
.baris .isi small.amaran { color: var(--merah); }
.panel.malam { background: var(--gelap); color: #fff; border-color: var(--gelap); position: relative; overflow: hidden; }
.panel.malam::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pelangi); }
.bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); }
.bar i { display: block; height: 100%; border-radius: inherit; background: #8E97FF; }

.telefon { position: absolute; right: -8px; top: 120px; width: 258px; border-radius: 42px; background: var(--gelap); padding: 9px; box-shadow: 0 40px 80px -24px rgba(23,21,58,.6); }
.telefon-skrin { border-radius: 34px; background: var(--kertas); overflow: hidden; padding: 26px 14px 16px; display: flex; flex-direction: column; gap: 12px; text-align: left; font-size: 11.5px; }
.kad-clock { background: var(--gelap); color: #fff; border-radius: 18px; padding: 14px; position: relative; overflow: hidden; }
.kad-clock::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pelangi); }
.kad-clock .jam { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.kad-clock .btn-clock { background: #fff; color: var(--gelap); border-radius: 12px; padding: 9px 12px; font-weight: 800; font-size: 12px; }
.grid-cepat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 10px; color: var(--dakwat-2); }
.grid-cepat span { display: block; height: 38px; border-radius: 12px; margin-bottom: 4px; }

.toast { position: absolute; left: -10px; top: 400px; width: 300px; background: #fff; border-radius: 18px; padding: 14px; border: 1px solid #F1C9D2; box-shadow: 0 30px 60px -20px rgba(23,21,58,.32); display: flex; gap: 12px; text-align: left; }
.toast b { color: var(--merah); font-size: 14px; }
.toast p { font-size: 13px; color: var(--dakwat-2); line-height: 1.45; margin-top: 2px; }

/* ---------- Klien (carousel) ---------- */
.klien { padding: 72px 0 24px; }
.klien-tajuk { text-align: center; font-size: 14px; font-weight: 700; color: var(--kelabu); margin-bottom: 26px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-jalur { display: flex; gap: 18px; width: max-content; animation: gerak var(--tempoh, 40s) linear infinite; }
.marquee:hover .marquee-jalur { animation-play-state: paused; }
@keyframes gerak { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-jalur { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-jalur [aria-hidden="true"] { display: none; }
}
.logo-klien { height: 76px; min-width: 220px; padding: 0 26px; display: flex; align-items: center; justify-content: center; gap: 12px; background: #fff; border: 1px solid var(--garis); border-radius: 18px; color: var(--dakwat-2); font-weight: 700; font-size: 15px; white-space: nowrap; }
.logo-klien img { max-height: 42px; max-width: 170px; width: auto; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.logo-klien:hover img { filter: none; opacity: 1; }
.monogram { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; background: var(--gelap); position: relative; overflow: hidden; }
.monogram::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pelangi); }

/* ---------- Jalur berkanun ---------- */
.berkanun { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.berkanun span { height: 44px; padding: 0 18px; display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--garis); border-radius: 12px; font-weight: 700; font-size: 15px; color: var(--dakwat-2); }

/* ---------- Masalah ---------- */
.dua-lajur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.senarai-masalah { display: flex; flex-direction: column; gap: 12px; }
.masalah { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.masalah .lama { font-size: 13px; color: #868AA0; text-decoration: line-through; }
.masalah .baru { font-weight: 700; font-size: 16.5px; margin-top: 5px; }
.masalah > svg { width: 22px; height: 22px; stroke: var(--utama); flex: none; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-left: auto; }

/* ---------- Ciri (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.bento > .kad { padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.bento h3 { font-size: 22px; font-weight: 800; }
.bento p { font-size: 15px; line-height: 1.6; color: var(--kelabu); }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s6 { grid-column: span 6; }
.bento .bawah { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kad.mendatar { flex-direction: row !important; gap: 30px !important; align-items: stretch; }
.kad.mendatar > div:first-child { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; }
.slip { flex: 1 1 320px; background: #F7F8FC; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.slip .r { display: flex; justify-content: space-between; gap: 12px; }
.slip .r span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.slip hr { border: 0; border-top: 1px solid var(--garis); margin: 2px 0; width: 100%; }
.slip .tolak { color: var(--merah); }
.slip .bersih { font-size: 22px; color: var(--utama); font-weight: 800; }
.minggu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 12px; margin-top: auto; }
.minggu b { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; margin-top: 6px; font-size: 13px; }
.malam-kad { background: var(--gelap); color: #fff; border-color: var(--gelap) !important; position: relative; overflow: hidden; }
.malam-kad::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--pelangi); }
.malam-kad p { color: #B9BDD6 !important; }

/* ---------- Pematuhan (gelap) ---------- */
.gelap-sek { background: var(--gelap); color: #fff; position: relative; overflow: hidden; }
.gelap-sek::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 110% -10%, rgba(62,154,150,.26), transparent 60%),
    radial-gradient(700px 520px at -20% 110%, rgba(183,64,127,.28), transparent 60%);
}
.gelap-sek .balut { position: relative; }
.gelap-sek .kening { color: #A9B0FF; }
.gelap-sek .lead { color: #B9BDD6; }
.fail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fail { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.fail .agensi { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fail .agensi b { font-size: 20px; font-weight: 800; }
.fail p { color: #B9BDD6; font-size: 14.5px; line-height: 1.6; }
.fail code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; background: rgba(255,255,255,.08); color: #E3E5FF; padding: 6px 9px; border-radius: 8px; overflow-wrap: anywhere; }
.tahunan { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.tahunan .fail { flex-direction: row; gap: 20px; align-items: flex-start; }
.titik-senarai { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.titik-senarai li { display: flex; gap: 10px; font-size: 14.5px; color: #D9DCEF; line-height: 1.5; }
.titik-senarai svg { width: 16px; height: 16px; flex: none; margin-top: 3px; stroke: #8FE0B8; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.notis-baharu { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 16px; background: rgba(226,163,87,.12); border: 1px solid rgba(226,163,87,.35); color: #F6DDB8; font-size: 14.5px; margin-top: 18px; }
.notis-baharu b { color: #fff; }

/* ---------- Aplikasi pekerja ---------- */
.app-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: center; }
.titik-gelap { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.titik-gelap li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--dakwat-2); }
.titik-gelap li span.k { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--utama-3); color: var(--utama); display: flex; align-items: center; justify-content: center; }
.titik-gelap li span.k svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dua-telefon { display: flex; justify-content: flex-end; gap: 22px; align-items: flex-start; }
.telefon.biasa { position: relative; right: auto; top: auto; width: 280px; }
.telefon.biasa.turun { margin-top: 54px; }
.medan { background: #fff; border: 1px solid #D6D9E8; border-radius: 12px; height: 42px; display: flex; align-items: center; padding: 0 12px; font-size: 13px; }
.label-kecil { font-size: 11px; color: var(--kelabu); margin-bottom: 4px; }
.tarikh-pilih { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; text-align: center; font-size: 11px; }
.tarikh-pilih div { padding: 7px 0; border-radius: 10px; }
.tarikh-pilih div b { display: block; font-size: 15px; }
.tarikh-pilih .pilih { background: var(--utama); color: #fff; }

/* ---------- Kelulusan ---------- */
.aliran-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.aliran { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.aliran-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.aliran-t b { font-size: 20px; font-weight: 800; }
.langkah { display: flex; flex-direction: column; gap: 6px; }
.langkah div { padding: 12px 14px; border-radius: 12px; background: var(--kertas); font-weight: 600; font-size: 14px; }
.langkah i { font-style: normal; color: #A0A4B8; padding-left: 16px; line-height: 1; }
.langkah .akhir { background: var(--utama-3); color: var(--utama); font-weight: 800; border: 1px solid #C4CAF5; }
.langkah .syarat { background: var(--ochre-2); color: #6B4000; border: 1px dashed #D9A441; font-weight: 500; }
.langkah .siap { background: var(--hijau-2); color: var(--hijau); }

/* ---------- Modul ---------- */
.modul-kotak { border-radius: 32px; background: #E8EAF7; padding: 56px; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 52px; }
.modul-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.modul { background: #fff; border: 1px solid var(--garis); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.modul .isi { flex-grow: 1; min-width: 0; }
.modul .isi b { display: block; font-size: 14.5px; }
.modul .isi small { display: block; font-size: 12.5px; color: var(--kelabu); margin-top: 2px; }
.suis { position: relative; width: 46px; height: 28px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; flex: none; background: #C9CCDB; transition: background .2s; }
.suis::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.suis[aria-pressed="true"] { background: var(--hijau); }
.suis[aria-pressed="true"]::after { transform: translateX(18px); }
.teras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- Apa yang baharu ---------- */
.garis-masa { display: flex; flex-direction: column; gap: 14px; }
.kemas { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 24px 28px; }
.kemas .tarikh { font-weight: 700; font-size: 14px; color: var(--dakwat-2); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.kemas h3 { font-size: 19px; font-weight: 800; }
.kemas p { color: var(--kelabu); font-size: 15px; line-height: 1.6; margin-top: 8px; }

/* ---------- Harga ---------- */
.suis-tempoh { display: inline-flex; padding: 5px; gap: 4px; background: #fff; border: 1px solid #D6D9E8; border-radius: 16px; margin-top: 8px; }
.suis-tempoh button { height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; color: var(--kelabu); font: 700 14.5px var(--ui); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.suis-tempoh button[aria-pressed="true"] { background: var(--gelap); color: #fff; }
.suis-tempoh .cip { height: 22px; font-size: 11px; }
.harga-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pelan { padding: 34px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.pelan h3 { font-size: 23px; font-weight: 800; }
.pelan .desk { font-size: 15px; color: var(--kelabu); margin-top: 6px; }
.pelan.pilihan { border: 2px solid var(--utama); box-shadow: 0 30px 60px -30px rgba(52,70,200,.5); }
.pelan.pilihan > .cip { position: absolute; top: -14px; left: 34px; background: var(--utama); color: #fff; }
.pelan.malam-kad .desk, .pelan.malam-kad .redup { color: #B9BDD6; }
.blok-harga { min-height: 124px; }
.dulu { font-size: 16px; color: #8A8FA6; display: flex; align-items: center; gap: 8px; }
.dulu s { text-decoration-thickness: 1.5px; }
.kini { font-size: 50px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin-top: 4px; }
.kini small { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--kelabu); }
.malam-kad .kini small { color: #B9BDD6; }
.nota-harga { font-size: 14px; color: var(--kelabu); margin-top: 6px; }
.jimat { padding: 12px 14px; border-radius: 12px; background: #EEF9F3; color: #145A43; font-size: 14px; line-height: 1.5; }
.malam-kad .jimat { background: rgba(143,224,184,.1); color: #BFEBD4; }
.malam-kad .jimat b { color: #fff; }
.ciri-pelan { display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.ciri-pelan div { display: flex; gap: 10px; }
.ciri-pelan svg { width: 18px; height: 18px; flex: none; margin-top: 2px; stroke: var(--utama); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.malam-kad .ciri-pelan svg { stroke: #A9B0FF; }
.pemisah { height: 1px; background: var(--garis); }
.malam-kad .pemisah { background: rgba(255,255,255,.12); }
.bonus { margin-top: 20px; border-radius: 24px; background: var(--gelap); color: #fff; padding: 26px 32px; display: flex; align-items: center; gap: 28px; position: relative; overflow: hidden; }
.bonus::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pelangi); }
.bonus .t { font-size: 21px; font-weight: 800; }
.bonus ul { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; color: #D6D9EE; }
.bonus li { display: flex; align-items: center; gap: 8px; }
.bonus li svg { width: 16px; height: 16px; stroke: #8FE0B8; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bonus .btn { margin-left: auto; }
.halus { text-align: center; font-size: 13px; color: var(--kelabu); margin-top: 18px; }

/* ---------- Testimoni ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.testi { padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.testi .bintang { display: flex; gap: 3px; color: #E2A357; }
.testi .bintang svg { width: 18px; height: 18px; fill: currentColor; }
.testi blockquote { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--dakwat); }
.testi .siapa { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi .siapa img, .testi .siapa .monogram { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testi .siapa b { display: block; font-size: 15px; }
.testi .siapa small { color: var(--kelabu); font-size: 13.5px; }

/* ---------- Keselamatan ---------- */
.empat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.empat .kad { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.empat b { font-size: 17px; }
.empat p { font-size: 14.5px; color: var(--kelabu); line-height: 1.55; }

/* ---------- Pemilik (MHR Niaga) ---------- */
.pemilik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; overflow: hidden; }
.pemilik-kiri { padding: 40px; background: var(--gelap); color: #fff; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.pemilik-kiri::before { content: ''; position: absolute; inset: 0; background: radial-gradient(520px 300px at 100% 0%, rgba(62,154,150,.28), transparent 65%), radial-gradient(420px 300px at 0% 100%, rgba(183,64,127,.28), transparent 65%); }
.pemilik-kiri > * { position: relative; }
.pemilik-kiri .kening { color: #A9B0FF; }
.pemilik-kiri h3 { font-size: 30px; font-weight: 800; }
.pemilik-kiri p { color: #C9CCE2; font-size: 15px; line-height: 1.6; }
.pemilik-kanan { padding: 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.pemilik-kanan h4 { font-size: 20px; font-weight: 800; }
.pemilik-kanan p { color: var(--kelabu); font-size: 15px; line-height: 1.6; }
.butiran-ssm { font-size: 13.5px; color: var(--kelabu); }

/* ---------- Soalan lazim ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; }
.faq { border-top: 1px solid #D9DCEC; }
.faq details { border-bottom: 1px solid #D9DCEC; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 18.5px; font-weight: 700; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid #D9DCEC; background: #fff; display: flex; align-items: center; justify-content: center; transition: transform .2s, background .2s; }
.faq summary .chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faq details[open] summary .chev { transform: rotate(180deg); background: var(--utama); color: #fff; border-color: var(--utama); }
.faq details p { padding: 0 56px 24px 0; color: var(--kelabu); font-size: 16px; line-height: 1.7; }

/* ---------- Cuba (borang) ---------- */
.cuba { border-radius: 36px; background: var(--utama); color: #fff; padding: 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; position: relative; overflow: hidden; }
.cuba::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 400px at 0% 100%, rgba(255,255,255,.14), transparent 70%), radial-gradient(500px 300px at 100% 0%, rgba(62,154,150,.35), transparent 70%); pointer-events: none; }
.cuba > * { position: relative; }
.cuba .h2 { color: #fff; }
.cuba .lead { color: #DDE0FF; }
.cuba-titik { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; color: #E8EAFF; font-size: 15.5px; }
.cuba-titik li { display: flex; gap: 10px; align-items: center; }
.cuba-titik svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.borang { background: var(--gelap); border-radius: 26px; padding: 30px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); }
.borang .t { font-size: 21px; font-weight: 800; }
.borang label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #B9BDD6; font-weight: 600; }
.borang input, .borang select {
  height: 50px; border-radius: 13px; border: 1px solid #3A3F5C; background: #1E1C47; color: #fff;
  padding: 0 14px; font: 500 15.5px var(--ui); width: 100%;
}
.borang input::placeholder { color: #8C91AE; }
.borang input:focus, .borang select:focus { outline: none; border-color: #8E97FF; box-shadow: 0 0 0 3px rgba(142,151,255,.25); }
.borang .dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.borang .perangkap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.borang .kecil-nota { font-size: 12.5px; color: #8C91AE; text-align: center; }
.mesej-borang { border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.mesej-borang.ok { background: rgba(143,224,184,.14); color: #CFF3E1; border: 1px solid rgba(143,224,184,.35); }
.mesej-borang.ralat { background: rgba(253,232,236,.12); color: #FFD3DC; border: 1px solid rgba(255,160,180,.35); }
.mesej-borang a { color: #fff; font-weight: 700; text-decoration: underline; }

/* ---------- Kaki ---------- */
.kaki { border-top: 1px solid #D9DCEC; padding: 56px 0 40px; }
.kaki-atas { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.kaki-jenama { max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.kaki-jenama img { height: 30px; width: auto; align-self: flex-start; }
.kaki-jenama p { font-size: 14px; color: var(--kelabu); line-height: 1.6; }
.kaki-lajur { display: flex; gap: 60px; flex-wrap: wrap; font-size: 14px; }
.kaki-lajur div { display: flex; flex-direction: column; gap: 11px; }
.kaki-lajur b { font-size: 14px; }
.kaki-lajur a { color: var(--dakwat-2); }
.kaki-lajur a:hover { color: var(--utama); }
.kaki-bawah { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--garis); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--kelabu); }

.wa-terapung { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 56px; height: 56px; border-radius: 50%; background: #157054; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -10px rgba(21,112,84,.7); }
.wa-terapung:hover { color: #fff; background: #0F5A43; }
.wa-terapung svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Animasi muncul */
.js .muncul { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .muncul.nampak { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .muncul { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Responsif
   ============================================================ */
@media (max-width: 1320px) {
  .nav-pautan { display: none; }
  .btn-menu { display: inline-flex; }
  .menu-telefon.buka { display: flex; flex-direction: column; gap: 4px; padding: 10px 24px 18px; border-top: 1px solid var(--garis); background: rgba(244,245,250,.98); }
  .menu-telefon a { padding: 12px 4px; color: var(--dakwat); font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--garis-2); }
}
@media (max-width: 1100px) {
  .telefon:not(.biasa) { display: none; }
  .toast { display: none; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s2, .s3 { grid-column: span 1; } .s4, .s6 { grid-column: span 2; }
  .modul-kotak, .app-grid, .faq-grid, .cuba { grid-template-columns: minmax(0, 1fr); }
  .tahunan { grid-template-columns: minmax(0, 1fr); }
  .dua-telefon { justify-content: center; }
}
@media (max-width: 860px) {
  .seksyen { padding: 76px 0; }
  .dua-lajur, .harga-grid, .aliran-grid, .testi-grid, .fail-grid, .pemilik { grid-template-columns: minmax(0, 1fr); }
  .skrin { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .skrin-sisi { display: none; }
  .skrin-grid { grid-template-columns: minmax(0, 1fr); }
  .statistik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kemas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kemas .tarikh { flex-direction: row; align-items: center; }
  .bonus { flex-direction: column; align-items: flex-start; }
  .bonus .btn { margin-left: 0; }
  .modul-kotak { padding: 32px 22px; }
  .cuba { padding: 40px 22px; border-radius: 28px; }
}
@media (max-width: 620px) {
  .balut { padding: 0 16px; }
  .nav .balut { gap: 12px; height: 66px; }
  .nav-logo img { height: 26px; }
  .nav-kanan .btn.garis { display: none; }
  .nav-kanan .btn.gelap { padding: 0 14px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .s2, .s3, .s4, .s6 { grid-column: span 1; }
  .kad.mendatar { flex-direction: column !important; }
  .modul-grid, .empat, .borang .dua { grid-template-columns: minmax(0, 1fr); }
  .dua-telefon .telefon.biasa:last-child { display: none; }
  .telefon.biasa.turun { margin-top: 0; }
  .pentas { padding: 0 12px; }
  .skrin-utama { padding: 16px; }
  .skrin-tajuk .mini-btn, .baris .mini-btn { display: none; }
  .baris.kuning .mini-btn { display: none; }
  .bento > .kad, .pelan, .aliran { padding: 24px; }
  .pemilik-kiri, .pemilik-kanan { padding: 28px 22px; }
  .faq summary { font-size: 17px; }
  .faq details p { padding-right: 0; }
  .logo-klien { min-width: 180px; height: 66px; padding: 0 18px; font-size: 14px; }
  .wa-terapung { right: 14px; bottom: 14px; }
}
@media (max-width: 480px) {
  .nav-kanan .suis-bahasa { display: none; }
  .menu-telefon.buka .menu-bahasa { display: inline-flex !important; align-self: flex-start; margin-top: 12px; }
}


/* ============================================================
   HALAMAN KANDUNGAN: panduan, artikel, kalkulator
   ============================================================ */
.remah { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--kelabu); margin-bottom: 18px; }
.remah a { color: var(--kelabu); }
.remah a:hover { color: var(--utama); }
.remah span[aria-hidden] { color: #B3B7C9; }
.kepala-artikel { padding: 56px 0 8px; }
.kepala-artikel h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; max-width: 900px; text-wrap: balance; }
.meta-artikel { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--kelabu); margin-top: 18px; align-items: center; }
.ringkas { margin-top: 22px; max-width: 820px; padding: 18px 20px; border-radius: 16px; background: var(--utama-3); color: var(--utama-2); font-size: 16.5px; line-height: 1.6; font-weight: 500; }
.susun-artikel { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; padding: 40px 0 96px; align-items: start; }
.isi-artikel { min-width: 0; max-width: 760px; font-size: 17px; line-height: 1.75; color: var(--dakwat-2); }
.isi-artikel > * + * { margin-top: 1.05em; }
.isi-artikel h2 { font-size: 26px; font-weight: 800; color: var(--dakwat); margin-top: 1.9em; scroll-margin-top: 96px; text-wrap: balance; }
.isi-artikel h3 { font-size: 20px; font-weight: 800; color: var(--dakwat); margin-top: 1.5em; }
.isi-artikel strong { color: var(--dakwat); }
.isi-artikel a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.isi-artikel ul, .isi-artikel ol { padding-left: 1.3em; }
.isi-artikel li + li { margin-top: .35em; }
.isi-artikel code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .86em; background: var(--garis-2); padding: 2px 6px; border-radius: 6px; color: var(--dakwat); }
.isi-artikel blockquote { margin: 1.4em 0; padding: 16px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--garis); color: var(--dakwat-2); }
.isi-artikel blockquote p { margin: 0; }
.jadual-bekas { overflow-x: auto; border: 1px solid var(--garis); border-radius: 14px; background: #fff; }
.isi-artikel table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.isi-artikel th { text-align: left; background: #FAFAFD; font-size: 13px; font-weight: 700; color: var(--kelabu); padding: 11px 14px; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.isi-artikel td { padding: 10px 14px; border-bottom: 1px solid var(--garis-2); vertical-align: top; }
.isi-artikel tr:last-child td { border-bottom: 0; }
.jadual-panjang { max-height: 560px; overflow: auto; }
.jadual-panjang th { position: sticky; top: 0; }
.sisi-artikel { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; }
.toc { background: #fff; border: 1px solid var(--garis); border-radius: 18px; padding: 18px 20px; font-size: 14px; }
.toc b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--kelabu); margin-bottom: 10px; }
.toc ol { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; color: var(--dakwat-2); }
.toc a { color: var(--dakwat-2); }
.toc a:hover { color: var(--utama); }
.kotak-cta { margin: 2.2em 0 !important; border-radius: 22px; background: var(--gelap); color: #fff; padding: 26px 28px; display: flex; gap: 22px; align-items: center; position: relative; overflow: hidden; }
.kotak-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pelangi); }
.kotak-cta .t { font-size: 20px; font-weight: 800; line-height: 1.25; }
.kotak-cta p { color: #C9CCE2; font-size: 15px; line-height: 1.55; margin-top: 6px !important; }
.kotak-cta .btn { margin-left: auto; text-decoration: none; }
.kad-sisi { background: var(--gelap); color: #fff; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.kad-sisi::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pelangi); }
.kad-sisi b { font-size: 17px; line-height: 1.3; }
.kad-sisi p { font-size: 14px; color: #C9CCE2; line-height: 1.5; }
.berkaitan { border-top: 1px solid var(--garis); padding: 56px 0 96px; }
.berkaitan h2 { font-size: 26px; font-weight: 800; margin-bottom: 22px; }
.grid-panduan { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kad-panduan { padding: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--dakwat); transition: transform .15s, box-shadow .15s; }
.kad-panduan:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(23,21,58,.35); color: var(--dakwat); }
.kad-panduan b { font-size: 17.5px; line-height: 1.3; }
.kad-panduan p { font-size: 14.5px; color: var(--kelabu); line-height: 1.55; }
.kad-panduan .lagi { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--utama); }
.sumber-utama { padding: 24px 0 96px; }

/* Kalkulator */
.kalk { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 36px 0 24px; }
.kalk-borang { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.kalk-borang label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--dakwat-2); }
.kalk-borang input[type=number], .kalk-borang select { height: 48px; border-radius: 12px; border: 1px solid #D6D9E8; background: #fff; padding: 0 12px; font: 600 16px var(--ui); color: var(--dakwat); width: 100%; font-variant-numeric: tabular-nums; }
.kalk-borang input:focus, .kalk-borang select:focus { outline: none; border-color: var(--utama); box-shadow: 0 0 0 3px rgba(52,70,200,.16); }
.kalk-borang .semak { flex-direction: row; align-items: center; gap: 10px; font-weight: 600; }
.kalk-borang .semak input { width: 20px; height: 20px; accent-color: var(--utama); }
.kalk-borang .dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.kalk-borang small { font-weight: 500; color: var(--kelabu); }
.kalk-hasil { display: flex; flex-direction: column; gap: 16px; }
.kalk-utama { background: var(--gelap); color: #fff; border-radius: 22px; padding: 26px 28px; position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kalk-utama::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pelangi); }
.kalk-utama span { font-size: 13px; color: #B9BDD6; display: block; }
.kalk-utama b { font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kalk-utama .besar b { color: #8FE0B8; }
.kalk-jadual { padding: 8px 22px; }
.kalk-jadual table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.kalk-jadual th, .kalk-jadual td { padding: 11px 4px; border-bottom: 1px solid var(--garis-2); text-align: right; }
.kalk-jadual th:first-child, .kalk-jadual td:first-child { text-align: left; }
.kalk-jadual th { font-size: 12.5px; color: var(--kelabu); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.kalk-jadual tr.jumlah td { font-weight: 800; color: var(--dakwat); border-bottom: 0; }
.kalk-nota { font-size: 13.5px; color: var(--kelabu); line-height: 1.55; }

@media (max-width: 1100px) {
  .susun-artikel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sisi-artikel { position: static; }
  .kalk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .kepala-artikel { padding-top: 36px; }
  .isi-artikel { font-size: 16px; }
  .isi-artikel h2 { font-size: 22px; }
  .kotak-cta { flex-direction: column; align-items: flex-start; }
  .kotak-cta .btn { margin-left: 0; }
  .kalk-utama { grid-template-columns: minmax(0, 1fr); }
  .kalk-borang .dua { grid-template-columns: minmax(0, 1fr); }
}

mark.semak { background: var(--ochre-2); color: var(--ochre); padding: 1px 6px; border-radius: 6px; font-weight: 700; }