1<!DOCTYPE html> 2<html lang="ms"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>iGuaman â Jabatan Bantuan Guaman Malaysia</title> 7 <link rel="shortcut icon" type="image/x-icon" href="https://www.iguaman.jbg.gov.my/images/logo/jata_negara.png"> 8 <link rel="preconnect" href="https://fonts.googleapis.com"> 9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> 11 <style> 12 :root { 13 --ink:#0F1D2E; --ink-2:#17293F; --ink-3:#22374f; 14 --brass:#C6A15B; --gold:#E4CF9E; --brass-d:#A9843F; --brass-t:rgba(198,161,91,.14); 15 --paper:#FBF9F5; --paper-2:#F1EBDF; --line:#E4DED2; 16 --slate:#3E4A57; --slate-2:#6B7683; 17 --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; 18 --shadow:0 22px 50px -28px rgba(15,29,46,.5); 19 --maxw:1180px; 20 } 21 * { box-sizing:border-box; } 22 html { scroll-behavior:smooth; } 23 html,body { margin:0; padding:0; } 24 /* Ofset supaya sasaran anchor tidak tertutup nav melekat (~74px) */ 25 #atas { scroll-margin-top:0; } 26 #pengenalan, #soalan-lazim { scroll-margin-top:90px; } 27 body { font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.6; 28 -webkit-font-smoothing:antialiased; overflow-x:hidden; } 29 a { text-decoration:none; color:inherit; } 30 img { max-width:100%; display:block; } 31 .wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem); } 32 .eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; 33 color:var(--brass-d); display:inline-flex; align-items:center; gap:.7rem; } 34 .eyebrow::before { content:""; width:26px; height:2px; background:var(--brass); border-radius:2px; } 35 .eyebrow.on-dark { color:var(--gold); } 36 37 /* ââ Navigasi ââ */ 38 .nav { position:sticky; top:0; z-index:50; background:rgba(251,249,245,.92); 39 backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } 40 .nav .wrap { position:relative; display:flex; align-items:center; justify-content:space-between; height:74px; gap:1rem; 41 max-width:1440px; padding:0 clamp(1.4rem,3vw,2.25rem); } 42 .brand { display:flex; align-items:center; gap:.75rem; } 43 .brand img { height:42px; width:auto; } 44 .brand .bt b { display:block; font-weight:800; font-size:1.2rem; letter-spacing:-.01em; line-height:1; } 45 .brand .bt span { font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-d); } 46 47 /* Menu tengah (dipusatkan pd viewport) */ 48 .nav-links { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 49 display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.6rem); } 50 .nav-links a { position:relative; font-weight:600; font-size:.96rem; color:var(--slate); 51 padding:.35rem 0; transition:color .18s; } 52 .nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; 53 background:var(--brass); border-radius:2px; transform:scaleX(0); transform-origin:left; 54 transition:transform .22s ease; } 55 .nav-links a:hover { color:var(--ink); } 56 .nav-links a:hover::after { transform:scaleX(1); } 57 58 /* Kelompok kanan (Daftar + Log Masuk) */ 59 .nav-right { display:flex; align-items:center; gap:1.1rem; } 60 61 /* Dropdown Daftar (hover / fokus) */ 62 .nav-daftar-wrap { position:relative; } 63 .nav-daftar { display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; cursor:pointer; 64 font-family:inherit; font-weight:700; font-size:.94rem; color:var(--brass-d); padding:.2rem 0; 65 transition:color .18s; } 66 .nav-daftar:hover { color:var(--ink); } 67 .nav-daftar .chev { width:14px; height:14px; transition:transform .22s; } 68 .nav-daftar-wrap:hover .nav-daftar .chev, 69 .nav-daftar-wrap:focus-within .nav-daftar .chev { transform:rotate(180deg); } 70 71 .nav-daftar-menu { position:absolute; top:calc(100% + .7rem); right:0; min-width:266px; 72 background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); 73 padding:.5rem; opacity:0; visibility:hidden; transform:translateY(8px); 74 transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:60; } 75 /* jambatan tak-nampak supaya hover tak putus antara butang & menu */ 76 .nav-daftar-menu::before { content:""; position:absolute; left:0; right:0; top:-.7rem; height:.7rem; } 77 .nav-daftar-wrap:hover .nav-daftar-menu, 78 .nav-daftar-wrap:focus-within .nav-daftar-menu { opacity:1; visibility:visible; transform:none; } 79 80 .nav-daftar-menu a { display:flex; align-items:center; gap:.75rem; padding:.7rem .8rem; border-radius:10px; 81 color:var(--ink); transition:background .15s; } 82 .nav-daftar-menu a:hover { background:var(--paper-2); } 83 .nav-daftar-menu .di { width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; 84 background:var(--brass-t); color:var(--brass-d); transition:background .18s, color .18s; } 85 .nav-daftar-menu a:hover .di { background:var(--ink); color:var(--gold); } 86 .nav-daftar-menu .di svg { width:19px; height:19px; } 87 .nav-daftar-menu b { display:block; font-weight:700; font-size:.9rem; line-height:1.2; } 88 .nav-daftar-menu small { display:block; font-size:.76rem; color:var(--slate-2); margin-top:.12rem; } 89 .nav-login { display:inline-flex; align-items:center; gap:.5rem; background:var(--ink); color:var(--gold); 90 font-weight:600; font-size:.92rem; padding:.62rem 1.35rem; border-radius:8px; border:1px solid var(--ink); 91 transition:background .2s, color .2s; } 92 .nav-login:hover { background:var(--ink-2); color:#fff; } 93 .nav-login svg { width:17px; height:17px; } 94 95 /* ââ HERO SLIDER ââ */ 96 .hero { position:relative; isolation:isolate; overflow:hidden; 97 min-height:clamp(540px,82vh,780px); } 98 .hero-slides { position:absolute; inset:0; } 99 .slide { position:absolute; inset:0;
99 opacity:0; pointer-events:none; 100 transition:opacity .8s ease; display:grid; place-items:center; 101 background-position:center; background-size:cover; background-repeat:no-repeat; } 102 .slide.is-active { opacity:1; pointer-events:auto; z-index:1; } 103 /* Lapisan gelap supaya teks putih jelas atas gambar */ 104 .slide::before { content:""; position:absolute; inset:0; z-index:1; 105 background:linear-gradient(180deg, rgba(8,14,26,.42) 0%, rgba(8,14,26,.3) 45%, rgba(8,14,26,.5) 100%); } 106 107 .slide-inner { position:relative; z-index:2; text-align:center; color:#fff; 108 max-width:920px; padding:clamp(4.5rem,10vh,6rem) clamp(3.2rem,7vw,4.5rem) clamp(3.5rem,7vh,5rem); } 109 .slide-pill { display:inline-block; background:rgba(13,23,42,.45); border:1px solid rgba(255,255,255,.28); 110 color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; 111 padding:.5rem 1.3rem; border-radius:999px; margin-bottom:1.5rem; backdrop-filter:blur(4px); } 112 .slide-inner h1 { font-weight:800; font-size:clamp(2.4rem,6vw,4.5rem); line-height:1.06; 113 letter-spacing:-.02em; margin:0 0 1.2rem; color:#fff; text-shadow:0 2px 26px rgba(0,0,0,.4); } 114 .slide-inner h1 em { font-style:normal; color:var(--gold); } 115 /* Tajuk hero yg menaip berputar â letak pd baris sendiri supaya baris atas stabil */ 116 .slide-inner h1 .rotate-type { display:block; white-space:nowrap; min-height:1.05em; } 117 .rotate-type .caret { display:inline-block; width:3px; height:1em; margin-left:.05em; 118 background:var(--gold); vertical-align:-.1em; border-radius:1px; 119 animation:caretBlink 1s steps(1,end) infinite; } 120 .slide-inner p { font-size:clamp(1rem,1.6vw,1.28rem); line-height:1.7; color:rgba(255,255,255,.9); 121 max-width:60ch; margin:0 auto 1.9rem; text-shadow:0 1px 14px rgba(0,0,0,.45); } 122 .slide-btn { display:inline-flex; align-items:center; gap:.6rem; background:var(--brass); color:var(--ink); 123 font-weight:700; font-size:1.02rem; padding:.95rem 2rem; border-radius:10px; 124 box-shadow:0 14px 30px -12px rgba(198,161,91,.7); transition:transform .15s, background .2s; } 125 .slide-btn:hover { background:var(--gold); transform:translateY(-2px); } 126 .slide-btn svg { width:18px; height:18px; } 127 128 /* Anak panah kiri/kanan */ 129 .hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; 130 width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer; 131 background:rgba(18,28,48,.35); border:1px solid rgba(255,255,255,.5); color:#fff; 132 transition:background .2s, transform .15s; } 133 .hero-arrow:hover { background:rgba(18,28,48,.62); } 134 .hero-arrow:active { transform:translateY(-50%) scale(.94); } 135 .hero-arrow.prev { left:clamp(.5rem,2vw,1.8rem); } 136 .hero-arrow.next { right:clamp(.5rem,2vw,1.8rem); } 137 .hero-arrow svg { width:24px; height:24px; } 138 139 /* Titik penunjuk */ 140 .hero-dots { position:absolute; left:50%; bottom:clamp(1.1rem,3.5vh,2.1rem); transform:translateX(-50%); 141 z-index:5; display:flex; align-items:center; gap:.55rem; } 142 .hero-dots button { width:10px; height:10px; padding:0; border-radius:999px; border:0; cursor:pointer; 143 background:rgba(255,255,255,.5); transition:width .28s ease, background .28s ease; } 144 .hero-dots button:hover { background:rgba(255,255,255,.8); } 145 .hero-dots button.is-active { width:34px; background:var(--brass); } 146 147 /* ââ Kad statistik terapung ââ */ 148 /* Latar krim (sama dgn band di bawah) supaya tiada "jahitan" warna; 149 kad diangkat naik menindih hero guna margin negatif pd kad sendiri. */ 150 .stats { position:relative; z-index:10; display:flow-root; background:var(--paper); 151 padding-bottom:clamp(1rem,2vw,1.5rem); } 152 /* Seksyen pertama selepas kad statistik â rapatkan jurang di atas */ 153 .stats + .section { padding-top:clamp(1.2rem,2.5vw,2rem); } 154 .stats .card { position:relative; overflow:hidden; 155 background:linear-gradient(180deg,#fff 0%, #FCFBF8 100%); 156 border:1px solid var(--line); border-radius:24px; 157 box-shadow:0 34px 64px -32px rgba(15,29,46,.42), 0 6px 18px -12px rgba(15,29,46,.16); 158 margin-top:clamp(-92px,-6vw,-64px); 159 display:grid; grid-template-columns:repeat(4,1fr); 160 padding:clamp(2.1rem,3.2vw,2.8rem) clamp(.9rem,2vw,1.5rem); } 161 /* Jalur loyang halus di bibir atas kad + cahaya lembut */ 162 .stats .card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:2; 163 background:linear-gradient(90deg, transparent, var(--brass) 22%, var(--gold) 50%, var(--brass) 78%, transparent); } 164 .stats .card::after { content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); 165 width:60%; height:120%; pointer-events:none; 166 background:radial-gradient(60% 60% at 50% 0%, rgba(198,161,91,.10), transparent 70%); } 167 .stat { position:relative; display:flex; flex-direction:column; align-items:center; gap:.45rem; 168 text-align:center; padding:.3rem clamp(.7rem,2vw,1.7rem); transition:transform .25s ease; } 169 .stat:hover { transform:translateY(-3px); } 170 /* Pembahagi menegak nipis (kecerunan) antara statistik */ 171 .stat + .stat::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); 172 width:1px; height:74%; background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent); } 173 .stat .num { display:inline-flex; align-items:baseline; font-weight:800; 174 font-size:clamp(2.1rem,4vw,3.1rem); line-height:1; letter-spacing:-.025em; color:var(--ink); 175 background:linear-gradient(155deg,var(--ink) 32%,var(--ink-3)); 176 -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } 177 .stat .num i { font-style:normal;
177 color:var(--brass-d); 178 -webkit-text-fill-color:var(--brass-d); margin-left:2px; } 179 .stat .accent { width:26px; height:3px; border-radius:3px; margin:.55rem 0 .15rem; 180 background:linear-gradient(90deg,var(--brass),var(--gold)); transition:width .3s ease; } 181 .stat:hover .accent { width:48px; } 182 .stat .lbl { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; 183 color:var(--slate-2); line-height:1.4; max-width:17ch; } 184 185 186 /* ââ Seksyen umum ââ */ 187 .section { padding:clamp(2.2rem,4.5vw,3.4rem) 0; } 188 .section.band { background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } 189 .head { max-width:64ch; margin:0 auto clamp(1.5rem,3vw,2.2rem); text-align:center; } 190 .head h2 { font-weight:800; font-size:clamp(1.7rem,3.2vw,2.5rem); letter-spacing:-.015em; 191 margin:.7rem 0 .6rem; line-height:1.12; } 192 .head p { color:var(--slate); font-size:1.06rem; margin:0; } 193 .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; } 194 195 /* Subtajuk di bawah tajuk (cth. seksyen Sembang Guaman) */ 196 .head-sub { display:inline-block; margin-top:.35rem; font-size:.74rem; font-weight:700; 197 letter-spacing:.22em; text-transform:uppercase; color:var(--slate-2); } 198 /* Bekas video YouTube â bingkai putih + nisbah 16:9 responsif */ 199 .video-shell { max-width:940px; margin:clamp(1.4rem,3vw,2.3rem) auto 0; background:#fff; 200 border:1px solid var(--line); border-radius:20px; padding:clamp(.75rem,1.8vw,1.25rem); 201 box-shadow:var(--shadow); } 202 .video-shell .video { position:relative; width:100%; aspect-ratio:16/9; 203 border-radius:12px; overflow:hidden; background:#0B1725; } 204 .video-shell .video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } 205 206 /* Latar foto neraca emas utk seksyen Sembang Guaman */ 207 .sembang { position:relative; overflow:hidden; } 208 .sembang.band { background:var(--paper-2) url('https://www.iguaman.jbg.gov.my/images/iris/golden-justice-scale.jpg') -300px center/115% no-repeat; } 209 .sembang > .wrap { position:relative; z-index:2; } 210 /* Lapisan nipis (nada krim + vignette lembut) supaya teks jelas & sepadan jenama */ 211 .sembang::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; 212 background: 213 radial-gradient(130% 100% at 50% 38%, transparent 42%, rgba(15,29,46,.08) 100%), 214 linear-gradient(180deg, rgba(244,239,229,.34), rgba(244,239,229,.48)); } 215 216 /* Lencana podcast + lead */ 217 .sembang-badge { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; 218 background:var(--brass-t); color:var(--brass-d); font-size:.72rem; font-weight:700; 219 letter-spacing:.16em; text-transform:uppercase; padding:.5rem 1.05rem; border-radius:999px; 220 border:1px solid rgba(198,161,91,.32); } 221 .sembang-badge svg { width:15px; height:15px; } 222 .sembang-lead { max-width:56ch; margin:1rem auto 0; color:var(--slate); font-size:1.04rem; line-height:1.7; } 223 224 /* Kad video dipertingkat â halo loyang + bayang berlapis */ 225 .sembang .video-shell { position:relative; overflow:visible; 226 box-shadow:0 44px 84px -42px rgba(15,29,46,.5), 0 10px 26px -16px rgba(15,29,46,.22); } 227 .sembang .video-shell::after { content:""; position:absolute; inset:-26px; z-index:-1; border-radius:34px; 228 background:radial-gradient(56% 56% at 50% 46%, rgba(198,161,91,.20), transparent 72%); } 229 230 /* Kad perkhidmatan awam (aksi) */ 231 .act { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.7rem 1.6rem; 232 display:flex; flex-direction:column; height:100%; transition:transform .18s, box-shadow .18s, border-color .18s; } 233 .act:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(198,161,91,.5); } 234 .act .ic { width:50px; height:50px; border-radius:13px; display:grid; place-items:center; 235 background:var(--brass-t); color:var(--brass-d); margin-bottom:1.1rem; } 236 .act .ic svg { width:24px; height:24px; } 237 .act h3 { font-weight:700; font-size:1.18rem; margin:0 0 .4rem; } 238 .act p { color:var(--slate); font-size:.96rem; margin:0 0 1.2rem; flex:1; } 239 .act .go { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.94rem; 240 color:var(--ink); align-self:flex-start; padding-bottom:2px; border-bottom:2px solid var(--brass); 241 transition:gap .18s, color .18s; } 242 .act:hover .go { gap:.75rem; color:var(--brass-d); } 243 .act .go svg { width:15px; height:15px; } 244 245 /* Panel "satu platform" â tiga sistem dlm satu bekas (cerminkan tajuk). */ 246 .platform { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); } 247 .platform-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; 248 background:linear-gradient(120deg,var(--ink),var(--ink-3)); color:#F6F2E9; 249 padding:.85rem clamp(1.2rem,3vw,1.8rem); border-bottom:2px solid var(--brass); } 250 .platform-bar .pb-mark { display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.06rem; letter-spacing:-.01em; } 251 .platform-bar .pb-mark svg { width:20px; height:20px; color:var(--gold); } 252 .platform-bar .pb-note { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; } 253 .platform-grid { display:grid; grid-template-columns:repeat(3,1fr); } 254 .psys { position:relative; display:flex; flex-direction:column; 255 padding:clamp(1.5rem,3vw,2.1rem) clamp(1.3rem,2.5vw,1.8rem); 256 border-left:1px solid var(--line); transition:background .2s; } 257 .psys:first-child { border-left:0; } 258 .psys::before { content:""; position:absolute; top:0; left:0; height:3px; width:0; background:var(--brass); transition:width .28s ease; } 259 .psys:hover { background:var(--paper); } 260 .psys:hover::before { width:100%; } 261 .psys .ic { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; 262 background:linear-gradient(140deg,var(--ink),var(--ink-3)); color:var(--gold); 263 box-shadow:0 10px 22px -12px rgba(15,29,46,.7); margin-bottom:1.05rem; } 264 .psys .ic svg { width:25px; height:25px; } 265 .psys .code { font-weight:800; font-size:.66rem; letter-spacing:.16em; color:var(--brass-d); } 266 .psys h3 { font-weight:700; font-size:1.2rem; margin:.3rem 0 .5rem; } 267 .psys p { color:var(--slate); font-size:.96rem; margin:0 0 1.15rem; } 268 .psys .go { display:inline-flex; align-self:flex-start; align-items:center; gap:.45rem; margin-top:auto; 269 font-weight:700; font-size:.94rem; color:var(--ink); padding-bottom:2px; 270 border-bottom:2px solid var(--brass); transition:gap .18s, color .18s; } 271 .psys .go svg { width:15px; height:15px; } 272 .psys:hover .go { gap:.72rem; color:var(--brass-d); } 273 274 /* ââ Footer ââ */ 275 .foot { background:#0B1725; color:rgba(237,233,224,.68); } 276 .foot-accent { height:3px; background:linear-gradient(90deg, transparent, var(--brass) 22%, var(--gold) 50%, var(--brass) 78%, transparent); } 277 .foot-top { display:grid; grid-template-columns:1.9fr 1fr 1fr; gap:2rem 2.2rem; 278 padding:clamp(2.4rem,4vw,3.2rem) 0 2.2rem; } 279 .foot .fb-partners { margin-top:1.5rem; } 280 .foot .fb-head { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; } 281 .foot .fb-head img { height:56px; width:auto; } /* logo tanpa kotak putih */ 282 .foot .fb b { color:#F6F2E9; font-size:1.06rem; font-weight:700; display:block; line-height:1.25; } 283 .foot .fb .min { font-size:.78rem; color:var(--gold); font-weight:600; } 284 .foot .fb p { font-size:.88rem; color:rgba(237,233,224,.58); margin:0; line-height:1.65; max-width:42ch; } 285 .foot h5 { color:#F6F2E9; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; margin:0 0 1.05rem; font-weight:700; } 286 .foot .fcol a { display:block; width:fit-content; color:rgba(237,233,224,.7); font-size:.92rem; margin-bottom:.62rem; 287 transition:color .18s, transform .18s; } 288 .foot .fcol a:hover { color:var(--gold); transform:translateX(3px); } 289 .foot .partners { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; } 290 /* Logo rakan kongsi direka utk latar terang â beri "plak" krim halus supaya 291 kelihatan jelas atas footer gelap, tanpa kotak putih keras. */ 292 .foot .partners img { height:38px; width:auto; background:var(--paper); border-radius:9px; 293 padding:8px 11px; box-shadow:0 2px 10px rgba(0,0,0,.28); transition:transform .2s, box-shadow .2s; } 294 .foot .partners img:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.35); } 295 .foot-bar { border-top:1px solid rgba(255,255,255,.09); padding:1.2rem 0 1.5rem; 296 display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; 297 font-size:.82rem; color:rgba(237,233,224,.5); } 298 .foot-bar .tag { display:inline-flex; align-items:center; gap:.5rem; color:rgba(237,233,224,.42); } 299 .foot-bar .tag svg { width:15px; height:15px;
299 color:var(--brass); } 300 301 /* ââ Gerak & responsif ââ */ 302 @keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } 303 .rise { animation:rise .7s cubic-bezier(.2,.7,.2,1) both; } 304 .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s} 305 :focus-visible { outline:3px solid var(--brass); outline-offset:3px; border-radius:4px; } 306 307 /* ââ Reveal semasa skrol ââ (hanya jika JS aktif supaya kandungan tak hilang) */ 308 .js .reveal { opacity:0; transform:translateY(34px); 309 transition:opacity 1.3s cubic-bezier(.2,.7,.2,1), transform 1.3s cubic-bezier(.2,.7,.2,1); 310 transition-delay:var(--rd,0s); will-change:opacity, transform; } 311 .js .reveal.is-visible { opacity:1; transform:none; } 312 313 /* Kesan menaip utk tajuk seksyen */ 314 .typing .caret { display:inline-block; width:3px; height:1.05em; margin-left:.06em; 315 background:var(--brass); vertical-align:-.12em; border-radius:1px; 316 animation:caretBlink 1s steps(1,end) infinite; } 317 .typing.done .caret { animation:none; opacity:0; } 318 @keyframes caretBlink { 50% { opacity:0; } } 319 320 @media (prefers-reduced-motion:reduce){ 321 .rise{animation:none} * { scroll-behavior:auto; } 322 } 323 324 @media (max-width:900px){ 325 .foot-top { grid-template-columns:1fr 1fr; } 326 } 327 /* Sembunyikan menu tengah bila ruang tak cukup */ 328 @media (max-width:1040px){ .nav-links { display:none; } } 329 @media (max-width:520px){ .nav-daftar-wrap { display:none; } } 330 331 @media (max-width:720px){ 332 .grid3 { grid-template-columns:1fr; } 333 .platform-grid { grid-template-columns:1fr; } 334 .psys { border-left:0; border-top:1px solid var(--line); } 335 .psys:first-child { border-top:0; } 336 .brand .bt span { display:none; } 337 .foot-top { grid-template-columns:1fr; gap:1.6rem; } 338 .hero { min-height:clamp(460px,74vh,620px); } 339 .slide-inner { padding:3.5rem 3rem 4rem; } 340 .hero-arrow { width:42px; height:42px; } 341 .hero-arrow svg { width:20px; height:20px; } 342 .stats .card { grid-template-columns:repeat(2,1fr); gap:1.9rem 0; padding:1.9rem 1rem; } 343 .stat::before { display:none !important; } 344 } 345 </style> 346
346<script>document.documentElement.classList.add('js');</script>
346 347</head> 348<body> 349 350 351 <header class="nav" id="atas"> 352 <div class="wrap"> 353 <a class="brand" href="https://www.iguaman.jbg.gov.my"> 354 <img src="https://www.iguaman.jbg.gov.my/images/logo/jata_negara.png" alt="Jata Negara"> 355 <img src="https://www.iguaman.jbg.gov.my/images/logo/jbg.png" alt="JBG" style="height:38px;"> 356 <span class="bt"><b>Sistem iGuaman</b><span>Jabatan Bantuan Guaman</span></span> 357 </a> 358 <nav class="nav-links"> 359 <a href="#atas">Utama</a> 360 <a href="#pengenalan">Pengenalan</a> 361 <a href="https://www.iguaman.jbg.gov.my/soalan-lazim">Soalan Lazim</a> 362 <a href="https://www.iguaman.jbg.gov.my/skn/hubungi">Hubungi Kami</a> 363 </nav> 364 <div class="nav-right"> 365 <div class="nav-daftar-wrap"> 366 <button class="nav-daftar" type="button" aria-haspopup="true" aria-expanded="false"> 367 Daftar 368 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg> 369 </button> 370 <div class="nav-daftar-menu" role="menu"> 371 <a role="menuitem" href="https://www.iguaman.jbg.gov.my/skn/daftar"> 372 <span class="di"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg></span> 373 <span><b>Orang Awam</b><small>Mohon khidmat nasihat guaman</small></span> 374 </a> 375 <a role="menuitem" href="https://www.iguaman.jbg.gov.my/spp/daftar"> 376 <span class="di"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg></span> 377 <span><b>Peguam Panel</b><small>Sertai panel peguam JBG</small></span> 378 </a> 379 </div> 380 </div> 381 <a class="nav-login" href="https://www.iguaman.jbg.gov.my/login"> 382 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg> 383 Log Masuk 384 </a> 385 </div> 386 </div> 387 </header> 388 389 390 <section class="hero" id="hero-slider"> 391 <div class="hero-slides"> 392 393 394 <div class="slide is-active" style="background-image:url('https://www.iguaman.jbg.gov.my/images/banner/hero1.png'); background-position:center 68%;"> 395 <div class="slide-inner"> 396 <span class="slide-pill">Sistem iGuaman Jabatan Bantuan Guaman</span> 397 <h1>Keadilan dalam jangkauan <em class="rotate-type" data-words="setiap rakyat.|semua warga.|setiap insan."></em></h1> 398 <p>Satu platform bersepadu untuk Transformasi Masa Depan Perundangan. 399 Pendigitalan sepenuhnya, lebih telus, dan mudah diakses.</p> 400 </div> 401 </div> 402 403 404 <div class="slide" style="background-image:url('https://www.iguaman.jbg.gov.my/images/banner/hero2.png');"> 405 <div class="slide-inner"> 406 <h1>Khidmat Nasihat Guaman</h1> 407 <p>Tidak pasti hak anda? Tempah sesi bimbingan bersama pegawai JBG secara 408 atas talian dari keselesaan rumah anda.</p> 409 <a class="slide-btn" href="https://www.iguaman.jbg.gov.my/skn/daftar"> 410 Mohon Khidmat Nasihat 411 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><polyline points="9 15 11 17 15 13"/></svg> 412 </a> 413 </div> 414 </div> 415 416 417 <div class="slide" style="background-image:url('https://www.iguaman.jbg.gov.my/images/banner/hero3.png');"> 418 <div class="slide-inner"> 419 <h1>Sertai Barisan<br><em>Peguam Panel JBG</em></h1> 420 <p>Pengurusan lantikan kes yang lebih sistematik dan telus untuk pengamal 421 undang-undang.</p> 422 <a class="slide-btn" href="https://www.iguaman.jbg.gov.my/spp/daftar"> 423 Daftar Peguam Panel 424 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/>
424<line x1="22" y1="11" x2="16" y2="11"/></svg> 425 </a> 426 </div> 427 </div> 428 429 </div> 430 431 <button class="hero-arrow prev" type="button" aria-label="Slaid sebelumnya"> 432 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg> 433 </button> 434 <button class="hero-arrow next" type="button" aria-label="Slaid seterusnya"> 435 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg> 436 </button> 437 438 <div class="hero-dots"> 439 <button type="button" class="is-active" aria-label="Slaid 1"></button> 440 <button type="button" aria-label="Slaid 2"></button> 441 <button type="button" aria-label="Slaid 3"></button> 442 </div> 443 </section> 444 445 446 <section class="stats"> 447 <div class="wrap"> 448 <div class="card reveal"> 449 <div class="stat"> 450 <div class="num"><span class="count" data-target="10013">10,013</span><i>+</i></div> 451 <span class="accent"></span> 452 <div class="lbl">Kes Diselesaikan (2026)</div> 453 </div> 454 <div class="stat"> 455 <div class="num"><span class="count" data-target="737">737</span><i>+</i></div> 456 <span class="accent"></span> 457 <div class="lbl">Peguam Panel Aktif</div> 458 </div> 459 <div class="stat"> 460 <div class="num"><span class="count" data-target="562">562</span><i>+</i></div> 461 <span class="accent"></span> 462 <div class="lbl">Permohonan Khidmat Nasihat</div> 463 </div> 464 <div class="stat"> 465 <div class="num"><span class="count" data-target="98">98</span><i>%</i></div> 466 <span class="accent"></span> 467 <div class="lbl">Kadar Kepuasan Pelanggan</div> 468 </div> 469 </div> 470 </div> 471 </section> 472 473 474 <section class="section reveal" id="pengenalan"> 475 <div class="wrap"> 476 <div class="head"> 477 <span class="eyebrow">Ekosistem iGuaman</span> 478 <h2 class="typing">Perkhidmatan</h2> 479 <p>Sistem yang menghubungkan Pemohon, Peguam, dan Pegawai JBG dalam satu pangkalan data yang seragam dan telus.</p> 480 </div> 481 <div class="platform"> 482 <div class="platform-bar"> 483 <span class="pb-mark"> 484 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><path d="M7 21h10"/><path d="M4 6h16"/><path d="M4 6l-2 5a3 3 0 0 0 6 0z"/><path d="M20 6l-2 5a3 3 0 0 0 6 0z"/></svg> 485 iGuaman 486 </span> 487 <span class="pb-note">Platform Bersepadu JBG</span> 488 </div> 489 <div class="platform-grid"> 490 <div class="psys"> 491 <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg></span> 492 <span class="code">SKN</span> 493 <h3>Khidmat Nasihat</h3> 494 <p>Tempah slot janji temu secara atas talian terus dari sistem tanpa perlu ke kaunter.</p> 495 <a class="go" href="https://www.iguaman.jbg.gov.my/skn/daftar">Mohon Khidmat Nasihat 496 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a> 497 </div> 498 <div class="psys"> 499 <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m14.5 12.5-8 8a2.119 2.119 0 1 1-3-3l8-8"/><path d="m16 16 6-6"/><path d="m8 8 6-6"/><path d="m9 7 8 8"/><path d="m21 11-8-8"/></svg></span> 500 <span class="code">SPP</span> 501 <h3>Peguam Panel</h3> 502 <p>Terima pengiklanan kes baharu, pengagihan kes, dan kemas kini laporan perbicaraan secara terus.</p> 503 <a class="go" href="https://www.iguaman.jbg.gov.my/spp/daftar">Daftar Peguam Panel 504 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a> 505 </div> 506 <div class="psys">
507 <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></span> 508 <span class="code">SRK</span> 509 <h3>Rekod Kes</h3> 510 <p>Pengurusan rekod kes Jabatan Bantuan Guaman.</p> 511 </div> 512 </div> 513 </div> 514 </div> 515 </section> 516 517 518 <section class="section band reveal sembang" id="soalan-lazim"> 519 <div class="wrap"> 520 <div class="head"> 521 <span class="sembang-badge"> 522 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg> 523 Siri Podcast Rasmi JBG 524 </span> 525 <h2 class="typing">Sembang Guaman</h2> 526 <p class="sembang-lead">Perbualan santai seputar hak anda, bantuan guaman dan isu perundangan semasa â bersama pegawai Jabatan Bantuan Guaman.</p> 527 </div> 528 <div class="video-shell"> 529 <div class="video"> 530 <iframe src="https://www.youtube-nocookie.com/embed/Oo_88BFrqeY" 531 title="Sembang Guaman â Jabatan Bantuan Guaman" loading="lazy" 532 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 533 referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> 534 </div> 535 </div> 536 </div> 537 </section> 538 539 540 <footer class="foot"> 541 <div class="foot-accent"></div> 542 <div class="wrap"> 543 <div class="foot-top reveal"> 544 <div class="fb"> 545 <div class="fb-head"> 546 <img src="https://www.iguaman.jbg.gov.my/images/logo/jata_negara.png" alt="Jata Negara"> 547 <div> 548 <b>Jabatan Bantuan Guaman Malaysia</b> 549 <span class="min">Jabatan Perdana Menteri · Hal Ehwal Undang-Undang & Reformasi Institusi</span> 550 </div> 551 </div> 552 553 <div class="fb-partners"> 554 555 <div class="partners"> 556 <img src="https://www.iguaman.jbg.gov.my/images/logo/malaysia_madani.png" alt="Malaysia Madani"> 557 <img src="https://www.iguaman.jbg.gov.my/images/logo/justice_on_wheels.png" alt="Justice on Wheels"> 558 </div> 559 </div> 560 </div> 561 <div class="fcol"> 562 <h5>Perkhidmatan</h5> 563 <a href="https://www.iguaman.jbg.gov.my/login">Log Masuk Sistem</a> 564 <a href="https://www.iguaman.jbg.gov.my/skn/daftar">Daftar Khidmat Nasihat</a> 565 <a href="https://www.iguaman.jbg.gov.my/spp/daftar">Daftar Peguam Panel</a> 566 <a href="https://www.iguaman.jbg.gov.my/skn/hubungi">Hubungi Kami</a> 567 </div> 568 <div class="fcol"> 569 <h5>Sokongan</h5> 570 <a href="https://iguamanhelpdesk.unijaya.com/helpdesk/index" target="_blank" rel="noopener">Meja Bantuan iGuaman</a> 571 <a href="https://www.jbg.gov.my" target="_blank" rel="noopener">Portal Rasmi JBG</a> 572 </div> 573 </div> 574 <div class="foot-bar"> 575 <span>© 2026 Jabatan Bantuan Guaman Malaysia. Hak cipta terpelihara.</span> 576 577 </div> 578 </div> 579 </footer> 580 581 582
582<script> 583 (function () { 584 var hero = document.getElementById('hero-slider'); 585 if (!hero) return; 586 var slides = Array.prototype.slice.call(hero.querySelectorAll('.slide')); 587 var dots = Array.prototype.slice.call(hero.querySelectorAll('.hero-dots button')); 588 var i = 0, DELAY = 6000; 589 var advTimer = null, rotStop = null, pausedAdvance = false, wantAdvance = false; 590 591 // Bersih pemasa/rotator slaid semasa (dipanggil hanya bila slaid bertukar). 592 function clearSlide() { 593 if (advTimer) { clearTimeout(advTimer); advTimer = null; } 594 if (rotStop) { rotStop(); rotStop = null; } 595 wantAdvance = false; 596 } 597 598 // Maju ke slaid seterusnya â hormati "pause" hover tanpa mengganggu taipan. 599 function maybeAdvance() { 600 if (pausedAdvance) { wantAdvance = true; return; } 601 next(); 602 } 603 604 function startSlide() { 605 clearSlide(); 606 var rt = slides[i].querySelector('.rotate-type'); 607 if (rt) { 608 rotStop = runRotator(rt, maybeAdvance); // taip semua frasa sekali, kemudian maybeAdvance 609 } else { 610 advTimer = setTimeout(maybeAdvance, DELAY); 611 } 612 } 613 614 function show(n) { 615 i = (n + slides.length) % slides.length; 616 slides.forEach(function (s, x) { s.classList.toggle('is-active', x === i); }); 617 dots.forEach(function (d, x) { d.classList.toggle('is-active', x === i); }); 618 startSlide(); 619 } 620 function next() { show(i + 1); } 621 function prev() { show(i - 1); } 622 623 hero.querySelector('.next').addEventListener('click', function () { next(); }); 624 hero.querySelector('.prev').addEventListener('click', function () { prev(); }); 625 dots.forEach(function (d, x) { d.addEventListener('click', function () { show(x); }); }); 626 // Hover hanya jeda PERALIHAN slaid â taipan terus berjalan & tidak dimulakan semula. 627 hero.addEventListener('mouseenter', function () { pausedAdvance = true; }); 628 hero.addEventListener('mouseleave', function () { 629 pausedAdvance = false; 630 if (wantAdvance) { wantAdvance = false; next(); } 631 }); 632 633 // Menaip melalui semua frasa sekali, kemudian panggil done(). Pulangkan fungsi stop(). 634 // Tidak terkesan oleh hover; hanya dihentikan bila slaid bertukar. 635 function runRotator(el, done) { 636 var words = (el.getAttribute('data-words') || '').split('|').filter(
636Boolean); 637 var TYPE = 55, DEL = 28, HOLD = 1050, HOLD_LAST = 850, GAP = 220; 638 var tt = el.querySelector('.tt'), caret = el.querySelector('.caret'); 639 if (!tt) { 640 el.textContent = ''; 641 tt = document.createElement('span'); tt.className = 'tt'; 642 caret = document.createElement('span'); caret.className = 'caret'; caret.setAttribute('aria-hidden', 'true'); 643 el.appendChild(tt); el.appendChild(caret); 644 } 645 if (!words.length) { done(); return function () {}; } 646 el.setAttribute('aria-label', words.join(', ')); 647 648 var wi = 0, ci = 0, deleting = false, t = null, stopped = false; 649 function stop() { stopped = true; if (t) { clearTimeout(t); t = null; } } 650 function step() { 651 if (stopped) return; 652 var word = words[wi]; 653 if (!deleting) { 654 ci++; tt.textContent = word.slice(0, ci); 655 if (ci >= word.length) { 656 if (wi === words.length - 1) { t = setTimeout(function () { if (!stopped) done(); }, HOLD_LAST); return; } 657 deleting = true; t = setTimeout(step, HOLD); 658 } else { t = setTimeout(step, TYPE); } 659 } else { 660 ci--; tt.textContent = word.slice(0, ci); 661 if (ci <= 0) { deleting = false; wi++; t = setTimeout(step, GAP); } 662 else { t = setTimeout(step, DEL); } 663 } 664 } 665 tt.textContent = ''; wi = 0; ci = 0; deleting = false; 666 step(); 667 return stop; 668 } 669 670 show(0); // mula pd slaid 1 â taip semua frasa dahulu, kemudian maju 671 })(); 672 673 /* Animasi kiraan naik utk statistik (cetus bila kad masuk pandangan) */ 674 (function () { 675 var counts = document.querySelectorAll('.stats .count'); 676 if (!counts.length) return; 677 678 function animate(el) { 679 if (el.dataset.done) return; // elak ulang 680 el.dataset.done = '1'; 681 var target = parseInt(el.getAttribute('data-target'), 10) || 0; 682 var dur = 2200, start = null; 683 el.textContent = '0'; 684 function step(ts) { 685 if (start === null) start = ts; 686 var p = Math.min((ts - start) / dur, 1); 687 // easeOutExpo â laju pd awal, perlahan ketara menghampiri nilai akhir 688 var eased = p >= 1 ? 1 : 1 - Math.pow(2, -10 * p); 689 el.textContent = Math.round(eased * target).toLocaleString('en-US'); 690 if (p < 1) requestAnimationFrame(step); 691 else el.textContent = target.toLocaleString('en-US'); 692 } 693 requestAnimationFrame(step); 694 } 695 696 function run() { counts.forEach(animate); } 697 698 if ('IntersectionObserver' in window) { 699 var io = new IntersectionObserver(function (entries) { 700 entries.forEach(function (e) { 701 if (e.isIntersecting) { animate(e.target); io.unobserve(e.target); } 702 }); 703 }, { threshold: 0.25 }); 704 counts.forEach(function (el) { io.observe(el); }); 705 // Jaring keselamatan: jika observer tak cetus (kad sudah dlm pandangan), mulakan selepas load. 706 window.addEventListener('load', function () { setTimeout(run, 400); }); 707 } else { 708 run(); 709 } 710 })(); 711 712 /* Reveal semasa skrol â pudar & naik bila elemen masuk pandangan */ 713 (function () { 714 var els = document.querySelectorAll('.reveal'); 715 if (!els.length) return; 716 if (!('IntersectionObserver' in window)) { 717 els.forEach(function (e) { e.classList.add('is-visible'); }); 718 return; 719 } 720 var io = new IntersectionObserver(function (entries) { 721 entries.forEach(function (e) { 722 if (e.isIntersecting) { e.target.classList.add('is-visible'); io.unobserve(e.target); } 723 }); 724 }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' }); 725 els.forEach(function (e) { io.observe(e); }); 726 })(); 727 728 /* Kesan menaip utk tajuk seksyen */ 729 (function () { 730 var typers = document.querySelectorAll('.typing'); 731 if (!typers.length) return; 732 733 typers.forEach(function (el) { 734 var full = el.textContent; 735 el.setAttribute('aria-label', full); // kekalkan teks penuh utk pembaca skrin/SEO 736 el.textContent = ''; 737 var tt = document.createElement('span'); tt.className = 'tt'; 738 var caret = document.createElement('span'); caret.className = 'caret'; caret.setAttribute('aria-hidden', 'true'); 739 el.appendChild(tt); el.appendChild(caret); 740 el._full = full; el._tt = tt; 741 }); 742 743 function type(el) { 744 if (el._typed) return; 745 el._typed = true; 746 var full = el._full, tt = el._tt, i = 0; 747 (function tick() { 748 tt.textContent = full.slice(0, i); 749 if (i < full.length) { i++; setTimeout(tick, 72); } 750 else { el.classList.add('done'); } 751 })(); 752 } 753 754 if ('IntersectionObserver' in window) { 755 var io = new IntersectionObserver(function (entries) {
756 entries.forEach(function (e) { 757 if (e.isIntersecting) { type(e.target); io.unobserve(e.target); } 758 }); 759 }, { threshold: 0.8 }); 760 typers.forEach(function (el) { io.observe(el); }); 761 } else { 762 typers.forEach(type); 763 } 764 })(); 765 766 /* Skrol lancar utk pautan nav dalaman (Utama = ke atas sekali) */ 767 (function () { 768 var NAV_OFFSET = 78; // tinggi nav melekat 769 document.querySelectorAll('.nav-links a[href^="#"]').forEach(function (link) { 770 link.addEventListener('click', function (e) { 771 var id = link.getAttribute('href').slice(1); 772 var target = document.getElementById(id); 773 e.preventDefault(); 774 if (id === 'atas' || !target) { 775 window.scrollTo({ top: 0, behavior: 'smooth' }); 776 } else { 777 var y = target.getBoundingClientRect().top + window.pageYOffset - NAV_OFFSET; 778 window.scrollTo({ top: y, behavior: 'smooth' }); 779 } 780 if (history.replaceState) history.replaceState(null, '', '#' + id); 781 }); 782 }); 783 })(); 784 785 </script>
785 786 787</body> 788</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.