{"id":1336,"date":"2025-06-21T23:18:19","date_gmt":"2025-06-21T15:18:19","guid":{"rendered":"https:\/\/masaa.org.my\/v1\/?p=1336"},"modified":"2025-06-21T23:42:01","modified_gmt":"2025-06-21T15:42:01","slug":"apa-itu-disability-equality-training-det-dan-bagaimana-det-mengubah-sikap-dan-tindakan","status":"publish","type":"post","link":"http:\/\/masaa.org.my\/v1\/apa-itu-disability-equality-training-det-dan-bagaimana-det-mengubah-sikap-dan-tindakan\/","title":{"rendered":"Apa itu Disability Equality Training (DET) dan Bagaimana DET Mengubah Sikap dan Tindakan"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1336\" class=\"elementor elementor-1336\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b5b8af5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b5b8af5\" 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-top-column elementor-element elementor-element-e015667\" data-id=\"e015667\" 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-4fa37ee elementor-widget elementor-widget-image\" data-id=\"4fa37ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2025\/06\/Apa-itu-Disability-Equality-Training-DET-dan-Bagaimana-DET-Mengubah-Sikap-dan-Tindakan.jpg\" class=\"attachment-large size-large wp-image-1344\" alt=\"Apa itu Disability Equality Training (DET) dan Bagaimana DET Mengubah Sikap dan Tindakan\" srcset=\"https:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2025\/06\/Apa-itu-Disability-Equality-Training-DET-dan-Bagaimana-DET-Mengubah-Sikap-dan-Tindakan.jpg 1024w, https:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2025\/06\/Apa-itu-Disability-Equality-Training-DET-dan-Bagaimana-DET-Mengubah-Sikap-dan-Tindakan-300x164.jpg 300w, https:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2025\/06\/Apa-itu-Disability-Equality-Training-DET-dan-Bagaimana-DET-Mengubah-Sikap-dan-Tindakan-768x419.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-47630d6b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"47630d6b\" 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-top-column elementor-element elementor-element-57ae864\" data-id=\"57ae864\" 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-5d1cff3 elementor-widget elementor-widget-html\" data-id=\"5d1cff3\" 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<!DOCTYPE html>\n<html lang=\"ms\" class=\"scroll-smooth\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Interaktif DET: Membina Masyarakat Inklusif<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n    <!-- Chosen Palette: Warm Neutrals (Light beige, dark stone text, teal accent) -->\n    <!-- Application Structure Plan: A single-page, scrollable application with a sticky navigation bar. The structure guides the user from a high-level introduction to the core concepts of DET (using an interactive toggle for the Medical\/Social models), its methods (visualized with a bar chart), its impact (using a donut chart and tabbed interface), and finally a clear call to action. This thematic, interactive structure was chosen over a linear blog layout to enhance user engagement, facilitate non-linear exploration, and make complex concepts like the paradigm shift more digestible and memorable. -->\n    <!-- Visualization & Content Choices:\n    - Report Info: Medical vs. Social Model concept -> Goal: Compare & Explain -> Viz\/Method: Interactive side-by-side cards with a toggle -> Interaction: User clicks to switch views -> Justification: Actively engages user in understanding the core paradigm shift -> Library\/Method: Vanilla JS, HTML\/CSS.\n    - Report Info: Emphasis on certain DET methods (simulation, experience sharing) -> Goal: Visualize Importance -> Viz\/Method: Horizontal Bar Chart -> Interaction: Hover for tooltips -> Justification: Translates qualitative emphasis into an easy-to-read visual comparison -> Library\/Method: Chart.js (Canvas).\n    - Report Info: DET impacts attitude, mindset, skills -> Goal: Summarize Impact -> Viz\/Method: Donut Chart -> Interaction: Hover for details -> Justification: Provides a high-level, memorable summary of DET's key outcomes -> Library\/Method: Chart.js (Canvas).\n    - Report Info: Detailed text on different impacts -> Goal: Organize Content -> Viz\/Method: Tabbed Interface -> Interaction: Click to switch content -> Justification: Prevents 'wall of text' and allows focused exploration of impact areas -> Library\/Method: Vanilla JS, HTML\/CSS. -->\n    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n    <style>\n        body {\n            font-family: 'Inter', sans-serif;\n        }\n        .chart-container {\n            position: relative;\n            margin: auto;\n            height: 40vh;\n            width: 100%;\n            max-width: 600px;\n            max-height: 400px;\n        }\n        @media (min-width: 768px) {\n            .chart-container {\n                height: 350px;\n            }\n        }\n        .nav-link {\n            transition: color 0.3s, border-color 0.3s;\n        }\n        .active-nav {\n            color: #0d9488; \/* text-teal-600 *\/\n            border-bottom-color: #0d9488;\n        }\n        .tab-button {\n            transition: all 0.3s ease;\n        }\n        .active-tab {\n            background-color: #0d9488; \/* bg-teal-600 *\/\n            color: white;\n            box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n        }\n        .model-card {\n            transition: all 0.5s ease-in-out;\n            transform-style: preserve-3d;\n        }\n        .is-flipped {\n            transform: rotateY(180deg);\n        }\n        .card-face {\n            backface-visibility: hidden;\n            -webkit-backface-visibility: hidden;\n        }\n        .card-back {\n            transform: rotateY(180deg);\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-stone-50 text-stone-800 antialiased\">\n\n    <!-- Header & Navigation -->\n    <header id=\"header\" class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-50 shadow-sm\">\n        <div class=\"container mx-auto px-4\">\n            <nav class=\"flex justify-between items-center py-4\">\n                <a href=\"#hero\" class=\"text-xl font-bold text-teal-700\">Interaktif DET<\/a>\n                <div class=\"hidden md:flex space-x-6 items-center\">\n                    <a href=\"#apa-itu-det\" class=\"nav-link text-stone-600 hover:text-teal-600 border-b-2 border-transparent pb-1\">Apa Itu DET?<\/a>\n                    <a href=\"#bagaimana-ia-berfungsi\" class=\"nav-link text-stone-600 hover:text-teal-600 border-b-2 border-transparent pb-1\">Bagaimana Ia Berfungsi?<\/a>\n                    <a href=\"#kesan-impak\" class=\"nav-link text-stone-600 hover:text-teal-600 border-b-2 border-transparent pb-1\">Kesan & Impak<\/a>\n                    <a href=\"#sertai-perubahan\" class=\"nav-link text-stone-600 hover:text-teal-600 border-b-2 border-transparent pb-1\">Sertai Perubahan<\/a>\n                <\/div>\n                <button id=\"mobile-menu-button\" class=\"md:hidden text-stone-600 focus:outline-none\">\n                    <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\n                <\/button>\n            <\/nav>\n            <div id=\"mobile-menu\" class=\"hidden md:hidden pb-4\">\n                <a href=\"#apa-itu-det\" class=\"block py-2 px-4 text-sm text-stone-600 hover:bg-teal-50 rounded\">Apa Itu DET?<\/a>\n                <a href=\"#bagaimana-ia-berfungsi\" class=\"block py-2 px-4 text-sm text-stone-600 hover:bg-teal-50 rounded\">Bagaimana Ia Berfungsi?<\/a>\n                <a href=\"#kesan-impak\" class=\"block py-2 px-4 text-sm text-stone-600 hover:bg-teal-50 rounded\">Kesan & Impak<\/a>\n                <a href=\"#sertai-perubahan\" class=\"block py-2 px-4 text-sm text-stone-600 hover:bg-teal-50 rounded\">Sertai Perubahan<\/a>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <main>\n        <!-- Hero Section -->\n        <section id=\"hero\" class=\"min-h-[70vh] flex items-center bg-white\">\n            <div class=\"container mx-auto px-4 py-16 text-center\">\n                <h1 class=\"text-4xl md:text-6xl font-bold text-stone-800 leading-tight\">Membina Jambatan Kefahaman<\/h1>\n                <p class=\"mt-4 text-lg md:text-xl text-stone-600 max-w-3xl mx-auto\">Dalam arus kemodenan, bagaimana kita memastikan tiada siapa yang ketinggalan? Terokai Disability Equality Training (DET) dan peranannya sebagai pemangkin perubahan.<\/p>\n                <a href=\"#apa-itu-det\" class=\"mt-8 inline-block bg-teal-600 text-white font-semibold py-3 px-8 rounded-lg shadow-lg hover:bg-teal-700 transition-transform transform hover:scale-105\">Terokai DET Sekarang<\/a>\n            <\/div>\n        <\/section>\n\n        <!-- Section 1: Apa Itu DET? -->\n        <section id=\"apa-itu-det\" class=\"py-20 bg-stone-50\">\n            <div class=\"container mx-auto px-4\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold\">Memahami DET: Lebih dari Sekadar Latihan<\/h2>\n                    <p class=\"mt-3 text-lg text-stone-600 max-w-2xl mx-auto\">DET membawa perubahan pemikiran yang signifikan dari model perubatan kepada model sosial yang melihat halangan masyarakat sebagai isu utama.<\/p>\n                <\/div>\n                \n                <div class=\"max-w-4xl mx-auto\">\n                     <div class=\"text-center mb-6\">\n                        <label for=\"model-toggle\" class=\"relative inline-flex items-center cursor-pointer\">\n                            <span class=\"mr-3 text-lg font-medium text-stone-700\">Model Perubatan<\/span>\n                            <input type=\"checkbox\" value=\"\" id=\"model-toggle\" class=\"sr-only peer\">\n                            <div class=\"w-14 h-8 bg-stone-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-teal-600\"><\/div>\n                            <span class=\"ml-3 text-lg font-medium text-stone-700\">Model Sosial<\/span>\n                        <\/label>\n                    <\/div>\n\n                    <div class=\"relative h-80 md:h-64 [perspective:1000px]\">\n                        <div id=\"model-card\" class=\"model-card w-full h-full relative\">\n                            <!-- Card Face 1: Medical Model -->\n                            <div class=\"card-face absolute w-full h-full bg-white rounded-xl shadow-lg border border-stone-200 p-6 flex flex-col justify-center items-center text-center\">\n                                <h3 class=\"text-2xl font-bold text-red-600 mb-2\">Model Perubatan<\/h3>\n                                <p class=\"text-stone-600\">Fokus pada 'masalah' atau 'kecacatan' individu. OKU dilihat sebagai seseorang yang perlu 'dirawat' atau 'diperbaiki' untuk menyesuaikan diri dengan masyarakat.<\/p>\n                                <ul class=\"mt-4 text-left list-disc list-inside text-stone-500\">\n                                    <li>Melihat OKU sebagai pesakit<\/li>\n                                    <li>Menekankan pemulihan & amal<\/li>\n                                    <li>Mengasingkan individu dari masyarakat<\/li>\n                                <\/ul>\n                            <\/div>\n                             <!-- Card Face 2: Social Model -->\n                            <div class=\"card-face card-back absolute w-full h-full bg-white rounded-xl shadow-lg border border-stone-200 p-6 flex flex-col justify-center items-center text-center\">\n                                <h3 class=\"text-2xl font-bold text-teal-600 mb-2\">Model Sosial<\/h3>\n                                <p class=\"text-stone-600\">Fokus pada halangan yang dicipta oleh masyarakat. Masyarakat perlu berubah dan menyesuaikan diri untuk menjadi inklusif kepada semua individu.<\/p>\n                                <ul class=\"mt-4 text-left list-disc list-inside text-stone-500\">\n                                    <li>Melihat OKU sebagai pakar hidup mereka<\/li>\n                                    <li>Menekankan hak & kesaksamaan<\/li>\n                                    <li>Menghapuskan halangan dalam masyarakat<\/li>\n                                <\/ul>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 2: Bagaimana Ia Berfungsi -->\n        <section id=\"bagaimana-ia-berfungsi\" class=\"py-20 bg-white\">\n            <div class=\"container mx-auto px-4\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold\">Bagaimana Ia Berfungsi?<\/h2>\n                    <p class=\"mt-3 text-lg text-stone-600 max-w-2xl mx-auto\">Keberkesanan DET terletak pada pendekatannya yang interaktif, praktikal dan membuka minda.<\/p>\n                <\/div>\n                <div class=\"grid md:grid-cols-2 gap-12 items-center\">\n                    <div class=\"space-y-6\">\n                        <div class=\"p-6 bg-stone-50 rounded-lg shadow-sm\">\n                            <h4 class=\"font-bold text-lg text-teal-700\">Interaktif & Praktikal<\/h4>\n                            <p class=\"text-stone-600 mt-1\">Menggunakan gabungan aktiviti kumpulan, perbincangan, dan perkongsian pengalaman yang autentik.<\/p>\n                        <\/div>\n                        <div class=\"p-6 bg-stone-50 rounded-lg shadow-sm\">\n                            <h4 class=\"font-bold text-lg text-teal-700\">Simulasi & Empati<\/h4>\n                            <p class=\"text-stone-600 mt-1\">Peserta merasai sendiri cabaran yang dihadapi OKU melalui simulasi, membina empati yang mendalam.<\/p>\n                        <\/div>\n                        <div class=\"p-6 bg-stone-50 rounded-lg shadow-sm\">\n                            <h4 class=\"font-bold text-lg text-teal-700\">Kajian Kes & Refleksi<\/h4>\n                            <p class=\"text-stone-600 mt-1\">Menganalisis isu-isu sebenar dan menggalakkan pemikiran kritis untuk mencari penyelesaian.<\/p>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <h3 class=\"text-xl font-semibold text-center mb-4\">Anggaran Keberkesanan Kaedah DET<\/h3>\n                        <div class=\"chart-container\">\n                            <canvas id=\"methodsChart\"><\/canvas>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 3: Kesan & Impak -->\n        <section id=\"kesan-impak\" class=\"py-20 bg-stone-50\">\n            <div class=\"container mx-auto px-4\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold\">Kesan & Impak Mendalam<\/h2>\n                    <p class=\"mt-3 text-lg text-stone-600 max-w-2xl mx-auto\">DET membawa perubahan signifikan bukan sahaja kepada individu tetapi juga kepada masyarakat secara amnya.<\/p>\n                <\/div>\n\n                <div class=\"grid lg:grid-cols-5 gap-12 items-center\">\n                    <div class=\"lg:col-span-2\">\n                         <h3 class=\"text-xl font-semibold text-center mb-4\">Kawasan Impak Utama DET<\/h3>\n                        <div class=\"chart-container h-80\">\n                             <canvas id=\"impactChart\"><\/canvas>\n                        <\/div>\n                    <\/div>\n                    <div class=\"lg:col-span-3\">\n                        <div class=\"mb-6\">\n                            <div class=\"flex flex-wrap gap-2 border-b border-stone-200 pb-2\">\n                                <button data-tab=\"sikap\" class=\"tab-button flex-grow text-center py-2 px-4 rounded-md font-medium text-stone-600 bg-stone-100 active-tab\">Sikap<\/button>\n                                <button data-tab=\"pemikiran\" class=\"tab-button flex-grow text-center py-2 px-4 rounded-md font-medium text-stone-600 bg-stone-100\">Pemikiran<\/button>\n                                <button data-tab=\"kemahiran\" class=\"tab-button flex-grow text-center py-2 px-4 rounded-md font-medium text-stone-600 bg-stone-100\">Kemahiran<\/button>\n                            <\/div>\n                        <\/div>\n\n                        <div id=\"tab-content\" class=\"bg-white p-6 rounded-lg shadow-sm min-h-[250px]\">\n                            <div id=\"sikap\" class=\"tab-pane active\">\n                                <h4 class=\"font-bold text-xl mb-3 text-teal-700\">Perubahan Sikap<\/h4>\n                                <p class=\"text-stone-600\">DET berjaya mengubah sikap negatif atau neutral kepada positif, menyokong, dan inklusif. Stigma dan prasangka yang tidak disedari sebelum ini mula terkikis, digantikan dengan penerimaan dan penghormatan. Ini mewujudkan persekitaran sosial yang lebih harmoni dan selamat untuk semua.<\/p>\n                            <\/div>\n                            <div id=\"pemikiran\" class=\"tab-pane hidden\">\n                                <h4 class=\"font-bold text-xl mb-3 text-teal-700\">Perubahan Pemikiran (Mindset)<\/h4>\n                                <p class=\"text-stone-600\">Berlaku peralihan dari melihat ketidakupayaan sebagai masalah individu kepada isu sosial. Peserta mula memahami konsep kesaksamaan sebenar: bukan melayan semua sama rata, tetapi memberi sokongan yang diperlukan agar semua orang mempunyai peluang yang sama.<\/p>\n                            <\/div>\n                            <div id=\"kemahiran\" class=\"tab-pane hidden\">\n                                <h4 class=\"font-bold text-xl mb-3 text-teal-700\">Peningkatan Kemahiran<\/h4>\n                                <p class=\"text-stone-600\">Peserta memperoleh kemahiran praktikal dalam komunikasi dan interaksi yang lebih efektif dengan OKU. Mereka belajar cara berkomunikasi dengan individu yang mempunyai pelbagai jenis ketidakupayaan dan cara menyediakan sokongan yang sesuai dan bermakna.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 4: Sertai Perubahan -->\n        <section id=\"sertai-perubahan\" class=\"py-20 bg-teal-700 text-white\">\n            <div class=\"container mx-auto px-4 text-center\">\n                <h2 class=\"text-3xl md:text-4xl font-bold\">Sertai Perubahan<\/h2>\n                <div class=\"mt-8 max-w-3xl mx-auto border-l-4 border-teal-400 pl-6 italic\">\n                     <p class=\"text-xl md:text-2xl leading-relaxed\">\"Harapan saya agar kita dapat melihat golongan OKU sebagai individu yang berpotensi dan mempunyai hak yang sama. Marilah kita membuka minda dan hati, serta berusaha memahami dan membantu mereka tanpa prasangka.\"<\/p>\n                     <p class=\"mt-2 text-teal-200\">- Petikan dari Jurulatih DET<\/p>\n                <\/div>\n                <p class=\"mt-8 text-lg text-teal-100\">Mari bersama-sama kita jadikan kesedaran ini titik tolak untuk tindakan. Kami di Persatuan MASAA mengajak anda untuk mencari maklumat lanjut, berkongsi ilmu ini, dan terlibat dalam inisiatif kesedaran OKU.<\/p>\n                <div class=\"mt-10 flex flex-wrap justify-center gap-4\">\n                    <a href=\"#\" class=\"bg-white text-teal-700 font-semibold py-3 px-8 rounded-lg shadow-lg hover:bg-stone-100 transition\">Hubungi Kami<\/a>\n                    <a href=\"#\" class=\"border-2 border-white text-white font-semibold py-3 px-8 rounded-lg hover:bg-white hover:text-teal-700 transition\">Kongsi Laman Ini<\/a>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n    \n    <footer class=\"bg-stone-800 text-stone-300 py-6\">\n        <div class=\"container mx-auto px-4 text-center\">\n            <p>&copy; 2025 Persatuan MASAA. Dicipta untuk menyebarkan kesedaran.<\/p>\n        <\/div>\n    <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    \n    \/\/ Mobile menu toggle\n    const mobileMenuButton = document.getElementById('mobile-menu-button');\n    const mobileMenu = document.getElementById('mobile-menu');\n    mobileMenuButton.addEventListener('click', () => {\n        mobileMenu.classList.toggle('hidden');\n    });\n\n    \/\/ Navigation scroll spy\n    const sections = document.querySelectorAll('section');\n    const navLinks = document.querySelectorAll('.nav-link');\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                navLinks.forEach(link => {\n                    link.classList.remove('active-nav');\n                    if (link.getAttribute('href').substring(1) === entry.target.id) {\n                        link.classList.add('active-nav');\n                    }\n                });\n            }\n        });\n    }, { rootMargin: '-50% 0px -50% 0px' });\n\n    sections.forEach(section => {\n        observer.observe(section);\n    });\n\n    \/\/ Model Card Flip\n    const modelToggle = document.getElementById('model-toggle');\n    const modelCard = document.getElementById('model-card');\n    modelToggle.addEventListener('change', () => {\n        modelCard.classList.toggle('is-flipped');\n    });\n\n    \/\/ Tabs for Impact Section\n    const tabButtons = document.querySelectorAll('.tab-button');\n    const tabPanes = document.querySelectorAll('.tab-pane');\n\n    tabButtons.forEach(button => {\n        button.addEventListener('click', () => {\n            const targetTab = button.dataset.tab;\n\n            tabButtons.forEach(btn => btn.classList.remove('active-tab'));\n            button.classList.add('active-tab');\n\n            tabPanes.forEach(pane => {\n                if (pane.id === targetTab) {\n                    pane.classList.remove('hidden');\n                    pane.classList.add('active');\n                } else {\n                    pane.classList.add('hidden');\n                    pane.classList.remove('active');\n                }\n            });\n        });\n    });\n\n    \/\/ Chart.js - Methods Chart\n    const methodsCtx = document.getElementById('methodsChart').getContext('2d');\n    const methodsChart = new Chart(methodsCtx, {\n        type: 'bar',\n        data: {\n            labels: ['Simulasi & Empati', 'Perkongsian Pengalaman', 'Kajian Kes & Refleksi', 'Perbincangan Kumpulan'],\n            datasets: [{\n                label: 'Anggaran Keberkesanan',\n                data: [95, 90, 80, 75],\n                backgroundColor: [\n                    'rgba(13, 148, 136, 0.6)', \/\/ teal-600\n                    'rgba(15, 118, 110, 0.6)', \/\/ teal-700\n                    'rgba(17, 94, 89, 0.6)', \/\/ teal-800\n                    'rgba(19, 78, 74, 0.6)' \/\/ teal-900\n                ],\n                borderColor: [\n                    'rgba(13, 148, 136, 1)',\n                    'rgba(15, 118, 110, 1)',\n                    'rgba(17, 94, 89, 1)',\n                    'rgba(19, 78, 74, 1)'\n                ],\n                borderWidth: 1\n            }]\n        },\n        options: {\n            indexAxis: 'y',\n            responsive: true,\n            maintainAspectRatio: false,\n            plugins: {\n                legend: {\n                    display: false\n                },\n                tooltip: {\n                    callbacks: {\n                        label: function(context) {\n                            return ' ' + context.dataset.label + ': ' + context.raw + '%';\n                        }\n                    }\n                }\n            },\n            scales: {\n                x: {\n                    beginAtZero: true,\n                    max: 100,\n                    ticks: {\n                       callback: function(value) {\n                           return value + \"%\"\n                       }\n                    }\n                }\n            }\n        }\n    });\n\n    \/\/ Chart.js - Impact Chart\n    const impactCtx = document.getElementById('impactChart').getContext('2d');\n    const impactChart = new Chart(impactCtx, {\n        type: 'doughnut',\n        data: {\n            labels: ['Perubahan Sikap', 'Perubahan Pemikiran', 'Peningkatan Kemahiran'],\n            datasets: [{\n                label: 'Kawasan Impak Utama',\n                data: [50, 35, 15],\n                backgroundColor: [\n                    'rgba(13, 148, 136, 0.7)',\n                    'rgba(20, 83, 45, 0.7)',\n                    'rgba(110, 231, 183, 0.7)'\n                ],\n                borderColor: [\n                    'rgba(13, 148, 136, 1)',\n                    'rgba(20, 83, 45, 1)',\n                    'rgba(110, 231, 183, 1)'\n                ],\n                borderWidth: 2,\n                hoverOffset: 4\n            }]\n        },\n        options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            plugins: {\n                legend: {\n                    position: 'bottom',\n                }\n            }\n        }\n    });\n});\n<\/script>\n\n<\/body>\n<\/html>\n\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Interaktif DET: Membina Masyarakat Inklusif Interaktif DET Apa Itu DET? Bagaimana Ia Berfungsi? Kesan &#038; Impak Sertai Perubahan Apa Itu DET? Bagaimana Ia Berfungsi? Kesan &#038; Impak Sertai Perubahan Membina Jambatan Kefahaman Dalam arus kemodenan, bagaimana kita memastikan tiada siapa yang ketinggalan? Terokai Disability Equality Training (DET) dan peranannya sebagai pemangkin perubahan. Terokai DET Sekarang [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1344,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[4,14],"tags":[34,35],"class_list":["post-1336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-about-masaa","category-info","tag-det","tag-disability-equalitu-training"],"_links":{"self":[{"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/posts\/1336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/comments?post=1336"}],"version-history":[{"count":9,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/posts\/1336\/revisions"}],"predecessor-version":[{"id":1347,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/posts\/1336\/revisions\/1347"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/media\/1344"}],"wp:attachment":[{"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/media?parent=1336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/categories?post=1336"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/tags?post=1336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}