{"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-07T01:28:56","modified_gmt":"2026-09-07T01:28:56","slug":"beranda","status":"publish","type":"page","link":"https:\/\/tkislamplatinum.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;id&quot;:866,&quot;url&quot;:&quot;https:\\\/\\\/tkislamplatinum.sch.id\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/gedung-TKIP.jpg&quot;},{&quot;id&quot;:867,&quot;url&quot;:&quot;https:\\\/\\\/tkislamplatinum.sch.id\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/gedung-TKIP-2.jpg&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>PPDB TK Islam Platinum \ud83c\udfeb\u2728<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        \/* ----- RESET & BASE ----- *\/\r\n        * { margin: 0; padding: 0; box-sizing: border-box; }\r\n        body {\r\n            font-family: 'Inter', system-ui, sans-serif;\r\n            background: #f0f0f0;\r\n        }\r\n\r\n        \/* =========================================================\r\n           SLIDER CONTAINER - DENGAN SPACE DI ATAS\r\n           DIOPTIMALKAN UNTUK PERFORMANCE\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            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            background-image: url('http:\/\/localhost\/preschool\/wp-content\/uploads\/2026\/08\/lokasipreschool-2048x1152-1.jpg');\r\n            background-size: cover;\r\n            background-position: center;\r\n            \/* Hapus background-attachment: fixed untuk performance lebih ringan di mobile *\/\r\n            background-attachment: scroll;\r\n            padding-top: 80px; \/* SPACE DI ATAS UNTUK HEADER *\/\r\n            padding-bottom: 4rem;\r\n            border-radius: 1rem;\r\n            \/* will-change: transform untuk optimasi GPU *\/\r\n            will-change: transform;\r\n        }\r\n\r\n        .slider-container::before {\r\n            content: '';\r\n            position: absolute;\r\n            inset: 0;\r\n            background: rgba(0,0,0,0.5);\r\n            z-index: 1;\r\n            \/* Kurangi blur untuk performance lebih ringan *\/\r\n            backdrop-filter: blur(4px);\r\n            -webkit-backdrop-filter: blur(4px);\r\n            border-radius: 1rem;\r\n        }\r\n\r\n        .content-wrapper {\r\n            position: relative;\r\n            z-index: 2;\r\n            width: 100%;\r\n            max-width: 1280px;\r\n            padding: 2rem 1.5rem;\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 2rem;\r\n            align-items: center;\r\n            min-height: 80vh;\r\n        }\r\n\r\n        \/* --- KOLOM KIRI --- *\/\r\n        .left-col {\r\n            position: relative;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            gap: 1.25rem;\r\n            padding: 1.5rem 2rem;\r\n            \/* Kurangi blur untuk performance *\/\r\n            backdrop-filter: blur(2px);\r\n            -webkit-backdrop-filter: blur(2px);\r\n            border-radius: 2rem;\r\n            border: 2px solid transparent;\r\n            background:\r\n                linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) padding-box,\r\n                linear-gradient(135deg, #831b1b, #FAA0A0, #831b1b) border-box;\r\n            box-shadow: 0 20px 40px -15px rgba(131,27,27,0.25);\r\n            min-height: 320px;\r\n            transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n            -webkit-tap-highlight-color: transparent;\r\n            \/* Optimasi GPU *\/\r\n            will-change: transform;\r\n        }\r\n\r\n        \/* Hapus hover effect di mobile untuk performance *\/\r\n        @media (hover: hover) {\r\n            .left-col:hover {\r\n                transform: translateY(-10px) scale(1.015);\r\n                box-shadow: 0 35px 65px -18px rgba(131,27,27,0.45), 0 15px 30px -10px rgba(131,27,27,0.25);\r\n            }\r\n        }\r\n\r\n        \/* Grid-stack: semua slide menumpuk *\/\r\n        .text-slide {\r\n            position: relative;\r\n            display: grid;\r\n        }\r\n        .text-slide .slide-item {\r\n            grid-area: 1 \/ 1;\r\n            opacity: 0;\r\n            transform: translateX(-32px);\r\n            visibility: hidden;\r\n            pointer-events: none;\r\n            transition:\r\n                opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),\r\n                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\r\n                visibility 0s linear 0.6s;\r\n        }\r\n        .text-slide .slide-item.active {\r\n            opacity: 1;\r\n            transform: translateX(0);\r\n            visibility: visible;\r\n            pointer-events: auto;\r\n            transition:\r\n                opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,\r\n                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,\r\n                visibility 0s linear 0s;\r\n        }\r\n        .text-slide .slide-item h2 {\r\n            font-size: clamp(1.6rem, 4vw, 3.2rem);\r\n            font-weight: 700;\r\n            line-height: 1.15;\r\n            color: #831b1b;\r\n            text-shadow: 0 2px 10px rgba(131,27,27,0.08);\r\n            letter-spacing: -0.02em;\r\n        }\r\n        .text-slide .slide-item p {\r\n            font-family: 'Inter', system-ui, sans-serif;\r\n            font-size: clamp(0.85rem, 1.2vw, 1.15rem);\r\n            color: rgba(40,20,20,0.75);\r\n            line-height: 1.6;\r\n            max-width: 95%;\r\n            margin-top: 0.4rem;\r\n            margin-bottom: 0.4rem;\r\n            font-weight: 300;\r\n        }\r\n\r\n        \/* =========================================================\r\n           TOMBOL UTAMA - DIOPTIMALKAN\r\n        ========================================================= *\/\r\n        .btn-primary {\r\n            display: inline-block;\r\n            margin-top: 1.5rem;\r\n            padding: 0.7rem 1.8rem;\r\n            background: linear-gradient(135deg, #831b1b, #9c2323);\r\n            color: #ffffff;\r\n            font-weight: 700;\r\n            font-size: 0.95rem;\r\n            border-radius: 60px;\r\n            transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;\r\n            box-shadow: 0 6px 14px rgba(131, 27, 27, 0.35);\r\n            text-decoration: none;\r\n            border: 2px solid rgba(255,255,255,0.2);\r\n            text-align: center;\r\n            width: fit-content;\r\n            letter-spacing: 0.3px;\r\n            white-space: nowrap;\r\n            position: relative;\r\n            overflow: hidden;\r\n            \/* Optimasi GPU *\/\r\n            will-change: transform;\r\n        }\r\n\r\n        .btn-primary::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: linear-gradient(\r\n                45deg,\r\n                transparent 35%,\r\n                rgba(250, 160, 160, 0.15) 45%,\r\n                rgba(250, 160, 160, 0.32) 50%,\r\n                rgba(250, 160, 160, 0.15) 55%,\r\n                transparent 65%\r\n            );\r\n            background-size: 200% 200%;\r\n            animation: shimmerCling 2.4s ease-in-out 1s infinite;\r\n            pointer-events: none;\r\n            border-radius: 60px;\r\n            \/* Optimasi GPU *\/\r\n            will-change: transform;\r\n        }\r\n\r\n        \/* Kurangi keyframes untuk performance *\/\r\n        @keyframes shimmerCling {\r\n            0% {\r\n                transform: translateX(-100%) rotate(25deg);\r\n                opacity: 0;\r\n            }\r\n            20% { opacity: 1; }\r\n            80% { opacity: 1; }\r\n            100% {\r\n                transform: translateX(100%) rotate(25deg);\r\n                opacity: 0;\r\n            }\r\n        }\r\n\r\n        @media (hover: hover) {\r\n            .btn-primary:hover {\r\n                transform: translateY(-4px) scale(1.02);\r\n                background: linear-gradient(135deg, #6b1616, #831b1b);\r\n                box-shadow: 0 14px 28px rgba(131, 27, 27, 0.5);\r\n                border-color: #831b1b;\r\n                color: #FFEA00;\r\n            }\r\n        }\r\n\r\n        .btn-primary i, .btn-primary span {\r\n            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* --- KOLOM KANAN --- *\/\r\n        .right-col {\r\n            position: relative;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            aspect-ratio: 4\/3;\r\n        }\r\n        .right-col .image-slide {\r\n            position: absolute;\r\n            inset: 0;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            opacity: 0;\r\n            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n            filter:\r\n                drop-shadow(0 25px 20px rgba(0,0,0,0.45))\r\n                drop-shadow(0 10px 30px rgba(0,0,0,0.35));\r\n            animation: floatY 6s ease-in-out infinite;\r\n            \/* Optimasi GPU *\/\r\n            will-change: transform, opacity;\r\n        }\r\n        .right-col .image-slide.active {\r\n            opacity: 1;\r\n        }\r\n        .right-col .image-slide svg,\r\n        .right-col .image-slide img {\r\n            width: auto;\r\n            height: 100%;\r\n            max-width: 100%;\r\n            object-fit: contain;\r\n        }\r\n        @keyframes floatY {\r\n            0%, 100% { transform: translateY(0); }\r\n            50% { transform: translateY(-14px); }\r\n        }\r\n        @media (prefers-reduced-motion: reduce) {\r\n            .right-col .image-slide { animation: none; }\r\n            .btn-primary::after { animation: none; }\r\n            .badge-shimmer { animation: none; background: #831b1b; }\r\n        }\r\n\r\n        \/* --- DOTS --- *\/\r\n        .dots-container {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 0.75rem;\r\n            position: absolute;\r\n            bottom: 1.5rem;\r\n            left: 0;\r\n            right: 0;\r\n            z-index: 10;\r\n        }\r\n        .dot {\r\n            width: 14px;\r\n            height: 14px;\r\n            border-radius: 50%;\r\n            background: rgba(131,27,27,0.2);\r\n            border: 2px solid rgba(131,27,27,0.35);\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        .dot.active {\r\n            background: #831b1b;\r\n            border-color: #831b1b;\r\n            transform: scale(1.25);\r\n            box-shadow: 0 0 20px rgba(131, 27, 27, 0.5);\r\n        }\r\n        @media (hover: hover) {\r\n            .dot:hover {\r\n                transform: scale(1.15);\r\n                background: rgba(131,27,27,0.45);\r\n            }\r\n        }\r\n\r\n        \/* =========================================================\r\n           ANIMASI MASUK - DIOPTIMALKAN\r\n        ========================================================= *\/\r\n        @keyframes zoomIn {\r\n            0% { opacity: 0; transform: scale(0.5); }\r\n            100% { opacity: 1; transform: scale(1); }\r\n        }\r\n        .right-col .image-slide.active {\r\n            animation: floatY 6s ease-in-out infinite, zoomIn 0.8s ease forwards;\r\n        }\r\n\r\n        @keyframes shimmerBadge {\r\n            0% { background-position: -200% center; }\r\n            100% { background-position: 200% center; }\r\n        }\r\n        .badge-shimmer {\r\n            background: linear-gradient(90deg, #831b1b, #FAA0A0, #831b1b);\r\n            background-size: 200% auto;\r\n            animation: shimmerBadge 2s linear infinite;\r\n        }\r\n\r\n        \/* =========================================================\r\n           TAMBAHAN KONTEN TULISAN\r\n        ========================================================= *\/\r\n        .sub-text {\r\n            font-family: 'Inter', system-ui, sans-serif;\r\n            font-size: clamp(0.7rem, 0.9vw, 0.9rem);\r\n            color: rgba(40,20,20,0.65);\r\n            margin-top: 0.2rem;\r\n            font-weight: 300;\r\n            letter-spacing: 0.5px;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        .badge {\r\n            display: inline-block;\r\n            padding: 0.2rem 1rem;\r\n            background: rgba(131, 27, 27, 0.35);\r\n            border: 1px solid rgba(131, 27, 27, 0.55);\r\n            border-radius: 30px;\r\n            font-family: 'Inter', system-ui, sans-serif;\r\n            font-size: clamp(0.55rem, 0.75vw, 0.75rem);\r\n            color: #ffffff;\r\n            font-weight: 300;\r\n            margin-bottom: 0.3rem;\r\n            backdrop-filter: blur(4px);\r\n            -webkit-backdrop-filter: blur(4px);\r\n        }\r\n\r\n        .highlight {\r\n            display: inline-block;\r\n            padding: 0.1rem 0.4rem;\r\n            background: rgba(131, 27, 27, 0.3);\r\n            border-radius: 6px;\r\n            color: #ffffff;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .stat-item {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.4rem;\r\n            background: rgba(131, 27, 27, 0.06);\r\n            padding: 0.25rem 0.7rem;\r\n            border-radius: 30px;\r\n            border: 1px solid rgba(131, 27, 27, 0.15);\r\n            font-family: 'Inter', system-ui, sans-serif;\r\n            font-size: clamp(0.55rem, 0.75vw, 0.75rem);\r\n            font-weight: 300;\r\n            color: rgba(40,20,20,0.75);\r\n            white-space: nowrap;\r\n        }\r\n\r\n        .stat-item strong {\r\n            color: #831b1b;\r\n            font-weight: 600;\r\n            font-size: clamp(0.7rem, 0.9vw, 0.95rem);\r\n        }\r\n\r\n        .stats-row {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 0.4rem;\r\n            margin-top: 0.4rem;\r\n        }\r\n\r\n        .program-list {\r\n            margin: 0.5rem 0;\r\n        }\r\n        .program-list .program-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n            background: rgba(131, 27, 27, 0.06);\r\n            padding: 0.35rem 0.7rem;\r\n            border-radius: 30px;\r\n            border: 1px solid rgba(131, 27, 27, 0.15);\r\n            margin-bottom: 0.3rem;\r\n            font-size: clamp(0.7rem, 0.9vw, 0.9rem);\r\n            color: rgba(40,20,20,0.8);\r\n        }\r\n        .program-item .program-icon {\r\n            font-size: 1.1rem;\r\n        }\r\n        .program-item .program-name {\r\n            font-weight: 600;\r\n            color: #831b1b;\r\n        }\r\n        .program-item .program-desc {\r\n            font-family: 'Inter', system-ui, sans-serif;\r\n            font-size: 0.75em;\r\n            font-weight: 300;\r\n            color: rgba(40,20,20,0.55);\r\n        }\r\n\r\n        \/* =========================================================\r\n           RESPONSIVE - DENGAN SPACE HEADER\r\n        ========================================================= *\/\r\n\r\n        \/* Tablet *\/\r\n        @media (max-width: 1024px) {\r\n            .content-wrapper { grid-template-columns: 1fr 1fr; gap: 1.5rem; }\r\n            .slider-container::before { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }\r\n            .slider-container { padding-top: 75px; }\r\n        }\r\n\r\n        \/* HP & Tablet Kecil *\/\r\n        @media (max-width: 768px) {\r\n            .content-wrapper {\r\n                grid-template-columns: 1fr;\r\n                grid-template-rows: auto auto;\r\n                gap: 1.5rem;\r\n                min-height: auto;\r\n                padding: 1.5rem 1rem;\r\n            }\r\n            .left-col {\r\n                order: 2;\r\n                min-height: 200px;\r\n                background:\r\n                    linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.90)) padding-box,\r\n                    linear-gradient(135deg, #831b1b, #FAA0A0, #831b1b) border-box;\r\n                backdrop-filter: blur(2px);\r\n                -webkit-backdrop-filter: blur(2px);\r\n            }\r\n            .right-col { \r\n                order: 1; \r\n                aspect-ratio: 16\/10; \r\n                margin-top: 4.5rem; \r\n            }\r\n            .text-slide .slide-item p { max-width: 100%; }\r\n            .stats-row { gap: 0.3rem; }\r\n            .stat-item { white-space: normal; }\r\n            .program-item { flex-wrap: wrap; }\r\n            .slider-container { \r\n                padding-top: 70px;\r\n                background-attachment: scroll;\r\n            }\r\n            .slider-container::before { \r\n                backdrop-filter: blur(2px); \r\n                -webkit-backdrop-filter: blur(2px);\r\n            }\r\n        }\r\n\r\n        \/* HP Kecil *\/\r\n        @media (max-width: 480px) {\r\n            .content-wrapper {\r\n                padding: 0.8rem 0.6rem;\r\n                gap: 0.8rem;\r\n                min-height: auto;\r\n            }\r\n            .left-col {\r\n                padding: 0.8rem 0.8rem;\r\n                min-height: auto;\r\n                gap: 0.5rem;\r\n                border-radius: 1.5rem;\r\n                backdrop-filter: blur(1px);\r\n                -webkit-backdrop-filter: blur(1px);\r\n            }\r\n            .text-slide .slide-item h2 {\r\n                font-size: 1.3rem !important;\r\n                line-height: 1.2;\r\n            }\r\n            .text-slide .slide-item p {\r\n                font-size: 0.7rem !important;\r\n                line-height: 1.4;\r\n                margin-top: 0.2rem;\r\n                margin-bottom: 0.2rem;\r\n            }\r\n            .btn-primary {\r\n                font-size: 0.65rem !important;\r\n                padding: 0.35rem 0.9rem !important;\r\n                margin-top: 0.3rem;\r\n                white-space: normal;\r\n                width: auto;\r\n                display: inline-block;\r\n            }\r\n            .right-col {\r\n                aspect-ratio: 16\/10;\r\n                min-height: 120px;\r\n                margin-top: 4rem;\r\n            }\r\n            .dots-container {\r\n                bottom: 0.5rem;\r\n                gap: 0.4rem;\r\n            }\r\n            .dot {\r\n                width: 10px;\r\n                height: 10px;\r\n            }\r\n            .slider-container {\r\n                padding-bottom: 2rem;\r\n                min-height: 100vh;\r\n                border-radius: 0.5rem;\r\n                padding-top: 60px;\r\n            }\r\n            .slider-container::before {\r\n                border-radius: 0.5rem;\r\n                backdrop-filter: blur(2px);\r\n                -webkit-backdrop-filter: blur(2px);\r\n            }\r\n            .sub-text { font-size: 0.55rem !important; }\r\n            .badge { font-size: 0.5rem !important; padding: 0.1rem 0.5rem; }\r\n            .stats-row { gap: 0.2rem; }\r\n            .stat-item { font-size: 0.5rem !important; padding: 0.15rem 0.4rem; }\r\n            .stat-item strong { font-size: 0.6rem !important; }\r\n            .program-item { font-size: 0.6rem !important; padding: 0.2rem 0.5rem; }\r\n            .program-item .program-desc { font-size: 0.7em; }\r\n        }\r\n\r\n        \/* HP Sangat Kecil *\/\r\n        @media (max-width: 390px) {\r\n            .content-wrapper {\r\n                padding: 0.5rem 0.4rem;\r\n                gap: 0.5rem;\r\n            }\r\n            .left-col {\r\n                padding: 0.5rem 0.6rem;\r\n                gap: 0.3rem;\r\n                min-height: auto;\r\n                border-radius: 1rem;\r\n                backdrop-filter: blur(1px);\r\n                -webkit-backdrop-filter: blur(1px);\r\n            }\r\n            .text-slide .slide-item h2 {\r\n                font-size: 1.1rem !important;\r\n            }\r\n            .text-slide .slide-item p {\r\n                font-size: 0.6rem !important;\r\n                line-height: 1.3;\r\n            }\r\n            .btn-primary {\r\n                font-size: 0.55rem !important;\r\n                padding: 0.25rem 0.7rem !important;\r\n                margin-top: 0.2rem;\r\n            }\r\n            .right-col {\r\n                aspect-ratio: 16\/9;\r\n                min-height: 100px;\r\n                margin-top: 3.5rem;\r\n            }\r\n            .slider-container {\r\n                min-height: 100vh;\r\n                padding-bottom: 1.5rem;\r\n                padding-top: 55px;\r\n            }\r\n            .dots-container {\r\n                bottom: 0.3rem;\r\n                gap: 0.3rem;\r\n            }\r\n            .dot {\r\n                width: 8px;\r\n                height: 8px;\r\n                border-width: 1.5px;\r\n            }\r\n            .program-item {\r\n                font-size: 0.5rem !important;\r\n                padding: 0.15rem 0.4rem;\r\n            }\r\n            .program-item .program-icon { font-size: 0.7rem; }\r\n            .program-item .program-desc { font-size: 0.7em; }\r\n            .stat-item {\r\n                font-size: 0.45rem !important;\r\n                padding: 0.1rem 0.3rem;\r\n            }\r\n            .stat-item strong { font-size: 0.5rem !important; }\r\n            .badge {\r\n                font-size: 0.45rem !important;\r\n                padding: 0.1rem 0.4rem;\r\n            }\r\n            .sub-text { font-size: 0.5rem !important; }\r\n            .left-col { gap: 0.3rem; padding: 0.4rem 0.4rem; }\r\n            .text-slide .slide-item p { font-size: 0.55rem !important; }\r\n            .slider-container::before {\r\n                backdrop-filter: blur(1px);\r\n                -webkit-backdrop-filter: blur(1px);\r\n            }\r\n        }\r\n\r\n        \/* Prevent FOUC *\/\r\n        .text-slide .slide-item:not(.active) {\r\n            display: none !important;\r\n        }\r\n        .text-slide .slide-item.active {\r\n            display: block !important;\r\n        }\r\n\r\n        \/* Reduce motion untuk semua device *\/\r\n        @media (prefers-reduced-motion: reduce) {\r\n            * {\r\n                animation-duration: 0.01ms !important;\r\n                animation-iteration-count: 1 !important;\r\n                transition-duration: 0.01ms !important;\r\n            }\r\n            .right-col .image-slide { animation: none; }\r\n            .btn-primary { animation: none; }\r\n            .btn-primary::after { animation: none; }\r\n            .badge-shimmer { animation: none; background: #831b1b; }\r\n            .right-col .image-slide.active {\r\n                animation: none;\r\n                opacity: 1;\r\n            }\r\n            .text-slide .slide-item.active {\r\n                opacity: 1;\r\n                transform: none;\r\n            }\r\n            .slider-container::before {\r\n                backdrop-filter: blur(3px);\r\n                -webkit-backdrop-filter: blur(3px);\r\n            }\r\n            .left-col {\r\n                backdrop-filter: blur(1px);\r\n                -webkit-backdrop-filter: blur(1px);\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"slider-container\">\r\n    <div class=\"content-wrapper\">\r\n        <!-- KOLOM KIRI -->\r\n        <div class=\"left-col\">\r\n            <div class=\"text-slide\">\r\n                <!-- slide 0: PPDB -->\r\n                <div class=\"slide-item active\" data-index=\"0\">\r\n                    <span class=\"badge badge-shimmer\">\ud83d\udce2 Pendaftaran Peserta Didik Baru Dibuka<\/span>\r\n                    <h2>\ud83c\udf92 Sekolah Islam yang Menyenangkan untuk Buah Hati Anda<\/h2>\r\n                    <p>Bergabunglah bersama TK Islam Platinum, tempat anak belajar, bermain, dan berkembang dalam lingkungan Islami yang aman, nyaman, dan penuh keceriaan.<\/p>\r\n\r\n                    <div class=\"stats-row\">\r\n                        \r\n                        <span class=\"stat-item\">\ud83c\udf19 <strong>Qur'anic Learning<\/strong><\/span>\r\n                        <span class=\"stat-item\">\u2b50<strong>English Program<\/strong><\/span>\r\n                        <span class=\"stat-item\">\ud83d\udc51 <strong>Leadership Character<\/strong><\/span>\r\n                        <span class=\"stat-item\">\ud83c\udfca <strong>Swimming Class<\/strong><\/span>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/ppdb.sitpermata.id\/\" class=\"btn-primary\">\ud83d\udccb Daftar Sekarang<\/a>\r\n                <\/div>\r\n                <!-- slide 1: bermain sambil belajar -->\r\n                <div class=\"slide-item\" data-index=\"1\">\r\n                    <span class=\"badge badge-shimmer\">\ud83c\udfa8 Belajar Sambil Bermain<\/span>\r\n                    <h2>Aktivitas Kreatif, Pembelajaran Bahasa Inggris, Pendidikan Al-Qur'an, dan Pengalaman Belajar yang Menyenangkan<\/h2>\r\n                    \r\n                    <div class=\"stats-row\">\r\n                        <span class=\"stat-item\"><strong>\ud83c\udfa8 Bermain Kreatif<\/strong>Belajar & Berimajinasi<\/span>\r\n                        <span class=\"stat-item\"><strong>\ud83c\udfc3 Aktivitas Ceria<\/strong>Bergerak & Bereksplorasi<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- slide 2: prestasi & perkembangan anak -->\r\n                <div class=\"slide-item\" data-index=\"2\">\r\n                    <span class=\"badge badge-shimmer\">\u2728  Tumbuh Dengan Prestasi<\/span>\r\n                    <h2>Membangun Generasi Cerdas & Berakhlak Mulia<\/h2>\r\n\r\n                    <div class=\"program-list\">\r\n                        <div class=\"program-item\">\r\n                            <span class=\"program-icon\">\ud83d\udcda<\/span>\r\n                            <span class=\"program-name\">Kesiapan Akademik<\/span>\r\n                            <span class=\"program-desc\">\u2022 Literasi \u2022 Numerasi \u2022 Eksplorasi<\/span>\r\n                        <\/div>\r\n                        <div class=\"program-item\">\r\n                            <span class=\"program-icon\">\ud83c\udfa8<\/span>\r\n                            <span class=\"program-name\">Kreativitas & Ekspresi<\/span>\r\n                            <span class=\"program-desc\">\u2022 Seni \u2022 Musik \u2022 Imajinasi<\/span>\r\n                        <\/div>\r\n                        <div class=\"program-item\">\r\n                            <span class=\"program-icon\">\ud83e\udd1d<\/span>\r\n                            <span class=\"program-name\">Pengembangan Karakter & Sosial<\/span>\r\n                            <span class=\"program-desc\">\u2022 Percaya Diri \u2022 Bertanggung Jawab \u2022 Sopan Santun<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <p class=\"sub-text\">\ud83c\udf1f Menciptakan lingkungan belajar yang hangat dan menyenangkan agar anak tumbuh cerdas, kreatif, berakhlak mulia, serta percaya diri dalam setiap langkahnya.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <!-- KOLOM KANAN -->\r\n        <div class=\"right-col\">\r\n            <div class=\"image-slide active\">\r\n                <img decoding=\"async\" src=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul-9-scaled.webp\" loading=\"lazy\" alt=\"TK Islam Platinum\">\r\n            <\/div>\r\n            <div class=\"image-slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda1-new-scaled.webp\" loading=\"lazy\" alt=\"Kegiatan TK Islam Platinum\">\r\n            <\/div>\r\n            <div class=\"image-slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda3-new-scaled.webp\" loading=\"lazy\" alt=\"Prestasi TK Islam Platinum\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <!-- DOTS -->\r\n    <div class=\"dots-container\">\r\n        <span class=\"dot active\" data-index=\"0\"><\/span>\r\n        <span class=\"dot\" data-index=\"1\"><\/span>\r\n        <span class=\"dot\" data-index=\"2\"><\/span>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        let currentIndex = 0;\r\n        const total = 3;\r\n        let interval = null;\r\n        const delay = 5000;\r\n\r\n        const imageSlides = document.querySelectorAll('.right-col .image-slide');\r\n        const textItems = document.querySelectorAll('.text-slide .slide-item');\r\n        const dots = document.querySelectorAll('.dot');\r\n\r\n        function updateSlide(index) {\r\n            imageSlides.forEach(el => el.classList.remove('active'));\r\n            textItems.forEach(el => el.classList.remove('active'));\r\n            dots.forEach(el => el.classList.remove('active'));\r\n\r\n            imageSlides[index].classList.add('active');\r\n            textItems[index].classList.add('active');\r\n            dots[index].classList.add('active');\r\n        }\r\n\r\n        function goToSlide(index) {\r\n            if (index < 0) index = total - 1;\r\n            if (index >= total) index = 0;\r\n            currentIndex = index;\r\n            updateSlide(currentIndex);\r\n            resetAutoPlay();\r\n        }\r\n\r\n        function nextSlide() {\r\n            goToSlide((currentIndex + 1) % total);\r\n        }\r\n\r\n        function resetAutoPlay() {\r\n            if (interval) clearInterval(interval);\r\n            interval = setInterval(nextSlide, delay);\r\n        }\r\n\r\n        dots.forEach((dot, idx) => {\r\n            dot.addEventListener('click', function() {\r\n                if (currentIndex !== idx) goToSlide(idx);\r\n            });\r\n        });\r\n\r\n        resetAutoPlay();\r\n\r\n        const container = document.querySelector('.slider-container');\r\n        container.addEventListener('mouseenter', () => {\r\n            if (interval) clearInterval(interval);\r\n        });\r\n        container.addEventListener('mouseleave', resetAutoPlay);\r\n\r\n        \/\/ Touch support untuk mobile - lebih ringan\r\n        let touchStartX = 0;\r\n        let touchEndX = 0;\r\n        \r\n        container.addEventListener('touchstart', function(e) {\r\n            touchStartX = e.changedTouches[0].screenX;\r\n        }, { passive: true });\r\n        \r\n        container.addEventListener('touchend', function(e) {\r\n            touchEndX = e.changedTouches[0].screenX;\r\n            const diff = touchStartX - touchEndX;\r\n            if (Math.abs(diff) > 40) {\r\n                if (diff > 0) {\r\n                    goToSlide((currentIndex + 1) % total);\r\n                } else {\r\n                    goToSlide((currentIndex - 1 + total) % total);\r\n                }\r\n            }\r\n        }, { passive: true });\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:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda2-New-1024x1024.webp\" class=\"attachment-large size-large wp-image-1721\" alt=\"\" srcset=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda2-New-1024x1024.webp 1024w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda2-New-300x300.webp 300w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda2-New-150x150.webp 150w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda2-New-768x768.webp 768w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda2-New-1536x1536.webp 1536w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda2-New-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 TK Islam Platinum<\/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 TK Islam Platinum<\/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:\/\/tkislamplatinum.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1157\" height=\"648\" src=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog1TKIP.png\" class=\"attachment-full size-full wp-post-image\" alt=\"Mengintip Keseruan Pelepasan Siswa TK Islam Platinum: Belajar adalah Petualangan, Setiap Anak adalah Bintang!\" loading=\"lazy\" srcset=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog1TKIP.png 1157w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog1TKIP-300x168.png 300w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog1TKIP-768x430.png 768w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog1TKIP-1024x574.png 1024w\" sizes=\"auto, (max-width: 1157px) 100vw, 1157px\" \/>\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:\/\/tkislamplatinum.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t\tMengintip Keseruan Pelepasan Siswa TK Islam Platinum: Belajar adalah Petualangan, Setiap Anak adalah Bintang!\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\tMOJOKERTO \u2013 Suasana penuh tawa, haru, dan riuh tepuk tangan mewarnai Sentra IKM Batik Kota...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/tkislamplatinum.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:\/\/tkislamplatinum.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog2.1TKIP.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"English Fun Day: Menanamkan Skill Bahasa Inggris di Masa Keemasan\" loading=\"lazy\" srcset=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog2.1TKIP.jpg 1280w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog2.1TKIP-300x169.jpg 300w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog2.1TKIP-768x432.jpg 768w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog2.1TKIP-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/>\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:\/\/tkislamplatinum.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t\tEnglish Fun Day: Menanamkan Skill Bahasa Inggris di Masa Keemasan\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\tMasa usia dini, yang karib disapa sebagai the golden age (masa keemasan), merupakan fase krusial...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/tkislamplatinum.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:\/\/tkislamplatinum.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"567\" src=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog3.1TKIP.png\" class=\"attachment-full size-full wp-post-image\" alt=\"Keceriaan Berbagi Siswa Siswi TK Islam Platinum dalam Menebar Kebajikan di Bulan Suci\" loading=\"lazy\" srcset=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog3.1TKIP.png 1020w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog3.1TKIP-300x167.png 300w, https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Blog3.1TKIP-766x426.png 766w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\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:\/\/tkislamplatinum.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t\tKeceriaan Berbagi Siswa Siswi TK Islam Platinum dalam Menebar Kebajikan di Bulan Suci\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\tSiswa siswi TK Islam Platinum Mojokerto terlihat sangat ceria dan senyumnya merekah sore itu, Rabu...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/tkislamplatinum.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    \t\t<div class=\"elementor-element elementor-element-107a7c1 elementor-widget elementor-widget-html\" data-id=\"107a7c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\n     SLIDER PROGRAM UNGGULAN\r\n     Logo + Judul tetap DIAM di tengah\r\n     Foto kiri & kanan masing-masing geser di jalur terpisah\r\n     Font: Inter Tight (Semi Bold)\r\n========================================== -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter+Tight:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .pu-banner{\r\n    --maroon-deep:#3d0a0a;\r\n    --maroon-mid:#7a1010;\r\n    --red-bright:#c41616;\r\n    --label-color:#fff900;\r\n\r\n    position:relative;\r\n    width:100%;\r\n    max-width:1500px;\r\n    margin:0 auto;\r\n    aspect-ratio:1500\/690;\r\n    border-radius:28px;\r\n    overflow:hidden;\r\n    background:\r\n      radial-gradient(120% 140% at 50% 45%, var(--red-bright) 0%, var(--maroon-mid) 55%, var(--maroon-deep) 100%);\r\n    box-shadow:0 20px 50px rgba(61,10,10,0.35), 0 0 0 2px rgba(255,255,255,0.06) inset;\r\n    isolation:isolate;\r\n    font-family:'Inter Tight', sans-serif;\r\n  }\r\n  .pu-banner *{ box-sizing:border-box; }\r\n\r\n  .pu-banner::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background-image:\r\n      radial-gradient(2px 2px at 12% 20%, rgba(255,255,255,0.25) 0, transparent 60%),\r\n      radial-gradient(2px 2px at 85% 15%, rgba(255,255,255,0.2) 0, transparent 60%),\r\n      radial-gradient(2px 2px at 70% 80%, rgba(255,255,255,0.18) 0, transparent 60%),\r\n      radial-gradient(2px 2px at 25% 85%, rgba(255,255,255,0.15) 0, transparent 60%);\r\n    pointer-events:none;\r\n    z-index:1;\r\n  }\r\n\r\n  \/* ---------- center: logo + judul (FIXED, tidak ikut geser) ---------- *\/\r\n  .pu-center{\r\n    position:absolute;\r\n    left:50%;\r\n    top:50%;\r\n    transform:translate(-50%,-50%);\r\n    z-index:30;\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n    text-align:center;\r\n    pointer-events:none;\r\n    \/* Lebar wadah logo+judul: dibesarkan & dibuat berbasis vw supaya\r\n       skalanya konsisten di laptop, tablet, maupun HP (tidak lagi\r\n       \"menyusut ganda\" karena persen-dari-persen). *\/\r\n    width:clamp(140px, 24vw, 340px);\r\n  }\r\n  .pu-center img{\r\n    \/* Logo dibesarkan dan ukurannya dikontrol langsung lewat clamp()\r\n       berbasis viewport, bukan persen dari .pu-center saja \u2014 supaya\r\n       tetap besar & jelas walau container-nya sempit (mis. di HP). *\/\r\n    width:clamp(78px, 11vw, 160px);\r\n    height:auto;\r\n    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35));\r\n    margin-bottom:clamp(6px,1.2vw,14px);\r\n  }\r\n  .pu-center h1{\r\n    margin:0;\r\n    color:#ffffff;\r\n    font-family:'Inter Tight', sans-serif;\r\n    font-weight:600;\r\n    font-size:clamp(1.1rem, 3vw, 2.7rem);\r\n    line-height:1.1;\r\n    text-shadow:0 4px 14px rgba(0,0,0,0.35);\r\n    letter-spacing:0.2px;\r\n  }\r\n\r\n  \/* ---------- jalur slide kiri & kanan (terpisah) ---------- *\/\r\n  .pu-side{\r\n    position:absolute;\r\n    top:0;\r\n    height:100%;\r\n    width:37%;\r\n    overflow:hidden;\r\n    z-index:10;\r\n  }\r\n  .pu-side.pu-left{ left:0; }\r\n  .pu-side.pu-right{ right:0; }\r\n\r\n  .pu-track{\r\n    display:flex;\r\n    height:100%;\r\n    transition:transform 0.7s cubic-bezier(.65,.05,.36,1);\r\n  }\r\n\r\n  .pu-slide{\r\n    position:relative;\r\n    flex:0 0 100%;\r\n    width:100%;\r\n    height:100%;\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n    justify-content:center;\r\n    padding: 4% 6% 8%;\r\n  }\r\n\r\n  .pu-photo-wrap{\r\n    position:relative;\r\n    width:78%;\r\n    max-width:300px;\r\n    display:flex;\r\n    align-items:flex-end;\r\n    justify-content:center;\r\n  }\r\n  .pu-photo-wrap img{\r\n    width:100%;\r\n    height:auto;\r\n    object-fit:contain;\r\n    filter:drop-shadow(0 10px 18px rgba(0,0,0,0.35));\r\n    border-radius:12px;\r\n  }\r\n\r\n  .pu-label{\r\n    margin-top:clamp(6px,1.6vw,16px);\r\n    color:var(--label-color);\r\n    font-family:'Inter Tight', sans-serif;\r\n    font-weight:600;\r\n    font-size:clamp(0.85rem, 2.1vw, 1.6rem);\r\n    text-align:center;\r\n    line-height:1.15;\r\n    text-shadow:0 2px 8px rgba(0,0,0,0.4);\r\n  }\r\n\r\n  \/* ---------- tombol panah ---------- *\/\r\n  .pu-nav{\r\n    position:absolute;\r\n    top:50%;\r\n    transform:translateY(-50%);\r\n    z-index:20;\r\n    width:clamp(28px,3.4vw,44px);\r\n    height:clamp(28px,3.4vw,44px);\r\n    border-radius:50%;\r\n    border:none;\r\n    background:rgba(255,255,255,0.18);\r\n    color:#fff;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    cursor:pointer;\r\n    transition:background .2s ease, transform .2s ease;\r\n  }\r\n  .pu-nav:hover{ background:rgba(255,255,255,0.32); }\r\n  .pu-nav:active{ transform:translateY(-50%) scale(0.92); }\r\n  .pu-nav svg{ width:45%; height:45%; }\r\n  .pu-nav.pu-prev{ left:2%; }\r\n  .pu-nav.pu-next{ right:2%; }\r\n\r\n  \/* ---------- dots ---------- *\/\r\n  .pu-dots{\r\n    position:absolute;\r\n    bottom:clamp(10px,2vw,20px);\r\n    left:50%;\r\n    transform:translateX(-50%);\r\n    z-index:30;\r\n    display:flex;\r\n    gap:9px;\r\n  }\r\n  .pu-dot{\r\n    width:9px;\r\n    height:9px;\r\n    border-radius:50%;\r\n    background:rgba(255,255,255,0.4);\r\n    border:none;\r\n    cursor:pointer;\r\n    padding:0;\r\n    transition:background .25s ease, transform .25s ease;\r\n  }\r\n  .pu-dot.pu-active{\r\n    background:var(--label-color);\r\n    transform:scale(1.25);\r\n  }\r\n\r\n  \/* ---------- TABLET ---------- *\/\r\n  @media (max-width:1024px){\r\n    .pu-center{ width:clamp(130px, 27vw, 300px); }\r\n    .pu-center img{ width:clamp(74px, 13vw, 140px); }\r\n  }\r\n\r\n  \/* ---------- HP ---------- *\/\r\n  @media (max-width:640px){\r\n    .pu-side{ width:33%; }\r\n    \/* Panah sembunyi di HP -> ruang tengah dilebarkan supaya logo\r\n       bisa tampil lebih besar & tidak berdesakan. *\/\r\n    .pu-center{ width:clamp(120px, 34vw, 220px); }\r\n    .pu-center img{\r\n      width:clamp(68px, 20vw, 120px);\r\n      margin-bottom:clamp(4px, 1.6vw, 10px);\r\n    }\r\n    .pu-nav{ display:none; }\r\n  }\r\n\r\n  \/* ---------- HP KECIL (jaga logo tetap terlihat jelas) ---------- *\/\r\n  @media (max-width:400px){\r\n    .pu-center{ width:clamp(96px, 38vw, 160px); }\r\n    .pu-center img{ width:clamp(60px, 22vw, 96px); }\r\n    .pu-center h1{ font-size:clamp(0.9rem, 4.4vw, 1.4rem); }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"pu-banner\" id=\"puBanner\">\r\n\r\n  <!-- logo + judul, tetap di tengah -->\r\n  <div class=\"pu-center\">\r\n    <img decoding=\"async\" id=\"puLogoImg\" src=\"\" alt=\"Logo TK Islam Platinum\">\r\n    <h1>Program<br>Unggulan<\/h1>\r\n  <\/div>\r\n\r\n  <!-- slide kiri -->\r\n  <div class=\"pu-side pu-left\">\r\n    <div class=\"pu-track\" id=\"puTrackLeft\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- slide kanan -->\r\n  <div class=\"pu-side pu-right\">\r\n    <div class=\"pu-track\" id=\"puTrackRight\"><\/div>\r\n  <\/div>\r\n\r\n  <button class=\"pu-nav pu-prev\" aria-label=\"Sebelumnya\" onclick=\"puGoTo(puCurrent-1)\">\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\r\n  <\/button>\r\n  <button class=\"pu-nav pu-next\" aria-label=\"Berikutnya\" onclick=\"puGoTo(puCurrent+1)\">\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\r\n  <\/button>\r\n\r\n  <div class=\"pu-dots\" id=\"puDots\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\n  \/* ===========================================================\r\n     \ud83d\udcf7 CARA MENGGANTI GAMBAR \/ TEKS:\r\n     ===========================================================\r\n     - Ganti \"url\" dengan link gambar (dari Media Library WordPress\r\n       atau upload sendiri ke hosting). Ukuran disarankan lebar\r\n       sekitar 500-600px, background transparan (PNG) lebih bagus.\r\n     - Ganti \"label\" dengan nama program.\r\n     - Jumlah item di puLeftSlides dan puRightSlides HARUS SAMA\r\n       (dipasangkan per index: slide ke-1 kiri tampil bareng\r\n       slide ke-1 kanan, dst).\r\n     - Bisa tambah lebih dari 2 program per sisi, tinggal tambah\r\n       baris baru di dalam array.\r\n     =========================================================== *\/\r\n\r\n  var puLogoUrl = \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/logo-TKIP-remove.png\"; \/\/ <-- GANTI URL LOGO\r\n\r\n  var puLeftSlides = [\r\n      {\r\n          label: \"Qur'anic Learning\",\r\n          url: \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Quranic-New-scaled.webp\" \/\/ <-- GANTI URL FOTO\r\n      },\r\n      {\r\n          label: \"Leadership Character\",\r\n          url: \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Leadership-New-scaled.webp\" \/\/ <-- GANTI URL FOTO\r\n      }\r\n  ];\r\n\r\n  var puRightSlides = [\r\n      {\r\n          label: \"English Program\",\r\n          url: \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/English-New-scaled.webp\" \/\/ <-- GANTI URL FOTO\r\n      },\r\n      {\r\n          label: \"Swimming Class\",\r\n          url: \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/09\/Beranda3-new-scaled.webp\" \/\/ <-- GANTI URL FOTO\r\n      }\r\n  ];\r\n\r\n  var puFallback = \"https:\/\/placehold.co\/300x425\/7a1010\/fff900?text=Foto+Program\";\r\n\r\n  function puBuildTrack(trackEl, slides){\r\n      var html = '';\r\n      slides.forEach(function(item){\r\n          html += '' +\r\n              '<div class=\"pu-slide\">' +\r\n                  '<div class=\"pu-photo-wrap\">' +\r\n                      '<img decoding=\"async\" src=\"' + item.url + '\" alt=\"' + item.label.replace(\/&amp;\/g,'&') + '\" loading=\"lazy\" ' +\r\n                          'onerror=\"this.onerror=null;this.src=\\'' + puFallback + '\\';\" \/>' +\r\n                  '<\/div>' +\r\n                  '<div class=\"pu-label\">' + item.label + '<\/div>' +\r\n              '<\/div>';\r\n      });\r\n      trackEl.innerHTML = html;\r\n  }\r\n\r\n  var puTrackLeft = document.getElementById('puTrackLeft');\r\n  var puTrackRight = document.getElementById('puTrackRight');\r\n  var puLogoImg = document.getElementById('puLogoImg');\r\n  var puDotsWrap = document.getElementById('puDots');\r\n\r\n  puLogoImg.src = puLogoUrl;\r\n  puBuildTrack(puTrackLeft, puLeftSlides);\r\n  puBuildTrack(puTrackRight, puRightSlides);\r\n\r\n  var puTotal = Math.max(puLeftSlides.length, puRightSlides.length);\r\n  var dotsHtml = '';\r\n  for (var i = 0; i < puTotal; i++){\r\n      dotsHtml += '<button class=\"pu-dot' + (i===0 ? ' pu-active' : '') + '\" onclick=\"puGoTo(' + i + ')\"><\/button>';\r\n  }\r\n  puDotsWrap.innerHTML = dotsHtml;\r\n\r\n  window.puCurrent = 0;\r\n  var puTimer;\r\n\r\n  window.puGoTo = function(i){\r\n      puCurrent = (i + puTotal) % puTotal;\r\n      puTrackLeft.style.transform = 'translateX(-' + (puCurrent * 100) + '%)';\r\n      puTrackRight.style.transform = 'translateX(-' + (puCurrent * 100) + '%)';\r\n      document.querySelectorAll('#puDots .pu-dot').forEach(function(d, idx){\r\n          d.classList.toggle('pu-active', idx === puCurrent);\r\n      });\r\n      puRestart();\r\n  };\r\n\r\n  function puRestart(){\r\n      clearInterval(puTimer);\r\n      puTimer = setInterval(function(){ puGoTo(puCurrent + 1); }, 4000);\r\n  }\r\n\r\n  var puBanner = document.getElementById('puBanner');\r\n  puBanner.addEventListener('mouseenter', function(){ clearInterval(puTimer); });\r\n  puBanner.addEventListener('mouseleave', puRestart);\r\n\r\n  var puStartX = 0;\r\n  puBanner.addEventListener('touchstart', function(e){ puStartX = e.touches[0].clientX; }, {passive:true});\r\n  puBanner.addEventListener('touchend', function(e){\r\n      var dx = e.changedTouches[0].clientX - puStartX;\r\n      if (Math.abs(dx) > 40){ dx < 0 ? puGoTo(puCurrent+1) : puGoTo(puCurrent-1); }\r\n  });\r\n\r\n  puRestart();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\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 MAROON, TANPA efek naik\r\n     Mendukung multi-instance & fallback gambar\r\n     Warna: #831B1B (MAROON)\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<\/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; \/* Jarak samping antar item *\/\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    cursor: default;\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 MAROON #831B1B --- *\/\r\n.slick-center .slider-card {\r\n    background-color: #831B1B;\r\n    box-shadow: 0 8px 30px rgba(131, 27, 27, 0.35);\r\n}\r\n\r\n.slick-center .slider-card .card-content {\r\n    background-color: #831B1B;\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 #831B1B (MAROON) --- *\/\r\n.slider-card:hover {\r\n    background-color: #831B1B !important;\r\n    box-shadow: 0 8px 30px rgba(131, 27, 27, 0.35) !important;\r\n    transition: background-color 0.3s ease,\r\n                box-shadow 0.3s ease;\r\n}\r\n\r\n.slider-card:hover .card-content {\r\n    background-color: #831B1B !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 MAROON #831B1B --- *\/\r\n.horizontal-slider .slick-prev,\r\n.horizontal-slider .slick-next {\r\n    width: 48px;\r\n    height: 48px;\r\n    background: #831B1B !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(131, 27, 27, 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: #831B1B !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\/* --- Responsive --- *\/\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\/831B1B\/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: \"Swimming Class\",  \/\/ <-- Ganti judul di sini\r\n                description: \"Melatih keterampilan berenang, meningkatkan kesehatan fisik, serta membangun keberanian dan rasa percaya diri peserta didik.\", \/\/ <-- Ganti deskripsi di sini\r\n                image: \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Swimming.jpg\" \/\/ <-- GANTI URL GAMBAR DI SINI\r\n            },\r\n            {\r\n                title: \"Pojok Baca\",                 \/\/ <-- Ganti judul di sini\r\n                description: \"Menumbuhkan budaya literasi melalui lingkungan membaca yang nyaman dan inspiratif.\", \/\/ <-- Ganti deskripsi di sini\r\n                image: \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Pojok-Baca-2.jpg\" \/\/ <-- GANTI URL GAMBAR DI SINI\r\n            },\r\n            {\r\n                title: \"Playground\",                   \/\/ <-- Ganti judul di sini\r\n                description: \"Sarana bermain edukatif untuk mendukung perkembangan motorik dan sosial anak.\", \/\/ <-- Ganti deskripsi di sini\r\n                image: \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Play-Ground-2.jpg\" \/\/ <-- GANTI URL GAMBAR DI SINI\r\n            },\r\n            {\r\n                title: \"Ruang Kelas Ber AC\",               \/\/ <-- Ganti judul di sini\r\n                description: \"Ruang belajar nyaman ber-AC yang mendukung konsentrasi dan kenyamanan belajar.\", \/\/ <-- Ganti deskripsi di sini\r\n                image: \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/Kelas-AC_2-e1788097835656.jpg\" \/\/ <-- GANTI URL GAMBAR DI SINI\r\n            },\r\n            {\r\n                title: \"UKS\",               \/\/ <-- Ganti judul di sini\r\n                description: \"Fasilitas kesehatan sekolah yang mendukung pelayanan kesehatan dasar, edukasi hidup sehat, serta penanganan pertama bagi peserta didik yang membutuhkan perawatan ringan.\", \/\/ <-- Ganti deskripsi di sini\r\n                image: \"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/2026\/08\/UKS-2.jpg\" \/\/ <-- GANTI URL GAMBAR DI SINI\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 untuk setiap card ---\r\n        var itemsHtml = '';\r\n        sliderData.forEach(function (item) {\r\n            var desc = item.description.replace(\/\"\/g, '&quot;');\r\n            itemsHtml += '' +\r\n                '<div>' +\r\n                    '<div class=\"slider-card\">' +\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?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,          \/\/ jumlah slide terlihat (ganjil agar ada tengah)\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,          \/\/ AKTIFKAN CENTER MODE\r\n                centerPadding: '60px',     \/\/ ruang di kiri\/kanan slide tengah\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    }\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 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 decoding=\"async\" src=\"https:\/\/tkislamplatinum.sch.id\/wp-content\/uploads\/elementor\/thumbs\/Desain-tanpa-judul-9-scaled-rt15d3cjfc0svub0u4s9fn5mrb4pdf25mzfu7zri70.webp\" title=\"Desain-tanpa-judul-9\" alt=\"Desain-tanpa-judul-9\" loading=\"lazy\" \/>\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<h2 data-interaction-id=\"7f48fb3\" class=\"e-7f48fb3-9708643 e-heading-base\">Wujudkan Prestasi, Mulai di Sini!<\/h2>\n\t\t\t\t<div class=\"elementor-element elementor-element-f41ac7e elementor-align-center elementor-widget elementor-widget-button\" data-id=\"f41ac7e\" 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\" 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\">Klik di sini<\/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 MAROON PREMIUM (FIXED & POLISHED) v9\r\n     WARNA DOMINAN #831b1b + AKSEN #FFEA00 (kuning) + #FAA0A0 (pink pastel)\r\n\r\n     RINGKASAN STATUS SAAT INI (menggantikan catatan versi-versi lama):\r\n\r\n     \u2022 \"Read more\" bisa diklik (dicari lewat .phm-card__quote-block, bukan\r\n       .phm-card__text \u2014 tombolnya sibling, bukan anak dari elemen itu).\r\n       Kontennya tidak lagi tumpah keluar kartu (autoHeight & overflow:visible\r\n       sudah dihapus). Kartu lain TIDAK ikut memanjang saat satu kartu\r\n       di-expand (align-items: flex-start), tapi di kondisi awal (belum\r\n       diklik) tinggi semua kartu tetap SERAGAM lewat min-height bersama \u2014\r\n       lihat komentar di dekat .phm-card min-height.\r\n     \u2022 Slide LAIN tidak lagi buram\/pudar saat berpindah \u2014 kartu selalu solid.\r\n     \u2022 Slide otomatis akan BERHENTI selama ada kartu yang sedang \"Read more\",\r\n       dan baru lanjut lagi beberapa detik SETELAH kartu itu ditutup kembali\r\n       \u2014 lihat komentar di dekat AUTOPLAY_RESUME_DELAY.\r\n     \u2022 Transisi slide pakai easing custom + rewind:true (transisi mulus saat\r\n       kembali ke slide 1, tidak ada lompatan kasar).\r\n     \u2022 Panel latar dibuat POLOS sesuai permintaan \u2014 tanpa pola titik, tanpa\r\n       cahaya sudut, tanpa kilau bergerak. Radius-nya tetap melengkung\r\n       (2rem, mengecil otomatis di layar kecil) supaya menyatu dengan garis\r\n       lengkung di sudut.\r\n     \u2022 Hiasan sudut: lengkung SVG dua lapis (maroon + pink) dihitung dari\r\n       rumus lingkaran asli (bukan kira-kira) jadi mulus tanpa titik lancip,\r\n       dilengkapi efek \"menggambar\" (stroke draw-in) saat area judul\r\n       terlihat, jejak 3 titik kecil (comet-trail) menuju bintang di ujung\r\n       untuk kesan emblem\/lambang korporat yang detail, dan bintang kuning\r\n       yang berkedip pelan. Simetris penuh di 4 sisi lewat 1 SVG yang\r\n       dicerminkan via CSS transform (bukan 4 kode path terpisah).\r\n     \u2022 Judul, sub-judul, DAN kartu testimoni semuanya punya transisi masuk\r\n       & keluar dua arah saat di-scroll (memudar-naik saat terlihat,\r\n       memudar-turun saat menjauh). 4 titik kilau kecil melayang pelan di\r\n       sekitar judul.\r\n     \u2022 Palet warna: maroon dominan untuk teks\/garis\/border\/hover. Kuning\r\n       untuk elemen \"bintang\/kilau\". Pink untuk elemen \"lembut premium\"\r\n       (ring avatar, aksen kartu, nomor index, bayangan pagination).\r\n     \u2022 Semua animasi otomatis nonaktif untuk preferensi \"reduced motion\".\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__spark phm-testi__spark--1\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"phm-testi__spark phm-testi__spark--2\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"phm-testi__spark phm-testi__spark--3\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"phm-testi__spark phm-testi__spark--4\" aria-hidden=\"true\"><\/span>\r\n\r\n        <span class=\"phm-testi__eyebrow phm-testi__head-item\" style=\"transition-delay:0ms;\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"#FFEA00\" width=\"14\" height=\"14\"><path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\/><\/svg>\r\n            Apa Kata Mereka\r\n            <svg viewBox=\"0 0 24 24\" fill=\"#FFEA00\" width=\"14\" height=\"14\"><path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\/><\/svg>\r\n        <\/span>\r\n\r\n        <h2 class=\"phm-testi__title phm-testi__head-item\" style=\"transition-delay:120ms;\">Testimoni & Kepercayaan<\/h2>\r\n        <span class=\"phm-testi__title-accent phm-testi__head-item\" style=\"transition-delay:220ms;\" aria-hidden=\"true\"><\/span>\r\n        <p class=\"phm-testi__sub phm-testi__head-item\" style=\"transition-delay:320ms;\">Selayang pandang walimurid tentang TK Islam Platinum.<\/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 ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <div class=\"phm-card-stack\">\r\n                    <article class=\"phm-card\">\r\n                        <span class=\"phm-card__index\">01<\/span>\r\n\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-initials\">YT<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__stars\">\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__quote-block\">\r\n                            <span class=\"phm-card__quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                            <p class=\"phm-card__text\">\r\n                                <span class=\"phm-short\">TKIP is one of the best islamic school for our children. They can learn how to love Al Qur'an, social skill, life skill, having fun in english, and other positive activities...<\/span>\r\n                                <span class=\"phm-full\" hidden>TKIP is one of the best islamic school for our children. They can learn how to love Al Qur'an, social skill, life skill, having fun in english, and other positive activities. The environment is clean, tidy and enjoyable for children. It's recommended.<\/span>\r\n                            <\/p>\r\n                            <button type=\"button\" class=\"phm-card__toggle\" aria-expanded=\"false\">\r\n                                <span class=\"phm-card__toggle-label\">Read more<\/span>\r\n                                <span class=\"phm-card__toggle-arrow\">&rarr;<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Ibu Yulia Trisnawat<\/div>\r\n                            <div class=\"phm-card__role\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M6 10.5V16c0 1 2.5 2.5 6 2.5s6-1.5 6-2.5v-5.5\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                                Wali Murid TK Islam Platinum\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 2 ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <div class=\"phm-card-stack\">\r\n                    <article class=\"phm-card\">\r\n                        <span class=\"phm-card__index\">02<\/span>\r\n\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-initials\">FB<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__stars\">\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__quote-block\">\r\n                            <span class=\"phm-card__quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                            <p class=\"phm-card__text\">\r\n                                <span class=\"phm-short\">Alhamdulillah, I like this school because the learning is varied and fun, my child's...<\/span>\r\n                                <span class=\"phm-full\" hidden>Alhamdulillah, I like this school because the learning is varied and fun, my child's progress is always monitored, the female teachers are friendly and patient, and the school environment is comfortable \ud83d\ude0d \u2026<\/span>\r\n                            <\/p>\r\n                            <button type=\"button\" class=\"phm-card__toggle\" aria-expanded=\"false\">\r\n                                <span class=\"phm-card__toggle-label\">Read more<\/span>\r\n                                <span class=\"phm-card__toggle-arrow\">&rarr;<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Bapak Fahmi Basya<\/div>\r\n                            <div class=\"phm-card__role\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M6 10.5V16c0 1 2.5 2.5 6 2.5s6-1.5 6-2.5v-5.5\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                                Wali Murid TK Islam Platinum\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 3 ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <div class=\"phm-card-stack\">\r\n                    <article class=\"phm-card\">\r\n                        <span class=\"phm-card__index\">03<\/span>\r\n\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-initials\">AK<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__stars\">\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__quote-block\">\r\n                            <span class=\"phm-card__quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                            <p class=\"phm-card__text\">\r\n                                <span class=\"phm-short\">I highly recommend this school, Masha Allah.\r\nThe teachers are very kind, patient, and loving...<\/span>\r\n                                <span class=\"phm-full\" hidden>I highly recommend this school, Masha Allah.\r\nThe teachers are very kind, patient, and loving. The location is strategic, with ample parking. Every progress of your child is always communicated well. The school can be a partner for parents in raising their children to excel academically and religiously.<\/span>\r\n                            <\/p>\r\n                            <button type=\"button\" class=\"phm-card__toggle\" aria-expanded=\"false\">\r\n                                <span class=\"phm-card__toggle-label\">Read more<\/span>\r\n                                <span class=\"phm-card__toggle-arrow\">&rarr;<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Ibu Andhara Kirana<\/div>\r\n                            <div class=\"phm-card__role\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M6 10.5V16c0 1 2.5 2.5 6 2.5s6-1.5 6-2.5v-5.5\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                                Wali Murid TK Islam Platinum\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 4 ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <div class=\"phm-card-stack\">\r\n                    <article class=\"phm-card\">\r\n                        <span class=\"phm-card__index\">04<\/span>\r\n\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-initials\">AM<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__stars\">\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__quote-block\">\r\n                            <span class=\"phm-card__quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                            <p class=\"phm-card__text\">\r\n                                <span class=\"phm-short\">A highly recommended Islamic school with a homey environment, competent, friendly, and child-loving teachers. Every day, we follow up on your child's progress, whether through documentation or notes in the...<\/span>\r\n                                <span class=\"phm-full\" hidden>A highly recommended Islamic school with a homey environment, competent, friendly, and child-loving teachers. Every day, we follow up on your child's progress, whether through documentation or notes in the liaison book. Classrooms are air-conditioned, there is a swimming pool, clean, and with a very large parking area. The school is not only oriented towards science but also religion, manners, leadership, and life skills. Highly recommended. Come join TKIP, there are trial classes every Saturday.<\/span>\r\n                            <\/p>\r\n                            <button type=\"button\" class=\"phm-card__toggle\" aria-expanded=\"false\">\r\n                                <span class=\"phm-card__toggle-label\">Read more<\/span>\r\n                                <span class=\"phm-card__toggle-arrow\">&rarr;<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Ibu Andhara Mahestri<\/div>\r\n                            <div class=\"phm-card__role\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M6 10.5V16c0 1 2.5 2.5 6 2.5s6-1.5 6-2.5v-5.5\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                                Wali Murid TK Islam Platinum\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 5 ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <div class=\"phm-card-stack\">\r\n                    <article class=\"phm-card\">\r\n                        <span class=\"phm-card__index\">05<\/span>\r\n\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-initials\">TP<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__stars\">\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__quote-block\">\r\n                            <span class=\"phm-card__quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                            <p class=\"phm-card__text\">\r\n                                <span class=\"phm-short\">The right choice of school for your child, prioritizing Islamic education plus introduction to English...<\/span>\r\n                                <span class=\"phm-full\" hidden>The right choice of school for your child, prioritizing Islamic education plus introduction to English... according to parents' expectations... thank God your child is developing well here \u263a\ufe0f<\/span>\r\n                            <\/p>\r\n                            <button type=\"button\" class=\"phm-card__toggle\" aria-expanded=\"false\">\r\n                                <span class=\"phm-card__toggle-label\">Read more<\/span>\r\n                                <span class=\"phm-card__toggle-arrow\">&rarr;<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Ibu Tesya Paramita<\/div>\r\n                            <div class=\"phm-card__role\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M6 10.5V16c0 1 2.5 2.5 6 2.5s6-1.5 6-2.5v-5.5\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                                Wali Murid TK Islam Platinum\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 6 ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <div class=\"phm-card-stack\">\r\n                    <article class=\"phm-card\">\r\n                        <span class=\"phm-card__index\">06<\/span>\r\n\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-initials\">CS<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__stars\">\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__quote-block\">\r\n                            <span class=\"phm-card__quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                            <p class=\"phm-card__text\">\r\n                                <span class=\"phm-short\">One of the best Islamic schools in Mojokerto with an Islamic school environment, supporting children's development,...<\/span>\r\n                                <span class=\"phm-full\" hidden>One of the best Islamic schools in Mojokerto with an Islamic school environment, supporting children's development, friendly and patient teachers, varied and fun learning activities and comfortable and complete school facilities so that children can learn happily, comfortably and explore their talents.<\/span>\r\n                            <\/p>\r\n                            <button type=\"button\" class=\"phm-card__toggle\" aria-expanded=\"false\">\r\n                                <span class=\"phm-card__toggle-label\">Read more<\/span>\r\n                                <span class=\"phm-card__toggle-arrow\">&rarr;<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Bapak Cakko Saiko<\/div>\r\n                            <div class=\"phm-card__role\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M6 10.5V16c0 1 2.5 2.5 6 2.5s6-1.5 6-2.5v-5.5\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                                Wali Murid TK Islam Platinum\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 7 ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <div class=\"phm-card-stack\">\r\n                    <article class=\"phm-card\">\r\n                        <span class=\"phm-card__index\">07<\/span>\r\n\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-initials\">MZ<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__stars\">\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__quote-block\">\r\n                            <span class=\"phm-card__quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                            <p class=\"phm-card__text\">\r\n                                <span class=\"phm-short\">TKIP is really cool, guys, producing a generation of Al-Qur'an, going international,...<\/span>\r\n                                <span class=\"phm-full\" hidden>TKIP is really cool, guys, producing a generation of Al-Qur'an, going international, TKIP is the choice \ud83d\ude0d, come on!! Hurry up and register at TKIP \ud83d\udef5\ud83d\udca8 \u2026<\/span>\r\n                            <\/p>\r\n                            <button type=\"button\" class=\"phm-card__toggle\" aria-expanded=\"false\">\r\n                                <span class=\"phm-card__toggle-label\">Read more<\/span>\r\n                                <span class=\"phm-card__toggle-arrow\">&rarr;<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Bapak Muhammad Zidan<\/div>\r\n                            <div class=\"phm-card__role\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M6 10.5V16c0 1 2.5 2.5 6 2.5s6-1.5 6-2.5v-5.5\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                                Wali Murid TK Islam Platinum\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 8 ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <div class=\"phm-card-stack\">\r\n                    <article class=\"phm-card\">\r\n                        <span class=\"phm-card__index\">08<\/span>\r\n\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-initials\">SS<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__stars\">\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__quote-block\">\r\n                            <span class=\"phm-card__quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                            <p class=\"phm-card__text\">\r\n                                <span class=\"phm-short\">Even though it is relatively new in Mojokerto, Platinum Kindergarten has made a...<\/span>\r\n                                <span class=\"phm-full\" hidden>Even though it is relatively new in Mojokerto, Platinum Kindergarten has made a significant contribution to its students so that later when the children are ready to compete with their friends, they will become intelligent children.<\/span>\r\n                            <\/p>\r\n                            <button type=\"button\" class=\"phm-card__toggle\" aria-expanded=\"false\">\r\n                                <span class=\"phm-card__toggle-label\">Read more<\/span>\r\n                                <span class=\"phm-card__toggle-arrow\">&rarr;<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Ibu Suisman Salmeena<\/div>\r\n                            <div class=\"phm-card__role\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M6 10.5V16c0 1 2.5 2.5 6 2.5s6-1.5 6-2.5v-5.5\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                                Wali Murid TK Islam Platinum\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- ===== KARTU 9 ===== -->\r\n                <div class=\"swiper-slide\">\r\n                    <div class=\"phm-card-stack\">\r\n                    <article class=\"phm-card\">\r\n                        <span class=\"phm-card__index\">09<\/span>\r\n\r\n                        <div class=\"phm-card__avatar-wrap\">\r\n                            <div class=\"phm-initials\">SM<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__stars\">\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                            <svg viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/><\/svg>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__quote-block\">\r\n                            <span class=\"phm-card__quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                            <p class=\"phm-card__text\">\r\n                                <span class=\"phm-short\">Thank God, your child has developed further during his time at TKIP and...<\/span>\r\n                                <span class=\"phm-full\" hidden>Thank God, your child has developed further during his time at TKIP and has become more independent, and the female teacher is also patient.<\/span>\r\n                            <\/p>\r\n                            <button type=\"button\" class=\"phm-card__toggle\" aria-expanded=\"false\">\r\n                                <span class=\"phm-card__toggle-label\">Read more<\/span>\r\n                                <span class=\"phm-card__toggle-arrow\">&rarr;<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"phm-card__footer\">\r\n                            <div class=\"phm-card__name\">Ibu Siti Marhamah<\/div>\r\n                            <div class=\"phm-card__role\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M6 10.5V16c0 1 2.5 2.5 6 2.5s6-1.5 6-2.5v-5.5\" stroke=\"#831b1b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                                Wali Murid TK Islam Platinum\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Navigasi Panah -->\r\n        <div class=\"swiper-button-prev phm-testi__nav phm-nav-prev\"><\/div>\r\n        <div class=\"swiper-button-next phm-testi__nav phm-nav-next\"><\/div>\r\n\r\n        <!-- Paginasi -->\r\n        <div class=\"swiper-pagination phm-testi__dots\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== VARIABLES & BASE ===== *\/\r\n.phm-testi {\r\n    --phm-maroon: #831b1b;\r\n    --phm-maroon-dark: #5e1313;\r\n    --phm-maroon-hover: #a22323;\r\n    --phm-maroon-soft: #fbeaea;\r\n    --phm-yellow: #FFEA00;\r\n    --phm-pink: #FAA0A0;\r\n    --phm-pink-soft: rgba(250, 160, 160, 0.45);\r\n    --phm-ink: #2d3748;\r\n    --phm-muted: #718096;\r\n    --phm-shadow: 0 10px 30px rgba(131, 27, 27, 0.07);\r\n    --phm-shadow-hover: 0 26px 52px rgba(131, 27, 27, 0.20);\r\n\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 80px 20px 100px;\r\n    font-family: 'Inter', 'Poppins', sans-serif;\r\n    position: relative;\r\n    overflow: hidden;\r\n    background: transparent;\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\/* ===== PANEL LATAR \u2014 dibuat POLOS & elegan sesuai permintaan (tanpa pola\r\n   titik, tanpa cahaya sudut, tanpa kilau bergerak \u2014 itu semua sudah\r\n   dihapus). Radius-nya tetap melengkung supaya menyatu dengan garis\r\n   lengkung di sudut, dan ukurannya relatif (rem) jadi aman di layar kecil. ===== *\/\r\n.phm-testi::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    border-radius: 2rem;\r\n    pointer-events: none;\r\n    background: linear-gradient(160deg, #ffffff 0%, #faf7f5 100%);\r\n    box-shadow: 0 24px 60px -22px rgba(131, 27, 27, 0.12);\r\n}\r\n\r\n\/* --- Sudut dekoratif: lengkung premium (bukan garis siku kaku), 4 sisi\r\n   simetris, dengan jejak titik kecil (comet-trail) menuju bintang di ujung\r\n   \u2014 supaya terasa seperti emblem\/lambang korporat yang detail, bukan cuma\r\n   dua garis polos. --- *\/\r\n.phm-testi__corner {\r\n    position: absolute;\r\n    width: 130px;\r\n    height: 130px;\r\n    z-index: 0;\r\n    pointer-events: none;\r\n    opacity: 0.85;\r\n}\r\n.phm-testi__corner--tl { top: 14px; left: 14px; }\r\n.phm-testi__corner--tr { top: 14px; right: 14px; }\r\n.phm-testi__corner--bl { bottom: 14px; left: 14px; }\r\n.phm-testi__corner--br { bottom: 14px; right: 14px; }\r\n\r\n\/* satu bentuk SVG dipakai ulang untuk ke-4 sudut, tinggal dicerminkan lewat\r\n   transform \u2014 jadi tidak perlu 4 path berbeda yang berisiko bentrok\/salah *\/\r\n.phm-testi__corner-svg {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: visible;\r\n}\r\n.phm-testi__corner--tr .phm-testi__corner-svg { transform: scaleX(-1); }\r\n.phm-testi__corner--bl .phm-testi__corner-svg { transform: scaleY(-1); }\r\n.phm-testi__corner--br .phm-testi__corner-svg { transform: scale(-1, -1); }\r\n\r\n\/* garis dibuat dari rumus lengkung lingkaran asli (bukan kira-kira), jadi\r\n   dijamin melengkung mulus tanpa titik lancip di mana pun *\/\r\n.phm-testi__corner-arc {\r\n    fill: none;\r\n    stroke-dasharray: 210;\r\n    stroke-dashoffset: 210;\r\n    transition: stroke-dashoffset 1.5s cubic-bezier(.22,.9,.3,1);\r\n}\r\n.phm-testi__corner-arc.is-in {\r\n    stroke-dashoffset: 0;\r\n}\r\n.phm-testi__corner-arc--main {\r\n    stroke: var(--phm-maroon);\r\n    stroke-width: 2.4;\r\n    stroke-linecap: round;\r\n    opacity: 0.55;\r\n}\r\n.phm-testi__corner-arc--accent {\r\n    stroke: var(--phm-pink);\r\n    stroke-width: 1.6;\r\n    stroke-linecap: round;\r\n    opacity: 0.85;\r\n    transition-delay: 0.22s;\r\n}\r\n.phm-testi__corner-arc--accent.is-in {\r\n    animation: phmArcBreathe 3.6s ease-in-out 1.7s infinite;\r\n}\r\n@keyframes phmArcBreathe {\r\n    0%, 100% { opacity: 0.45; }\r\n    50% { opacity: 0.95; }\r\n}\r\n\r\n\/* jejak titik kecil mengarah ke bintang \u2014 muncul menyusul setelah garis\r\n   selesai \"digambar\", memberi kesan emblem yang detail & hidup *\/\r\n.phm-testi__corner-dot {\r\n    fill: var(--phm-yellow);\r\n    opacity: 0;\r\n    transform-box: fill-box;\r\n    transform-origin: center;\r\n    transform: scale(0.3);\r\n    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.34,1.56,.64,1);\r\n}\r\n.phm-testi__corner-arc--accent.is-in ~ .phm-testi__corner-dot {\r\n    opacity: 0.9;\r\n    transform: scale(1);\r\n}\r\n.phm-testi__corner-dot:nth-of-type(1) { transition-delay: 0.95s; }\r\n.phm-testi__corner-dot:nth-of-type(2) { transition-delay: 1.1s; }\r\n.phm-testi__corner-dot:nth-of-type(3) { transition-delay: 1.25s; }\r\n\r\n.phm-testi__corner-star {\r\n    position: absolute;\r\n    width: 15px;\r\n    height: 15px;\r\n    filter: drop-shadow(0 0 4px rgba(255, 234, 0, 0.65));\r\n    animation: phmStarTwinkle 2.8s ease-in-out infinite;\r\n}\r\n.phm-testi__corner--tl .phm-testi__corner-star { top: -7px; left: -7px; }\r\n.phm-testi__corner--tr .phm-testi__corner-star { top: -7px; right: -7px; animation-delay: 0.5s; }\r\n.phm-testi__corner--bl .phm-testi__corner-star { bottom: -7px; left: -7px; animation-delay: 1s; }\r\n.phm-testi__corner--br .phm-testi__corner-star { bottom: -7px; right: -7px; animation-delay: 1.5s; }\r\n\r\n@keyframes phmStarTwinkle {\r\n    0%, 100% { opacity: 0.55; transform: scale(0.85) rotate(0deg); }\r\n    50% { opacity: 1; transform: scale(1.15) rotate(10deg); }\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n.phm-testi__head {\r\n    text-align: center;\r\n    max-width: 700px;\r\n    margin: 0 auto 56px;\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n.phm-testi__eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: var(--phm-maroon);\r\n}\r\n.phm-testi__eyebrow::before,\r\n.phm-testi__eyebrow::after {\r\n    content: \"\";\r\n    width: 30px;\r\n    height: 1px;\r\n    background: var(--phm-maroon);\r\n}\r\n.phm-testi__title {\r\n    margin: 16px 0 12px;\r\n    font-size: clamp(28px, 4vw, 38px);\r\n    font-weight: 800;\r\n    color: var(--phm-maroon);\r\n    letter-spacing: -0.5px;\r\n    line-height: 1.2;\r\n    transition: color 0.3s ease;\r\n    cursor: default;\r\n}\r\n.phm-testi__title:hover {\r\n    color: var(--phm-maroon-hover);\r\n}\r\n.phm-testi__title-accent {\r\n    display: block;\r\n    width: 64px;\r\n    height: 4px;\r\n    margin: 0 auto 16px;\r\n    border-radius: 4px;\r\n    background: linear-gradient(90deg, var(--phm-maroon-dark), var(--phm-pink), var(--phm-maroon-dark));\r\n    background-size: 200% auto;\r\n    animation: phmAccentShimmer 3.5s linear infinite;\r\n    position: relative;\r\n}\r\n.phm-testi__title-accent::before,\r\n.phm-testi__title-accent::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 50%;\r\n    width: 5px;\r\n    height: 5px;\r\n    border-radius: 50%;\r\n    background: var(--phm-yellow);\r\n    box-shadow: 0 0 6px rgba(255, 234, 0, 0.7);\r\n    transform: translateY(-50%);\r\n}\r\n.phm-testi__title-accent::before { left: -14px; }\r\n.phm-testi__title-accent::after { right: -14px; }\r\n\r\n@keyframes phmAccentShimmer {\r\n    0% { background-position: 0% center; }\r\n    100% { background-position: 200% center; }\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\/* --- Transisi masuk & keluar untuk judul\/sub-judul: muncul bertahap dari\r\n       bawah saat area judul masuk layar, memudar turun lagi saat keluar --- *\/\r\n.phm-testi__head-item {\r\n    opacity: 0;\r\n    transform: translateY(22px);\r\n    transition: opacity 0.7s cubic-bezier(.25,1,.5,1), transform 0.7s cubic-bezier(.25,1,.5,1);\r\n}\r\n.phm-testi__head-item.is-in {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* --- Kilau (spark) kecil melayang pelan di sekitar judul \u2014 dekorasi hidup\r\n       tapi tetap ringan, tidak berlebihan --- *\/\r\n.phm-testi__spark {\r\n    position: absolute;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n.phm-testi__spark--1 {\r\n    top: -4px;\r\n    left: 6%;\r\n    background: var(--phm-yellow);\r\n    box-shadow: 0 0 8px rgba(255, 234, 0, 0.7);\r\n    animation: phmSparkFloat 4.5s ease-in-out infinite;\r\n}\r\n.phm-testi__spark--2 {\r\n    top: 26px;\r\n    right: 8%;\r\n    width: 5px;\r\n    height: 5px;\r\n    background: var(--phm-pink);\r\n    box-shadow: 0 0 8px rgba(250, 160, 160, 0.75);\r\n    animation: phmSparkFloat 5.5s ease-in-out infinite 0.9s;\r\n}\r\n.phm-testi__spark--3 {\r\n    bottom: 10px;\r\n    left: 16%;\r\n    width: 4px;\r\n    height: 4px;\r\n    background: var(--phm-pink);\r\n    box-shadow: 0 0 6px rgba(250, 160, 160, 0.6);\r\n    animation: phmSparkFloat 4s ease-in-out infinite 1.7s;\r\n}\r\n.phm-testi__spark--4 {\r\n    bottom: 0;\r\n    right: 18%;\r\n    background: var(--phm-yellow);\r\n    box-shadow: 0 0 8px rgba(255, 234, 0, 0.6);\r\n    animation: phmSparkFloat 5s ease-in-out infinite 2.3s;\r\n}\r\n@keyframes phmSparkFloat {\r\n    0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }\r\n    50% { transform: translateY(-9px) scale(1.35); opacity: 1; }\r\n}\r\n\r\n\/* ===== SLIDER WRAPPER ===== *\/\r\n.phm-testi__slider-wrap {\r\n    position: relative;\r\n    z-index: 2;\r\n    padding: 20px 50px 60px;\r\n}\r\n.phm-testi__swiper {\r\n    padding: 40px 10px 40px;\r\n}\r\n.phm-testi__swiper .swiper-wrapper {\r\n    align-items: flex-start;\r\n    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n.phm-testi__swiper .swiper-slide {\r\n    height: auto;\r\n    display: flex;\r\n}\r\n\r\n\/* ===== LAYERED CARD + SCROLL REVEAL ===== *\/\r\n.phm-card-stack {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    opacity: 0;\r\n    transform: translateY(30px) scale(0.97);\r\n    transition: opacity 0.75s cubic-bezier(.25,1,.5,1), transform 0.75s cubic-bezier(.25,1,.5,1);\r\n}\r\n.phm-card-stack.is-visible {\r\n    opacity: 1;\r\n    transform: translateY(0) scale(1);\r\n}\r\n.phm-card-stack::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 10px -8px -10px 8px;\r\n    background: rgba(131, 27, 27, 0.05);\r\n    border: 1px solid rgba(131, 27, 27, 0.08);\r\n    border-radius: 18px;\r\n    z-index: 0;\r\n    transition: transform 0.45s cubic-bezier(.25,1,.5,1);\r\n}\r\n.phm-card-stack:hover::before {\r\n    transform: translate(3px, -3px);\r\n}\r\n\r\n\/* ===== KARTU (CARD) ===== *\/\r\n.phm-card {\r\n    position: relative;\r\n    z-index: 1;\r\n    background: linear-gradient(180deg, #ffffff 0%, #fffdfd 100%);\r\n    border-radius: 18px;\r\n    padding: 30px 28px 30px 32px;\r\n    border: 1px solid rgba(131, 27, 27, 0.12);\r\n    box-shadow: var(--phm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);\r\n    transition: transform 0.45s cubic-bezier(.25,1,.5,1), box-shadow 0.45s ease, border-color 0.45s 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::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 14px;\r\n    bottom: 14px;\r\n    left: 0;\r\n    width: 4px;\r\n    border-radius: 0 4px 4px 0;\r\n    background: linear-gradient(180deg, var(--phm-maroon-dark), var(--phm-maroon));\r\n    opacity: 0.85;\r\n    transition: opacity 0.4s ease;\r\n}\r\n\r\n\/* aksen pink kecil di pojok kiri-bawah tiap kartu, menyeimbangkan nomor index di kanan-atas *\/\r\n.phm-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    left: 16px;\r\n    bottom: 16px;\r\n    width: 7px;\r\n    height: 7px;\r\n    background: var(--phm-pink);\r\n    opacity: 0.6;\r\n    transform: rotate(45deg);\r\n    border-radius: 2px;\r\n    transition: opacity 0.4s ease, transform 0.4s ease;\r\n}\r\n.phm-card:hover::after {\r\n    opacity: 1;\r\n    transform: rotate(45deg) scale(1.3);\r\n}\r\n\r\n.phm-card:hover {\r\n    transform: translateY(-8px);\r\n    box-shadow: var(--phm-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.9);\r\n    border-color: rgba(131, 27, 27, 0.28);\r\n}\r\n.phm-card:hover::before { opacity: 1; }\r\n\r\n.phm-card__index {\r\n    position: absolute;\r\n    top: 16px;\r\n    right: 18px;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n    color: rgba(131, 27, 27, 0.35);\r\n    font-variant-numeric: tabular-nums;\r\n}\r\n\r\n\/* ===== AVATAR (ring dua warna: putih + pink pastel tipis) ===== *\/\r\n.phm-card__avatar-wrap {\r\n    position: relative;\r\n    width: 56px;\r\n    height: 56px;\r\n    margin-bottom: 16px;\r\n    border-radius: 50%;\r\n    background: linear-gradient(135deg, var(--phm-maroon), var(--phm-maroon-dark));\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: 0 6px 18px rgba(131, 27, 27, 0.25), 0 0 0 4px #fff, 0 0 0 5.5px var(--phm-pink-soft);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n}\r\n.phm-card:hover .phm-card__avatar-wrap {\r\n    transform: scale(1.08);\r\n    box-shadow: 0 10px 26px rgba(131, 27, 27, 0.35), 0 0 0 4px #fff, 0 0 0 7px rgba(250, 160, 160, 0.65);\r\n}\r\n.phm-card__avatar-wrap .phm-initials {\r\n    font-weight: 800;\r\n    font-size: 18px;\r\n    color: #fff;\r\n    letter-spacing: 1px;\r\n}\r\n\r\n\/* ===== BINTANG (RATING) \u2014 kuning, khas warna rating ===== *\/\r\n.phm-card__stars {\r\n    display: flex;\r\n    gap: 4px;\r\n    margin-bottom: 14px;\r\n}\r\n.phm-card__stars svg {\r\n    width: 16px;\r\n    height: 16px;\r\n    fill: var(--phm-yellow);\r\n    stroke: rgba(131, 27, 27, 0.25);\r\n    stroke-width: 0.5;\r\n    filter: drop-shadow(0 1px 2px rgba(255, 234, 0, 0.35));\r\n}\r\n\r\n\/* ===== FRAMED QUOTE BLOCK \u2014 gaya editorial premium, kutip pembuka & penutup ===== *\/\r\n.phm-card__quote-block {\r\n    position: relative;\r\n    background: linear-gradient(180deg, var(--phm-maroon-soft) 0%, #fff 100%);\r\n    border: 1px solid rgba(131, 27, 27, 0.10);\r\n    border-radius: 12px;\r\n    padding: 18px 18px 16px;\r\n    margin-bottom: 20px;\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    transition: border-color 0.4s ease;\r\n}\r\n.phm-card:hover .phm-card__quote-block {\r\n    border-color: rgba(131, 27, 27, 0.22);\r\n}\r\n.phm-card__quote-mark {\r\n    display: block;\r\n    font-family: Georgia, 'Times New Roman', serif;\r\n    font-size: 52px;\r\n    line-height: 1;\r\n    height: 30px;\r\n    color: var(--phm-maroon);\r\n    opacity: 0.85;\r\n    margin-bottom: 2px;\r\n    font-weight: 700;\r\n    user-select: none;\r\n}\r\n.phm-card__text {\r\n    font-size: 14.5px;\r\n    line-height: 1.75;\r\n    color: var(--phm-ink);\r\n    margin: 0;\r\n    flex-grow: 1;\r\n}\r\n\/* tanda kutip penutup, pasangan dari tanda kutip pembuka di atas \u2014 otomatis mengikuti teks yang sedang tampil *\/\r\n.phm-card__text::after {\r\n    content: '\\201D';\r\n    font-family: Georgia, 'Times New Roman', serif;\r\n    font-weight: 700;\r\n    font-size: 1.25em;\r\n    color: var(--phm-maroon);\r\n    opacity: 0.85;\r\n    margin-left: 3px;\r\n    vertical-align: -0.05em;\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-short, .phm-full {\r\n    animation: phmTextFade 0.4s ease;\r\n}\r\n@keyframes phmTextFade {\r\n    from { opacity: 0; transform: translateY(4px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.phm-card__toggle {\r\n    background: none;\r\n    border: none;\r\n    padding: 4px 0 0;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    color: var(--phm-maroon);\r\n    cursor: pointer;\r\n    margin-top: 8px;\r\n    transition: color 0.2s ease;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n    position: relative;\r\n    z-index: 5;\r\n    align-self: flex-start;\r\n}\r\n.phm-card__toggle-arrow {\r\n    transition: transform 0.25s ease;\r\n    display: inline-block;\r\n}\r\n.phm-card__toggle:hover {\r\n    color: var(--phm-maroon-hover);\r\n}\r\n.phm-card__toggle:hover .phm-card__toggle-arrow {\r\n    transform: translateX(3px);\r\n}\r\n\r\n\/* ===== FOOTER ===== *\/\r\n.phm-card__footer {\r\n    position: relative;\r\n    border-top: 1px solid rgba(131, 27, 27, 0.15);\r\n    padding-top: 16px;\r\n    margin-top: auto;\r\n}\r\n.phm-card__name {\r\n    font-size: 15px;\r\n    font-weight: 800;\r\n    color: var(--phm-ink);\r\n    line-height: 1.35;\r\n    margin-bottom: 5px;\r\n}\r\n.phm-card__role {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 6px;\r\n    font-size: 12.5px;\r\n    color: var(--phm-muted);\r\n    line-height: 1.5;\r\n}\r\n.phm-card__role svg {\r\n    width: 14px;\r\n    height: 14px;\r\n    flex-shrink: 0;\r\n    margin-top: 1px;\r\n    opacity: 0.75;\r\n}\r\n\r\n\/* ===== NAVIGASI PANAH ===== *\/\r\n.phm-testi__nav {\r\n    width: 46px;\r\n    height: 46px;\r\n    background: #fff;\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(131, 27, 27, 0.35);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    z-index: 10;\r\n    box-shadow: 0 6px 16px rgba(131, 27, 27, 0.08);\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n}\r\n.phm-testi__nav::after {\r\n    font-size: 16px;\r\n    font-weight: 900;\r\n    color: var(--phm-maroon);\r\n    transition: color 0.3s ease;\r\n}\r\n.phm-testi__nav:hover {\r\n    background: var(--phm-maroon);\r\n    border-color: var(--phm-maroon);\r\n    box-shadow: 0 10px 24px rgba(131, 27, 27, 0.3);\r\n    transform: translateY(-50%) scale(1.06);\r\n}\r\n.phm-testi__nav:hover::after {\r\n    color: #fff;\r\n}\r\n.swiper-button-prev.phm-nav-prev { left: 0; }\r\n.swiper-button-next.phm-nav-next { right: 0; }\r\n\r\n\/* ===== DOTS PAGINATION ===== *\/\r\n.phm-testi__dots {\r\n    position: absolute;\r\n    bottom: 0 !important;\r\n    left: 0;\r\n    right: 0;\r\n    text-align: center;\r\n}\r\n.phm-testi__dots .swiper-pagination-bullet {\r\n    width: 8px;\r\n    height: 8px;\r\n    background: #e6d3d3;\r\n    opacity: 1;\r\n    margin: 0 5px !important;\r\n    transition: all 0.3s ease;\r\n}\r\n.phm-testi__dots .swiper-pagination-bullet-active {\r\n    background: linear-gradient(90deg, var(--phm-maroon-dark), var(--phm-maroon));\r\n    width: 26px;\r\n    border-radius: 6px;\r\n    box-shadow: 0 3px 10px rgba(250, 160, 160, 0.55);\r\n}\r\n\r\n\/* Tinggi awal (belum di-\"Read more\") DISAMAKAN di semua ukuran layar \u2014\r\n   HP, tablet, maupun desktop \u2014 supaya tidak ada kartu yang kelihatan\r\n   kecil-besar sebelah-sebelahan sejak awal. Karena align-items sudah\r\n   flex-start (bukan stretch), min-height ini cuma jadi \"lantai\" bersama:\r\n   begitu satu kartu di-\"Read more\", HANYA kartu itu yang tumbuh lebih\r\n   tinggi dari lantai ini \u2014 kartu lain tetap diam di lantai yang sama. *\/\r\n.phm-card { min-height: 460px; }\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: 10px; padding-right: 10px; }\r\n}\r\n@media (max-width: 768px) {\r\n    .phm-testi { padding: 60px 16px 70px; }\r\n    .phm-testi::before { border-radius: 1.5rem; }\r\n    .phm-testi__head { margin-bottom: 36px; }\r\n    .phm-card { padding: 26px 20px 24px 26px; }\r\n    .phm-card__avatar-wrap { width: 50px; height: 50px; }\r\n    .phm-card__avatar-wrap .phm-initials { font-size: 15px; }\r\n    .phm-card-stack::before { inset: 8px -6px -8px 6px; }\r\n    .phm-testi__corner { width: 100px; height: 100px; }\r\n}\r\n@media (max-width: 420px) {\r\n    .phm-testi::before { border-radius: 1rem; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .phm-card, .phm-card__avatar-wrap, .phm-testi__nav, .phm-card-stack, .phm-card-stack::before,\r\n    .phm-testi__swiper .swiper-slide, .phm-short, .phm-full, .phm-testi__title-accent,\r\n    .phm-testi__spark, .phm-testi__corner-star, .phm-testi__corner-arc, .phm-testi__head-item,\r\n    .phm-testi::before {\r\n        transition: none;\r\n        animation: none;\r\n    }\r\n    .phm-card-stack { opacity: 1; transform: none; }\r\n    .phm-testi__head-item { opacity: 1; transform: none; }\r\n    .phm-testi__corner-arc { stroke-dashoffset: 0; }\r\n    .phm-testi__spark { display: 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 prefersReducedMotion = window.matchMedia &&\r\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    function initPhmTesti() {\r\n        var section = document.getElementById('phmTesti');\r\n        if (!section) return;\r\n\r\n        \/* --- sisipkan hiasan sudut (4 sisi simetris + ornamen bintang), sekali\r\n               saja. Pola titik & cahaya latar sudah DIHAPUS sesuai permintaan\r\n               supaya panel latar tampil polos\/elegan. --- *\/\r\n        var starIconSVG = '<svg class=\"phm-testi__corner-star\" viewBox=\"0 0 24 24\" fill=\"#FFEA00\" aria-hidden=\"true\"><path d=\"M12 2L13.6 9.4L21 11L13.6 12.6L12 20L10.4 12.6L3 11L10.4 9.4Z\"\/><\/svg>';\r\n        \/* d dihitung dari rumus lengkung lingkaran asli (bukan kira-kira),\r\n           supaya pasti melengkung mulus dan tidak ada bagian yang lancip.\r\n           3 titik kecil (comet-trail) ditambahkan menuju bintang di ujung,\r\n           supaya terasa seperti lambang\/emblem korporat yang detail. *\/\r\n        var cornerArcSVG =\r\n            '<svg class=\"phm-testi__corner-svg\" viewBox=\"0 0 130 130\" fill=\"none\" aria-hidden=\"true\">' +\r\n                '<path class=\"phm-testi__corner-arc phm-testi__corner-arc--main\" d=\"M2 78 C2 36 36 2 78 2\"\/>' +\r\n                '<path class=\"phm-testi__corner-arc phm-testi__corner-arc--accent\" d=\"M18 80 C18 46 46 18 80 18\"\/>' +\r\n                '<circle class=\"phm-testi__corner-dot\" cx=\"48\" cy=\"14\" r=\"2.2\"\/>' +\r\n                '<circle class=\"phm-testi__corner-dot\" cx=\"60\" cy=\"7\" r=\"1.6\"\/>' +\r\n                '<circle class=\"phm-testi__corner-dot\" cx=\"70\" cy=\"3\" r=\"1\"\/>' +\r\n            '<\/svg>';\r\n        ['tl', 'tr', 'bl', 'br'].forEach(function (pos) {\r\n            if (section.querySelector('.phm-testi__corner--' + pos)) return;\r\n            var corner = document.createElement('div');\r\n            corner.className = 'phm-testi__corner phm-testi__corner--' + pos;\r\n            corner.innerHTML = cornerArcSVG + starIconSVG;\r\n            section.insertBefore(corner, section.firstChild);\r\n        });\r\n\r\n        \/* --- tombol \"Read more\" \/ \"Read less\" ---\r\n           DIPERBAIKI: sebelumnya btn.closest('.phm-card__text') selalu null karena\r\n           tombolnya adalah SAUDARA (sibling) dari <p class=\"phm-card__text\">, bukan\r\n           anaknya. Sekarang dicari lewat wadah bersama .phm-card__quote-block. *\/\r\n        var toggles = section.querySelectorAll('.phm-card__toggle');\r\n        var expandedCount = 0;\r\n        var autoplayResumeTimer = null;\r\n        var AUTOPLAY_RESUME_DELAY = 2500; \/\/ jeda sebelum slide otomatis lanjut lagi setelah ditutup\r\n\r\n        toggles.forEach(function (btn) {\r\n            if (btn.dataset.bound === '1') return;\r\n            btn.dataset.bound = '1';\r\n\r\n            btn.addEventListener('click', function (e) {\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n\r\n                var block = btn.closest('.phm-card__quote-block');\r\n                var wrap = block ? block.querySelector('.phm-card__text') : null;\r\n                if (!wrap) return;\r\n\r\n                var expanded = wrap.classList.toggle('is-expanded');\r\n                var label = btn.querySelector('.phm-card__toggle-label');\r\n                var arrow = btn.querySelector('.phm-card__toggle-arrow');\r\n                if (label) label.textContent = expanded ? 'Read less' : 'Read more';\r\n                if (arrow) arrow.textContent = expanded ? '\\u2190' : '\\u2192';\r\n                btn.setAttribute('aria-expanded', expanded ? 'true' : 'false');\r\n\r\n                \/* setiap kartu tingginya independen (align-items: flex-start),\r\n                   jadi kartu lain TIDAK ikut memanjang saat satu kartu di-expand.\r\n                   swiper.update() hanya menyegarkan posisi\/ukuran internal Swiper *\/\r\n                var swiperEl = btn.closest('.phm-testi__swiper');\r\n                var swiperInst = swiperEl && swiperEl.swiper;\r\n                if (swiperInst && typeof swiperInst.update === 'function') {\r\n                    swiperInst.update();\r\n                }\r\n\r\n                \/* --- slide otomatis BERHENTI selama ada kartu yang sedang\r\n                       \"Read more\". Baru lanjut lagi beberapa detik SETELAH\r\n                       kartu itu ditutup kembali (\"Read less\"). Dihitung pakai\r\n                       expandedCount supaya aman walau lebih dari satu kartu\r\n                       dibuka bersamaan \u2014 autoplay baru jalan lagi kalau\r\n                       semuanya sudah tertutup. --- *\/\r\n                if (swiperInst && swiperInst.autoplay) {\r\n                    if (autoplayResumeTimer) {\r\n                        clearTimeout(autoplayResumeTimer);\r\n                        autoplayResumeTimer = null;\r\n                    }\r\n                    if (expanded) {\r\n                        expandedCount += 1;\r\n                        swiperInst.autoplay.stop();\r\n                    } else {\r\n                        expandedCount = Math.max(0, expandedCount - 1);\r\n                        if (expandedCount === 0) {\r\n                            autoplayResumeTimer = setTimeout(function () {\r\n                                autoplayResumeTimer = null;\r\n                                if (expandedCount === 0 && swiperInst.autoplay) {\r\n                                    swiperInst.autoplay.start();\r\n                                }\r\n                            }, AUTOPLAY_RESUME_DELAY);\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        });\r\n\r\n        \/* --- transisi masuk & keluar untuk kartu testimoni: dua arah, jadi\r\n               memudar-naik saat terlihat, dan memudar-turun lagi saat\r\n               di-scroll menjauh (tidak di-unobserve, konsisten dengan\r\n               transisi judul\/sub-judul di atas). --- *\/\r\n        var stacks = section.querySelectorAll('.phm-card-stack');\r\n        if ('IntersectionObserver' in window && !prefersReducedMotion) {\r\n            var revealObserver = new IntersectionObserver(function (entries) {\r\n                entries.forEach(function (entry) {\r\n                    entry.target.classList.toggle('is-visible', entry.isIntersecting);\r\n                });\r\n            }, { threshold: 0.2 });\r\n\r\n            stacks.forEach(function (el, i) {\r\n                el.style.transitionDelay = (i * 90) + 'ms';\r\n                revealObserver.observe(el);\r\n            });\r\n        } else {\r\n            stacks.forEach(function (el) { el.classList.add('is-visible'); });\r\n        }\r\n\r\n        \/* --- transisi masuk & keluar untuk judul\/sub-judul, SEKALIGUS efek\r\n               \"menggambar\" garis hiasan sudut (stroke draw-in) \u2014 semuanya\r\n               dipicu bareng saat area judul terlihat, dan mundur lagi kalau\r\n               di-scroll menjauh (tidak di-unobserve). --- *\/\r\n        if (!section.dataset.headObserverInit) {\r\n            section.dataset.headObserverInit = '1';\r\n            var headEl = section.querySelector('.phm-testi__head');\r\n            var headItems = section.querySelectorAll('.phm-testi__head-item');\r\n            var cornerArcs = section.querySelectorAll('.phm-testi__corner-arc');\r\n\r\n            if (headEl && 'IntersectionObserver' in window && !prefersReducedMotion) {\r\n                var headObserver = new IntersectionObserver(function (entries) {\r\n                    entries.forEach(function (entry) {\r\n                        headItems.forEach(function (el) {\r\n                            el.classList.toggle('is-in', entry.isIntersecting);\r\n                        });\r\n                        cornerArcs.forEach(function (el) {\r\n                            el.classList.toggle('is-in', entry.isIntersecting);\r\n                        });\r\n                    });\r\n                }, { threshold: 0.15 });\r\n                headObserver.observe(headEl);\r\n            } else {\r\n                headItems.forEach(function (el) { el.classList.add('is-in'); });\r\n                cornerArcs.forEach(function (el) { el.classList.add('is-in'); });\r\n            }\r\n        }\r\n\r\n        \/* --- inisialisasi Swiper (hanya sekali) --- *\/\r\n        if (section.dataset.swiperInitialized === '1') return;\r\n        section.dataset.swiperInitialized = '1';\r\n\r\n        if (typeof window.Swiper !== 'undefined') {\r\n            var swiperContainer = section.querySelector('.phm-testi__swiper');\r\n            if (!swiperContainer) return;\r\n\r\n            if (swiperContainer.swiper) {\r\n                swiperContainer.swiper.destroy(true, true);\r\n            }\r\n\r\n            new window.Swiper(swiperContainer, {\r\n                slidesPerView: 1,\r\n                spaceBetween: 30,\r\n                speed: 650,\r\n                loop: false,\r\n                rewind: true,\r\n                grabCursor: true,\r\n                preventClicks: false,\r\n                preventClicksPropagation: false,\r\n                autoplay: {\r\n                    delay: 5000,\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-nav-next',\r\n                    prevEl: '.swiper-button-prev.phm-nav-prev'\r\n                },\r\n                breakpoints: {\r\n                    0: { slidesPerView: 1 },\r\n                    768: { slidesPerView: 2 },\r\n                    1024: { slidesPerView: 3 }\r\n                }\r\n            });\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.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>PPDB TK Islam Platinum \ud83c\udfeb\u2728 \ud83d\udce2 Pendaftaran Peserta Didik Baru Dibuka \ud83c\udf92 Sekolah Islam yang Menyenangkan untuk Buah Hati Anda Bergabunglah bersama TK Islam Platinum, tempat anak belajar, bermain, dan berkembang dalam lingkungan Islami yang aman, nyaman, dan penuh keceriaan. \ud83c\udf19 Qur&#8217;anic Learning \u2b50English Program \ud83d\udc51 Leadership Character \ud83c\udfca Swimming Class \ud83d\udccb Daftar Sekarang \ud83c\udfa8 [&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:\/\/tkislamplatinum.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tkislamplatinum.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tkislamplatinum.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tkislamplatinum.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tkislamplatinum.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":452,"href":"https:\/\/tkislamplatinum.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":1757,"href":"https:\/\/tkislamplatinum.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/1757"}],"wp:attachment":[{"href":"https:\/\/tkislamplatinum.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}