/* [CHANGE 2026-10-06] what: CSS portal ahli & halaman daftar/bayar — token + komponen drpd mockup yang diluluskan · why: rupa dikekalkan (Founder 6/10 14:42) · verify: /ahli dan /ahli/genealogi sepadan mockup pada 375 & 1440px */
:root{
  --hutan:#123D2F; --hutan-2:#1C5442; --hutan-3:#245E4B;
  --saga:#D2512B; --saga-2:#B9431F;
  --latar:#F4F5F2; --kad:#FFFFFF; --garis:#DCE2DD;
  --dakwat:#15221D; --dakwat-2:#4A5A53; --dakwat-3:#6B7A73;
  --bronze:#A86A3D; --silver:#8C96A0; --gold:#C79A1E;
  --naik:#2E7D4F; --turun:#B3261E;
  --r-kad:14px; --r-input:10px; --r-pil:999px;
  --bayang:0 1px 2px rgba(18,61,47,.06),0 8px 24px rgba(18,61,47,.08);
  --f-tajuk:"Bricolage Grotesque",system-ui,sans-serif;
  --f-badan:"Figtree",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--latar);color:var(--dakwat);font:16px/1.55 var(--f-badan);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-tajuk);line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
.wang,.angka{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* butang */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--r-pil);font:600 15px/1 var(--f-badan);text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease;background:none;color:inherit}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-utama{background:var(--saga);color:#fff}
.btn-utama:hover{background:var(--saga-2)}
.btn-garis{border-color:currentColor}
.btn-gelap{background:var(--hutan);color:#fff}
.btn-wasap{background:#1FA855;color:#fff}
.btn-kecil{min-height:40px;padding:0 16px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
:focus-visible{outline:3px solid var(--saga);outline-offset:2px}

/* lencana & monogram */
.lencana{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pil);font:700 12px/1.4 var(--f-badan);letter-spacing:.02em;color:#fff;text-transform:uppercase}
.lencana.bronze{background:var(--bronze)} .lencana.silver{background:var(--silver)} .lencana.gold{background:var(--gold);color:#2A2108}
.mono{--c:var(--hutan);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:700 16px var(--f-tajuk);color:#fff;background:var(--hutan-2);box-shadow:0 0 0 3px var(--latar),0 0 0 6px var(--c);flex:none}
.mono.bronze{--c:var(--bronze)} .mono.silver{--c:var(--silver)} .mono.gold{--c:var(--gold)}

/* borang */
.medan{display:grid;gap:6px;margin-bottom:16px}
.medan label{font-weight:600;font-size:14px}
.medan input,.medan select{height:48px;border-radius:var(--r-input);border:1.5px solid var(--garis);background:var(--kad);padding:0 14px;font:500 16px var(--f-badan);color:var(--dakwat);width:100%}
.medan input:focus,.medan select:focus{border-color:var(--hutan-2);outline:none;box-shadow:0 0 0 3px rgba(28,84,66,.15)}
.medan .bantu{font-size:13px;color:var(--dakwat-3)}
.medan .salah{font-size:13px;color:var(--turun);font-weight:600}
.medan input[aria-invalid="true"]{border-color:var(--turun)}
.kotak-semak{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-bottom:18px}
.kotak-semak input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--hutan)}
.makluman{border-radius:12px;padding:12px 16px;font-size:15px;margin-bottom:18px;display:flex;gap:10px;align-items:flex-start}
.makluman.ok{background:#E3EFE8;color:var(--hutan)}
.makluman.ralat{background:#FBE4E1;color:var(--turun)}
.makluman.info{background:#FBE9E2;color:var(--saga-2)}

/* susun atur portal */
.susun{display:grid;grid-template-columns:248px 1fr;min-height:100dvh}
.sisi{background:var(--hutan);color:#DCE8E1;padding:22px 16px;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:22px}
.jenama{display:flex;align-items:center;gap:10px;font:800 19px var(--f-tajuk);letter-spacing:.04em;text-decoration:none}
.sisi .jenama{color:#fff;padding:0 8px}
.jenama i{width:36px;height:36px;border-radius:10px;background:#fff;color:var(--hutan);display:grid;place-items:center;font:800 14px var(--f-tajuk);font-style:normal}
.menu{display:grid;gap:4px}
.menu a,.menu button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:12px;text-decoration:none;font:600 15px var(--f-badan);color:inherit;background:none;border:0;cursor:pointer;width:100%;text-align:left}
.menu a i,.menu button i{font-size:21px}
.menu a:hover,.menu button:hover{background:var(--hutan-2)}
.menu a[aria-current="page"]{background:#fff;color:var(--hutan)}
.sisi form{margin-top:auto}
.utama{padding:24px 32px 48px;min-width:0}
.atas{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.atas h1{font-size:28px;color:var(--hutan)}
.atas p{color:var(--dakwat-2);font-size:15px;margin-top:4px}
.grid-utama{display:grid;grid-template-columns:1.25fr 1fr;gap:20px}
.lajur{display:grid;gap:20px;align-content:start}
.kad{background:var(--kad);border-radius:var(--r-kad);box-shadow:var(--bayang);padding:22px}
.kad h2{font-size:18px}
.kepala-kad{display:flex;justify-content:space-between;align-items:center;gap:12px}
.kepala-kad a{font-size:14px;font-weight:600;color:var(--saga);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.kecil{font-size:13px;color:var(--dakwat-3)}
.wallet{background:var(--hutan);color:#fff;position:relative;overflow:hidden}
.wallet::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:34px solid rgba(255,255,255,.05)}
.wallet small{color:#BFD6CA;font-size:14px}
.baki{font:800 44px/1.05 var(--f-tajuk);margin:6px 0 4px}
.baki span{font-size:22px;font-weight:700}
.wallet .baris{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;position:relative;z-index:1}
.wallet .btn-garis{color:#fff}
.pecahan{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px;position:relative;z-index:1}
.pecahan div{background:rgba(255,255,255,.08);border-radius:12px;padding:12px}
.pecahan small{display:block;font-size:12px}
.pecahan b{font:700 18px var(--f-tajuk)}
.had-kepala{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px}
.had-kepala b{font:800 30px var(--f-tajuk);color:var(--hutan)}
.had-kepala span{color:var(--dakwat-3);font-size:14px}
.bar{height:12px;border-radius:12px;background:#E5EAE6;margin:14px 0 8px;overflow:hidden}
.bar span{display:block;height:100%;border-radius:12px;background:linear-gradient(90deg,var(--hutan-2),var(--naik))}
.kaki-dua{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:18px;text-align:center}
.kaki-dua .k{background:var(--latar);border-radius:12px;padding:14px 8px}
.kaki-dua small{display:block;font-size:13px;color:var(--dakwat-3)}
.kaki-dua b{font:800 30px var(--f-tajuk)}
.kaki-dua i{font-size:24px;color:var(--dakwat-3)}
.bawa{margin-top:12px;font-size:14px;background:#FBE9E2;color:var(--saga-2);border-radius:10px;padding:10px 12px;display:flex;gap:8px;align-items:center}
.pautan-kaki{display:grid;gap:12px;margin-top:14px}
.pautan-kaki .satu{background:var(--latar);border-radius:12px;padding:12px}
.pautan-kaki .satu b{display:block;font-size:14px;margin-bottom:8px}
.pautan-kaki .baris{display:flex;gap:8px;flex-wrap:wrap}
.pantas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.pantas a{background:var(--kad);border-radius:var(--r-kad);box-shadow:var(--bayang);padding:16px;text-decoration:none;display:flex;flex-direction:column;gap:10px;font-weight:600;min-height:96px}
.pantas i{font-size:26px;color:var(--saga)}
.jadual{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}
.jadual th{text-align:left;font-size:13px;color:var(--dakwat-3);font-weight:600;padding:10px 8px;border-bottom:1px solid var(--garis)}
.jadual td{padding:13px 8px;border-bottom:1px solid #EEF1EE}
.jadual .wang{text-align:right;font-weight:700}
.jadual .masuk{color:var(--naik)} .jadual .keluar{color:var(--turun)}
.cip{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:#EEF0F3;color:#525C66}
.cip.intro{background:#E3EFE8;color:var(--hutan)} .cip.pairing{background:#FBE9E2;color:var(--saga-2)}
.cip.pending{background:#FFF3D6;color:#7A5A00} .cip.paid{background:#E3EFE8;color:var(--hutan)} .cip.rejected{background:#FBE4E1;color:var(--turun)}
.kosong-senarai{text-align:center;color:var(--dakwat-3);padding:28px 12px;font-size:15px}
.kosong-senarai i{font-size:34px;display:block;margin-bottom:8px;color:var(--garis)}
.bawah-nav{display:none}
.halaman-atas{display:none}

/* genealogi */
.alat{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:4px 0 16px}
.alat label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--dakwat-2)}
.alat input{height:46px;border-radius:var(--r-input);border:1.5px solid var(--garis);background:var(--kad);padding:0 14px;font:500 15px var(--f-badan);width:220px;max-width:100%}
.alat .ruang{flex:1}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--dakwat-2);margin-bottom:12px}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda b{width:12px;height:12px;border-radius:50%;display:inline-block}
.kanvas{background:var(--kad);border-radius:var(--r-kad);box-shadow:var(--bayang);overflow-x:auto;padding:28px 12px 36px}
.pokok{width:max-content;min-width:100%;margin:0 auto;display:flex;justify-content:center}
.pokok ul{padding-top:26px;position:relative;display:flex;justify-content:center;margin:0;padding-left:0;list-style:none}
.pokok>ul{padding-top:0}
.pokok li{position:relative;padding:26px 8px 0;text-align:center;flex:1}
.pokok>ul>li{padding-top:0}
.pokok li::before,.pokok li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:26px;border-top:2px solid #C9D3CC}
.pokok li::after{right:auto;left:50%;border-left:2px solid #C9D3CC}
.pokok li:only-child::before,.pokok li:only-child::after{display:none}
.pokok li:first-child::before,.pokok li:last-child::after{border:0}
.pokok li:last-child::before{border-right:2px solid #C9D3CC;border-radius:0 8px 0 0}
.pokok li:first-child::after{border-radius:8px 0 0 0}
.pokok ul ul::before{content:"";position:absolute;top:0;left:50%;height:26px;border-left:2px solid #C9D3CC}
.nod{display:inline-flex;flex-direction:column;align-items:center;gap:6px;background:var(--latar);border-radius:14px;padding:14px 10px 12px;width:206px;border:1.5px solid transparent}
.nod>a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit}
.nod .mono{width:44px;height:44px;font-size:14px}
.nod b{font-size:15px;line-height:1.2}
.nod small{font-size:12px;color:var(--dakwat-3)}
.nod .unit{display:flex;gap:6px;font-size:12px;font-weight:700;margin-top:2px}
.nod .unit span{background:var(--kad);border-radius:8px;padding:3px 8px;font-variant-numeric:tabular-nums}
.nod .salin-kaki{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;margin-top:6px}
.nod .salin-kaki button{min-height:40px;border-radius:10px;border:1.5px solid var(--garis);background:var(--kad);font:700 12px var(--f-badan);color:var(--hutan);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.nod .salin-kaki button:hover{border-color:var(--hutan-2)}
.nod.akar{background:var(--hutan);color:#fff}
.nod.akar small{color:#BFD6CA}
.nod.akar .unit span{background:var(--hutan-2);color:#fff}
.nod.akar .mono{box-shadow:0 0 0 3px var(--hutan),0 0 0 6px var(--c)}
.nod.akar .salin-kaki button{background:var(--hutan-2);border-color:#3E7A64;color:#fff}
.nod.kosong{border:2px dashed #B9C6BE;background:transparent;color:var(--hutan);justify-content:center;min-height:150px;font-weight:700}
.nod.kosong i{font-size:28px;color:var(--saga)}
.nod.kosong button{min-height:44px;border-radius:999px;border:0;background:var(--saga);color:#fff;font:700 13px var(--f-badan);padding:0 14px;cursor:pointer;margin-top:4px}
.ringkasan{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.ringkasan div{background:var(--kad);border-radius:var(--r-kad);box-shadow:var(--bayang);padding:16px}
.ringkasan small{color:var(--dakwat-3);font-size:13px}
.ringkasan b{display:block;font:800 26px var(--f-tajuk);color:var(--hutan)}
.turun{display:none;font-size:12px;font-weight:700;color:var(--saga)}

.kedudukan{display:flex;width:fit-content;align-items:center;gap:4px;margin:0 auto 6px;padding:3px 10px;border-radius:999px;font:800 11px/1.3 Figtree,system-ui,sans-serif;letter-spacing:.03em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legenda .kedudukan{display:inline-flex;margin:0}
.unit-kap{font-size:11px;color:var(--dakwat-3);margin-top:2px}
.nod.akar .unit-kap{color:#BFD6CA}
.kedudukan.kiri{background:#E3EFE8;color:#123D2F} .kedudukan.kanan{background:#FBE9E2;color:#B9431F}
.penuh{display:block;font-size:12px;font-weight:600;color:#6B7A73;margin-top:6px;grid-column:1/-1}
/* toast salin */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--dakwat);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:all .2s ease;z-index:60;max-width:calc(100% - 32px)}
.toast.papar{opacity:1;transform:translateX(-50%) translateY(0)}

/* halaman awam ringkas (daftar / bayaran / log masuk) */
.kepala-awam{background:var(--hutan);color:#fff}
.kepala-awam .dlm{max-width:1100px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;align-items:center;gap:12px}
.kepala-awam .jenama{color:#fff}
.halaman{max-width:1100px;margin:0 auto;padding:28px 20px 56px}
.dua{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}
.kunci{background:var(--hutan);color:#fff;border-radius:var(--r-kad);padding:22px}
.kunci h2{font-size:20px;margin-bottom:14px}
.kunci .item{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #2E6150}
.kunci .item:first-of-type{border-top:0}
.kunci small{display:block;color:#BFD6CA;font-size:13px}
.kunci .tag{margin-left:auto;font-size:12px;font-weight:700;background:#0E3226;border-radius:999px;padding:4px 10px;display:inline-flex;gap:6px;align-items:center}
.pilih-pakej{display:grid;gap:12px;margin-bottom:18px}
.pilih-pakej label{display:flex;gap:14px;align-items:center;border:2px solid var(--garis);border-radius:14px;padding:14px 16px;cursor:pointer;background:var(--kad)}
.pilih-pakej input{width:22px;height:22px;accent-color:var(--saga);flex:none}
.pilih-pakej label:has(input:checked){border-color:var(--saga);background:#FFF8F5}
.pilih-pakej .harga{margin-left:auto;font:800 22px var(--f-tajuk)}
.pilih-pakej small{display:block;color:var(--dakwat-3);font-size:13px}
.log-masuk{min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(160deg,var(--hutan) 0%,var(--hutan-2) 100%)}
.log-masuk .kad{width:100%;max-width:420px;padding:30px 26px}
.log-masuk .jenama{color:var(--hutan);margin-bottom:22px}
.log-masuk .jenama i{background:var(--hutan);color:#fff}

@media (max-width:1100px){.grid-utama{grid-template-columns:1fr}.pantas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .susun{grid-template-columns:1fr}.sisi{display:none}
  .halaman-atas{display:flex;align-items:center;gap:12px;background:var(--hutan);color:#fff;padding:0 16px;min-height:58px;position:sticky;top:0;z-index:20}
  .halaman-atas .jenama{color:#fff;font-size:17px}
  .halaman-atas .jenama i{width:32px;height:32px}
  .utama{padding:16px 16px 96px}
  .atas h1{font-size:22px}
  .baki{font-size:38px}
  .pecahan b{font-size:16px}
  .bawah-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--kad);border-top:1px solid var(--garis);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
  .bawah-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;font-size:12px;font-weight:600;text-decoration:none;color:var(--dakwat-3)}
  .bawah-nav a i{font-size:23px}
  .bawah-nav a[aria-current="page"]{color:var(--saga)}
  .jadual thead{display:none}
  .jadual tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid #EEF1EE}
  .jadual td{padding:0;border:0}
  .jadual td:nth-child(1){grid-column:1;font-size:13px;color:var(--dakwat-3);order:3}
  .jadual td:nth-child(2){order:1}
  .jadual td:nth-child(3){grid-column:1;order:4;font-size:14px}
  .jadual td:nth-child(4){grid-row:1;grid-column:2;order:2}
  .dua{grid-template-columns:1fr}
  .ringkasan{grid-template-columns:1fr 1fr}
  .alat input{width:100%}.alat>div:first-child{flex:1 1 100%}
  .kanvas{padding:20px 8px 24px}.pokok{width:auto}.pokok ul ul ul{display:none}.pokok li{padding-left:4px;padding-right:4px}
  .nod{width:100%;max-width:178px;padding:12px 8px}.nod b{font-size:14px}.nod .unit{flex-wrap:wrap;justify-content:center}.turun{display:block}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* [CHANGE 2026-10-06] what: laporan & kumpulan ahli — tab, penapis, jadual data (desktop = jadual, telefon = kad berlabel), perbandingan kaki, cetak · why: Founder 16:12 & 16:25 (B-48/B-49/B-57) · verify: /ahli/laporan & /ahli/kumpulan pada 375 & 1440px, cetak → tiada menu */
.tab-laporan{display:flex;gap:8px;overflow-x:auto;margin:0 0 18px;padding:2px 2px 6px;scrollbar-width:none}
.tab-laporan::-webkit-scrollbar{display:none}
.tab-laporan a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pil);background:var(--kad);box-shadow:var(--bayang);font-weight:600;font-size:14px;text-decoration:none;color:var(--dakwat-2)}
.tab-laporan a:hover{color:var(--hutan)}
.tab-laporan a[aria-current="page"]{background:var(--hutan);color:#fff}
.alat select,.alat input[type=date]{height:46px;border-radius:var(--r-input);border:1.5px solid var(--garis);background:var(--kad);padding:0 12px;font:500 15px var(--f-badan);color:var(--dakwat)}
.alat input[type=date]{width:auto}
.alat select:focus,.alat input:focus{border-color:var(--hutan-2);outline:none;box-shadow:0 0 0 3px rgba(28,84,66,.15)}
.alat .julat{display:flex;gap:10px}
.alat .julat[hidden]{display:none}
.alat .semak{display:flex;align-items:center;gap:8px;min-height:46px;font-size:14px;font-weight:600;color:var(--dakwat-2);margin:0}
.alat .semak input{width:20px;height:20px;accent-color:var(--hutan-2)}
.atas .ruang{flex:1}
.label-tempoh{font-weight:700;color:var(--hutan);margin:-4px 0 14px}
.ringkasan.empat{grid-template-columns:repeat(4,1fr);margin:0 0 18px}
.ringkasan .masuk{color:var(--naik)} .ringkasan .keluar{color:var(--turun)}
.data{width:100%;border-collapse:collapse;font-size:14.5px}
.data th{text-align:left;font-size:12.5px;color:var(--dakwat-3);font-weight:600;padding:10px;border-bottom:1px solid var(--garis);white-space:nowrap}
.data td{padding:12px 10px;border-bottom:1px solid #EEF1EE;vertical-align:top}
.data .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.data tbody tr:hover{background:#F7F9F7}
.data td small{display:block;color:var(--dakwat-3);font-size:12.5px;margin-top:2px}
.data td .kedudukan{margin:0}
.data .masuk{color:var(--naik);font-weight:700} .data .keluar{color:var(--turun);font-weight:700}
.data .khas td{background:#F4F7F5;font-weight:700}
.data tfoot td{font-weight:800;border-top:2px solid var(--garis);border-bottom:0;padding-top:14px}
.data .bar-sel{width:22%;min-width:80px}
.data .bar-sel span{display:block;height:10px;border-radius:10px;min-width:2px}
.data .bar-sel .kiri{background:var(--hutan-2)} .data .bar-sel .kanan{background:var(--saga)}
.skrol-x{overflow-x:auto}
.halaman-nombor{margin-top:14px}
.cetak-sahaja{display:none}
.kaki-banding{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.kaki-banding a{display:block;background:var(--kad);border-radius:var(--r-kad);box-shadow:var(--bayang);padding:18px;text-decoration:none;border:2px solid transparent}
.kaki-banding a:hover{border-color:var(--garis)}
.kaki-banding a[aria-current="page"]{border-color:var(--hutan-2)}
.kaki-banding .kedudukan{margin:0 0 6px}
.kaki-banding .mula{display:block;font-size:14px;color:var(--dakwat-2)}
.kaki-banding dl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 14px;margin:12px 0 0}
.kaki-banding dt{font-size:12.5px;color:var(--dakwat-3)}
.kaki-banding dd{margin:2px 0 0;font:800 22px var(--f-tajuk);color:var(--hutan)}
.keluar-atas{margin-left:auto;display:flex}
.keluar-atas button{background:none;border:0;color:#fff;min-width:44px;min-height:44px;font-size:22px;cursor:pointer}
@media (max-width:860px){
  .atas{flex-wrap:wrap}
  .ringkasan.empat{grid-template-columns:1fr 1fr}
  .ringkasan.empat b{font-size:20px}
  .kaki-banding{grid-template-columns:1fr}
  .kaki-banding dl{grid-template-columns:1fr 1fr}
  .alat select,.alat .julat,.alat .julat>div{width:100%}.alat>div{flex:1 1 calc(50% - 10px)}
  .alat input[type=date]{width:100%}
  .data thead{display:none}
  .data,.data tbody,.data tfoot,.data tr,.data td{display:block;width:100%}
  .data tr{padding:12px 0;border-bottom:1px solid #EEF1EE}
  .data tbody tr:hover{background:none}
  .data td{padding:3px 0;border:0;text-align:right;overflow:hidden}
  .data td::before{content:attr(data-label);float:left;margin-right:12px;color:var(--dakwat-3);font-size:13px;font-weight:600;text-align:left}
  .data td .kedudukan{display:inline-flex;vertical-align:middle}
  .data td small{display:inline;margin-left:6px}
  .data td.utama-sel{display:block;text-align:left;font-size:16px;font-weight:700;margin-bottom:4px}
  .data td.utama-sel::before{content:none}
  .data td.utama-sel small{display:block;margin:2px 0 0;font-weight:500}
  .data td:empty,.data td.bar-sel{display:none}
  .data tfoot tr{background:#F4F7F5;border-radius:10px;padding:12px;margin-top:10px}
  .data tfoot td:first-child{text-align:left;display:block}
  .data tfoot td:first-child::before{content:none}
  .data td.n .btn{width:100%}
}
@media print{
  .sisi,.bawah-nav,.halaman-atas,.alat,.tab-laporan,.btn,.makluman,.halaman-nombor{display:none!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff}.susun{display:block}.utama{padding:0}
  .cetak-sahaja{display:block;margin-bottom:12px}
  .kad,.ringkasan div,.kaki-banding a{box-shadow:none;border:1px solid var(--garis)}
  .data tr{break-inside:avoid}.data th{position:static}
}
@page{size:A4;margin:1.3cm}
/* [CHANGE 2026-10-06] what: navigasi halaman portal ahli · why: ganti lalai Tailwind yg tidak bergaya · verify: 375px butang ≥44px, tiada anak panah gergasi */
.nav-halaman{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.nav-halaman [aria-disabled="true"]{opacity:.4;pointer-events:none}
.kedudukan-halaman{text-align:center;font-weight:600;font-size:14px;color:var(--dakwat-2)}
.kedudukan-halaman small{display:block;font-weight:500;color:var(--dakwat-3);font-size:12.5px}

/* [CHANGE 2026-10-06] what: dashboard ahli ikut rekaan Founder 17:09 — tarikh, sorok baki, trend %, bar mini, ikon pecahan, kaki dgn bar mingguan, pautan berikon, pautan pantas berketerangan · why: B-63 · verify: /ahli 1440 & 375px */
.tarikh-kini{background:var(--kad);border-radius:12px;box-shadow:var(--bayang);padding:10px 16px;text-align:right}
.tarikh-kini b{display:block;font-size:14px}.tarikh-kini span{font-size:13px;color:var(--dakwat-3)}
.wallet-atas{display:flex;justify-content:space-between;gap:16px;position:relative;z-index:1}
.sorok-baki{background:none;border:0;color:#BFD6CA;cursor:pointer;min-width:44px;min-height:32px;font-size:18px;vertical-align:middle}
.wallet.disorok [data-nilai]{font-size:0}
.wallet.disorok [data-nilai]::after{content:"••••";font-size:28px;letter-spacing:.1em}
.wallet.disorok .pecahan [data-nilai]::after{font-size:18px}
.trend{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.cip-trend{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.12)}
.cip-trend.naik{color:#9FE0BC}.cip-trend.turun{color:#FFB4A8}
.mini-bar{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:4px}
.mini-bar span{width:12px;border-radius:4px 4px 0 0;background:rgba(255,255,255,.28)}
.mini-bar span:last-child{background:#9FE0BC}
.pecahan div{display:flex;align-items:center;gap:10px}
.pecahan i{font-size:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 38px;background:rgba(255,255,255,.1)}
.pecahan div:nth-child(1) i{color:#9FE0BC}.pecahan div:nth-child(2) i{color:#F6B79F}.pecahan div:nth-child(3) i{color:#EBCB6E}
.wallet .btn i,.kad .btn i{font-size:18px}
.kaki-dua .k{display:flex;align-items:center;gap:12px;text-align:left;padding:14px}
.kaki-dua .k small{font-size:12.5px}
.kaki-dua .k b{display:block;line-height:1.1}
.ikon-kaki{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex:0 0 44px}
.kiri .ikon-kaki{background:#E3EFE8;color:var(--hutan-2)}.kanan .ikon-kaki{background:#FBE9E2;color:var(--saga)}
.kaki-dua .kecil-bar{height:40px;margin:0 0 0 auto;gap:4px}
.kaki-dua .kecil-bar span{width:7px;background:#C6DDD0}.kaki-dua .kanan .kecil-bar span{background:#F4C9B8}
.kaki-dua .kiri .kecil-bar span:last-child{background:var(--hutan-2)}.kaki-dua .kanan .kecil-bar span:last-child{background:var(--saga)}
a.bawa{text-decoration:none}
.kepala-kad a{display:inline-flex;align-items:center;gap:6px}
.pautan-kaki .satu{display:flex;align-items:flex-start;gap:12px}
.pautan-kaki .satu .isi{flex:1;min-width:0}
.pautan-kaki .ke-genealogi{align-self:center;min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--dakwat-3);font-size:20px;text-decoration:none}
.pantas a{flex-direction:row;align-items:center;gap:14px;min-height:88px}
.pantas a>i:first-child{font-size:24px;width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;background:#E3EFE8;color:var(--hutan-2)}
.pantas a:nth-child(2)>i:first-child{background:#E4EEF8;color:#1F4E79}.pantas a:nth-child(3)>i:first-child{background:#FBF3DC;color:#8A6A10}.pantas a:nth-child(4)>i:first-child{background:#FBE9E2;color:var(--saga)}
.pantas a span{flex:1;min-width:0}.pantas a b{display:block;font-size:15px}.pantas a small{display:block;font-weight:500;font-size:13px;color:var(--dakwat-3);margin-top:2px}
.pantas .panah{font-size:18px;color:var(--dakwat-3)}
@media (max-width:860px){
  .tarikh-kini{display:none}
  .wallet-atas{flex-direction:column}.trend{align-items:flex-start;text-align:left}.mini-bar{display:none}
  .kaki-dua{grid-template-columns:1fr}.kaki-dua>i{display:none}
  .pantas a{min-height:72px;padding:12px}.pantas a small{display:none}.pantas a>i:first-child{width:42px;height:42px;flex-basis:42px;font-size:20px}
}

/* [CHANGE 2026-10-06] what: genealogi ikut rekaan Founder 17:13 — kad nod mendatar putih, nod puncak gelap, cip pakej berikon, pil unit kiri hijau / kanan oren, butang pautan bergaris, carian berikon, kad statistik berpautan · why: B-64 · verify: /ahli/genealogi 1440 & 375px */
.alat-genealogi .cari-lebar{flex:1 1 360px;max-width:520px}
.medan-ikon{position:relative;display:block}
.medan-ikon i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--dakwat-3)}
.alat-genealogi .medan-ikon input{width:100%;padding-left:42px}
.kanvas{padding:30px 16px 36px}
.nod{flex-direction:column;align-items:stretch;gap:8px;background:var(--kad);border:1px solid var(--garis);box-shadow:0 1px 2px rgba(18,61,47,.05),0 6px 16px rgba(18,61,47,.06);width:256px;padding:14px;text-align:left}
.nod>a{flex-direction:row;align-items:center;gap:12px}
.nod .mono{width:50px;height:50px;font-size:16px;box-shadow:0 0 0 3px var(--kad),0 0 0 6px var(--c)}
.nod-isi{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.nod-baris{display:flex;align-items:center;gap:6px;justify-content:space-between}
.nod-baris b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pil-pakej{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
.pil-pakej.gold{background:#FBF0CF;color:#7A5A00}.pil-pakej.silver{background:#ECEFF2;color:#4E5862}.pil-pakej.bronze{background:#F5E8DD;color:#7A4A26}
.nod .unit-kap{font-size:11px}
.nod .unit{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.nod .unit span{text-align:center;padding:5px 6px;border-radius:8px}
.nod .unit .ki{background:#E3EFE8;color:var(--hutan)}.nod .unit .ka{background:#FBE9E2;color:var(--saga-2)}
.nod .penuh{text-align:center;font-size:12px;color:var(--dakwat-3)}
.nod .salin-kaki{margin-top:0}
.nod .salin-kaki button:only-child{grid-column:1 / -1}
.nod .salin-kaki button{background:var(--kad);border:1.5px solid var(--garis);color:var(--hutan)}
.nod.akar{background:var(--hutan);border-color:var(--hutan);box-shadow:0 8px 24px rgba(18,61,47,.25)}
.nod.akar .mono{box-shadow:0 0 0 3px var(--hutan),0 0 0 6px var(--c)}
.nod.akar .unit-kap,.nod.akar .penuh{color:#BFD6CA}
.nod.akar .unit .ki{background:#2B6550;color:#fff}.nod.akar .unit .ka{background:#7A3B22;color:#fff}
.nod.akar .salin-kaki button{background:transparent;border-color:#3E7A64;color:#fff}
.kedudukan.kiri{background:#DDEEE3}.kedudukan.kanan{background:#FBE3D8}
.ringkasan-pautan a{display:flex;align-items:center;gap:14px;background:var(--kad);border-radius:var(--r-kad);box-shadow:var(--bayang);padding:16px;text-decoration:none;min-height:88px}
.ringkasan-pautan a>i:first-child{font-size:24px;width:52px;height:52px;flex:0 0 52px;border-radius:14px;display:grid;place-items:center}
.ringkasan-pautan .hijau>i:first-child{background:#E3EFE8;color:var(--hutan-2)}.ringkasan-pautan .biru>i:first-child{background:#E4EEF8;color:#1F4E79}.ringkasan-pautan .oren>i:first-child{background:#FBE9E2;color:var(--saga)}
.ringkasan-pautan span{flex:1}.ringkasan-pautan .panah{font-size:18px;color:var(--dakwat-3);width:36px;height:36px;border:1px solid var(--garis);border-radius:50%;display:grid;place-items:center}
@media (max-width:860px){
  .nod{width:100%;max-width:178px;padding:10px 8px;text-align:center}
  .nod>a{flex-direction:column;gap:6px}.nod-baris{flex-direction:column;gap:4px}.nod-baris b{white-space:normal}
  .nod .unit{grid-template-columns:1fr}.alat-genealogi .cari-lebar{flex-basis:100%;max-width:none}
  .ringkasan-pautan{grid-template-columns:1fr}.ringkasan-pautan a{min-height:72px}
}

/* [CHANGE 2026-10-06] what: halaman naik taraf pakej + pautan di dashboard · why: B-28 Founder 17:23 · verify: /ahli/naik-taraf 375 & 1440px */
.pautan-naik{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--saga);text-decoration:none;min-height:32px}
.naik-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:start}
.naik-kini{background:var(--latar);box-shadow:none;border:1.5px dashed var(--garis)}
.naik-kini h2{margin:6px 0 4px}
.naik-kepala{display:flex;justify-content:space-between;align-items:center;gap:10px}
.naik-kepala b{font:800 24px var(--f-tajuk);color:var(--hutan)}
.naik-dl{margin:12px 0 0;display:grid;gap:0}
.naik-dl div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--garis);font-size:14px}
.naik-dl dt{color:var(--dakwat-3)}.naik-dl dd{margin:0;font-weight:700;text-align:right}.naik-dl em{font-style:normal;font-weight:500;color:var(--dakwat-3);font-size:12.5px}
.naik-isi{margin:0 0 14px;padding:0;list-style:none;font-size:14px;color:var(--dakwat-2)}.naik-isi li{padding:3px 0}
.naik-pilih form .btn{width:100%}
/* [CHANGE 2026-10-06] what: dashboard 375px — pecahan bonus tanpa ikon, kad pautan pantas boleh mengecil · why: UAT 17:4x limpahan sisi (Matching right=442, pantas right=384) · verify: tools/uat-profil.cjs D3-375 */
@media (max-width:860px){
  .pecahan i{display:none}.pecahan div{display:block;min-width:0}.pecahan b{font-size:16px}
  .pantas a{min-width:0}.pantas a span{min-width:0;overflow-wrap:anywhere}.pantas .panah{display:none}
}
/* [CHANGE 2026-10-06] what: nama nod genealogi tidak dipotong (2 baris), teks kaki dashboard tidak berbalut janggal · why: semakan visual UAT 17:5x · verify: tangkapan g1/d1 */
.nod-baris{align-items:flex-start}
.nod-baris b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kaki-dua .k{gap:10px;padding:12px}
.kaki-dua .k small{white-space:nowrap}
.kaki-dua .ikon-kaki{width:36px;height:36px;flex-basis:36px;font-size:18px}
.kaki-dua .kecil-bar{gap:3px}.kaki-dua .kecil-bar span{width:6px}
/* [CHANGE 2026-10-06] what: e-wallet & profil ikut rekaan dashboard — kad ringkasan berikon, tab kecil dlm kad, senarai permohonan dgn cip sejajar, kad kepala profil, jalur simpan · why: Founder 18:09 seragamkan (B-76) · verify: /ahli/wallet & /ahli/profil 1440 & 390 */
.ringkasan.berikon div{display:flex;align-items:center;gap:12px;min-width:0}
.ringkasan.berikon i{font-size:22px;width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center}
.ringkasan.berikon span{min-width:0}
.ringkasan.berikon b{font-size:22px;white-space:nowrap}
.ringkasan.berikon .hijau i{background:#E3EFE8;color:var(--hutan-2)}.ringkasan.berikon .emas i{background:#FBF3DC;color:#8A6A10}
.ringkasan.berikon .biru i{background:#E4EEF8;color:#1F4E79}.ringkasan.berikon .oren i{background:#FBE9E2;color:var(--saga)}
.tab-kecil{margin:12px 0 6px}.tab-kecil a{min-height:40px;box-shadow:none;border:1.5px solid var(--garis)}
.tab-kecil a[aria-current="page"]{border-color:var(--hutan)}
.ikon-tajuk{font-size:20px;color:var(--hutan-2);vertical-align:-3px;margin-right:8px}
.senarai-keluar>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #EEF1EE}
.senarai-keluar>div:last-child{border-bottom:0}
.senarai-keluar small{display:block;font-size:13px;color:var(--dakwat-3)}
.senarai-keluar .cip{flex:none}
.profil-kepala{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.profil-kepala .mono{width:64px;height:64px;font-size:20px;box-shadow:0 0 0 3px var(--kad),0 0 0 6px var(--c)}
.profil-kepala .isi{flex:1;min-width:0}
.profil-kepala h2{font-size:22px}
.profil-kepala p{margin-top:4px;color:var(--dakwat-2);font-size:14px}
.profil-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 20px;margin:14px 0 0}
.profil-meta dt{font-size:12.5px;color:var(--dakwat-3);display:flex;align-items:center;gap:6px}
.profil-meta dd{margin:2px 0 0;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.nota-selamat{display:flex;gap:10px;align-items:flex-start;background:var(--latar);border-radius:12px;padding:12px;font-size:13.5px;color:var(--dakwat-2)}
.nota-selamat i{font-size:20px;color:var(--hutan-2)}
.simpan-jalur{grid-column:1/-1;display:flex;align-items:flex-end;gap:16px}
.simpan-jalur .medan{flex:1;max-width:420px;margin:0}
@media (max-width:860px){
  .ringkasan.berikon div{flex-direction:column;align-items:flex-start;gap:8px}.ringkasan.berikon i{width:38px;height:38px;flex-basis:38px;font-size:18px}.ringkasan.berikon b{font-size:18px}
  .profil-kepala{align-items:flex-start;gap:14px}.profil-kepala .mono{width:52px;height:52px;font-size:16px}
  .profil-meta{grid-template-columns:1fr}
  .simpan-jalur{flex-direction:column;align-items:stretch}.simpan-jalur .medan{max-width:none}.simpan-jalur .btn{width:100%}
}
/* [CHANGE 2026-10-06] what: lajur grid utama boleh mengecil (baris tab/jadual tidak lagi melebarkan halaman); tarikh jadual e-wallet satu baris · why: UAT 390px — /ahli/wallet skrol mendatar (446px), "28 Sep / 2026" terbelah pd 1440 (B-76) · verify: semak2.cjs hscroll false */
.grid-utama>*,.lajur,.lajur>*{min-width:0}
.lajur{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){.grid-utama{grid-template-columns:minmax(0,1fr)}}
.data td.tarikh{white-space:nowrap}