{"id":348,"date":"2024-04-22T04:54:47","date_gmt":"2024-04-22T04:54:47","guid":{"rendered":"http:\/\/10.29.25.198\/colearning\/"},"modified":"2026-05-26T10:32:30","modified_gmt":"2026-05-26T10:32:30","slug":"muka-deoan","status":"publish","type":"page","link":"https:\/\/www.mygovcloud.gov.my\/portal\/","title":{"rendered":"Muka Depan"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"348\" class=\"elementor elementor-348\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-a0d811c e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"a0d811c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a51c72 elementor-widget elementor-widget-html\" data-id=\"4a51c72\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    :root {\n        --pdsa-navy: #0A1F44;\n        --pdsa-cyan: #00BCD4;\n        --pdsa-glass: rgba(255, 255, 255, 0.9);\n        --pdsa-shadow: 0 20px 40px rgba(10, 31, 68, 0.1);\n    }\n\n    .horizon-hero {\n        padding: 40px 0;\n        background: #F8FAFC;\n        font-family: 'Poppins', sans-serif;\n    }\n\n    .horizon-slider {\n        max-width: 1300px;\n        margin: 0 auto;\n        height: 550px;\n        position: relative;\n    }\n\n    .horizon-slide {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        border-radius: 30px;\n        overflow: hidden;\n        opacity: 0; \n        transition: opacity 2.0s ease-in-out, visibility 1.5s; \n        background: #fff;\n        box-shadow: var(--pdsa-shadow);\n        z-index: 1;\n        visibility: hidden;\n    }\n\n    .horizon-slide.active { \n        opacity: 1; \n        z-index: 5; \n        visibility: visible;\n    }\n\n    \/* CONTENT AREA *\/\n    .slide-content {\n        padding: 0 80px;\n        width: 55%;\n        z-index: 10;\n        position: relative;\n    }\n\n    .slide-label {\n        color: var(--pdsa-cyan);\n        font-weight: 700;\n        letter-spacing: 2px;\n        font-size: 14px;\n        margin-bottom: 15px;\n        display: block;\n    }\n\n    .slide-content h1 {\n        font-size: clamp(28px, 4vw, 50px);\n        color: var(--pdsa-navy);\n        font-weight: 800;\n        line-height: 1.2;\n        margin-bottom: 20px;\n    }\n\n    .slide-content p {\n        font-size: clamp(14px, 1.5vw, 16px);\n        color: #64748B;\n        max-width: 90%;\n        margin-bottom: 30px;\n    }\n\n    \/* MANUAL CONTROLS *\/\n    .horizon-controls {\n        position: absolute;\n        bottom: 50px;\n        left: 80px;\n        z-index: 20;\n        display: flex;\n        gap: 15px;\n    }\n\n    .control-btn {\n        background: var(--pdsa-navy);\n        color: #fff;\n        border: none;\n        width: 45px;\n        height: 45px;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: 0.3s;\n        font-size: 18px;\n        box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n    }\n\n    .control-btn:hover {\n        background: var(--pdsa-cyan);\n        transform: scale(1.1);\n    }\n\n    \/* MEDIA AREA *\/\n    .slide-media {\n        position: absolute;\n        right: 0; \n        top: 0; \n        width: 50%; \n        height: 100%;\n        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);\n        -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);\n    }\n\n    .slide-media img { \n        width: 100%; \n        height: 100%; \n        object-fit: cover; \n    }\n\n    \/* RESPONSIVE SETTINGS *\/\n    @media (max-width: 1024px) {\n        .horizon-slider { height: 450px; margin: 0 20px; }\n        .slide-content { padding: 0 40px; width: 60%; }\n        .horizon-controls { left: 40px; bottom: 30px; }\n    }\n\n    @media (max-width: 768px) {\n        .horizon-slider { height: auto; min-height: 580px; display: flex; }\n        .horizon-slide { flex-direction: column-reverse; align-items: flex-start; position: relative; display: none; }\n        .horizon-slide.active { display: flex; }\n        .slide-content { width: 100%; padding: 30px 25px 80px; text-align: center; }\n        .slide-content h1 { font-size: 32px; }\n        .slide-content p { max-width: 100%; margin: 0 auto 20px; }\n        .slide-media { position: relative; width: 100%; height: 250px; clip-path: none; -webkit-clip-path: none; }\n        .horizon-controls { left: 50%; transform: translateX(-50%); bottom: 20px; }\n    }\n<\/style>\n\n<section class=\"horizon-hero\">\n    <div class=\"horizon-slider\">\n        \n        <!-- SLIDE 1: SELAMAT HARI RAYA AIDILADHA (KINI ACTIVE\/PERTAMA) -->\n        <div class=\"horizon-slide active\">\n            <div class=\"slide-content\">\n                <span class=\"slide-label\">HARI RAYA AIDILADHA<\/span>\n                <h1>Pengorbanan Suci, <br>Keberkatan Dikongsi<\/h1>\n                <p>Selamat Hari Raya Aidiladha, kepada seluruh agensi sektor awam. Tulus ikhlas daripada warga MyGovCloud@PDSA.<\/p>\n            <\/div>\n            <div class=\"slide-media\">\n                <img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/05\/Poster-Raya-Haji.jpg\" alt=\"Selamat Hari Raya Aidiladha\">\n            <\/div>\n        <\/div>\n\n        <!-- SLIDE 2: SELAMAT HARI WESAK (KINI KEDUA) -->\n        <div class=\"horizon-slide\">\n            <div class=\"slide-content\">\n                <span class=\"slide-label\">SELAMAT HARI WESAK<\/span>\n                <h1>Keamanan Sejagat, <br>Keharmonian Bersama<\/h1>\n                <p>Mengucapkan Selamat Hari Wesak kepada semua penganut agama Buddha dalam sektor awam. Semoga perayaan ini membawa kedamaian, kebahagiaan, dan kesejahteraan yang berkekalan kepada kita semua.<\/p>\n            <\/div>\n            <div class=\"slide-media\">\n                <img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/05\/Poster-Selamat-Hari-Wesak.jpg\" alt=\"Selamat Hari Wesak\">\n            <\/div>\n        <\/div>\n\n        <!-- SLIDE 3: PENGIKTIRAFAN -->\n        <div class=\"horizon-slide\">\n            <div class=\"slide-content\">\n                <span class=\"slide-label\">PENGIKTIRAFAN KEBANGSAAN<\/span>\n                <h1>Pemenang Anugerah <br>Inter-Agency 2026<\/h1>\n                <p>MyGovCloud@PDSA dinobatkan sebagai pemenang di Festival of Innovation Awards 2026 oleh GovInsider.<\/p>\n            <\/div>\n            <div class=\"slide-media\">\n                <img decoding=\"async\" src=\"https:\/\/www.mygovcloud.gov.my\/portal\/\/wp-content\/uploads\/2026\/03\/Menang-Anugerah-Inter-Agency-Award.jpg\" alt=\"Winner Inter-Agency Award 2026\">\n            <\/div>\n        <\/div>\n\n        <!-- SLIDE 4: WELCOME -->\n        <div class=\"horizon-slide\">\n            <div class=\"slide-content\">\n                <span class=\"slide-label\">PUSAT DATA SEKTOR AWAM<\/span>\n                <h1>Selamat Datang ke <br>MyGovCloud@PDSA<\/h1>\n                <p>Memacu kecemerlangan digital sektor awam melalui infrastruktur awan yang selamat, dipercayai dan efisien.<\/p>\n            <\/div>\n            <div class=\"slide-media\">\n                <img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/04\/Banner-Cloud-scaled.jpg\" alt=\"MyGovCloud\">\n            <\/div>\n        <\/div>\n\n        <div class=\"horizon-controls\">\n            <button class=\"control-btn\" id=\"prevBtn\">\u276e<\/button>\n            <button class=\"control-btn\" id=\"nextBtn\">\u276f<\/button>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n    const slides = document.querySelectorAll('.horizon-slide');\n    const nextBtn = document.getElementById('nextBtn');\n    const prevBtn = document.getElementById('prevBtn');\n    let currentSlide = 0;\n    let slideInterval;\n\n    function showSlide(n) {\n        slides[currentSlide].classList.remove('active');\n        currentSlide = (n + slides.length) % slides.length;\n        slides[currentSlide].classList.add('active');\n        resetTimer();\n    }\n\n    function resetTimer() {\n        clearInterval(slideInterval);\n        startSlider();\n    }\n\n    function startSlider() {\n        slideInterval = setInterval(() => {\n            showSlide(currentSlide + 1);\n        }, 5000);\n    }\n\n    nextBtn.addEventListener('click', () => showSlide(currentSlide + 1));\n    prevBtn.addEventListener('click', () => showSlide(currentSlide - 1));\n\n    startSlider();\n\n    document.addEventListener(\"visibilitychange\", function() {\n        if (document.hidden) {\n            clearInterval(slideInterval);\n        } else {\n            startSlider();\n        }\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-2cd9a5b e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"2cd9a5b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba103d1 elementor-widget elementor-widget-html\" data-id=\"ba103d1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    \/* --- 1. SETUP SECTION (MATCHING BANNER WIDTH) --- *\/\n    .kpi-fresh-section {\n        padding: 60px 0 100px;\n        background-color: #ffffff; \n        font-family: 'Poppins', sans-serif;\n    }\n\n    .kpi-container {\n        max-width: 1300px; \/* Samakan lebar dengan banner atas *\/\n        margin: 0 auto;\n        padding: 0 45px; \/* Alignment selari tegak dengan teks banner *\/\n    }\n\n    \/* --- DESIGN TAJUK (MATCHING BANNER TYPOGRAPHY) --- *\/\n    .kpi-section-header {\n        margin-bottom: 50px;\n        text-align: left;\n    }\n\n    .kpi-tag-label {\n        color: #00BCD4 !important;\n        font-weight: 700 !important;\n        font-size: 14px !important;\n        text-transform: uppercase;\n        letter-spacing: 3px !important; \/* Jarak huruf luas *\/\n        display: block;\n        margin-bottom: 15px;\n    }\n\n    .kpi-main-title {\n        color: #0A1F44 !important;\n        \/* PAKSA TEBAL GERGASI SEBIJIK BANNER ATAS *\/\n        font-size: clamp(32px, 5vw, 48px) !important;\n        font-weight: 800 !important; \n        line-height: 1.1 !important;\n        margin: 0 !important;\n        letter-spacing: -1.5px !important;\n    }\n\n    \/* --- 2. GRID & KAD (ASAL HANG - 100% KEKAL) --- *\/\n    .kpi-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr); \n        gap: 30px;\n    }\n\n    .kpi-card {\n        background: #fff;\n        padding: 50px 30px;\n        border-radius: 30px; \n        text-align: center;\n        box-shadow: 0 15px 35px rgba(10, 31, 68, 0.05); \n        transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        border: 1px solid #f1f5f9;\n        position: relative;\n    }\n\n    .kpi-card:hover { \n        transform: translateY(-12px); \n        border-color: #00BCD4; \n        box-shadow: 0 25px 50px rgba(10, 31, 68, 0.1);\n    }\n\n    .kpi-icon {\n        width: 50px;\n        height: 50px;\n        color: #00BCD4; \n        margin-bottom: 20px;\n        transition: 0.3s;\n    }\n\n    .kpi-card:hover .kpi-icon {\n        transform: scale(1.1);\n    }\n\n    .num { \n        font-size: 46px !important; \n        font-weight: 800 !important; \n        color: #0A1F44 !important; \n        display: block; \n        line-height: 1;\n        margin-bottom: 10px;\n    }\n\n    .label { \n        font-size: 13px !important; \n        font-weight: 600 !important; \n        color: #00BCD4 !important; \n        text-transform: uppercase; \n        letter-spacing: 1.5px; \n    }\n\n    \/* --- RESPONSIVE --- *\/\n    @media (max-width: 991px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }\n    @media (max-width: 600px) { \n        .kpi-grid { grid-template-columns: 1fr; }\n        .kpi-section-header { text-align: center; }\n    }\n<\/style>\n\n<div class=\"kpi-fresh-section\">\n    <div class=\"kpi-container\">\n        \n        <div class=\"kpi-section-header\">\n            <span class=\"kpi-tag-label\">Prestasi & Impak<\/span>\n            <h2 class=\"kpi-main-title\">Pencapaian MyGovCloud@PDSA<\/h2>\n        <\/div>\n\n        <div class=\"kpi-grid\">\n            <div class=\"kpi-card\">\n                <svg class=\"kpi-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21\" \/><\/svg>\n                <span class=\"num\" data-target=\"4\">0<\/span>\n                <span class=\"label\">Pusat Data<\/span>\n            <\/div>\n\n            <div class=\"kpi-card\">\n                <svg class=\"kpi-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\" \/><\/svg>\n                <span class=\"num\" data-target=\"244\">0<\/span>\n                <span class=\"label\">Agensi Kerajaan<\/span>\n            <\/div>\n\n            <div class=\"kpi-card\">\n                <svg class=\"kpi-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z\" \/><\/svg>\n                <span class=\"num\" data-target=\"6255\">0<\/span>\n                <span class=\"label\">Cloud Server<\/span>\n            <\/div>\n\n            <div class=\"kpi-card\">\n                <svg class=\"kpi-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3\" \/><\/svg>\n                <span class=\"num\" data-target=\"2661\">0<\/span>\n                <span class=\"label\">Server Fizikal<\/span>\n            <\/div>\n\n            <div class=\"kpi-card\">\n                <svg class=\"kpi-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" \/><\/svg>\n                <span class=\"num\" data-target=\"99.5\" data-decimal=\"true\">0<\/span>\n                <span class=\"label\">Ketersediaan (%)<\/span>\n            <\/div>\n\n            <div class=\"kpi-card\">\n                <svg class=\"kpi-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z\" \/><\/svg>\n                <span class=\"num\" data-target=\"2\">0<\/span>\n                <span class=\"label\">Pengiktirafan<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    function animateNumbers() {\n        const counters = document.querySelectorAll('.num');\n        counters.forEach(counter => {\n            const target = parseFloat(counter.getAttribute('data-target'));\n            const isDecimal = counter.getAttribute('data-decimal') === 'true';\n            let count = 0;\n            const duration = 2000;\n            const increment = target \/ (duration \/ 20);\n\n            const update = () => {\n                if (count < target) {\n                    count += increment;\n                    counter.innerText = isDecimal ? count.toFixed(1) : Math.ceil(count);\n                    setTimeout(update, 20);\n                } else {\n                    counter.innerText = isDecimal ? target.toFixed(1) : target;\n                }\n            };\n            update();\n        });\n    }\n\n    const observer = new IntersectionObserver((entries) => {\n        if(entries[0].isIntersecting) {\n            animateNumbers();\n            observer.unobserve(entries[0].target);\n        }\n    }, { threshold: 0.3 });\n\n    observer.observe(document.querySelector('.kpi-fresh-section'));\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-e2b46ff e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"e2b46ff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b2103f elementor-widget elementor-widget-html\" data-id=\"9b2103f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    \/* --- 1. SETUP SECTION --- *\/\n    .pengguna-section {\n        padding: 80px 0;\n        background-color: #ffffff;\n        background-image: radial-gradient(#00bcd4 0.5px, transparent 0.5px), radial-gradient(#00bcd4 0.5px, #ffffff 0.5px);\n        background-size: 30px 30px;\n        background-position: 0 0, 15px 15px;\n        background-attachment: fixed;\n        font-family: 'Poppins', sans-serif;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .pengguna-section::before {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.85) 50%, #ffffff 100%);\n        z-index: 1;\n    }\n\n    .pengguna-header, .slider-outer-wrap {\n        position: relative;\n        z-index: 2;\n    }\n\n    .pengguna-header {\n        max-width: 1300px;\n        margin: 0 auto 50px;\n        padding: 0 20px;\n        text-align: center;\n    }\n\n    .pengguna-tag {\n        color: #00BCD4 !important;\n        font-weight: 700 !important;\n        font-size: 14px !important;\n        text-transform: uppercase;\n        letter-spacing: 3px !important;\n        display: block;\n        margin-bottom: 15px;\n    }\n\n    .pengguna-title {\n        color: #0A1F44 !important;\n        font-size: clamp(28px, 5vw, 42px) !important;\n        font-weight: 800 !important;\n        line-height: 1.2;\n        letter-spacing: -1px;\n    }\n\n    \/* --- 2. SLIDER UI --- *\/\n    .slider-outer-wrap {\n        position: relative;\n        padding: 20px 0;\n    }\n\n    .logo-slider-container {\n        display: flex;\n        width: 100%;\n        overflow-x: hidden;\n        white-space: nowrap;\n        cursor: pointer;\n    }\n\n    .logo-slider {\n        display: flex;\n        gap: 40px;\n        padding: 20px 0;\n    }\n\n    .slide-unit {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        min-width: 300px;\n        text-decoration: none;\n        transition: 0.3s;\n    }\n\n    .logo-box {\n        width: 100%;\n        height: 150px;\n        background: #ffffff;\n        border-radius: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 30px;\n        border: 1px solid #eef2f6;\n        box-shadow: 0 10px 30px rgba(10, 31, 68, 0.05);\n        transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n\n    .slide-unit:hover .logo-box {\n        border-color: #00BCD4;\n        transform: translateY(-10px);\n        box-shadow: 0 20px 40px rgba(0, 188, 212, 0.15);\n    }\n\n    .logo-box img {\n        max-width: 200px;\n        max-height: 90px;\n        height: auto;\n        object-fit: contain;\n    }\n\n    .agency-label {\n        margin-top: 20px;\n        font-size: 13px;\n        font-weight: 700;\n        color: #0A1F44;\n        text-align: center;\n        max-width: 260px;\n        line-height: 1.4;\n        opacity: 0.9;\n        white-space: normal;\n    }\n\n    \/* --- 3. NAVIGASI ARROW --- *\/\n    .slider-nav {\n        position: absolute;\n        top: 35%;\n        width: 100%;\n        display: flex;\n        justify-content: space-between;\n        padding: 0 15px;\n        z-index: 10;\n        pointer-events: none;\n    }\n\n    .nav-btn {\n        width: 45px;\n        height: 45px;\n        background: #ffffff;\n        border: 2px solid #00BCD4;\n        border-radius: 50%;\n        color: #00BCD4;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        pointer-events: auto;\n        box-shadow: 0 4px 10px rgba(0, 188, 212, 0.2);\n        transition: 0.3s;\n    }\n\n    .nav-btn:hover {\n        background: #00BCD4;\n        color: #ffffff;\n    }\n\n    \/* Fade Edge Effect *\/\n    .slider-outer-wrap::before, .slider-outer-wrap::after {\n        content: \"\";\n        position: absolute;\n        top: 0; width: 100px; height: 100%;\n        z-index: 3;\n        pointer-events: none;\n    }\n    .slider-outer-wrap::before { left: 0; background: linear-gradient(to right, #ffffff, transparent); }\n    .slider-outer-wrap::after { right: 0; background: linear-gradient(to left, #ffffff, transparent); }\n\n    \/* RESPONSIVE *\/\n    @media (max-width: 768px) {\n        .slide-unit { min-width: 240px; }\n        .logo-box { height: 120px; padding: 20px; }\n        .logo-box img { max-width: 160px; max-height: 70px; }\n        .agency-label { font-size: 11px; max-width: 200px; }\n        .nav-btn { width: 35px; height: 35px; font-size: 12px; }\n        .slider-outer-wrap::before, .slider-outer-wrap::after { width: 50px; }\n    }\n<\/style>\n\n<section class=\"pengguna-section\">\n    <div class=\"pengguna-header\">\n        <span class=\"pengguna-tag\">Pengguna PDSA<\/span>\n        <h2 class=\"pengguna-title\">Agensi & Jabatan Kerajaan<\/h2>\n    <\/div>\n\n    <div class=\"slider-outer-wrap\">\n        <div class=\"slider-nav\">\n            <div class=\"nav-btn\" onclick=\"btnScroll('left')\"><i class=\"fas fa-chevron-left\"><\/i><\/div>\n            <div class=\"nav-btn\" onclick=\"btnScroll('right')\"><i class=\"fas fa-chevron-right\"><\/i><\/div>\n        <\/div>\n\n        <div class=\"logo-slider-container\" id=\"sliderContainer\">\n            <div class=\"logo-slider\" id=\"logoSlider\">\n                <a href=\"https:\/\/www.moh.gov.my\/\" target=\"_blank\" class=\"slide-unit\">\n                    <div class=\"logo-box\"><img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/03\/JATA-NEGARA-AI-01.png\" alt=\"KKM\"><\/div>\n                    <span class=\"agency-label\">Kementerian Kesihatan (KKM)<\/span>\n                <\/a>\n                <a href=\"https:\/\/www.jdn.gov.my\/\" target=\"_blank\" class=\"slide-unit\">\n                    <div class=\"logo-box\"><img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/03\/JATA-NEGARA-AI-01.png\" alt=\"JDN\"><\/div>\n                    <span class=\"agency-label\">Jabatan Digital Negara (JDN)<\/span>\n                <\/a>\n                <a href=\"https:\/\/www.islam.gov.my\/ms\/\" target=\"_blank\" class=\"slide-unit\">\n                    <div class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/www.mygovcloud.gov.my\/portal\/\/wp-content\/uploads\/2024\/11\/jakim-logo-vector-720x340-1.png\" alt=\"JAKIM\"><\/div>\n                    <span class=\"agency-label\">Jabatan Kemajuan Islam Malaysia (JAKIM)<\/span>\n                <\/a>\n                <a href=\"https:\/\/www.bheuu.gov.my\/\" target=\"_blank\" class=\"slide-unit\">\n                    <div class=\"logo-box\"><img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/03\/JATA-NEGARA-AI-01.png\" alt=\"BHEUU\"><\/div>\n                    <span class=\"agency-label\">Bahagian Hal Ehwal Undang-Undang (BHEUU)<\/span>\n                <\/a>\n                <a href=\"https:\/\/www.mohe.gov.my\/\" target=\"_blank\" class=\"slide-unit\">\n                    <div class=\"logo-box\"><img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/03\/JATA-NEGARA-AI-01.png\" alt=\"KPT\"><\/div>\n                    <span class=\"agency-label\">Kementerian Pengajian Tinggi (KPT)<\/span>\n                <\/a>\n                <a href=\"https:\/\/www.moha.gov.my\/\" target=\"_blank\" class=\"slide-unit\">\n                    <div class=\"logo-box\"><img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/03\/JATA-NEGARA-AI-01.png\" alt=\"KDN\"><\/div>\n                    <span class=\"agency-label\">Kementerian Dalam Negeri (KDN)<\/span>\n                <\/a>\n                <a href=\"https:\/\/www.mof.gov.my\/ms\/\" target=\"_blank\" class=\"slide-unit\">\n                    <div class=\"logo-box\"><img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/03\/JATA-NEGARA-AI-01.png\" alt=\"MOF\"><\/div>\n                    <span class=\"agency-label\">Kementerian Kewangan (MOF)<\/span>\n                <\/a>\n                <a href=\"https:\/\/www.moe.gov.my\/\" target=\"_blank\" class=\"slide-unit\">\n                    <div class=\"logo-box\"><img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/03\/JATA-NEGARA-AI-01.png\" alt=\"KPM\"><\/div>\n                    <span class=\"agency-label\">Kementerian Pendidikan Malaysia (KPM)<\/span>\n                <\/a>\n                <a href=\"https:\/\/www.petra.gov.my\/\" target=\"_blank\" class=\"slide-unit\">\n                    <div class=\"logo-box\"><img decoding=\"async\" src=\"http:\/\/www.mygovcloud.gov.my\/portal\/wp-content\/uploads\/2026\/03\/JATA-NEGARA-AI-01.png\" alt=\"PETRA\"><\/div>\n                    <span class=\"agency-label\">Kementerian Peralihan Tenaga dan Transformasi Air (PETRA)<\/span>\n                <\/a>\n                \n                <div id=\"cloneArea\" style=\"display: flex; gap: 40px;\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n    const container = document.getElementById('sliderContainer');\n    const slider = document.getElementById('logoSlider');\n    const cloneArea = document.getElementById('cloneArea');\n    \n    \/\/ Auto-Clone content\n    cloneArea.innerHTML = slider.innerHTML.replace('id=\"cloneArea\"', '');\n\n    let isPaused = false;\n    let scrollSpeed = 0.7; \/\/ Speed: 0.7 is slow and premium\n\n    function step() {\n        if (!isPaused) {\n            container.scrollLeft += scrollSpeed;\n            \/\/ Reset bila sampai separuh\n            if (container.scrollLeft >= (slider.scrollWidth \/ 2)) {\n                container.scrollLeft = 0;\n            }\n        }\n        requestAnimationFrame(step);\n    }\n\n    requestAnimationFrame(step);\n\n    function btnScroll(direction) {\n        isPaused = true;\n        \/\/ Dinamik offset: 340px desktop, 280px mobile\n        const offset = window.innerWidth <= 768 ? 280 : 340;\n        \n        if (direction === 'left') {\n            container.scrollTo({ left: container.scrollLeft - offset, behavior: 'smooth' });\n        } else {\n            container.scrollTo({ left: container.scrollLeft + offset, behavior: 'smooth' });\n        }\n        \n        \/\/ Resume balik lepas 4 saat\n        setTimeout(() => { isPaused = false; }, 4000);\n    }\n\n    container.addEventListener('mouseenter', () => isPaused = true);\n    container.addEventListener('mouseleave', () => isPaused = false);\n    \n    \/\/ Support Touch untuk mobile manual swipe\n    container.addEventListener('touchstart', () => isPaused = true);\n    container.addEventListener('touchend', () => {\n        setTimeout(() => { isPaused = false; }, 4000);\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-0e21170 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"0e21170\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b8fbbd elementor-widget elementor-widget-html\" data-id=\"8b8fbbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"homeNoticePopup\" class=\"popup-overlay\" style=\"display: none;\">\n    <div class=\"popup-content\">\n        <div class=\"popup-header\">\n            <div class=\"popup-badge\">Makluman Rasmi<\/div>\n            <button class=\"popup-close-x\" onclick=\"closeHomePopup()\">&times;<\/button>\n        <\/div>\n        <div class=\"popup-body\">\n            <i class=\"fas fa-bullhorn popup-icon\"><\/i>\n            <h3>Penyelenggaraan Sistem<\/h3>\n            <p>\n                Dukacita dimaklumkan bahawa portal akan mengalami gangguan capaian buat sementara waktu bagi urusan penyelenggaraan berjadual pada:\n            <\/p>\n            <div class=\"popup-info-box\">\n                <strong>Tarikh:<\/strong> 15 April 2026<br>\n                <strong>Masa:<\/strong> 11:00 Malam - 04:00 Pagi\n            <\/div>\n            <p class=\"popup-footer-text\">Segala kesulitan amat dikesali. Terima kasih.<\/p>\n        <\/div>\n        <div class=\"popup-action\">\n            <button class=\"popup-btn-close\" onclick=\"closeHomePopup()\">Faham & Tutup<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    .popup-overlay {\n        position: fixed;\n        top: 0; left: 0;\n        width: 100%; height: 100%;\n        background: rgba(10, 31, 68, 0.85);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 99999;\n        backdrop-filter: blur(5px);\n        font-family: 'Poppins', sans-serif;\n    }\n    .popup-content {\n        background: #ffffff;\n        width: 90%;\n        max-width: 500px;\n        border-radius: 24px;\n        overflow: hidden;\n        box-shadow: 0 25px 50px rgba(0,0,0,0.3);\n        animation: popupScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n    @keyframes popupScale {\n        from { opacity: 0; transform: scale(0.8); }\n        to { opacity: 1; transform: scale(1); }\n    }\n    .popup-header { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f5f9; }\n    .popup-badge { background: rgba(0, 188, 212, 0.1); color: #00BCD4; padding: 5px 15px; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; }\n    .popup-close-x { background: none; border: none; font-size: 28px; color: #94a3b8; cursor: pointer; line-height: 1; }\n    .popup-body { padding: 40px 35px; text-align: center; }\n    .popup-icon { font-size: 50px; color: #00BCD4; margin-bottom: 20px; }\n    .popup-body h3 { color: #0A1F44; font-weight: 800; font-size: 24px; margin-bottom: 15px; }\n    .popup-body p { color: #64748b; font-size: 14px; line-height: 1.6; }\n    .popup-info-box { background: #f8fafc; border-radius: 12px; padding: 15px; margin: 20px 0; font-size: 14px; color: #0A1F44; border: 1px dashed #cbd5e1; text-align: left; }\n    .popup-footer-text { font-size: 12px !important; font-style: italic; }\n    .popup-action { padding: 0 35px 35px 35px; }\n    .popup-btn-close { width: 100%; background: #0A1F44; color: white; border: none; padding: 16px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.3s; }\n    .popup-btn-close:hover { background: #00BCD4; transform: translateY(-2px); }\n<\/style>\n\n<script>\n    \/* --- ADMIN CONTROL --- *\/\n    const isPopupOn = false; \/\/ TUKAR false UNTUK MATIKAN\n    \/* -------------------- *\/\n\n    window.addEventListener('load', function() {\n        const p = document.getElementById('homeNoticePopup');\n        \/\/ Terus display flex bila page load\n        if (isPopupOn && !sessionStorage.getItem('hideHomeNotice')) {\n            p.style.display = 'flex'; \n        }\n    });\n\n    function closeHomePopup() {\n        document.getElementById('homeNoticePopup').style.opacity = '0';\n        setTimeout(() => {\n            document.getElementById('homeNoticePopup').style.display = 'none';\n            sessionStorage.setItem('hideHomeNotice', 'true');\n        }, 300);\n    }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>HARI RAYA AIDILADHA Pengorbanan Suci, Keberkatan Dikongsi Selamat Hari Raya Aidiladha, kepada seluruh agensi sektor awam. Tulus ikhlas daripada warga MyGovCloud@PDSA. SELAMAT HARI WESAK Keamanan Sejagat, Keharmonian Bersama Mengucapkan Selamat Hari Wesak kepada semua penganut agama Buddha dalam sektor awam. Semoga perayaan ini membawa kedamaian, kebahagiaan, dan kesejahteraan yang berkekalan kepada kita semua. PENGIKTIRAFAN KEBANGSAAN Pemenang Anugerah Inter-Agency 2026 MyGovCloud@PDSA dinobatkan sebagai pemenang di Festival of Innovation Awards 2026 oleh GovInsider. PUSAT DATA SEKTOR AWAM Selamat Datang ke MyGovCloud@PDSA Memacu kecemerlangan digital sektor awam melalui infrastruktur awan yang selamat, dipercayai dan efisien. \u276e \u276f Prestasi &#038; Impak Pencapaian MyGovCloud@PDSA 0 Pusat Data 0 Agensi Kerajaan 0 Cloud Server 0 Server Fizikal 0 Ketersediaan (%) 0 Pengiktirafan Pengguna PDSA Agensi &#038; Jabatan Kerajaan Kementerian Kesihatan (KKM) Jabatan Digital Negara (JDN) Jabatan Kemajuan Islam Malaysia (JAKIM) Bahagian Hal Ehwal Undang-Undang (BHEUU) Kementerian Pengajian Tinggi (KPT) Kementerian Dalam Negeri (KDN) Kementerian Kewangan (MOF) Kementerian Pendidikan Malaysia (KPM) Kementerian Peralihan Tenaga dan Transformasi Air (PETRA) Makluman Rasmi &times; Penyelenggaraan Sistem Dukacita dimaklumkan bahawa portal akan mengalami gangguan capaian buat sementara waktu bagi urusan penyelenggaraan berjadual pada: Tarikh: 15 April 2026 Masa: 11:00 Malam &#8211; 04:00 Pagi Segala kesulitan amat dikesali. Terima kasih. Faham &#038; Tutup<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-348","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"reduan","author_link":"https:\/\/www.mygovcloud.gov.my\/portal\/author\/reduan\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"HARI RAYA AIDILADHA Pengorbanan Suci, Keberkatan Dikongsi Selamat Hari Raya Aidiladha, kepada seluruh agensi sektor awam. Tulus ikhlas daripada warga MyGovCloud@PDSA. SELAMAT HARI WESAK Keamanan Sejagat, Keharmonian Bersama Mengucapkan Selamat Hari Wesak kepada semua penganut agama Buddha dalam sektor awam. Semoga perayaan ini membawa kedamaian, kebahagiaan, dan kesejahteraan yang berkekalan kepada kita semua. PENGIKTIRAFAN KEBANGSAAN&hellip;","_links":{"self":[{"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/pages\/348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/comments?post=348"}],"version-history":[{"count":30,"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/pages\/348\/revisions"}],"predecessor-version":[{"id":7283,"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/pages\/348\/revisions\/7283"}],"wp:attachment":[{"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/media?parent=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}