/* ==========================================================================
   MBPG Online — Portal Awam
   Token warna diukur terus daripada rujukan (PNG), bukan diagak.
   ========================================================================== */

:root{
  /* Warna terukur */
  --navy:#293084;        /* header kiri */
  --indigo:#312D81;      /* kad perkhidmatan (dominan) */
  --gold:#FAC001;        /* header kanan */
  --blue:#1341EC;        /* butang Cari */
  --teal:#005C83;        /* pautan */
  --ink:#1B1D3A;
  --ink-2:#40456B;
  --ink-3:#6B7192;
  --soft:#F3F5FA;
  --line:#E2E6F0;
  --white:#fff;

  /* Bentuk */
  --r-sm:8px;
  --r:10px;
  --r-lg:14px;
  --lebar:1200px;
  --shadow:0 10px 30px rgba(23,26,78,.09);
  --shadow-lg:0 18px 48px rgba(23,26,78,.16);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---------------------------------------------------- token tema */
  --bg:#fff;
  --bg-2:#F3F5FA;
  --bg-3:#F7F9FD;
  --kad:#fff;
  --kad-2:#FCFDFF;
  --sempadan:#E2E6F0;
  --sempadan-2:#D4D9E4;
  --teks:#1B1D3A;
  --teks-2:#40456B;
  --teks-3:#6B7192;
  --medan:#fff;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.62;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
h1,h2,h3,h4{margin:0;line-height:1.24;font-weight:700;letter-spacing:-.01em}

.wrap{width:100%;max-width:var(--lebar);margin:0 auto;padding:0 24px}
.lompat{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:12px 18px;z-index:200;border-radius:0 0 var(--r) 0;
}
.lompat:focus{left:0}

/* ---------------------------------------------------------------- header */
.kepala{
  position:sticky;top:0;z-index:100;
  background:
    linear-gradient(90deg,rgba(18,20,58,.55) 0%,rgba(18,20,58,.30) 46%,rgba(18,20,58,.42) 74%,rgba(18,20,58,.50) 100%),
    linear-gradient(90deg,#293084 0%,#3B3A7E 34%,#6E6055 58%,#A98A33 76%,#D9A80D 89%,#FAC001 100%);
  box-shadow:0 2px 14px rgba(15,18,60,.18);
}
.kepala-dalam{
  max-width:var(--lebar);margin:0 auto;padding:0 24px;
  height:88px;display:flex;align-items:center;gap:18px;
}
.jenama{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.jenama:hover{text-decoration:none}
.jenama img{width:auto;height:54px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.jenama-teks{display:flex;flex-direction:column;line-height:1.1}
.jenama-tajuk{
  font-size:23px;font-weight:700;letter-spacing:-.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.28);white-space:nowrap;
}
.jenama-sub{
  font-size:9.5px;font-weight:500;letter-spacing:.13em;
  color:rgba(255,255,255,.88);text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.3);white-space:nowrap;
}

.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{
  color:#fff;font-size:14.5px;font-weight:500;padding:9px 14px;border-radius:var(--r-sm);
  text-shadow:0 1px 2px rgba(0,0,0,.32);transition:background .18s var(--ease);
}
.nav a:hover{background:rgba(255,255,255,.14);text-decoration:none}
.nav a[aria-current="page"]{background:rgba(255,255,255,.2);font-weight:600}
.btn-masuk{
  margin-left:12px;background:#fff;color:#171A3E;font-weight:600;font-size:14px;
  padding:10px 22px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.18);transition:transform .18s var(--ease),box-shadow .18s var(--ease);
  white-space:nowrap;text-shadow:none!important;
}
.nav a.btn-masuk,
.nav a.btn-masuk:hover,
.nav a.btn-masuk:visited{
  color:#171A3E!important;
  background:#fff;
  text-shadow:none!important;
}
.nav a.btn-masuk:hover{background:#F1F3FB;text-decoration:none}
.btn-masuk:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.24);text-decoration:none}
.burger{
  display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:var(--r-sm);
  background:rgba(255,255,255,.14);cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;border-radius:2px;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

/* ------------------------------------------------------------------ hero */
.wira{
  position:relative;min-height:560px;display:flex;align-items:center;
  background:#0E1030 url("../img/hero-mbpg.jpg") center 38%/cover no-repeat;
  overflow:hidden;
}
.wira::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,13,50,.90) 0%,rgba(11,13,50,.74) 38%,
             rgba(11,13,50,.34) 64%,rgba(11,13,50,.10) 82%,rgba(11,13,50,.04) 100%);
}
.wira-dalam{position:relative;width:100%;max-width:var(--lebar);margin:0 auto;padding:64px 24px 72px}
.wira-teks{max-width:600px;color:#fff}
.wira h1{
  font-size:clamp(34px,4.4vw,58px);font-weight:700;line-height:1.12;
  letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.wira h1 em{font-style:normal;color:#FFD34D}
.wira p{
  margin:20px 0 0;max-width:520px;font-size:15.5px;line-height:1.68;
  color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* bar carian */
.cari{
  margin-top:30px;display:flex;gap:0;background:#fff;border-radius:12px;
  padding:7px;max-width:600px;box-shadow:0 14px 40px rgba(0,0,0,.28);
}
.cari input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:15px;color:var(--ink);padding:0 16px;height:50px;
}
.cari input::placeholder{color:#8A90AC}
.cari button{
  border:0;cursor:pointer;background:var(--blue);color:#fff;font-weight:600;font-size:15px;
  padding:0 34px;height:50px;border-radius:9px;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.cari button:hover{background:#0D33C4;transform:translateY(-1px)}
.cari-note{
  margin:12px 0 0;font-size:12.5px;color:rgba(255,255,255,.78);
  display:flex;align-items:flex-start;gap:7px;max-width:520px;
}
.cari-note svg{flex:none;opacity:.85;margin-top:2px}

/* ------------------------------------------------------------ seksyen am */
.seksyen{padding:72px 0}
.seksyen--kelabu{background:var(--soft)}
.tajuk-seksyen{text-align:center;margin-bottom:42px}
.tajuk-seksyen h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em}
.tajuk-seksyen p{margin:10px auto 0;max-width:560px;color:var(--ink-3);font-size:14.5px}
.tajuk-seksyen .garis{
  width:52px;height:3px;border-radius:3px;margin:16px auto 0;
  background:linear-gradient(90deg,var(--navy),var(--gold));
}

/* ------------------------------------------------------- kad perkhidmatan */
.grid-layan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.kad-layan{
  position:relative;display:flex;flex-direction:column;
  background:var(--indigo);color:#fff;text-decoration:none;
  border-radius:var(--r-lg);padding:38px 34px 34px;min-height:250px;
  overflow:hidden;isolation:isolate;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
  box-shadow:0 6px 22px rgba(49,45,129,.22);
}
.kad-layan::after{
  content:"";position:absolute;right:-64px;top:-64px;width:210px;height:210px;
  border-radius:50%;background:rgba(255,255,255,.07);z-index:-1;
  transition:transform .3s var(--ease);
}
.kad-layan:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(49,45,129,.32);text-decoration:none}
.kad-layan:hover::after{transform:scale(1.18)}
.kad-layan .ikon{
  width:46px;height:46px;margin-bottom:22px;stroke:#fff;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.kad-layan h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.kad-layan p{margin:10px 0 0;font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.82)}
.kad-layan .pergi{
  margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:#FFD34D;
}
.kad-layan .pergi svg{transition:transform .22s var(--ease)}
.kad-layan:hover .pergi svg{transform:translateX(4px)}

/* --------------------------------------------------------------- berita */
.berita-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kad-berita{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.kad-berita:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.kad-berita .gambar{
  height:184px;position:relative;overflow:hidden;background:#22265F;
}
.kad-berita .gambar img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease);
}
.kad-berita:hover .gambar img{transform:scale(1.05)}
.kad-berita .gambar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,22,60,0) 46%,rgba(20,22,60,.38) 100%);
}
.kad-berita .isi{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.kad-berita .tarikh{
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;
}
.kad-berita h3{font-size:16.5px;line-height:1.4}
.kad-berita p{margin:10px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.kad-berita .baca{
  margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--teal);
}
.kad-berita .baca svg{transition:transform .2s var(--ease)}
.kad-berita:hover .baca svg{transform:translateX(3px)}

/* ------------------------------------------------------------ pengumuman */
.pengumuman{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;
  background:linear-gradient(100deg,#22265F 0%,#31307E 58%,#5A4A3A 100%);
  color:#fff;border-radius:var(--r-lg);padding:34px 38px;
  box-shadow:0 14px 36px rgba(34,38,95,.24);
}
.pengumuman .lencana{
  width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.pengumuman .lencana svg{width:28px;height:28px;stroke:#FFD34D;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pengumuman h3{font-size:18px;font-weight:600}
.pengumuman p{margin:7px 0 0;font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.6}
.btn-gold{
  background:var(--gold);color:#2A2410;font-weight:600;font-size:14px;
  padding:12px 26px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
  display:inline-flex;align-items:center;gap:8px;
}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(250,192,1,.35);text-decoration:none}

/* ---------------------------------------------------------------- footer */
.kaki{
  background:linear-gradient(100deg,#191D4E 0%,#24245F 52%,#3A3050 78%,#574426 100%);
  color:rgba(255,255,255,.78);padding:44px 0 0;font-size:13px;
}
.kaki-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:34px}
.kaki h4{
  color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:13px;
}
.kaki-brand img{height:46px;width:auto;margin-bottom:13px}
.kaki-brand .nama{color:#fff;font-size:15.5px;font-weight:600;line-height:1.32;margin-bottom:8px}
.kaki p{margin:0 0 7px;line-height:1.62}
.kaki ul{list-style:none;margin:0;padding:0}
.kaki li{margin-bottom:7px}
.kaki a{color:rgba(255,255,255,.78)}
.kaki a:hover{color:#fff}
.sosial{display:flex;gap:9px;margin-top:14px}
.sosial a{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.sosial a:hover{background:var(--gold);transform:translateY(-2px)}
.sosial svg{width:15px;height:15px;fill:#fff}
.sosial a:hover svg{fill:#2A2410}
.kaki-bawah{
  margin-top:32px;border-top:1px solid rgba(255,255,255,.14);
  padding:16px 0 18px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12.5px;color:rgba(255,255,255,.62);
}
.kaki-bawah nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.kaki-bawah a{color:rgba(255,255,255,.62);font-size:12.5px}

/* --------------------------------------------------------------- toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:#1B1D3A;color:#fff;font-size:13.5px;font-weight:500;
  padding:13px 22px;border-radius:999px;box-shadow:0 12px 32px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);
  z-index:500;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 40px);
}
.toast.tunjuk{opacity:1;transform:translate(-50%,0)}
.toast svg{flex:none;stroke:#5BE49B;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------- halaman dalam */
.jalur{
  background:linear-gradient(100deg,#22265F 0%,#2F2F7C 62%,#4E4238 100%);
  color:#fff;padding:52px 0 48px;
}
.jalur h1{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em}
.jalur p{margin:12px 0 0;font-size:14.5px;color:rgba(255,255,255,.8);max-width:640px}
.rempah{font-size:12.5px;color:rgba(255,255,255,.72);margin-bottom:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rempah a{color:rgba(255,255,255,.9)}
.rempah .pisah{opacity:.5}

/* hubungi */
.hub-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:34px;align-items:start}
.kad-info{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--shadow);
}
.kad-info h2{font-size:17px;margin-bottom:20px}
.baris-info{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.baris-info:last-of-type{border-bottom:0}
.baris-info .ikon{
  width:38px;height:38px;border-radius:10px;background:rgba(41,48,132,.07);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.baris-info .ikon svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.baris-info .label{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.baris-info .nilai{font-size:14px;color:var(--ink);line-height:1.55;margin-top:2px}
.baris-info .nilai a{color:var(--ink)}
.baris-info .nilai a:hover{color:var(--teal)}

.borang{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--shadow);
}
.borang h2{font-size:17px;margin-bottom:6px}
.borang .sub{font-size:13.5px;color:var(--ink-3);margin:0 0 24px}
.medan{margin-bottom:18px}
.medan label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.medan label .wajib{color:#C0392B;margin-left:3px}
.medan input,.medan select,.medan textarea{
  width:100%;font:inherit;font-size:14px;color:var(--ink);
  border:1px solid #D5DAE8;border-radius:var(--r-sm);padding:11px 14px;background:#fff;
  transition:border-color .16s,box-shadow .16s;
}
.medan input:focus,.medan select:focus,.medan textarea:focus{
  outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(41,48,132,.12);
}
.medan textarea{resize:vertical;min-height:120px}
.medan-baris{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hint{font-size:12px;color:var(--ink-3);margin-top:6px}
.btn-hantar{
  background:var(--navy);color:#fff;font-weight:600;font-size:14.5px;
  padding:13px 32px;border-radius:var(--r-sm);border:0;cursor:pointer;width:100%;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.btn-hantar:hover{background:#1E2569;transform:translateY(-1px)}
.ralat{color:#C0392B;font-size:12.5px;margin-top:6px;display:none}
.ralat:not(:empty){display:block}
.medan.salah input,.medan.salah select,.medan.salah textarea{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.medan.salah .ralat{display:block}

/* jadual waktu */
.jadual-waktu{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.jadual-waktu th,.jadual-waktu td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--line)}
.jadual-waktu thead th{background:var(--navy);color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.03em;line-height:1.4}
.jadual-waktu tbody tr:nth-child(even){background:#FAFBFE}
.jadual-waktu tbody tr:last-child td{border-bottom:0}
.jadual-waktu td:first-child{font-weight:600}
.jadual-waktu .rehat{color:#8A6A00;font-size:12.5px}
.nota-waktu{font-size:12.5px;color:var(--ink-3);margin-top:14px;display:flex;gap:8px;align-items:flex-start}
.nota-waktu svg{flex:none;margin-top:2px;stroke:var(--ink-3);fill:none;stroke-width:1.8}

.peta{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);line-height:0}
.peta iframe{width:100%;height:420px;border:0;display:block}

/* -------------------------------------------------------------- responsif */
@media (max-width:1024px){
  .kaki-grid{grid-template-columns:1fr 1fr;gap:34px}
  .hub-grid{grid-template-columns:1fr}
  .berita-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .berita-grid .kad-berita:last-child{display:none}
}
/* ------------------------------------------------- bottom nav (mobile) */
.bawah-nav{display:none}

@media (max-width:860px){
  .kepala-dalam{height:74px;padding:0 18px}
  .jenama img{height:44px}
  .jenama-tajuk{font-size:19px}
  .jenama-sub{font-size:8px}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#262A6B;flex-direction:column;align-items:stretch;
    padding:10px 14px 16px;gap:2px;box-shadow:0 14px 30px rgba(0,0,0,.3);
  }
  .nav.buka{display:flex}
  .nav a{padding:12px 14px;border-radius:var(--r-sm)}
  .btn-masuk{margin:8px 0 0;text-align:center}
  .burger{display:flex}
  .wira{min-height:auto}
  .wira-dalam{padding:52px 18px 58px}
  .seksyen{padding:54px 0}
  .grid-layan{grid-template-columns:1fr;max-width:none}
  .pengumuman{grid-template-columns:1fr;padding:28px 24px;gap:18px}
  .pengumuman .lencana{width:52px;height:52px}
  .btn-gold{width:100%;justify-content:center}
  .berita-grid{grid-template-columns:1fr}
  .berita-grid .kad-berita:last-child{display:flex}
  /* footer mobile: 2 kolum untuk blok pendek, jangan bertindan 4 lapis */
  .kaki{padding-top:34px}
  .kaki-grid{
    grid-template-columns:1fr 1fr;
    gap:22px 18px;
  }
  .kaki-brand{grid-column:1/-1}
  .kaki-grid > div:last-child{
    grid-column:1/-1;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .kaki-grid > div:last-child h4{margin:0}
  .kaki-grid > div:last-child > p{display:none}
  .kaki-grid > div:last-child .sosial{margin-top:0}
  .kaki h4{margin-bottom:11px;font-size:11.5px}
  .kaki p{margin-bottom:7px;line-height:1.6;font-size:13px}
  .kaki li{margin-bottom:7px}
  .kaki-brand img{height:44px;margin-bottom:12px}
  .kaki-brand .nama{font-size:15px;margin-bottom:8px}
  .sosial{margin-top:12px;gap:9px}
  .sosial a{width:34px;height:34px}
  .kaki-bawah{
    flex-direction:column;gap:9px;
    margin-top:24px;padding:16px 0 18px;font-size:12px;
  }
  .kaki-bawah nav{gap:5px 14px}
  .kaki-bawah a{font-size:12px}
  .wrap{padding:0 18px}
  .jalur{padding:38px 0 34px}
  .peta iframe{height:320px}

  /* jadual: jangan paksa 4 kolum pada skrin sempit */
  .jadual-waktu{font-size:12.5px;table-layout:fixed;width:100%}
  .jadual-waktu th,.jadual-waktu td{padding:11px 7px;word-break:break-word;overflow-wrap:anywhere}
  .jadual-waktu thead th{font-size:10.5px;letter-spacing:0;line-height:1.35}
  .jadual-waktu thead th:nth-child(1){width:26%}
  .jadual-waktu thead th:nth-child(2){width:29%}
  .jadual-waktu thead th:nth-child(3){width:20%}
  .jadual-waktu thead th:nth-child(4){width:25%}

  /* ruang untuk bottom nav */
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}

  /* bottom nav */
  .bawah-nav{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -2px 14px rgba(23,26,78,.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .bawah-nav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:52px;padding:6px 2px;border-radius:10px;
    font-size:10.5px;font-weight:500;color:var(--ink-3);text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .bawah-nav a:active{background:rgba(41,48,132,.06)}
  .bawah-nav svg{
    width:21px;height:21px;stroke:currentColor;fill:none;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  }
  .bawah-nav a[aria-current="page"]{color:var(--navy);font-weight:600}
}

/* skrin sangat sempit */
@media (max-width:380px){
  .jenama-tajuk{font-size:16.5px}
  .jenama-sub{font-size:7px;letter-spacing:.08em}
  .jenama img{height:38px}
  .kepala-dalam{height:66px;gap:10px}
  .wira h1{font-size:27px}
  .seksyen{padding:44px 0}
  .wrap{padding:0 14px}
  .kad-layan{padding:30px 24px 26px;min-height:220px}
  .kad-layan h3{font-size:17.5px}
  .jadual-waktu{font-size:11.5px}
  .jadual-waktu th,.jadual-waktu td{padding:9px 5px}
  .kad-berita .gambar{height:158px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ==========================================================================
   MODAL KOMPAUN
   ========================================================================== */

/* kad perkhidmatan sebagai butang (bukan pautan keluar) */
button.kad-layan{
  border:0;font:inherit;text-align:left;cursor:pointer;width:100%;
  -webkit-tap-highlight-color:transparent;
}
button.kad-layan:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ------------------------------------------------------------- lapisan */
.lapik{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(12,14,40,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s var(--ease);
}
.lapik[hidden]{display:none}
.lapik.buka{opacity:1}

.modal{
  position:relative;width:100%;max-width:640px;max-height:calc(100vh - 48px);
  background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.42);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(14px) scale(.985);
  transition:transform .24s var(--ease);
}
.lapik.buka .modal{transform:none}

.modal-kepala{
  display:flex;align-items:center;gap:14px;flex:none;
  padding:18px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(100deg,#22265F 0%,#2E2D7B 60%,#4A3F42 100%);
  color:#fff;
}
.modal-kepala .mk-teks{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.modal-kepala .mk-tajuk{font-size:16px;font-weight:600}
.modal-kepala .mk-sub{font-size:11.5px;color:rgba(255,255,255,.72);margin-top:2px}
.modal-tutup{
  margin-left:auto;flex:none;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s var(--ease);
}
.modal-tutup:hover{background:rgba(255,255,255,.26)}
.modal-tutup svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

.modal-badan{
  padding:24px 22px 26px;overflow-y:auto;overscroll-behavior:contain;
  flex:1;min-height:0;
}

/* --------------------------------------------------------- kandungan am */
.modal-panel{animation:masukPanel .22s var(--ease)}
@keyframes masukPanel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.panduan{margin:0 0 20px;font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.panduan.tengah{text-align:center}
.tajuk-langkah{font-size:18px;margin:0 0 8px;letter-spacing:-.01em}
.tajuk-langkah.tengah{text-align:center}

.pilih-mod{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  background:var(--soft);border:1px solid var(--line);border-radius:11px;
  padding:4px;margin-bottom:20px;
}
.pilih-mod button{
  border:0;background:transparent;cursor:pointer;font-size:13.5px;font-weight:500;
  color:var(--ink-2);padding:11px 8px;border-radius:8px;
  transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}
.pilih-mod button.aktif{
  background:#fff;color:var(--navy);font-weight:600;
  box-shadow:0 1px 4px rgba(23,26,78,.14);
}

.modal .medan{margin-bottom:18px}
.modal .medan:last-of-type{margin-bottom:0}
.modal .medan label{font-size:12.5px}
.modal .medan input,.modal .medan select{
  font-size:15px;padding:12px 14px;
}
.modal .hint{margin-top:7px;line-height:1.5}
.modal .ralat{display:block;min-height:0}
.modal .ralat:empty{display:none}

.btn-utama{
  width:100%;border:0;cursor:pointer;font:inherit;font-size:15px;font-weight:600;
  color:#fff;background:var(--navy);padding:14px 24px;border-radius:10px;
  transition:background .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.btn-utama:hover:not(:disabled){background:#1D2469;transform:translateY(-1px);box-shadow:0 8px 20px rgba(41,48,132,.26)}
.btn-utama:disabled{background:#C6CADB;cursor:not-allowed}
.btn-garis{
  border:1px solid #CDD3E4;background:#fff;color:var(--ink);cursor:pointer;
  font:inherit;font-size:14px;font-weight:500;padding:13px 22px;border-radius:10px;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.btn-garis:hover{border-color:var(--navy);background:#F7F8FD}

.nota-kecil{
  margin:18px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-3);
  display:flex;gap:8px;align-items:flex-start;
}
.nota-kecil.nota-tengah{justify-content:center;text-align:center}
.nota-kecil svg{flex:none;width:14px;height:14px;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pautan-simulasi{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.pautan-simulasi:hover{color:var(--navy)}

.tindakan{display:flex;gap:10px;margin-top:24px}
.tindakan .btn-garis{flex:0 0 auto;min-width:132px}
.tindakan .btn-utama{flex:1}

/* ------------------------------------------------------------- hasil */
.hasil-kepala{
  display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;
}
.hasil-kira{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.hasil-cari{margin:4px 0 0;font-size:12.5px;color:var(--ink-3);word-break:break-all}
.hasil-cari strong{color:var(--ink-2);font-weight:600}

.chip-baris{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chip{
  border:1px solid var(--line);background:#fff;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:500;color:var(--ink-2);
  padding:7px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;
  transition:all .16s var(--ease);
}
.chip span{
  font-size:11px;font-weight:600;background:var(--soft);color:var(--ink-3);
  padding:1px 7px;border-radius:999px;min-width:20px;text-align:center;
}
.chip:hover{border-color:#B9C0D8}
.chip.aktif{background:var(--navy);border-color:var(--navy);color:#fff}
.chip.aktif span{background:rgba(255,255,255,.2);color:#fff}

.senarai-kompaun{display:flex;flex-direction:column;gap:9px}
.baris-k{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:1px solid var(--line);background:#fff;border-radius:11px;
  padding:14px 16px;cursor:pointer;font:inherit;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease);
}
.baris-k:hover{border-color:#B9C0D8;box-shadow:0 6px 18px rgba(23,26,78,.09);transform:translateY(-1px)}
.baris-k:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.bk-kiri{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.bk-no{font-size:12.5px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;word-break:break-all}
.bk-meta{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bk-salah{font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:3px}
.bk-kanan{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.bk-amaun{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.bk-status{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.bk-status.tunggu{background:#FFF3D6;color:#8A6100}
.bk-status.jaya{background:#E3F7EC;color:#0B7A45}

.tanda{
  font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:2px 9px;
  border-radius:999px;white-space:nowrap;
}
.tanda.trafik{background:#E8ECFB;color:#2A3A8E}
.tanda.pelbagai{background:#F1E9FB;color:#6B3AA8}
.tanda.lesen{background:#E4F4F7;color:#0A6072}

.hasil-jumlah{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:18px;padding:15px 18px;border-radius:11px;
  background:var(--soft);border:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);
}
.hasil-jumlah strong{font-size:19px;color:var(--navy);font-variant-numeric:tabular-nums}
.hasil-jumlah.troli{
  margin-top:9px;background:#F0F7F2;border-color:#CFE6D8;
}
.hasil-jumlah.troli strong{color:#0B7A45}

.kosong{
  padding:34px 20px;text-align:center;border:1px dashed #D3D8E8;border-radius:11px;
  background:#FCFCFE;
}
.kosong p{margin:0;font-size:13.5px;color:var(--ink-3)}
.kosong p strong{display:block;font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.5;word-break:break-word}
.kosong .kosong-sub{margin-top:8px;font-size:12.5px;line-height:1.6;max-width:340px;margin-left:auto;margin-right:auto}
.kosong svg{
  width:26px;height:26px;margin:0 auto 12px;display:block;
  stroke:#A9B0C9;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* ------------------------------------------------------------ detail */
.detail-kepala{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.detail-no{
  font-size:15px;font-weight:600;color:var(--navy);margin:0 0 20px;
  font-variant-numeric:tabular-nums;word-break:break-all;
}
.detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:0 0 20px;
}
.dg-item{min-width:0}
.dg-item.penuh{grid-column:1/-1}
.dg-item dt{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:3px;
}
.dg-item dd{margin:0;font-size:13.5px;color:var(--ink);line-height:1.5}

.gambar-kompaun{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  height:132px;border:1px dashed #D3D8E8;border-radius:11px;background:#FCFCFE;
  margin-bottom:20px;
}
.gambar-kompaun svg{width:26px;height:26px;stroke:#A9B0C9;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gambar-kompaun span{font-size:11.5px;color:var(--ink-3)}

.detail-jumlah{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border-radius:11px;background:var(--soft);
  font-size:13.5px;color:var(--ink-2);margin-bottom:4px;
}
.detail-jumlah strong{font-size:22px;color:var(--navy);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- bayar */
.bayar-ringkas{
  display:flex;flex-direction:column;gap:2px;text-align:center;
  padding:20px 18px;border-radius:12px;margin-bottom:22px;
  background:linear-gradient(100deg,#22265F 0%,#31307E 62%,#4A3F42 100%);color:#fff;
}
.bayar-ringkas span{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.bayar-ringkas strong{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bayar-ringkas small{font-size:11px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;word-break:break-all}

.pilih-kaedah{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px;
}
.pilih-kaedah button{
  border:1.5px solid var(--line);background:#fff;cursor:pointer;font:inherit;
  border-radius:11px;padding:13px 8px;display:flex;flex-direction:column;gap:2px;
  align-items:center;text-align:center;transition:all .16s var(--ease);
}
.pilih-kaedah strong{font-size:13px;font-weight:600;color:var(--ink)}
.pilih-kaedah span{font-size:10.5px;color:var(--ink-3);line-height:1.3}
.pilih-kaedah button:hover{border-color:#B9C0D8}
.pilih-kaedah button.aktif{border-color:var(--navy);background:#F5F6FE;box-shadow:0 0 0 3px rgba(41,48,132,.08)}
.pilih-kaedah button.aktif strong{color:var(--navy)}

.senarai-wallet{display:flex;flex-direction:column;gap:8px}
.wallet{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1.5px solid var(--line);background:#fff;cursor:pointer;font:inherit;
  font-size:13.5px;color:var(--ink);padding:13px 16px;border-radius:11px;
  transition:all .16s var(--ease);
}
.wallet:hover{border-color:#B9C0D8}
.wallet.aktif{border-color:var(--navy);background:#F5F6FE}
.wallet-ikon{
  width:30px;height:30px;border-radius:8px;background:var(--soft);flex:none;
  border:1px solid var(--line);
}
.wallet.aktif .wallet-ikon{background:var(--navy);border-color:var(--navy)}

/* ------------------------------------------------------------- sahkan */
.senarai-sah{margin:0 0 20px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.senarai-sah>div{
  display:flex;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);
  font-size:13px;
}
.senarai-sah>div:last-child{border-bottom:0}
.senarai-sah>div:nth-child(even){background:#FAFBFE}
.senarai-sah dt{flex:0 0 40%;color:var(--ink-3);margin:0}
.senarai-sah dd{margin:0;flex:1;color:var(--ink);text-align:right;line-height:1.45}
.senarai-sah>div.penuh{display:block}
.senarai-sah>div.penuh dt{flex:none}
.senarai-sah>div.penuh dd{text-align:left;margin-top:6px;flex:none}

.jumlah-besar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px;border-radius:12px;background:var(--soft);
  font-size:13.5px;color:var(--ink-2);
}
.jumlah-besar strong{font-size:26px;color:var(--navy);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- proses */
.panel-tengah{display:flex;flex-direction:column;align-items:center;padding:34px 10px 30px;text-align:center}
.spinner{
  width:46px;height:46px;border-radius:50%;margin-bottom:22px;
  border:3px solid #E4E7F2;border-top-color:var(--navy);
  animation:pusing .8s linear infinite;
}
@keyframes pusing{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------- berjaya */
.lambang{
  width:62px;height:62px;border-radius:50%;margin:4px auto 18px;
  display:flex;align-items:center;justify-content:center;
}
.lambang svg{width:28px;height:28px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lambang.jaya{background:#E3F7EC}
.lambang.jaya svg{stroke:#0B7A45}
.lambang.gagal{background:#FDEAEA}
.lambang.gagal svg{stroke:#B42318}

.resit{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:22px;
  background:#fff;
}
.resit-kepala{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 18px;background:var(--soft);border-bottom:1px dashed #D3D8E8;
}
.resit-kepala div{display:flex;flex-direction:column;gap:2px}
.resit-kepala strong{font-size:13px;color:var(--ink)}
.resit-kepala span{font-size:11px;color:var(--ink-3)}
.resit-kepala .cap{
  margin-left:auto;flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:#0B7A45;background:#E3F7EC;padding:4px 10px;border-radius:999px;
}
.resit-isi{margin:0;padding:6px 18px 14px}
.resit-isi>div{
  display:flex;gap:16px;padding:9px 0;font-size:12.5px;
  border-bottom:1px solid #F0F2F8;
}
.resit-isi>div:last-child{border-bottom:0}
.resit-isi dt{flex:0 0 42%;color:var(--ink-3);margin:0}
.resit-isi dd{margin:0;flex:1;text-align:right;color:var(--ink);line-height:1.45}
.resit-isi .tebal{padding-top:12px}
.resit-isi .tebal dt{font-weight:600;color:var(--ink-2)}
.resit-isi .tebal dd{font-size:16px;font-weight:700;color:var(--navy)}
.mono{font-variant-numeric:tabular-nums;word-break:break-all}

/* -------------------------------------------------------- responsif */
@media (max-width:860px){
  .lapik{padding:0;align-items:flex-end;background:rgba(12,14,40,.55)}
  .modal{
    max-width:none;max-height:100dvh;height:100dvh;border-radius:0;
    transform:translateY(24px);
  }
  .lapik.buka .modal{transform:none}
  .modal-kepala{padding:16px 18px}
  .modal-badan{padding:20px 18px 18px}
  .detail-grid{grid-template-columns:1fr;gap:12px}
  .tindakan{
    position:sticky;bottom:0;z-index:5;
    flex-direction:column-reverse;gap:9px;
    margin:20px -18px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
    background:#fff;box-shadow:0 -14px 18px -14px rgba(23,26,78,.35);
  }
  .tindakan .btn-garis,.tindakan .btn-utama{width:100%;flex:none;min-width:0}
  .baris-k{flex-direction:column;align-items:flex-start;gap:10px}
  .bk-kanan{flex-direction:row;align-items:center;width:100%;gap:10px}
  .bk-amaun{margin-left:auto}
  .pilih-kaedah{grid-template-columns:1fr;gap:6px}
  .pilih-kaedah button{flex-direction:row;gap:8px;padding:12px 14px;justify-content:flex-start}
  .pilih-kaedah span{font-size:11.5px}
  .senarai-sah>div{flex-direction:column;gap:2px;padding:11px 14px}
  .senarai-sah dd{text-align:left}
  .resit-isi>div{flex-direction:column;gap:2px}
  .resit-isi dd{text-align:left}
  .bayar-ringkas strong{font-size:26px}
}
@media (max-width:380px){
  .modal-badan{padding:18px 14px 28px}
  .modal-kepala .mk-tajuk{font-size:14.5px}
  .modal-kepala .mk-sub{font-size:10.5px}
  .bayar-ringkas strong{font-size:23px}
  .jumlah-besar strong{font-size:22px}
  .detail-jumlah strong{font-size:19px}
}

/* ==========================================================================
   MODUL KOMPAUN — jadual hasil, troli, dan pelarasan
   ========================================================================== */

/* modal lebih lebar untuk jadual */
.modal.lebar{max-width:1220px}

/* tiga tab carian */
.pilih-mod.tiga{grid-template-columns:repeat(3,1fr)}
.pilih-mod.tiga button{font-size:12.5px;padding:11px 6px;line-height:1.3}

/* dropdown pilihan carian */
.pilih-satu{position:relative}
.pilih-satu select{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  border:1px solid #D5DAE8;border-radius:var(--r-sm);
  padding:12px 42px 12px 14px;background:#fff;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  cursor:pointer;transition:border-color .16s,box-shadow .16s;
}
.pilih-satu select:focus{
  outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(41,48,132,.12);
}
.pilih-satu .anak-panah{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;pointer-events:none;
  stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* ------------------------------------------------------ jadual hasil */
/* gaya diadaptasi daripada portal ezy2.mbsj.gov.my:
   header putih, border halus, 13px, padding lapang */
.jadual-lekap{
  overflow-x:auto;border:1px solid #E0E0E0;border-radius:4px;
  -webkit-overflow-scrolling:touch;background:#fff;
}
.jadual-k{
  width:100%;border-collapse:collapse;font-size:13px;
  min-width:1010px;
}
.jadual-k thead th{
  background:#fff;color:rgba(0,0,0,.72);font-weight:600;font-size:12.5px;
  letter-spacing:0;text-align:left;padding:14px 10px;white-space:nowrap;
  position:sticky;top:0;border-bottom:1px solid #E0E0E0;
  line-height:1.35;
}
.jadual-k thead th:first-child{padding-left:18px}
.jadual-k thead th.tengah{text-align:center}
.jadual-k thead th.kanan{text-align:right}
.jadual-k tbody td{
  padding:14px 10px;border-bottom:1px solid #EFEFEF;
  vertical-align:middle;line-height:1.45;color:rgba(0,0,0,.78);
}
.jadual-k tbody td:first-child{padding-left:18px}
.jadual-k tbody tr:nth-child(even){background:#fff}
.jadual-k tbody tr:last-child td{border-bottom:0}
.jadual-k tbody tr:hover{background:#F7F9FC}
.jadual-k td.tengah{text-align:center}
.jadual-k td.kanan{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.jadual-k .tebal-sel{font-weight:600;color:rgba(0,0,0,.87)}
.jadual-k .sel-no{font-variant-numeric:tabular-nums;white-space:nowrap}
.jadual-k thead th:last-child,
.jadual-k tbody td:last-child{padding-right:18px;text-align:center}

.pautan-baris{
  border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:13px;font-weight:500;color:#1565C0;text-align:left;
  font-variant-numeric:tabular-nums;
}
.pautan-baris:hover{color:#0D47A1;text-decoration:underline}

.kadar-asal{
  color:var(--ink-3);text-decoration:line-through;font-weight:400;
}
.sub-sel{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.kosong-tanda{color:#B4BACD}

/* butang troli (ikon) */
.btn-troli{
  border:1px solid #1565C0;background:#fff;color:#1565C0;
  cursor:pointer;font:inherit;
  width:34px;height:34px;padding:0;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.btn-troli svg{
  width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.btn-troli:hover{background:#1565C0;color:#fff}
.btn-troli:focus-visible{outline:2px solid #1565C0;outline-offset:2px}
.btn-troli.ditambah{
  background:#E8F5E9;border-color:#A5D6A7;color:#2E7D32;
}
.btn-troli.ditambah:hover{background:#FFEBEE;border-color:#EF9A9A;color:#C62828}
.btn-troli.sudah{
  border-color:#E0E0E0;background:#F5F5F5;color:#2E7D32;
  cursor:default;
}
.btn-troli.sudah:hover{background:#F5F5F5;color:#2E7D32;border-color:#E0E0E0}
.sel-tindakan{text-align:center;white-space:nowrap}

/* kepala hasil */
.hasil-kanan{display:flex;align-items:center;gap:9px;flex:none}
.pil-troli{
  font-size:11.5px;font-weight:600;color:#0B7A45;background:#E3F7EC;
  padding:5px 12px;border-radius:999px;white-space:nowrap;
}
.btn-kecil{padding:8px 16px;font-size:12.5px;white-space:nowrap}

/* nota diskaun pada detail */
.nota-diskaun{
  display:block;font-style:normal;font-size:11px;color:#8A6100;
  margin-top:3px;font-weight:500;
}
.kanan-jumlah{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.kanan-jumlah s{font-size:12px;color:var(--ink-3);font-weight:400}

/* toast ralat */
.toast.ralat-toast{background:#7A1B12}
.toast.ralat-toast svg{stroke:#FFB4A8}

/* --------------------------------------------------- jadual -> kad (mobile) */
@media (max-width:860px){
  .modal.lebar{max-width:none}
  .jadual-lekap{border:0;border-radius:0;overflow:visible}
  .jadual-k{min-width:0;display:block}
  .jadual-k thead{display:none}
  .jadual-k tbody{display:block}

  .jadual-k tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 14px;
    border:1px solid var(--line);border-radius:12px;
    padding:14px 16px;margin-bottom:10px;background:#fff;
  }
  .jadual-k tbody tr:nth-child(even){background:#fff}
  .jadual-k tbody tr:hover{background:#fff}

  .jadual-k tbody td{
    display:flex;flex-direction:column;gap:2px;
    padding:6px 0;border-bottom:0;text-align:left!important;
    font-size:13px;
  }
  .jadual-k tbody td::before{
    content:attr(data-label);
    font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-3);
  }

  /* baris 1: no kompaun (penuh) */
  .jadual-k .sel-no{grid-column:1/-1;padding-bottom:10px;border-bottom:1px solid #F0F2F8;margin-bottom:4px}
  .jadual-k .sel-no::before{display:none}
  .pautan-baris{font-size:13.5px;font-weight:600}

  /* baris akhir: amaun + tindakan sebaris */
  .jadual-k td[data-label="Amaun Perlu Dibayar"]{
    grid-column:1/2;justify-content:flex-end;
  }
  .jadual-k td[data-label="Amaun Perlu Dibayar"]::before{margin-bottom:1px}
  .jadual-k td[data-label="Amaun Perlu Dibayar"]{
    font-size:16px;font-weight:700;color:var(--navy);
  }
  .jadual-k .sel-tindakan{
    grid-column:2/3;align-items:flex-end;justify-content:flex-end;
  }
  .jadual-k .sel-tindakan::before{display:none}
  .btn-troli{padding:9px 18px;font-size:12.5px;width:100%}

  /* sembunyi medan kurang penting pada mobile */
  .jadual-k td[data-label="Kadar Asal"]{display:none}
  .jadual-k td[data-label="Bil. Hari"]{display:none}
  .jadual-k td[data-label="Nama Pesalah"]{grid-column:1/-1}

  .hasil-kepala{flex-direction:column;gap:12px}
  .hasil-kanan{width:100%;justify-content:space-between}
}

@media (max-width:380px){
  .pilih-mod.tiga button{font-size:11px;padding:10px 4px}
  .jadual-k tbody tr{padding:12px 13px;gap:0 10px}
}

/* ==========================================================================
   TROLI & INVOIS — footer modal, checkbox pilih, halaman invois
   ========================================================================== */

/* ------------------------------------------------ footer troli dalam modal */
.modal-kaki{
  flex:none;border-top:1px solid #E0E0E0;background:#fff;
  padding:12px 24px 14px;
}
.modal-kaki[hidden]{display:none}
.btn-troli-bawah{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;text-decoration:none;
  background:#1565C0;color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:13px 18px;border-radius:6px;
  transition:background .16s var(--ease);
}
.btn-troli-bawah:hover{background:#0D47A1;color:#fff}
.btn-troli-bawah:focus-visible{outline:2px solid #1565C0;outline-offset:2px}
.btn-troli-bawah svg{
  width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
}
.bt-bilangan{
  background:#fff;color:#1565C0;font-size:11.5px;font-weight:700;
  min-width:19px;height:19px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;font-variant-numeric:tabular-nums;
}
.bt-teks{font-variant-numeric:tabular-nums}

/* ----------------------------------------------------- checkbox pilih */
.sel-pilih{width:44px;text-align:center;padding-left:14px!important}
.jadual-k thead th.sel-pilih{padding-left:14px!important;padding-right:0}
.jadual-k tbody td.sel-pilih{padding-left:14px!important;padding-right:0}
.cb-baris{
  width:16px;height:16px;margin:0;cursor:pointer;
  accent-color:#1565C0;vertical-align:middle;
}
.cb-baris:disabled{cursor:default;opacity:.4}
.cb-kosong{
  display:inline-block;width:16px;height:16px;
  border:1px solid #E0E0E0;border-radius:3px;background:#FAFAFA;
}
.jadual-k tbody tr.baris-dipilih{background:#EAF3FD}
.jadual-k tbody tr.baris-dipilih:hover{background:#E1EDFB}

/* bar pilih */
.bar-pilih{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;margin-top:12px;
  border:1px solid #E0E0E0;border-radius:6px;background:#FAFBFC;
}
.bar-pilih.aktif{background:#EAF3FD;border-color:#B9D5F5}
.bar-teks{font-size:12.5px;color:rgba(0,0,0,.62);line-height:1.4}
.bar-pilih.aktif .bar-teks{color:rgba(0,0,0,.78)}
.bar-teks strong{font-weight:600;color:#0D47A1}
.btn-kecil{padding:9px 16px!important;font-size:12.5px!important;width:auto!important}

/* =========================================================== HALAMAN INVOIS */
.invois-akar{width:100%}
.invois-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:22px;align-items:start;
}
.invois-kad{
  background:#fff;border:1px solid #E4E8F0;border-radius:12px;
  padding:24px 26px;box-shadow:0 2px 10px rgba(22,37,92,.04);
}
.invois-kad + .invois-kad{margin-top:16px}
.inv-kepala{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:14px;border-bottom:1px solid #EDF0F5;margin-bottom:2px;
}
.inv-kepala h2,.invois-kad h2{
  font-size:15px;font-weight:600;color:rgba(0,0,0,.87);margin:0;
}
.inv-kira{font-size:12px;color:rgba(0,0,0,.5);font-variant-numeric:tabular-nums}

/* baris item */
.inv-senarai{display:flex;flex-direction:column}
.inv-baris{
  display:flex;align-items:flex-start;gap:18px;
  padding:18px 0;border-bottom:1px solid #F0F2F6;
}
.inv-baris:last-child{border-bottom:0;padding-bottom:6px}
.inv-baris.inv-lunas{opacity:.62}
.inv-kiri{flex:1 1 auto;min-width:0}
.inv-no{
  margin:0 0 4px;font-size:13.5px;font-weight:600;color:rgba(0,0,0,.87);
  font-variant-numeric:tabular-nums;word-break:break-word;
}
.inv-meta{margin:0 0 4px;font-size:12px;color:rgba(0,0,0,.55);line-height:1.45}
.inv-salah{margin:0 0 4px;font-size:12.5px;color:rgba(0,0,0,.7);line-height:1.45}
.inv-kanan{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.inv-kanan strong{
  font-size:15px;font-weight:700;color:rgba(0,0,0,.87);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.inv-tambah{
  padding-top:16px;margin-top:4px;border-top:1px solid #EDF0F5;
}
.btn-buang{
  border:1px solid #E0E0E0;background:#fff;color:rgba(0,0,0,.45);
  width:30px;height:30px;padding:0;border-radius:4px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.btn-buang svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.btn-buang:hover{background:#FFEBEE;border-color:#EF9A9A;color:#C62828}
.btn-buang:focus-visible{outline:2px solid #C62828;outline-offset:2px}

/* ringkasan sisi */
.invois-sisi{position:sticky;top:20px}
.ringkasan h2{margin-bottom:14px}
.ringkas-senarai{margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.ringkas-senarai > div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.ringkas-senarai dt{font-size:12.5px;color:rgba(0,0,0,.58)}
.ringkas-senarai dd{
  margin:0;font-size:12.5px;font-weight:600;color:rgba(0,0,0,.8);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ringkas-senarai dd.hijau{color:#2E7D32}
.ringkas-item{
  border-top:1px solid #EDF0F5;border-bottom:1px solid #EDF0F5;
  padding:12px 0;margin-bottom:14px;
  display:flex;flex-direction:column;gap:8px;
  max-height:260px;overflow-y:auto;
}
.ri-baris{
  display:flex;justify-content:space-between;gap:12px;
  font-size:12px;color:rgba(0,0,0,.62);
}
.ri-baris span:first-child{font-variant-numeric:tabular-nums;word-break:break-word}
.ri-baris span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.ringkas-jumlah{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 0;border-top:1px dashed #D8DEE8;
}
.ringkas-jumlah span{font-size:12.5px;color:rgba(0,0,0,.6)}
.ringkas-jumlah strong{
  font-size:20px;font-weight:700;color:#16255C;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.btn-penuh{
  display:block;width:100%;text-align:center;text-decoration:none;
  box-sizing:border-box;
}
.btn-penuh[disabled]{opacity:.45;cursor:not-allowed}

/* laluan langkah */
.langkah-laluan{
  display:flex;align-items:center;gap:10px;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #EDF0F5;
  font-size:12px;color:rgba(0,0,0,.42);
  min-width:0;
}
.laluan-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.laluan-item i{
  flex:0 0 auto;font-style:normal;width:20px;height:20px;border-radius:999px;
  background:#EEF1F6;color:rgba(0,0,0,.5);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.laluan-item.selesai{color:#2E7D32}
.laluan-item.selesai i{background:#E8F5E9;color:#2E7D32}
.laluan-item.aktif{color:#0D47A1;font-weight:600}
.laluan-item.aktif i{background:#1565C0;color:#fff}
.laluan-garis{flex:1 1 auto;height:1px;background:#E4E8F0;min-width:14px}
.inv-tajuk{font-size:17px!important;font-weight:600;color:rgba(0,0,0,.87);margin:0 0 6px}
.inv-tajuk.tengah{text-align:center}
.tindakan-halaman{margin-top:22px;padding-top:18px;border-top:1px solid #EDF0F5}

/* responsif */
@media (max-width:1000px){
  .invois-grid{grid-template-columns:minmax(0,1fr)}
  .invois-sisi{position:static}
  .invois-sisi .invois-kad{order:-1}
}
@media (max-width:860px){
  .invois-kad{padding:18px 16px;border-radius:10px}
  .inv-baris{gap:12px;padding:15px 0}
  .inv-no{font-size:12.5px}
  .inv-kanan strong{font-size:14px}
  .bar-pilih{flex-direction:column;align-items:stretch;gap:10px}
  .bar-pilih .btn-utama{width:100%}
  .sel-pilih{width:38px;padding-left:10px!important}
  .jadual-k thead th.sel-pilih{padding-left:10px!important}
  .jadual-k tbody td.sel-pilih{padding-left:10px!important}
  .modal-kaki{padding:10px 16px 12px}
  .btn-troli-bawah{font-size:13px;padding:12px 14px}
  .langkah-laluan{font-size:11px;gap:7px}
  .laluan-item{gap:5px}
  .laluan-item i{width:18px;height:18px;font-size:10px}
  .laluan-garis{min-width:6px}
}

@media (max-width:400px){
  .langkah-laluan{font-size:10px;gap:5px}
  .laluan-item{gap:4px}
  .laluan-garis{min-width:4px}
}

@media (max-width:340px){
  .langkah-laluan{font-size:9.5px;gap:4px}
  .laluan-item{gap:3px}
  .laluan-item i{width:16px;height:16px;font-size:9px}
  .laluan-garis{min-width:2px}
}

/* ---------------------------------------------- resit: senarai berbilang */
.resit-senarai{
  border-top:1px dashed #D8DEE8;
  padding:14px 18px 18px;
  display:flex;flex-direction:column;gap:0;
}
.resit-senarai:empty{display:none}
.resit-baris{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:8px 0;border-bottom:1px solid #F2F4F8;
  font-size:12.5px;
}
.resit-baris:last-child{border-bottom:0}
.resit-baris span:first-child{
  color:rgba(0,0,0,.68);font-variant-numeric:tabular-nums;
  word-break:break-word;flex:1 1 auto;
}
.resit-baris span:last-child{
  color:rgba(0,0,0,.87);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;
}

.senarai-bayar{display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.sb-baris{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  width:100%;
}
.sb-no{
  font-size:12.5px;color:rgba(0,0,0,.72);
  font-variant-numeric:tabular-nums;word-break:break-word;flex:1 1 auto;
}
.sb-amaun{
  font-size:12.5px;font-weight:600;color:rgba(0,0,0,.87);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;
}

@media (max-width:860px){
  .resit-senarai{padding:12px 14px 16px}
  .resit-baris{font-size:11.5px;gap:10px;padding:7px 0}
  .senarai-bayar dt,.senarai-bayar dd{font-size:11.5px}
}

/* ---------------------------------------- invois: checkbox & maklumat pembayar */
.inv-cb{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-top:1px;cursor:pointer;
}
.inv-cb input{
  width:16px;height:16px;margin:0;cursor:pointer;
  accent-color:#1565C0;
}
.inv-baris.inv-dipilih{background:#F4F9FF}
.inv-baris.inv-dipilih .inv-no{color:#0D47A1}

.inv-semua{
  display:inline-flex;align-items:center;gap:9px;
  cursor:pointer;font-size:13px;font-weight:500;color:rgba(0,0,0,.72);
  user-select:none;
}
.inv-semua input{
  width:16px;height:16px;margin:0;cursor:pointer;
  accent-color:#1565C0;
}
.inv-semua input:disabled{cursor:default;opacity:.4}

.nota-pilih{
  margin:10px 0 0;font-size:11.5px;line-height:1.45;
  color:#B42318;text-align:center;
}
.wajib{color:#C62828;font-weight:600}

@media (max-width:860px){
  .inv-cb{width:18px;height:18px}
  .inv-semua{font-size:12.5px}
}

/* ------------------------------------------- persetujuan syarat & terma */
.setuju-baris{
  margin:18px 0 4px;padding:14px 16px;
  border:1px solid #E4E8F0;border-radius:8px;background:#FAFBFC;
}
.setuju-label{
  display:flex;align-items:flex-start;gap:11px;
  cursor:pointer;user-select:none;
}
.setuju-label input{
  width:16px;height:16px;margin:1px 0 0;flex:0 0 auto;
  cursor:pointer;accent-color:#1565C0;
}
.setuju-label span{
  font-size:12.5px;line-height:1.55;color:rgba(0,0,0,.72);
}
.setuju-label a{
  color:#1565C0;text-decoration:underline;text-underline-offset:2px;
  font-weight:500;
}
.setuju-label a:hover{color:#0D47A1}
.setuju-baris:focus-within{border-color:#B9D5F5;background:#F4F9FF}

/* --------------------------------------------------- halaman dokumen */
.dokumen{
  max-width:780px;margin:0 auto;background:#fff;
  border:1px solid #E4E8F0;border-radius:12px;
  padding:38px 44px;box-shadow:0 2px 10px rgba(22,37,92,.04);
}
.dokumen h2{
  font-size:14.5px;font-weight:600;color:rgba(0,0,0,.87);
  margin:26px 0 8px;letter-spacing:0;
}
.dokumen h2:first-of-type{margin-top:8px}
.dokumen p{
  margin:0 0 12px;font-size:13.5px;line-height:1.72;
  color:rgba(0,0,0,.72);text-align:justify;
}
.dokumen a{color:#1565C0;text-decoration:underline;text-underline-offset:2px}
.dokumen-nota{
  padding:13px 16px;margin:0 0 24px!important;
  background:#FFF8E6;border-left:3px solid #E0A800;border-radius:0 6px 6px 0;
  font-size:12.5px!important;color:#6B5300!important;text-align:left!important;
}
.dokumen-kaki{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:32px;padding-top:20px;border-top:1px solid #EDF0F5;
}
.dokumen-kaki span{font-size:12px;color:rgba(0,0,0,.5)}

@media (max-width:860px){
  .dokumen{padding:22px 18px;border-radius:10px}
  .dokumen p{font-size:13px;line-height:1.68;text-align:left}
  .dokumen h2{font-size:13.5px;margin:22px 0 7px}
  .dokumen-kaki{flex-direction:column;align-items:stretch;gap:12px}
  .dokumen-kaki .btn-garis{width:100%}
  .setuju-baris{padding:12px 13px}
  .setuju-label span{font-size:12px}
}

/* ==========================================================================
   SIMULASI FIUU HOSTED CHECKOUT
   Halaman berasingan — meniru gaya gateway, bukan gaya portal MBPG.
   ========================================================================== */

body.body-fiuu{
  background:#F4F6FA;
  font-family:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;
  margin:0;color:#1B1D3A;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* jalur amaran simulasi */
.fiuu-jalur{
  background:#FFF4CE;color:#6B5300;border-bottom:1px solid #F0D98A;
  font-size:11.5px;font-weight:500;text-align:center;
  padding:7px 14px;letter-spacing:.01em;
}

/* header */
.fiuu-kepala{background:#fff;border-bottom:1px solid #E4E8F0}
.fiuu-dalam{
  max-width:720px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.fiuu-kepala .fiuu-dalam{padding-top:18px;padding-bottom:18px}
.fiuu-jenama{display:flex;align-items:center;gap:10px}
.fiuu-logo{
  display:flex;align-items:center;gap:7px;
  font-size:20px;font-weight:700;letter-spacing:-.045em;color:#1B1D3A;
  line-height:1;
}
.fiuu-logo::before{
  content:'';width:14px;height:14px;border-radius:3px;
  background:#1B1D3A;
  clip-path:polygon(0 0, 100% 0, 100% 58%, 58% 100%, 0 100%);
}
.fiuu-tag{
  font-size:9.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:#A3A9BC;
  padding-left:10px;border-left:1px solid #E4E8F0;
  line-height:1.2;
}
.fiuu-lock{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;color:#5A6076;
}
.fiuu-lock svg{
  width:15px;height:15px;stroke:#2E7D32;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

/* utama */
.fiuu-utama{
  flex:1 1 auto;width:100%;max-width:720px;margin:0 auto;
  padding:28px 20px 40px;
}
.fiuu-kad{
  background:#fff;border:1px solid #E4E8F0;border-radius:10px;
  box-shadow:0 2px 12px rgba(27,29,58,.05);
  overflow:hidden;
}

/* ringkasan pesanan */
.fiuu-order{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:16px 22px;border-bottom:1px solid #EDF0F5;background:#FAFBFD;
}
.fo-kiri,.fo-kanan{display:flex;flex-direction:column;gap:3px}
.fo-kanan{text-align:right}
.fo-label{
  font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:#8A90A6;
}
.fiuu-order strong{font-size:12.5px;font-weight:600;color:#1B1D3A;line-height:1.4}

.fiuu-jumlah{
  padding:22px;text-align:center;border-bottom:1px solid #EDF0F5;
}
.fiuu-jumlah > span{
  display:block;font-size:11.5px;color:#6B7189;margin-bottom:6px;
}
.fiuu-jumlah > strong{
  display:block;font-size:30px;font-weight:700;color:#1B1D3A;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.fiuu-jumlah > small{
  display:block;font-size:11.5px;color:#8A90A6;margin-top:5px;
}

/* senarai saluran */
.fiuu-arahan{
  margin:0;padding:20px 22px 12px;
  font-size:12.5px;color:#6B7189;
}
.fiuu-senarai{padding:0 14px 8px}
.fiuu-saluran{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:14px 10px;margin-bottom:0;
  background:none;border:0;border-bottom:1px solid #F2F4F8;
  cursor:pointer;font:inherit;text-align:left;border-radius:0;
  transition:background .14s ease;
}
.fiuu-saluran:last-child{border-bottom:0}
.fiuu-saluran:hover{background:#F7F9FC}
.fiuu-saluran:focus-visible{outline:2px solid #1565C0;outline-offset:-2px}
.fs-ikon{
  flex:0 0 auto;width:21px;height:21px;
  stroke:#5A6076;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.fiuu-saluran:hover .fs-ikon{stroke:#1B1D3A}
.fs-teks{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.fs-teks strong{font-size:13px;font-weight:500;color:#1B1D3A;letter-spacing:-.005em}
.fs-teks small{font-size:11.5px;color:#8A90A6;line-height:1.4}
.fs-panah{
  flex:0 0 auto;width:15px;height:15px;stroke:#C2C7D6;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

.fiuu-batal{
  padding:16px 22px 20px;border-top:1px solid #EDF0F5;text-align:center;
}
.fiuu-batal a{
  font-size:12px;color:#6B7189;text-decoration:none;
}
.fiuu-batal a:hover{color:#1B1D3A;text-decoration:underline}

/* butiran saluran */
.fiuu-balik{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:16px 22px 6px;
  font:inherit;font-size:12px;color:#6B7189;cursor:pointer;
}
.fiuu-balik:hover{color:#1B1D3A}
.fiuu-balik svg{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

.fiuu-saluran-tajuk{
  display:flex;align-items:center;gap:12px;
  padding:10px 22px 18px;border-bottom:1px solid #EDF0F5;
}
.fiuu-saluran-tajuk strong{font-size:14px;font-weight:600;color:#1B1D3A}

.fiuu-medan{padding:18px 22px 0}
.fiuu-medan label{
  display:block;font-size:12px;font-weight:500;
  color:#3C4257;margin-bottom:7px;
}
.fiuu-medan input,.fiuu-medan select{
  width:100%;box-sizing:border-box;
  padding:11px 13px;font:inherit;font-size:13px;
  border:1px solid #D4D9E4;border-radius:6px;background:#fff;
  color:#1B1D3A;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.fiuu-medan input:focus,.fiuu-medan select:focus{
  border-color:#1565C0;box-shadow:0 0 0 3px rgba(21,101,192,.12);
}
.fiuu-medan input::placeholder{color:#AEB4C4}
.fiuu-pilih{position:relative}
.fiuu-pilih select{appearance:none;padding-right:38px;cursor:pointer}
.fiuu-pilih svg{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:#8A90A6;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
.fiuu-baris{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 22px 0}
.fiuu-baris .fiuu-medan{padding:0}

/* QR */
.fiuu-qr{padding:22px;text-align:center}
.qr-kotak{
  width:190px;height:190px;margin:0 auto 16px;
  padding:12px;background:#fff;border:1px solid #E4E8F0;border-radius:8px;
}
.qr-kotak svg{width:100%;height:100%;display:block;fill:#1B1D3A}
.fiuu-qr p{margin:0 0 5px;font-size:12.5px;color:#3C4257;line-height:1.55}
.fiuu-qr small{font-size:11px;color:#8A90A6}

/* kaunter tunai */
.fiuu-nota-bayar{padding:22px;text-align:center}
.fiuu-nota-bayar p{margin:0 0 14px;font-size:12.5px;color:#3C4257;line-height:1.55}
.kod-bayar{
  font-size:20px;font-weight:700;letter-spacing:.14em;
  color:#1B1D3A;font-variant-numeric:tabular-nums;
  padding:14px;background:#F4F6FA;border:1px dashed #C2C7D6;border-radius:6px;
  margin-bottom:11px;
}
.fiuu-nota-bayar small{font-size:11px;color:#8A90A6}

/* ralat & butang */
.fiuu-ralat{
  margin:0;padding:0 22px;font-size:11.5px;color:#C0392B;
}
.fiuu-ralat:not(:empty){padding-top:14px;padding-bottom:2px}

.fiuu-btn{
  display:block;width:calc(100% - 44px);margin:20px 22px 22px;
  box-sizing:border-box;
  padding:14px;border:0;border-radius:6px;
  background:#1B1D3A;color:#fff;
  font:inherit;font-size:13.5px;font-weight:600;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background .15s ease;
  box-shadow:0 1px 2px rgba(27,29,58,.18);
}
.fiuu-btn:hover{background:#2A2D52}
.fiuu-btn:focus-visible{outline:2px solid #1565C0;outline-offset:2px}

/* proses */
.fiuu-proses,.fiuu-selesai{padding:52px 26px;text-align:center}
.fiuu-spinner{
  width:38px;height:38px;margin:0 auto 22px;
  border:3px solid #E4E8F0;border-top-color:#1B1D3A;border-radius:50%;
  animation:fiuu-pusing .8s linear infinite;
}
@keyframes fiuu-pusing{to{transform:rotate(360deg)}}
.fiuu-proses h2,.fiuu-selesai h2{
  margin:0 0 8px;font-size:16px;font-weight:600;color:#1B1D3A;
}
.fiuu-proses p,.fiuu-selesai p{
  margin:0 0 6px;font-size:12.5px;color:#6B7189;line-height:1.6;
}
.fiuu-proses small{font-size:11px;color:#AEB4C4}

.fiuu-tanda{
  width:56px;height:56px;margin:0 auto 20px;border-radius:50%;
  background:#E8F5E9;display:flex;align-items:center;justify-content:center;
}
.fiuu-tanda svg{
  width:28px;height:28px;stroke:#2E7D32;fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}

.fiuu-kosong{padding:48px 26px;text-align:center}
.fiuu-kosong p{margin:0 0 10px;font-size:13px;color:#6B7189;line-height:1.6}
.fiuu-kosong p strong{color:#1B1D3A}
.fiuu-kosong .fiuu-btn{margin-top:22px;width:auto;display:inline-block;padding:12px 28px}

/* nota bawah */
.fiuu-nota{
  max-width:720px;margin:20px auto 0;padding:0 20px;
  font-size:11px;color:#8A90A6;text-align:center;line-height:1.65;
}
.fiuu-nota span{color:#AEB4C4}

/* footer */
.fiuu-kaki{
  background:#fff;border-top:1px solid #E4E8F0;
  font-size:11px;color:#8A90A6;
}
.fiuu-kaki-dalam{padding-top:16px;padding-bottom:16px}
.fiuu-kaki-kanan{text-align:right}

@media (max-width:640px){
  .fiuu-utama{padding:18px 12px 30px}
  .fiuu-kad{border-radius:8px}
  .fiuu-order{padding:14px 16px}
  .fiuu-order strong{font-size:11.5px}
  .fiuu-jumlah{padding:18px 16px}
  .fiuu-jumlah > strong{font-size:26px}
  .fiuu-arahan{padding:16px 16px 10px}
  .fiuu-senarai{padding:0 8px 6px}
  .fiuu-saluran{padding:12px 8px;gap:11px}
  .fs-ikon{width:20px;height:20px}
  .fs-teks strong{font-size:12.5px}
  .fs-teks small{font-size:11px}
  .fiuu-balik{padding:14px 16px 4px}
  .fiuu-saluran-tajuk{padding:8px 16px 16px}
  .fiuu-medan{padding:16px 16px 0}
  .fiuu-baris{padding:16px 16px 0;grid-template-columns:1fr}
  .fiuu-ralat{padding:0 16px}
  .fiuu-btn{width:calc(100% - 32px);margin:18px 16px 18px}
  .fiuu-proses,.fiuu-selesai{padding:40px 18px}
  .qr-kotak{width:160px;height:160px}
  .fiuu-kaki-dalam{flex-direction:column;gap:5px;text-align:center}
  .fiuu-kaki-kanan{text-align:center}
}

/* kad handoff dalam invois.html */
.handoff-kad{
  border:1px solid #E4E8F0;border-radius:8px;
  background:#FAFBFD;margin:16px 0 0;
  padding:4px 18px;
}
.ho-baris{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid #EDF0F5;
}
.ho-baris:last-child{border-bottom:0}
.ho-baris > span{font-size:12px;color:#6B7189}
.ho-baris > strong{
  font-size:12.5px;font-weight:600;color:#1B1D3A;text-align:right;
  font-variant-numeric:tabular-nums;word-break:break-word;
}
.ho-baris.ho-jumlah{padding-top:14px}
.ho-baris.ho-jumlah > strong{font-size:17px;color:#16255C}

.handoff-nota{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:16px;padding:13px 16px;
  background:#F0F6FC;border:1px solid #CFE2F5;border-radius:8px;
}
.handoff-nota svg{
  width:17px;height:17px;flex:0 0 auto;margin-top:1px;
  stroke:#1565C0;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.handoff-nota span{font-size:12px;line-height:1.6;color:#3C4257}
.handoff-nota strong{font-weight:600;color:#1B1D3A}

@media (max-width:860px){
  .ho-baris{flex-direction:column;gap:3px;align-items:flex-start}
  .ho-baris > strong{text-align:left}
}

/* ------------------------------------------- butang isi maklumat automatik */
.tajuk-baris{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.tajuk-baris .inv-tajuk{margin-bottom:8px}

.btn-autofill{
  flex:0 0 auto;width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:#F0F6FC;border:1px solid #CFE2F5;border-radius:6px;
  cursor:pointer;margin-bottom:8px;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.btn-autofill svg{
  width:16px;height:16px;stroke:#1565C0;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.btn-autofill:hover{background:#E1EEFA;border-color:#A9CDF0}
.btn-autofill:focus-visible{outline:2px solid #1565C0;outline-offset:2px}
.btn-autofill.ditekan{
  background:#D6E9FA;border-color:#1565C0;transform:scale(.94);
}

@media (max-width:640px){
  .btn-autofill{width:32px;height:32px}
  .btn-autofill svg{width:17px;height:17px}
}

/* ==========================================================================
   LOG MASUK + AKAUN SAYA
   ========================================================================== */

/* ------------------------------------------------------- halaman log masuk */
body.body-masuk{
  background:var(--soft);
  min-height:100vh;
}

.masuk-akar{
  display:grid;grid-template-columns:minmax(320px,44%) 1fr;
  min-height:100vh;
}

/* panel kiri */
.masuk-kiri{
  position:relative;overflow:hidden;
  background:
    linear-gradient(160deg,rgba(18,20,58,.72) 0%,rgba(18,20,58,.50) 45%,rgba(41,48,132,.62) 100%),
    linear-gradient(150deg,#293084 0%,#3B3A7E 40%,#6E6055 70%,#D9A80D 100%);
  color:#fff;
  display:flex;
}
.masuk-kiri::after{
  content:'';position:absolute;inset:auto -20% -30% auto;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(250,192,1,.20) 0%,transparent 68%);
  pointer-events:none;
}
.mk-dalam{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  padding:40px 44px;width:100%;
}
.mk-jenama{
  display:flex;align-items:center;gap:13px;
  color:#fff;text-decoration:none;
}
.mk-jenama img{width:44px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.mk-jenama strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.mk-jenama small{display:block;font-size:11.5px;color:rgba(255,255,255,.72);margin-top:1px}

.mk-teks{margin:auto 0;max-width:400px;padding:40px 0}
.mk-teks h2{
  font-size:clamp(26px,2.6vw,34px);line-height:1.24;
  letter-spacing:-.02em;margin:0 0 16px;
}
.mk-teks p{
  margin:0 0 26px;font-size:14px;line-height:1.7;
  color:rgba(255,255,255,.78);
}
.mk-senarai{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.mk-senarai li{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:rgba(255,255,255,.88)}
.mk-senarai svg{
  flex:0 0 auto;width:17px;height:17px;margin-top:1px;
  stroke:#FAC001;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}

.mk-kaki{font-size:11px;color:rgba(255,255,255,.45);margin:0}

/* panel kanan */
.masuk-kanan{
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
}
.masuk-kad{
  width:100%;max-width:430px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:34px 34px 28px;
  box-shadow:0 12px 36px rgba(23,26,78,.08);
}

.mk-balik{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--ink-3);text-decoration:none;
  margin-bottom:22px;
}
.mk-balik:hover{color:var(--navy);text-decoration:none}
.mk-balik svg{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

.mk-tajuk-baris{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:22px;
}
.mk-tajuk-baris h1{
  font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;
}
.mk-tajuk-baris p{margin:0;font-size:13px;color:var(--ink-3);line-height:1.55}
.mk-tajuk-baris .btn-autofill{margin:2px 0 0}

/* pilih peranan */
.peranan-set{
  border:0;padding:0;margin:0 0 22px;
}
.peranan-set legend{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);
  padding:0;margin-bottom:9px;
}
.peranan-pilih{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.peranan-item{cursor:pointer;display:block}
.peranan-item input{
  position:absolute;opacity:0;width:0;height:0;
}
.pi-isi{
  display:flex;flex-direction:column;gap:4px;
  padding:13px 13px 14px;
  border:1.5px solid var(--line);border-radius:10px;
  background:#fff;
  transition:border-color .15s ease,background .15s ease;
}
.pi-isi svg{
  width:19px;height:19px;margin-bottom:4px;
  stroke:var(--ink-3);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .15s ease;
}
.pi-isi strong{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.pi-isi small{font-size:10.5px;color:var(--ink-3);line-height:1.4}

.peranan-item input:checked + .pi-isi{
  border-color:var(--navy);background:#F5F6FD;
  box-shadow:inset 0 0 0 1px var(--navy);
}
.peranan-item input:checked + .pi-isi svg{stroke:var(--navy)}
.peranan-item input:checked + .pi-isi strong{color:var(--navy)}
.peranan-item input:focus-visible + .pi-isi{
  outline:2px solid var(--blue);outline-offset:2px;
}
.peranan-item:hover .pi-isi{border-color:#C3C8DE}

/* medan kata laluan */
.medan-sandi{position:relative}
.medan-sandi input{padding-right:46px}
.btn-lihat{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:6px;cursor:pointer;
  color:var(--ink-3);
}
.btn-lihat:hover{background:var(--soft);color:var(--ink)}
.btn-lihat svg{
  width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.btn-lihat .ikon-sorok{display:none}
.btn-lihat.aktif .ikon-lihat{display:none}
.btn-lihat.aktif .ikon-sorok{display:block}

/* ingat saya */
.masuk-baris{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:-4px 0 20px;
}
.ingat{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.ingat input{
  width:15px;height:15px;margin:0;accent-color:var(--navy);cursor:pointer;
}
.pautan-lupa{font-size:12.5px;color:var(--teal)}

.btn-penuh{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-penuh svg{
  width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

.masuk-nota{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:20px;padding:12px 14px;
  background:#F7F8FD;border:1px solid #E7E9F5;border-radius:9px;
}
.masuk-nota svg{
  flex:0 0 auto;width:15px;height:15px;margin-top:1px;
  stroke:var(--ink-3);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.masuk-nota span{font-size:11.5px;line-height:1.6;color:var(--ink-3)}

@media (max-width:900px){
  .masuk-akar{grid-template-columns:1fr;min-height:0}
  .masuk-kiri{display:none}
  .masuk-kanan{padding:24px 16px 40px;align-items:flex-start}
  .masuk-kad{
    padding:26px 20px 22px;border-radius:12px;
    margin-top:12px;
  }
  .mk-tajuk-baris h1{font-size:21px}
  .peranan-pilih{grid-template-columns:1fr}
  .pi-isi{flex-direction:row;align-items:center;gap:11px;padding:12px 13px}
  .pi-isi svg{width:20px;height:20px;margin:0}
  .pi-isi strong{font-size:13px}
  .pi-isi small{display:none}
}

@media (max-width:400px){
  .masuk-kad{padding:22px 16px 18px}
  .peranan-pilih{grid-template-columns:1fr}
}

/* ============================================================ AKAUN SAYA */
body.body-akaun{background:var(--soft)}

.akaun-akar{display:block}

.akaun-wira{
  background:
    linear-gradient(160deg,rgba(18,20,58,.70) 0%,rgba(18,20,58,.46) 50%,rgba(41,48,132,.58) 100%),
    linear-gradient(120deg,#293084 0%,#3B3A7E 45%,#6E6055 72%,#D9A80D 100%);
  color:#fff;
  padding:34px 0 38px;
}
.akaun-wira.pentadbir{
  background:
    linear-gradient(160deg,rgba(18,20,58,.78) 0%,rgba(18,20,58,.52) 50%,rgba(41,48,132,.62) 100%),
    linear-gradient(120deg,#1F2566 0%,#2E3579 50%,#3B3A7E 100%);
}
.aw-hello{
  margin:0 0 4px;font-size:12px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.akaun-wira h1{
  font-size:clamp(22px,2.6vw,30px);font-weight:600;
  letter-spacing:-.02em;margin:0 0 12px;
}
.aw-meta{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.76);
}
.aw-pisah{width:1px;height:12px;background:rgba(255,255,255,.28)}
.cap-peranan{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:#fff;
}
.cap-peranan.pentadbir{background:rgba(250,192,1,.24);color:#FFE9A8}

.akaun-badan{padding-top:26px;padding-bottom:56px}

/* kad ringkasan */
.kad-ringkas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-bottom:26px;
}
.kr-kad{
  background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:18px 20px;
  display:flex;flex-direction:column;gap:5px;
}
.kr-kad.kr-amber{
  border-color:#F0DFB8;background:#FFFCF3;
}
.kr-label{
  font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);
}
.kr-nilai{
  font-size:23px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.kr-kad.kr-amber .kr-nilai{color:#8A6D00}
.kr-sub{font-size:11.5px;color:var(--ink-3)}

/* seksyen */
.akaun-seksyen{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  margin-bottom:18px;overflow:hidden;
}
.as-kepala{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 22px 16px;border-bottom:1px solid #EEF0F7;
}
.as-kepala h2{
  font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px;
  color:var(--ink);
}
.as-kepala p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.55}
.btn-kecil{padding:9px 16px;font-size:12.5px}

.akaun-dua{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.akaun-dua .akaun-seksyen{margin-bottom:0;display:flex;flex-direction:column}
.akaun-dua .jadual-akaun{min-width:0}
.akaun-dua .jadual-akaun thead th,
.akaun-dua .jadual-akaun tbody td{padding-left:10px;padding-right:10px}
.akaun-dua .jadual-akaun thead th{font-size:10px}
.akaun-dua .jadual-akaun tbody td{font-size:12px}

/* jadual */
.jadual-bekas{overflow-x:auto;-webkit-overflow-scrolling:touch}
.jadual-akaun{
  width:100%;border-collapse:collapse;font-size:12.5px;
  min-width:640px;
}
.jadual-akaun thead th{
  text-align:left;padding:11px 14px;
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);background:#FAFBFD;
  border-bottom:1px solid #EEF0F7;white-space:nowrap;
}
.jadual-akaun tbody td{
  padding:13px 14px;border-bottom:1px solid #F3F5FA;
  color:var(--ink-2);vertical-align:middle;
}
.jadual-akaun tbody tr:last-child td{border-bottom:0}
.jadual-akaun tbody tr:hover{background:#FBFCFE}
.jadual-akaun .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.jadual-akaun .tengah{text-align:center}
.jadual-akaun .tebal{font-weight:600;color:var(--ink)}
.jadual-akaun .kosong{
  text-align:center;padding:32px 14px;color:var(--ink-3);font-size:12.5px;
}
.sel-no{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;
}
.sel-sub{
  display:block;margin-top:3px;
  font-family:inherit;font-size:11.5px;line-height:1.5;
  color:var(--ink-3);white-space:normal;max-width:230px;
}

.btn-baris{
  padding:6px 14px;border-radius:6px;
  border:1px solid var(--navy);background:#fff;
  font-size:11.5px;font-weight:600;color:var(--navy);
  cursor:pointer;transition:background .14s ease;
}
.btn-baris:hover{background:var(--navy);color:#fff}

.btn-ikon{
  width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:6px;
  cursor:pointer;color:var(--ink-3);
  transition:border-color .14s ease,color .14s ease;
}
.btn-ikon:hover{border-color:var(--navy);color:var(--navy)}
.btn-ikon svg{
  width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

.cap-status{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;
}
.cap-status.lulus{background:#E9F6EE;color:#0B7A45}

/* profil */
.senarai-profil{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin:0;padding:6px 22px 20px;
}
.senarai-profil > div{
  padding:13px 0;border-bottom:1px solid #F3F5FA;
}
.senarai-profil > div:nth-last-child(-n+2){border-bottom:0}
.senarai-profil > div.penuh{grid-column:1/-1}
.senarai-profil dt{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;
}
.senarai-profil dd{
  margin:0;font-size:13px;color:var(--ink);line-height:1.55;
  word-break:break-word;
}

/* pecahan */
.akaun-dua .jadual-bekas{flex:1 1 auto}
.pecahan-baris{flex:1 1 auto;padding:6px 22px 18px}
.pb-kepala,.pb-baris{
  display:grid;grid-template-columns:1fr 60px 100px;
  gap:10px;align-items:center;
  padding:11px 0;border-bottom:1px solid #F3F5FA;
}
.pb-kepala{
  padding:8px 0;border-bottom:1px solid #EEF0F7;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);
}
.pb-baris:last-child{border-bottom:0}
.pb-label{font-size:12.5px;color:var(--ink-2)}
.pb-bil{
  font-size:12.5px;color:var(--ink-2);text-align:right;
  font-variant-numeric:tabular-nums;
}
.pb-jum{
  font-size:12.5px;font-weight:600;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;
}
.pb-kepala .pb-bil,.pb-kepala .pb-jum{text-align:right}
.pb-jumlah{
  border-top:1.5px solid #E4E8F0;border-bottom:0;
  margin-top:2px;padding-top:13px;
}
.pb-jumlah .pb-label{font-weight:600;color:var(--ink)}
.pb-jumlah .pb-bil{font-weight:600;color:var(--ink)}
.pb-jumlah .pb-jum{font-weight:700;font-size:13px;color:var(--navy)}

/* nav akaun */
.nav-akaun{position:relative;margin-left:6px}
.nav-pengguna{
  display:flex;align-items:center;gap:9px;
  padding:6px 10px 6px 6px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;cursor:pointer;color:#fff;
  transition:background .15s ease;
}
.nav-pengguna:hover{background:rgba(255,255,255,.2)}
.np-bulatan{
  width:28px;height:28px;border-radius:50%;overflow:hidden;
  background:#FAC001;color:#171A3E;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.01em;
  flex:0 0 auto;
}
.np-bulatan img{width:100%;height:100%;object-fit:cover;display:block}
.np-teks{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.np-teks strong{font-size:12px;font-weight:600}
.np-teks small{font-size:9.5px;color:rgba(255,255,255,.68)}
.nav-pengguna svg{
  width:13px;height:13px;stroke:rgba(255,255,255,.72);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  flex:0 0 auto;
}

.nav-menu{
  position:absolute;right:0;top:calc(100% + 9px);
  min-width:196px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 32px rgba(23,26,78,.14);
  z-index:120;
}
.nav-menu[hidden]{display:none}
.nav-menu a,.nav-menu button{
  display:block;width:100%;text-align:left;
  padding:9px 12px;border:0;border-radius:6px;background:none;
  font-size:12.5px;color:var(--ink-2);text-decoration:none;cursor:pointer;
}
.nav-menu a:hover,.nav-menu button:hover{background:var(--soft);color:var(--ink)}
.nav-menu hr{
  margin:5px 8px;border:0;border-top:1px solid #EEF0F7;
}
.nav-menu button[data-aksi="keluar"]{color:#B42318}

@media (max-width:900px){
  .kad-ringkas{grid-template-columns:1fr;gap:10px}
  .akaun-dua{grid-template-columns:1fr}
  .senarai-profil{grid-template-columns:1fr;padding:6px 18px 18px}
  .senarai-profil > div.penuh{grid-column:auto}
  .senarai-profil > div:nth-last-child(-n+2){border-bottom:1px solid #F3F5FA}
  .senarai-profil > div:last-child{border-bottom:0}
  .as-kepala{padding:16px 18px 14px;flex-direction:column;align-items:stretch;gap:12px}
  .as-kepala .btn-kecil{align-self:flex-start}
  .akaun-wira{padding:26px 0 30px}
  .akaun-badan{padding-top:18px;padding-bottom:88px}
  .kr-nilai{font-size:21px}
  .nav-akaun{margin-left:0}
  .np-teks{display:none}
  .nav-pengguna{padding:6px}
  .nav-menu{right:0}
}

@media (max-width:400px){
  .kr-kad{padding:15px 16px}
  .pecahan-baris{padding:4px 16px 16px}
  .pb-kepala,.pb-baris{grid-template-columns:1fr 46px 88px}
  .akaun-wira h1{font-size:20px}
}


/* ==========================================================================
   PENDAFTARAN PENGGUNA — ikut rujukan "daftar pengguna.png"
   ========================================================================== */

body.body-daftar{
  background:#F2F4F9;
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* jalur tajuk putih */
.jalur-tajuk{
  background:#fff;border-bottom:1px solid #E2E6F0;
}
.jt-dalam{
  width:100%;max-width:1000px;margin:0 auto;
  padding:20px 24px;
  display:flex;align-items:center;gap:14px;
}
.jt-balik{
  flex:0 0 auto;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;color:#293084;
  transition:background .14s ease;
}
.jt-balik:hover{background:#F0F2FA}
.jt-balik svg{
  width:19px;height:19px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.jt-dalam h1{
  flex:1 1 auto;
  font-size:19px;font-weight:700;letter-spacing:.02em;
  color:#293084;margin:0;
}
.jt-dalam .btn-autofill{margin:0}

/* badan */
.daftar-badan{flex:1 1 auto;padding:28px 0 48px}
.db-dalam{
  width:100%;max-width:1000px;margin:0 auto;
  padding:0 24px;
}
.db-dalam form{
  background:#fff;border:1px solid #E2E6F0;border-radius:8px;
  padding:28px 30px 26px;
}

/* dua kolum */
.borang-dua{
  display:grid;grid-template-columns:1fr 1fr;
  gap:18px 22px;margin-bottom:0;
}
.borang-dua .medan{margin-bottom:18px}

/* skrin pembaca sahaja */
.sr-sahaja{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* tiga kolum untuk ID + kod + telefon */
.borang-tiga{
  display:grid;grid-template-columns:1fr 220px 200px;
  gap:18px 18px;align-items:start;
}
.borang-tiga .medan{margin-bottom:18px}

/* select gaya */
.pilih-satu{position:relative}
.pilih-satu select{
  width:100%;box-sizing:border-box;
  padding:11px 38px 11px 13px;
  font:inherit;font-size:14px;color:var(--ink);
  background:#fff;border:1px solid #D4D9E4;border-radius:6px;
  appearance:none;cursor:pointer;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.pilih-satu select:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(41,48,132,.10);
}
.pilih-satu > svg{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:#8A90A6;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}

/* nota OTP */
.nota-otp{
  display:flex;align-items:flex-start;gap:11px;
  margin:4px 0 22px;padding:13px 16px;
  background:#EAF3FB;border:1px solid #CFE2F5;border-radius:6px;
}
.nota-otp svg{
  flex:0 0 auto;width:17px;height:17px;margin-top:1px;
  stroke:#1565C0;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.nota-otp span{font-size:12.5px;line-height:1.6;color:#2A4560}
.nota-otp strong{font-weight:700;color:#0D47A1}

/* kotak terma */
.kotak-terma{
  border:1px solid #E2E6F0;border-radius:6px;
  padding:16px 18px 14px;margin-bottom:18px;background:#FCFDFF;
}
.kotak-terma h2{
  font-size:14px;font-weight:600;color:#1565C0;margin:0 0 10px;
}
.kt-sub{font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 2px}
.kt-tarikh{font-size:11.5px;color:var(--ink-3);margin:0 0 10px}
.kt-skrol{
  max-height:170px;overflow-y:auto;
  padding-right:12px;
  font-size:12px;line-height:1.65;color:var(--ink-2);
  border-top:1px solid #EEF0F7;padding-top:10px;
}
.kt-skrol p{margin:0 0 9px}
.kt-skrol p:last-child{margin-bottom:0}
.kt-skrol strong{color:var(--ink);font-weight:600}
.kt-skrol::-webkit-scrollbar{width:8px}
.kt-skrol::-webkit-scrollbar-track{background:#F0F2F8;border-radius:4px}
.kt-skrol::-webkit-scrollbar-thumb{background:#B9C2DA;border-radius:4px}
.kt-skrol::-webkit-scrollbar-thumb:hover{background:#9AA6C6}

/* checkbox persetujuan */
.setuju-setuju{
  display:flex;align-items:flex-start;gap:10px;
  padding:0;margin:0 0 16px;cursor:pointer;
}
.setuju-setuju input{
  flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;
  accent-color:var(--navy);cursor:pointer;
}
.setuju-setuju span{
  font-size:12.5px;line-height:1.6;color:var(--ink-2);
}

/* sudah ada akaun */
.sudah-akaun{
  margin:0 0 16px;font-size:12.5px;color:var(--ink-2);
}
.sudah-akaun a{font-weight:600;text-decoration:underline}

/* butang */
.butang-baris{
  display:flex;align-items:center;gap:12px;
}
.btn-batal,.btn-daftar{
  padding:11px 34px;border-radius:5px;
  font-size:13.5px;font-weight:600;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease;
}
.btn-batal{
  background:#fff;border:1px solid #C6CBDA;color:var(--ink-2);
}
.btn-batal:hover{border-color:#9AA2B8;background:#F7F8FC;text-decoration:none;color:var(--ink)}
.btn-daftar{
  background:#3B2F80;border:1px solid #3B2F80;color:#fff;
  min-width:130px;
}
.btn-daftar:hover{background:#2F2568;border-color:#2F2568}
.btn-daftar:disabled{background:#A9A6C4;border-color:#A9A6C4;cursor:not-allowed}

/* panel OTP */
.otp-panel{
  background:#fff;border:1px solid #E2E6F0;border-radius:8px;
  padding:34px 30px 28px;max-width:520px;margin:0 auto;
  text-align:center;
}
.otp-panel[hidden]{display:none}
.otp-ikon{
  width:54px;height:54px;margin:0 auto 18px;border-radius:50%;
  background:#EAF3FB;display:flex;align-items:center;justify-content:center;
}
.otp-ikon svg{
  width:24px;height:24px;stroke:#1565C0;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.otp-panel h2{font-size:18px;font-weight:600;margin:0 0 10px;color:var(--ink)}
.otp-panel > p{
  margin:0 0 22px;font-size:12.5px;line-height:1.7;color:var(--ink-3);
}
.otp-panel > p strong{color:var(--ink);font-weight:600;word-break:break-all}

.otp-medan{
  display:flex;gap:9px;justify-content:center;margin-bottom:16px;
}
.otp-medan input{
  width:46px;height:54px;box-sizing:border-box;
  text-align:center;font-size:20px;font-weight:600;
  color:var(--ink);background:#fff;
  border:1.5px solid #D4D9E4;border-radius:7px;
  outline:none;font-family:inherit;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.otp-medan input:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(41,48,132,.12);
}

.otp-panel .ralat{margin-bottom:14px}
.otp-masa{
  margin:0 0 8px!important;font-size:12px!important;color:var(--ink-3)!important;
}
.otp-masa strong{font-variant-numeric:tabular-nums;color:var(--ink-2)!important}
.otp-hantar-semula{
  background:none;border:0;padding:6px;
  font:inherit;font-size:12.5px;font-weight:600;
  color:#1565C0;cursor:pointer;
}
.otp-hantar-semula:hover{text-decoration:underline}
.otp-hantar-semula:disabled{
  color:#AEB4C4;cursor:not-allowed;text-decoration:none;
}
.otp-panel .butang-baris{
  justify-content:center;margin-top:20px;
  padding-top:20px;border-top:1px solid #EEF0F7;
}

/* footer */
.kaki-daftar{
  background:#3B2F80;color:#fff;
}
.kd-dalam{
  width:100%;max-width:1000px;margin:0 auto;
  padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.kd-item{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;color:rgba(255,255,255,.9);
  text-decoration:none;
}
.kd-item:hover{color:#fff;text-decoration:underline}
.kd-item svg{
  flex:0 0 auto;width:16px;height:16px;
  stroke:rgba(255,255,255,.85);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

@media (max-width:820px){
  .borang-tiga{grid-template-columns:1fr 1fr;gap:16px}
  .borang-tiga .medan:first-child{grid-column:1/-1}
}

@media (max-width:640px){
  .jt-dalam{padding:16px 16px}
  .jt-dalam h1{font-size:15px;letter-spacing:.01em}
  .daftar-badan{padding:18px 0 36px}
  .db-dalam{padding:0 14px}
  .db-dalam form{padding:20px 16px 18px;border-radius:7px}
  .borang-dua{grid-template-columns:1fr;gap:0}
  .borang-tiga{grid-template-columns:1fr 1fr;gap:14px}
  .borang-tiga .medan:first-child{grid-column:1/-1}
  .kotak-terma{padding:14px 14px 12px}
  .kt-skrol{max-height:140px}
  .butang-baris{gap:10px}
  .btn-batal,.btn-daftar{flex:1 1 0;padding:12px 10px;justify-content:center}
  .otp-panel{padding:26px 16px 22px}
  .otp-medan{gap:6px}
  .otp-medan input{width:42px;height:50px;font-size:18px}
  .kd-dalam{padding:14px 16px;gap:10px 18px;justify-content:flex-start}
  .kd-item{font-size:11.5px}
}

@media (max-width:400px){
  .borang-tiga{grid-template-columns:140px 1fr;gap:10px}
  .borang-tiga .medan:first-child{grid-column:1/-1}
  .medan-kod .pilih-satu select{padding:11px 26px 11px 9px;font-size:12.5px}
  .medan-kod .pilih-satu > svg{right:8px;width:14px;height:14px}
  .otp-medan{gap:5px}
  .otp-medan input{width:40px;height:48px;font-size:17px}
}

/* ==========================================================================
   KEMAS KINI PROFIL
   ========================================================================== */
.jalur-profil{
  background:#fff;border-bottom:1px solid #E2E6F0;
}
.jp-dalam{
  display:flex;align-items:flex-start;gap:14px;
  padding:22px 24px 20px;
}
.jp-dalam .jt-balik{margin-top:2px}
.jp-dalam h1{
  font-size:19px;font-weight:600;letter-spacing:-.01em;
  color:var(--navy);margin:0 0 4px;
}
.jp-dalam p{margin:0;font-size:12.5px;color:var(--ink-3)}

.profil-badan{padding-top:26px;padding-bottom:56px}
.profil-grid{
  display:grid;grid-template-columns:330px 1fr;gap:20px;align-items:start;
}

.profil-kad{
  background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:22px 24px 24px;
}
.profil-kad h2{
  font-size:14.5px;font-weight:600;color:var(--ink);margin:0 0 4px;
}
.pk-sub{font-size:12px;color:var(--ink-3);margin:0 0 18px;line-height:1.55}
.pk-tajuk-kecil{
  font-size:13px;font-weight:600;color:var(--ink);margin:0 0 4px;
}
.pk-garis{
  border:0;border-top:1px solid #EDF0F7;
  margin:20px 0;
}

/* ---------- avatar ---------- */
.avatar-bekas{display:flex;justify-content:center;margin-bottom:16px}
.avatar-besar{
  position:relative;width:132px;height:132px;border-radius:50%;
  background:linear-gradient(150deg,#293084,#5AA7DC);
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.ab-inisial{
  font-size:40px;font-weight:600;color:#fff;letter-spacing:.01em;
}
.avatar-besar img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  display:block;
  border:3px solid #fff;
  box-shadow:0 2px 10px rgba(20,26,60,.16);
}
.ab-tukar{
  position:absolute;right:0;bottom:2px;
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid #DDE2EE;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 2px 6px rgba(20,26,60,.14);
  transition:background .14s ease,border-color .14s ease;
}
.ab-tukar:hover{background:#F5F7FC;border-color:#C3CBDD}
.ab-tukar svg{
  width:16px;height:16px;stroke:var(--navy);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.avatar-aksi{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:6px;
}
.btn-teks-bahaya{
  background:none;border:0;padding:7px 6px;
  font:inherit;font-size:12px;font-weight:600;
  color:#C0392B;cursor:pointer;
}
.btn-teks-bahaya:hover{text-decoration:underline}

.profil-meta{margin:0}
.profil-meta > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;
}
.profil-meta dt{font-size:12px;color:var(--ink-3);flex:0 0 auto}
.profil-meta dd{
  margin:0;font-size:12.5px;font-weight:500;color:var(--ink);
  text-align:right;word-break:break-word;
}
.pk-nota{
  margin:14px 0 0;padding:10px 12px;
  background:#F7F9FD;border:1px solid #E8EDF7;border-radius:6px;
  font-size:11.5px;line-height:1.6;color:var(--ink-3);
}

/* ---------- butang ---------- */
.profil-butang{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  margin-top:22px;padding-top:20px;border-top:1px solid #EDF0F7;
}
.profil-butang .btn-garis,.profil-butang .btn-utama{
  padding:10px 24px;font-size:13px;border-radius:6px;
}
.profil-kad .medan input,
.profil-kad .medan textarea{font-size:13.5px}
.profil-kad .medan label{font-size:12.5px}
.profil-kad .medan-sandi input{padding-right:46px}

@media (max-width:900px){
  .profil-grid{grid-template-columns:1fr}
  .profil-gambar{order:-1}
}

@media (max-width:640px){
  .jp-dalam{padding:16px 16px 15px;gap:10px}
  .jp-dalam h1{font-size:16px}
  .jp-dalam p{font-size:12px}
  .profil-badan{padding:16px 0 90px}
  .profil-kad{padding:18px 16px 20px;border-radius:9px}
  .avatar-besar{width:112px;height:112px}
  .ab-inisial{font-size:34px}
  .profil-butang{flex-direction:column-reverse;align-items:stretch;gap:9px}
  .profil-butang .btn-garis,
  .profil-butang .btn-utama{width:100%;justify-content:center;padding:12px 16px}
}

/* ==========================================================================
   SIDEBAR AKAUN + PANEL (bayaran, notifikasi, profil) + MODAL RESIT
   ========================================================================== */
.akaun-akar{background:#F3F5FA}
.akaun-susun{
  display:grid;grid-template-columns:236px 1fr;
  gap:var(--gap-akaun,22px);align-items:stretch;
  width:100%;max-width:var(--lebar);margin:0 auto;
  padding:24px 24px 56px;
}

/* ---------------- hero akaun (satu permukaan) ---------------- */
/* SATU permukaan: foto penuh + veil navy yang blend lembut di kiri */
.hero-akaun{
  position:relative;
  display:flex;
  align-items:center;
  min-height:196px;
  margin:0 0 18px calc(-1 * var(--gap-akaun, 22px));
  padding:30px 34px;
  border-radius:13px;
  overflow:hidden;
  background-image:url("../img/banner-bangunan.jpg");
  background-size:cover;
  background-position:center 46%;
  background-repeat:no-repeat;
  color:#fff;
  isolation:isolate;
}
/* veil navy → lutsinar. Inilah yang buat blend, bukan sempadan keras. */
.hero-akaun::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    #1B3A70 0%,
    rgba(27,58,112,.99) 22%,
    rgba(27,58,112,.93) 34%,
    rgba(27,58,112,.74) 46%,
    rgba(27,58,112,.42) 58%,
    rgba(27,58,112,.14) 70%,
    rgba(27,58,112,0) 80%);
}
.hero-kiri{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  max-width:520px;
}
.hero-lencana{
  display:inline-block;
  padding:3px 10px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
}
.hero-kiri h1{
  margin:10px 0 6px;
  font-size:30px;
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.02em;
  color:#fff;
}
.hero-kiri p{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.86);
  max-width:420px;
}
.hero-id{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:8px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
}
.hero-id-label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero-id-nilai{
  font-family:ui-monospace, Consolas, monospace;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  color:#fff;
}
/* foto sudah jadi latar penuh .hero-akaun — div ini tidak dipaparkan */
.hero-gambar{display:none}

/* ---------------- sidebar ---------------- */
.akaun-sidebar{
  /* memanjang penuh setinggi kandungan kanan — tidak putus di tengah */
  position:relative;
  align-self:stretch;
  height:auto;
  background:#fff;border:1px solid var(--line);border-right:0;
  border-radius:11px 0 0 11px;
  padding:18px 12px 12px;
  display:flex;
  flex-direction:column;
}
.akaun-sidebar .sb-menu{flex:0 0 auto}
.akaun-sidebar .sb-kaki{margin-top:auto}
.sb-profil{
  display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:2px 6px 16px;
  border-bottom:1px solid #EEF1F8;margin-bottom:10px;
  text-align:center;
}
.sb-avatar{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(150deg,#293084,#5AA7DC);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:600;margin-bottom:8px;overflow:hidden;
  flex:0 0 auto;
}
.sb-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sb-profil strong{font-size:13px;font-weight:600;color:var(--ink)}
.sb-profil small{font-size:11px;color:var(--ink-3)}

.sb-menu{display:flex;flex-direction:column;gap:2px}
.sb-item{
  display:flex;align-items:center;gap:11px;
  width:100%;padding:9px 12px;
  background:none;border:0;border-radius:7px;
  font:inherit;font-size:12.5px;font-weight:500;
  color:var(--ink-2);text-align:left;cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.sb-item svg{
  flex:0 0 auto;width:17px;height:17px;
  stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.sb-item>span:first-of-type{flex:1 1 auto;min-width:0}
.sb-item:hover{background:#F4F6FC;color:var(--ink)}
.sb-item.aktif{
  background:#EDF0FB;color:var(--navy);font-weight:600;
}
.sb-lencana{
  flex:0 0 auto;
  width:auto;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:#C0392B;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
}

.sb-kaki{
  margin-top:12px;padding-top:10px;
  border-top:1px solid #EEF1F8;
}
.sb-keluar{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:7px;
  font-size:12.5px;font-weight:500;color:#C0392B;
  text-decoration:none;
  transition:background .14s ease;
}
.sb-keluar svg{
  flex:0 0 auto;width:17px;height:17px;
  stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.sb-keluar:hover{background:#FDF1F0;text-decoration:none}

/* ---------------- kandungan panel ---------------- */
.akaun-kandungan{min-width:0}

.panel-kepala{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:18px;
}
.panel-kepala h2{
  font-size:18px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 4px;
}
.panel-kepala p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.panel-kepala .btn-kecil{flex:0 0 auto}

.panel-ringkas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-bottom:18px;
}
.pr-kad{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
}
.pr-kad span{
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);
}
.pr-kad strong{
  font-size:19px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}

.panel-kosong{
  background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:48px 28px;text-align:center;
}
.panel-kosong svg{
  width:34px;height:34px;stroke:#B7BED2;fill:none;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  margin-bottom:14px;
}
.panel-kosong strong{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.panel-kosong p{
  margin:0 auto 18px;max-width:340px;
  font-size:12.5px;line-height:1.65;color:var(--ink-3);
}

/* ---------------- notifikasi ---------------- */
.nf-senarai{list-style:none;margin:0;padding:0;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  overflow:hidden;
}
.nf-item{
  display:flex;gap:13px;
  padding:16px 18px;
  border-bottom:1px solid #EEF1F8;
}
.nf-item:last-child{border-bottom:0}
.nf-item.baru{background:#FBFCFE}
.nf-ikon{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  background:#F1F4FB;
  display:flex;align-items:center;justify-content:center;
}
.nf-ikon svg{
  width:17px;height:17px;stroke:#4B5580;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.nf-ikon.peringatan{background:#FDF6E7}
.nf-ikon.peringatan svg{stroke:#A67C00}
.nf-ikon.kompaun{background:#FBEFEE}
.nf-ikon.kompaun svg{stroke:#B03A2E}
.nf-ikon.resit{background:#EDF7F1}
.nf-ikon.resit svg{stroke:#1E7B45}

.nf-isi{flex:1 1 auto;min-width:0}
.nf-baris{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.nf-baris strong{font-size:13px;font-weight:600;color:var(--ink)}
.nf-tanda{
  flex:0 0 auto;padding:1px 7px;border-radius:999px;
  background:#FDECEA;color:#B03A2E;
  font-size:10px;font-weight:700;letter-spacing:.02em;
}
.nf-isi p{margin:0 0 5px;font-size:12.5px;line-height:1.62;color:var(--ink-2)}
.nf-tarikh{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------------- panel profil ---------------- */
.profil-panel{
  display:grid;grid-template-columns:200px 1fr;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:22px;
}
.pp-gambar{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding-right:20px;border-right:1px solid #EEF1F8;
}
.pp-avatar{
  width:110px;height:110px;border-radius:50%;
  background:linear-gradient(150deg,#293084,#5AA7DC);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:600;overflow:hidden;
}
.pp-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pp-senarai{
  margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 28px;align-content:start;
}
.pp-senarai > div{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:9px 0;border-bottom:1px solid #F2F4FA;min-width:0;
}
.pp-senarai > div.penuh{grid-column:1/-1}
.pp-senarai > div:nth-last-child(-n+2){border-bottom:0}
.pp-senarai dt{
  font-size:10.5px;font-weight:600;letter-spacing:.045em;
  text-transform:uppercase;color:var(--ink-3);flex:0 0 auto;line-height:1.4;
}
.pp-senarai dd{
  margin:0;font-size:12.5px;font-weight:500;color:var(--ink);
  text-align:left;word-break:break-word;line-height:1.5;
}

/* ---------------- modal resit ---------------- */
.lapik-resit{
  position:fixed;inset:0;z-index:1200;
  background:rgba(16,19,50,.52);
  display:none;align-items:flex-start;justify-content:center;
  padding:48px 20px;overflow-y:auto;
}
.lapik-resit.tunjuk{display:flex}
.resit-modal{
  width:100%;max-width:460px;
  background:#fff;border-radius:12px;
  box-shadow:0 24px 60px rgba(12,15,40,.32);
  padding:20px 20px 18px;
}
.rm-kepala{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:16px;
}
.rm-kepala h2{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 2px}
.rm-kepala span{font-size:11.5px;color:var(--ink-3)}
.rm-tutup{
  flex:0 0 auto;width:30px;height:30px;border-radius:7px;
  background:none;border:1px solid transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.rm-tutup svg{
  width:16px;height:16px;stroke:var(--ink-3);fill:none;
  stroke-width:1.9;stroke-linecap:round;
}
.rm-tutup:hover{background:#F4F6FC;border-color:var(--line)}
.resit-modal .resit{border-radius:9px;border:1px solid var(--line)}
.rm-tindakan{
  display:flex;gap:10px;margin-top:16px;
}
.rm-tindakan .btn-garis,
.rm-tindakan .btn-utama{flex:1 1 0;justify-content:center;padding:10px 14px;font-size:12.5px}

body.tak-skrol{overflow:hidden}

/* ---------------- responsif ---------------- */
@media (max-width:980px){
  .akaun-susun{grid-template-columns:200px 1fr;--gap-akaun:16px;gap:16px;padding:20px 18px 48px}
  .profil-panel{grid-template-columns:1fr}
  .pp-gambar{
    flex-direction:row;justify-content:flex-start;
    padding-right:0;padding-bottom:16px;border-right:0;
    border-bottom:1px solid #EEF1F8;
  }
  .pp-avatar{width:76px;height:76px;font-size:24px}
  .pp-senarai{grid-template-columns:1fr}
}

@media (max-width:760px){
  .akaun-susun{
    grid-template-columns:1fr;gap:14px;
    padding:14px 14px 88px;
  }
  .akaun-sidebar{
    position:static;
    padding:12px 10px;
  }
  .sb-profil{
    flex-direction:row;align-items:center;gap:10px;
    padding:2px 4px 12px;text-align:left;
  }
  .sb-avatar{width:38px;height:38px;font-size:13px;margin-bottom:0}
  .sb-profil strong{display:block;line-height:1.3}
  .sb-profil small{display:block;line-height:1.3}

  .sb-menu{
    display:grid;grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .sb-item{
    padding:9px 10px;border-radius:8px;
    border:1px solid rgba(255,255,255,.16);
    font-size:12px;
  }
  .sb-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sb-item svg{width:16px;height:16px}
  .sb-item{border-color:rgba(255,255,255,.16)}
  .sb-item.aktif{border-color:rgba(255,255,255,.28);background:#2C4A87}
  .sb-kaki{margin-top:10px;padding-top:8px}
  .sb-keluar{padding:8px 10px;font-size:12px}

  .panel-kepala h2{font-size:16px}
  .panel-ringkas{grid-template-columns:1fr;gap:8px}
  .pr-kad{padding:12px 14px;flex-direction:row;align-items:center;justify-content:space-between}
  .pr-kad strong{font-size:16px}

  .nf-item{padding:14px 14px;gap:11px}
  .nf-ikon{width:30px;height:30px;border-radius:8px}
  .nf-baris strong{font-size:12.5px}
  .nf-isi p{font-size:12px}

  .profil-panel{padding:16px;gap:14px}
  .resit-modal{padding:16px 14px 14px}
  .lapik-resit{padding:20px 12px}

  /* grid mesti boleh mengecil, jika tidak jadual min-width 640px
     akan memaksa seluruh halaman melebar */
  .akaun-susun{grid-template-columns:minmax(0,1fr)}
  .akaun-kandungan{min-width:0}
  .jadual-bekas{max-width:100%}


}

/* ==========================================================================
   SOALAN LAZIM
   ========================================================================== */
.faq-wrap{max-width:840px}

.faq-cari{
  position:relative;margin-bottom:16px;
}
.faq-cari svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--ink-3);fill:none;
  stroke-width:1.8;stroke-linecap:round;pointer-events:none;
}
.faq-cari input{
  width:100%;box-sizing:border-box;
  padding:13px 16px 13px 42px;
  font:inherit;font-size:13.5px;color:var(--ink);
  background:#fff;border:1px solid #D4D9E4;border-radius:9px;
  outline:none;transition:border-color .15s ease,box-shadow .15s ease;
}
.faq-cari input::placeholder{color:#9AA0B8}
.faq-cari input:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(41,48,132,.10);
}

.faq-kategori{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;
}
.faq-tab{
  padding:7px 15px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font:inherit;font-size:12.5px;font-weight:500;
  color:var(--ink-2);cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.faq-tab:hover{border-color:#C3CBDD;background:#F7F9FD}
.faq-tab.aktif{
  background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600;
}

.faq-senarai{
  border-top:1px solid var(--line);
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-soalan{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  width:100%;padding:16px 2px;
  background:none;border:0;
  font:inherit;font-size:13.5px;font-weight:500;line-height:1.55;
  color:var(--ink);text-align:left;cursor:pointer;
}
.faq-soalan span{flex:1 1 auto}
.faq-soalan svg{
  flex:0 0 auto;width:17px;height:17px;margin-top:2px;
  stroke:var(--ink-3);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease;
}
.faq-item.buka .faq-soalan svg{transform:rotate(180deg);stroke:var(--navy)}
.faq-item.buka .faq-soalan{color:var(--navy);font-weight:600}
.faq-soalan:hover{color:var(--navy)}

.faq-jawapan{padding:0 2px 18px}
.faq-jawapan[hidden]{display:none}
.faq-jawapan p{
  margin:0;max-width:70ch;
  font-size:13px;line-height:1.75;color:var(--ink-2);
}

.faq-kosong{
  margin:0;padding:32px 0;text-align:center;
  font-size:13px;color:var(--ink-3);
}
.faq-kosong[hidden]{display:none}
.faq-kosong a{font-weight:600;text-decoration:underline}

.faq-bantuan{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:28px;padding:20px 22px;
  background:#F7F9FD;border:1px solid #E6EBF6;border-radius:11px;
}
.faq-bantuan strong{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
.faq-bantuan p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:52ch}
.faq-bantuan .btn-utama{flex:0 0 auto;padding:10px 22px;font-size:12.5px}

@media (max-width:640px){
  .faq-wrap{padding-left:0;padding-right:0}
  .faq-cari input{font-size:13px;padding:12px 14px 12px 40px}
  .faq-tab{font-size:12px;padding:7px 13px}
  .faq-soalan{font-size:13px;padding:15px 2px}
  .faq-jawapan p{font-size:12.5px}
  .faq-bantuan{flex-direction:column;align-items:stretch;gap:14px;padding:18px}
  .faq-bantuan .btn-utama{width:100%;justify-content:center}
}

/* panel bayaran: kad pada skrin <=1080px (sidebar makan ruang) */
@media (max-width:1080px){
  /* panel bayaran: jadual jadi senarai kad pada skrin kecil */
  .panel-bayaran-jadual{overflow:visible}
  .panel-bayaran-jadual .jadual-akaun{min-width:0;display:block}
  .panel-bayaran-jadual .jadual-akaun thead{display:none}
  .panel-bayaran-jadual .jadual-akaun tbody{display:block}
  .panel-bayaran-jadual .jadual-akaun tr{
    display:block;background:#fff;
    border:1px solid var(--line);border-radius:10px;
    padding:12px 14px;margin-bottom:10px;
  }
  .panel-bayaran-jadual .jadual-akaun td{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;padding:5px 0!important;border:0!important;
    text-align:right!important;
  }
  .panel-bayaran-jadual .jadual-akaun td::before{
    content:attr(data-label);
    flex:0 0 auto;
    font-size:10.5px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-3);
    text-align:left;
  }
  .panel-bayaran-jadual .jadual-akaun td:first-child{
    display:block;text-align:left!important;
    padding-bottom:8px!important;margin-bottom:4px;
    border-bottom:1px solid #F0F2F8!important;
  }
  .panel-bayaran-jadual .jadual-akaun td:first-child::before{display:none}
  .panel-bayaran-jadual .sel-sub{max-width:none;text-align:left}
  .panel-bayaran-jadual .jadual-akaun td:last-child{justify-content:flex-end;padding-top:9px!important}
  .panel-bayaran-jadual .jadual-akaun td:last-child::before{display:none}
  .panel-bayaran-jadual .btn-baris{width:100%;justify-content:center}
}

/* ==========================================================================
   SKRIN BESAR (2560x1440 dan seumpamanya)
   Bekas 1200px hanya guna 47% lebar — terlalu sempit pada monitor besar.
   ========================================================================== */
@media (min-width:1680px){
  :root{--lebar:1440px}
  .akaun-susun{max-width:1440px;grid-template-columns:256px minmax(0,1fr);--gap-akaun:26px;gap:26px}
  .faq-wrap{max-width:980px}
  .kad-ringkas{gap:18px}
  .kr-kad{padding:22px 24px}
  .kr-nilai{font-size:26px}
  .jadual-akaun{font-size:13px}
  .jadual-akaun thead th{padding:13px 16px;font-size:11.5px}
  .jadual-akaun tbody td{padding:13px 16px}
}

@media (min-width:2000px){
  :root{--lebar:1680px}
  .akaun-susun{max-width:1680px;grid-template-columns:280px minmax(0,1fr);--gap-akaun:30px;gap:30px}
  .faq-wrap{max-width:1080px}
  .kr-nilai{font-size:28px}
  .panel-kepala h2{font-size:20px}
  .sb-item{font-size:13px;padding:10px 13px}
}

/* profil + halaman lain pada skrin besar */
@media (min-width:1680px){
  .profil-badan{max-width:var(--lebar)}
  .jp-dalam{max-width:var(--lebar)}
  .profil-grid{grid-template-columns:400px minmax(0,820px);gap:26px;
    align-items:start;justify-content:center}
  .profil-gambar{position:sticky;top:104px}
  .profil-kad{padding:26px 28px 28px}
  .avatar-besar{width:150px;height:150px}
}
@media (min-width:2000px){
  .profil-badan{max-width:var(--lebar)}
  .jp-dalam{max-width:var(--lebar)}
  .profil-grid{grid-template-columns:440px minmax(0,880px);gap:30px}
}


/* ==========================================================================
   TEMA GELAP
   Asas: token di :root, override di sini. Komponen yang guna #fff terus
   ditimpa secara bertarget supaya tidak perlu sentuh 63 tempat.
   ========================================================================== */
html[data-tema="gelap"]{
  --bg:#12141F;
  --bg-2:#171A26;
  --bg-3:#1B1F2E;
  --kad:#1C2030;
  --kad-2:#202536;
  --sempadan:#2B3145;
  --sempadan-2:#363D54;
  --teks:#E8EAF2;
  --teks-2:#B4BACE;
  --teks-3:#8B93AC;
  --medan:#232838;
  --ink:#E8EAF2;
  --ink-2:#B4BACE;
  --ink-3:#8B93AC;
  --soft:#171A26;
  --line:#2B3145;
  --white:#1C2030;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  color-scheme:dark;
}
html[data-tema="gelap"] body{background:var(--bg);color:var(--teks)}

/* ---- permukaan ---- */
html[data-tema="gelap"] .kaki,
html[data-tema="gelap"] .kepala{color:#E8EAF2}
html[data-tema="gelap"] .jalur-tajuk,
html[data-tema="gelap"] .jalur-profil,
html[data-tema="gelap"] .panel-kepala,
html[data-tema="gelap"] .akaun-seksyen,
html[data-tema="gelap"] .profil-kad,
html[data-tema="gelap"] .nf-senarai,
html[data-tema="gelap"] .panel-kosong,
html[data-tema="gelap"] .profil-panel,
html[data-tema="gelap"] .kad-info,
html[data-tema="gelap"] .invois-kad,
html[data-tema="gelap"] .kotak-terma,
html[data-tema="gelap"] .faq-bantuan,
html[data-tema="gelap"] .kr-kad,
html[data-tema="gelap"] .pr-kad,
html[data-tema="gelap"] .modal-kotak,
html[data-tema="gelap"] .resit,
html[data-tema="gelap"] .resit-modal,
html[data-tema="gelap"] .akaun-akar{background:var(--bg)}
html[data-tema="gelap"] .kad-berita{
  background:var(--kad);border-color:var(--sempadan);
}
html[data-tema="gelap"] .kad-berita h3{color:var(--teks)}
html[data-tema="gelap"] .kad-berita p{color:var(--teks-2)}
html[data-tema="gelap"] .kad-berita .baca{color:#9BB4FF}
html[data-tema="gelap"] .kad-berita .tarikh{color:var(--teks-3)}
html[data-tema="gelap"] .btn-masuk{
  background:#2E3A66;color:#E8EAF2!important;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
html[data-tema="gelap"] .nav a.btn-masuk,
html[data-tema="gelap"] .nav a.btn-masuk:visited{background:#2E3A66;color:#E8EAF2!important}
html[data-tema="gelap"] .nav a.btn-masuk:hover{background:#3A4A78}
html[data-tema="gelap"] .pengumuman{background:linear-gradient(100deg,#1F2547 0%,#262C55 100%)}
html[data-tema="gelap"] .btn-baris{
  background:#232A3C;border-color:#3A4463;color:#C3CBDF;
}
html[data-tema="gelap"] .btn-baris:hover{background:#2E3A66;border-color:#3A4A78;color:#fff}
html[data-tema="gelap"] .btn-bayar-semua{background:#2E3A66}
html[data-tema="gelap"] .masuk-kad,
html[data-tema="gelap"] .peranan-item,
html[data-tema="gelap"] .masuk-nota,
html[data-tema="gelap"] .otp-panel,
html[data-tema="gelap"] .daftar-badan form{
  background:var(--kad);
  border-color:var(--sempadan);
  color:var(--teks);
}

html[data-tema="gelap"] .kr-kad.kr-amber{
  background:#2A2416;border-color:#4A3F1E;
}
html[data-tema="gelap"] .kr-kad.kr-amber .kr-nilai{color:#E8C766}
html[data-tema="gelap"] .nf-item.baru{background:#1F2436}
html[data-tema="gelap"] .nf-item{border-color:#272D40}

html[data-tema="gelap"] .jadual-akaun thead th{
  background:var(--kad-2);color:var(--teks-3);border-color:var(--sempadan);
}
html[data-tema="gelap"] .jadual-akaun tbody td{border-color:var(--sempadan)}
html[data-tema="gelap"] .jadual-akaun tbody tr:nth-child(even){background:#191D2B}
html[data-tema="gelap"] .jadual-akaun tbody tr:hover{background:#232A3C}

html[data-tema="gelap"] .medan input,
html[data-tema="gelap"] .medan select,
html[data-tema="gelap"] .medan textarea,
html[data-tema="gelap"] .pilih-satu select,
html[data-tema="gelap"] .faq-cari input,
html[data-tema="gelap"] .otp-medan input,
html[data-tema="gelap"] .kt-skrol{
  background:var(--medan);border-color:var(--sempadan-2);color:var(--teks);
}
html[data-tema="gelap"] .peranan-item:has(input:checked){
  background:#222B44;border-color:#3A4A78;
}
html[data-tema="gelap"] .masuk-nota{background:#1B2233;border-color:#2A3247;color:#9AA3BE}
html[data-tema="gelap"] .medan input::placeholder,
html[data-tema="gelap"] .faq-cari input::placeholder{color:#6E7691}
html[data-tema="gelap"] .pilih-satu > svg{stroke:#8B93AC}

html[data-tema="gelap"] .btn-garis,
html[data-tema="gelap"] .btn-batal,
html[data-tema="gelap"] .faq-tab,
html[data-tema="gelap"] .sb-item{
  background:transparent;border-color:var(--sempadan-2);color:var(--teks-2);
}
html[data-tema="gelap"] .btn-garis:hover,
html[data-tema="gelap"] .btn-batal:hover{background:#232A3C;color:var(--teks)}
html[data-tema="gelap"] .sb-item:hover{background:#232A3C;color:var(--teks)}
html[data-tema="gelap"] .sb-item.aktif{background:#262E48;color:#9BB4FF}
html[data-tema="gelap"] .faq-tab.aktif{background:#2E3A66;border-color:#2E3A66;color:#fff}

html[data-tema="gelap"] .faq-item,
html[data-tema="gelap"] .faq-senarai{border-color:var(--sempadan)}
html[data-tema="gelap"] .faq-soalan{color:var(--teks)}
html[data-tema="gelap"] .faq-item.buka .faq-soalan{color:#9BB4FF}
html[data-tema="gelap"] .faq-jawapan p{color:var(--teks-2)}
html[data-tema="gelap"] .faq-bantuan p{color:var(--teks-3)}

html[data-tema="gelap"] .nf-ikon{background:#252B3E}
html[data-tema="gelap"] .nf-ikon svg{stroke:#A9B4D4}
html[data-tema="gelap"] .nota-otp{background:#1B2A3A;border-color:#2A4055}
html[data-tema="gelap"] .nota-otp span{color:#B9CDDD}
html[data-tema="gelap"] .pk-nota{background:#1E2333;border-color:#2B3145;color:var(--teks-3)}
html[data-tema="gelap"] .otp-ikon{background:#1B2A3A}
html[data-tema="gelap"] .pk-garis,
html[data-tema="gelap"] .profil-butang,
html[data-tema="gelap"] .pp-gambar{border-color:var(--sempadan)}
html[data-tema="gelap"] .panel-bayaran-jadual .jadual-akaun tr{background:var(--kad)}
html[data-tema="gelap"] .panel-bayaran-jadual .jadual-akaun td:first-child{border-color:var(--sempadan)!important}
html[data-tema="gelap"] .panel-bayaran-jadual .jadual-akaun td{border-color:var(--sempadan)!important}

html[data-tema="gelap"] .sosial a{background:rgba(255,255,255,.12)}

/* ---- butang tema ---- */
.btn-tema{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;margin-left:6px;
  transition:background .16s ease;
}
.btn-tema:hover{background:rgba(255,255,255,.26)}
.btn-tema svg{
  width:16px;height:16px;stroke:#fff;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.btn-tema .ikon-matahari{display:block}
.btn-tema .ikon-bulan{display:none}
html[data-tema="gelap"] .btn-tema .ikon-matahari{display:none}
html[data-tema="gelap"] .btn-tema .ikon-bulan{display:block}

@media (max-width:860px){
  .btn-tema{width:32px;height:32px}
}

/* butang tema di halaman log masuk (latar putih, bukan nav gelap) */
.btn-tema-kad{
  position:absolute;top:18px;right:18px;
  background:#F1F3F8;border-color:#DFE3EC;margin:0;
}
.btn-tema-kad:hover{background:#E5E9F2}
.btn-tema-kad svg{stroke:#3A4060}
html[data-tema="gelap"] .btn-tema-kad{background:#262C3E;border-color:#39405A}
html[data-tema="gelap"] .btn-tema-kad:hover{background:#2F374D}
html[data-tema="gelap"] .btn-tema-kad svg{stroke:#D7DCEC}
@media (max-width:860px){
  .btn-tema-kad{top:14px;right:14px}
}

/* ---- butang tema dalam header ---- */
.kepala-dalam{position:relative}
.btn-tema{margin-left:10px}
@media (max-width:860px){
  .btn-tema{margin-left:auto;width:34px;height:34px}
  .burger{margin-left:8px;width:40px;height:40px}
  /* dropdown menu jangan tutup butang tema */
  .nav{
    left:auto!important;right:14px!important;
    min-width:224px;border-radius:12px;
    padding:8px!important;
    top:calc(100% + 6px)!important;
  }
  .nav a{padding:11px 13px!important}
}


/* ==========================================================================
   STICKY FOOTER
   Kandungan pendek pada monitor besar (2560x1440) tinggalkan footer terapung
   di tengah skrin dengan latar putih di bawah. Body jadi flex column supaya
   footer sentiasa tercantum ke bawah viewport.
   ========================================================================== */
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body > .kaki{margin-top:auto}
/* header kekal sticky; anak flex lain jangan mengecut */
body > .kepala,
body > header{flex:0 0 auto}


@media (min-width:2000px){
  .kad-ikon svg{width:40px;height:40px}
}
@media (max-width:1080px){
  .kad-layan{flex:0 1 calc((100% - 32px) / 3)}
}
@media (max-width:760px){
  .grid-layan{gap:12px}
  .kad-layan{flex:0 1 calc((100% - 12px) / 2)}
  .kad-ikon{min-height:52px}
  .kad-ikon svg{width:30px;height:30px}
  .kad-layan h3{font-size:12px}
  .kad-layan p{font-size:10px}
  .kad-isi{padding:9px 10px 10px}
  .kad-butang{font-size:9.5px;padding:4px 9px}
}

/* grid perkhidmatan dalam panel akaun — lebih kecil, 3 kolum */
/* panel akaun: 7 kad kecil 4+3, bukan kad ungu besar */
.grid-layan--akaun{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px;margin-top:2px;
}
.grid-layan--akaun .kad-layan{
  flex:0 1 calc((100% - 36px) / 4);
  min-height:0;padding:0;aspect-ratio:1.24/1;
  background:#fff;color:var(--ink);border-radius:12px;
  border:1.5px solid #CBD5E6;box-shadow:0 2px 6px rgba(22,37,92,.08);
}
.grid-layan--akaun .kad-layan::after{display:none}
.grid-layan--akaun .kad-layan:hover{border-color:var(--biru);box-shadow:0 10px 22px rgba(22,37,92,.16)}
.grid-layan--akaun .kad-ikon{
  display:flex;align-items:center;justify-content:center;
  flex:1 1 auto;min-height:48px;width:100%;
  background:linear-gradient(160deg,#E3EDFA 0%,#CFE0F5 100%);
  border-bottom:1.5px solid #CBD5E6;
}
.grid-layan--akaun .kad-ikon svg{
  width:30px;height:30px;fill:none;stroke:var(--navy);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.grid-layan--akaun .kad-isi{
  display:flex;flex-direction:column;flex:1;
  padding:9px 10px 10px;background:#fff;
}
.grid-layan--akaun .kad-layan h3{
  font-size:12px;line-height:1.26;margin:0 0 3px;color:var(--ink);font-weight:700;
}
.grid-layan--akaun .kad-layan p{
  font-size:10px;line-height:1.36;color:var(--ink-3);margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.grid-layan--akaun .kad-butang{
  margin-top:auto;align-self:flex-start;
  background:var(--navy);color:#fff;font-size:9.5px;font-weight:600;
  padding:4px 9px;border-radius:5px;
}
.grid-layan--akaun .lencana-ada,
.grid-layan--akaun .lencana-mati{top:7px;left:7px;font-size:7.5px;padding:3px 6px}

/* kad mati dalam panel akaun */
.grid-layan--akaun .kad-layan--mati{
  background:#F4F6FA;border:1.5px dashed #D3DAE7;box-shadow:none;
}
.grid-layan--akaun .kad-layan--mati .kad-ikon{background:#EAEDF4;border-bottom-color:#DCE2EC}
.grid-layan--akaun .kad-layan--mati .kad-ikon svg{stroke:#A9B2C6;stroke-width:1.5}
.grid-layan--akaun .kad-layan--mati .kad-isi{background:#F4F6FA}
.grid-layan--akaun .kad-layan--mati h3{color:#7E869C;font-weight:600}
.grid-layan--akaun .kad-layan--mati p{color:#A0A8BB}
.grid-layan--akaun .kad-layan--mati .kad-butang{
  background:#E1E6EF;color:#9AA2B5;box-shadow:inset 0 0 0 1px #D6DCE8;
}

@media (max-width:1180px){
  .grid-layan--akaun .kad-layan{flex:0 1 calc((100% - 24px) / 3)}
}
@media (max-width:820px){
  .grid-layan--akaun .kad-layan{flex:0 1 calc((100% - 12px) / 2)}
}
@media (max-width:480px){
  .grid-layan--akaun .kad-layan{flex:0 1 100%;aspect-ratio:auto;flex-direction:row;min-height:96px}
  .grid-layan--akaun .kad-ikon{width:72px;flex:0 0 72px;min-height:0;border-bottom:0;border-right:1.5px solid #CBD5E6}
  .grid-layan--akaun .kad-isi{padding:10px 12px;justify-content:center}
  .grid-layan--akaun .kad-layan p{-webkit-line-clamp:1}
  .grid-layan--akaun .kad-butang{margin-top:5px}
}
@media (max-width:480px){
  .grid-layan--akaun .kad-layan{flex:0 1 100%;aspect-ratio:auto;flex-direction:row}
  .grid-layan--akaun .kad-ikon{width:76px;flex:0 0 76px;min-height:0;border-bottom:0;border-right:1.5px solid #CBD5E6}
  .grid-layan--akaun .kad-isi{padding:10px 12px}
  .grid-layan--akaun .kad-layan p{display:none}
  .grid-layan--akaun .kad-butang{margin-top:6px}
}


/* ================= kad perkhidmatan — tema gelap (override akhir) ======== */
html[data-tema="gelap"] .kad-layan{
  background:#1C2030;
  border-color:#3A4767;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
html[data-tema="gelap"] .kad-layan:hover{
  border-color:#5A7FC4;box-shadow:0 12px 26px rgba(0,0,0,.55);
}
html[data-tema="gelap"] .kad-layan .kad-ikon{
  background:linear-gradient(160deg,#2A3E60 0%,#1E2E4A 100%);
  border-bottom-color:#3A4767;
}
html[data-tema="gelap"] .kad-layan .kad-ikon svg{stroke:#9CC0F0}
html[data-tema="gelap"] .kad-layan .kad-isi{background:#1C2030}
html[data-tema="gelap"] .kad-layan h3{color:#EDF0F8}
html[data-tema="gelap"] .kad-layan p{color:#9AA4BC}
html[data-tema="gelap"] .kad-butang{background:#3D5A96;color:#fff}
html[data-tema="gelap"] .kad-layan:hover .kad-butang{background:#4A6BB0}
html[data-tema="gelap"] .lencana-ada{background:#3D5A96;color:#fff}

/* disabled — lebih gelap & pudar, bukan lebih cerah */
html[data-tema="gelap"] .kad-layan--mati{
  background:#141824;border-color:#232A3B;border-style:dashed;
  box-shadow:none;
}
html[data-tema="gelap"] .kad-layan--mati .kad-ikon{
  background:#181D29;border-bottom-color:#232A3B;
}
html[data-tema="gelap"] .kad-layan--mati .kad-ikon svg{stroke:#4E5670}
html[data-tema="gelap"] .kad-layan--mati .kad-isi{background:#141824}
html[data-tema="gelap"] .kad-layan--mati h3{color:#6E7691}
html[data-tema="gelap"] .kad-layan--mati p{color:#5C6480}
html[data-tema="gelap"] .kad-layan--mati .kad-butang{
  background:#1E2434;color:#616A85;box-shadow:inset 0 0 0 1px #2A3145;
}
html[data-tema="gelap"] .lencana-mati{
  background:#1E2434;color:#6E7691;border-color:#2A3145;
}

/* landing: 2 kad besar */
.grid-layan--dua{justify-content:stretch;gap:24px}
.grid-layan--dua .kad-layan{
  flex:0 1 calc((100% - 24px) / 2);
  aspect-ratio:auto;min-height:268px;
}
.grid-layan--dua .kad-ikon{min-height:96px;flex:0 0 96px}
.grid-layan--dua .kad-ikon svg{width:46px;height:46px}
.grid-layan--dua .kad-isi{padding:18px 20px 20px}
.grid-layan--dua .kad-layan h3{font-size:17px;margin-bottom:6px}
.grid-layan--dua .kad-layan p{
  font-size:13px;line-height:1.55;margin-bottom:14px;
  -webkit-line-clamp:3;
}
.grid-layan--dua .kad-butang{font-size:12.5px;padding:8px 16px;border-radius:7px}
.grid-layan--dua .kad-butang svg{stroke:currentColor}
@media (max-width:820px){
  .grid-layan--dua{gap:16px}
  .grid-layan--dua .kad-layan{flex:0 1 100%;min-height:0}
  .grid-layan--dua .kad-ikon{min-height:84px;flex:0 0 84px}
  .grid-layan--dua .kad-isi{padding:14px 16px 16px}
  .grid-layan--dua .kad-layan h3{font-size:15.5px}
  .grid-layan--dua .kad-layan p{font-size:12.5px;-webkit-line-clamp:3}
}

/* ---------- log masuk: kunci selepas had percubaan (URS PG-02) ---------- */
.ralat-kunci{
  background:#FDF3E7;border:1px solid #F3D9B5;border-radius:6px;
  padding:9px 11px;font-size:12px;line-height:1.55;color:#8A4B00;
}
html[data-tema="gelap"] .ralat-kunci{
  background:rgba(180,110,20,.18);border-color:rgba(200,140,50,.38);color:#F0C07A;
}
.pautan-set-semula{
  display:inline-flex;align-items:center;gap:6px;
  margin:-6px 0 14px;padding:9px 13px;
  background:#EAF1FB;border:1px solid #C6D9F0;border-radius:6px;
  font-size:12.5px;font-weight:600;color:#1B4E8C;text-decoration:none;
  transition:background .15s ease,border-color .15s ease;
}
.pautan-set-semula:hover{background:#DDE9F8;border-color:#A9C5E4}
.pautan-set-semula[hidden]{display:none}
.pautan-set-semula svg{
  width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
html[data-tema="gelap"] .pautan-set-semula{
  background:rgba(90,150,220,.16);border-color:rgba(90,150,220,.35);color:#8FC0F0;
}

/* ---------- notifikasi: pengirim + dokumen (URS MA-02) ---------- */
.nf-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:5px;
}
.nf-pengirim{
  font-size:11px;font-weight:600;color:var(--ink-2);
  padding:1.5px 7px;border-radius:4px;background:#EEF2F8;
}
.nf-dokumen{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:9px;padding:6px 11px;
  background:#F5F8FC;border:1px solid #DCE4F0;border-radius:5px;
  font:inherit;font-size:11.5px;font-weight:500;color:#1B4E8C;
  cursor:pointer;max-width:100%;text-align:left;
  transition:background .15s ease,border-color .15s ease;
}
.nf-dokumen:hover{background:#EAF1FB;border-color:#B9CFE8}
.nf-dokumen svg{
  flex:0 0 auto;width:14px;height:14px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
html[data-tema="gelap"] .nf-pengirim{background:rgba(255,255,255,.07);color:var(--ink-2)}
html[data-tema="gelap"] .nf-dokumen{
  background:rgba(90,150,220,.12);border-color:rgba(90,150,220,.3);color:#8FC0F0;
}
html[data-tema="gelap"] .nf-dokumen:hover{background:rgba(90,150,220,.2)}

/* ---------- sesi pembayaran: kira detik (URS MA-03) ---------- */
.inv-kira-masa{
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  color:var(--ink-1);
}
.inv-kira-masa.hampir{color:#C2410C}
html[data-tema="gelap"] .inv-kira-masa{color:#E8ECF5}
html[data-tema="gelap"] .inv-kira-masa.hampir{color:#FCA97A}

/* ---------- panel ringkasan: tindakan pilih kompaun ---------- */
.as-tindakan{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.as-kira{
  font-size:12px;
  font-weight:500;
  color:var(--biru, #24538A);
  background:#EAF1FB;
  padding:6px 11px;
  border-radius:7px;
  white-space:nowrap;
}
.as-kira[hidden]{display:none}
#btnBayarPilih:disabled{
  opacity:.62;
  cursor:not-allowed;
  background:#9AA6BD;
  border-color:#9AA6BD;
}
.plat{
  font-family:ui-monospace, Consolas, monospace;
  font-size:11.5px;
  letter-spacing:.04em;
  background:#F1F4FA;
  padding:2px 6px;
  border-radius:4px;
  white-space:nowrap;
}
html[data-tema="gelap"] .as-kira{background:#1F2A40;color:#7DB0EE}
html[data-tema="gelap"] .plat{background:#1E2637;color:#C9D2E3}

@media (max-width:760px){
  .as-tindakan{width:100%;justify-content:space-between}
  #btnBayarPilih{flex:0 0 auto}
}


html[data-tema="gelap"] .hero-akaun::before{
  background:linear-gradient(90deg,
    #0E1B33 0%,
    rgba(14,27,51,.99) 22%,
    rgba(14,27,51,.93) 34%,
    rgba(14,27,51,.74) 46%,
    rgba(14,27,51,.42) 58%,
    rgba(14,27,51,.14) 70%,
    rgba(14,27,51,0) 80%);
}
@media (max-width:760px){
  .hero-akaun{
    margin-left:0;
    min-height:0;
    padding:24px 20px;
    border-radius:12px;
    background-position:center 40%;
  }
  .hero-akaun::before{
    background:linear-gradient(180deg,
      rgba(27,58,112,.97) 0%,
      rgba(27,58,112,.92) 52%,
      rgba(27,58,112,.62) 78%,
      rgba(27,58,112,.30) 100%);
  }
  .hero-kiri h1{font-size:23px}
  .hero-kiri p{font-size:12.5px}
}

/* ==========================================================================
   Landing — slider banner, berita dinamik
   ========================================================================== */
.wira-slaid{position:relative;width:100%}
.wira-slaid-item{display:none}
.wira-slaid-item.aktif{display:block;animation:wiraMasuk .5s var(--ease) both}
@keyframes wiraMasuk{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wira-butang{margin-top:22px;display:inline-flex}

.wira-titik{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;gap:8px;z-index:3;
}
.wira-titik[hidden]{display:none}
.wira-titik-btn{
  appearance:none;border:0;padding:0;cursor:pointer;
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.42);
  transition:all .2s var(--ease);
}
.wira-titik-btn:hover{background:rgba(255,255,255,.72)}
.wira-titik-btn.aktif{width:22px;border-radius:4px;background:#FAC001}
.wira-titik-btn:focus-visible{outline:2px solid #FAC001;outline-offset:3px}

.berita-kosong{
  text-align:center;padding:40px 20px;
  border:1px dashed var(--line);border-radius:var(--r-lg);
  color:var(--ink-3);font-size:13px;
}
.berita-kosong p{margin:0}

html[data-tema="gelap"] .berita-kosong{border-color:#2C3145;color:#9AA2BC}

/* kad berita sama tinggi */
.berita-grid{align-items:stretch}
.kad-berita{height:100%}
.kad-berita .isi{flex:1 1 auto;display:flex;flex-direction:column}
.kad-berita .baca{margin-top:auto;padding-top:10px}

/* ====================================================== pegawai (hubungi) */
.pegawai-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}
.pegawai-kad{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;display:flex;flex-direction:column;gap:14px;
}
.pk-atas{display:flex;align-items:center;gap:12px}
.pk-avatar{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  background:#EEF1F9;color:var(--navy);
  display:grid;place-items:center;font-size:13px;font-weight:600;
}
.pk-teks{min-width:0}
.pk-teks strong{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.pk-teks span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.pk-modul{
  display:inline-block;align-self:flex-start;
  background:#EEF3FC;color:var(--navy);
  font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;border-radius:4px;
}
.pk-senarai{margin:0;display:grid;gap:8px}
.pk-senarai > div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline}
.pk-senarai dt{font-size:11px;color:var(--ink-3)}
.pk-senarai dd{margin:0;font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.pk-senarai dd.mono{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;letter-spacing:.02em}
.pk-senarai a{color:var(--teal);text-decoration:none}
.pk-senarai a:hover{text-decoration:underline}
.pegawai-kosong{
  grid-column:1/-1;text-align:center;padding:40px 20px;
  border:1px dashed var(--line);border-radius:var(--r-lg);
  color:var(--ink-3);font-size:13px;margin:0;
}

@media (max-width:1024px){.pegawai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pegawai-grid{grid-template-columns:minmax(0,1fr)}}

html[data-tema="gelap"] .pegawai-kad{background:#1A1D2E;border-color:#2C3145}
html[data-tema="gelap"] .pk-avatar{background:#252A3E;color:#A9B6E8}
html[data-tema="gelap"] .pk-modul{background:#1C2440;color:#9FB0EE}
html[data-tema="gelap"] .pegawai-kosong{border-color:#2C3145;color:#9AA2BC}

/* avatar pegawai di halaman awam */
.pk-avatar{overflow:hidden}
.pk-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* profil panel — butang & jarak kemas */
.pp-gambar .btn-garis{align-self:center;flex:0 0 auto}
.pp-senarai > div.penuh dd{max-width:62ch}

/* -------------------------------------------- nav: pautan dengan ikon (Troli Saya) */
.nav a.nav-ikon-pautan,
.nav a:has(.nav-ikon){
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.nav-ikon{
  width:16px;
  height:16px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle;
}

@media (max-width:760px){
  .nav-ikon{width:15px;height:15px}
}

/* ------------------------------------------------ seksyen Tentang Portal */
.tentang-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.tentang-kad{
  background:#fff;
  border:1px solid var(--line,#E3E7F1);
  border-radius:11px;
  padding:22px 24px;
}

.tentang-kad h3{
  margin:0 0 9px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3,#6B7390);
}

.tentang-kad p{
  margin:0;
  font-size:13px;
  line-height:1.65;
  color:var(--ink-3,#6B7390);
}

.tentang-url,
.tentang-nilai{
  font-size:14.5px !important;
  font-weight:600;
  color:var(--ink,#1B1F3B) !important;
  margin-bottom:6px !important;
  word-break:break-word;
}

.tentang-url a{
  color:var(--teal,#005C83);
  text-decoration:none;
  border-bottom:1px solid rgba(0,92,131,.28);
  padding-bottom:1px;
}

.tentang-url a:hover{border-bottom-color:var(--teal,#005C83)}

html[data-tema="gelap"] .tentang-kad{
  background:var(--kad,#1A1D2E);
  border-color:var(--line,#2C3145);
}

@media (max-width:900px){
  .tentang-grid{grid-template-columns:minmax(0,1fr);gap:14px}
}

@media (max-width:560px){
  .tentang-kad{padding:18px 18px}
}