UPSOKU NAV BAR_2r<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@300;400;500;600;700&display=swap&__ncforminfo=kg2_Afx_POC1QEMZ_zEVpUXhOksCJvLvB9-P3GPF7u1iXevlt_5liN55dqh7KGU-qNl1wQhOjah-Fb0Qj4cidlHrx1wo1f1m&__ncforminfo=sH7QnCPKPr7ANHLVZGTFWXeyDk_rMkJMCh3ayEhklJTIhidvbccgmolgMj7OCMKsLQOJSlpQ5VlgiWvRrY194h5ucmUJT_UuxiXBPJ-h97s=\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --color-primary: #004a87;\n --color-secondary: #00b1ff;\n --color-accent: #01cfcf;\n --color-highlight: #01cfcf;\n --color-light: #e9e8ee;\n --color-bg-light: #f4f3f8;\n --color-bg-white: #ffffff;\n --color-text-dark: #0f172a;\n --color-text-medium: #475569;\n --font-family: 'Barlow', sans-serif;\n }\n\n \/* FLUID TYPOGRAPHY IMPLEMENTATION (10px - 12px) *\/\n html {\n font-size: clamp(10px, 0.2vw + 9.5px, 12px);\n }\n\n \/* Optional: Temporary larger font when accessibility button clicked *\/\n html.font-scale-large {\n font-size: clamp(14px, 0.4vw + 13px, 16px);\n }\n\n body {\n font-family: var(--font-family);\n background: var(--color-bg-light);\n padding-top: 120px;\n }\n\n \/* Navigation Header *\/\n .site-topbar {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n background: var(--color-bg-white);\n box-shadow: 0 2px 20px rgba(0, 74, 135, 0.08);\n z-index: 1000;\n transition: all 0.3s ease;\n }\n\n .site-topbar.elevated {\n box-shadow: 0 4px 30px rgba(0, 74, 135, 0.15);\n }\n\n .header-wrapper {\n max-width: 1400px;\n margin: 0 auto;\n padding: 1.5rem 2rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n min-height: 100px;\n gap: 3rem;\n }\n\n .menu-section {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 2rem;\n }\n\n \/* Button Group - Right Side *\/\n .button-group {\n display: flex;\n gap: 1rem;\n align-items: center;\n }\n\n \/* Logo *\/\n .brand-identity {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .brand-identity img {\n height: 100px;\n width: auto;\n }\n\n \/* Navigation Menu - Center Group *\/\n nav {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .primary-links {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n list-style: none;\n }\n\n .link-wrapper {\n position: relative;\n }\n\n .menu-anchor {\n color: var(--color-text-dark);\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 500;\n padding: 0.7rem 1.2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.3rem;\n transition: all 0.3s ease;\n cursor: pointer;\n white-space: nowrap;\n border: 2px solid var(--color-light);\n border-radius: 8px;\n background: var(--color-bg-white);\n }\n\n .menu-anchor:hover {\n color: var(--color-primary);\n border-color: var(--color-primary);\n background: var(--color-bg-light);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 74, 135, 0.1);\n }\n\n .menu-anchor.current {\n color: var(--color-primary);\n border-color: var(--color-primary);\n background: var(--color-bg-light);\n }\n\n .expand-indicator {\n width: 0;\n height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 5px solid currentColor;\n transition: transform 0.3s ease;\n }\n\n .link-wrapper.expandable:hover .expand-indicator {\n transform: rotate(180deg);\n }\n\n \/* Dropdown Menu *\/\n .submenu-panel {\n position: absolute;\n top: 100%;\n left: 0;\n background: var(--color-bg-white);\n min-width: 220px;\n border-radius: 8px;\n box-shadow: 0 10px 40px rgba(0, 74, 135, 0.15);\n opacity: 0;\n visibility: hidden;\n transform: translateY(-10px);\n transition: all 0.3s ease;\n margin-top: 1rem;\n padding: 0.5rem 0;\n border: 2px solid var(--color-light);\n z-index: 1001;\n }\n\n .link-wrapper:hover .submenu-panel {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n\n .submenu-entry {\n list-style: none;\n }\n\n .submenu-anchor {\n display: block;\n padding: 0.75rem 1.5rem;\n color: var(--color-text-medium);\n text-decoration: none;\n font-size: 1rem;\n font-weight: 400;\n transition: all 0.2s ease;\n }\n\n .submenu-anchor:hover {\n background: var(--color-bg-light);\n color: var(--color-primary);\n padding-left: 2rem;\n }\n\n \/* CTA Button *\/\n .cta-action {\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\n color: white;\n padding: 0.7rem 1.8rem;\n border-radius: 50px;\n text-decoration: none;\n font-weight: 600;\n font-size: 1rem;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(0, 74, 135, 0.2);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n white-space: nowrap;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n cursor: pointer;\n }\n\n .cta-action:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 25px rgba(0, 74, 135, 0.3);\n }\n\n \/* Utility Controls *\/\n .utility-control {\n width: 45px;\n height: 45px;\n border-radius: 8px;\n background: var(--color-bg-white);\n border: 2px solid var(--color-light);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n color: var(--color-primary);\n font-size: 1.3rem;\n }\n\n .utility-control:hover {\n background: var(--color-primary);\n color: white;\n border-color: var(--color-primary);\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(0, 74, 135, 0.2);\n }\n\n .utility-control.enabled {\n background: var(--color-primary);\n color: white;\n border-color: var(--color-primary);\n }\n\n body.monochrome-view {\n filter: grayscale(100%);\n }\n\n \/* Mobile Menu Toggle *\/\n .menu-trigger {\n display: none;\n flex-direction: column;\n gap: 5px;\n cursor: pointer;\n padding: 0.5rem;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n }\n\n .menu-trigger span {\n width: 25px;\n height: 3px;\n background: var(--color-primary);\n border-radius: 3px;\n transition: all 0.3s ease;\n }\n\n \/* Responsive Breakpoints *\/\n\n \/* Small Desktop (1025px - 1200px) *\/\n @media (max-width: 1200px) {\n .header-wrapper {\n max-width: 100%;\n padding: 1.2rem 1.5rem;\n gap: 2rem;\n }\n\n .menu-anchor {\n font-size: 1rem;\n padding: 0.6rem 1rem;\n }\n\n .brand-identity img {\n height: 80px;\n }\n }\n\n \/* Tablet (769px - 1024px) *\/\n @media (max-width: 1024px) {\n body {\n padding-top: 90px;\n }\n\n .header-wrapper {\n padding: 1rem 1.2rem;\n gap: 1.5rem;\n min-height: 90px;\n }\n\n .brand-identity img {\n height: 70px;\n }\n\n .menu-anchor {\n font-size: 0.95rem;\n padding: 0.55rem 0.9rem;\n }\n\n .primary-links {\n gap: 0.4rem;\n }\n\n .cta-action {\n font-size: 0.9rem;\n padding: 0.6rem 1.5rem;\n }\n\n .utility-control {\n width: 42px;\n height: 42px;\n font-size: 1.2rem;\n }\n\n .submenu-anchor {\n font-size: 0.95rem;\n }\n\n .button-group {\n gap: 0.8rem;\n }\n }\n\n \/* Hide mobile menu by default on all screen sizes *\/\n .menu-section {\n display: none;\n }\n\n \/* Mobile (up to 768px) *\/\n @media (max-width: 768px) {\n body {\n padding-top: 70px;\n }\n\n .site-topbar {\n box-shadow: 0 2px 15px rgba(0, 74, 135, 0.1);\n }\n\n .header-wrapper {\n padding: 0.8rem 1rem;\n min-height: 70px;\n grid-template-columns: 1fr auto;\n gap: 1rem;\n }\n\n .brand-identity img {\n height: 50px;\n }\n\n .menu-trigger {\n display: flex;\n }\n\n \/* Hide desktop navigation *\/\n .header-wrapper > nav {\n display: none;\n }\n\n .header-wrapper > .button-group {\n display: none;\n }\n\n \/* Mobile menu section *\/\n .menu-section {\n display: flex;\n position: fixed;\n top: 70px;\n left: 0;\n width: 100%;\n background: var(--color-bg-white);\n flex-direction: column;\n align-items: center;\n padding: 2rem 1rem;\n gap: 1.5rem;\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n box-shadow: 0 10px 40px rgba(0, 74, 135, 0.1);\n max-height: calc(100vh - 70px);\n overflow-y: auto;\n z-index: 999;\n }\n\n .menu-section.visible {\n transform: translateX(0);\n }\n\n .menu-section nav {\n width: 100%;\n }\n\n .menu-section .primary-links {\n flex-direction: column;\n align-items: center;\n gap: 0.8rem;\n width: 100%;\n }\n\n .menu-section .link-wrapper {\n width: 100%;\n max-width: 300px;\n }\n\n .menu-section .menu-anchor {\n width: 100%;\n justify-content: center;\n font-size: 1.05rem;\n padding: 0.85rem 1.2rem;\n }\n\n .menu-section .submenu-panel {\n position: static;\n opacity: 1;\n visibility: visible;\n transform: none;\n box-shadow: none;\n margin-top: 0.5rem;\n padding: 0.5rem 0;\n text-align: center;\n background: var(--color-bg-light);\n border-radius: 4px;\n display: none;\n width: 100%;\n }\n\n .menu-section .link-wrapper.expandable.open .submenu-panel {\n display: block;\n }\n\n .menu-section .link-wrapper.expandable.open .expand-indicator {\n transform: rotate(180deg);\n }\n\n .menu-section .submenu-anchor {\n font-size: 0.95rem;\n padding: 0.7rem 1.2rem;\n }\n\n .menu-section .submenu-anchor:hover {\n padding-left: 1.2rem;\n }\n\n .menu-section .button-group {\n width: 100%;\n flex-direction: column;\n gap: 1rem;\n align-items: center;\n }\n\n .menu-section .cta-action {\n width: 100%;\n max-width: 300px;\n text-align: center;\n padding: 0.85rem 1.5rem;\n font-size: 1.05rem;\n }\n\n .menu-section .utility-control {\n width: 50px;\n height: 50px;\n font-size: 1.4rem;\n }\n\n .menu-trigger.open span:nth-child(1) {\n transform: rotate(45deg) translate(8px, 8px);\n }\n\n .menu-trigger.open span:nth-child(2) {\n opacity: 0;\n }\n\n .menu-trigger.open span:nth-child(3) {\n transform: rotate(-45deg) translate(7px, -7px);\n }\n }\n\n \/* Small Mobile (up to 480px) *\/\n @media (max-width: 480px) {\n .header-wrapper {\n padding: 0.8rem 0.8rem;\n }\n\n .brand-identity img {\n height: 45px;\n }\n\n .menu-section {\n padding: 1.5rem 0.8rem;\n }\n\n .menu-section .link-wrapper {\n max-width: 280px;\n }\n\n .menu-section .menu-anchor {\n font-size: 1rem;\n padding: 0.8rem 1rem;\n }\n\n .menu-section .cta-action {\n max-width: 280px;\n font-size: 1rem;\n padding: 0.8rem 1.3rem;\n }\n\n .menu-section .utility-control {\n width: 48px;\n height: 48px;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n \n <header class=\"site-topbar\" id=\"siteTopbar\">\n <div class=\"header-wrapper\">\n \n <a href=\"#\" class=\"brand-identity\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2022\/02\/Logo-UPSOKU.png\" alt=\"Logo\">\n <\/a>\n\n \n <button class=\"menu-trigger\" id=\"menuTrigger\" aria-label=\"Toggle menu\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/button>\n\n \n <nav>\n <ul class=\"primary-links\">\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/\" class=\"menu-anchor current\">Utama<\/a>\n <\/li>\n <li class=\"link-wrapper expandable\">\n <a class=\"menu-anchor\">\n Mengenai Kami\n <span class=\"expand-indicator\"><\/span>\n <\/a>\n <ul class=\"submenu-panel\">\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pengenalan-ups-oku\/\" class=\"submenu-anchor\">Pengenalan UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pengurusan-ups-oku\/\" class=\"submenu-anchor\">Pengurusan UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pelan-strategik-upsoku\/\" class=\"submenu-anchor\">Pelan Strategik UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/senarai-pegawai-perhubungan-oku-pp-oku-ukm\/\" class=\"submenu-anchor\">Pegawai Perhubungan OKU (PP-OKU)<\/a><\/li>\n <\/ul>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"#\" class=\"menu-anchor\">Kelab OKU<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/aktiviti\/\" class=\"menu-anchor\">Aktiviti<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/forms.gle\/7W2fSb58ARqvjSc67\" class=\"menu-anchor\">Pendaftaran OKU-UKM<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/aduan-maklumbalas\/\" class=\"menu-anchor\">Aduan & Maklumbalas<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/arkib-info-prihatin\/\" class=\"menu-anchor\">Info Prihatin<span class=\"expand-indicator\"><\/span><\/a>\n <ul class=\"submenu-panel\">\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2026<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2025<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2024<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2023<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2022<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2021<\/a><\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/nav>\n\n \n <div class=\"button-group\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/permohonan-sumbangan-tabung-watan-melalui-potongan-gaji\/\" class=\"cta-action\">Sumbangan<\/a>\n\n \n <button class=\"utility-control\" id=\"fontScaler\" title=\"Saiz Teks untuk Rabun\"\n aria-label=\"Toggle text size for visually impaired\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M4 7V4h16v3\"><\/path>\n <path d=\"M9 20h6\"><\/path>\n <path d=\"M12 4v16\"><\/path>\n <\/svg>\n <\/button>\n <button class=\"utility-control\" id=\"visionToggle\" title=\"Mod Buta Warna\"\n aria-label=\"Toggle colorblind mode\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <path d=\"M12 16v-4\"><\/path>\n <path d=\"M12 8h.01\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"menu-section\" id=\"menuSection\">\n <nav>\n <ul class=\"primary-links\">\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/\" class=\"menu-anchor current\">Utama<\/a>\n <\/li>\n <li class=\"link-wrapper expandable\">\n <a class=\"menu-anchor\">\n Mengenai Kami\n <span class=\"expand-indicator\"><\/span>\n <\/a>\n <ul class=\"submenu-panel\">\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pengenalan-ups-oku\/\" class=\"submenu-anchor\">Pengenalan UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pengurusan-ups-oku\/\" class=\"submenu-anchor\">Pengurusan UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pelan-strategik-upsoku\/\" class=\"submenu-anchor\">Pelan Strategik UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/senarai-pegawai-perhubungan-oku-pp-oku-ukm\/\" class=\"submenu-anchor\">Pegawai Perhubungan OKU (PP-OKU)<\/a><\/li>\n <\/ul>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/kelab\/\" class=\"menu-anchor\">Kelab OKU<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/fasiliti_dan_sokongan_oku\/\" class=\"menu-anchor\">Aktiviti<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/forms.gle\/7W2fSb58ARqvjSc67\" class=\"menu-anchor\">Pendaftaran OKU-UKM<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/aduan-maklumbalas\/\" class=\"menu-anchor\">Aduan & Maklumbalas<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/arkib-info-prihatin\/\" class=\"menu-anchor\">Info Prihatin<span class=\"expand-indicator\"><\/span><\/a>\n <ul class=\"submenu-panel\">\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2026<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2025<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2024<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2023<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2022<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2021<\/a><\/li>\n <\/ul>\n <\/ul>\n <\/nav>\n\n <div class=\"button-group\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/permohonan-sumbangan-tabung-watan-melalui-potongan-gaji\/\" class=\"cta-action\">Sumbangan<\/a>\n <button class=\"utility-control\" id=\"fontScalerMobile\" title=\"Saiz Teks untuk Rabun\" aria-label=\"Toggle text size for visually impaired\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M4 7V4h16v3\"><\/path>\n <path d=\"M9 20h6\"><\/path>\n <path d=\"M12 4v16\"><\/path>\n <\/svg>\n <\/button>\n <button class=\"utility-control\" id=\"visionToggleMobile\" title=\"Mod Buta Warna\" aria-label=\"Toggle colorblind mode\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <path d=\"M12 16v-4\"><\/path>\n <path d=\"M12 8h.01\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Sticky header scroll effect\n const siteTopbar = document.getElementById('siteTopbar');\n\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n siteTopbar.classList.add('elevated');\n } else {\n siteTopbar.classList.remove('elevated');\n }\n });\n\n \/\/ Mobile menu toggle\n const menuTrigger = document.getElementById('menuTrigger');\n const menuSection = document.getElementById('menuSection');\n\n menuTrigger.addEventListener('click', () => {\n menuTrigger.classList.toggle('open');\n menuSection.classList.toggle('visible');\n });\n\n \/\/ Mobile dropdown toggle\n const mobileExpandableItems = document.querySelectorAll('.menu-section .expandable .menu-anchor');\n mobileExpandableItems.forEach(anchor => {\n anchor.addEventListener('click', (e) => {\n e.preventDefault();\n const parent = anchor.closest('.expandable');\n parent.classList.toggle('open');\n });\n });\n\n \/\/ Close mobile menu when clicking outside\n document.addEventListener('click', (e) => {\n if (!e.target.closest('.header-wrapper') && !e.target.closest('.menu-section')) {\n menuTrigger.classList.remove('open');\n menuSection.classList.remove('visible');\n }\n });\n\n \/\/ Accessibility Features - Desktop\n const fontScaler = document.getElementById('fontScaler');\n let fontExpanded = false;\n \n fontScaler.addEventListener('click', () => {\n fontExpanded = !fontExpanded;\n fontScaler.classList.toggle('enabled');\n document.documentElement.classList.toggle('font-scale-large');\n \n \/\/ Sync mobile button\n const fontScalerMobile = document.getElementById('fontScalerMobile');\n if (fontExpanded) {\n fontScalerMobile.classList.add('enabled');\n } else {\n fontScalerMobile.classList.remove('enabled');\n }\n });\n\n const visionToggle = document.getElementById('visionToggle');\n let monochromeActive = false;\n \n visionToggle.addEventListener('click', () => {\n monochromeActive = !monochromeActive;\n visionToggle.classList.toggle('enabled');\n document.body.classList.toggle('monochrome-view');\n \n \/\/ Sync mobile button\n const visionToggleMobile = document.getElementById('visionToggleMobile');\n if (monochromeActive) {\n visionToggleMobile.classList.add('enabled');\n } else {\n visionToggleMobile.classList.remove('enabled');\n }\n });\n\n \/\/ Accessibility Features - Mobile\n const fontScalerMobile = document.getElementById('fontScalerMobile');\n \n fontScalerMobile.addEventListener('click', () => {\n fontExpanded = !fontExpanded;\n fontScalerMobile.classList.toggle('enabled');\n document.documentElement.classList.toggle('font-scale-large');\n \n \/\/ Sync desktop button\n if (fontExpanded) {\n fontScaler.classList.add('enabled');\n } else {\n fontScaler.classList.remove('enabled');\n }\n });\n\n const visionToggleMobile = document.getElementById('visionToggleMobile');\n \n visionToggleMobile.addEventListener('click', () => {\n monochromeActive = !monochromeActive;\n visionToggleMobile.classList.toggle('enabled');\n document.body.classList.toggle('monochrome-view');\n \n \/\/ Sync desktop button\n if (monochromeActive) {\n visionToggle.classList.add('enabled');\n } else {\n visionToggle.classList.remove('enabled');\n }\n });\n\n \/\/ Close submenu when clicking outside (desktop)\n document.addEventListener('click', (e) => {\n if (window.innerWidth > 768) {\n const expandableItems = document.querySelectorAll('.header-wrapper .expandable');\n expandableItems.forEach(item => {\n if (!item.contains(e.target)) {\n item.classList.remove('open');\n }\n });\n }\n });\n <\/script>\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dd150a4 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"dd150a4\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"stretch_section":"section-stretched"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-659f4ea\" data-id=\"659f4ea\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-70f533c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"70f533c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-8e046bd\" data-id=\"8e046bd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f6c8cf2 elementor-widget elementor-widget-heading\" data-id=\"f6c8cf2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"#\">Pengurusan UPS-OKU UKM<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7bc26db elementor-tabs-view-vertical elementor-widget elementor-widget-tabs\" data-id=\"7bc26db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1291\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1291\" aria-expanded=\"false\">UPS-OKU<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1291\" aria-expanded=\"false\">UPS-OKU<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1291\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1291\" tabindex=\"0\" hidden=\"false\"><style>\n .directory-wrapper {\n --text-color: #4E4E4E;\n --primary-color: #35387A;\n --button-hover: #969696;\n --bg-color: #f9f9f9;\n --card-bg: #ffffff;\n --border-color: #eeeeee;\n font-family: 'Poppins', sans-serif;\n color: var(--text-color);\n margin: 0 !important;\n padding: 10px !important;\n width: 100% !important;\n display: block !important;\n position: relative !important;\n box-sizing: border-box;\n }\n .directory-wrapper * { box-sizing: border-box; }\n\n .staff-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 30px;\n margin-top: 0 !important;\n padding-top: 0 !important;\n }\n .staff-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease; }\n .staff-image { width: 100%; aspect-ratio: 4 \/ 3; object-fit: cover; object-position: center top; display: block; border-bottom: 1px solid #f0f0f0; background-color: #f0f0f0; }\n .staff-info { padding: 20px 20px 25px 20px; flex-grow: 1; display: flex; flex-direction: column; text-align: left; }\n .staff-name { color: var(--primary-color); font-size: 14px; font-weight: 600; margin-bottom: 4px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0; }\n .staff-position { color: #888; font-size: 11px; font-weight: 500; margin-bottom: 20px; line-height: 1.4; letter-spacing: 0.5px; text-transform: capitalize; }\n .contact-info { margin-bottom: 20px; flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; }\n .contact-item { display: flex; align-items: flex-start; margin-bottom: 8px; color: var(--text-color); font-size: 11px; width: 100%; }\n .contact-item svg { width: 14px; height: 14px; margin-right: 10px; fill: var(--primary-color); flex-shrink: 0; opacity: 0.9; margin-top: 2px; }\n .contact-item a { color: var(--text-color); text-decoration: none; transition: color 0.2s ease; word-break: break-all; }\n .contact-item a:hover { color: var(--primary-color); text-decoration: underline; }\n .job-desc-btn { width: 100%; padding: 12px; background: var(--primary-color); color: white; border: none; border-radius: 4px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; margin-top: auto; text-transform: capitalize; letter-spacing: 0.5px; }\n .job-desc-btn:hover { background: var(--button-hover); }\n \n \/* Modal Styles *\/\n .staff-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(2px); animation: fadeIn 0.2s ease; }\n .staff-modal.active { display: flex; align-items: center; justify-content: center; }\n .staff-modal-content { background: white; padding: 40px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 10px 40px rgba(0,0,0,0.08); max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto; position: relative; animation: slideUp 0.3s ease; }\n .staff-close-btn { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0; }\n .staff-close-btn svg { width: 24px; height: 24px; fill: #999; }\n .modal-header { color: var(--primary-color); font-size: 1.6rem; font-weight: 600; margin-bottom: 5px; margin-top: 0; }\n .modal-position { color: #888; font-size: 1.2rem; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-top: 0; }\n .modal-body { color: var(--text-color); line-height: 1.8; font-size: 1rem; }\n .modal-body h3 { color: var(--primary-color); margin-top: 25px; margin-bottom: 15px; font-size: 1.2rem; font-weight: 500; }\n .modal-body ul { margin-left: 20px; color: #666; }\n .modal-body li { margin-bottom: 8px; }\n\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }\n<\/style>\n\n<div class=\"directory-wrapper\">\n <div class=\"staff-grid dynamic-staff-grid\"><\/div>\n<\/div>\n\n<script>\n{\n const uniqueTabId = 'web_upsoku'; \n\n const staffData = [\n {\n \"Name\": \"Puan Farhana Md Isa\",\n \"Position\": \"Penolong Pendaftar Kanan N10 (FX)\",\n \"Email\": \"farhanamdisa@ukm.edu.my\",\n \"Phone\": \"03-8921 4693\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Farhana-Md-Isa.png\",\n \"JobScope\": \"Hal-Ehwal Pentadbiran UPS-OKU | Pengurusan Kewangan UPS-OKU | Pengurusan Staf OKU | Pengurusan Pelajar OKU | Laporan Bulanan UPS-OKU | Kualiti Pengurusan Sumber Manusia UPS-OKU | Perkhidmatan Jurubahasa Isyarat | Pengurusan pelaksanaan selenggara dan naik taraf kemudahan OKU | Memantau penyelarasan Pegawai Perhubungan OKU (PP-OKU) | Pengurusan dan Pemantauan Bantuan Kewangan OKU (BKOKU) | Setiausaha Mesyuarat Jawatankuasa Pelaksanaan Polisi Inklusif OKU | Pegawai Khas kepada Pengerusi Lembaga Pengarah Universiti\"\n },\n {\n \"Name\": \"Puan Anis Syazwani Abd Mubin\",\n \"Position\": \"Pegawai Tadbir (MyStep)\",\n \"Email\": \"anissyazwani@ukm.edu.my\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/02\/Anis-Syazwani.png\",\n \"JobScope\": \"Memantau penyelarasan Pegawai Perhubungan OKU (PP-OKU) | Pengurusan dan Pemantauan Bantuan Kewangan OKU (BKOKU) | Pemantauan Pelan Strategik Polisi Inklusif OKU UKM | Penyediaan data warga OKU UKM | Sekretariat Mesyuarat Jawatankuasa Pelaksanaan Polisi Inklusif OKU | Urusetia Kualiti Pengurusan Sumber Manusia\"\n }, \n {\n \"Name\": \"Cik Syamimi Yusuf\",\n \"Position\": \"Pembantu Tadbir (P\/O) N1\",\n \"Email\": \"syamimiyusuf@ukm.edu.my\",\n \"Phone\": \"03-8921 4694\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Syamimi-Yusof.png\",\n \"JobScope\": \"Pentadbiran dan Kewangan Unit | Pengurusan Staf OKU | Data dan Laporan Staf dan Unit\"\n },\n {\n \"Name\": \"Encik Raja Noor Azim Raja Noor Affandi\",\n \"Position\": \"Pembantu Tadbir (P\/O) N1\",\n \"Email\": \"rnazim@ukm.edu.my\",\n \"Phone\": \"03-8921 4919\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Raja-Noor-Azim.png\",\n \"JobScope\": \"Pengurusan Pelajar OKU | Penyelaras Bantuan Kewangan OKU (BKOKU) | Data dan Laporan Pelajar OKU | Penyelaras Aduan Pelajar OKU\"\n },\n {\n \"Name\": \"Encik Mohd Nawawi Ab Ghani\",\n \"Position\": \"Pembantu Khidmat Am H1\",\n \"Email\": \"mohdnawawi@ukm.edu.my\",\n \"Phone\": \"03-8921 4920\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Nawawi-Ab-Ghani.png\",\n \"JobScope\": \"Penyelaras Kenderaan OKU Universiti | Penyelaras Peralatan OKU | Pengurusan Rekod Unit\"\n }\n ];\n\n const currentScript = document.currentScript;\n const wrapper = currentScript.previousElementSibling; \n const gridContainer = wrapper.querySelector('.dynamic-staff-grid');\n gridContainer.id = `grid-${uniqueTabId}`;\n\n let modalContainer = document.getElementById(`modals-${uniqueTabId}`);\n if (!modalContainer) {\n modalContainer = document.createElement('div');\n modalContainer.id = `modals-${uniqueTabId}`;\n document.body.appendChild(modalContainer);\n }\n\n staffData.forEach((staff, index) => {\n const uniqueModalId = `modal-${uniqueTabId}-${index}`;\n \n \/\/ Process Job Scope\n let taskList = staff.JobScope ? staff.JobScope.split('|').map(item => item.trim()) : [];\n\n \/\/ Process Emails\n let emailHtml = staff.Email ? staff.Email.split('|').map(e => `<a href=\"mailto:${e.trim()}\">${e.trim()}<\/a>`).join('') : '';\n const phoneLink = staff.Phone ? staff.Phone.replace(\/\\s\/g, '') : '';\n\n const cardHTML = `\n <div class=\"staff-card\">\n <img decoding=\"async\" src=\"${staff.Image}\" alt=\"${staff.Name}\" class=\"staff-image\" onerror=\"this.src='https:\/\/placehold.co\/400x300\/eee\/999?text=No+Image'\">\n <div class=\"staff-info\">\n <h2 class=\"staff-name\">${staff.Name}<\/h2>\n <p class=\"staff-position\">${staff.Position || ''}<\/p>\n <div class=\"contact-info\">\n <div class=\"contact-item\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\n <div style=\"flex-grow: 1; min-width: 0;\">${emailHtml}<\/div>\n <\/div>\n ${staff.Phone ? `\n <div class=\"contact-item\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\n <a href=\"tel:${phoneLink}\">${staff.Phone}<\/a>\n <\/div>` : ''}\n <\/div>\n <button class=\"job-desc-btn\" onclick=\"document.getElementById('${uniqueModalId}').classList.add('active'); document.body.style.overflow='hidden';\">Skop Tugas<\/button>\n <\/div>\n <\/div>`;\n \n gridContainer.innerHTML += cardHTML;\n\n const tasksHTML = taskList.map(task => `<li>${task}<\/li>`).join('');\n \n const modalHTML = `\n <div id=\"${uniqueModalId}\" class=\"staff-modal\" onclick=\"if(event.target === this){this.classList.remove('active'); document.body.style.overflow='auto';}\">\n <div class=\"staff-modal-content\">\n <button class=\"staff-close-btn\" onclick=\"document.getElementById('${uniqueModalId}').classList.remove('active'); document.body.style.overflow='auto';\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\/><\/svg>\n <\/button>\n <h2 class=\"modal-header\">${staff.Name}<\/h2>\n <p class=\"modal-position\">${staff.Position || ''}<\/p>\n <div class=\"modal-body\">\n <h3>Skop Tugas:<\/h3>\n <ul>${tasksHTML || '<li>Maklumat sedang dikemaskini<\/li>'}<\/ul>\n <\/div>\n <\/div>\n <\/div>`;\n modalContainer.innerHTML += modalHTML;\n });\n}\n<\/script><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-517e201a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"517e201a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-357e434a\" data-id=\"357e434a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4e569b59 elementor-widget elementor-widget-text-editor\" data-id=\"4e569b59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Unit Perkhidmatan dan Sokongan OKU-UKM<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e932ee0 elementor-widget elementor-widget-image\" data-id=\"3e932ee0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"335\" src=\"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-1024x335.png\" class=\"attachment-large size-large wp-image-28731\" alt=\"\" srcset=\"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-1024x335.png 1024w, https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-300x98.png 300w, https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-768x251.png 768w, https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-1536x502.png 1536w, https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-2048x669.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-6d988fee elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6d988fee\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-2f777f0c\" data-id=\"2f777f0c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e413410 elementor-widget elementor-widget-elementskit-social-media\" data-id=\"5e413410\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-social-media.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t\t <ul class=\"ekit_social_media\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-da8f4de\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.facebook.com\/people\/Unit-Perkhidmatan-Sokongan-OKU-UKM\/100066558825542\/\" aria-label=\"Facebook\" class=\"facebook\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-facebook\"><\/i>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-c8596be\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.instagram.com\/upsokuukm\/?hl=en\" aria-label=\"Instagram\" class=\"1\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-instagram-1\"><\/i>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-388934f\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.youtube.com\/@UnitPerkhidmatandanSokonganOKU\" aria-label=\"YoutTube\" class=\"feed\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-youtube-feed\"><\/i>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-9976c17\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"mailto:upsoku@ukm.edu.my\" aria-label=\"Email\" class=\"envelope11\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-envelope11\"><\/i>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t<\/ul>\n\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-750e5a9e\" data-id=\"750e5a9e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-22cc0edb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"22cc0edb\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-26244c22\" data-id=\"26244c22\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c280631 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"c280631\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Unit Perkhidmatan dan Sokongan OKU UKM<\/strong><br \/>Jabatan Pendaftar<strong><br \/><\/strong>Universiti Kebangsaan Malaysia, <br \/>Aras 1, Bangunan Canselori, 43600 UKM Bangi, <br \/>Selangor, Malaysia<\/p><p>Tel: 03 \u2013 8921 4529 \/ 4694<br \/>E-mel: upsoku@ukm.edu.my<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-5aa8404\" data-id=\"5aa8404\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-792b9d60 elementor-widget elementor-widget-google_maps\" data-id=\"792b9d60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"google_maps.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-custom-embed\">\n\t\t\t<iframe loading=\"lazy\"\n\t\t\t\t\tsrc=\"https:\/\/maps.google.com\/maps?q=Canselori%20Universiti%20Kebangsaan%20Malaysia&t=m&z=16&output=embed&iwloc=near\"\n\t\t\t\t\ttitle=\"Canselori Universiti Kebangsaan Malaysia\"\n\t\t\t\t\taria-label=\"Canselori Universiti Kebangsaan Malaysia\"\n\t\t\t><\/iframe>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-63691951 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"63691951\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5713e2d5\" data-id=\"5713e2d5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-7b298385 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"7b298385\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4d502549\" data-id=\"4d502549\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-729383d0 elementor-widget elementor-widget-text-editor\" data-id=\"729383d0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a92026. Jabatan Pendaftar. Hak Cipta Terpelihara<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-12499f48\" data-id=\"12499f48\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UPSOKU NAV BAR_2r Utama Mengenai Kami Pengenalan UPSOKU Pengurusan UPSOKU Pelan Strategik UPSOKU Pegawai Perhubungan OKU (PP-OKU) Kelab OKU Aktiviti Pendaftaran OKU-UKM Aduan & Maklumbalas Info Prihatin Info Prihatin 2026 Info Prihatin 2025 Info Prihatin 2024 Info Prihatin 2023 Info Prihatin 2022 Info Prihatin 2021 Sumbangan Utama Mengenai Kami Pengenalan UPSOKU Pengurusan UPSOKU Pelan Strategik […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":25299,"menu_order":136,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-5287","page","type-page","status-publish","hentry","entry"],"aioseo_notices":[],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"pendaftar_v2","author_link":"https:\/\/www.ukm.my\/pendaftar\/author\/pendaftar_v2\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"UPSOKU NAV BAR_2r Utama Mengenai Kami Pengenalan UPSOKU Pengurusan UPSOKU Pelan Strategik UPSOKU Pegawai Perhubungan OKU (PP-OKU) Kelab OKU Aktiviti Pendaftaran OKU-UKM Aduan & Maklumbalas Info Prihatin Info Prihatin 2026 Info Prihatin 2025 Info Prihatin 2024 Info Prihatin 2023 Info Prihatin 2022 Info Prihatin 2021 Sumbangan Utama Mengenai Kami Pengenalan UPSOKU Pengurusan UPSOKU Pelan Strategik…","_links":{"self":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/5287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/comments?post=5287"}],"version-history":[{"count":140,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/5287\/revisions"}],"predecessor-version":[{"id":31863,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/5287\/revisions\/31863"}],"up":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/25299"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/media?parent=5287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n \n \n UPSOKU NAV BAR_2r<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@300;400;500;600;700&display=swap&__ncforminfo=kg2_Afx_POC1QEMZ_zEVpUXhOksCJvLvB9-P3GPF7u1iXevlt_5liN55dqh7KGU-qNl1wQhOjah-Fb0Qj4cidlHrx1wo1f1m&__ncforminfo=sH7QnCPKPr7ANHLVZGTFWXeyDk_rMkJMCh3ayEhklJTIhidvbccgmolgMj7OCMKsLQOJSlpQ5VlgiWvRrY194h5ucmUJT_UuxiXBPJ-h97s=\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --color-primary: #004a87;\n --color-secondary: #00b1ff;\n --color-accent: #01cfcf;\n --color-highlight: #01cfcf;\n --color-light: #e9e8ee;\n --color-bg-light: #f4f3f8;\n --color-bg-white: #ffffff;\n --color-text-dark: #0f172a;\n --color-text-medium: #475569;\n --font-family: 'Barlow', sans-serif;\n }\n\n \/* FLUID TYPOGRAPHY IMPLEMENTATION (10px - 12px) *\/\n html {\n font-size: clamp(10px, 0.2vw + 9.5px, 12px);\n }\n\n \/* Optional: Temporary larger font when accessibility button clicked *\/\n html.font-scale-large {\n font-size: clamp(14px, 0.4vw + 13px, 16px);\n }\n\n body {\n font-family: var(--font-family);\n background: var(--color-bg-light);\n padding-top: 120px;\n }\n\n \/* Navigation Header *\/\n .site-topbar {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n background: var(--color-bg-white);\n box-shadow: 0 2px 20px rgba(0, 74, 135, 0.08);\n z-index: 1000;\n transition: all 0.3s ease;\n }\n\n .site-topbar.elevated {\n box-shadow: 0 4px 30px rgba(0, 74, 135, 0.15);\n }\n\n .header-wrapper {\n max-width: 1400px;\n margin: 0 auto;\n padding: 1.5rem 2rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n min-height: 100px;\n gap: 3rem;\n }\n\n .menu-section {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 2rem;\n }\n\n \/* Button Group - Right Side *\/\n .button-group {\n display: flex;\n gap: 1rem;\n align-items: center;\n }\n\n \/* Logo *\/\n .brand-identity {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .brand-identity img {\n height: 100px;\n width: auto;\n }\n\n \/* Navigation Menu - Center Group *\/\n nav {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .primary-links {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n list-style: none;\n }\n\n .link-wrapper {\n position: relative;\n }\n\n .menu-anchor {\n color: var(--color-text-dark);\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 500;\n padding: 0.7rem 1.2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.3rem;\n transition: all 0.3s ease;\n cursor: pointer;\n white-space: nowrap;\n border: 2px solid var(--color-light);\n border-radius: 8px;\n background: var(--color-bg-white);\n }\n\n .menu-anchor:hover {\n color: var(--color-primary);\n border-color: var(--color-primary);\n background: var(--color-bg-light);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 74, 135, 0.1);\n }\n\n .menu-anchor.current {\n color: var(--color-primary);\n border-color: var(--color-primary);\n background: var(--color-bg-light);\n }\n\n .expand-indicator {\n width: 0;\n height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 5px solid currentColor;\n transition: transform 0.3s ease;\n }\n\n .link-wrapper.expandable:hover .expand-indicator {\n transform: rotate(180deg);\n }\n\n \/* Dropdown Menu *\/\n .submenu-panel {\n position: absolute;\n top: 100%;\n left: 0;\n background: var(--color-bg-white);\n min-width: 220px;\n border-radius: 8px;\n box-shadow: 0 10px 40px rgba(0, 74, 135, 0.15);\n opacity: 0;\n visibility: hidden;\n transform: translateY(-10px);\n transition: all 0.3s ease;\n margin-top: 1rem;\n padding: 0.5rem 0;\n border: 2px solid var(--color-light);\n z-index: 1001;\n }\n\n .link-wrapper:hover .submenu-panel {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n\n .submenu-entry {\n list-style: none;\n }\n\n .submenu-anchor {\n display: block;\n padding: 0.75rem 1.5rem;\n color: var(--color-text-medium);\n text-decoration: none;\n font-size: 1rem;\n font-weight: 400;\n transition: all 0.2s ease;\n }\n\n .submenu-anchor:hover {\n background: var(--color-bg-light);\n color: var(--color-primary);\n padding-left: 2rem;\n }\n\n \/* CTA Button *\/\n .cta-action {\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\n color: white;\n padding: 0.7rem 1.8rem;\n border-radius: 50px;\n text-decoration: none;\n font-weight: 600;\n font-size: 1rem;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(0, 74, 135, 0.2);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n white-space: nowrap;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n cursor: pointer;\n }\n\n .cta-action:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 25px rgba(0, 74, 135, 0.3);\n }\n\n \/* Utility Controls *\/\n .utility-control {\n width: 45px;\n height: 45px;\n border-radius: 8px;\n background: var(--color-bg-white);\n border: 2px solid var(--color-light);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n color: var(--color-primary);\n font-size: 1.3rem;\n }\n\n .utility-control:hover {\n background: var(--color-primary);\n color: white;\n border-color: var(--color-primary);\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(0, 74, 135, 0.2);\n }\n\n .utility-control.enabled {\n background: var(--color-primary);\n color: white;\n border-color: var(--color-primary);\n }\n\n body.monochrome-view {\n filter: grayscale(100%);\n }\n\n \/* Mobile Menu Toggle *\/\n .menu-trigger {\n display: none;\n flex-direction: column;\n gap: 5px;\n cursor: pointer;\n padding: 0.5rem;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n }\n\n .menu-trigger span {\n width: 25px;\n height: 3px;\n background: var(--color-primary);\n border-radius: 3px;\n transition: all 0.3s ease;\n }\n\n \/* Responsive Breakpoints *\/\n\n \/* Small Desktop (1025px - 1200px) *\/\n @media (max-width: 1200px) {\n .header-wrapper {\n max-width: 100%;\n padding: 1.2rem 1.5rem;\n gap: 2rem;\n }\n\n .menu-anchor {\n font-size: 1rem;\n padding: 0.6rem 1rem;\n }\n\n .brand-identity img {\n height: 80px;\n }\n }\n\n \/* Tablet (769px - 1024px) *\/\n @media (max-width: 1024px) {\n body {\n padding-top: 90px;\n }\n\n .header-wrapper {\n padding: 1rem 1.2rem;\n gap: 1.5rem;\n min-height: 90px;\n }\n\n .brand-identity img {\n height: 70px;\n }\n\n .menu-anchor {\n font-size: 0.95rem;\n padding: 0.55rem 0.9rem;\n }\n\n .primary-links {\n gap: 0.4rem;\n }\n\n .cta-action {\n font-size: 0.9rem;\n padding: 0.6rem 1.5rem;\n }\n\n .utility-control {\n width: 42px;\n height: 42px;\n font-size: 1.2rem;\n }\n\n .submenu-anchor {\n font-size: 0.95rem;\n }\n\n .button-group {\n gap: 0.8rem;\n }\n }\n\n \/* Hide mobile menu by default on all screen sizes *\/\n .menu-section {\n display: none;\n }\n\n \/* Mobile (up to 768px) *\/\n @media (max-width: 768px) {\n body {\n padding-top: 70px;\n }\n\n .site-topbar {\n box-shadow: 0 2px 15px rgba(0, 74, 135, 0.1);\n }\n\n .header-wrapper {\n padding: 0.8rem 1rem;\n min-height: 70px;\n grid-template-columns: 1fr auto;\n gap: 1rem;\n }\n\n .brand-identity img {\n height: 50px;\n }\n\n .menu-trigger {\n display: flex;\n }\n\n \/* Hide desktop navigation *\/\n .header-wrapper > nav {\n display: none;\n }\n\n .header-wrapper > .button-group {\n display: none;\n }\n\n \/* Mobile menu section *\/\n .menu-section {\n display: flex;\n position: fixed;\n top: 70px;\n left: 0;\n width: 100%;\n background: var(--color-bg-white);\n flex-direction: column;\n align-items: center;\n padding: 2rem 1rem;\n gap: 1.5rem;\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n box-shadow: 0 10px 40px rgba(0, 74, 135, 0.1);\n max-height: calc(100vh - 70px);\n overflow-y: auto;\n z-index: 999;\n }\n\n .menu-section.visible {\n transform: translateX(0);\n }\n\n .menu-section nav {\n width: 100%;\n }\n\n .menu-section .primary-links {\n flex-direction: column;\n align-items: center;\n gap: 0.8rem;\n width: 100%;\n }\n\n .menu-section .link-wrapper {\n width: 100%;\n max-width: 300px;\n }\n\n .menu-section .menu-anchor {\n width: 100%;\n justify-content: center;\n font-size: 1.05rem;\n padding: 0.85rem 1.2rem;\n }\n\n .menu-section .submenu-panel {\n position: static;\n opacity: 1;\n visibility: visible;\n transform: none;\n box-shadow: none;\n margin-top: 0.5rem;\n padding: 0.5rem 0;\n text-align: center;\n background: var(--color-bg-light);\n border-radius: 4px;\n display: none;\n width: 100%;\n }\n\n .menu-section .link-wrapper.expandable.open .submenu-panel {\n display: block;\n }\n\n .menu-section .link-wrapper.expandable.open .expand-indicator {\n transform: rotate(180deg);\n }\n\n .menu-section .submenu-anchor {\n font-size: 0.95rem;\n padding: 0.7rem 1.2rem;\n }\n\n .menu-section .submenu-anchor:hover {\n padding-left: 1.2rem;\n }\n\n .menu-section .button-group {\n width: 100%;\n flex-direction: column;\n gap: 1rem;\n align-items: center;\n }\n\n .menu-section .cta-action {\n width: 100%;\n max-width: 300px;\n text-align: center;\n padding: 0.85rem 1.5rem;\n font-size: 1.05rem;\n }\n\n .menu-section .utility-control {\n width: 50px;\n height: 50px;\n font-size: 1.4rem;\n }\n\n .menu-trigger.open span:nth-child(1) {\n transform: rotate(45deg) translate(8px, 8px);\n }\n\n .menu-trigger.open span:nth-child(2) {\n opacity: 0;\n }\n\n .menu-trigger.open span:nth-child(3) {\n transform: rotate(-45deg) translate(7px, -7px);\n }\n }\n\n \/* Small Mobile (up to 480px) *\/\n @media (max-width: 480px) {\n .header-wrapper {\n padding: 0.8rem 0.8rem;\n }\n\n .brand-identity img {\n height: 45px;\n }\n\n .menu-section {\n padding: 1.5rem 0.8rem;\n }\n\n .menu-section .link-wrapper {\n max-width: 280px;\n }\n\n .menu-section .menu-anchor {\n font-size: 1rem;\n padding: 0.8rem 1rem;\n }\n\n .menu-section .cta-action {\n max-width: 280px;\n font-size: 1rem;\n padding: 0.8rem 1.3rem;\n }\n\n .menu-section .utility-control {\n width: 48px;\n height: 48px;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n \n <header class=\"site-topbar\" id=\"siteTopbar\">\n <div class=\"header-wrapper\">\n \n <a href=\"#\" class=\"brand-identity\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2022\/02\/Logo-UPSOKU.png\" alt=\"Logo\">\n <\/a>\n\n \n <button class=\"menu-trigger\" id=\"menuTrigger\" aria-label=\"Toggle menu\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/button>\n\n \n <nav>\n <ul class=\"primary-links\">\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/\" class=\"menu-anchor current\">Utama<\/a>\n <\/li>\n <li class=\"link-wrapper expandable\">\n <a class=\"menu-anchor\">\n Mengenai Kami\n <span class=\"expand-indicator\"><\/span>\n <\/a>\n <ul class=\"submenu-panel\">\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pengenalan-ups-oku\/\" class=\"submenu-anchor\">Pengenalan UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pengurusan-ups-oku\/\" class=\"submenu-anchor\">Pengurusan UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pelan-strategik-upsoku\/\" class=\"submenu-anchor\">Pelan Strategik UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/senarai-pegawai-perhubungan-oku-pp-oku-ukm\/\" class=\"submenu-anchor\">Pegawai Perhubungan OKU (PP-OKU)<\/a><\/li>\n <\/ul>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"#\" class=\"menu-anchor\">Kelab OKU<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/aktiviti\/\" class=\"menu-anchor\">Aktiviti<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/forms.gle\/7W2fSb58ARqvjSc67\" class=\"menu-anchor\">Pendaftaran OKU-UKM<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/aduan-maklumbalas\/\" class=\"menu-anchor\">Aduan & Maklumbalas<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/arkib-info-prihatin\/\" class=\"menu-anchor\">Info Prihatin<span class=\"expand-indicator\"><\/span><\/a>\n <ul class=\"submenu-panel\">\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2026<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2025<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2024<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2023<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2022<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2021<\/a><\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/nav>\n\n \n <div class=\"button-group\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/permohonan-sumbangan-tabung-watan-melalui-potongan-gaji\/\" class=\"cta-action\">Sumbangan<\/a>\n\n \n <button class=\"utility-control\" id=\"fontScaler\" title=\"Saiz Teks untuk Rabun\"\n aria-label=\"Toggle text size for visually impaired\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M4 7V4h16v3\"><\/path>\n <path d=\"M9 20h6\"><\/path>\n <path d=\"M12 4v16\"><\/path>\n <\/svg>\n <\/button>\n <button class=\"utility-control\" id=\"visionToggle\" title=\"Mod Buta Warna\"\n aria-label=\"Toggle colorblind mode\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <path d=\"M12 16v-4\"><\/path>\n <path d=\"M12 8h.01\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"menu-section\" id=\"menuSection\">\n <nav>\n <ul class=\"primary-links\">\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/\" class=\"menu-anchor current\">Utama<\/a>\n <\/li>\n <li class=\"link-wrapper expandable\">\n <a class=\"menu-anchor\">\n Mengenai Kami\n <span class=\"expand-indicator\"><\/span>\n <\/a>\n <ul class=\"submenu-panel\">\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pengenalan-ups-oku\/\" class=\"submenu-anchor\">Pengenalan UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pengurusan-ups-oku\/\" class=\"submenu-anchor\">Pengurusan UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/pelan-strategik-upsoku\/\" class=\"submenu-anchor\">Pelan Strategik UPSOKU<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/senarai-pegawai-perhubungan-oku-pp-oku-ukm\/\" class=\"submenu-anchor\">Pegawai Perhubungan OKU (PP-OKU)<\/a><\/li>\n <\/ul>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/kelab\/\" class=\"menu-anchor\">Kelab OKU<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/fasiliti_dan_sokongan_oku\/\" class=\"menu-anchor\">Aktiviti<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/forms.gle\/7W2fSb58ARqvjSc67\" class=\"menu-anchor\">Pendaftaran OKU-UKM<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/aduan-maklumbalas\/\" class=\"menu-anchor\">Aduan & Maklumbalas<\/a>\n <\/li>\n <li class=\"link-wrapper\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/ups-oku\/arkib-info-prihatin\/\" class=\"menu-anchor\">Info Prihatin<span class=\"expand-indicator\"><\/span><\/a>\n <ul class=\"submenu-panel\">\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2026<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2025<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2024<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2023<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2022<\/a><\/li>\n <li class=\"submenu-entry\"><a href=\"#\" class=\"submenu-anchor\">Info Prihatin 2021<\/a><\/li>\n <\/ul>\n <\/ul>\n <\/nav>\n\n <div class=\"button-group\">\n <a href=\"https:\/\/www.ukm.my\/pendaftar\/permohonan-sumbangan-tabung-watan-melalui-potongan-gaji\/\" class=\"cta-action\">Sumbangan<\/a>\n <button class=\"utility-control\" id=\"fontScalerMobile\" title=\"Saiz Teks untuk Rabun\" aria-label=\"Toggle text size for visually impaired\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M4 7V4h16v3\"><\/path>\n <path d=\"M9 20h6\"><\/path>\n <path d=\"M12 4v16\"><\/path>\n <\/svg>\n <\/button>\n <button class=\"utility-control\" id=\"visionToggleMobile\" title=\"Mod Buta Warna\" aria-label=\"Toggle colorblind mode\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <path d=\"M12 16v-4\"><\/path>\n <path d=\"M12 8h.01\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Sticky header scroll effect\n const siteTopbar = document.getElementById('siteTopbar');\n\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n siteTopbar.classList.add('elevated');\n } else {\n siteTopbar.classList.remove('elevated');\n }\n });\n\n \/\/ Mobile menu toggle\n const menuTrigger = document.getElementById('menuTrigger');\n const menuSection = document.getElementById('menuSection');\n\n menuTrigger.addEventListener('click', () => {\n menuTrigger.classList.toggle('open');\n menuSection.classList.toggle('visible');\n });\n\n \/\/ Mobile dropdown toggle\n const mobileExpandableItems = document.querySelectorAll('.menu-section .expandable .menu-anchor');\n mobileExpandableItems.forEach(anchor => {\n anchor.addEventListener('click', (e) => {\n e.preventDefault();\n const parent = anchor.closest('.expandable');\n parent.classList.toggle('open');\n });\n });\n\n \/\/ Close mobile menu when clicking outside\n document.addEventListener('click', (e) => {\n if (!e.target.closest('.header-wrapper') && !e.target.closest('.menu-section')) {\n menuTrigger.classList.remove('open');\n menuSection.classList.remove('visible');\n }\n });\n\n \/\/ Accessibility Features - Desktop\n const fontScaler = document.getElementById('fontScaler');\n let fontExpanded = false;\n \n fontScaler.addEventListener('click', () => {\n fontExpanded = !fontExpanded;\n fontScaler.classList.toggle('enabled');\n document.documentElement.classList.toggle('font-scale-large');\n \n \/\/ Sync mobile button\n const fontScalerMobile = document.getElementById('fontScalerMobile');\n if (fontExpanded) {\n fontScalerMobile.classList.add('enabled');\n } else {\n fontScalerMobile.classList.remove('enabled');\n }\n });\n\n const visionToggle = document.getElementById('visionToggle');\n let monochromeActive = false;\n \n visionToggle.addEventListener('click', () => {\n monochromeActive = !monochromeActive;\n visionToggle.classList.toggle('enabled');\n document.body.classList.toggle('monochrome-view');\n \n \/\/ Sync mobile button\n const visionToggleMobile = document.getElementById('visionToggleMobile');\n if (monochromeActive) {\n visionToggleMobile.classList.add('enabled');\n } else {\n visionToggleMobile.classList.remove('enabled');\n }\n });\n\n \/\/ Accessibility Features - Mobile\n const fontScalerMobile = document.getElementById('fontScalerMobile');\n \n fontScalerMobile.addEventListener('click', () => {\n fontExpanded = !fontExpanded;\n fontScalerMobile.classList.toggle('enabled');\n document.documentElement.classList.toggle('font-scale-large');\n \n \/\/ Sync desktop button\n if (fontExpanded) {\n fontScaler.classList.add('enabled');\n } else {\n fontScaler.classList.remove('enabled');\n }\n });\n\n const visionToggleMobile = document.getElementById('visionToggleMobile');\n \n visionToggleMobile.addEventListener('click', () => {\n monochromeActive = !monochromeActive;\n visionToggleMobile.classList.toggle('enabled');\n document.body.classList.toggle('monochrome-view');\n \n \/\/ Sync desktop button\n if (monochromeActive) {\n visionToggle.classList.add('enabled');\n } else {\n visionToggle.classList.remove('enabled');\n }\n });\n\n \/\/ Close submenu when clicking outside (desktop)\n document.addEventListener('click', (e) => {\n if (window.innerWidth > 768) {\n const expandableItems = document.querySelectorAll('.header-wrapper .expandable');\n expandableItems.forEach(item => {\n if (!item.contains(e.target)) {\n item.classList.remove('open');\n }\n });\n }\n });\n <\/script>\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dd150a4 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"dd150a4\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"stretch_section":"section-stretched"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-659f4ea\" data-id=\"659f4ea\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-70f533c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"70f533c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-8e046bd\" data-id=\"8e046bd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f6c8cf2 elementor-widget elementor-widget-heading\" data-id=\"f6c8cf2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"#\">Pengurusan UPS-OKU UKM<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7bc26db elementor-tabs-view-vertical elementor-widget elementor-widget-tabs\" data-id=\"7bc26db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1291\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1291\" aria-expanded=\"false\">UPS-OKU<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1291\" aria-expanded=\"false\">UPS-OKU<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1291\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1291\" tabindex=\"0\" hidden=\"false\"><style>\n .directory-wrapper {\n --text-color: #4E4E4E;\n --primary-color: #35387A;\n --button-hover: #969696;\n --bg-color: #f9f9f9;\n --card-bg: #ffffff;\n --border-color: #eeeeee;\n font-family: 'Poppins', sans-serif;\n color: var(--text-color);\n margin: 0 !important;\n padding: 10px !important;\n width: 100% !important;\n display: block !important;\n position: relative !important;\n box-sizing: border-box;\n }\n .directory-wrapper * { box-sizing: border-box; }\n\n .staff-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 30px;\n margin-top: 0 !important;\n padding-top: 0 !important;\n }\n .staff-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease; }\n .staff-image { width: 100%; aspect-ratio: 4 \/ 3; object-fit: cover; object-position: center top; display: block; border-bottom: 1px solid #f0f0f0; background-color: #f0f0f0; }\n .staff-info { padding: 20px 20px 25px 20px; flex-grow: 1; display: flex; flex-direction: column; text-align: left; }\n .staff-name { color: var(--primary-color); font-size: 14px; font-weight: 600; margin-bottom: 4px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0; }\n .staff-position { color: #888; font-size: 11px; font-weight: 500; margin-bottom: 20px; line-height: 1.4; letter-spacing: 0.5px; text-transform: capitalize; }\n .contact-info { margin-bottom: 20px; flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; }\n .contact-item { display: flex; align-items: flex-start; margin-bottom: 8px; color: var(--text-color); font-size: 11px; width: 100%; }\n .contact-item svg { width: 14px; height: 14px; margin-right: 10px; fill: var(--primary-color); flex-shrink: 0; opacity: 0.9; margin-top: 2px; }\n .contact-item a { color: var(--text-color); text-decoration: none; transition: color 0.2s ease; word-break: break-all; }\n .contact-item a:hover { color: var(--primary-color); text-decoration: underline; }\n .job-desc-btn { width: 100%; padding: 12px; background: var(--primary-color); color: white; border: none; border-radius: 4px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; margin-top: auto; text-transform: capitalize; letter-spacing: 0.5px; }\n .job-desc-btn:hover { background: var(--button-hover); }\n \n \/* Modal Styles *\/\n .staff-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(2px); animation: fadeIn 0.2s ease; }\n .staff-modal.active { display: flex; align-items: center; justify-content: center; }\n .staff-modal-content { background: white; padding: 40px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 10px 40px rgba(0,0,0,0.08); max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto; position: relative; animation: slideUp 0.3s ease; }\n .staff-close-btn { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0; }\n .staff-close-btn svg { width: 24px; height: 24px; fill: #999; }\n .modal-header { color: var(--primary-color); font-size: 1.6rem; font-weight: 600; margin-bottom: 5px; margin-top: 0; }\n .modal-position { color: #888; font-size: 1.2rem; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-top: 0; }\n .modal-body { color: var(--text-color); line-height: 1.8; font-size: 1rem; }\n .modal-body h3 { color: var(--primary-color); margin-top: 25px; margin-bottom: 15px; font-size: 1.2rem; font-weight: 500; }\n .modal-body ul { margin-left: 20px; color: #666; }\n .modal-body li { margin-bottom: 8px; }\n\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }\n<\/style>\n\n<div class=\"directory-wrapper\">\n <div class=\"staff-grid dynamic-staff-grid\"><\/div>\n<\/div>\n\n<script>\n{\n const uniqueTabId = 'web_upsoku'; \n\n const staffData = [\n {\n \"Name\": \"Puan Farhana Md Isa\",\n \"Position\": \"Penolong Pendaftar Kanan N10 (FX)\",\n \"Email\": \"farhanamdisa@ukm.edu.my\",\n \"Phone\": \"03-8921 4693\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Farhana-Md-Isa.png\",\n \"JobScope\": \"Hal-Ehwal Pentadbiran UPS-OKU | Pengurusan Kewangan UPS-OKU | Pengurusan Staf OKU | Pengurusan Pelajar OKU | Laporan Bulanan UPS-OKU | Kualiti Pengurusan Sumber Manusia UPS-OKU | Perkhidmatan Jurubahasa Isyarat | Pengurusan pelaksanaan selenggara dan naik taraf kemudahan OKU | Memantau penyelarasan Pegawai Perhubungan OKU (PP-OKU) | Pengurusan dan Pemantauan Bantuan Kewangan OKU (BKOKU) | Setiausaha Mesyuarat Jawatankuasa Pelaksanaan Polisi Inklusif OKU | Pegawai Khas kepada Pengerusi Lembaga Pengarah Universiti\"\n },\n {\n \"Name\": \"Puan Anis Syazwani Abd Mubin\",\n \"Position\": \"Pegawai Tadbir (MyStep)\",\n \"Email\": \"anissyazwani@ukm.edu.my\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/02\/Anis-Syazwani.png\",\n \"JobScope\": \"Memantau penyelarasan Pegawai Perhubungan OKU (PP-OKU) | Pengurusan dan Pemantauan Bantuan Kewangan OKU (BKOKU) | Pemantauan Pelan Strategik Polisi Inklusif OKU UKM | Penyediaan data warga OKU UKM | Sekretariat Mesyuarat Jawatankuasa Pelaksanaan Polisi Inklusif OKU | Urusetia Kualiti Pengurusan Sumber Manusia\"\n }, \n {\n \"Name\": \"Cik Syamimi Yusuf\",\n \"Position\": \"Pembantu Tadbir (P\/O) N1\",\n \"Email\": \"syamimiyusuf@ukm.edu.my\",\n \"Phone\": \"03-8921 4694\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Syamimi-Yusof.png\",\n \"JobScope\": \"Pentadbiran dan Kewangan Unit | Pengurusan Staf OKU | Data dan Laporan Staf dan Unit\"\n },\n {\n \"Name\": \"Encik Raja Noor Azim Raja Noor Affandi\",\n \"Position\": \"Pembantu Tadbir (P\/O) N1\",\n \"Email\": \"rnazim@ukm.edu.my\",\n \"Phone\": \"03-8921 4919\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Raja-Noor-Azim.png\",\n \"JobScope\": \"Pengurusan Pelajar OKU | Penyelaras Bantuan Kewangan OKU (BKOKU) | Data dan Laporan Pelajar OKU | Penyelaras Aduan Pelajar OKU\"\n },\n {\n \"Name\": \"Encik Mohd Nawawi Ab Ghani\",\n \"Position\": \"Pembantu Khidmat Am H1\",\n \"Email\": \"mohdnawawi@ukm.edu.my\",\n \"Phone\": \"03-8921 4920\",\n \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Nawawi-Ab-Ghani.png\",\n \"JobScope\": \"Penyelaras Kenderaan OKU Universiti | Penyelaras Peralatan OKU | Pengurusan Rekod Unit\"\n }\n ];\n\n const currentScript = document.currentScript;\n const wrapper = currentScript.previousElementSibling; \n const gridContainer = wrapper.querySelector('.dynamic-staff-grid');\n gridContainer.id = `grid-${uniqueTabId}`;\n\n let modalContainer = document.getElementById(`modals-${uniqueTabId}`);\n if (!modalContainer) {\n modalContainer = document.createElement('div');\n modalContainer.id = `modals-${uniqueTabId}`;\n document.body.appendChild(modalContainer);\n }\n\n staffData.forEach((staff, index) => {\n const uniqueModalId = `modal-${uniqueTabId}-${index}`;\n \n \/\/ Process Job Scope\n let taskList = staff.JobScope ? staff.JobScope.split('|').map(item => item.trim()) : [];\n\n \/\/ Process Emails\n let emailHtml = staff.Email ? staff.Email.split('|').map(e => `<a href=\"mailto:${e.trim()}\">${e.trim()}<\/a>`).join('') : '';\n const phoneLink = staff.Phone ? staff.Phone.replace(\/\\s\/g, '') : '';\n\n const cardHTML = `\n <div class=\"staff-card\">\n <img decoding=\"async\" src=\"${staff.Image}\" alt=\"${staff.Name}\" class=\"staff-image\" onerror=\"this.src='https:\/\/placehold.co\/400x300\/eee\/999?text=No+Image'\">\n <div class=\"staff-info\">\n <h2 class=\"staff-name\">${staff.Name}<\/h2>\n <p class=\"staff-position\">${staff.Position || ''}<\/p>\n <div class=\"contact-info\">\n <div class=\"contact-item\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\n <div style=\"flex-grow: 1; min-width: 0;\">${emailHtml}<\/div>\n <\/div>\n ${staff.Phone ? `\n <div class=\"contact-item\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\n <a href=\"tel:${phoneLink}\">${staff.Phone}<\/a>\n <\/div>` : ''}\n <\/div>\n <button class=\"job-desc-btn\" onclick=\"document.getElementById('${uniqueModalId}').classList.add('active'); document.body.style.overflow='hidden';\">Skop Tugas<\/button>\n <\/div>\n <\/div>`;\n \n gridContainer.innerHTML += cardHTML;\n\n const tasksHTML = taskList.map(task => `<li>${task}<\/li>`).join('');\n \n const modalHTML = `\n <div id=\"${uniqueModalId}\" class=\"staff-modal\" onclick=\"if(event.target === this){this.classList.remove('active'); document.body.style.overflow='auto';}\">\n <div class=\"staff-modal-content\">\n <button class=\"staff-close-btn\" onclick=\"document.getElementById('${uniqueModalId}').classList.remove('active'); document.body.style.overflow='auto';\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\/><\/svg>\n <\/button>\n <h2 class=\"modal-header\">${staff.Name}<\/h2>\n <p class=\"modal-position\">${staff.Position || ''}<\/p>\n <div class=\"modal-body\">\n <h3>Skop Tugas:<\/h3>\n <ul>${tasksHTML || '<li>Maklumat sedang dikemaskini<\/li>'}<\/ul>\n <\/div>\n <\/div>\n <\/div>`;\n modalContainer.innerHTML += modalHTML;\n });\n}\n<\/script><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-517e201a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"517e201a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-357e434a\" data-id=\"357e434a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4e569b59 elementor-widget elementor-widget-text-editor\" data-id=\"4e569b59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Unit Perkhidmatan dan Sokongan OKU-UKM<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e932ee0 elementor-widget elementor-widget-image\" data-id=\"3e932ee0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"335\" src=\"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-1024x335.png\" class=\"attachment-large size-large wp-image-28731\" alt=\"\" srcset=\"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-1024x335.png 1024w, https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-300x98.png 300w, https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-768x251.png 768w, https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-1536x502.png 1536w, https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2025\/04\/SDG-10_UPSOKU-2048x669.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-6d988fee elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6d988fee\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-2f777f0c\" data-id=\"2f777f0c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e413410 elementor-widget elementor-widget-elementskit-social-media\" data-id=\"5e413410\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-social-media.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t\t <ul class=\"ekit_social_media\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-da8f4de\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.facebook.com\/people\/Unit-Perkhidmatan-Sokongan-OKU-UKM\/100066558825542\/\" aria-label=\"Facebook\" class=\"facebook\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-facebook\"><\/i>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-c8596be\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.instagram.com\/upsokuukm\/?hl=en\" aria-label=\"Instagram\" class=\"1\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-instagram-1\"><\/i>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-388934f\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.youtube.com\/@UnitPerkhidmatandanSokonganOKU\" aria-label=\"YoutTube\" class=\"feed\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-youtube-feed\"><\/i>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-9976c17\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"mailto:upsoku@ukm.edu.my\" aria-label=\"Email\" class=\"envelope11\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-envelope11\"><\/i>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t<\/ul>\n\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-750e5a9e\" data-id=\"750e5a9e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-22cc0edb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"22cc0edb\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-26244c22\" data-id=\"26244c22\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c280631 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"c280631\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Unit Perkhidmatan dan Sokongan OKU UKM<\/strong><br \/>Jabatan Pendaftar<strong><br \/><\/strong>Universiti Kebangsaan Malaysia, <br \/>Aras 1, Bangunan Canselori, 43600 UKM Bangi, <br \/>Selangor, Malaysia<\/p><p>Tel: 03 \u2013 8921 4529 \/ 4694<br \/>E-mel: upsoku@ukm.edu.my<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-5aa8404\" data-id=\"5aa8404\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-792b9d60 elementor-widget elementor-widget-google_maps\" data-id=\"792b9d60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"google_maps.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-custom-embed\">\n\t\t\t<iframe loading=\"lazy\"\n\t\t\t\t\tsrc=\"https:\/\/maps.google.com\/maps?q=Canselori%20Universiti%20Kebangsaan%20Malaysia&t=m&z=16&output=embed&iwloc=near\"\n\t\t\t\t\ttitle=\"Canselori Universiti Kebangsaan Malaysia\"\n\t\t\t\t\taria-label=\"Canselori Universiti Kebangsaan Malaysia\"\n\t\t\t><\/iframe>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-63691951 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"63691951\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5713e2d5\" data-id=\"5713e2d5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-7b298385 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"7b298385\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4d502549\" data-id=\"4d502549\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-729383d0 elementor-widget elementor-widget-text-editor\" data-id=\"729383d0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a92026. Jabatan Pendaftar. Hak Cipta Terpelihara<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-12499f48\" data-id=\"12499f48\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UPSOKU NAV BAR_2r Utama Mengenai Kami Pengenalan UPSOKU Pengurusan UPSOKU Pelan Strategik UPSOKU Pegawai Perhubungan OKU (PP-OKU) Kelab OKU Aktiviti Pendaftaran OKU-UKM Aduan & Maklumbalas Info Prihatin Info Prihatin 2026 Info Prihatin 2025 Info Prihatin 2024 Info Prihatin 2023 Info Prihatin 2022 Info Prihatin 2021 Sumbangan Utama Mengenai Kami Pengenalan UPSOKU Pengurusan UPSOKU Pelan Strategik […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":25299,"menu_order":136,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-5287","page","type-page","status-publish","hentry","entry"],"aioseo_notices":[],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"pendaftar_v2","author_link":"https:\/\/www.ukm.my\/pendaftar\/author\/pendaftar_v2\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"UPSOKU NAV BAR_2r Utama Mengenai Kami Pengenalan UPSOKU Pengurusan UPSOKU Pelan Strategik UPSOKU Pegawai Perhubungan OKU (PP-OKU) Kelab OKU Aktiviti Pendaftaran OKU-UKM Aduan & Maklumbalas Info Prihatin Info Prihatin 2026 Info Prihatin 2025 Info Prihatin 2024 Info Prihatin 2023 Info Prihatin 2022 Info Prihatin 2021 Sumbangan Utama Mengenai Kami Pengenalan UPSOKU Pengurusan UPSOKU Pelan Strategik…","_links":{"self":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/5287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/comments?post=5287"}],"version-history":[{"count":140,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/5287\/revisions"}],"predecessor-version":[{"id":31863,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/5287\/revisions\/31863"}],"up":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/25299"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/media?parent=5287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}