{"id":12,"date":"2026-07-21T02:38:00","date_gmt":"2026-07-21T02:38:00","guid":{"rendered":"http:\/\/localhost\/base_wp_unit\/?page_id=12"},"modified":"2026-09-10T03:08:28","modified_gmt":"2026-09-10T03:08:28","slug":"beranda","status":"publish","type":"page","link":"https:\/\/preschoolpermata.sch.id\/","title":{"rendered":"Beranda"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\">\n\t\t\t\t<div class=\"elementor-element elementor-element-edf7504 e-con-full e-flex e-con e-parent\" data-id=\"edf7504\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;background_slideshow_gallery&quot;:[],&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_duration&quot;:5000,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_transition_duration&quot;:500}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bffa021 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"bffa021\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n    <title>Preschool - Penerimaan Peserta Didik Baru Preschool<\/title>\r\n\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n    <style>\r\n        \/* =========================================================\r\n           RESET & BASE\r\n        ========================================================= *\/\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        html,\r\n        body {\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            font-family: 'Inter', system-ui, sans-serif;\r\n            background: transparent;\r\n            overflow-x: hidden;\r\n            overflow-y: auto;\r\n        }\r\n\r\n        \/* =========================================================\r\n           SLIDER CONTAINER - FULL WIDTH DENGAN BORDER RADIUS BAWAH\r\n        ========================================================= *\/\r\n\r\n        .slider-container {\r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            overflow: hidden;\r\n\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n\r\n            \/* BACKGROUND PRESCHOOL *\/\r\n            background-image: url('https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/20260821_101527.jpg-scaled.jpeg');\r\n\r\n            background-size: cover;\r\n            background-position: center;\r\n            background-attachment: fixed;\r\n\r\n            padding: 120px 0 40px 0;\r\n            margin: 0;\r\n\r\n            \/* ===== BORDER RADIUS - HANYA BAWAH ===== *\/\r\n            border-radius: 0 0 50px 50px;\r\n        }\r\n\r\n        \/* =========================================================\r\n           OVERLAY BACKGROUND - TANPA BLUR, LEBIH GELAP\r\n        ========================================================= *\/\r\n\r\n        .slider-container::before {\r\n            content: '';\r\n            position: absolute;\r\n            inset: 0;\r\n\r\n            background: rgba(0, 0, 0, 0.72);\r\n\r\n            z-index: 1;\r\n\r\n            backdrop-filter: none;\r\n            -webkit-backdrop-filter: none;\r\n\r\n            \/* ===== BORDER RADIUS - HANYA BAWAH ===== *\/\r\n            border-radius: 0 0 50px 50px;\r\n        }\r\n\r\n        \/* =========================================================\r\n           CONTENT WRAPPER\r\n        ========================================================= *\/\r\n\r\n        .content-wrapper {\r\n            position: relative;\r\n            z-index: 2;\r\n\r\n            width: 100%;\r\n            max-width: 1200px;\r\n\r\n            padding: 2rem 2rem;\r\n\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n\r\n            gap: 2rem;\r\n\r\n            align-items: center;\r\n\r\n            min-height: calc(100vh - 160px);\r\n        }\r\n\r\n        \/* =========================================================\r\n           KOLOM KIRI - TANPA TOMBOL\r\n        ========================================================= *\/\r\n\r\n        .left-col {\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n\r\n            gap: 1rem;\r\n\r\n            padding: 2rem 2.2rem;\r\n\r\n            backdrop-filter: none;\r\n            -webkit-backdrop-filter: none;\r\n\r\n            background: rgba(0, 0, 0, 0.35);\r\n\r\n            border-radius: 1.5rem;\r\n\r\n            border: 1px solid rgba(255, 255, 255, 0.08);\r\n\r\n            box-shadow:\r\n                0 25px 50px -12px rgba(0, 0, 0, 0.5);\r\n\r\n            min-height: 300px;\r\n\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .left-col:hover {\r\n            background: rgba(0, 0, 0, 0.45);\r\n\r\n            border-color: rgba(255, 255, 255, 0.15);\r\n        }\r\n\r\n        \/* =========================================================\r\n           TEXT SLIDER\r\n        ========================================================= *\/\r\n\r\n        .text-slide .slide-item {\r\n            display: none;\r\n\r\n            animation:\r\n                slideInLeft\r\n                0.8s\r\n                cubic-bezier(0.16, 1, 0.3, 1)\r\n                forwards;\r\n        }\r\n\r\n        .text-slide .slide-item.active {\r\n            display: block;\r\n        }\r\n\r\n        @keyframes slideInLeft {\r\n            0% {\r\n                opacity: 0;\r\n                transform: translateX(-60px) scale(0.96);\r\n            }\r\n\r\n            100% {\r\n                opacity: 1;\r\n                transform: translateX(0) scale(1);\r\n            }\r\n        }\r\n\r\n        \/* =========================================================\r\n           JUDUL\r\n        ========================================================= *\/\r\n\r\n        .text-slide .slide-item h2 {\r\n            font-size: clamp(1.8rem, 4vw, 3rem);\r\n\r\n            font-weight: 700;\r\n\r\n            line-height: 1.1;\r\n\r\n            color: #fff;\r\n\r\n            text-shadow:\r\n                0 4px 20px rgba(0, 0, 0, 0.5);\r\n        }\r\n\r\n        \/* =========================================================\r\n           DESKRIPSI\r\n        ========================================================= *\/\r\n\r\n        .text-slide .slide-item p {\r\n            font-size: clamp(0.95rem, 1.2vw, 1.15rem);\r\n\r\n            color: rgba(255, 255, 255, 0.9);\r\n\r\n            line-height: 1.7;\r\n\r\n            max-width: 95%;\r\n\r\n            margin-top: 0.5rem;\r\n\r\n            font-weight: 300;\r\n        }\r\n\r\n        \/* =========================================================\r\n           KOLOM KANAN\r\n        ========================================================= *\/\r\n\r\n        .right-col {\r\n            position: relative;\r\n\r\n            display: flex;\r\n\r\n            align-items: center;\r\n\r\n            justify-content: center;\r\n\r\n            aspect-ratio: 4 \/ 3;\r\n\r\n            min-height: 250px;\r\n        }\r\n\r\n        \/* =========================================================\r\n           IMAGE SLIDE\r\n        ========================================================= *\/\r\n\r\n        .right-col .image-slide {\r\n            position: absolute;\r\n\r\n            inset: 0;\r\n\r\n            display: flex;\r\n\r\n            align-items: center;\r\n\r\n            justify-content: center;\r\n\r\n            opacity: 0;\r\n\r\n            transition:\r\n                opacity\r\n                1.2s\r\n                cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n\r\n            filter:\r\n                drop-shadow(\r\n                    0 25px 20px rgba(0, 0, 0, 0.45)\r\n                )\r\n                drop-shadow(\r\n                    0 10px 30px rgba(0, 0, 0, 0.35)\r\n                );\r\n\r\n            animation:\r\n                floatY\r\n                6s\r\n                ease-in-out\r\n                infinite;\r\n        }\r\n\r\n        .right-col .image-slide.active {\r\n            opacity: 1;\r\n        }\r\n\r\n        .right-col .image-slide svg,\r\n        .right-col .image-slide img {\r\n            width: auto;\r\n\r\n            height: 100%;\r\n\r\n            max-height: 380px;\r\n\r\n            max-width: 100%;\r\n\r\n            object-fit: contain;\r\n        }\r\n\r\n        \/* =========================================================\r\n           ANIMASI GAMBAR\r\n        ========================================================= *\/\r\n\r\n        @keyframes floatY {\r\n            0%,\r\n            100% {\r\n                transform: translateY(0);\r\n            }\r\n\r\n            50% {\r\n                transform: translateY(-14px);\r\n            }\r\n        }\r\n\r\n        @media (prefers-reduced-motion: reduce) {\r\n\r\n            .right-col .image-slide {\r\n                animation: none;\r\n            }\r\n\r\n        }\r\n\r\n        \/* =========================================================\r\n           DOTS\r\n        ========================================================= *\/\r\n\r\n        .dots-container {\r\n            display: flex;\r\n\r\n            justify-content: center;\r\n\r\n            gap: 0.75rem;\r\n\r\n            position: absolute;\r\n\r\n            bottom: 2rem;\r\n\r\n            left: 0;\r\n\r\n            right: 0;\r\n\r\n            z-index: 10;\r\n\r\n            padding-bottom: 0;\r\n        }\r\n\r\n        .dot {\r\n            width: 14px;\r\n\r\n            height: 14px;\r\n\r\n            border-radius: 50%;\r\n\r\n            background:\r\n                rgba(255, 255, 255, 0.25);\r\n\r\n            border:\r\n                2px solid rgba(255, 255, 255, 0.3);\r\n\r\n            cursor: pointer;\r\n\r\n            transition:\r\n                all\r\n                0.4s\r\n                cubic-bezier(0.34, 1.56, 0.64, 1);\r\n        }\r\n\r\n        .dot.active {\r\n            background: #fff;\r\n\r\n            border-color: #fff;\r\n\r\n            transform: scale(1.3);\r\n\r\n            box-shadow:\r\n                0 0 25px rgba(255, 255, 255, 0.5);\r\n        }\r\n\r\n        .dot:hover {\r\n            transform: scale(1.2);\r\n\r\n            background:\r\n                rgba(255, 255, 255, 0.5);\r\n        }\r\n\r\n        \/* =========================================================\r\n           LAPTOP 1024px - 1280px\r\n        ========================================================= *\/\r\n\r\n        @media (max-width: 1280px) {\r\n\r\n            .content-wrapper {\r\n                max-width: 1100px;\r\n\r\n                padding:\r\n                    1.8rem\r\n                    2rem;\r\n\r\n                gap: 1.8rem;\r\n            }\r\n\r\n            .left-col {\r\n                padding:\r\n                    1.8rem\r\n                    2rem;\r\n\r\n                min-height: 280px;\r\n            }\r\n\r\n            .right-col .image-slide img {\r\n                max-height: 340px;\r\n            }\r\n\r\n        }\r\n\r\n        \/* =========================================================\r\n           TABLET \/ LAPTOP KECIL 1024px\r\n        ========================================================= *\/\r\n\r\n        @media (max-width: 1024px) {\r\n\r\n            .slider-container {\r\n                padding: 100px 0 40px 0;\r\n                \/* ===== BORDER RADIUS TABLET ===== *\/\r\n                border-radius: 0 0 40px 40px;\r\n            }\r\n            .slider-container::before {\r\n                border-radius: 0 0 40px 40px;\r\n            }\r\n\r\n            .content-wrapper {\r\n                gap: 1.5rem;\r\n\r\n                padding:\r\n                    1.5rem\r\n                    1.8rem;\r\n\r\n                min-height:\r\n                    calc(100vh - 140px);\r\n            }\r\n\r\n            .left-col {\r\n                padding:\r\n                    1.5rem\r\n                    1.8rem;\r\n\r\n                min-height: 260px;\r\n\r\n                gap: 0.8rem;\r\n            }\r\n\r\n            .right-col .image-slide img {\r\n                max-height: 300px;\r\n            }\r\n\r\n            .text-slide .slide-item h2 {\r\n                font-size:\r\n                    clamp(\r\n                        1.8rem,\r\n                        3.8vw,\r\n                        2.6rem\r\n                    );\r\n            }\r\n\r\n            .text-slide .slide-item p {\r\n                font-size:\r\n                    clamp(\r\n                        1rem,\r\n                        1.2vw,\r\n                        1.1rem\r\n                    );\r\n            }\r\n\r\n        }\r\n\r\n        \/* =========================================================\r\n           TABLET PORTRAIT 820px\r\n        ========================================================= *\/\r\n\r\n        @media (max-width: 820px) {\r\n\r\n            .slider-container {\r\n                padding: 90px 0 30px 0;\r\n                min-height: 100vh;\r\n                background-attachment: scroll;\r\n                \/* ===== BORDER RADIUS TABLET PORTRAIT ===== *\/\r\n                border-radius: 0 0 35px 35px;\r\n            }\r\n            .slider-container::before {\r\n                border-radius: 0 0 35px 35px;\r\n            }\r\n\r\n            .content-wrapper {\r\n                grid-template-columns: 1fr;\r\n\r\n                grid-template-rows:\r\n                    auto\r\n                    auto;\r\n\r\n                gap: 2rem;\r\n\r\n                min-height:\r\n                    calc(100vh - 120px);\r\n\r\n                padding:\r\n                    2rem;\r\n\r\n                max-width: 700px;\r\n\r\n                margin: 0 auto;\r\n            }\r\n\r\n            .left-col {\r\n                order: 2;\r\n\r\n                min-height: 250px;\r\n\r\n                background:\r\n                    rgba(0, 0, 0, 0.45);\r\n\r\n                padding:\r\n                    2rem\r\n                    2.2rem;\r\n\r\n                border-radius: 1.8rem;\r\n\r\n                gap: 1rem;\r\n            }\r\n\r\n            .right-col {\r\n                order: 1;\r\n\r\n                aspect-ratio: 16 \/ 10;\r\n\r\n                min-height: 280px;\r\n            }\r\n\r\n            .right-col .image-slide img {\r\n                max-height: 320px;\r\n            }\r\n\r\n            .text-slide .slide-item p {\r\n                max-width: 100%;\r\n            }\r\n\r\n            .text-slide .slide-item h2 {\r\n                font-size:\r\n                    clamp(\r\n                        2rem,\r\n                        4.5vw,\r\n                        2.8rem\r\n                    );\r\n            }\r\n\r\n            .text-slide .slide-item p {\r\n                font-size:\r\n                    clamp(\r\n                        1.1rem,\r\n                        2vw,\r\n                        1.3rem\r\n                    );\r\n\r\n                line-height: 1.7;\r\n            }\r\n\r\n            .dots-container {\r\n                bottom: 1.8rem;\r\n            }\r\n\r\n            .dot {\r\n                width: 15px;\r\n\r\n                height: 15px;\r\n            }\r\n\r\n        }\r\n\r\n        \/* =========================================================\r\n           HP LANDSCAPE \/ TABLET KECIL 640px\r\n        ========================================================= *\/\r\n\r\n        @media (max-width: 640px) {\r\n\r\n            .slider-container {\r\n                padding: 80px 0 30px 0;\r\n                \/* ===== BORDER RADIUS HP LANDSCAPE ===== *\/\r\n                border-radius: 0 0 30px 30px;\r\n            }\r\n            .slider-container::before {\r\n                border-radius: 0 0 30px 30px;\r\n            }\r\n\r\n            .content-wrapper {\r\n                padding:\r\n                    1.5rem;\r\n\r\n                gap: 1.5rem;\r\n\r\n                min-height:\r\n                    calc(100vh - 110px);\r\n\r\n                max-width: 100%;\r\n            }\r\n\r\n            .left-col {\r\n                padding:\r\n                    1.5rem;\r\n\r\n                min-height: 200px;\r\n\r\n                border-radius: 1.5rem;\r\n\r\n                gap: 0.8rem;\r\n\r\n                background: rgba(0, 0, 0, 0.45);\r\n            }\r\n\r\n            .right-col {\r\n                min-height: 220px;\r\n            }\r\n\r\n            .right-col .image-slide img {\r\n                max-height: 260px;\r\n            }\r\n\r\n            .text-slide .slide-item h2 {\r\n                font-size:\r\n                    clamp(\r\n                        1.6rem,\r\n                        5vw,\r\n                        2.2rem\r\n                    );\r\n            }\r\n\r\n            .text-slide .slide-item p {\r\n                font-size:\r\n                    clamp(\r\n                        1rem,\r\n                        2.2vw,\r\n                        1.15rem\r\n                    );\r\n\r\n                line-height: 1.6;\r\n            }\r\n\r\n            .dots-container {\r\n                gap: 0.7rem;\r\n\r\n                bottom: 1.5rem;\r\n            }\r\n\r\n            .dot {\r\n                width: 14px;\r\n\r\n                height: 14px;\r\n            }\r\n\r\n        }\r\n\r\n        \/* =========================================================\r\n           HP PORTRAIT 480px\r\n        ========================================================= *\/\r\n\r\n        @media (max-width: 480px) {\r\n\r\n            .slider-container {\r\n                padding: 70px 0 20px 0;\r\n                \/* ===== BORDER RADIUS HP PORTRAIT ===== *\/\r\n                border-radius: 0 0 25px 25px;\r\n            }\r\n            .slider-container::before {\r\n                border-radius: 0 0 25px 25px;\r\n            }\r\n\r\n            .content-wrapper {\r\n                padding: 1rem;\r\n\r\n                gap: 1rem;\r\n\r\n                min-height:\r\n                    calc(100vh - 90px);\r\n            }\r\n\r\n            .left-col {\r\n                padding:\r\n                    1.2rem;\r\n\r\n                min-height: 180px;\r\n\r\n                border-radius: 1.2rem;\r\n\r\n                gap: 0.6rem;\r\n\r\n                background: rgba(0, 0, 0, 0.5);\r\n            }\r\n\r\n            .right-col {\r\n                min-height: 180px;\r\n\r\n                aspect-ratio: 4 \/ 3;\r\n            }\r\n\r\n            .right-col .image-slide img {\r\n                max-height: 210px;\r\n\r\n                border-radius: 0.8rem;\r\n            }\r\n\r\n            .text-slide .slide-item h2 {\r\n                font-size:\r\n                    clamp(\r\n                        1.3rem,\r\n                        5vw,\r\n                        1.8rem\r\n                    );\r\n            }\r\n\r\n            .text-slide .slide-item p {\r\n                font-size:\r\n                    clamp(\r\n                        0.9rem,\r\n                        2.2vw,\r\n                        1rem\r\n                    );\r\n\r\n                line-height: 1.5;\r\n\r\n                margin-top: 0.3rem;\r\n            }\r\n\r\n            .dots-container {\r\n                gap: 0.6rem;\r\n\r\n                bottom: 1rem;\r\n            }\r\n\r\n            .dot {\r\n                width: 12px;\r\n\r\n                height: 12px;\r\n            }\r\n\r\n        }\r\n\r\n        \/* =========================================================\r\n           HP KECIL 380px\r\n        ========================================================= *\/\r\n\r\n        @media (max-width: 380px) {\r\n\r\n            .slider-container {\r\n                padding: 60px 0 20px 0;\r\n                \/* ===== BORDER RADIUS HP KECIL ===== *\/\r\n                border-radius: 0 0 20px 20px;\r\n            }\r\n            .slider-container::before {\r\n                border-radius: 0 0 20px 20px;\r\n            }\r\n\r\n            .content-wrapper {\r\n                padding: 0.8rem;\r\n\r\n                gap: 0.8rem;\r\n\r\n                min-height:\r\n                    calc(100vh - 80px);\r\n            }\r\n\r\n            .left-col {\r\n                padding:\r\n                    0.9rem;\r\n\r\n                min-height: 150px;\r\n\r\n                border-radius: 1rem;\r\n\r\n                gap: 0.5rem;\r\n\r\n                background: rgba(0, 0, 0, 0.5);\r\n            }\r\n\r\n            .right-col {\r\n                min-height: 150px;\r\n            }\r\n\r\n            .right-col .image-slide img {\r\n                max-height: 170px;\r\n            }\r\n\r\n            .text-slide .slide-item h2 {\r\n                font-size:\r\n                    clamp(\r\n                        1.1rem,\r\n                        4.5vw,\r\n                        1.4rem\r\n                    );\r\n            }\r\n\r\n            .text-slide .slide-item p {\r\n                font-size:\r\n                    clamp(\r\n                        0.8rem,\r\n                        2vw,\r\n                        0.9rem\r\n                    );\r\n\r\n                line-height: 1.4;\r\n            }\r\n\r\n            .dots-container {\r\n                gap: 0.5rem;\r\n\r\n                bottom: 0.8rem;\r\n            }\r\n\r\n            .dot {\r\n                width: 10px;\r\n\r\n                height: 10px;\r\n            }\r\n\r\n        }\r\n\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n    <div class=\"slider-container\">\r\n\r\n        <div class=\"content-wrapper\">\r\n\r\n            <!-- =====================================================\r\n                 KOLOM KIRI - PRESCHOOL (TANPA TOMBOL)\r\n            ====================================================== -->\r\n\r\n            <div class=\"left-col\">\r\n\r\n                <div class=\"text-slide\">\r\n\r\n                    <!-- SLIDE 1 -->\r\n                    <div class=\"slide-item active\" data-index=\"0\">\r\n\r\n                        <h2>\r\n                            \ud83c\udf92 Penerimaan Peserta Didik Baru\r\n                        <\/h2>\r\n\r\n                        <p>\r\n                            Bergabunglah dengan keluarga besar Preschool kami!\r\n                            Tempat di mana anak-anak belajar dengan gembira,\r\n                            bermain sambil belajar, dan tumbuh menjadi generasi\r\n                            cerdas &amp; berkarakter.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                    <!-- SLIDE 2 -->\r\n                    <div class=\"slide-item\" data-index=\"1\">\r\n\r\n                        <h2>\r\n                            \ud83c\udfa8 Bermain Sambil Belajar\r\n                        <\/h2>\r\n\r\n                        <p>\r\n                            Beragam aktivitas menyenangkan seperti menggambar,\r\n                            bernyanyi, menari, olahraga, dan bermain peran yang\r\n                            mengasah kreativitas, motorik, serta kecerdasan\r\n                            sosial anak.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                    <!-- SLIDE 3 -->\r\n                    <div class=\"slide-item\" data-index=\"2\">\r\n\r\n                        <h2>\r\n                            \ud83c\udf1f Prestasi &amp; Perkembangan Anak\r\n                        <\/h2>\r\n\r\n                        <p>\r\n                            Setiap anak adalah bintang! Dengan pendekatan\r\n                            pembelajaran yang menyenangkan dan guru-guru yang\r\n                            penuh kasih, kami bangga melihat perkembangan luar\r\n                            biasa anak-anak kami. Dari segi akademik, seni,\r\n                            hingga karakter, semua berkembang optimal.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =====================================================\r\n                 KOLOM KANAN - GAMBAR PRESCHOOL\r\n            ====================================================== -->\r\n\r\n            <div class=\"right-col\">\r\n\r\n                <!-- GAMBAR 1 -->\r\n                <div class=\"image-slide active\">\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-9-scaled.webp\"\r\n                        alt=\"Preschool\"\r\n                    \/>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- GAMBAR 2 -->\r\n                <div class=\"image-slide\">\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1-scaled.webp\"\r\n                        alt=\"Kegiatan Preschool\"\r\n                    \/>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- GAMBAR 3 -->\r\n                <div class=\"image-slide\">\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-8-scaled.webp\"\r\n                        alt=\"Prestasi Preschool\"\r\n                    \/>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =====================================================\r\n             DOTS\r\n        ====================================================== -->\r\n\r\n        <div class=\"dots-container\">\r\n\r\n            <span\r\n                class=\"dot active\"\r\n                data-index=\"0\">\r\n            <\/span>\r\n\r\n            <span\r\n                class=\"dot\"\r\n                data-index=\"1\">\r\n            <\/span>\r\n\r\n            <span\r\n                class=\"dot\"\r\n                data-index=\"2\">\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =========================================================\r\n         JAVASCRIPT SLIDER\r\n    ========================================================== -->\r\n\r\n    <script>\r\n\r\n        (function () {\r\n\r\n            let currentIndex = 0;\r\n\r\n            const total = 3;\r\n\r\n            let interval = null;\r\n\r\n            const delay = 5000;\r\n\r\n\r\n            const imageSlides =\r\n                document.querySelectorAll(\r\n                    '.right-col .image-slide'\r\n                );\r\n\r\n            const textItems =\r\n                document.querySelectorAll(\r\n                    '.text-slide .slide-item'\r\n                );\r\n\r\n            const dots =\r\n                document.querySelectorAll('.dot');\r\n\r\n\r\n            \/* =====================================================\r\n               UPDATE SLIDE\r\n            ====================================================== *\/\r\n\r\n            function updateSlide(index) {\r\n\r\n                imageSlides.forEach(function (el) {\r\n\r\n                    el.classList.remove('active');\r\n\r\n                });\r\n\r\n                textItems.forEach(function (el) {\r\n\r\n                    el.classList.remove('active');\r\n\r\n                });\r\n\r\n                dots.forEach(function (el) {\r\n\r\n                    el.classList.remove('active');\r\n\r\n                });\r\n\r\n\r\n                if (imageSlides[index]) {\r\n\r\n                    imageSlides[index]\r\n                        .classList\r\n                        .add('active');\r\n\r\n                }\r\n\r\n\r\n                if (textItems[index]) {\r\n\r\n                    textItems[index]\r\n                        .classList\r\n                        .add('active');\r\n\r\n                }\r\n\r\n\r\n                if (dots[index]) {\r\n\r\n                    dots[index]\r\n                        .classList\r\n                        .add('active');\r\n\r\n                }\r\n\r\n            }\r\n\r\n\r\n            \/* =====================================================\r\n               PINDAH SLIDE\r\n            ====================================================== *\/\r\n\r\n            function goToSlide(index) {\r\n\r\n                if (index < 0) {\r\n\r\n                    index = total - 1;\r\n\r\n                }\r\n\r\n                if (index >= total) {\r\n\r\n                    index = 0;\r\n\r\n                }\r\n\r\n                currentIndex = index;\r\n\r\n                updateSlide(currentIndex);\r\n\r\n                resetAutoPlay();\r\n\r\n            }\r\n\r\n\r\n            \/* =====================================================\r\n               SLIDE BERIKUTNYA\r\n            ====================================================== *\/\r\n\r\n            function nextSlide() {\r\n\r\n                goToSlide(\r\n                    (currentIndex + 1) % total\r\n                );\r\n\r\n            }\r\n\r\n\r\n            \/* =====================================================\r\n               AUTOPLAY\r\n            ====================================================== *\/\r\n\r\n            function resetAutoPlay() {\r\n\r\n                if (interval) {\r\n\r\n                    clearInterval(interval);\r\n\r\n                    interval = null;\r\n\r\n                }\r\n\r\n                interval = setInterval(\r\n                    function () {\r\n\r\n                        nextSlide();\r\n\r\n                    },\r\n                    delay\r\n                );\r\n\r\n            }\r\n\r\n\r\n            \/* =====================================================\r\n               KLIK DOT\r\n            ====================================================== *\/\r\n\r\n            dots.forEach(function (dot, idx) {\r\n\r\n                dot.addEventListener(\r\n                    'click',\r\n                    function (e) {\r\n\r\n                        e.stopPropagation();\r\n\r\n                        if (currentIndex !== idx) {\r\n\r\n                            goToSlide(idx);\r\n\r\n                        }\r\n\r\n                    }\r\n                );\r\n\r\n            });\r\n\r\n\r\n            \/* =====================================================\r\n               MULAI AUTOPLAY\r\n            ====================================================== *\/\r\n\r\n            resetAutoPlay();\r\n\r\n\r\n            \/* =====================================================\r\n               PAUSE SAAT MOUSE DI ATAS\r\n            ====================================================== *\/\r\n\r\n            const container =\r\n                document.querySelector(\r\n                    '.slider-container'\r\n                );\r\n\r\n\r\n            if (container) {\r\n\r\n                container.addEventListener(\r\n                    'mouseenter',\r\n                    function () {\r\n\r\n                        if (interval) {\r\n\r\n                            clearInterval(interval);\r\n\r\n                            interval = null;\r\n\r\n                        }\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                container.addEventListener(\r\n                    'mouseleave',\r\n                    function () {\r\n\r\n                        if (!interval) {\r\n\r\n                            resetAutoPlay();\r\n\r\n                        }\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                \/* =================================================\r\n                   SWIPE UNTUK HP \/ TABLET\r\n                ================================================== *\/\r\n\r\n                let touchStartX = 0;\r\n\r\n                let touchEndX = 0;\r\n\r\n\r\n                container.addEventListener(\r\n                    'touchstart',\r\n                    function (e) {\r\n\r\n                        touchStartX =\r\n                            e.changedTouches[0].screenX;\r\n\r\n                    },\r\n                    {\r\n                        passive: true\r\n                    }\r\n                );\r\n\r\n\r\n                container.addEventListener(\r\n                    'touchend',\r\n                    function (e) {\r\n\r\n                        touchEndX =\r\n                            e.changedTouches[0].screenX;\r\n\r\n\r\n                        const diff =\r\n                            touchStartX - touchEndX;\r\n\r\n\r\n                        if (Math.abs(diff) > 40) {\r\n\r\n                            if (diff > 0) {\r\n\r\n                                goToSlide(\r\n                                    (currentIndex + 1) % total\r\n                                );\r\n\r\n                            } else {\r\n\r\n                                goToSlide(\r\n                                    (currentIndex - 1 + total) % total\r\n                                );\r\n\r\n                            }\r\n\r\n                        }\r\n\r\n                    },\r\n                    {\r\n                        passive: true\r\n                    }\r\n                );\r\n\r\n            }\r\n\r\n        })();\r\n\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-af854a1 e-con e-atomic-element e-flexbox-base e-b3b9c05 \" data-id=\"af854a1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"af854a1\">\n    <section class=\"elementor-element elementor-element-06a1855 e-con e-atomic-element e-flexbox-base e-00c369e \" data-id=\"06a1855\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"06a1855\">\n    <div class=\"elementor-element elementor-element-079415c e-con e-atomic-element e-flexbox-base \" data-id=\"079415c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"079415c\">\n    \t\t<div class=\"elementor-element elementor-element-9411b94 elementor-widget elementor-widget-image\" data-id=\"9411b94\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-8-1024x1024.webp\" class=\"attachment-large size-large wp-image-1078\" alt=\"\" srcset=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-8-1024x1024.webp 1024w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-8-300x300.webp 300w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-8-150x150.webp 150w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-8-768x768.webp 768w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-8-1536x1536.webp 1536w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-8-2048x2048.webp 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-b62723f e-con e-atomic-element e-flexbox-base e-b62723f-b01712d \" data-id=\"b62723f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b62723f\">\n    \t\t\t<img class=\"e-image-base \" data-interaction-id=\"7f3eb7b\"\/>\t\t\t\t\t<h5 data-interaction-id=\"eb9d810\" class=\"e-eb9d810-2c54d8b e-heading-base\">Visi Preschool&nbsp;<br>Permata<\/h5>\n\t\t\t\t<div class=\"elementor-element elementor-element-449b519 elementor-widget elementor-widget-text-editor\" data-id=\"449b519\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Menjadi Preschool terdepan dalam mewujudkan generasi cinta Al-Qur&#8217;an, cerdas, dan berjiwa pemimpin<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n<section class=\"elementor-element elementor-element-71d2434 e-con e-atomic-element e-flexbox-base e-d00c900 \" data-id=\"71d2434\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"71d2434\">\n    \t\t\t<h1 data-interaction-id=\"e5375dd\" class=\"e-e5375dd-8fa400a e-heading-base\">Kabar Preschool Permata<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-13a0bef elementor-invisible elementor-widget elementor-widget-hfe-basic-posts\" data-id=\"13a0bef\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"hfe-basic-posts.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<div class=\"hfe-posts-grid\">\n\t\t\t<article class=\"hfe-post-card\">\n\t\t\t\t\t\t\t<div class=\"hfe-post-image\">\n\t\t\t\t\t<a href=\"https:\/\/preschoolpermata.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1257\" height=\"864\" src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2025-09-29-at-12.45.14.jpeg\" class=\"attachment-full size-full wp-post-image\" alt=\"Bukan Sekadar Bermain: Keterampilan Penting yang Dipelajari Anak di Preschool\" loading=\"lazy\" srcset=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2025-09-29-at-12.45.14.jpeg 1257w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2025-09-29-at-12.45.14-300x206.jpeg 300w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2025-09-29-at-12.45.14-1024x704.jpeg 1024w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2025-09-29-at-12.45.14-768x528.jpeg 768w\" sizes=\"auto, (max-width: 1257px) 100vw, 1257px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/preschoolpermata.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t\tBukan Sekadar Bermain: Keterampilan Penting yang Dipelajari Anak di Preschool\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-post-meta\">\n\t\t\t\t\t\t<span class=\"hfe-post-date\">6 Agustus 2026<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-post-excerpt\">\n\t\t\t\t\t\tPreschool bukan hanya tempat anak bermain, tetapi ruang awal untuk membangun keterampilan hidup yang penting....\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/preschoolpermata.sch.id\/?p=485\" class=\"hfe-read-more\" rel=\"bookmark\">\n\t\t\t\t\t\tBaca Selengkapnya \u2192\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<article class=\"hfe-post-card\">\n\t\t\t\t\t\t\t<div class=\"hfe-post-image\">\n\t\t\t\t\t<a href=\"https:\/\/preschoolpermata.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"865\" src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/1000435363-1536x865-2.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Pisah Kenang Ananda PGIT Permata dan Preschool Permata: \u201cAku Sang Bintang Yang Berakhlak Mulia\u201d\" loading=\"lazy\" srcset=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/1000435363-1536x865-2.jpg 1536w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/1000435363-1536x865-2-300x169.jpg 300w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/1000435363-1536x865-2-1024x577.jpg 1024w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/1000435363-1536x865-2-768x433.jpg 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/preschoolpermata.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t\tPisah Kenang Ananda PGIT Permata dan Preschool Permata: \u201cAku Sang Bintang Yang Berakhlak Mulia\u201d\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-post-meta\">\n\t\t\t\t\t\t<span class=\"hfe-post-date\">6 Agustus 2026<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-post-excerpt\">\n\t\t\t\t\t\tJumat, 20 Juni 2025 acara Pisah Kenang Ananda PGIT Permata dan Preschool Permata dilaksanakan tepat...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/preschoolpermata.sch.id\/?p=481\" class=\"hfe-read-more\" rel=\"bookmark\">\n\t\t\t\t\t\tBaca Selengkapnya \u2192\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<article class=\"hfe-post-card\">\n\t\t\t\t\t\t\t<div class=\"hfe-post-image\">\n\t\t\t\t\t<a href=\"https:\/\/preschoolpermata.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"864\" src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/preschooltrial-1536x864-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Trial Class Gratis Preschool, PGIT, dan TKIT Permata Mojokerto\" loading=\"lazy\" srcset=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/preschooltrial-1536x864-1.jpg 1536w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/preschooltrial-1536x864-1-300x169.jpg 300w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/preschooltrial-1536x864-1-1024x576.jpg 1024w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/preschooltrial-1536x864-1-768x432.jpg 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/preschoolpermata.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t\tTrial Class Gratis Preschool, PGIT, dan TKIT Permata Mojokerto\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-post-meta\">\n\t\t\t\t\t\t<span class=\"hfe-post-date\">6 Agustus 2026<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-post-excerpt\">\n\t\t\t\t\t\tHalo Sobat Permata! SIT Permata&nbsp;adalah sekolah Islami secara Terpadu yang menanamkan aqidah dan akhlaq dalam...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/preschoolpermata.sch.id\/?p=469\" class=\"hfe-read-more\" rel=\"bookmark\">\n\t\t\t\t\t\tBaca Selengkapnya \u2192\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/section>\n<div class=\"elementor-element elementor-element-cbb2ea6 e-con e-atomic-element e-flexbox-base e-cbb2ea6-a641792 \" data-id=\"cbb2ea6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cbb2ea6\">\n    <section class=\"elementor-element elementor-element-f869a31 e-con e-atomic-element e-flexbox-base e-f869a31-6d8fa94 \" data-id=\"f869a31\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f869a31\">\n    <div class=\"elementor-element elementor-element-2777ca8 e-con e-atomic-element e-flexbox-base e-2777ca8-56649eb \" data-id=\"2777ca8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2777ca8\">\n    \t\t\t<img decoding=\"async\" class=\"e-image-base \" data-interaction-id=\"861aca3\" id=\"1113\" src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1-scaled.webp\" width=\"2560\" height=\"2560\" srcset=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1-scaled.webp 2560w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1-300x300.webp 300w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1-1024x1024.webp 1024w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1-150x150.webp 150w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1-768x768.webp 768w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1-1536x1536.webp 1536w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1-2048x2048.webp 2048w\" alt=\"\"\/>\t\t\t\t\t<h1 data-interaction-id=\"916bea5\" class=\"e-916bea5-a53f232 e-heading-base\">Study Visual<\/h1>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4894f63 e-con e-atomic-element e-flexbox-base e-4894f63-2c4665c \" data-id=\"4894f63\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4894f63\">\n    \t\t\t<img decoding=\"async\" class=\"e-image-base e-eb8a007-51bedcc\" data-interaction-id=\"eb8a007\" id=\"503\" src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/07\/1001153125-scaled.png\" width=\"2560\" height=\"2560\" srcset=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/07\/1001153125-scaled.png 2560w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/07\/1001153125-300x300.png 300w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/07\/1001153125-1024x1024.png 1024w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/07\/1001153125-150x150.png 150w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/07\/1001153125-768x768.png 768w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/07\/1001153125-1536x1536.png 1536w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/07\/1001153125-2048x2048.png 2048w\" alt=\"\"\/>\t\t\t\t\t<h1 data-interaction-id=\"bcf1e5b\" class=\"e-bcf1e5b-0bdee46 e-heading-base\">Program Unggulan<\/h1>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-b035202 e-con e-atomic-element e-flexbox-base e-b035202-8defb69 \" data-id=\"b035202\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b035202\">\n    \t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"e-image-base \" data-interaction-id=\"39a86a6\" id=\"1134\" src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/09\/Tanpa-judul-Konten-Instagram-34-14-scaled.webp\" width=\"2560\" height=\"2560\" srcset=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/09\/Tanpa-judul-Konten-Instagram-34-14-scaled.webp 2560w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/09\/Tanpa-judul-Konten-Instagram-34-14-300x300.webp 300w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/09\/Tanpa-judul-Konten-Instagram-34-14-1024x1024.webp 1024w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/09\/Tanpa-judul-Konten-Instagram-34-14-150x150.webp 150w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/09\/Tanpa-judul-Konten-Instagram-34-14-768x768.webp 768w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/09\/Tanpa-judul-Konten-Instagram-34-14-1536x1536.webp 1536w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/09\/Tanpa-judul-Konten-Instagram-34-14-2048x2048.webp 2048w\" alt=\"\"\/>\t\t\t\t\t<h1 data-interaction-id=\"6a01e2c\" class=\"e-6a01e2c-ff92d0f e-heading-base\">Home Visit<\/h1>\n\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n<div class=\"elementor-element elementor-element-d2de8a3 e-con e-atomic-element e-flexbox-base e-1473273 \" data-id=\"d2de8a3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d2de8a3\">\n    \t\t\t<h1 data-interaction-id=\"a0d11cd\" class=\"e-a0d11cd-815bbdf e-heading-base\">Fasilitas<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c84e24 elementor-widget elementor-widget-html\" data-id=\"3c84e24\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\n     SLIDER GALERI HORIZONTAL (INFINITE LOOP)\r\n     Slide tengah aktif: background MERAH, TANPA efek naik\r\n     Mendukung multi-instance & fallback gambar\r\n     Warna: #FF1A1A (MERAH)\r\n     + Lightbox dengan gambar FULL tanpa terpotong\r\n========================================== -->\r\n\r\n<!-- Slick CSS CDN -->\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick.css\"\/>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick-theme.css\"\/>\r\n\r\n<div class=\"permata-slider-container\" data-slider-instance>\r\n\r\n    <!-- Skeleton Loading -->\r\n    <div class=\"slider-skeleton\">\r\n        <div class=\"skeleton-card\"><\/div>\r\n        <div class=\"skeleton-card\"><\/div>\r\n        <div class=\"skeleton-card\"><\/div>\r\n        <div class=\"skeleton-card\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Slick Horizontal Slider -->\r\n    <div class=\"slider-content-wrapper\" style=\"display: none;\">\r\n        <div class=\"horizontal-slider js-horizontal-gallery-slider\">\r\n            <!-- Item Slider akan diisi lewat JS -->\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ===== LIGHTBOX \/ MODAL ===== -->\r\n    <div class=\"lightbox-overlay\" id=\"facilityLightbox\">\r\n        <div class=\"lightbox-content\">\r\n            <button class=\"lightbox-close\" id=\"lightboxClose\">&times;<\/button>\r\n            <div class=\"lightbox-body\">\r\n                <div class=\"lightbox-image-wrapper\">\r\n                    <img decoding=\"async\" id=\"lightboxImage\" src=\"\" alt=\"Detail Fasilitas\" \/>\r\n                <\/div>\r\n                <div class=\"lightbox-info\">\r\n                    <h2 id=\"lightboxTitle\" class=\"lightbox-title\"><\/h2>\r\n                    <p id=\"lightboxDescription\" class=\"lightbox-description\"><\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* --- Container Utama --- *\/\r\n.permata-slider-container {\r\n    max-width: 1350px;\r\n    margin: 0 auto;\r\n    padding: 40px 25px;\r\n    position: relative;\r\n    font-family: 'Poppins', 'Inter', sans-serif;\r\n}\r\n\r\n\/* Flex layout mendatar & jarak antar slide *\/\r\n.horizontal-slider .slick-track {\r\n    display: flex !important;\r\n    align-items: stretch;\r\n}\r\n\r\n.horizontal-slider .slick-slide {\r\n    height: auto;\r\n    padding: 0 12px;\r\n    outline: none;\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n\/* --- Gallery Card --- *\/\r\n.slider-card {\r\n    background: #ffffff;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    text-align: left;\r\n    transition: background-color 0.5s ease,\r\n                box-shadow 0.5s ease,\r\n                transform 0.3s ease;\r\n    cursor: pointer;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\r\n    will-change: background-color;\r\n}\r\n\r\n\/* --- SLIDE TENGAH (AKTIF) : background MERAH #FF1A1A --- *\/\r\n.slick-center .slider-card {\r\n    background-color: #FF1A1A;\r\n    box-shadow: 0 8px 30px rgba(255, 26, 26, 0.35);\r\n}\r\n\r\n.slick-center .slider-card .card-content {\r\n    background-color: #FF1A1A;\r\n}\r\n\r\n.slick-center .slider-card .card-title {\r\n    color: #ffffff;\r\n}\r\n\r\n.slick-center .slider-card .card-description {\r\n    color: #fff0f0;\r\n}\r\n\r\n.slick-center .slider-card .image-wrapper img {\r\n    transform: scale(1.03);\r\n}\r\n\r\n\/* --- EFEK HOVER WARNA #FF1A1A (MERAH) --- *\/\r\n.slider-card:hover {\r\n    background-color: #FF1A1A !important;\r\n    box-shadow: 0 8px 30px rgba(255, 26, 26, 0.35) !important;\r\n    transition: background-color 0.3s ease,\r\n                box-shadow 0.3s ease,\r\n                transform 0.3s ease;\r\n    transform: translateY(-4px);\r\n}\r\n\r\n.slider-card:hover .card-content {\r\n    background-color: #FF1A1A !important;\r\n}\r\n\r\n.slider-card:hover .card-title {\r\n    color: #ffffff !important;\r\n}\r\n\r\n.slider-card:hover .card-description {\r\n    color: #fff0f0 !important;\r\n}\r\n\r\n.slider-card:hover .image-wrapper img {\r\n    transform: scale(1.05);\r\n}\r\n\r\n\/* --- Image Wrapper --- *\/\r\n.image-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 210px;\r\n    border-radius: 20px 20px 0 0;\r\n    overflow: hidden;\r\n    background: #eef2f3;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.image-wrapper img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    transition: transform 0.6s ease;\r\n    border-radius: 20px 20px 0 0;\r\n    display: block;\r\n}\r\n\r\n\/* --- Card Content (Judul + Deskripsi) --- *\/\r\n.card-content {\r\n    padding: 16px 18px 20px 18px;\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-start;\r\n    transition: background-color 0.5s ease;\r\n    border-radius: 0 0 20px 20px;\r\n    background-color: #ffffff;\r\n}\r\n\r\n.card-title {\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    color: #243746;\r\n    line-height: 1.3;\r\n    margin: 0 0 6px 0;\r\n    transition: color 0.3s ease;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n.card-description {\r\n    font-size: 14px;\r\n    font-weight: 400;\r\n    color: #5a6f7e;\r\n    line-height: 1.5;\r\n    margin: 0;\r\n    transition: color 0.3s ease;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n\/* --- Tombol Panah Navigasi (Arrows) - WARNA MERAH #FF1A1A --- *\/\r\n.horizontal-slider .slick-prev,\r\n.horizontal-slider .slick-next {\r\n    width: 48px;\r\n    height: 48px;\r\n    background: #FF1A1A !important;\r\n    border-radius: 50%;\r\n    z-index: 20;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 6px 16px rgba(255, 26, 26, 0.40);\r\n}\r\n\r\n.horizontal-slider .slick-prev:before,\r\n.horizontal-slider .slick-next:before {\r\n    font-size: 18px;\r\n    color: #ffffff;\r\n    opacity: 1;\r\n    font-family: sans-serif;\r\n    line-height: 48px;\r\n    display: block;\r\n}\r\n\r\n.horizontal-slider .slick-prev:hover,\r\n.horizontal-slider .slick-next:hover {\r\n    background: #CC0000 !important;\r\n    transform: scale(1.1);\r\n}\r\n\r\n.horizontal-slider .slick-prev { left: -22px; }\r\n.horizontal-slider .slick-next { right: -22px; }\r\n\r\n.horizontal-slider .slick-prev:before { content: '\u276e'; }\r\n.horizontal-slider .slick-next:before { content: '\u276f'; }\r\n\r\n\/* --- Skeleton Loading --- *\/\r\n.slider-skeleton {\r\n    display: flex;\r\n    gap: 24px;\r\n    overflow: hidden;\r\n}\r\n\r\n.skeleton-card {\r\n    flex: 1;\r\n    min-width: 200px;\r\n    height: 280px;\r\n    border-radius: 20px;\r\n    background: linear-gradient(90deg, #eee 25%, #f7f7f7 37%, #eee 63%);\r\n    background-size: 400% 100%;\r\n    animation: skeleton-shimmer 1.4s infinite;\r\n}\r\n\r\n@keyframes skeleton-shimmer {\r\n    0% { background-position: 100% 0; }\r\n    100% { background-position: -100% 0; }\r\n}\r\n\r\n\/* ==========================================\r\n   LIGHTBOX \/ MODAL STYLES - TEMA MERAH\r\n   GAMBAR FULL TANPA TERPOTONG\r\n========================================== *\/\r\n.lightbox-overlay {\r\n    display: none;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0, 0, 0, 0.85);\r\n    z-index: 9999;\r\n    justify-content: center;\r\n    align-items: center;\r\n    animation: lightboxFadeIn 0.3s ease;\r\n    padding: 20px;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.lightbox-overlay.active {\r\n    display: flex;\r\n}\r\n\r\n@keyframes lightboxFadeIn {\r\n    from { opacity: 0; }\r\n    to { opacity: 1; }\r\n}\r\n\r\n.lightbox-content {\r\n    background: #ffffff;\r\n    border-radius: 24px;\r\n    max-width: 900px;\r\n    width: 100%;\r\n    max-height: 90vh;\r\n    overflow-y: auto;\r\n    position: relative;\r\n    box-shadow: 0 20px 60px rgba(255, 26, 26, 0.3);\r\n    animation: lightboxSlideUp 0.4s ease;\r\n}\r\n\r\n@keyframes lightboxSlideUp {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(40px) scale(0.95);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0) scale(1);\r\n    }\r\n}\r\n\r\n.lightbox-close {\r\n    position: absolute;\r\n    top: 16px;\r\n    right: 20px;\r\n    background: #FF1A1A;\r\n    color: #ffffff;\r\n    border: none;\r\n    border-radius: 50%;\r\n    width: 44px;\r\n    height: 44px;\r\n    font-size: 28px;\r\n    line-height: 44px;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    z-index: 10;\r\n    transition: all 0.3s ease;\r\n    padding: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: 0 4px 12px rgba(255, 26, 26, 0.4);\r\n}\r\n\r\n.lightbox-close:hover {\r\n    background: #CC0000;\r\n    transform: rotate(90deg) scale(1.1);\r\n}\r\n\r\n.lightbox-body {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n\/* ===== PERBAIKAN: Gambar tidak terpotong ===== *\/\r\n.lightbox-image-wrapper {\r\n    width: 100%;\r\n    height: 380px;\r\n    background: #0a0a0a;\r\n    overflow: hidden;\r\n    border-radius: 24px 24px 0 0;\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.lightbox-image-wrapper img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;  \/* <-- PERUBAHAN: contain agar gambar utuh *\/\r\n    display: block;\r\n    background: #0a0a0a;\r\n}\r\n\r\n\/* --- OPSI ALTERNATIF: Jika ingin gambar full lebar dengan background gelap --- *\/\r\n\/*\r\n.lightbox-image-wrapper img {\r\n    width: 100%;\r\n    height: auto;\r\n    max-height: 100%;\r\n    object-fit: contain;\r\n}\r\n*\/\r\n\r\n.lightbox-info {\r\n    padding: 30px 36px 36px 36px;\r\n    background: #ffffff;\r\n    border-radius: 0 0 24px 24px;\r\n}\r\n\r\n.lightbox-title {\r\n    font-size: 28px;\r\n    font-weight: 700;\r\n    color: #1a2a36;\r\n    margin: 0 0 12px 0;\r\n    line-height: 1.2;\r\n}\r\n\r\n.lightbox-title::before {\r\n    content: \"\u2726 \";\r\n    color: #FF1A1A;\r\n}\r\n\r\n.lightbox-description {\r\n    font-size: 17px;\r\n    font-weight: 400;\r\n    color: #3d5563;\r\n    line-height: 1.8;\r\n    margin: 0;\r\n    white-space: pre-wrap;\r\n    word-wrap: break-word;\r\n}\r\n\r\n\/* --- Responsive Lightbox --- *\/\r\n@media (max-width: 768px) {\r\n    .lightbox-image-wrapper {\r\n        height: 240px;\r\n    }\r\n    .lightbox-info {\r\n        padding: 22px 20px 26px 20px;\r\n    }\r\n    .lightbox-title {\r\n        font-size: 22px;\r\n    }\r\n    .lightbox-description {\r\n        font-size: 15px;\r\n        line-height: 1.6;\r\n    }\r\n    .lightbox-close {\r\n        top: 10px;\r\n        right: 14px;\r\n        width: 38px;\r\n        height: 38px;\r\n        font-size: 22px;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .lightbox-image-wrapper {\r\n        height: 200px;\r\n    }\r\n    .lightbox-info {\r\n        padding: 18px 16px 22px 16px;\r\n    }\r\n    .lightbox-title {\r\n        font-size: 19px;\r\n    }\r\n    .lightbox-description {\r\n        font-size: 14px;\r\n        line-height: 1.6;\r\n    }\r\n    .lightbox-close {\r\n        top: 8px;\r\n        right: 10px;\r\n        width: 34px;\r\n        height: 34px;\r\n        font-size: 20px;\r\n    }\r\n}\r\n\r\n\/* --- Responsive Slider --- *\/\r\n@media (max-width: 1024px) {\r\n    .horizontal-slider .slick-prev { left: -10px; }\r\n    .horizontal-slider .slick-next { right: -10px; }\r\n    .image-wrapper { height: 180px; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .image-wrapper { height: 170px; }\r\n    .card-title { font-size: 16px; }\r\n    .card-description { font-size: 13px; }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .image-wrapper { height: 160px; }\r\n    .horizontal-slider .slick-prev { left: 0px; }\r\n    .horizontal-slider .slick-next { right: 0px; }\r\n    .card-content { padding: 12px 14px 16px 14px; }\r\n    .card-title { font-size: 15px; }\r\n    .card-description { font-size: 12px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n    \/\/ --- Loader script dinamis ---\r\n    function loadScript(src, checkFn) {\r\n        return new Promise(function (resolve, reject) {\r\n            if (checkFn && checkFn()) {\r\n                resolve();\r\n                return;\r\n            }\r\n            var s = document.createElement('script');\r\n            s.src = src;\r\n            s.onload = function () { resolve(); };\r\n            s.onerror = function () { reject(new Error('Gagal memuat script: ' + src)); };\r\n            document.head.appendChild(s);\r\n        });\r\n    }\r\n\r\n    function hasJQuery() {\r\n        return typeof window.jQuery !== 'undefined';\r\n    }\r\n\r\n    function hasSlick() {\r\n        return hasJQuery() && typeof window.jQuery.fn.slick !== 'undefined';\r\n    }\r\n\r\n    function initAllSliders($) {\r\n\r\n        \/* ===========================================================\r\n           \ud83d\udcf7 CARA MENGGANTI GAMBAR:\r\n           ===========================================================\r\n           1. Ganti URL di bagian \"image:\" dengan URL gambar baru\r\n           2. Bisa gunakan gambar dari:\r\n              - WordPress Media Library\r\n              - Upload sendiri ke hosting\r\n              - Placeholder: https:\/\/placehold.co\/800x600\/FF1A1A\/white?text=Judul\r\n           3. Ukuran gambar disarankan 800x600px (rasio 4:3)\r\n           4. Format yang didukung: JPG, PNG, WebP\r\n           =========================================================== *\/\r\n\r\n        var sliderData = [\r\n            {\r\n                title: \"Alat Peraga Edukatif\",\r\n                description: \"Beragam alat peraga edukatif yang dirancang untuk membantu anak belajar melalui bermain, bereksplorasi, dan mengembangkan berbagai kemampuan.\",\r\n                image: \"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Alat-Peraga-Edukatif.jpg-scaled.jpeg\"\r\n            },\r\n            {\r\n                title: \"Sudut Baca\",\r\n                description: \"Ruang baca yang nyaman dengan berbagai pilihan buku untuk menumbuhkan minat baca dan memperkaya imajinasi anak.\",\r\n                image: \"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Sudut-baca.jpg-1-scaled.jpeg\"\r\n            },\r\n            {\r\n                title: \"Playground\",\r\n                description: \"Area bermain yang aman dan menyenangkan untuk mendukung aktivitas fisik, kreativitas, serta interaksi sosial anak.\",\r\n                image: \"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Playground-2.jpg-scaled.jpeg\"\r\n            },\r\n            {\r\n                title: \"Ruang Kelas ber AC\",\r\n                description: \"Ruang kelas yang nyaman dan sejuk dengan suasana belajar yang kondusif agar anak dapat belajar dengan lebih fokus dan menyenangkan.\",\r\n                image: \"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-10-at-09.59.26.jpeg\"\r\n            }\r\n            \r\n            \/* ===========================================================\r\n               \ud83d\udcdd CARA MENAMBAH SLIDE BARU:\r\n               ===========================================================\r\n               1. Copy-paste blok di bawah ini (termasuk koma di akhir)\r\n               2. Sesuaikan title, description, dan image\r\n               3. Pastikan tidak ada koma berlebih di akhir array\r\n               ===========================================================\r\n               {\r\n                   title: \"Nama Fasilitas Baru\",\r\n                   description: \"Deskripsi fasilitas baru...\",\r\n                   image: \"URL-gambar-baru.jpg\"\r\n               },\r\n            *\/\r\n        ];\r\n\r\n        \/\/ --- Build HTML dengan data attribute untuk lightbox ---\r\n        var itemsHtml = '';\r\n        sliderData.forEach(function (item, index) {\r\n            var desc = item.description.replace(\/\"\/g, '&quot;');\r\n            itemsHtml += '' +\r\n                '<div data-slide-index=\"' + index + '\">' +\r\n                    '<div class=\"slider-card\" data-title=\"' + item.title + '\" data-desc=\"' + desc + '\" data-img=\"' + item.image + '\">' +\r\n                        '<div class=\"image-wrapper\">' +\r\n                            '<img decoding=\"async\" src=\"' + item.image + '\" alt=\"' + item.title + '\" loading=\"lazy\" ' +\r\n                                'onerror=\"this.onerror=null;this.src=\\'https:\/\/placehold.co\/800x600\/FF1A1A\/white?text=Gambar+tidak+tersedia\\';\" \/>' +\r\n                        '<\/div>' +\r\n                        '<div class=\"card-content\">' +\r\n                            '<div class=\"card-title\">' + item.title + '<\/div>' +\r\n                            '<div class=\"card-description\">' + desc + '<\/div>' +\r\n                        '<\/div>' +\r\n                    '<\/div>' +\r\n                '<\/div>';\r\n        });\r\n\r\n        \/\/ --- Inisialisasi setiap instance slider ---\r\n        $('[data-slider-instance] .js-horizontal-gallery-slider').each(function () {\r\n            var $slider = $(this);\r\n\r\n            if ($slider.hasClass('slick-initialized') || $slider.data('slider-inited')) {\r\n                return;\r\n            }\r\n            $slider.data('slider-inited', true);\r\n\r\n            $slider.html(itemsHtml);\r\n\r\n            $slider.closest('.permata-slider-container')\r\n                .find('.slider-skeleton').hide()\r\n                .end()\r\n                .find('.slider-content-wrapper').show();\r\n\r\n            \/\/ --- Konfigurasi Slick dengan centerMode aktif ---\r\n            $slider.slick({\r\n                slidesToShow: 3,\r\n                slidesToScroll: 1,\r\n                infinite: true,\r\n                autoplay: true,\r\n                autoplaySpeed: 3000,\r\n                arrows: true,\r\n                dots: false,\r\n                pauseOnHover: true,\r\n                centerMode: true,\r\n                centerPadding: '60px',\r\n                responsive: [\r\n                    { breakpoint: 1024, settings: { slidesToShow: 3, centerPadding: '40px' } },\r\n                    { breakpoint: 768, settings: { slidesToShow: 2, centerPadding: '30px' } },\r\n                    { breakpoint: 480, settings: { slidesToShow: 1, centerPadding: '20px' } }\r\n                ]\r\n            });\r\n\r\n            \/\/ --- Event click untuk Lightbox ---\r\n            $slider.on('click', '.slider-card', function () {\r\n                var title = $(this).data('title') || 'Detail Fasilitas';\r\n                var desc = $(this).data('desc') || 'Tidak ada deskripsi';\r\n                var img = $(this).data('img') || '';\r\n\r\n                $('#lightboxTitle').text(title);\r\n                $('#lightboxDescription').text(desc);\r\n                $('#lightboxImage').attr('src', img);\r\n\r\n                $('#facilityLightbox').addClass('active');\r\n                $('body').css('overflow', 'hidden');\r\n            });\r\n        });\r\n\r\n        \/\/ --- Lightbox Close Events ---\r\n        $('#lightboxClose').on('click', function () {\r\n            closeLightbox();\r\n        });\r\n\r\n        $('#facilityLightbox').on('click', function (e) {\r\n            if (e.target === this) {\r\n                closeLightbox();\r\n            }\r\n        });\r\n\r\n        $(document).on('keydown', function (e) {\r\n            if (e.key === 'Escape') {\r\n                closeLightbox();\r\n            }\r\n        });\r\n\r\n        function closeLightbox() {\r\n            $('#facilityLightbox').removeClass('active');\r\n            $('body').css('overflow', '');\r\n        }\r\n    }\r\n\r\n    function boot() {\r\n        var jq = window.jQuery;\r\n        jq(document).ready(function ($) {\r\n            initAllSliders($);\r\n        });\r\n    }\r\n\r\n    \/\/ --- Muat jQuery & Slick ---\r\n    loadScript('https:\/\/code.jquery.com\/jquery-3.6.0.min.js', hasJQuery)\r\n        .then(function () {\r\n            return loadScript('https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick.min.js', hasSlick);\r\n        })\r\n        .then(boot)\r\n        .catch(function (err) {\r\n            console.error('[Slider Galeri] Gagal inisialisasi:', err);\r\n            var containers = document.querySelectorAll('[data-slider-instance]');\r\n            containers.forEach(function (c) {\r\n                var skeleton = c.querySelector('.slider-skeleton');\r\n                if (skeleton) {\r\n                    skeleton.innerHTML = '<p style=\"width:100%;text-align:center;color:#7a8a94;padding:40px 0;\">Galeri tidak dapat dimuat. Coba muat ulang halaman.<\/p>';\r\n                }\r\n            });\r\n        });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-dffe69c e-con e-atomic-element e-flexbox-base e-dffe69c-8aeb8d7 \" data-id=\"dffe69c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dffe69c\">\n    <section class=\"elementor-element elementor-element-a2ef5cd e-con e-atomic-element e-flexbox-base e-a2ef5cd-41b2691 \" data-id=\"a2ef5cd\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a2ef5cd\">\n    <div class=\"elementor-element elementor-element-215aa64 e-con e-atomic-element e-flexbox-base e-215aa64-f2e6262 \" data-id=\"215aa64\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"215aa64\">\n    \t\t<div class=\"elementor-element elementor-element-575b7ea elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"575b7ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-9-300x300.webp\" class=\"attachment-medium size-medium wp-image-1077\" alt=\"\" srcset=\"https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-9-300x300.webp 300w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-9-1024x1024.webp 1024w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-9-150x150.webp 150w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-9-768x768.webp 768w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-9-1536x1536.webp 1536w, https:\/\/preschoolpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-9-2048x2048.webp 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-60824ad e-con e-atomic-element e-flexbox-base e-60824ad-4662c62 \" data-id=\"60824ad\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"60824ad\">\n    \t\t\t<img class=\"e-image-base \" data-interaction-id=\"3357710\"\/>\t\t\t\t\t<h1 data-interaction-id=\"7f48fb3\" class=\"e-7f48fb3-9708643 e-heading-base\">Wujudkan Prestasi, Mulai di Sini!<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-b31c0aa elementor-align-center elementor-widget elementor-widget-button\" data-id=\"b31c0aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/ppdb.sitpermata.id\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Daftar Sekarang<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n<div class=\"elementor-element elementor-element-c7b118e e-con e-atomic-element e-flexbox-base e-58010e7 \" data-id=\"c7b118e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c7b118e\">\n    \t\t<div class=\"elementor-element elementor-element-6a6e4ec elementor-widget elementor-widget-html\" data-id=\"6a6e4ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     TESTIMONI PERMATA \u2014 MODERN SLIDER (Elementor HTML Widget)\r\n     WARNA DOMINAN #FF1A1A\r\n========================================================= -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\/>\r\n\r\n<section class=\"phm-testi\" id=\"phmTesti\">\r\n    <div class=\"phm-testi__head\">\r\n        <span class=\"phm-testi__eyebrow\">Apa Kata Mereka<\/span>\r\n        <h2 class=\"phm-testi__title\">Testimoni &amp; Kepercayaan<\/h2>\r\n        <p class=\"phm-testi__sub\">Selayang pandang walimurid tentang Preschool Permata.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"phm-testi__slider-wrap\">\r\n        <div class=\"swiper phm-testi__swiper\">\r\n            <div class=\"swiper-wrapper\" id=\"phmTestiGrid\">\r\n\r\n                <!-- ===== KARTU 1 - Ibu Rivina Nur Fahira ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <article class=\"phm-card\" data-accent=\"red\">\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-card__avatar\">\r\n                                <div class=\"phm-initials\">RN<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"phm-card__quote-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7.17 6C4.87 6 3 7.87 3 10.17V17h6.83v-6.83H5.83c0-1.29 1.05-2.34 2.34-2.34V6ZM17.17 6c-2.3 0-4.17 1.87-4.17 4.17V17H20v-6.83h-4.17c0-1.29 1.05-2.34 2.34-2.34V6Z\" fill=\"#fff\"\/><\/svg>\r\n                        <\/div>\r\n                        <p class=\"phm-card__text\">\r\n                            <span class=\"phm-short\">Alhamdulillah, saya melihat Naura sangat suka dan nyaman berada di Preschool Permata. Naura menikmati kegiatan bermain dan belajar...<\/span>\r\n                            <span class=\"phm-full\" hidden>Alhamdulillah, saya melihat Naura sangat suka dan nyaman berada di Preschool Permata. Naura menikmati kegiatan bermain dan belajar, berinteraksi dengan teman-teman, serta semakin dekat dengan ustadzah.\r\n\r\nSaya bersyukur melihat Naura semakin percaya diri dan antusias mengikuti kegiatan di sekolah. Terima kasih untuk seluruh ustadzah yang sudah mendampingi Naura dengan sabar, tulus, dan penuh kasih.<\/span>\r\n                            <button type=\"button\" class=\"phm-card__toggle\">Read more<\/button>\r\n                        <\/p>\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Ibu Rivina Nur Fahira<\/div>\r\n                            <div class=\"phm-card__role\">Walimurid Ananda Naura Zhafira Ilmi<\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 2 - Ibu Yeni Elok Saputri ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <article class=\"phm-card\" data-accent=\"red\">\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-card__avatar\">\r\n                                <div class=\"phm-initials\">YS<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"phm-card__quote-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7.17 6C4.87 6 3 7.87 3 10.17V17h6.83v-6.83H5.83c0-1.29 1.05-2.34 2.34-2.34V6ZM17.17 6c-2.3 0-4.17 1.87-4.17 4.17V17H20v-6.83h-4.17c0-1.29 1.05-2.34 2.34-2.34V6Z\" fill=\"#fff\"\/><\/svg>\r\n                        <\/div>\r\n                        <p class=\"phm-card__text\">\r\n                            <span class=\"phm-short\">Ananda Ayesha setelah menerima bimbingan di Preschool menjadi anak yang ceria, ekspresif dan pandai bercerita tentang kesehariannya...<\/span>\r\n                            <span class=\"phm-full\" hidden>Ananda Ayesha setelah menerima bimbingan di Preschool menjadi anak yang ceria, ekspresif dan pandai bercerita tentang kesehariannya serta mengenal ALLAH SWT dan beberapa doa keseharian yang diterapkan dalam kesehariannya.\r\n\r\nPandai mengucap tolong kalau minta pertolongan, mengucap maaf kalau melakukan kesalahan, dan berani menyampaikan teguran apabila ada yang tidak sesuai.<\/span>\r\n                            <button type=\"button\" class=\"phm-card__toggle\">Read more<\/button>\r\n                        <\/p>\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Ibu Yeni Elok Saputri<\/div>\r\n                            <div class=\"phm-card__role\">Walimurid Ananda Ayesha Yumna Gunawan<\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 3 - Ibu Qurrota Ayun Via Nurrahma ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <article class=\"phm-card\" data-accent=\"red\">\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-card__avatar\">\r\n                                <div class=\"phm-initials\">QN<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"phm-card__quote-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7.17 6C4.87 6 3 7.87 3 10.17V17h6.83v-6.83H5.83c0-1.29 1.05-2.34 2.34-2.34V6ZM17.17 6c-2.3 0-4.17 1.87-4.17 4.17V17H20v-6.83h-4.17c0-1.29 1.05-2.34 2.34-2.34V6Z\" fill=\"#fff\"\/><\/svg>\r\n                        <\/div>\r\n                        <p class=\"phm-card__text\">\r\n                            <span class=\"phm-short\">Preschool Permata full kegiatan stimulasi, pengenalan Asmaul Husna dengan Gerakan, pengenalan hijaiyah, Pembiasaan hidup sehat dan Praktik sholat...<\/span>\r\n                            <span class=\"phm-full\" hidden>Preschool Permata full kegiatan stimulasi, pengenalan Asmaul Husna dengan Gerakan, pengenalan hijaiyah, Pembiasaan hidup sehat dan Praktik sholat. Cocok untuk perkembangan kognitif dan tauhid anak usia dini. Ustadzah sabar dan telaten, meskipun anak saya pernah di fase menangis saat berangkat sekolah tapi tetap dikuatkan. Terimakasih Preschool Permata.<\/span>\r\n                            <button type=\"button\" class=\"phm-card__toggle\">Read more<\/button>\r\n                        <\/p>\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Ibu Qurrota Ayun Via Nurrahma<\/div>\r\n                            <div class=\"phm-card__role\">Walimurid Ananda M. Khalid Hafeeza Maulana<\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Navigasi -->\r\n        <div class=\"swiper-button-prev phm-testi__nav\"><\/div>\r\n        <div class=\"swiper-button-next phm-testi__nav\"><\/div>\r\n        <div class=\"swiper-pagination phm-testi__dots\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.phm-testi {\r\n    --phm-red: #FF1A1A;\r\n    --phm-red-dark: #CC0000;\r\n    --phm-red-light: #FFE6E6;\r\n    --phm-ink: #1f2d33;\r\n    --phm-muted: #66787f;\r\n    \r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    padding: 80px 24px 100px;\r\n    font-family: 'Inter', 'Poppins', sans-serif;\r\n    position: relative;\r\n}\r\n\r\n.phm-testi *, .phm-testi *::before, .phm-testi *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.phm-testi__head {\r\n    text-align: center;\r\n    max-width: 640px;\r\n    margin: 0 auto 56px;\r\n}\r\n\r\n.phm-testi__eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 2.5px;\r\n    text-transform: uppercase;\r\n    color: var(--phm-red-dark);\r\n}\r\n\r\n.phm-testi__eyebrow::before,\r\n.phm-testi__eyebrow::after {\r\n    content: \"\";\r\n    width: 22px;\r\n    height: 2px;\r\n    background: var(--phm-red);\r\n    border-radius: 2px;\r\n}\r\n\r\n.phm-testi__title {\r\n    margin: 14px 0 12px;\r\n    font-size: clamp(28px, 4vw, 40px);\r\n    font-weight: 800;\r\n    color: var(--phm-ink);\r\n    letter-spacing: -0.5px;\r\n    line-height: 1.2;\r\n}\r\n\r\n.phm-testi__sub {\r\n    margin: 0;\r\n    color: var(--phm-muted);\r\n    font-size: 16px;\r\n    line-height: 1.6;\r\n}\r\n\r\n.phm-testi__slider-wrap {\r\n    position: relative;\r\n    padding: 50px 40px 64px;\r\n}\r\n\r\n.phm-testi__swiper {\r\n    overflow: hidden;\r\n    padding: 50px 4px 50px;\r\n}\r\n\r\n.phm-testi__swiper .swiper-slide {\r\n    height: auto;\r\n    display: flex;\r\n}\r\n\r\n.phm-testi__swiper:not(.swiper-initialized) .swiper-wrapper {\r\n    display: flex;\r\n    overflow-x: auto;\r\n    gap: 28px;\r\n    scroll-snap-type: x mandatory;\r\n    -webkit-overflow-scrolling: touch;\r\n    padding-bottom: 20px;\r\n}\r\n\r\n.phm-testi__swiper:not(.swiper-initialized) .swiper-slide {\r\n    flex: 0 0 85%;\r\n    max-width: 400px;\r\n    scroll-snap-align: start;\r\n}\r\n\r\n\/* ===== KARTU ===== *\/\r\n.phm-card {\r\n    position: relative;\r\n    background: #fff;\r\n    border-radius: 24px;\r\n    padding: 56px 30px 32px;\r\n    border: 1px solid #eef2f3;\r\n    box-shadow: 0 4px 20px rgba(31, 45, 51, 0.05);\r\n    transition: transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s ease;\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.phm-card:hover {\r\n    transform: translateY(-6px);\r\n    box-shadow: 0 22px 45px rgba(31, 45, 51, 0.12);\r\n}\r\n\r\n.phm-card::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 24px;\r\n    right: 24px;\r\n    height: 4px;\r\n    border-radius: 0 0 6px 6px;\r\n    background: var(--phm-accent, var(--phm-red));\r\n}\r\n\r\n.phm-card[data-accent=\"red\"] { --phm-accent: var(--phm-red); }\r\n\r\n\/* ===== AVATAR ===== *\/\r\n.phm-card__avatar-wrap {\r\n    position: absolute;\r\n    top: -34px;\r\n    left: 30px;\r\n    width: 76px;\r\n    height: 76px;\r\n    border-radius: 50%;\r\n    padding: 3px;\r\n    background: var(--phm-red);\r\n    box-shadow: 0 8px 18px rgba(255, 26, 26, 0.3);\r\n    z-index: 2;\r\n}\r\n\r\n.phm-card__avatar {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    overflow: hidden;\r\n    background: #fff;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border: 3px solid #fff;\r\n}\r\n\r\n.phm-card__avatar img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    object-position: center 15%;\r\n    display: block;\r\n}\r\n\r\n.phm-card__avatar .phm-initials {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-weight: 800;\r\n    font-size: 22px;\r\n    color: #fff;\r\n    background: var(--phm-red);\r\n}\r\n\r\n\/* ===== QUOTE ICON ===== *\/\r\n.phm-card__quote-icon {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 12px;\r\n    background: var(--phm-red);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 12px 0 18px;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.phm-card__quote-icon svg {\r\n    width: 20px;\r\n    height: 20px;\r\n}\r\n\r\n\/* ===== TEKS ===== *\/\r\n.phm-card__text {\r\n    font-size: 15.5px;\r\n    line-height: 1.75;\r\n    color: #3d4b51;\r\n    margin-bottom: 22px;\r\n    flex-grow: 1;\r\n}\r\n\r\n.phm-full { display: none; }\r\n.phm-card__text.is-expanded .phm-short { display: none; }\r\n.phm-card__text.is-expanded .phm-full { display: inline; }\r\n\r\n.phm-card__toggle {\r\n    background: none;\r\n    border: none;\r\n    padding: 0;\r\n    font-weight: 700;\r\n    font-size: 15px;\r\n    color: var(--phm-red);\r\n    cursor: pointer;\r\n    margin-top: 4px;\r\n    transition: opacity 0.2s;\r\n}\r\n\r\n.phm-card__toggle:hover {\r\n    opacity: 0.7;\r\n    text-decoration: underline;\r\n}\r\n\r\n\/* ===== FOOTER ===== *\/\r\n.phm-card__footer {\r\n    border-top: 1px solid #f0f3f4;\r\n    padding-top: 18px;\r\n    margin-top: auto;\r\n}\r\n\r\n.phm-card__name {\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    color: var(--phm-ink);\r\n    line-height: 1.35;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.phm-card__role {\r\n    font-size: 13.5px;\r\n    color: var(--phm-muted);\r\n    line-height: 1.5;\r\n}\r\n\r\n\/* ===== NAVIGASI ===== *\/\r\n.phm-testi__nav,\r\n.phm-testi__dots {\r\n    display: none;\r\n}\r\n\r\n.phm-testi__slider-wrap.is-ready .phm-testi__nav {\r\n    display: flex;\r\n}\r\n\r\n.phm-testi__slider-wrap.is-ready .phm-testi__dots {\r\n    display: block;\r\n}\r\n\r\n.phm-testi__nav {\r\n    width: 44px;\r\n    height: 44px;\r\n    background: #fff;\r\n    border-radius: 50%;\r\n    box-shadow: 0 8px 20px rgba(31, 45, 51, 0.1);\r\n    top: 40%;\r\n    z-index: 10;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.phm-testi__nav::after {\r\n    font-size: 14px;\r\n    font-weight: 900;\r\n    color: var(--phm-red);\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n.phm-testi__nav:hover {\r\n    background: var(--phm-red);\r\n    box-shadow: 0 8px 20px rgba(255, 26, 26, 0.3);\r\n}\r\n\r\n.phm-testi__nav:hover::after {\r\n    color: #fff;\r\n}\r\n\r\n.swiper-button-prev.phm-testi__nav { left: 0; }\r\n.swiper-button-next.phm-testi__nav { right: 0; }\r\n\r\n\/* ===== DOTS ===== *\/\r\n.phm-testi__dots {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 10px;\r\n    text-align: center;\r\n    z-index: 10;\r\n}\r\n\r\n.phm-testi__dots .swiper-pagination-bullet {\r\n    width: 10px;\r\n    height: 10px;\r\n    background: #d8e2e4;\r\n    opacity: 1;\r\n    margin: 0 6px !important;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.phm-testi__dots .swiper-pagination-bullet-active {\r\n    background: var(--phm-red);\r\n    width: 28px;\r\n    border-radius: 6px;\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n    .phm-testi__nav { display: none !important; }\r\n    .phm-testi__slider-wrap { padding-left: 20px; padding-right: 20px; }\r\n}\r\n\r\n@media (max-width: 680px) {\r\n    .phm-testi { padding: 60px 16px 70px; }\r\n    .phm-card { padding: 48px 24px 28px; }\r\n    .phm-card__avatar-wrap { left: 24px; width: 68px; height: 68px; top: -30px; }\r\n    .phm-card__avatar .phm-initials { font-size: 18px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .phm-card { transition: none; }\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\r\n\r\n<script>\r\n(function($) {\r\n    'use strict';\r\n    \r\n    var isElementorEdit = (window.elementorFrontend && window.elementorFrontend.isEditMode());\r\n\r\n    function initPhmTesti() {\r\n        var section = document.getElementById('phmTesti');\r\n        if (!section) return;\r\n\r\n        section.addEventListener('click', function (e) {\r\n            var btn = e.target.closest('.phm-card__toggle');\r\n            if (!btn) return;\r\n            e.preventDefault();\r\n            var wrap = btn.closest('.phm-card__text');\r\n            var isExpanded = wrap.classList.toggle('is-expanded');\r\n            btn.textContent = isExpanded ? 'Read less' : 'Read more';\r\n        });\r\n\r\n        if (typeof window.Swiper !== 'undefined') {\r\n            var sliderWrap = document.querySelector('.phm-testi__slider-wrap');\r\n            var swiperContainer = document.querySelector('.phm-testi__swiper');\r\n            \r\n            if (!sliderWrap || !swiperContainer) return;\r\n\r\n            if (sliderWrap.swiperInstance) {\r\n                sliderWrap.swiperInstance.destroy(true, true);\r\n            }\r\n\r\n            var swiper = new window.Swiper(swiperContainer, {\r\n                slidesPerView: 1,\r\n                spaceBetween: 28,\r\n                speed: 800,\r\n                loop: true,\r\n                grabCursor: true,\r\n                autoplay: {\r\n                    delay: 4500,\r\n                    disableOnInteraction: false,\r\n                    pauseOnMouseEnter: true\r\n                },\r\n                pagination: {\r\n                    el: '.phm-testi__dots',\r\n                    clickable: true\r\n                },\r\n                navigation: {\r\n                    nextEl: '.swiper-button-next.phm-testi__nav',\r\n                    prevEl: '.swiper-button-prev.phm-testi__nav'\r\n                },\r\n                breakpoints: {\r\n                    0: { slidesPerView: 1 },\r\n                    768: { slidesPerView: 2 },\r\n                    1100: { slidesPerView: 3 }\r\n                },\r\n                on: {\r\n                    init: function () {\r\n                        sliderWrap.classList.add('is-ready');\r\n                    }\r\n                }\r\n            });\r\n            \r\n            sliderWrap.swiperInstance = swiper;\r\n        }\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', initPhmTesti);\r\n    } else {\r\n        initPhmTesti();\r\n    }\r\n\r\n    if (window.elementorFrontend) {\r\n        window.elementorFrontend.hooks.addAction('frontend\/element_ready\/html.default', function($scope) {\r\n            if ($scope.find('#phmTesti').length) {\r\n                setTimeout(initPhmTesti, 150);\r\n            }\r\n        });\r\n        \r\n        window.elementor.on('document:loaded', function() {\r\n            setTimeout(initPhmTesti, 300);\r\n        });\r\n    }\r\n})(window.jQuery);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Preschool &#8211; Penerimaan Peserta Didik Baru Preschool \ud83c\udf92 Penerimaan Peserta Didik Baru Bergabunglah dengan keluarga besar Preschool kami! Tempat di mana anak-anak belajar dengan gembira, bermain sambil belajar, dan tumbuh menjadi generasi cerdas &amp; berkarakter. \ud83c\udfa8 Bermain Sambil Belajar Beragam aktivitas menyenangkan seperti menggambar, bernyanyi, menari, olahraga, dan bermain peran yang mengasah kreativitas, motorik, serta [&hellip;]<\/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-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/preschoolpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preschoolpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/preschoolpermata.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/preschoolpermata.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/preschoolpermata.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":347,"href":"https:\/\/preschoolpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":1143,"href":"https:\/\/preschoolpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/1143"}],"wp:attachment":[{"href":"https:\/\/preschoolpermata.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}