{"id":1629,"date":"2026-06-26T18:28:47","date_gmt":"2026-06-26T18:28:47","guid":{"rendered":"https:\/\/www.ukm.my\/kkm\/?page_id=1629"},"modified":"2026-06-30T08:24:58","modified_gmt":"2026-06-30T08:24:58","slug":"t-pengetua","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/kkm\/t-pengetua\/","title":{"rendered":"T.Pengetua"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1629\" class=\"elementor elementor-1629\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d806380 e-con-full e-flex e-con e-parent\" data-id=\"5d806380\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b529029 elementor-widget elementor-widget-html\" data-id=\"5b529029\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    body {\r\n        margin: 0;\r\n        background: hsla(14, 100%, 57%, 1);\r\n        background: linear-gradient(360deg, hsla(14, 100%, 57%, 1) 0%, hsla(30, 100%, 59%, 1) 100%);\r\n        min-height: 100vh;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        overflow-x: hidden;\r\n    }\r\n    \r\n    \/* 1. Enhanced Container with Layered Animations *\/\r\n    .container {\r\n        margin: 0 auto;\r\n        padding: 60px 20px;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        font-family: 'Montserrat', 'Segoe UI', sans-serif;\r\n        position: relative;\r\n        width: 100%;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* Ambient Glowing Orbs in Background *\/\r\n    .container::before, .container::after {\r\n        content: '';\r\n        position: absolute;\r\n        border-radius: 50%;\r\n        background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));\r\n        filter: blur(60px);\r\n        animation: floatOrb 20s infinite alternate ease-in-out;\r\n        z-index: 1;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .container::before {\r\n        width: 350px;\r\n        height: 350px;\r\n        top: -10%;\r\n        left: 5%;\r\n    }\r\n\r\n    .container::after {\r\n        width: 450px;\r\n        height: 450px;\r\n        bottom: -15%;\r\n        right: 5%;\r\n        animation-duration: 28s;\r\n        animation-delay: -7s;\r\n    }\r\n\r\n    \/* Floating Particle System *\/\r\n    .bg-particles {\r\n        position: fixed; \r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: 1;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .particle {\r\n        position: absolute;\r\n        background: rgba(255, 255, 255, 0.25);\r\n        border-radius: 50%;\r\n        bottom: -20px;\r\n        animation: floatUp 10s infinite linear;\r\n    }\r\n\r\n    \/* Particle configurations for natural variation *\/\r\n    .p1 { width: 6px; height: 6px; left: 8%; animation-duration: 8s; animation-delay: 0s; }\r\n    .p2 { width: 12px; height: 12px; left: 22%; animation-duration: 12s; animation-delay: 1.5s; background: rgba(255, 255, 255, 0.15); }\r\n    .p3 { width: 7px; height: 7px; left: 37%; animation-duration: 9s; animation-delay: 4s; }\r\n    .p4 { width: 15px; height: 15px; left: 48%; animation-duration: 14s; animation-delay: 0.5s; background: rgba(255, 255, 255, 0.1); }\r\n    .p5 { width: 9px; height: 9px; left: 63%; animation-duration: 11s; animation-delay: 5s; }\r\n    .p6 { width: 8px; height: 8px; left: 78%; animation-duration: 7s; animation-delay: 2.5s; }\r\n    .p7 { width: 14px; height: 14px; left: 90%; animation-duration: 13s; animation-delay: 6s; background: rgba(255, 255, 255, 0.15); }\r\n    .p8 { width: 8px; height: 8px; left: 15%; animation-duration: 10s; animation-delay: 3.5s; }\r\n    .p9 { width: 11px; height: 11px; left: 58%; animation-duration: 11s; animation-delay: 2s; }\r\n    .p10 { width: 6px; height: 6px; left: 84%; animation-duration: 8s; animation-delay: 1s; }\r\n\r\n    .card {\r\n        background: white;\r\n        width: 100%;\r\n        max-width: 750px;\r\n        min-height: 320px;\r\n        margin: 0 auto;\r\n        border-radius: 24px;\r\n        border: 1px solid rgba(255, 255, 255, 0.25);\r\n        display: flex;\r\n        flex-direction: column;\r\n        padding: 35px;\r\n        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);\r\n        gap: 35px;\r\n        position: relative;\r\n        z-index: 5;\r\n        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;\r\n    }\r\n\r\n    \/* Micro-interaction on card hover *\/\r\n    .card:hover {\r\n        transform: translateY(-6px);\r\n        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);\r\n        border-color: rgba(255, 255, 255, 0.4);\r\n    }\r\n\r\n    \/* Elegant Image Wrapper with subtle glowing ring *\/\r\n    .left-avatar {\r\n        flex-shrink: 0;\r\n        position: relative;\r\n    }\r\n\r\n    .left-avatar::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: -4px; left: -4px; right: -4px; bottom: -4px;\r\n        border-radius: 22px;\r\n        background: linear-gradient(45deg, #FFFF2F, #FF5623);\r\n        z-index: 1;\r\n        opacity: 0.7;\r\n    }\r\n\r\n    .card-img {\r\n        width: 220px;\r\n        height: auto;\r\n        display: block;\r\n        position: relative;\r\n        z-index: 2;\r\n        background-color: white;\r\n        border: 1px solid rgba(255,255,255,0.2);\r\n    }\r\n\r\n    \/* Right Text Area Layout *\/\r\n    .right {\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        flex-grow: 1;\r\n    }\r\n\r\n    .nama {\r\n        font-size: 26px;\r\n        letter-spacing: 0.5px;\r\n        line-height: 1.2;\r\n        font-weight: 800;\r\n        text-transform: uppercase;\r\n        color: #333;\r\n        margin-bottom: 6px;\r\n        text-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n    }\r\n\r\n    .jaw {\r\n        font-size: 14px;\r\n        letter-spacing: 2px;\r\n        font-weight: 700;\r\n        color: #732F00;\r\n        text-transform: uppercase;\r\n        margin-bottom: 25px;\r\n    }\r\n\r\n    \/* Modern Info Badges *\/\r\n    .info {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n    }\r\n\r\n    .info-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n        background: rgba(255, 255, 255, 0.07);\r\n        padding: 12px 16px;\r\n        border-radius: 12px;\r\n        border: 1px solid rgba(0, 0, 0, 0.5);\r\n        color: black;\r\n        font-size: 13px;\r\n        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n    }\r\n\r\n    .info-item:hover {\r\n        background: rgba(255, 255, 255, 0.15);\r\n        border-color: rgba(0, 0, 0, 5);\r\n        transform: translateX(5px);\r\n    }\r\n\r\n    .info-item i {\r\n        color: black; \r\n        font-size: 15px;\r\n        width: 20px;\r\n        text-align: center;\r\n        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));\r\n    }\r\n\r\n    \/* Background Animation Keyframes *\/\r\n    @keyframes floatOrb {\r\n        0% { transform: translateY(0) scale(1); }\r\n        100% { transform: translateY(-30px) scale(1.1); }\r\n    }\r\n\r\n    @keyframes floatUp {\r\n        0% { transform: translateY(0) rotate(0deg); opacity: 0; }\r\n        10% { opacity: 1; }\r\n        90% { opacity: 1; }\r\n        100% { transform: translateY(-105vh) rotate(360deg); opacity: 0; }\r\n    }\r\n\r\n    \/* Responsive Design for Mobile Devices *\/\r\n    @media (max-width: 650px) {\r\n        .card {\r\n            flex-direction: column;\r\n            text-align: center;\r\n            padding: 30px 20px;\r\n            gap: 20px;\r\n        }\r\n        .left-avatar {\r\n            margin-bottom: 10px;\r\n        }\r\n        .info-item {\r\n            transform: none !important;\r\n        }\r\n    }\r\n    \r\n    .logo{\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-evenly;\r\n        gap: 20px;\r\n    }\r\n    \r\n    .logo-img{\r\n        object-fit: contain;\r\n    }\r\n    \r\n<\/style>\r\n\r\n<div class=\"bg-particles\">\r\n    <div class=\"particle p1\"><\/div>\r\n    <div class=\"particle p2\"><\/div>\r\n    <div class=\"particle p3\"><\/div>\r\n    <div class=\"particle p4\"><\/div>\r\n    <div class=\"particle p5\"><\/div>\r\n    <div class=\"particle p6\"><\/div>\r\n    <div class=\"particle p7\"><\/div>\r\n    <div class=\"particle p8\"><\/div>\r\n    <div class=\"particle p9\"><\/div>\r\n    <div class=\"particle p10\"><\/div>\r\n<\/div>\r\n<div class=\"container\">\r\n    \r\n    <div class=\"card\">\r\n        <div class=\"logo\">\r\n            <img decoding=\"async\" class=\"logo-img\" src=\"https:\/\/www.ukm.my\/kkm\/wp-content\/uploads\/2026\/06\/LogoRasmiUKM.png\" style=\"width: 150px;\">\r\n            <img decoding=\"async\" class=\"logo-img\" src=\"https:\/\/www.ukm.my\/kkm\/wp-content\/uploads\/2026\/06\/LOGO-KERIS-MAS-PNG-e1782715397709.png\" style=\"width: 180px;\">\r\n        <\/div>\r\n            \r\n        <div style=\"display: flex; flex-direction: row; gap: 24px; margin-top: -10px\">\r\n        \r\n        <div class=\"left-avatar\">\r\n            <!-- kalau nk tukar gambar amik link url kat media wordpress, copy dan ganti dalam 'src' -->\r\n            <img decoding=\"async\" class=\"card-img\" src=\"https:\/\/www.ukm.my\/kkm\/wp-content\/uploads\/2026\/06\/DR.-NUR-ASMADAYANA.png\" style=\"border-radius: 18px\" alt=\"T.Pengetua\">\r\n        <\/div>\r\n\r\n        <div class=\"right\">\r\n            \r\n            <div class=\"nama\"><!-- kalau nk tukar nama\/jawatan atau yg berkaitan dgn text, tukar -->DR. NUR ASMADAYANA hasim<\/div>\r\n            <div class=\"jaw\"><!-- kalau nk tukar nama\/jawatan atau yg berkaitan dgn text, tukar -->Timbalan Pengetua<\/div>\r\n            \r\n            <div class=\"info\">\r\n                <div class=\"info-item\">\r\n                    <i class=\"fas fa-envelope\"><\/i>\r\n                    <span><!-- kalau nk tukar nama\/jawatan atau yg berkaitan dgn text, tukar -->asmadayana@ukm.edu.my<\/span>\r\n                <\/div>\r\n                <div class=\"info-item\">\r\n                    <i class=\"fas fa-phone-alt\"><\/i>\r\n                    <span><!-- kalau nk tukar nama\/jawatan atau yg berkaitan dgn text, tukar -->03-8921 4288<\/span>\r\n                <\/div>\r\n                <div class=\"info-item\">\r\n                    <i class=\"fas fa-map-marker-alt\"><\/i>\r\n                    <span><!-- kalau nk tukar nama\/jawatan atau yg berkaitan dgn text, tukar -->Pejabat Timbalan Pengetua, Aras 3, Blok Pentadbiran, Kolej Keris Mas<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <\/div>\r\n        <div style=\r\n        \"background: hsla(14, 100%, 57%, 1);\r\n        background: linear-gradient(360deg, hsla(14, 100%, 57%, 1) 0%, hsla(30, 100%, 59%, 1) 100%);\">\r\n            <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/kkm\/wp-content\/uploads\/2026\/06\/FOOTER-e1782716392587.png\">\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DR. NUR ASMADAYANA hasim Timbalan Pengetua asmadayana@ukm.edu.my 03-8921 4288 Pejabat Timbalan Pengetua, Aras 3, Blok Pentadbiran, Kolej Keris Mas<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1629","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/kkm\/wp-json\/wp\/v2\/pages\/1629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/kkm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/kkm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/kkm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/kkm\/wp-json\/wp\/v2\/comments?post=1629"}],"version-history":[{"count":9,"href":"https:\/\/www.ukm.my\/kkm\/wp-json\/wp\/v2\/pages\/1629\/revisions"}],"predecessor-version":[{"id":1901,"href":"https:\/\/www.ukm.my\/kkm\/wp-json\/wp\/v2\/pages\/1629\/revisions\/1901"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/kkm\/wp-json\/wp\/v2\/media?parent=1629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}