{"id":21946,"date":"2023-03-07T17:41:42","date_gmt":"2023-03-07T09:41:42","guid":{"rendered":"https:\/\/www.ukm.my\/pendaftar\/?page_id=21946"},"modified":"2026-04-06T17:08:36","modified_gmt":"2026-04-06T09:08:36","slug":"pp","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/pendaftar\/pp\/","title":{"rendered":"Pejabat Pendaftar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21946\" class=\"elementor elementor-21946\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6df5eaf elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"6df5eaf\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\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-a26f060\" data-id=\"a26f060\" 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-7a5fcfb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7a5fcfb\" 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-d8bfa74\" data-id=\"d8bfa74\" 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-c4b7630 elementor-widget elementor-widget-heading\" data-id=\"c4b7630\" 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=\"#\">Pejabat Pendaftar<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4087dad elementor-tabs-view-vertical elementor-widget elementor-widget-tabs\" data-id=\"4087dad\" 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-6761\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-6761\" aria-expanded=\"false\">Pejabat Pendaftar<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-6762\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-6762\" aria-expanded=\"false\">Keurussetiaan Lembaga Pengarah Universiti<\/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-6761\" aria-expanded=\"false\">Pejabat Pendaftar<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6761\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6761\" 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        padding: clamp(40px, 5vw, 60px) clamp(20px, 4vw, 30px); \n        width: 100%; \n        box-sizing: border-box; \n    }\n    .directory-wrapper * { box-sizing: border-box; }\n    .directory-container { max-width: 1400px; margin: 0 auto; width: 100%; }\n    .staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; width: 100%; align-items: stretch; }\n    \n    .staff-card { \n        background: var(--card-bg); \n        border: 1px solid var(--border-color); \n        border-radius: 8px; \n        overflow: hidden; \n        display: flex; \n        flex-direction: column; \n        height: 100%; \n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04); \n        transition: transform 0.2s ease; \n    }\n    \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    \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: center; 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; }\n    .contact-item a { color: var(--text-color); text-decoration: none; transition: color 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .contact-item a:hover { color: var(--primary-color); text-decoration: underline; }\n    \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    \/* ANIMATED MODAL *\/\n    .staff-modal { \n        display: none; \n        position: fixed; \n        z-index: 99999; \n        left: 0; top: 0; \n        width: 100%; height: 100%; \n        background: rgba(255, 255, 255, 0.9); \n        backdrop-filter: blur(2px); \n        animation: fadeIn 0.2s ease; \n    }\n    .staff-modal.active { display: flex; align-items: center; justify-content: center; }\n    \n    .staff-modal-content { \n        background: white; \n        padding: 40px; \n        border-radius: 8px; \n        border: 1px solid var(--border-color); \n        box-shadow: 0 10px 40px rgba(0,0,0,0.08); \n        max-width: 600px; width: 90%; \n        max-height: 85vh; \n        overflow-y: auto; \n        position: relative; \n        animation: slideUp 0.3s ease; \n    }\n    \n    .staff-close-btn { \n        position: absolute; top: 20px; right: 20px; \n        width: 32px; height: 32px; \n        background: transparent; border: none; \n        cursor: pointer; display: flex; align-items: center; justify-content: center; \n        border-radius: 50%; transition: background-color 0.2s ease; \n    }\n    .staff-close-btn svg { width: 24px; height: 24px; fill: #999; }\n    .staff-close-btn:hover { background-color: rgba(0,0,0,0.05); }\n\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: 1.2rem; }\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=\"directory-container\">\n        <div class=\"staff-grid dynamic-staff-grid\"><\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const uniqueTabId = 'tab_registrar_main'; \n    const staffData = [\n        {\n            \"Name\": \"Tuan Haji Zanudin Mohd Daud\",\n            \"Position\": \"Pendaftar\",\n            \"Email\": \"pdftar@ukm.edu.my\",\n            \"Phone\": \"03-8921 4888\",\n            \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Haji_Zanudin.png\",\n            \"JobScope\": \"Keurussetiaan Lembaga Pengarah Universiti | Sumber Manusia | Akademik | Pentadbiran Am | Hal Ehwal Pelajar | Kualiti | Pengawal (custodian) Rekod Universiti | Tanggungjawab Pendaftar (berdasarkan statut) | Setiausaha Mesyuarat Senat | Merancang dan memastikan pelaksanaan governan \/ tadbir urus \/ autonomi dilaksanakan secara teratur | Merancang dan memastikan pengurusan serta pembangunan sumber manusia dilaksanakan dengan teratur dan bersesuaian dengan perubahan | Merancang, mengawal selia dan memantau pelaksanaan pelan strategik Universiti | Merancang transformasi tadbir urus Universiti | Menarik dan mengekalkan bakat terbaik serta cemerlang | Mencetus, memupuk dan menggalakkan inovasi dalam pengurusan dan perkhidmatan | Melestarikan keselamatan kampus yang kondusif | Mengawal selia (custodian) rekod dan dokumen | Memastikan pengurusan akademik serta pelajar dilaksanakan dengan teratur | Memastikan kemudahan perkhidmatan disediakan kepada staf yang layak | Meningkatkan jaringan strategik bagi melestari penjanaan kewangan dan enterprise pentadbiran universiti | Memastikan kawalan risiko yang berkesan | Melaksanakan kuasa atau tanggungjawab sebagaimana yang ditetapkan di bawah Perlembagaan, Statut, Kaedah dan Peraturan Universiti | Menjalankan tugas lain yang diarahkan dari semasa ke semasa oleh Naib Canselor dan Lembaga Pengarah Universiti\"\n        },\n        {\n            \"Name\": \"Encik Mohamad Hidir Mohamed\",\n            \"Position\": \"Penolong Pendaftar Kanan N10 (FX)\",\n            \"Email\": \"hidirmohamed@ukm.edu.my\",\n            \"Phone\": \"03-8921 5015\",\n            \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Hidir-Mohamed.png\",\n            \"JobScope\": \"Pegawai Khas kepada Pengerusi LPU | Sekretariat Lembaga Pengarah Universiti | Pelantikan Ahli Lembaga Pengarah Universiti | Pelantikan Pro-Canselor UKM | Pelantikan Ahli Lembaga UKM Holdings | Laporan Tahunan UKM | Mesyuarat Pengurusan Jabatan Pendaftar (MPJP)\"\n        },\n        {\n            \"Name\": \"Puan Ruziana Mohd. Hairi\",\n            \"Position\": \"Setiausaha Pejabat N6\",\n            \"Email\": \"ruziana@ukm.edu.my\",\n            \"Phone\": \"03-8921 4888\",\n            \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Puan-Ruziana.png\",\n            \"JobScope\": \"Pembantu Khas kepada Pendaftar | Pengurusan Pekeliling Jabatan Pendaftar | Sekretariat Mesyuarat Lembaga Pengarah Universiti | Menguruskan pelantikan dan penamatan Ketua Pentadbiran di Pusat Tanggungjawab\"\n        },\n        {\n            \"Name\": \"Encik Mohd Ridzuan Mohd Amin\",\n            \"Position\": \"Penolong Pegawai Teknologi Maklumat F5\",\n            \"Email\": \"ridzuan@ukm.edu.my\",\n            \"Phone\": \"03-8921 4756\",\n            \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Ridzuan-Amin.png\",\n            \"JobScope\": \"Bertanggungjawab dalam pengurusan laman sesawang serta pembangunan sistem bagi laman sesawang Jabatan Pendaftar | Mereka grafik bagi kegunaan rasmi Jabatan Pendaftar\"\n        },\n        {\n            \"Name\": \"Encik Muhammad Haikal M. Hashim\",\n            \"Position\": \"Pembantu Khidmat Am H1\",\n            \"Email\": \"haikalhashim2506@ukm.edu.my\",\n            \"Phone\": \"03-8921 4888\",\n            \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Haikal-Hashim.png\",\n            \"JobScope\": \"Pemandu Khas kepada Pendaftar UKM | Menjalankan tugas-tugas lain yang diarahkan oleh Pendaftar\"\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        let taskList = staff.JobScope ? staff.JobScope.split('|').map(item => item.trim()) : [];\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                            <a href=\"mailto:${staff.Email || ''}\">${staff.Email || ''}<\/a>\n                        <\/div>\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        gridContainer.insertAdjacentHTML('beforeend', cardHTML);\n\n        const tasksHTML = taskList.map(task => `<li>${task}<\/li>`).join('');\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>Tiada maklumat disediakan.<\/li>'}<\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>`;\n        modalContainer.insertAdjacentHTML('beforeend', modalHTML);\n    });\n})();\n<\/script><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-6762\" aria-expanded=\"false\">Keurussetiaan Lembaga Pengarah Universiti<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6762\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6762\" tabindex=\"0\" hidden=\"hidden\"><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        padding: clamp(40px, 5vw, 60px) clamp(20px, 4vw, 30px); \n        width: 100%; \n        box-sizing: border-box; \n    }\n    .directory-wrapper * { box-sizing: border-box; }\n    .directory-container { max-width: 1400px; margin: 0 auto; width: 100%; }\n    .staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; width: 100%; align-items: stretch; }\n    \n    .staff-card { \n        background: var(--card-bg); \n        border: 1px solid var(--border-color); \n        border-radius: 8px; \n        overflow: hidden; \n        display: flex; \n        flex-direction: column; \n        height: 100%; \n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04); \n        transition: transform 0.2s ease; \n    }\n    \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    \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: center; 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; }\n    .contact-item a { color: var(--text-color); text-decoration: none; transition: color 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .contact-item a:hover { color: var(--primary-color); text-decoration: underline; }\n    \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    \/* ANIMATED MODAL *\/\n    .staff-modal { \n        display: none; \n        position: fixed; \n        z-index: 99999; \n        left: 0; top: 0; \n        width: 100%; height: 100%; \n        background: rgba(255, 255, 255, 0.9); \n        backdrop-filter: blur(2px); \n        animation: fadeIn 0.2s ease; \n    }\n    .staff-modal.active { display: flex; align-items: center; justify-content: center; }\n    \n    .staff-modal-content { \n        background: white; \n        padding: 40px; \n        border-radius: 8px; \n        border: 1px solid var(--border-color); \n        box-shadow: 0 10px 40px rgba(0,0,0,0.08); \n        max-width: 600px; width: 90%; \n        max-height: 85vh; \n        overflow-y: auto; \n        position: relative; \n        animation: slideUp 0.3s ease; \n    }\n    \n    .staff-close-btn { \n        position: absolute; top: 20px; right: 20px; \n        width: 32px; height: 32px; \n        background: transparent; border: none; \n        cursor: pointer; display: flex; align-items: center; justify-content: center; \n        border-radius: 50%; transition: background-color 0.2s ease; \n    }\n    .staff-close-btn svg { width: 24px; height: 24px; fill: #999; }\n    .staff-close-btn:hover { background-color: rgba(0,0,0,0.05); }\n\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: 1.2rem; }\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=\"directory-container\">\n        <div class=\"staff-grid dynamic-staff-grid\"><\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const uniqueTabId = 'tab_lpu'; \n    const staffData = [\n        {\n            \"Name\": \"Encik Mohamad Hidir Mohamed\",\n            \"Position\": \"Penolong Pendaftar Kanan N10 (FX)\",\n            \"Email\": \"hidirmohamed@ukm.edu.my\",\n            \"Phone\": \"03-8921 5015\",\n            \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Hidir-Mohamed.png\",\n            \"JobScope\": \"Pegawai Khas kepada Pengerusi LPU | Sekretariat Lembaga Pengarah Universiti | Pelantikan Ahli Lembaga Pengarah Universiti | Pelantikan Pro-Canselor UKM | Pelantikan Ahli Lembaga UKM Holdings | Laporan Tahunan UKM | Mesyuarat Pengurusan Jabatan Pendaftar (MPJP)\"\n        },\n        {\n            \"Name\": \"Puan Sarina Ab Rahim\",\n            \"Position\": \"PEMBANTU TADBIR (P\/O) N2 (TBK)\",\n            \"Email\": \"eina@ukm.edu.my\",\n            \"Phone\": \"03-8921 5015\",\n            \"Image\": \"https:\/\/www.ukm.my\/pendaftar\/wp-content\/uploads\/2026\/01\/Sarina-Ab-Rahim.png\",\n            \"JobScope\": \"Membantu menguruskan Mesyuarat Lembaga Pengarah Universiti | Membantu menguruskan Laporan Tahunan dan Penyata Kewangan | Membantu dalam urusan Pelantikan Canselor dan Pro Canselor | Pegawai Penyiasat SISPAA\"\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        let taskList = staff.JobScope ? staff.JobScope.split('|').map(item => item.trim()) : [];\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                            <a href=\"mailto:${staff.Email || ''}\">${staff.Email || ''}<\/a>\n                        <\/div>\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        gridContainer.insertAdjacentHTML('beforeend', cardHTML);\n\n        const tasksHTML = taskList.map(task => `<li>${task}<\/li>`).join('');\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>Tiada maklumat disediakan.<\/li>'}<\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>`;\n        modalContainer.insertAdjacentHTML('beforeend', 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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pejabat Pendaftar Pejabat Pendaftar Keurussetiaan Lembaga Pengarah Universiti Pejabat Pendaftar Keurussetiaan Lembaga Pengarah Universiti<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","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-21946","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":"Pejabat Pendaftar Pejabat Pendaftar Keurussetiaan Lembaga Pengarah Universiti Pejabat Pendaftar Keurussetiaan Lembaga Pengarah Universiti","_links":{"self":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/21946","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=21946"}],"version-history":[{"count":230,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/21946\/revisions"}],"predecessor-version":[{"id":32558,"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/pages\/21946\/revisions\/32558"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/pendaftar\/wp-json\/wp\/v2\/media?parent=21946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}