{"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-04-04T22:38:50","modified_gmt":"2026-04-04T22:38:50","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        <div class=\"horizon-slide active\">\n            <div class=\"slide-content\">\n                <span class=\"slide-label\">SELAMAT HARI RAYA<\/span>\n                <h1>Aidilfitri Mulia, <br>Ukhwah Terjalin<\/h1>\n                <p>Tulus ikhlas daripada warga MyGovCloud@PDSA. Mengucapkan Selamat Hari Raya Aidilfitri, Maaf Zahir & Batin kepada seluruh agensi sektor awam.<\/p>\n            <\/div>\n            <div class=\"slide-media\">\n                <img decoding=\"async\" src=\"https:\/\/www.mygovcloud.gov.my\/portal\/\/wp-content\/uploads\/2026\/03\/Banner-Raya-v1.jpg\" alt=\"Selamat Hari Raya\">\n            <\/div>\n        <\/div>\n\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        <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>SELAMAT HARI RAYA Aidilfitri Mulia, Ukhwah Terjalin Tulus ikhlas daripada warga MyGovCloud@PDSA. Mengucapkan Selamat Hari Raya Aidilfitri, Maaf Zahir &#038; Batin kepada seluruh agensi sektor awam. 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":"SELAMAT HARI RAYA Aidilfitri Mulia, Ukhwah Terjalin Tulus ikhlas daripada warga MyGovCloud@PDSA. Mengucapkan Selamat Hari Raya Aidilfitri, Maaf Zahir &#038; Batin kepada seluruh agensi sektor awam. 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&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":9,"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/pages\/348\/revisions"}],"predecessor-version":[{"id":7236,"href":"https:\/\/www.mygovcloud.gov.my\/portal\/wp-json\/wp\/v2\/pages\/348\/revisions\/7236"}],"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}]}}