{"id":34475,"date":"2026-07-20T22:28:04","date_gmt":"2026-07-20T14:28:04","guid":{"rendered":"https:\/\/develop.marine.gov.my\/?page_id=34475"},"modified":"2026-09-05T14:34:48","modified_gmt":"2026-09-05T06:34:48","slug":"laman-utama","status":"publish","type":"page","link":"https:\/\/develop.marine.gov.my\/en\/","title":{"rendered":"Laman Utama"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"34475\" class=\"elementor elementor-34475\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0be6ded e-con-full e-flex e-con e-parent\" data-id=\"0be6ded\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b645e3 elementor-widget elementor-widget-html\" data-id=\"0b645e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\/* jlm-icon-badge-scale-fix *\/ .top-\\[164px\\]{ top: 10.25rem !important; }<\/style>\n<script>window.jlmCleanExcerpt=function(raw){var d=document.createElement(\"div\");d.innerHTML=raw||\"\";var t=(d.textContent||\"\").replace(\/\\s+\/g,\" \").trim();var m=150;if(t.length>m){t=t.slice(0,m).replace(\/\\s+\\S*$\/,\"\");return t+\"\u2026\";}return t;};<\/script>\n<!-- JLM 2nd Revamp: cleaned Elementor HTML widget -->\n<style id=\"jlm-revamp-compiled-css\">#jlm-revamp-home .fixed{position:fixed}#jlm-revamp-home .absolute{position:absolute}#jlm-revamp-home .relative{position:relative}#jlm-revamp-home .inset-0{inset:0}#jlm-revamp-home .-left-\\[21px\\]{left:-21px}#jlm-revamp-home .bottom-4{bottom:1rem}#jlm-revamp-home .left-1\\\/2{left:50%}#jlm-revamp-home .left-2{left:.5rem}#jlm-revamp-home .left-6{left:1.5rem}#jlm-revamp-home .right-2{right:.5rem}#jlm-revamp-home .top-1{top:.25rem}#jlm-revamp-home .top-1\\\/2{top:50%}#jlm-revamp-home .top-\\[164px\\]{top:164px}#jlm-revamp-home .z-10{z-index:10}#jlm-revamp-home .z-20{z-index:20}#jlm-revamp-home .z-30{z-index:30}#jlm-revamp-home .col-span-2{grid-column:span 2\/span 2}#jlm-revamp-home .mx-auto{margin-left:auto;margin-right:auto}#jlm-revamp-home .-mt-16{margin-top:-4rem}#jlm-revamp-home .mb-1{margin-bottom:.25rem}#jlm-revamp-home .mb-10{margin-bottom:2.5rem}#jlm-revamp-home .mb-12{margin-bottom:3rem}#jlm-revamp-home .mb-16{margin-bottom:4rem}#jlm-revamp-home .mb-2{margin-bottom:.5rem}#jlm-revamp-home .mb-3{margin-bottom:.75rem}#jlm-revamp-home .mb-4{margin-bottom:1rem}#jlm-revamp-home .mb-6{margin-bottom:1.5rem}#jlm-revamp-home .mb-8{margin-bottom:2rem}#jlm-revamp-home .ml-2{margin-left:.5rem}#jlm-revamp-home .mr-1{margin-right:.25rem}#jlm-revamp-home .mt-1{margin-top:.25rem}#jlm-revamp-home .mt-2{margin-top:.5rem}#jlm-revamp-home .mt-3{margin-top:.75rem}#jlm-revamp-home .mt-auto{margin-top:auto}#jlm-revamp-home .line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}#jlm-revamp-home .block{display:block}#jlm-revamp-home .inline-block{display:inline-block}#jlm-revamp-home .inline{display:inline}#jlm-revamp-home .flex{display:flex}#jlm-revamp-home .inline-flex{display:inline-flex}#jlm-revamp-home .grid{display:grid}#jlm-revamp-home .hidden{display:none}#jlm-revamp-home .h-1{height:.25rem}#jlm-revamp-home .h-14{height:3.5rem}#jlm-revamp-home .h-2{height:.5rem}#jlm-revamp-home .h-4{height:1rem}#jlm-revamp-home .h-48{height:12rem}#jlm-revamp-home .h-5{height:1.25rem}#jlm-revamp-home .h-8{height:2rem}#jlm-revamp-home .h-9{height:2.25rem}#jlm-revamp-home .h-\\[240px\\]{height:240px}#jlm-revamp-home .h-\\[650px\\]{height:650px}#jlm-revamp-home .h-full{height:100%}#jlm-revamp-home .w-1\\.5{width:.375rem}#jlm-revamp-home .w-14{width:3.5rem}#jlm-revamp-home .w-16{width:4rem}#jlm-revamp-home .w-2{width:.5rem}#jlm-revamp-home .w-20{width:5rem}#jlm-revamp-home .w-3{width:.75rem}#jlm-revamp-home .w-4{width:1rem}#jlm-revamp-home .w-5{width:1.25rem}#jlm-revamp-home .w-8{width:2rem}#jlm-revamp-home .w-9{width:2.25rem}#jlm-revamp-home .w-full{width:100%}#jlm-revamp-home .max-w-2xl{max-width:42rem}#jlm-revamp-home .max-w-\\[1400px\\]{max-width:1400px}#jlm-revamp-home .max-w-lg{max-width:32rem}#jlm-revamp-home .max-w-md{max-width:28rem}#jlm-revamp-home .flex-1{flex:1 1 0%}#jlm-revamp-home .flex-shrink{flex-shrink:1}#jlm-revamp-home .flex-shrink-0{flex-shrink:0}#jlm-revamp-home .flex-grow{flex-grow:1}#jlm-revamp-home .-translate-x-1\\\/2{--tw-translate-x:-50%}#jlm-revamp-home .-translate-x-1\\\/2,#jlm-revamp-home .-translate-x-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#jlm-revamp-home .-translate-x-2{--tw-translate-x:-0.5rem}#jlm-revamp-home .-translate-y-1\\\/2{--tw-translate-y:-50%}#jlm-revamp-home .-translate-y-1\\\/2,#jlm-revamp-home .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#jlm-revamp-home .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}#jlm-revamp-home .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}#jlm-revamp-home .flex-col{flex-direction:column}#jlm-revamp-home .flex-wrap{flex-wrap:wrap}#jlm-revamp-home .items-start{align-items:flex-start}#jlm-revamp-home .items-end{align-items:flex-end}#jlm-revamp-home .items-center{align-items:center}#jlm-revamp-home .justify-end{justify-content:flex-end}#jlm-revamp-home .justify-center{justify-content:center}#jlm-revamp-home .justify-between{justify-content:space-between}#jlm-revamp-home .gap-1{gap:.25rem}#jlm-revamp-home .gap-1\\.5{gap:.375rem}#jlm-revamp-home .gap-10{gap:2.5rem}#jlm-revamp-home .gap-2{gap:.5rem}#jlm-revamp-home .gap-2\\.5{gap:.625rem}#jlm-revamp-home .gap-3{gap:.75rem}#jlm-revamp-home .gap-4{gap:1rem}#jlm-revamp-home .gap-5{gap:1.25rem}#jlm-revamp-home .gap-6{gap:1.5rem}#jlm-revamp-home .gap-8{gap:2rem}#jlm-revamp-home :is(.space-y-4>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}#jlm-revamp-home :is(.space-y-6>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}#jlm-revamp-home .overflow-hidden{overflow:hidden}#jlm-revamp-home .rounded{border-radius:.25rem}#jlm-revamp-home .rounded-2xl{border-radius:1rem}#jlm-revamp-home .rounded-full{border-radius:9999px}#jlm-revamp-home .rounded-lg{border-radius:.5rem}#jlm-revamp-home .rounded-md{border-radius:.375rem}#jlm-revamp-home .rounded-xl{border-radius:.75rem}#jlm-revamp-home .rounded-b-2xl{border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}#jlm-revamp-home .rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}#jlm-revamp-home .border{border-width:1px}#jlm-revamp-home .border-2{border-width:2px}#jlm-revamp-home .border-b{border-bottom-width:1px}#jlm-revamp-home .border-l-2{border-left-width:2px}#jlm-revamp-home .border-t{border-top-width:1px}#jlm-revamp-home .border-t-4{border-top-width:4px}#jlm-revamp-home .border-blue-100{--tw-border-opacity:1;border-color:rgb(219 234 254\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-cyan-500{--tw-border-opacity:1;border-color:rgb(6 182 212\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-emerald-500{--tw-border-opacity:1;border-color:rgb(16 185 129\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-jlm-blue{--tw-border-opacity:1;border-color:rgb(15 76 129\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-jlm-navy\\\/20{border-color:rgba(10,37,64,.2)}#jlm-revamp-home .border-red-100{--tw-border-opacity:1;border-color:rgb(254 226 226\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-slate-50{--tw-border-opacity:1;border-color:rgb(248 250 252\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-white{--tw-border-opacity:1;border-color:rgb(255 255 255\/var(--tw-border-opacity,1))}#jlm-revamp-home .border-white\\\/10{border-color:hsla(0,0%,100%,.1)}#jlm-revamp-home .bg-amber-500\\\/10{background-color:rgba(245,158,11,.1)}#jlm-revamp-home .bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-cyan-500{--tw-bg-opacity:1;background-color:rgb(6 182 212\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-cyan-500\\\/10{background-color:rgba(6,182,212,.1)}#jlm-revamp-home .bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-emerald-500\\\/10{background-color:rgba(16,185,129,.1)}#jlm-revamp-home .bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-indigo-500\\\/10{background-color:rgba(99,102,241,.1)}#jlm-revamp-home .bg-jlm-blue{--tw-bg-opacity:1;background-color:rgb(15 76 129\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-jlm-gold{--tw-bg-opacity:1;background-color:rgb(251 191 36\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-jlm-navy{--tw-bg-opacity:1;background-color:rgb(10 37 64\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-violet-500\\\/10{background-color:rgba(139,92,246,.1)}#jlm-revamp-home .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255\/var(--tw-bg-opacity,1))}#jlm-revamp-home .bg-white\\\/10{background-color:hsla(0,0%,100%,.1)}#jlm-revamp-home .bg-white\\\/50{background-color:hsla(0,0%,100%,.5)}#jlm-revamp-home .bg-white\\\/90{background-color:hsla(0,0%,100%,.9)}#jlm-revamp-home .bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}#jlm-revamp-home .from-black\\\/60{--tw-gradient-from:rgba(0,0,0,.6) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}#jlm-revamp-home .to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}#jlm-revamp-home .object-cover{-o-object-fit:cover;object-fit:cover}#jlm-revamp-home .object-right{-o-object-position:right;object-position:right}#jlm-revamp-home .p-3{padding:.75rem}#jlm-revamp-home .p-4{padding:1rem}#jlm-revamp-home .p-5{padding:1.25rem}#jlm-revamp-home .p-6{padding:1.5rem}#jlm-revamp-home .p-8{padding:2rem}#jlm-revamp-home .px-2{padding-left:.5rem;padding-right:.5rem}#jlm-revamp-home .px-3{padding-left:.75rem;padding-right:.75rem}#jlm-revamp-home .px-4{padding-left:1rem;padding-right:1rem}#jlm-revamp-home .px-6{padding-left:1.5rem;padding-right:1.5rem}#jlm-revamp-home .py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}#jlm-revamp-home .py-1{padding-top:.25rem;padding-bottom:.25rem}#jlm-revamp-home .py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}#jlm-revamp-home .py-12{padding-top:3rem;padding-bottom:3rem}#jlm-revamp-home .py-2{padding-top:.5rem;padding-bottom:.5rem}#jlm-revamp-home .py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}#jlm-revamp-home .py-20{padding-top:5rem;padding-bottom:5rem}#jlm-revamp-home .pb-32{padding-bottom:8rem}#jlm-revamp-home .pb-4{padding-bottom:1rem}#jlm-revamp-home .pb-8{padding-bottom:2rem}#jlm-revamp-home .pl-4{padding-left:1rem}#jlm-revamp-home .pl-6{padding-left:1.5rem}#jlm-revamp-home .pt-10{padding-top:2.5rem}#jlm-revamp-home .pt-4{padding-top:1rem}#jlm-revamp-home .text-center{text-align:center}#jlm-revamp-home .text-2xl{font-size:1.5rem;line-height:2rem}#jlm-revamp-home .text-3xl{font-size:1.875rem;line-height:2.25rem}#jlm-revamp-home .text-4xl{font-size:2.25rem;line-height:2.5rem}#jlm-revamp-home .text-5xl{font-size:3rem;line-height:1}#jlm-revamp-home .text-\\[10px\\]{font-size:10px}#jlm-revamp-home .text-\\[11px\\]{font-size:11px}#jlm-revamp-home .text-\\[8px\\]{font-size:8px}#jlm-revamp-home .text-\\[9px\\]{font-size:9px}#jlm-revamp-home .text-base{font-size:1rem;line-height:1.5rem}#jlm-revamp-home .text-lg{font-size:1.125rem;line-height:1.75rem}#jlm-revamp-home .text-sm{font-size:.875rem;line-height:1.25rem}#jlm-revamp-home .text-xl{font-size:1.25rem;line-height:1.75rem}#jlm-revamp-home .text-xs{font-size:.75rem;line-height:1rem}#jlm-revamp-home .font-bold{font-weight:700}#jlm-revamp-home .font-light{font-weight:300}#jlm-revamp-home .font-semibold{font-weight:600}#jlm-revamp-home .uppercase{text-transform:uppercase}#jlm-revamp-home .italic{font-style:italic}#jlm-revamp-home .leading-relaxed{line-height:1.625}#jlm-revamp-home .leading-snug{line-height:1.375}#jlm-revamp-home .leading-tight{line-height:1.25}#jlm-revamp-home .tracking-tight{letter-spacing:-.025em}#jlm-revamp-home .tracking-wide{letter-spacing:.025em}#jlm-revamp-home .tracking-wider{letter-spacing:.05em}#jlm-revamp-home .tracking-widest{letter-spacing:.1em}#jlm-revamp-home .text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-cyan-400{--tw-text-opacity:1;color:rgb(34 211 238\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-jlm-blue{--tw-text-opacity:1;color:rgb(15 76 129\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-jlm-gold{--tw-text-opacity:1;color:rgb(251 191 36\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-jlm-navy{--tw-text-opacity:1;color:rgb(10 37 64\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-red-300{--tw-text-opacity:1;color:rgb(252 165 165\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-red-600{--tw-text-opacity:1;color:rgb(220 38 38\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-red-700{--tw-text-opacity:1;color:rgb(185 28 28\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-violet-400{--tw-text-opacity:1;color:rgb(167 139 250\/var(--tw-text-opacity,1))}#jlm-revamp-home .text-white{--tw-text-opacity:1;color:rgb(255 255 255\/var(--tw-text-opacity,1))}#jlm-revamp-home .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#jlm-revamp-home .opacity-0{opacity:0}#jlm-revamp-home .opacity-60{opacity:.6}#jlm-revamp-home .opacity-90{opacity:.9}#jlm-revamp-home .shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}#jlm-revamp-home .shadow-2xl,#jlm-revamp-home .shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#jlm-revamp-home .shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}#jlm-revamp-home .shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}#jlm-revamp-home .shadow-md,#jlm-revamp-home .shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#jlm-revamp-home .shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}#jlm-revamp-home .outline{outline-style:solid}#jlm-revamp-home .blur{--tw-blur:blur(8px)}#jlm-revamp-home .blur,#jlm-revamp-home .drop-shadow-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}#jlm-revamp-home .drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}#jlm-revamp-home .backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}#jlm-revamp-home .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#jlm-revamp-home .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#jlm-revamp-home .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#jlm-revamp-home .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#jlm-revamp-home .duration-300{transition-duration:.3s}#jlm-revamp-home .duration-500{transition-duration:.5s}#jlm-revamp-home .duration-700{transition-duration:.7s}#jlm-revamp-home .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}#jlm-revamp-home .hover\\:-translate-y-1:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#jlm-revamp-home .hover\\:border-jlm-blue:hover{--tw-border-opacity:1;border-color:rgb(15 76 129\/var(--tw-border-opacity,1))}#jlm-revamp-home .hover\\:bg-jlm-navy:hover{--tw-bg-opacity:1;background-color:rgb(10 37 64\/var(--tw-bg-opacity,1))}#jlm-revamp-home .hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255\/var(--tw-bg-opacity,1))}#jlm-revamp-home .hover\\:bg-yellow-400:hover{--tw-bg-opacity:1;background-color:rgb(250 204 21\/var(--tw-bg-opacity,1))}#jlm-revamp-home .hover\\:text-cyan-800:hover{--tw-text-opacity:1;color:rgb(21 94 117\/var(--tw-text-opacity,1))}#jlm-revamp-home .hover\\:text-emerald-800:hover{--tw-text-opacity:1;color:rgb(6 95 70\/var(--tw-text-opacity,1))}#jlm-revamp-home .hover\\:text-indigo-800:hover{--tw-text-opacity:1;color:rgb(55 48 163\/var(--tw-text-opacity,1))}#jlm-revamp-home .hover\\:text-jlm-blue:hover{--tw-text-opacity:1;color:rgb(15 76 129\/var(--tw-text-opacity,1))}#jlm-revamp-home .hover\\:text-jlm-gold:hover{--tw-text-opacity:1;color:rgb(251 191 36\/var(--tw-text-opacity,1))}#jlm-revamp-home .hover\\:text-jlm-navy:hover{--tw-text-opacity:1;color:rgb(10 37 64\/var(--tw-text-opacity,1))}#jlm-revamp-home .hover\\:text-red-700:hover{--tw-text-opacity:1;color:rgb(185 28 28\/var(--tw-text-opacity,1))}#jlm-revamp-home .hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255\/var(--tw-text-opacity,1))}#jlm-revamp-home .hover\\:underline:hover{text-decoration-line:underline}#jlm-revamp-home .hover\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}#jlm-revamp-home .hover\\:shadow-lg:hover,#jlm-revamp-home .hover\\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#jlm-revamp-home .hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}#jlm-revamp-home .hover\\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#jlm-revamp-home :is(.group:hover .group-hover\\:translate-x-0){--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#jlm-revamp-home :is(.group:hover .group-hover\\:translate-x-1){--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#jlm-revamp-home :is(.group:hover .group-hover\\:scale-110){--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#jlm-revamp-home :is(.group:hover .group-hover\\:bg-cyan-600){--tw-bg-opacity:1;background-color:rgb(8 145 178\/var(--tw-bg-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:bg-emerald-600){--tw-bg-opacity:1;background-color:rgb(5 150 105\/var(--tw-bg-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:bg-indigo-600){--tw-bg-opacity:1;background-color:rgb(79 70 229\/var(--tw-bg-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:bg-jlm-navy){--tw-bg-opacity:1;background-color:rgb(10 37 64\/var(--tw-bg-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:text-black){--tw-text-opacity:1;color:rgb(0 0 0\/var(--tw-text-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:text-blue-600){--tw-text-opacity:1;color:rgb(37 99 235\/var(--tw-text-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:text-cyan-600){--tw-text-opacity:1;color:rgb(8 145 178\/var(--tw-text-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:text-emerald-600){--tw-text-opacity:1;color:rgb(5 150 105\/var(--tw-text-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:text-indigo-600){--tw-text-opacity:1;color:rgb(79 70 229\/var(--tw-text-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:text-jlm-blue){--tw-text-opacity:1;color:rgb(15 76 129\/var(--tw-text-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:text-jlm-gold){--tw-text-opacity:1;color:rgb(251 191 36\/var(--tw-text-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:text-pink-500){--tw-text-opacity:1;color:rgb(236 72 153\/var(--tw-text-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:text-red-600){--tw-text-opacity:1;color:rgb(220 38 38\/var(--tw-text-opacity,1))}#jlm-revamp-home :is(.group:hover .group-hover\\:opacity-100){opacity:1}@media (min-width:640px){#jlm-revamp-home .sm\\:block{display:block}#jlm-revamp-home .sm\\:flex{display:flex}#jlm-revamp-home .sm\\:hidden{display:none}#jlm-revamp-home .sm\\:h-32{height:8rem}#jlm-revamp-home .sm\\:h-\\[300px\\]{height:300px}#jlm-revamp-home .sm\\:w-3\\\/5{width:60%}#jlm-revamp-home .sm\\:w-48{width:12rem}#jlm-revamp-home .sm\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}#jlm-revamp-home .sm\\:flex-row{flex-direction:row}#jlm-revamp-home .sm\\:p-6{padding:1.5rem}#jlm-revamp-home .sm\\:px-10{padding-left:2.5rem;padding-right:2.5rem}#jlm-revamp-home .sm\\:px-6{padding-left:1.5rem;padding-right:1.5rem}#jlm-revamp-home .sm\\:text-2xl{font-size:1.5rem;line-height:2rem}#jlm-revamp-home .sm\\:text-sm{font-size:.875rem;line-height:1.25rem}#jlm-revamp-home .sm\\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:768px){#jlm-revamp-home .md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}#jlm-revamp-home .md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}#jlm-revamp-home .md\\:flex-row{flex-direction:row}#jlm-revamp-home .md\\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1024px){#jlm-revamp-home .lg\\:col-span-5{grid-column:span 5\/span 5}#jlm-revamp-home .lg\\:col-span-7{grid-column:span 7\/span 7}#jlm-revamp-home .lg\\:h-\\[360px\\]{height:360px}#jlm-revamp-home .lg\\:w-1\\\/2{width:50%}#jlm-revamp-home .lg\\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}#jlm-revamp-home .lg\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}#jlm-revamp-home .lg\\:px-8{padding-left:2rem;padding-right:2rem}#jlm-revamp-home .lg\\:text-3xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width:1280px){#jlm-revamp-home .xl\\:col-span-1{grid-column:span 1\/span 1}#jlm-revamp-home .xl\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}#jlm-revamp-home .xl\\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}#jlm-revamp-home .xl\\:flex-row{flex-direction:row}#jlm-revamp-home .xl\\:gap-4{gap:1rem}#jlm-revamp-home .xl\\:gap-6{gap:1.5rem}#jlm-revamp-home .xl\\:text-left{text-align:left}}\n#jlm-revamp-home [class*=\"bottom-4\"][class*=\"z-20\"] button.rounded-full{position:relative}\n#jlm-revamp-home [class*=\"bottom-4\"][class*=\"z-20\"] button.rounded-full::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;}\n<\/style>\n<style id=\"jlm-revamp-base-css\">#jlm-revamp-home {\n  background: #fff;\n  color: #1e293b;\n  font-family: Poppins, Arial, sans-serif;\n  isolation: isolate;\n  overflow-x: clip;\n}\n#jlm-revamp-home,\n#jlm-revamp-home *,\n#jlm-revamp-home *::before,\n#jlm-revamp-home *::after {\n  box-sizing: border-box;\n}\n#jlm-revamp-home :is(h1, h2, h3, h4, h5, h6) {\n  font-family: Poppins, Arial, sans-serif;\n}\n#jlm-revamp-home .hero-overlay {\n  background: linear-gradient(90deg, rgba(10, 37, 64, .95) 0%, rgba(10, 37, 64, .85) 35%, rgba(10, 37, 64, .4) 60%, rgba(10, 37, 64, 0) 100%);\n}\n#jlm-revamp-home :is(a, button, input):focus-visible {\n  outline: 3px solid #fbbf24;\n  outline-offset: 3px;\n}\n@media (prefers-reduced-motion: reduce) {\n  #jlm-revamp-home *,\n  #jlm-revamp-home *::before,\n  #jlm-revamp-home *::after {\n    scroll-behavior: auto !important;\n    animation-duration: .01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: .01ms !important;\n  }\n}<\/style>\n<div id=\"jlm-revamp-home\" class=\"antialiased bg-slate-50\">\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n         HERO SECTION (UPDATED: Smaller buttons, more padding)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"relative w-full h-[650px] overflow-hidden\">\n    <div class=\"absolute inset-0\">\n      <img decoding=\"async\" src=\"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/07\/jabatan-laut-main-slider1-opt.webp\"\n        alt=\"Jabatan Laut Malaysia Ship\" class=\"w-full h-full object-cover object-right\">\n    <\/div>\n    <div class=\"absolute inset-0 hero-overlay\"><\/div>\n\n    <!-- Added pb-32 for more bottom spacing as requested -->\n    <div class=\"relative z-10 max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center pb-32\">\n      <div class=\"max-w-2xl pt-10\">\n        <span class=\"text-jlm-gold font-bold tracking-wider text-sm uppercase mb-2 block\">Selamat Datang Ke<\/span>\n        <h1 class=\"text-5xl md:text-6xl font-bold text-white leading-tight mb-4 drop-shadow-md\">\n          JABATAN LAUT<br>MALAYSIA\n        <\/h1>\n        <p class=\"text-xl text-white italic font-light mb-6 opacity-90\">\"Safer Ships, Secure Ports, Cleaner Seas\"<\/p>\n\n        <div class=\"w-16 h-1 bg-jlm-gold mb-6\"><\/div>\n\n        <div class=\"flex flex-wrap gap-4\">\n          <!-- Smaller Buttons: px-6 py-2.5 text-sm -->\n          <a href=\"https:\/\/develop.marine.gov.my\/profil\/\"\n            class=\"bg-jlm-gold hover:bg-yellow-400 text-jlm-navy font-bold px-6 py-2.5 rounded-md transition shadow-lg flex items-center gap-2 text-sm inline-flex\">\n            KETAHUI LEBIH LANJUT <i class=\"fas fa-arrow-right text-xs\"><\/i>\n          <\/a>\n          <!-- <button class=\"border border-white text-white hover:bg-white hover:text-jlm-navy font-bold px-6 py-2.5 rounded-md transition flex items-center gap-2 text-sm\">\n                        PERKHIDMATAN KAMI <i class=\"fas fa-border-all text-xs\"><\/i>\n                    <\/button> -->\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     STATS BAR (Floating)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"relative z-20 -mt-16 px-4 sm:px-6 lg:px-8 max-w-[1400px] mx-auto\">\n    <div\n      class=\"bg-jlm-navy rounded-xl shadow-2xl p-5 sm:p-6 grid grid-cols-2 xl:grid-cols-5 gap-5 xl:gap-6 border border-white\/10\">\n\n      <div class=\"flex flex-col items-center text-center gap-2 xl:flex-row xl:text-left xl:gap-4\">\n        <div class=\"p-3 bg-cyan-500\/10 rounded-lg text-cyan-400 text-2xl flex-shrink-0\">\n          <i class=\"fas fa-ship\"><\/i>\n        <\/div>\n        <div>\n          <div class=\"text-xl font-bold text-white tracking-tight\">45<\/div>\n          <div class=\"text-sm text-slate-400 uppercase tracking-wider\">Kapal & Bot<\/div>\n        <\/div>\n      <\/div>\n\n      <a href=\"https:\/\/develop.marine.gov.my\/rumah-api\/\" class=\"flex flex-col items-center text-center gap-2 xl:flex-row xl:text-left xl:gap-4 hover:opacity-80 transition-opacity\">\n        <div class=\"p-3 bg-amber-500\/10 rounded-lg text-amber-400 text-2xl flex-shrink-0\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\" style=\"display:block;width:32px;height:32px\"><path fill=\"currentColor\" d=\"M2 5h6v1.5H2V5Zm14 0h6v1.5h-6V5ZM9 6.5h6l1 1.5h-8l1-1.5Zm1 1.5h4v3h-4V8Zm-1 3h6l1.7 8H7.3L9 11Zm2 1.5-1 5h4l-1-5h-2ZM6 19h12v2H6v-2Zm5-9h2v1h-2v-1Z\"\/><\/svg>\n        <\/div>\n        <div>\n          <div class=\"text-xl font-bold text-white tracking-tight\">40<\/div>\n          <div class=\"text-sm text-slate-400 uppercase tracking-wider\">Rumah Api<\/div>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/develop.marine.gov.my\/jeti-penumpang\/\" class=\"flex flex-col items-center text-center gap-2 xl:flex-row xl:text-left xl:gap-4 hover:opacity-80 transition-opacity\">\n        <div class=\"p-3 bg-emerald-500\/10 rounded-lg text-emerald-400 text-2xl flex-shrink-0\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\" style=\"display:block;width:32px;height:32px\"><path fill=\"currentColor\" d=\"M3 7h18v2H3V7Zm2 2h2v7H5V9Zm6 0h2v7h-2V9Zm6 0h2v7h-2V9ZM2 17h20v2H2v-2Zm2.2 3c1.3 0 2.1-.4 3-.8.9-.4 1.7-.8 3-.8s2.1.4 3 .8c.9.4 1.7.8 3 .8s2.1-.4 3-.8c.9-.4 1.7-.8 3-.8v2c-1.3 0-2.1.4-3 .8-.9.4-1.7.8-3 .8s-2.1-.4-3-.8c-.9-.4-1.7-.8-3-.8s-2.1.4-3 .8c-.9.4-1.7.8-3 .8v-2Z\"\/><\/svg>\n        <\/div>\n        <div>\n          <div class=\"text-xl font-bold text-white tracking-tight\">17<\/div>\n          <div class=\"text-sm text-slate-400 uppercase tracking-wider\">Jeti Penumpang<\/div>\n        <\/div>\n      <\/a>\n\n      <div class=\"flex flex-col items-center text-center gap-2 xl:flex-row xl:text-left xl:gap-4\">\n        <div class=\"p-3 bg-indigo-500\/10 rounded-lg text-indigo-400 text-2xl flex-shrink-0\">\n          <i class=\"fas fa-broadcast-tower\"><\/i>\n        <\/div>\n        <div>\n          <div class=\"text-xl font-bold text-white tracking-tight\">5<\/div>\n          <div class=\"text-sm text-slate-400 uppercase tracking-wider\">Pusat VTMIS \/ Pusat VTS<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"col-span-2 xl:col-span-1 flex justify-center\">\n        <div class=\"flex flex-col items-center text-center gap-2 xl:flex-row xl:text-left xl:gap-4\">\n          <div class=\"p-3 bg-violet-500\/10 rounded-lg text-violet-400 text-2xl flex-shrink-0\">\n            <i class=\"fas fa-eye\"><\/i>\n          <\/div>\n          <div>\n            <div class=\"text-xl font-bold text-white tracking-tight\"><span class=\"jlm-visitor-count-value\" id=\"jlm-visitor-count-hero\">723,790<\/span><\/div>\n            <div class=\"text-sm text-slate-400 uppercase tracking-wider\">\n              Jumlah Pelawat\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n         QUICK LINKS (PAUTAN PANTAS)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"py-20 px-4 sm:px-6 lg:px-8 max-w-[1400px] mx-auto\">\n\n    <div class=\"flex flex-col md:flex-row justify-between items-end mb-10 gap-4\">\n      <div>\n        <span class=\"text-jlm-blue font-bold tracking-widest text-xs uppercase mb-1 block\">Pautan Pantas<\/span>\n        <h2 class=\"text-3xl font-bold text-gray-900\">Akses Perkhidmatan Kami<\/h2>\n        <div class=\"w-20 h-1 bg-jlm-blue mt-3 rounded-full\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-6\">\n\n      <a href=\"https:\/\/develop.marine.gov.my\/notis-pekeliling\/\"\n        class=\"group bg-white border border-slate-100 rounded-xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full relative overflow-hidden\">\n        <div class=\"mb-4 text-jlm-blue group-hover:text-jlm-gold transition-colors\">\n          <i class=\"fas fa-bell text-4xl\"><\/i>\n        <\/div>\n        <h3 class=\"text-lg font-bold text-gray-900 mb-2 group-hover:text-jlm-blue transition-colors\">Notis & Pekeliling\n        <\/h3>\n        <p class=\"text-sm text-gray-500 leading-relaxed mb-4 flex-grow\">Maklumat terkini mengenai notis, pekeliling dan\n          pemakluman rasmi.<\/p>\n        <div class=\"mt-auto pt-4 border-t border-slate-50 flex justify-end\">\n          <i\n            class=\"fas fa-arrow-right text-jlm-blue opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all\"><\/i>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/develop.marine.gov.my\/perundangan\/\"\n        class=\"group bg-white border border-slate-100 rounded-xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full relative overflow-hidden\">\n        <div class=\"mb-4 text-jlm-blue group-hover:text-jlm-gold transition-colors\">\n          <i class=\"fas fa-balance-scale text-4xl\"><\/i>\n        <\/div>\n        <h3 class=\"text-lg font-bold text-gray-900 mb-2 group-hover:text-jlm-blue transition-colors\">Perundangan<\/h3>\n        <p class=\"text-sm text-gray-500 leading-relaxed mb-4 flex-grow\">Akta, peraturan dan undang-undang berkaitan\n          maritim.<\/p>\n        <div class=\"mt-auto pt-4 border-t border-slate-50 flex justify-end\">\n          <i\n            class=\"fas fa-arrow-right text-jlm-blue opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all\"><\/i>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/develop.marine.gov.my\/tender-sebut-harga\/\"\n        class=\"group bg-white border border-slate-100 rounded-xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full relative overflow-hidden\">\n        <div class=\"mb-4 text-jlm-blue group-hover:text-jlm-gold transition-colors\">\n          <i class=\"fas fa-file-contract text-4xl\"><\/i>\n        <\/div>\n        <h3 class=\"text-lg font-bold text-gray-900 mb-2 group-hover:text-jlm-blue transition-colors\">Tender & Sebutharga\n        <\/h3>\n        <p class=\"text-sm text-gray-500 leading-relaxed mb-4 flex-grow\">Peluang tender dan sebutharga terkini yang\n          dibuka kepada umum.<\/p>\n        <div class=\"mt-auto pt-4 border-t border-slate-50 flex justify-end\">\n          <i\n            class=\"fas fa-arrow-right text-jlm-blue opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all\"><\/i>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/08\/TAKWIM-LATIHAN-2026.pdf\"\n        class=\"group bg-white border border-slate-100 rounded-xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full relative overflow-hidden\">\n        <div class=\"mb-4 text-jlm-blue group-hover:text-jlm-gold transition-colors\">\n          <i class=\"fas fa-graduation-cap text-4xl\"><\/i>\n        <\/div>\n        <h3 class=\"text-lg font-bold text-gray-900 mb-2 group-hover:text-jlm-blue transition-colors\">Kursus<\/h3>\n        <p class=\"text-sm text-gray-500 leading-relaxed mb-4 flex-grow\">Jadual kursus, latihan dan program peningkatan\n          kemahiran.<\/p>\n        <div class=\"mt-auto pt-4 border-t border-slate-50 flex justify-end\">\n          <i\n            class=\"fas fa-arrow-right text-jlm-blue opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all\"><\/i>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/develop.marine.gov.my\/aset-fasiliti\/\"\n        class=\"group bg-white border border-slate-100 rounded-xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full relative overflow-hidden\">\n        <div class=\"mb-4 text-jlm-blue group-hover:text-jlm-gold transition-colors\">\n          <i class=\"fas fa-building text-4xl\"><\/i>\n        <\/div>\n        <h3 class=\"text-lg font-bold text-gray-900 mb-2 group-hover:text-jlm-blue transition-colors\">Aset & Fasiliti\n        <\/h3>\n        <p class=\"text-sm text-gray-500 leading-relaxed mb-4 flex-grow\">Maklumat aset, fasiliti dan kemudahan Jabatan\n          Laut Malaysia.<\/p>\n        <div class=\"mt-auto pt-4 border-t border-slate-50 flex justify-end\">\n          <i\n            class=\"fas fa-arrow-right text-jlm-blue opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all\"><\/i>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/develop.marine.gov.my\/media\/\"\n        class=\"group bg-white border border-slate-100 rounded-xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full relative overflow-hidden\">\n        <div class=\"mb-4 text-jlm-blue group-hover:text-jlm-gold transition-colors\">\n          <i class=\"fas fa-newspaper text-4xl\"><\/i>\n        <\/div>\n        <h3 class=\"text-lg font-bold text-gray-900 mb-2 group-hover:text-jlm-blue transition-colors\">Pusat Media<\/h3>\n        <p class=\"text-sm text-gray-500 leading-relaxed mb-4 flex-grow\">Berita, gambar, video dan penerbitan rasmi JLM\n          untuk umum.<\/p>\n        <div class=\"mt-auto pt-4 border-t border-slate-50 flex justify-end\">\n          <i\n            class=\"fas fa-arrow-right text-jlm-blue opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all\"><\/i>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/develop.marine.gov.my\/warga-jlm\/\"\n        class=\"group bg-white border border-slate-100 rounded-xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full relative overflow-hidden\">\n        <div class=\"mb-4 text-jlm-blue group-hover:text-jlm-gold transition-colors\">\n          <i class=\"fas fa-id-badge text-4xl\"><\/i>\n        <\/div>\n        <h3 class=\"text-lg font-bold text-gray-900 mb-2 group-hover:text-jlm-blue transition-colors\">Warga JLM<\/h3>\n        <p class=\"text-sm text-gray-500 leading-relaxed mb-4 flex-grow\">Portal khusus untuk warga dan kakitangan Jabatan\n          Laut Malaysia.<\/p>\n        <div class=\"mt-auto pt-4 border-t border-slate-50 flex justify-end\">\n          <i\n            class=\"fas fa-arrow-right text-jlm-blue opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all\"><\/i>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/develop.marine.gov.my\/warga-awam\/\"\n        class=\"group bg-white border border-slate-100 rounded-xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full relative overflow-hidden\">\n        <div class=\"mb-4 text-jlm-blue group-hover:text-jlm-gold transition-colors\">\n          <i class=\"fas fa-users text-4xl\"><\/i>\n        <\/div>\n        <h3 class=\"text-lg font-bold text-gray-900 mb-2 group-hover:text-jlm-blue transition-colors\">Warga Awam<\/h3>\n        <p class=\"text-sm text-gray-500 leading-relaxed mb-4 flex-grow\">Maklumat dan perkhidmatan untuk orang awam dan\n          pengguna umum.<\/p>\n        <div class=\"mt-auto pt-4 border-t border-slate-50 flex justify-end\">\n          <i\n            class=\"fas fa-arrow-right text-jlm-blue opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all\"><\/i>\n        <\/div>\n      <\/a>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     BANNER IMAGE SLIDER \u2014 Announcements (2ND REVAMPED)\n     \u2605 EDIT SENARAI BANNER DALAM <script> DI BAWAH SAHAJA \u2605\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"py-12 px-4 sm:px-6 lg:px-8 max-w-[1400px] mx-auto\" style=\"display:none\" data-jlm-hidden-by=\"haizad-10082026-replaced-by-promo-slider\">\n\n    <!-- Header -->\n    <div class=\"flex items-center justify-between mb-6\">\n      <div>\n        <span class=\"text-jlm-gold font-bold tracking-widest text-xs uppercase mb-2 block\">Pengumuman Rasmi<\/span>\n        <h2 class=\"text-2xl font-bold text-jlm-navy\">Notis & Makluman Terkini<\/h2>\n        <div class=\"w-16 h-1 bg-jlm-gold mt-3 rounded-full\"><\/div>\n      <\/div>\n      <div class=\"hidden sm:flex gap-2\">\n        <button onclick=\"jlm2BannerPrev()\"\n          class=\"w-9 h-9 rounded-full border border-jlm-navy\/20 bg-white hover:bg-jlm-navy hover:text-white text-jlm-navy flex items-center justify-center transition\">\n          <i class=\"fas fa-chevron-left text-xs\"><\/i>\n        <\/button>\n        <button onclick=\"jlm2BannerNext()\"\n          class=\"w-9 h-9 rounded-full border border-jlm-navy\/20 bg-white hover:bg-jlm-navy hover:text-white text-jlm-navy flex items-center justify-center transition\">\n          <i class=\"fas fa-chevron-right text-xs\"><\/i>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Banner Slider (auto-generated by script below) -->\n    <div class=\"relative overflow-hidden rounded-2xl shadow-lg\" id=\"jlm2BannerWrapper\">\n      <div class=\"flex transition-transform duration-500 ease-in-out\" id=\"jlm2BannerTrack\"><\/div>\n\n      <!-- Mobile Nav Arrows -->\n      <button onclick=\"jlm2BannerPrev()\"\n        class=\"sm:hidden absolute left-2 top-1\/2 -translate-y-1\/2 w-9 h-9 rounded-full bg-white\/90 text-jlm-navy flex items-center justify-center shadow-md z-20\">\n        <i class=\"fas fa-chevron-left text-xs\"><\/i>\n      <\/button>\n      <button onclick=\"jlm2BannerNext()\"\n        class=\"sm:hidden absolute right-2 top-1\/2 -translate-y-1\/2 w-9 h-9 rounded-full bg-white\/90 text-jlm-navy flex items-center justify-center shadow-md z-20\">\n        <i class=\"fas fa-chevron-right text-xs\"><\/i>\n      <\/button>\n\n      <!-- Dots -->\n      <div class=\"absolute bottom-4 left-1\/2 -translate-x-1\/2 flex gap-2 z-20\" id=\"jlm2BannerDots\"><\/div>\n    <\/div>\n\n  <\/section>\n\n  <script id=\"jlm-revamp-live-banners\">\n(() => {\n  const root = document.getElementById(\"jlm-revamp-home\");\n  if (!root) return;\n\n  const track = root.querySelector(\"#jlm2BannerTrack\");\n  const dotsBox = root.querySelector(\"#jlm2BannerDots\");\n  if (!track || !dotsBox) return;\n\n  let current = 0;\n  let autoTimer = null;\n  let total = 0;\n\n  const stripHtml = (value = \"\") => {\n    const node = document.createElement(\"div\");\n    node.innerHTML = value;\n    return (node.textContent || \"\").trim();\n  };\n\n  const safeLocalUrl = (value, fallback) => {\n    try {\n      const url = new URL(value, window.location.origin);\n      return url.origin === window.location.origin ? url.href : fallback;\n    } catch {\n      return fallback;\n    }\n  };\n\n  const safeLocalImageUrl = (value, fallback) => {\n    try {\n      const url = new URL(value || \"\", window.location.origin);\n      const isImage = \/\\.(avif|gif|jpe?g|png|svg|webp)$\/i.test(url.pathname);\n      return url.origin === window.location.origin && isImage ? url.href : fallback;\n    } catch {\n      return fallback;\n    }\n  };\n\n  const fallbackImage =\n    \"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/07\/jabatan-laut-main-slider1-opt.webp\";\n\n  const updateDots = () => {\n    Array.from(dotsBox.children).forEach((dot, index) => {\n      dot.className =\n        \"h-2 rounded-full transition-all \" +\n        (index === current ? \"bg-white w-5\" : \"bg-white\/50 w-2\");\n    });\n  };\n\n  const goTo = (index) => {\n    if (!total) return;\n    current = (index + total) % total;\n    track.style.transform = \"translateX(-\" + (current * 100) + \"%)\";\n    updateDots();\n  };\n\n  const startAuto = () => {\n    if (total < 2) return;\n    window.clearInterval(autoTimer);\n    autoTimer = window.setInterval(() => goTo(current + 1), 6000);\n  };\n\n  const resetAuto = () => startAuto();\n\n  window.jlm2BannerNext = () => {\n    goTo(current + 1);\n    resetAuto();\n  };\n  window.jlm2BannerPrev = () => {\n    goTo(current - 1);\n    resetAuto();\n  };\n  window.jlm2BannerGo = (index) => {\n    goTo(index);\n    resetAuto();\n  };\n\n  const postsPromise = window.jlmRevampPostsPromise ||\n    (window.jlmRevampPostsPromise = fetch(\"\/wp-json\/wp\/v2\/posts?per_page=6&_embed=wp%3Afeaturedmedia&_fields=date,link,title.rendered,excerpt.rendered,_links,_embedded.wp%3Afeaturedmedia.source_url&orderby=date&order=desc&categories=22\", {\n      headers: { Accept: \"application\/json\" },\n      credentials: \"same-origin\"\n    }).then((response) => {\n      if (!response.ok) throw new Error(\"HTTP \" + response.status);\n      return response.json();\n    }));\n\n  postsPromise.then((posts) => {\n      if (!Array.isArray(posts) || posts.length === 0) {\n        track.innerHTML =\n          '<div class=\"w-full flex-shrink-0 h-[240px] sm:h-[300px] flex items-center justify-center bg-jlm-navy text-white px-6 text-center\">Tiada pengumuman terkini untuk dipaparkan.<\/div>';\n        return;\n      }\n\n      total = posts.length;\n      track.replaceChildren();\n      dotsBox.replaceChildren();\n\n      posts.forEach((post, index) => {\n        const media = post?._embedded?.[\"wp:featuredmedia\"]?.[0];\n        const image = safeLocalImageUrl(media?.source_url || \"\", fallbackImage);\n        const link = safeLocalUrl(post?.link || \"\", \"https:\/\/develop.marine.gov.my\/blog\/\");\n        const title = stripHtml(post?.title?.rendered || \"Berita JLM\");\n        const description = window.jlmCleanExcerpt(post?.excerpt?.rendered || \"\");\n        const date = new Intl.DateTimeFormat(\"ms-MY\", {\n          day: \"numeric\",\n          month: \"long\",\n          year: \"numeric\"\n        }).format(new Date(post.date));\n\n        const slide = document.createElement(\"article\");\n        slide.className =\n          \"w-full flex-shrink-0 relative h-[240px] sm:h-[300px] lg:h-[360px] bg-jlm-navy\";\n\n        const row = document.createElement(\"div\");\n        row.className = \"absolute inset-0 flex\";\n\n        const textPanel = document.createElement(\"div\");\n        textPanel.className =\n          \"w-full sm:w-3\/5 lg:w-1\/2 relative z-10 flex items-center px-6 sm:px-10 bg-jlm-navy\";\n\n        const textWrap = document.createElement(\"div\");\n        textWrap.className = \"max-w-md\";\n\n        const badge = document.createElement(\"span\");\n        badge.className =\n          \"bg-jlm-blue text-white text-[10px] sm:text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide inline-block mb-3\";\n        badge.textContent = \"Berita\";\n\n        const heading = document.createElement(\"h3\");\n        heading.className =\n          \"text-lg sm:text-2xl lg:text-3xl font-bold leading-snug mb-2 text-white\";\n        const headingLink = document.createElement(\"a\");\n        headingLink.href = link;\n        headingLink.textContent = title;\n        heading.appendChild(headingLink);\n\n        const excerpt = document.createElement(\"p\");\n        excerpt.className =\n          \"text-xs sm:text-sm leading-relaxed hidden sm:block text-slate-300\";\n        excerpt.textContent = description;\n\n        const time = document.createElement(\"time\");\n        time.className = \"text-xs font-semibold mt-3 block text-jlm-gold\";\n        time.textContent = date;\n\n        textWrap.append(badge, heading, excerpt, time);\n        textPanel.appendChild(textWrap);\n\n        const imagePanel = document.createElement(\"div\");\n        imagePanel.className = \"hidden sm:block flex-1 relative overflow-hidden\";\n        const imageNode = document.createElement(\"img\");\n        imageNode.src = image;\n        imageNode.alt = \"\";\n        imageNode.loading = index === 0 ? \"eager\" : \"lazy\";\n        imageNode.className = \"w-full h-full object-cover\";\n        imageNode.addEventListener(\"error\", () => {\n          if (imageNode.src !== fallbackImage) imageNode.src = fallbackImage;\n        });\n        const overlay = document.createElement(\"div\");\n        overlay.className = \"absolute inset-0\";\n        overlay.style.background =\n          \"linear-gradient(to right, #0a2540, transparent)\";\n        imagePanel.append(imageNode, overlay);\n\n        row.append(textPanel, imagePanel);\n        slide.appendChild(row);\n        track.appendChild(slide);\n\n        const dot = document.createElement(\"button\");\n        dot.type = \"button\";\n        dot.className =\n          \"h-2 rounded-full transition-all \" +\n          (index === 0 ? \"bg-white w-5\" : \"bg-white\/50 w-2\");\n        dot.setAttribute(\"aria-label\", \"Pergi ke berita \" + (index + 1));\n        dot.addEventListener(\"click\", () => window.jlm2BannerGo(index));\n        dotsBox.appendChild(dot);\n      });\n\n      goTo(0);\n      startAuto();\n    })\n    .catch(() => {\n      track.innerHTML =\n        '<div class=\"w-full flex-shrink-0 h-[240px] sm:h-[300px] flex items-center justify-center bg-jlm-navy text-white px-6 text-center\">Pengumuman tidak dapat dimuatkan. Sila cuba lagi.<\/div>';\n    });\n})();\n<\/script>\n\n  \n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       Banner Promosi Slider \u2014 Hari Kebangsaan 2026 & TXA 2026\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"px-4 sm:px-6 lg:px-8 max-w-[1400px] mx-auto\" style=\"padding-top:2rem;padding-bottom:3.5rem;\">\n    <div class=\"mb-6\">\n      <span class=\"text-jlm-blue font-bold tracking-widest text-xs uppercase mb-1 block\">Pengumuman Rasmi<\/span>\n      <h2 class=\"text-3xl font-bold text-gray-900\">Hebahan &amp; Acara<\/h2>\n      <div class=\"w-20 h-1 bg-jlm-blue mt-3 rounded-full\"><\/div>\n    <\/div>\n    <div class=\"relative overflow-hidden rounded-2xl shadow-lg\" id=\"jlmPromoWrapper\">\n      <div class=\"flex transition-transform duration-500 ease-in-out\" id=\"jlmPromoTrack\">\n        <div class=\"w-full flex-shrink-0 h-[200px] sm:h-[280px] lg:h-[340px] flex items-center justify-center bg-white\">\n          <img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/08\/hari-kebangsaan-banner-optm.webp\" alt=\"Sambutan Hari Kebangsaan 2026\" loading=\"eager\" fetchpriority=\"high\" width=\"1600\" height=\"667\" class=\"max-w-full max-h-full object-contain\">\n        <\/div>\n        <div class=\"w-full flex-shrink-0 h-[200px] sm:h-[280px] lg:h-[340px] flex items-center justify-center bg-white\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/08\/txa-banner-optm.webp\" alt=\"Transport Expo Asia 2026 (TXA)\" loading=\"lazy\" width=\"1600\" height=\"667\" class=\"max-w-full max-h-full object-contain\">\n        <\/div>\n      <\/div>\n\n      <button onclick=\"jlmPromoPrev()\" class=\"absolute left-2 top-1\/2 -translate-y-1\/2 w-9 h-9 rounded-full bg-white\/90 text-jlm-navy flex items-center justify-center shadow-md z-20 hover:bg-jlm-navy hover:text-white transition\">\n        <i class=\"fas fa-chevron-left text-xs\"><\/i>\n      <\/button>\n      <button onclick=\"jlmPromoNext()\" class=\"absolute right-2 top-1\/2 -translate-y-1\/2 w-9 h-9 rounded-full bg-white\/90 text-jlm-navy flex items-center justify-center shadow-md z-20 hover:bg-jlm-navy hover:text-white transition\">\n        <i class=\"fas fa-chevron-right text-xs\"><\/i>\n      <\/button>\n\n      <div class=\"absolute bottom-4 left-1\/2 -translate-x-1\/2 flex gap-2 z-20\" id=\"jlmPromoDots\"><\/div>\n    <\/div>\n  <\/section>\n\n  <script id=\"jlm-promo-banner-slider\">\n  (() => {\n    const track = document.getElementById(\"jlmPromoTrack\");\n    const dotsBox = document.getElementById(\"jlmPromoDots\");\n    if (!track || !dotsBox) return;\n    const total = track.children.length;\n    let current = 0;\n    let autoTimer = null;\n\n    for (let i = 0; i < total; i++) {\n      const dot = document.createElement(\"button\");\n      dot.type = \"button\";\n      dot.setAttribute(\"aria-label\", \"Pergi ke banner \" + (i + 1));\n      dot.addEventListener(\"click\", () => window.jlmPromoGo(i));\n      dotsBox.appendChild(dot);\n    }\n\n    const updateDots = () => {\n      Array.from(dotsBox.children).forEach((dot, index) => {\n        dot.className = \"h-2 rounded-full transition-all \" + (index === current ? \"bg-jlm-navy w-5\" : \"bg-jlm-navy\/40 w-2\");\n      });\n    };\n    const goTo = (index) => {\n      current = (index + total) % total;\n      track.style.transform = \"translateX(-\" + (current * 100) + \"%)\";\n      updateDots();\n    };\n    const startAuto = () => {\n      if (total < 2) return;\n      window.clearInterval(autoTimer);\n      autoTimer = window.setInterval(() => goTo(current + 1), 6000);\n    };\n    window.jlmPromoNext = () => { goTo(current + 1); startAuto(); };\n    window.jlmPromoPrev = () => { goTo(current - 1); startAuto(); };\n    window.jlmPromoGo = (index) => { goTo(index); startAuto(); };\n    updateDots();\n    startAuto();\n  })();\n  <\/script>\n\n  <section class=\"py-20 bg-slate-50 relative\">\n    <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8\">\n      <div class=\"flex flex-col md:flex-row justify-between items-end mb-10 gap-4\">\n        <div>\n          <span class=\"text-jlm-blue font-bold tracking-widest text-xs uppercase mb-1 block\">Teras Utama<\/span>\n          <h2 class=\"text-3xl font-bold text-gray-900\">Fokus Utama Jabatan<\/h2>\n          <div class=\"w-20 h-1 bg-jlm-blue mt-3 rounded-full\"><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\n\n        <!-- Pelaut -->\n        <a href=\"https:\/\/develop.marine.gov.my\/pelaut\/\"\n          class=\"bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group flex flex-col h-full border-t-4 border-jlm-blue relative z-10\">\n          <div class=\"relative h-48 rounded-t-xl overflow-hidden\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2023\/03\/semakan-perakuan-pelaut-jlm1.png\" alt=\"Pelaut\" loading=\"lazy\" width=\"450\" height=\"735\"\n              class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent opacity-60\"><\/div>\n          <\/div>\n\n          <div\n            class=\"absolute top-[164px] left-6 w-14 h-14 rounded-xl bg-jlm-blue text-white flex items-center justify-center text-2xl shadow-lg z-30 group-hover:bg-jlm-navy transition-colors\">\n            <i class=\"fas fa-id-card\"><\/i>\n          <\/div>\n\n          <div class=\"pt-10 pb-8 px-6 flex-grow flex flex-col relative z-20 bg-white rounded-b-2xl\">\n            <h3 class=\"text-xl font-bold text-gray-900 mb-3 group-hover:text-jlm-blue transition-colors\">Pelaut<\/h3>\n            <p class=\"text-sm text-gray-500 leading-relaxed mb-6 flex-grow\">\n              Maklumat berkaitan pendaftaran, latihan maritim, keahlian, perakuan kekompetenan dan kemudahan pusat\n              pelaut.\n            <\/p>\n            <span\n              class=\"inline-flex items-center text-jlm-blue font-semibold text-sm hover:text-jlm-navy transition mt-auto\">\n              Baca Lagi <i\n                class=\"fas fa-arrow-right ml-2 text-xs transition-transform group-hover:translate-x-1\"><\/i>\n            <\/span>\n          <\/div>\n        <\/a>\n\n        <!-- Perkapalan -->\n        <a href=\"https:\/\/develop.marine.gov.my\/perkapalan\/\"\n          class=\"bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group flex flex-col h-full border-t-4 border-emerald-500 relative z-10\">\n          <div class=\"relative h-48 rounded-t-xl overflow-hidden\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/08\/2_-Perkapalan-scaled-1-optm.webp\"\n              alt=\"Perkapalan\" loading=\"lazy\" width=\"700\" height=\"465\"\n              class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent opacity-60\"><\/div>\n          <\/div>\n\n          <div\n            class=\"absolute top-[164px] left-6 w-14 h-14 rounded-xl bg-emerald-500 text-white flex items-center justify-center text-2xl shadow-lg z-30 group-hover:bg-emerald-600 transition-colors\">\n            <i class=\"fas fa-ship\"><\/i>\n          <\/div>\n\n          <div class=\"pt-10 pb-8 px-6 flex-grow flex flex-col relative z-20 bg-white rounded-b-2xl\">\n            <h3 class=\"text-xl font-bold text-gray-900 mb-3 group-hover:text-emerald-600 transition-colors\">Perkapalan\n            <\/h3>\n            <p class=\"text-sm text-gray-500 leading-relaxed mb-6 flex-grow\">\n              Maklumat berkaitan pendaftaran kapal, perlesenan bot, garis panduan, kod ISM, maklumat dan aplikasi teras.\n            <\/p>\n            <span\n              class=\"inline-flex items-center text-emerald-600 font-semibold text-sm hover:text-emerald-800 transition mt-auto\">\n              Baca Lagi <i\n                class=\"fas fa-arrow-right ml-2 text-xs transition-transform group-hover:translate-x-1\"><\/i>\n            <\/span>\n          <\/div>\n        <\/a>\n\n        <!-- Pelayaran -->\n        <a href=\"https:\/\/develop.marine.gov.my\/pelayaran\/\"\n          class=\"bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group flex flex-col h-full border-t-4 border-cyan-500 relative z-10\">\n          <div class=\"relative h-48 rounded-t-xl overflow-hidden\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/08\/3_-Pelayaran-scaled-1-optm.webp\" alt=\"Pelayaran\" loading=\"lazy\" width=\"700\" height=\"394\"\n              class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent opacity-60\"><\/div>\n          <\/div>\n\n          <div\n            class=\"absolute top-[164px] left-6 w-14 h-14 rounded-xl bg-cyan-500 text-white flex items-center justify-center text-2xl shadow-lg z-30 group-hover:bg-cyan-600 transition-colors\">\n            <i class=\"fas fa-compass\"><\/i>\n          <\/div>\n\n          <div class=\"pt-10 pb-8 px-6 flex-grow flex flex-col relative z-20 bg-white rounded-b-2xl\">\n            <h3 class=\"text-xl font-bold text-gray-900 mb-3 group-hover:text-cyan-600 transition-colors\">Pelayaran<\/h3>\n            <p class=\"text-sm text-gray-500 leading-relaxed mb-6 flex-grow\">\n              Maklumat prosedur, panduan dan sistem berkaitan urusan pelayaran serta keselamatan navigasi.\n            <\/p>\n            <span\n              class=\"inline-flex items-center text-cyan-600 font-semibold text-sm hover:text-cyan-800 transition mt-auto\">\n              Baca Lagi <i\n                class=\"fas fa-arrow-right ml-2 text-xs transition-transform group-hover:translate-x-1\"><\/i>\n            <\/span>\n          <\/div>\n        <\/a>\n\n        <!-- Pelabuhan -->\n        <a href=\"https:\/\/develop.marine.gov.my\/pelabuhan\/\"\n          class=\"bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group flex flex-col h-full border-t-4 border-indigo-500 relative z-10\">\n          <div class=\"relative h-48 rounded-t-xl overflow-hidden\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/08\/4_-Pelabuhan-scaled-1-optm.webp\" alt=\"Pelabuhan\" loading=\"lazy\" width=\"700\" height=\"467\"\n              class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent opacity-60\"><\/div>\n          <\/div>\n\n          <div\n            class=\"absolute top-[164px] left-6 w-14 h-14 rounded-xl bg-indigo-500 text-white flex items-center justify-center text-2xl shadow-lg z-30 group-hover:bg-indigo-600 transition-colors\">\n            <i class=\"fas fa-anchor\"><\/i>\n          <\/div>\n\n          <div class=\"pt-10 pb-8 px-6 flex-grow flex flex-col relative z-20 bg-white rounded-b-2xl\">\n            <h3 class=\"text-xl font-bold text-gray-900 mb-3 group-hover:text-indigo-600 transition-colors\">Pelabuhan\n            <\/h3>\n            <p class=\"text-sm text-gray-500 leading-relaxed mb-6 flex-grow\">\n              Maklumat berkaitan prosedur pelabuhan, pendaftaran shipper, sistem berkaitan dan perkhidmatan sokongan\n              pelabuhan.\n            <\/p>\n            <span\n              class=\"inline-flex items-center text-indigo-600 font-semibold text-sm hover:text-indigo-800 transition mt-auto\">\n              Baca Lagi <i\n                class=\"fas fa-arrow-right ml-2 text-xs transition-transform group-hover:translate-x-1\"><\/i>\n            <\/span>\n          <\/div>\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n         INFO SECTION (NEW DESIGN: Asymmetric Layout)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"py-20 px-4 sm:px-6 lg:px-8 max-w-[1400px] mx-auto\">\n\n    <!-- Section Header -->\n    <div class=\"flex flex-col md:flex-row justify-between items-end mb-12 gap-4 border-b border-slate-200 pb-4\">\n      <div>\n        <span class=\"text-jlm-blue font-bold tracking-widest text-xs uppercase mb-1 block\">Pusat Informasi<\/span>\n        <h2 class=\"text-3xl font-bold text-gray-900\">Berita & Pengumuman<\/h2>\n      <\/div>\n      \n    <\/div>\n\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-10\">\n\n      <!-- Left: live posts from develop -->\n      <div class=\"lg:col-span-7 space-y-6\">\n        <div class=\"jlm-news-subhead\">\n          <h3 class=\"text-lg font-bold text-gray-900 flex items-center gap-2\">\n            <span class=\"w-1.5 h-5 bg-jlm-blue block rounded-full\"><\/span>Berita Terkini\n          <\/h3>\n          <a data-jlm-news-all-link=\"true\" href=\"https:\/\/develop.marine.gov.my\/blog\/\" class=\"jlm-news-all-link\">Lihat Semua<\/a>\n        <\/div>\n        <div id=\"jlm2NewsViewport\" class=\"overflow-hidden\" style=\"max-height:420px;\">\n          <div id=\"jlm2NewsList\" class=\"space-y-6\" aria-live=\"polite\">\n            <p class=\"text-sm text-slate-500\">Memuatkan berita terkini\u2026<\/p>\n          <\/div>\n        <\/div>\n        <style id=\"jlm-news-ticker-style\">\n          @keyframes jlmNewsTickerScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }\n          #jlm2NewsList.jlm-news-ticker { animation: jlmNewsTickerScroll linear infinite; }\n          @media (hover: hover) and (pointer: fine) { #jlm2NewsViewport:hover #jlm2NewsList.jlm-news-ticker { animation-play-state: paused; } }\n          #jlm2NewsViewport:focus-within #jlm2NewsList.jlm-news-ticker { animation-play-state: paused; }\n          .jlm-news-subhead { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }\n          .jlm-news-subhead h3 { margin:0; }\n          .jlm-news-all-link { display:inline-flex; min-height:44px; flex:0 0 auto; align-items:center; justify-content:center; padding:8px 16px; border-radius:999px; background:#f1f5f9; color:#0a2b45; font-size:12px; font-weight:600; line-height:1.25; text-decoration:none; transition:background-color .2s ease,color .2s ease; }\n          .jlm-news-all-link:hover, .jlm-news-all-link:focus-visible { background:#0a2b45; color:#fff; }\n          .jlm-news-all-link:focus-visible { outline:3px solid #ffd000; outline-offset:3px; }\n          .jlm-news-thumb { height:112px; }\n          @media (min-width:640px) { .jlm-news-thumb { height:128px; } }\n          @media (max-width:420px) { .jlm-news-subhead { align-items:flex-start; } .jlm-news-all-link { padding-inline:13px; } }\n          @media (prefers-reduced-motion:reduce) { #jlm2NewsList.jlm-news-ticker { animation:none !important; transform:none !important; } .jlm-news-all-link { transition:none; } }\n        <\/style>\n      <\/div>\n\n      <!-- Right: Stacked Announcements & Events -->\n      <div class=\"lg:col-span-5 flex flex-col gap-8\" data-jlm-module-b3=\"current-content-v1\">\n\n        <!-- Announcements Box \u2014 Array-based + NEW badge + Popup -->\n        <div class=\"bg-slate-50 rounded-2xl p-6 border border-slate-200\">\n          <div class=\"flex justify-between items-center mb-4\">\n            <h3 class=\"text-lg font-bold text-gray-900 flex items-center gap-2\">\n              <span class=\"w-1.5 h-5 bg-jlm-gold block rounded-full\"><\/span>Pengumuman Penting\n            <\/h3>\n            <a id=\"jlm2PengumumanAllLink\" style=\"min-height:44px\" href=\"javascript:void(0)\" onclick=\"jlm2OpenModal('pengumuman')\"\n              class=\"text-xs text-jlm-blue hover:underline font-semibold inline-flex min-h-[44px] items-center\">Lihat Semua<\/a>\n          <\/div>\n          <div class=\"space-y-4\" id=\"jlm2PengumumanList\"><\/div>\n        <\/div>\n\n        <!-- Events Timeline Style \u2014 Array-based + NEW badge + Popup -->\n        <div>\n          <div class=\"flex justify-between items-center mb-4\">\n            <h3 class=\"text-lg font-bold text-gray-900 flex items-center gap-2\">\n              <span class=\"w-1.5 h-5 bg-teal-600 block rounded-full\"><\/span>Acara Akan Datang\n            <\/h3>\n            <a id=\"jlm2AcaraAllLink\" style=\"min-height:44px\" href=\"javascript:void(0)\" onclick=\"jlm2OpenModal('acara')\"\n              class=\"text-xs text-teal-600 hover:underline font-semibold inline-flex min-h-[44px] items-center\">Lihat Semua<\/a>\n          <\/div>\n          <div class=\"space-y-4 relative pl-4 border-l-2 border-slate-200 ml-2\" id=\"jlm2AcaraList\"><\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n         UTILITY BANNER - GOVERNMENT PROFESSIONAL STYLE\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"bg-slate-100 py-12 border-t border-slate-200\">\n    <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8\">\n\n      <div class=\"grid grid-cols-1 md:grid-cols-3 gap-5 mb-16\">\n\n        <!-- Card 1: Hubungi Kami -->\n        <div\n          class=\"bg-red-50 border border-red-100 rounded-xl p-8 flex flex-col gap-5 hover:shadow-md transition-all duration-300\">\n          <div class=\"flex items-center gap-3 pb-4 border-b border-red-100\">\n            <div class=\"w-8 h-8 rounded bg-red-600 text-white flex items-center justify-center flex-shrink-0\">\n              <i class=\"fas fa-phone-volume text-xs\"><\/i>\n            <\/div>\n            <span class=\"text-xs font-bold tracking-widest uppercase text-red-600\">Hubungi Kami<\/span>\n          <\/div>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-2xl font-bold text-jlm-navy\">603-3162 9977 \/ 9988<\/p>\n\n          <\/div>\n          <div class=\"flex flex-col gap-2.5 text-xs text-slate-500\">\n            <div class=\"flex items-center gap-2.5\">\n              <i class=\"fas fa-clock text-red-300 w-3\"><\/i>\n              <span>Isnin - Jumaat, 8:00 AM - 5:00 PM<\/span>\n            <\/div>\n            <div class=\"flex items-center gap-2.5\">\n              <i class=\"fas fa-envelope text-red-300 w-3\"><\/i>\n              <span>inquiry@marine.gov.my<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Card 2: Media Sosial -->\n        <div\n          class=\"bg-blue-50 border border-blue-100 rounded-xl p-8 flex flex-col gap-5 hover:shadow-md transition-all duration-300\">\n          <div class=\"flex items-center gap-3 pb-4 border-b border-blue-100\">\n            <div class=\"w-8 h-8 rounded bg-jlm-blue text-white flex items-center justify-center flex-shrink-0\">\n              <i class=\"fas fa-share-alt text-xs\"><\/i>\n            <\/div>\n            <span class=\"text-xs font-bold tracking-widest uppercase text-jlm-blue\">Media Sosial Rasmi<\/span>\n          <\/div>\n          <p class=\"text-xs text-slate-500 leading-relaxed\">Ikuti perkembangan terkini dan pengumuman rasmi Jabatan Laut\n            Malaysia melalui platform berikut:<\/p>\n          <div class=\"flex flex-col gap-1\">\n            <a href=\"https:\/\/www.instagram.com\/jabatanlaut\/\" target=\"_blank\" rel=\"noopener noreferrer\"\n              class=\"flex items-center justify-between py-2 border-b border-blue-100 hover:text-jlm-blue transition group\">\n              <div class=\"flex items-center gap-2.5\">\n                <i class=\"fab fa-instagram text-sm text-slate-400 group-hover:text-pink-500 transition w-4\"><\/i>\n                <span class=\"text-xs text-slate-600\">Instagram<\/span>\n              <\/div>\n              <i class=\"fas fa-arrow-right text-[10px] text-slate-300 group-hover:text-jlm-blue transition\"><\/i>\n            <\/a>\n            <a href=\"https:\/\/www.facebook.com\/JabatanLautMalaysia\/\" target=\"_blank\" rel=\"noopener noreferrer\"\n              class=\"flex items-center justify-between py-2 border-b border-blue-100 hover:text-jlm-blue transition group\">\n              <div class=\"flex items-center gap-2.5\">\n                <i class=\"fab fa-facebook-f text-sm text-slate-400 group-hover:text-blue-600 transition w-4\"><\/i>\n                <span class=\"text-xs text-slate-600\">Facebook<\/span>\n              <\/div>\n              <i class=\"fas fa-arrow-right text-[10px] text-slate-300 group-hover:text-jlm-blue transition\"><\/i>\n            <\/a>\n            <a href=\"https:\/\/www.youtube.com\/@JabatanLautMalaysia\" target=\"_blank\" rel=\"noopener noreferrer\"\n              class=\"flex items-center justify-between py-2 border-b border-blue-100 hover:text-jlm-blue transition group\">\n              <div class=\"flex items-center gap-2.5\">\n                <i class=\"fab fa-youtube text-sm text-slate-400 group-hover:text-red-600 transition w-4\"><\/i>\n                <span class=\"text-xs text-slate-600\">YouTube<\/span>\n              <\/div>\n              <i class=\"fas fa-arrow-right text-[10px] text-slate-300 group-hover:text-jlm-blue transition\"><\/i>\n            <\/a>\n            <a href=\"https:\/\/x.com\/lautmy\" target=\"_blank\" rel=\"noopener noreferrer\"\n              class=\"flex items-center justify-between py-2 border-b border-blue-100 hover:text-jlm-blue transition group\">\n              <div class=\"flex items-center gap-2.5\">\n                <i class=\"fab fa-twitter text-sm text-slate-400 group-hover:text-black transition w-4\"><\/i>\n                <span class=\"text-xs text-slate-600\">X (Twitter)<\/span>\n              <\/div>\n              <i class=\"fas fa-arrow-right text-[10px] text-slate-300 group-hover:text-jlm-blue transition\"><\/i>\n            <\/a>\n            <a href=\"https:\/\/www.tiktok.com\/@jabatanlaut\" target=\"_blank\" rel=\"noopener noreferrer\"\n              class=\"flex items-center justify-between py-2 hover:text-jlm-blue transition group\">\n              <div class=\"flex items-center gap-2.5\">\n                <i class=\"fab fa-tiktok text-sm text-slate-400 group-hover:text-black transition w-4\"><\/i>\n                <span class=\"text-xs text-slate-600\">TikTok<\/span>\n              <\/div>\n              <i class=\"fas fa-arrow-right text-[10px] text-slate-300 group-hover:text-jlm-blue transition\"><\/i>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Card 3: Soalan Lazim -->\n        <div\n          class=\"bg-slate-800 border border-slate-700 rounded-xl p-8 flex flex-col gap-5 hover:shadow-md transition-all duration-300\">\n          <div class=\"flex items-center gap-3 pb-4 border-b border-slate-700\">\n            <div class=\"w-8 h-8 rounded bg-white\/10 text-white flex items-center justify-center flex-shrink-0\">\n              <i class=\"fas fa-question-circle text-xs\"><\/i>\n            <\/div>\n            <span class=\"text-xs font-bold tracking-widest uppercase text-slate-300\">Soalan Lazim<\/span>\n          <\/div>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-base font-bold text-white\">Pusat Bantuan<\/p>\n            <p class=\"text-xs text-slate-400 leading-relaxed\">Dapatkan jawapan mengenai perkhidmatan, lesen pelaut dan\n              perundangan laut Malaysia.<\/p>\n          <\/div>\n          <div class=\"flex flex-col gap-1.5\">\n            <div class=\"flex items-center gap-2.5 text-xs text-slate-400 py-1.5 border-b border-slate-700\">\n              <i class=\"fas fa-minus text-[8px] text-slate-500 w-3\"><\/i>\n              <span>Pendaftaran & Pensijilan Kapal<\/span>\n            <\/div>\n            <div class=\"flex items-center gap-2.5 text-xs text-slate-400 py-1.5 border-b border-slate-700\">\n              <i class=\"fas fa-minus text-[8px] text-slate-500 w-3\"><\/i>\n              <span>Lesen & Perakuan Pelaut<\/span>\n            <\/div>\n            <div class=\"flex items-center gap-2.5 text-xs text-slate-400 py-1.5 border-b border-slate-700\">\n              <i class=\"fas fa-minus text-[8px] text-slate-500 w-3\"><\/i>\n              <span>Perundangan & Akta Maritim<\/span>\n            <\/div>\n            <div class=\"flex items-center gap-2.5 text-xs text-slate-400 py-1.5\">\n              <i class=\"fas fa-minus text-[8px] text-slate-500 w-3\"><\/i>\n              <span>Pemeriksaan & Keselamatan Kapal<\/span>\n            <\/div>\n          <\/div>\n          <a href=\"https:\/\/develop.marine.gov.my\/soalan-lazim-faq\/\"\n            class=\"mt-auto inline-flex items-center gap-2 text-xs font-bold text-white hover:text-jlm-gold transition\">\n            Ke Halaman FAQ <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\n          <\/a>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  \n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     ANNOUNCEMENT POPUP \u2014 2ND REVAMPED (5-DAY EXPIRY)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <style>\n    .jlm2-overlay {\n      position: fixed;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.5);\n      z-index: 100000;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 20px;\n      backdrop-filter: blur(4px);\n    }\n\n    .jlm2-box {\n      background: #fff;\n      border-radius: 16px;\n      max-width: 540px;\n      width: 100%;\n      overflow: hidden;\n      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);\n      animation: jlm2In 0.35s cubic-bezier(.16, 1, .3, 1);\n    }\n\n    @keyframes jlm2In {\n      from {\n        opacity: 0;\n        transform: scale(0.95) translateY(10px)\n      }\n\n      to {\n        opacity: 1;\n        transform: scale(1) translateY(0)\n      }\n    }\n\n    \/* Header \u2014 Gold accent *\/\n    .jlm2-header {\n      background: linear-gradient(135deg, #0a2540 0%, #0f4c81 100%);\n      padding: 20px 24px;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .jlm2-header::before {\n      content: '';\n      position: absolute;\n      top: -30px;\n      right: -30px;\n      width: 120px;\n      height: 120px;\n      background: rgba(251, 191, 36, 0.15);\n      border-radius: 50%;\n    }\n\n    .jlm2-header::after {\n      content: '';\n      position: absolute;\n      bottom: -20px;\n      left: 20px;\n      width: 80px;\n      height: 80px;\n      background: rgba(251, 191, 36, 0.08);\n      border-radius: 50%;\n    }\n\n    .jlm2-header-inner {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 12px;\n    }\n\n    .jlm2-header-left {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .jlm2-icon-wrap {\n      width: 40px;\n      height: 40px;\n      background: rgba(251, 191, 36, 0.2);\n      border: 1px solid rgba(251, 191, 36, 0.3);\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .jlm2-icon-wrap i {\n      color: #fbbf24;\n      font-size: 1rem;\n    }\n\n    .jlm2-header-text {}\n\n    .jlm2-header-badge {\n      font-size: 0.62rem;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: #fbbf24;\n      display: block;\n      margin-bottom: 2px;\n    }\n\n    .jlm2-header-title {\n      color: #fff;\n      font-size: 0.9rem;\n      font-weight: 700;\n      font-family: 'Poppins', sans-serif;\n      line-height: 1.3;\n    }\n\n    .jlm2-close {\n      background: rgba(255, 255, 255, 0.1);\n      border: 1px solid rgba(255, 255, 255, 0.15);\n      color: #fff;\n      width: 30px;\n      height: 30px;\n      border-radius: 8px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 0.8rem;\n      transition: 0.2s;\n      flex-shrink: 0;\n    }\n\n    .jlm2-close:hover {\n      background: rgba(255, 255, 255, 0.2);\n    }\n\n    \/* Body *\/\n    .jlm2-body {\n      padding: 24px;\n    }\n\n    .jlm2-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n\n    .jlm2-meta-date {\n      font-size: 0.72rem;\n      color: #94a3b8;\n      font-family: 'Poppins', sans-serif;\n    }\n\n    .jlm2-meta-dot {\n      width: 3px;\n      height: 3px;\n      background: #cbd5e1;\n      border-radius: 50%;\n    }\n\n    .jlm2-meta-dept {\n      font-size: 0.72rem;\n      color: #94a3b8;\n      font-family: 'Poppins', sans-serif;\n    }\n\n    .jlm2-ann-title {\n      font-size: 1.05rem;\n      font-weight: 700;\n      color: #0a2540;\n      margin-bottom: 10px;\n      font-family: 'Poppins', sans-serif;\n      line-height: 1.4;\n    }\n\n    .jlm2-divider {\n      width: 40px;\n      height: 3px;\n      background: #fbbf24;\n      border-radius: 2px;\n      margin-bottom: 12px;\n    }\n\n    .jlm2-ann-body {\n      font-size: 0.82rem;\n      color: #64748b;\n      line-height: 1.75;\n      font-family: 'Poppins', sans-serif;\n      margin-bottom: 0;\n    }\n\n    \/* Footer *\/\n    .jlm2-footer {\n      padding: 16px 24px;\n      background: #f8fafc;\n      border-top: 1px solid #e2e8f0;\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 12px;\n    }\n\n\n    .jlm2-btn {\n      background: linear-gradient(135deg, #0a2540, #0f4c81);\n      color: #fff;\n      border: none;\n      min-height: 44px;\n      padding: 9px 22px;\n      border-radius: 8px;\n      font-size: 0.78rem;\n      font-weight: 600;\n      cursor: pointer;\n      font-family: 'Poppins', sans-serif;\n      transition: 0.2s;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .jlm2-btn:hover {\n      opacity: 0.9;\n    }\n\n    .jlm2-hidden {\n      display: none !important;\n    }\n\n    @media(max-width:480px) {\n      .jlm2-box {\n        border-radius: 12px;\n      }\n\n      .jlm2-body {\n        padding: 18px;\n      }\n\n      .jlm2-footer {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n      }\n\n      .jlm2-btn {\n        width: 100%;\n        justify-content: center;\n      }\n    }\n  <\/style>\n\n  <div class=\"jlm2-overlay jlm2-hidden\"\n       id=\"jlm2AnnouncementOverlay\"\n       role=\"dialog\"\n       aria-modal=\"true\"\n       aria-labelledby=\"jlm2PopupTitle\"\n       tabindex=\"-1\">\n    <div class=\"jlm2-box\">\n\n      <!-- Header -->\n      <div class=\"jlm2-header\">\n        <div class=\"jlm2-header-inner\">\n          <div class=\"jlm2-header-left\">\n            <div class=\"jlm2-icon-wrap\">\n              <i class=\"fas fa-bullhorn\"><\/i>\n            <\/div>\n            <div class=\"jlm2-header-text\">\n              <!-- \u2605 TUKAR: Label badge -->\n              <span class=\"jlm2-header-badge\">&#9679; Pengumuman Baru<\/span>\n              <!-- \u2605 TUKAR: Sub-tajuk header -->\n              <p class=\"jlm2-header-title\">Jabatan Laut Malaysia<\/p>\n            <\/div>\n          <\/div>\n          <button class=\"jlm2-close\" onclick=\"jlm2ClosePopup()\" aria-label=\"Tutup\">&#x2715;<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Body -->\n      <div class=\"jlm2-body\">\n        <div class=\"jlm2-meta\">\n          <span class=\"jlm2-meta-date\" id=\"jlm2PopupDate\"><\/span>\n          <div class=\"jlm2-meta-dot\"><\/div>\n          <span class=\"jlm2-meta-dept\">Jabatan Laut Malaysia<\/span>\n        <\/div>\n\n        <!-- \u2605 TUKAR: Tajuk pengumuman -->\n        <p class=\"jlm2-ann-title\" id=\"jlm2PopupTitle\">Notis Cuti Umum & Waktu Operasi Pejabat<\/p>\n        <div class=\"jlm2-divider\"><\/div>\n\n        <!-- \u2605 TUKAR: Isi kandungan pengumuman -->\n        <p class=\"jlm2-ann-body\">\n          Jabatan Laut Malaysia ingin memaklumkan bahawa pejabat akan\n          <strong style=\"color:#0a2540;\">ditutup sempena Cuti Umum<\/strong>\n          yang akan datang. Semua permohonan dan urusan rasmi boleh dilakukan\n          melalui portal dalam talian atau diteruskan pada hari bekerja berikutnya.\n          <br><br>\n          Untuk kecemasan maritim, sila hubungi\n          <strong style=\"color:#0f4c81;\">603-3167 0530<\/strong> (24 jam).\n        <\/p>\n      <\/div>\n\n      <!-- Footer -->\n      <div class=\"jlm2-footer\">\n        <button type=\"button\" class=\"jlm2-btn\" onclick=\"jlm2ClosePopup()\">\n          Tutup <i class=\"fas fa-times text-xs\" aria-hidden=\"true\"><\/i>\n        <\/button>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <script>\n    (function () {\n      'use strict';\n\n      var POPUP_ACTIVE = true;\n      var SESSION_KEY = 'jlm2_announcement_dismissed_signature_v2';\n      var overlay = null;\n      var closeButton = null;\n      var previousFocus = null;\n      var previousBodyOverflow = '';\n      var currentSignature = '';\n\n      function normalizedText(selector) {\n        var element = document.querySelector(selector);\n        return element ? element.textContent.replace(\/\\s+\/g, ' ').trim() : '';\n      }\n\n      function announcementSignature() {\n        var links = Array.from(document.querySelectorAll('.jlm2-ann-body a'))\n          .map(function (link) { return link.href; })\n          .join('|');\n        var input = [\n          normalizedText('.jlm2-ann-title'),\n          normalizedText('.jlm2-ann-body'),\n          links\n        ].join('|');\n        var hash = 2166136261;\n        for (var index = 0; index < input.length; index += 1) {\n          hash ^= input.charCodeAt(index);\n          hash = Math.imul(hash, 16777619);\n        }\n        return (hash >>> 0).toString(36);\n      }\n\n      function readDismissedSignature() {\n        try { return sessionStorage.getItem(SESSION_KEY); }\n        catch (error) { return null; }\n      }\n\n      function rememberDismissal(signature) {\n        try { sessionStorage.setItem(SESSION_KEY, signature); }\n        catch (error) { \/* Page-level close still works without storage. *\/ }\n      }\n\n      function openPopup() {\n        if (!overlay) return;\n        previousFocus = document.activeElement;\n        previousBodyOverflow = document.body.style.overflow;\n        overlay.classList.remove('jlm2-hidden');\n        document.body.style.overflow = 'hidden';\n        window.requestAnimationFrame(function () {\n          (closeButton || overlay).focus();\n        });\n      }\n\n      window.jlm2ClosePopup = function () {\n        if (!overlay || overlay.classList.contains('jlm2-hidden')) return;\n        overlay.classList.add('jlm2-hidden');\n        document.body.style.overflow = previousBodyOverflow;\n        rememberDismissal(currentSignature);\n        if (previousFocus && typeof previousFocus.focus === 'function') previousFocus.focus();\n      };\n\n      window.addEventListener('DOMContentLoaded', function () {\n        overlay = document.getElementById('jlm2AnnouncementOverlay');\n        if (!overlay) return;\n        closeButton = overlay.querySelector('.jlm2-close');\n\n        var dateEl = document.getElementById('jlm2PopupDate');\n        if (dateEl) {\n          var date = new Date();\n          var months = ['Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun',\n            'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember'];\n          dateEl.textContent = date.getDate() + ' ' + months[date.getMonth()] + ' ' + date.getFullYear();\n        }\n\n        currentSignature = announcementSignature();\n        if (POPUP_ACTIVE && readDismissedSignature() !== currentSignature) openPopup();\n\n        overlay.addEventListener('click', function (e) {\n          if (e.target === overlay) window.jlm2ClosePopup();\n        });\n        document.addEventListener('keydown', function (event) {\n          if (event.key === 'Escape' && !overlay.classList.contains('jlm2-hidden')) {\n            window.jlm2ClosePopup();\n          }\n        });\n      });\n    })();\n  <\/script>\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     PENGUMUMAN & ACARA \u2014 Data, NEW Badge Logic, Popup Modal (2ND REVAMPED)\n     \u2605 EDIT SENARAI DALAM <script> DI BAWAH SAHAJA \u2605\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <style>\n    .jlm2-modal-overlay {\n      position: fixed;\n      inset: 0;\n      background: rgba(10, 37, 64, 0.6);\n      z-index: 100000;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 16px;\n      backdrop-filter: blur(3px);\n    }\n\n    .jlm2-modal-box {\n      background: #fff;\n      border-radius: 16px;\n      max-width: 640px;\n      width: 100%;\n      max-height: 85vh;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);\n      animation: jlm2ModalIn 0.25s ease;\n    }\n\n    @keyframes jlm2ModalIn {\n      from {\n        opacity: 0;\n        transform: translateY(-12px)\n      }\n\n      to {\n        opacity: 1;\n        transform: translateY(0)\n      }\n    }\n\n    .jlm2-modal-header {\n      background: linear-gradient(135deg, #0a2540, #0f4c81);\n      padding: 18px 24px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      flex-shrink: 0;\n    }\n\n    .jlm2-modal-title {\n      color: #fff;\n      font-size: 1rem;\n      font-weight: 700;\n      font-family: 'Poppins', sans-serif;\n    }\n\n    .jlm2-modal-close {\n      background: rgba(255, 255, 255, 0.1);\n      border: 1px solid rgba(255, 255, 255, 0.15);\n      color: #fff;\n      width: 32px;\n      height: 32px;\n      border-radius: 9px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 0.85rem;\n      flex-shrink: 0;\n      transition: 0.2s;\n    }\n\n    .jlm2-modal-close:hover {\n      background: rgba(255, 255, 255, 0.2);\n    }\n\n    .jlm2-modal-body {\n      padding: 20px 24px;\n      overflow-y: auto;\n      flex: 1;\n      background: #f8fafc;\n    }\n\n    .jlm2-modal-item {\n      background: #fff;\n      border: 1px solid #e2e8f0;\n      border-radius: 12px;\n      padding: 18px;\n      margin-bottom: 12px;\n    }\n\n    .jlm2-modal-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .jlm2-modal-item-date {\n      font-size: 0.7rem;\n      color: #94a3b8;\n      font-family: 'Poppins', sans-serif;\n      margin-bottom: 8px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .jlm2-modal-item-title {\n      font-size: 0.95rem;\n      font-weight: 700;\n      color: #0a2540;\n      margin-bottom: 8px;\n      font-family: 'Poppins', sans-serif;\n      line-height: 1.4;\n    }\n\n    .jlm2-modal-item-detail {\n      font-size: 0.82rem;\n      color: #64748b;\n      line-height: 1.7;\n      font-family: 'Poppins', sans-serif;\n    }\n\n    \/* Module B No. 3: structured announcement information card *\/\n    .jlm2-announcement-card {\n      display: grid;\n      gap: 18px;\n    }\n\n    .jlm2-announcement-date {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      width: fit-content;\n      padding: 7px 11px;\n      border-radius: 999px;\n      background: #eff6ff;\n      color: #1d4ed8;\n      font-size: 12px;\n      font-weight: 700;\n      line-height: 1.35;\n    }\n\n    .jlm2-announcement-title {\n      margin: 0;\n      color: #082f49;\n      font-family: 'Poppins', sans-serif;\n      font-size: clamp(18px, 2vw, 22px);\n      font-weight: 800;\n      line-height: 1.35;\n    }\n\n    .jlm2-announcement-section {\n      display: grid;\n      gap: 8px;\n    }\n\n    .jlm2-announcement-label {\n      color: #64748b;\n      font-size: 11px;\n      font-weight: 800;\n      letter-spacing: .08em;\n      line-height: 1.2;\n      text-transform: uppercase;\n    }\n\n    .jlm2-announcement-description {\n      margin: 0;\n      max-width: 68ch;\n      color: #475569;\n      font-size: 15px;\n      line-height: 1.75;\n    }\n\n    .jlm2-announcement-cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 9px;\n      width: fit-content;\n      min-height: 44px;\n      box-sizing: border-box;\n      padding: 0 18px;\n      border-radius: 10px;\n      background: #0a2540;\n      color: #fff;\n      font-size: 14px;\n      font-weight: 800;\n      text-decoration: none;\n      transition: background-color .2s ease, transform .2s ease;\n    }\n\n    .jlm2-announcement-cta:hover {\n      background: #123f67;\n      color: #fff;\n      transform: translateY(-1px);\n    }\n\n    .jlm2-announcement-cta:focus-visible {\n      outline: 3px solid #facc15;\n      outline-offset: 3px;\n    }\n\n    @media (max-width: 640px) {\n      .jlm2-announcement-card {\n        gap: 16px;\n      }\n\n      .jlm2-announcement-cta {\n        width: 100%;\n      }\n    }\n    \/* Module B No. 3: shared readable body typography *\/\n    .jlm2-event-description,\n    .jlm2-announcement-description {\n      font-family: 'Manrope', sans-serif;\n      font-size: 15px;\n      font-weight: 400;\n      line-height: 1.75;\n      letter-spacing: 0;\n      text-align: justify;\n      text-align-last: left;\n      text-justify: inter-word;\n      overflow-wrap: anywhere;\n    }\n    \/* Module B No. 3: structured event information card *\/\n    .jlm2-event-card {\n      display: grid;\n      gap: 18px;\n    }\n\n    .jlm2-event-date {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      width: fit-content;\n      padding: 7px 11px;\n      border-radius: 999px;\n      background: #ecfeff;\n      color: #0f766e;\n      font-size: 12px;\n      font-weight: 700;\n      line-height: 1.35;\n    }\n\n    .jlm2-event-title {\n      margin: 0;\n      color: #082f49;\n      font-size: clamp(18px, 2vw, 22px);\n      line-height: 1.35;\n      font-weight: 800;\n      font-family: 'Poppins', sans-serif;\n    }\n\n    .jlm2-event-section {\n      display: grid;\n      gap: 8px;\n    }\n\n    .jlm2-event-label {\n      color: #64748b;\n      font-size: 11px;\n      line-height: 1.2;\n      font-weight: 800;\n      letter-spacing: .08em;\n      text-transform: uppercase;\n    }\n\n    .jlm2-event-location {\n      display: grid;\n      grid-template-columns: 20px minmax(0, 1fr);\n      gap: 10px;\n      align-items: start;\n      color: #334155;\n      font-size: 14px;\n      line-height: 1.55;\n    }\n\n    .jlm2-event-location i {\n      margin-top: 3px;\n      color: #0f766e;\n      text-align: center;\n    }\n\n    .jlm2-event-description {\n      margin: 0;\n      max-width: 68ch;\n      color: #475569;\n      font-size: 15px;\n      line-height: 1.75;\n    }\n\n    .jlm2-event-cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 9px;\n      width: fit-content;\n      min-height: 44px;\n      box-sizing: border-box;\n      padding: 0 18px;\n      border-radius: 10px;\n      background: #0a2540;\n      color: #fff;\n      font-size: 14px;\n      font-weight: 800;\n      text-decoration: none;\n      transition: background-color .2s ease, transform .2s ease;\n    }\n\n    .jlm2-event-cta:hover {\n      background: #123f67;\n      color: #fff;\n      transform: translateY(-1px);\n    }\n\n    .jlm2-event-cta:focus-visible {\n      outline: 3px solid #facc15;\n      outline-offset: 3px;\n    }\n\n    @media (max-width: 640px) {\n      .jlm2-event-card {\n        gap: 16px;\n      }\n\n      .jlm2-event-cta {\n        width: 100%;\n      }\n    }\n    .jlm2-new-badge {\n      background: #e63946;\n      color: #fff;\n      font-size: 0.6rem;\n      font-weight: 700;\n      padding: 2px 7px;\n      border-radius: 5px;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-left: 8px;\n      display: inline-block;\n      vertical-align: middle;\n    }\n\n    .jlm2-modal-hidden {\n      display: none !important;\n    }\n\n    @media(max-width:480px) {\n      .jlm2-modal-box {\n        max-height: 90vh;\n        border-radius: 14px;\n      }\n\n      .jlm2-modal-body {\n        padding: 16px;\n      }\n\n      .jlm2-modal-header {\n        padding: 16px;\n      }\n    }\n  <\/style>\n\n  <div class=\"jlm2-modal-overlay jlm2-modal-hidden\" id=\"jlm2ModalOverlay\">\n    <div class=\"jlm2-modal-box\">\n      <div class=\"jlm2-modal-header\">\n        <span class=\"jlm2-modal-title\" id=\"jlm2ModalTitle\">Pengumuman<\/span>\n        <button class=\"jlm2-modal-close\" style=\"width:44px;height:44px;min-width:44px;min-height:44px\" onclick=\"jlm2CloseModal()\" aria-label=\"Tutup\">&#x2715;<\/button>\n      <\/div>\n      <div class=\"jlm2-modal-body\" id=\"jlm2ModalBody\"><\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    (function () {\n\n      \/* \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\n         \u2551   SENARAI PENGUMUMAN \u2014 EDIT SINI SAHAJA          \u2551\n         \u2560\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2563\n         \u2551  dateISO    \u2192 WAJIB format \"YYYY-MM-DD\" (utk      \u2551\n         \u2551               kira badge \"BARU\" automatik)        \u2551\n         \u2551  date       \u2192 format papar: \"23 Mei 2026\"         \u2551\n         \u2551  fullDetail \u2192 teks penuh utk popup \"Lihat Semua\"  \u2551\n         \u2551                                                    \u2551\n         \u2551  \u2605 Badge \"BARU\" automatik hilang lepas 7 hari.    \u2551\n         \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d *\/\n\n      var PENGUMUMAN = [];\n      var isEN = document.documentElement.lang.startsWith('en');\n\n      \/* \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\n         \u2551   SENARAI ACARA & PROGRAM \u2014 EDIT SINI SAHAJA     \u2551\n         \u2560\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2563\n         \u2551  badgeBg\/badgeText \u2192 warna badge tarikh kecil     \u2551\n         \u2551  dotColor          \u2192 warna dot bulatan timeline   \u2551\n         \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d *\/\n\n      var ACARA = [{\n          day: \"20\u201322\", month: \"OKT\", monthEN: \"OCT\", badgeBg: \"bg-teal-50\", badgeText: \"text-teal-700\", dotColor: \"border-teal-600\",\n          title: \"Transport Expo Asia 2026 (TXA 2026)\",\n          location: \"Malaysia International Trade and Exhibition Centre (MITEC), Kuala Lumpur\",\n          fullDetail: \"Pameran serantau bertemakan Future On The Move: Accelerating Next-Gen Transport yang menghimpunkan kerajaan, pemain industri dan inovator dalam sektor pengangkutan, mobiliti, logistik dan infrastruktur.\", fullDetailEN: \"A regional exhibition themed Future On The Move: Accelerating Next-Gen Transport, bringing together government, industry players and innovators in the transport, mobility, logistics and infrastructure sectors.\",\n          dateISO: \"2026-10-20\", endDateISO: \"2026-10-22\", date: \"20\u201322 Oktober 2026\", dateEN: \"20\u201322 October 2026\",\n          link: \"https:\/\/txa.my\/\"\n        }];\n\n      \/\/ Tarikh semasa dikira dalam zon Malaysia supaya hasil konsisten untuk semua pelawat.\n      function malaysiaDateISO(value) {\n        var parts = new Intl.DateTimeFormat('en-GB', {\n          timeZone: 'Asia\/Kuala_Lumpur',\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit'\n        }).formatToParts(value || new Date());\n        var values = {};\n        parts.forEach(function (part) {\n          if (part.type !== 'literal') values[part.type] = part.value;\n        });\n        return values.year + '-' + values.month + '-' + values.day;\n      }\n      var malaysiaTodayISO = malaysiaDateISO(new Date());\n      var currentYear = malaysiaTodayISO.slice(0, 4);\n\n      \/\/ Acara kekal dipaparkan hingga hari terakhir dan disusun mengikut tarikh mula.\n      ACARA = ACARA.filter(function (event) {\n        var lastDate = event.endDateISO || event.dateISO;\n        return \/^\\d{4}-\\d{2}-\\d{2}$\/.test(event.dateISO || '') &&\n          \/^\\d{4}-\\d{2}-\\d{2}$\/.test(lastDate || '') &&\n          lastDate >= malaysiaTodayISO;\n      }).sort(function (a, b) {\n        return a.dateISO.localeCompare(b.dateISO);\n      });\n\n      \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n         JANGAN EDIT KOD DI BAWAH INI\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n      \/\/ \u2500\u2500 Live fetch: Pengumuman Penting (WP category 28) \u2500\u2500\n      fetch(\"\/wp-json\/wp\/v2\/posts?per_page=10&categories=28&_fields=date,link,title.rendered,excerpt.rendered&orderby=date&order=desc\", { headers: { Accept: \"application\/json\" }, credentials: \"same-origin\" })\n        .then(function(r){ if(!r.ok) throw new Error(\"HTTP \"+r.status); return r.json(); })\n        .then(function(posts){\n          PENGUMUMAN = (posts || []).map(function(post){\n            var d = document.createElement('div');\n            d.innerHTML = (post.excerpt && post.excerpt.rendered) || '';\n            var text = (d.textContent || '').replace(\/\\s+\/g, ' ').trim();\n            var iso = (post.date || '').slice(0, 10);\n            var dt = new Date(post.date);\n            var dateDisp = new Intl.DateTimeFormat(isEN ? 'en-GB' : 'ms-MY', { day: 'numeric', month: 'short', year: 'numeric' }).format(dt);\n            var d2 = document.createElement('div');\n            d2.innerHTML = (post.title && post.title.rendered) || '';\n            return {\n              title: d2.textContent || (isEN ? 'Announcement' : 'Pengumuman'),\n              desc: text.length > 110 ? text.slice(0, 110).replace(\/\\s+\\S*$\/, '') + '\u2026' : text,\n              fullDetail: text,\n              dateISO: iso,\n              date: dateDisp,\n              link: post.link\n            };\n          }).filter(function (announcement) {\n            return announcement.dateISO.slice(0, 4) === currentYear;\n          }).sort(function (a, b) {\n            return b.dateISO.localeCompare(a.dateISO);\n          });\n          renderPengumumanList();\n        })\n        .catch(function(){ \/* keep empty-state message already rendered *\/ });\n\n      function isNew(dateISO) {\n        var posted = new Date(dateISO + 'T00:00:00');\n        var now = new Date();\n        var diffDays = (now - posted) \/ (1000 * 60 * 60 * 24);\n        return diffDays >= 0 && diffDays <= 7;\n      }\n      function newBadgeHTML(dateISO) {\n        return isNew(dateISO) ? '<span class=\"jlm2-new-badge\">0<\/span>' : '';\n      }\n\n      \/\/ \u2500\u2500 Render: Pengumuman list (homepage, 2 teratas \u2014 match original layout) \u2500\u2500\n      function renderPengumumanList() {\n        var listEl = document.getElementById('jlm2PengumumanList');\n        if (!listEl) return;\n        var allLink = document.getElementById('jlm2PengumumanAllLink');\n        if (allLink) allLink.hidden = !PENGUMUMAN.length;\n        var html = '';\n        if (!PENGUMUMAN.length) {\n          listEl.innerHTML = '<p class=\"text-xs text-slate-500\">' + (isEN ? 'No current official announcements to display.' : 'Tiada pengumuman rasmi semasa untuk dipaparkan.') + '<\/p>';\n          return;\n        }\n        PENGUMUMAN.slice(0, 2).forEach(function (p) {\n          html += '<div class=\"flex gap-3 items-start\">' +\n            '<div class=\"w-2 h-2 rounded-full bg-jlm-gold mt-2 flex-shrink-0\"><\/div>' +\n            '<div>' +\n            '<h4 class=\"text-sm font-bold text-gray-900 inline\">' + p.title + '<\/h4>' + newBadgeHTML(p.dateISO) +\n            '<p class=\"text-xs text-gray-500 mt-1\">' + p.desc + '<\/p>' +\n            '<\/div>' +\n            '<\/div>';\n        });\n        listEl.innerHTML = html;\n      }\n\n      \/\/ \u2500\u2500 Render: Acara list (homepage, 2 teratas \u2014 match original timeline layout) \u2500\u2500\n      function renderAcaraList() {\n        var listEl = document.getElementById('jlm2AcaraList');\n        if (!listEl) return;\n        var allLink = document.getElementById('jlm2AcaraAllLink');\n        if (allLink) allLink.hidden = !ACARA.length;\n        var html = '';\n        if (!ACARA.length) {\n          listEl.innerHTML = '<p class=\"text-xs text-slate-500\">' + (isEN ? 'No upcoming events to display.' : 'Tiada acara akan datang untuk dipaparkan.') + '<\/p>';\n          return;\n        }\n        ACARA.slice(0, 2).forEach(function (e) {\n          html += '<div class=\"relative pl-6\">' +\n            '<div class=\"absolute -left-[21px] top-1 w-4 h-4 rounded-full bg-white border-2 ' + e.dotColor + '\"><\/div>' +\n            '<div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm hover:shadow-md transition\">' +\n            '<div class=\"flex justify-between items-start mb-1\">' +\n            '<h4 class=\"text-sm font-bold text-gray-900\">' + e.title + newBadgeHTML(e.dateISO) + '<\/h4>' +\n            '<span class=\"text-[10px] font-bold ' + e.badgeBg + ' ' + e.badgeText + ' px-2 py-0.5 rounded flex-shrink-0 ml-2\">' + e.day + ' ' + (isEN ? (e.monthEN || e.month) : e.month) + '<\/span>' +\n            '<\/div>' +\n            '<p class=\"text-xs text-gray-500\"><i class=\"fas fa-map-marker-alt mr-1\"><\/i>' + e.location + '<\/p>' +\n            '<\/div>' +\n            '<\/div>';\n        });\n        listEl.innerHTML = html;\n      }\n\n      \/\/ \u2500\u2500 Modal: Render full list bila \"Lihat Semua\" diklik \u2500\u2500\n      function renderModalContent(type) {\n        var titleEl = document.getElementById('jlm2ModalTitle');\n        var bodyEl = document.getElementById('jlm2ModalBody');\n        var html = '';\n\n        if (type === 'pengumuman') {\n          titleEl.textContent = isEN ? 'All Announcements' : 'Semua Pengumuman';\n          PENGUMUMAN.forEach(function (p) {\n            html += '<article class=\"jlm2-modal-item jlm2-announcement-card\">' +\n              '<div class=\"jlm2-announcement-date\"><i class=\"far fa-calendar\" aria-hidden=\"true\"><\/i><span>' + (isEN ? (p.dateEN || p.date) : p.date) + '<\/span>' + newBadgeHTML(p.dateISO) + '<\/div>' +\n              '<h3 class=\"jlm2-announcement-title\">' + p.title + '<\/h3>' +\n              '<div class=\"jlm2-announcement-section\">' +\n                '<span class=\"jlm2-announcement-label\">' + (isEN ? 'Announcement Details' : 'Butiran Pengumuman') + '<\/span>' +\n                '<p class=\"jlm2-announcement-description\">' + p.fullDetail + '<\/p>' +\n              '<\/div>' +\n              (p.link ? '<a class=\"jlm2-announcement-cta\" href=\"' + p.link + '\" target=\"_blank\" rel=\"noopener noreferrer\"><span>' + (isEN ? 'Read full announcement' : 'Baca pengumuman penuh') + '<\/span><i class=\"fas fa-external-link-alt\" aria-hidden=\"true\"><\/i><\/a>' : '') +\n              '<\/article>';\n          });\n        } else if (type === 'acara') {\n          titleEl.textContent = isEN ? 'All Events & Programs' : 'Semua Acara & Program';\n          ACARA.forEach(function (e) {\n            html += '<article class=\"jlm2-modal-item jlm2-event-card\">' +\n              '<div class=\"jlm2-event-date\"><i class=\"far fa-calendar\" aria-hidden=\"true\"><\/i><span>' + (isEN ? (e.dateEN || e.date) : e.date) + '<\/span>' + newBadgeHTML(e.dateISO) + '<\/div>' +\n              '<h3 class=\"jlm2-event-title\">' + e.title + '<\/h3>' +\n              '<div class=\"jlm2-event-section\">' +\n                '<span class=\"jlm2-event-label\">' + (isEN ? 'Location' : 'Lokasi') + '<\/span>' +\n                '<div class=\"jlm2-event-location\"><i class=\"fas fa-map-marker-alt\" aria-hidden=\"true\"><\/i><span>' + e.location + '<\/span><\/div>' +\n              '<\/div>' +\n              '<div class=\"jlm2-event-section\">' +\n                '<span class=\"jlm2-event-label\">' + (isEN ? 'Description' : 'Penerangan') + '<\/span>' +\n                '<p class=\"jlm2-event-description\">' + (isEN ? (e.fullDetailEN || e.fullDetail) : e.fullDetail) + '<\/p>' +\n              '<\/div>' +\n              (e.link ? '<a class=\"jlm2-event-cta\" href=\"' + e.link + '\" target=\"_blank\" rel=\"noopener noreferrer\"><span>' + (isEN ? 'View official information' : 'Lihat maklumat rasmi') + '<\/span><i class=\"fas fa-external-link-alt\" aria-hidden=\"true\"><\/i><\/a>' : '') +\n              '<\/article>';\n          });\n        }\n        bodyEl.innerHTML = html || ('<p class=\"text-sm text-slate-500\">' + (isEN ? 'No official records to display.' : 'Tiada rekod rasmi untuk dipaparkan.') + '<\/p>');\n      }\n\n      \/\/ \u2500\u2500 Modal open\/close \u2500\u2500\n      window.jlm2OpenModal = function (type) {\n        renderModalContent(type);\n        var overlay = document.getElementById('jlm2ModalOverlay');\n        if (overlay.parentElement !== document.body) { document.body.appendChild(overlay); }\n        overlay.classList.remove('jlm2-modal-hidden');\n        document.body.style.overflow = 'hidden';\n      };\n      window.jlm2CloseModal = function () {\n        var overlay = document.getElementById('jlm2ModalOverlay');\n        overlay.classList.add('jlm2-modal-hidden');\n        document.body.style.overflow = '';\n      };\n      document.addEventListener('click', function (e) {\n        if (e.target && e.target.id === 'jlm2ModalOverlay') window.jlm2CloseModal();\n      });\n      document.addEventListener('keydown', function (e) {\n        if (e.key === 'Escape') {\n          var overlay = document.getElementById('jlm2ModalOverlay');\n          if (overlay && !overlay.classList.contains('jlm2-modal-hidden')) window.jlm2CloseModal();\n        }\n      });\n\n      renderPengumumanList();\n      renderAcaraList();\n\n    })();\n  <\/script>\n<\/div>\n\n<script id=\"jlm-revamp-live-news\">\n(() => {\n  const root = document.getElementById(\"jlm-revamp-home\");\n  if (!root) return;\n\n  const list = root.querySelector(\"#jlm2NewsList\");\n  if (!list) return;\n\n  const escapeHtml = (value = \"\") => {\n    const node = document.createElement(\"div\");\n    node.textContent = String(value);\n    return node.innerHTML;\n  };\n\n  const stripHtml = (value = \"\") => {\n    const node = document.createElement(\"div\");\n    node.innerHTML = value;\n    return (node.textContent || \"\").trim();\n  };\n\n  const fallbackImage =\n    \"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/07\/jabatan-laut-main-slider1-opt.webp\";\n\n  const postsPromise = fetch(\"\/wp-json\/wp\/v2\/posts?per_page=6&_embed=wp%3Afeaturedmedia&_fields=date,link,title.rendered,excerpt.rendered,_links,_embedded.wp%3Afeaturedmedia.source_url&orderby=date&order=desc&categories=22&_=\" + Date.now(), {\n      headers: { Accept: \"application\/json\" },\n      credentials: \"same-origin\"\n    }).then((response) => {\n      if (!response.ok) throw new Error(\"HTTP \" + response.status);\n      return response.json();\n    });\n\n  postsPromise.then((posts) => {\n      if (!Array.isArray(posts) || posts.length === 0) {\n        list.innerHTML =\n          '<p class=\"text-sm text-slate-500\">Tiada berita terkini untuk dipaparkan.<\/p>';\n        return;\n      }\n\n      const cardsHtml = posts.map((post) => {\n        const media = post?._embedded?.[\"wp:featuredmedia\"]?.[0];\n        const image = media?.source_url || fallbackImage;\n        const title = escapeHtml(stripHtml(post?.title?.rendered || \"Berita JLM\"));\n        const excerpt = escapeHtml(window.jlmCleanExcerpt(post?.excerpt?.rendered || \"\"));\n        const link = escapeHtml(post?.link || \"https:\/\/develop.marine.gov.my\/blog\/\");\n        const date = new Intl.DateTimeFormat(\"ms-MY\", {\n          day: \"numeric\",\n          month: \"short\",\n          year: \"numeric\"\n        }).format(new Date(post.date));\n\n        return `\n          <article class=\"flex flex-col sm:flex-row gap-6 bg-white p-4 rounded-2xl border border-slate-100 hover:shadow-lg transition group\">\n            <a class=\"sm:w-48 jlm-news-thumb flex-shrink-0 overflow-hidden rounded-xl\" href=\"${link}\">\n              <img decoding=\"async\" src=\"${escapeHtml(image)}\" alt=\"\" loading=\"lazy\"\n                class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-500\">\n            <\/a>\n            <div class=\"flex flex-col justify-center py-2\">\n              <time class=\"text-xs font-bold text-jlm-blue uppercase tracking-wide mb-2\">${date}<\/time>\n              <h4 class=\"text-lg font-bold text-gray-900 mb-2 group-hover:text-jlm-blue transition-colors line-clamp-2\">\n                <a href=\"${link}\">${title}<\/a>\n              <\/h4>\n              <p class=\"text-sm text-gray-500 line-clamp-2 mb-3 hidden sm:block\">${excerpt}<\/p>\n              <a href=\"${link}\" class=\"text-xs font-semibold text-gray-500 hover:text-jlm-navy flex items-center gap-1\">\n                Baca penuh <span aria-hidden=\"true\">\u2192<\/span>\n              <\/a>\n            <\/div>\n          <\/article>`;\n      }).join(\"\");\n\n      list.innerHTML = cardsHtml + cardsHtml;\n      [...list.querySelectorAll(\"article\")].slice(posts.length).forEach((card) => {\n        card.setAttribute(\"aria-hidden\", \"true\");\n        card.querySelectorAll(\"a, button, [tabindex]\").forEach((control) => control.setAttribute(\"tabindex\", \"-1\"));\n      });\n      list.classList.add(\"jlm-news-ticker\");\n      list.style.animationDuration = (posts.length * 8) + \"s\";\n    })\n    .catch(() => {\n      list.innerHTML =\n        '<p class=\"text-sm text-red-700\">Berita tidak dapat dimuatkan. Sila cuba lagi.<\/p>';\n    });\n})();\n<\/script>\n\n<script id=\"jlm-home-carousel-a11y-v1\">(function(){function label(selector,text){document.querySelectorAll(selector).forEach(function(button){if(!button.getAttribute(\"aria-label\"))button.setAttribute(\"aria-label\",text);});}function init(){label(\"button[onclick=\\\"jlm2BannerPrev()\\\"]\",\"Previous news\");label(\"button[onclick=\\\"jlm2BannerNext()\\\"]\",\"Next news\");label(\"button[onclick=\\\"jlmPromoPrev()\\\"]\",\"Previous announcement\");label(\"button[onclick=\\\"jlmPromoNext()\\\"]\",\"Next announcement\");}if(document.readyState===\"loading\")document.addEventListener(\"DOMContentLoaded\",init);else init();})();<\/script>\n\n<script id=\"jlm-home-news-thumbnail-a11y-v1\">\n(function(){\n  function applyNewsThumbnailLabels(){\n    var isEnglish = (document.documentElement.lang || '').toLowerCase().indexOf('en') === 0;\n    document.querySelectorAll('a.jlm-news-thumb').forEach(function(link){\n      var article = link.closest('article');\n      var title = article && article.querySelector('h1,h2,h3,h4,h5,h6');\n      var text = title ? title.textContent.replace(\/\\s+\/g, ' ').trim() : '';\n      if (!text) return;\n      link.setAttribute('data-no-translation', '');\n      link.classList.add('notranslate');\n      link.setAttribute('aria-label', (isEnglish ? 'Open news: ' : 'Buka berita: ') + text);\n    });\n  }\n  applyNewsThumbnailLabels();\n  var list = document.getElementById('jlm2NewsList');\n  if (list && !list.dataset.jlmNewsA11yObserved) {\n    list.dataset.jlmNewsA11yObserved = '1';\n    new MutationObserver(applyNewsThumbnailLabels).observe(list, {childList:true, subtree:true});\n  }\n})();\n<\/script>\n<script id=\"jlm-home-news-thumbnail-a11y-v2\">\n(function(){\n  function refreshNewsThumbnailLabels(){\n    var isEnglish=(document.documentElement.lang||'').toLowerCase().indexOf('en')===0;\n    document.querySelectorAll('a.jlm-news-thumb').forEach(function(link){\n      var article=link.closest('article');\n      var title=article&&article.querySelector('h1,h2,h3,h4,h5,h6');\n      var text=title?title.textContent.replace(\/\\s+\/g,' ').trim():'';\n      if(text) link.setAttribute('aria-label',(isEnglish?'Open news: ':'Buka berita: ')+text);\n    });\n  }\n  [0,800,2500,5000].forEach(function(delay){window.setTimeout(refreshNewsThumbnailLabels,delay);});\n  var list=document.getElementById('jlm2NewsList');\n  if(list&&!list.dataset.jlmNewsA11yObservedV2){\n    list.dataset.jlmNewsA11yObservedV2='1';\n    new MutationObserver(refreshNewsThumbnailLabels).observe(list,{childList:true,subtree:true,characterData:true});\n  }\n})();\n<\/script>\n<script id=\"jlm-home-news-en-links-v1\">\n(function(){\n  function localiseHomeNewsLinks(){\n    if((document.documentElement.lang||'').toLowerCase().indexOf('en')!==0) return;\n    document.querySelectorAll('#jlm2NewsList article').forEach(function(article){\n      article.querySelectorAll('a[href]').forEach(function(link){\n        var url;\n        try { url=new URL(link.getAttribute('href'),window.location.origin); } catch(e) { return; }\n        if(url.origin!==window.location.origin||url.pathname.indexOf('\/en\/')===0) return;\n        link.setAttribute('href','\/en'+url.pathname+url.search+url.hash);\n        if(link.textContent.replace(\/\\s+\/g,' ').trim().indexOf('Baca penuh')===0) link.textContent='Read more \u2192';\n      });\n    });\n  }\n  localiseHomeNewsLinks();\n  var list=document.getElementById('jlm2NewsList');\n  if(list&&!list.dataset.jlmNewsEnLinksObserved){\n    list.dataset.jlmNewsEnLinksObserved='1';\n    new MutationObserver(localiseHomeNewsLinks).observe(list,{childList:true,subtree:true});\n  }\n})();\n<\/script>\n<script id=\"jlm-home-announcement-en-v1\">\n(function(){\n  function localiseAnnouncement(){\n    if((document.documentElement.lang||'').toLowerCase().indexOf('en')!==0) return;\n    var overlay=document.getElementById('jlm2AnnouncementOverlay');\n    if(!overlay) return;\n    var title=overlay.querySelector('#jlm2PopupTitle');\n    var body=overlay.querySelector('.jlm2-ann-body');\n    if(title) title.textContent='Public Holiday Notice & Office Operating Hours';\n    if(body) body.innerHTML='The Malaysia Marine Department wishes to inform the public that its offices will be <strong style=\"color:#0a2540;\">closed in conjunction with the upcoming public holiday<\/strong>. All applications and official matters may be completed through the online portal or continued on the following working day.<br><br>For maritime emergencies, please call <strong style=\"color:#0f4c81;\">603-3167 0530<\/strong> (24 hours).';\n  }\n  [0,800,2500,5000].forEach(function(delay){window.setTimeout(localiseAnnouncement,delay);});\n})();\n<\/script>\n<script id=\"jlm-home-announcement-en-v2\">\n(function(){\n  function fixAnnouncementSpacing(){\n    if((document.documentElement.lang||'').toLowerCase().indexOf('en')!==0)return;\n    var body=document.querySelector('#jlm2AnnouncementOverlay .jlm2-ann-body');\n    if(body)body.innerHTML='The Malaysia Marine Department wishes to inform the public that its offices will be&nbsp;<strong style=\"color:#0a2540;\">closed in conjunction with the upcoming public holiday<\/strong>. All applications and official matters may be completed through the online portal or continued on the following working day.<br><br>For maritime emergencies, please call&nbsp;<strong style=\"color:#0f4c81;\">603-3167 0530<\/strong>&nbsp;(24 hours).';\n  }\n  [0,800,2500,5000].forEach(function(delay){window.setTimeout(fixAnnouncementSpacing,delay);});\n})();\n<\/script>\n<script id=\"jlm-home-copy-en-v1\">\n(function(){\n  function localiseHomeCopy(){\n    if((document.documentElement.lang||'').toLowerCase().indexOf('en')!==0)return;\n    document.querySelectorAll('body *').forEach(function(el){\n      if(el.children.length) return;\n      var text=el.textContent.replace(\/\\s+\/g,' ').trim();\n      if(text==='Pengumuman Rasmi') el.textContent='Official Announcements';\n      else if(text==='Notis & Makluman Terkini') el.textContent='Latest Notices & Announcements';\n    });\n    var modalTitle=document.getElementById('jlm2ModalTitle');\n    if(modalTitle) modalTitle.textContent='Announcement';\n  }\n  [0,800,2500,5000].forEach(function(delay){window.setTimeout(localiseHomeCopy,delay);});\n})();\n<\/script><script id=\"jlm-popup-spacing-en-v3\">(function(){if((document.documentElement.lang||\"\").toLowerCase().indexOf(\"en\")!==0)return;function f(){var b=document.querySelector(\"#jlm2AnnouncementOverlay .jlm2-ann-body\");if(b)b.innerHTML=\"The Malaysia Marine Department wishes to inform the public that its offices will be&nbsp;<strong style=\"color:#0a2540;\">closed in conjunction with the upcoming public holiday<\/strong>. All applications and official matters may be completed through the online portal or continued on the following working day.<br><br>For maritime emergencies, please call&nbsp;<strong style=\"color:#0f4c81;\">603-3167 0530<\/strong>&nbsp;(24 hours).\"}f();document.addEventListener(\"DOMContentLoaded\",f,{once:true})})();<\/script><script id=\"jlm-home-announcement-feed-en-v1\">(function(){if((document.documentElement.lang||\"\").toLowerCase().indexOf(\"en\")!==0)return;function f(){document.querySelectorAll(\"#jlm2PengumumanList .flex.gap-3\").forEach(function(x){var h=x.querySelector(\"h4\"),p=x.querySelector(\"p\");if(h&&h.textContent.trim()===\"PENSIJILAN ISO 9001:2015 QMS\"&&p)p.textContent=\"ISO 9001:2015 QMS certification covering Maritime Industrial Control, Maritime Operations, Maritime Traffic and Aids to Navigation, and Ship Registration Management.\"})}f();[700,2200,4500].forEach(function(x){setTimeout(f,x)})})();<\/script><style id=\"jlm-popup-en-spacing-style-v1\">html[lang^=\"en\"] #jlm2AnnouncementOverlay .jlm2-ann-body strong[style*=\"0a2540\"]::before,html[lang^=\"en\"] #jlm2AnnouncementOverlay .jlm2-ann-body strong[style*=\"0f4c81\"]::before{content:\"\\00a0\"}html[lang^=\"en\"] #jlm2AnnouncementOverlay .jlm2-ann-body strong[style*=\"0f4c81\"]::after{content:\"\\00a0\"}<\/style><script id=\"jlm-home-events-en-v1\">(function(){if((document.documentElement.lang||\"\").toLowerCase().indexOf(\"en\")!==0)return;function f(){document.querySelectorAll(\"#jlm2EventList span\").forEach(function(e){if(e.textContent.trim()===\"20\u201322 OKT\")e.textContent=\"20\u201322 OCT\"})}f();[700,2200].forEach(function(x){setTimeout(f,x)})})();<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Selamat Datang Ke JABATAN LAUTMALAYSIA &#8220;Safer Ships, Secure Ports, Cleaner Seas&#8221; KETAHUI LEBIH LANJUT 45 Kapal &#038; Bot 40 Rumah Api 17 Jeti Penumpang 5 Pusat VTMIS \/ Pusat VTS 723,790 Jumlah Pelawat Pautan Pantas Akses Perkhidmatan Kami Notis &#038; Pekeliling Maklumat terkini mengenai notis, pekeliling dan pemakluman rasmi. Perundangan Akta, peraturan dan undang-undang berkaitan [&hellip;]<\/p>\n","protected":false},"author":4713,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-34475","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\r\n<title>Home - Jabatan Laut Malaysia<\/title>\r\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<meta property=\"og:locale\" content=\"en_GB\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Laman Utama - Jabatan Laut Malaysia\" \/>\r\n<meta property=\"og:description\" content=\"Selamat Datang Ke JABATAN LAUTMALAYSIA &#8220;Safer Ships, Secure Ports, Cleaner Seas&#8221; KETAHUI LEBIH LANJUT 45 Kapal &#038; Bot 40 Rumah Api 17 Jeti Penumpang 5 Pusat VTMIS \/ Pusat VTS 723,790 Jumlah Pelawat Pautan Pantas Akses Perkhidmatan Kami Notis &#038; Pekeliling Maklumat terkini mengenai notis, pekeliling dan pemakluman rasmi. Perundangan Akta, peraturan dan undang-undang berkaitan [&hellip;]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/develop.marine.gov.my\/en\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Jabatan Laut Malaysia\" \/>\r\n<meta property=\"article:modified_time\" content=\"2026-09-05T06:34:48+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/07\/jabatan-laut-main-slider1-opt.webp\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"19 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/\",\"url\":\"https:\\\/\\\/develop.marine.gov.my\\\/\",\"name\":\"Laman Utama - Jabatan Laut Malaysia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/develop.marine.gov.my\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/jabatan-laut-main-slider1-opt.webp\",\"datePublished\":\"2026-07-20T14:28:04+00:00\",\"dateModified\":\"2026-09-05T06:34:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/develop.marine.gov.my\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#primaryimage\",\"url\":\"https:\\\/\\\/develop.marine.gov.my\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/jabatan-laut-main-slider1-opt.webp\",\"contentUrl\":\"https:\\\/\\\/develop.marine.gov.my\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/jabatan-laut-main-slider1-opt.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Utama\",\"item\":\"https:\\\/\\\/develop.marine.gov.my\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laman Utama\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#website\",\"url\":\"https:\\\/\\\/develop.marine.gov.my\\\/\",\"name\":\"Jabatan Laut Malaysia\",\"description\":\"Laman Web Rasmi Jabatan Laut Malaysia\",\"publisher\":{\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/develop.marine.gov.my\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#organization\",\"name\":\"Jabatan Laut Malaysia\",\"url\":\"https:\\\/\\\/develop.marine.gov.my\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/develop.marine.gov.my\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Logo-JLM-PNG.png\",\"contentUrl\":\"https:\\\/\\\/develop.marine.gov.my\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Logo-JLM-PNG.png\",\"width\":477,\"height\":660,\"caption\":\"Jabatan Laut Malaysia\"},\"image\":{\"@id\":\"https:\\\/\\\/develop.marine.gov.my\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - Jabatan Laut Malaysia","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_GB","og_type":"article","og_title":"Laman Utama - Jabatan Laut Malaysia","og_description":"Selamat Datang Ke JABATAN LAUTMALAYSIA &#8220;Safer Ships, Secure Ports, Cleaner Seas&#8221; KETAHUI LEBIH LANJUT 45 Kapal &#038; Bot 40 Rumah Api 17 Jeti Penumpang 5 Pusat VTMIS \/ Pusat VTS 723,790 Jumlah Pelawat Pautan Pantas Akses Perkhidmatan Kami Notis &#038; Pekeliling Maklumat terkini mengenai notis, pekeliling dan pemakluman rasmi. Perundangan Akta, peraturan dan undang-undang berkaitan [&hellip;]","og_url":"https:\/\/develop.marine.gov.my\/en\/","og_site_name":"Jabatan Laut Malaysia","article_modified_time":"2026-09-05T06:34:48+00:00","og_image":[{"url":"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/07\/jabatan-laut-main-slider1-opt.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/develop.marine.gov.my\/","url":"https:\/\/develop.marine.gov.my\/","name":"Laman Utama - Jabatan Laut Malaysia","isPartOf":{"@id":"https:\/\/develop.marine.gov.my\/#website"},"primaryImageOfPage":{"@id":"https:\/\/develop.marine.gov.my\/#primaryimage"},"image":{"@id":"https:\/\/develop.marine.gov.my\/#primaryimage"},"thumbnailUrl":"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/07\/jabatan-laut-main-slider1-opt.webp","datePublished":"2026-07-20T14:28:04+00:00","dateModified":"2026-09-05T06:34:48+00:00","breadcrumb":{"@id":"https:\/\/develop.marine.gov.my\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/develop.marine.gov.my\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/develop.marine.gov.my\/#primaryimage","url":"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/07\/jabatan-laut-main-slider1-opt.webp","contentUrl":"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2026\/07\/jabatan-laut-main-slider1-opt.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/develop.marine.gov.my\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Utama","item":"https:\/\/develop.marine.gov.my\/"},{"@type":"ListItem","position":2,"name":"Laman Utama"}]},{"@type":"WebSite","@id":"https:\/\/develop.marine.gov.my\/#website","url":"https:\/\/develop.marine.gov.my\/","name":"Malaysia Marine Department","description":"Laman Web Rasmi Jabatan Laut Malaysia","publisher":{"@id":"https:\/\/develop.marine.gov.my\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/develop.marine.gov.my\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/develop.marine.gov.my\/#organization","name":"Malaysia Marine Department","url":"https:\/\/develop.marine.gov.my\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/develop.marine.gov.my\/#\/schema\/logo\/image\/","url":"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2022\/12\/Logo-JLM-PNG.png","contentUrl":"https:\/\/develop.marine.gov.my\/wp-content\/uploads\/2022\/12\/Logo-JLM-PNG.png","width":477,"height":660,"caption":"Jabatan Laut Malaysia"},"image":{"@id":"https:\/\/develop.marine.gov.my\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/develop.marine.gov.my\/en\/wp-json\/wp\/v2\/pages\/34475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/develop.marine.gov.my\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/develop.marine.gov.my\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/develop.marine.gov.my\/en\/wp-json\/wp\/v2\/users\/4713"}],"replies":[{"embeddable":true,"href":"https:\/\/develop.marine.gov.my\/en\/wp-json\/wp\/v2\/comments?post=34475"}],"version-history":[{"count":235,"href":"https:\/\/develop.marine.gov.my\/en\/wp-json\/wp\/v2\/pages\/34475\/revisions"}],"predecessor-version":[{"id":40112,"href":"https:\/\/develop.marine.gov.my\/en\/wp-json\/wp\/v2\/pages\/34475\/revisions\/40112"}],"wp:attachment":[{"href":"https:\/\/develop.marine.gov.my\/en\/wp-json\/wp\/v2\/media?parent=34475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}