PageSourceSearch

https://www.iguaman.jbg.gov.my/

html jbg.gov.my collected 2026-10-05 04:37:17 UTC 44,584 bytes, 788 lines download raw bytes

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 &middot; Hal Ehwal Undang-Undang &amp; 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>&copy; 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.