{"id":12,"date":"2026-07-21T02:38:00","date_gmt":"2026-07-21T02:38:00","guid":{"rendered":"http:\/\/localhost\/base_wp_unit\/?page_id=12"},"modified":"2026-09-10T03:31:40","modified_gmt":"2026-09-10T03:31:40","slug":"beranda","status":"publish","type":"page","link":"https:\/\/sditpermatamojokerto.sch.id\/","title":{"rendered":"Beranda"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n SDIT Permata - Penerimaan Peserta Didik Baru<\/title>\r\n\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n <style>\r\n \/* =========================================================\r\n RESET & BASE\r\n ========================================================= *\/\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html,\r\n body {\r\n width: 100%;\r\n min-height: 100vh;\r\n font-family: 'Inter', 'Poppins', system-ui, sans-serif;\r\n background: transparent;\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n }\r\n\r\n \/* =========================================================\r\n SLIDER CONTAINER - FULL WIDTH DENGAN BORDER RADIUS BAWAH\r\n ========================================================= *\/\r\n\r\n .slider-container {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n overflow: hidden;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n background-image: url('https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-26-2026-08_56_40-AM.png');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n\r\n padding: 120px 40px 40px 40px;\r\n margin: 0;\r\n\r\n \/* ===== BORDER RADIUS - HANYA BAWAH ===== *\/\r\n border-radius: 0 0 50px 50px;\r\n }\r\n\r\n \/* =========================================================\r\n OVERLAY - TANPA BLUR, LEBIH GELAP\r\n ========================================================= *\/\r\n\r\n .slider-container::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n\r\n \/* ===== OVERLAY LEBIH GELAP ===== *\/\r\n background: rgba(0, 0, 0, 0.72);\r\n\r\n z-index: 1;\r\n\r\n \/* ===== BLUR DIHAPUS ===== *\/\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n\r\n \/* ===== BORDER RADIUS - HANYA BAWAH ===== *\/\r\n border-radius: 0 0 50px 50px;\r\n }\r\n\r\n \/* =========================================================\r\n CONTENT WRAPPER\r\n ========================================================= *\/\r\n\r\n .content-wrapper {\r\n position: relative;\r\n z-index: 2;\r\n\r\n width: 100%;\r\n max-width: 1200px;\r\n\r\n padding: 2rem 0;\r\n\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n\r\n gap: 2rem;\r\n\r\n align-items: center;\r\n\r\n min-height: calc(100vh - 160px);\r\n }\r\n\r\n \/* =========================================================\r\n KOLOM KIRI\r\n ========================================================= *\/\r\n\r\n .left-col {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n\r\n gap: 1rem;\r\n\r\n padding: 2.2rem 2.5rem;\r\n\r\n \/* ===== BACKGROUND LEBIH GELAP ===== *\/\r\n background: rgba(0, 0, 0, 0.35);\r\n\r\n border-radius: 2rem;\r\n\r\n border: 1px solid rgba(255, 255, 255, 0.10);\r\n\r\n box-shadow:\r\n 0 25px 60px -12px rgba(0, 0, 0, 0.6);\r\n\r\n min-height: 320px;\r\n\r\n transition: background 0.3s ease, transform 0.3s ease;\r\n\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .left-col:hover {\r\n background: rgba(0, 0, 0, 0.45);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* =========================================================\r\n TEXT SLIDER - ANIMASI RINGAN\r\n ========================================================= *\/\r\n\r\n .text-slide .slide-item {\r\n display: none;\r\n\r\n animation: fadeIn 0.6s ease forwards;\r\n\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .text-slide .slide-item.active {\r\n display: block;\r\n }\r\n\r\n @keyframes fadeIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(12px);\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* =========================================================\r\n BADGE \/ TAG\r\n ========================================================= *\/\r\n\r\n .badge-slide {\r\n display: inline-block;\r\n padding: 0.25rem 1rem;\r\n background: rgba(79, 195, 247, 0.15);\r\n border: 1px solid rgba(79, 195, 247, 0.20);\r\n border-radius: 30px;\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n color: #81D4FA;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n \/* =========================================================\r\n JUDUL\r\n ========================================================= *\/\r\n\r\n .text-slide .slide-item h2 {\r\n font-size: clamp(1.8rem, 4vw, 3.2rem);\r\n font-weight: 700;\r\n line-height: 1.1;\r\n color: #fff;\r\n text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .text-slide .slide-item h2 .highlight {\r\n color: #4FC3F7;\r\n position: relative;\r\n }\r\n\r\n .text-slide .slide-item h2 .highlight::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -2px;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, #4FC3F7, transparent);\r\n border-radius: 3px;\r\n }\r\n\r\n \/* =========================================================\r\n DESKRIPSI\r\n ========================================================= *\/\r\n\r\n .text-slide .slide-item p {\r\n font-size: clamp(0.95rem, 1.2vw, 1.15rem);\r\n color: rgba(255, 255, 255, 0.9);\r\n line-height: 1.8;\r\n max-width: 95%;\r\n margin-top: 0.6rem;\r\n font-weight: 300;\r\n }\r\n\r\n .text-slide .slide-item p .highlight-text {\r\n color: #81D4FA;\r\n font-weight: 400;\r\n }\r\n\r\n \/* =========================================================\r\n BUTTON\r\n ========================================================= *\/\r\n\r\n .btn-primary {\r\n display: inline-block;\r\n margin-top: 0.75rem;\r\n padding: 0.7rem 2.2rem;\r\n background: linear-gradient(135deg, #007fae, #005a7a);\r\n color: #ffffff;\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n border-radius: 60px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 8px 30px rgba(0, 127, 174, 0.35);\r\n text-decoration: none;\r\n border: 1px solid rgba(255, 255, 255, 0.10);\r\n text-align: center;\r\n width: fit-content;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-3px) scale(1.02);\r\n box-shadow: 0 16px 45px rgba(0, 127, 174, 0.5);\r\n background: linear-gradient(135deg, #0095cc, #007fae);\r\n }\r\n\r\n .btn-primary:active {\r\n transform: scale(0.97);\r\n }\r\n\r\n \/* =========================================================\r\n KOLOM KANAN\r\n ========================================================= *\/\r\n\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 min-height: 280px;\r\n }\r\n\r\n \/* =========================================================\r\n IMAGE SLIDE\r\n ========================================================= *\/\r\n\r\n .right-col .image-slide {\r\n position: absolute;\r\n 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 ease, transform 0.8s ease;\r\n transform: scale(0.95);\r\n filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.4));\r\n }\r\n\r\n .right-col .image-slide.active {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n .right-col .image-slide svg,\r\n .right-col .image-slide img {\r\n width: auto;\r\n height: 100%;\r\n max-height: 380px;\r\n max-width: 100%;\r\n object-fit: contain;\r\n border-radius: 1.5rem;\r\n filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));\r\n }\r\n\r\n \/* =========================================================\r\n DOTS\r\n ========================================================= *\/\r\n\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: 2.5rem;\r\n left: 0;\r\n right: 0;\r\n z-index: 10;\r\n padding-bottom: 0;\r\n }\r\n\r\n .dot {\r\n width: 13px;\r\n height: 13px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.20);\r\n border: 2px solid rgba(255, 255, 255, 0.15);\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n }\r\n\r\n .dot.active {\r\n background: #4FC3F7;\r\n border-color: #4FC3F7;\r\n transform: scale(1.3);\r\n box-shadow: 0 0 20px rgba(79, 195, 247, 0.3);\r\n }\r\n\r\n .dot:hover {\r\n transform: scale(1.2);\r\n background: rgba(79, 195, 247, 0.4);\r\n border-color: rgba(79, 195, 247, 0.4);\r\n }\r\n\r\n \/* =========================================================\r\n RESPONSIVE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 1280px) {\r\n .slider-container {\r\n padding: 110px 35px 40px 35px;\r\n }\r\n .content-wrapper {\r\n max-width: 1100px;\r\n padding: 1.8rem 0;\r\n gap: 1.8rem;\r\n min-height: calc(100vh - 150px);\r\n }\r\n .left-col {\r\n padding: 1.8rem 2rem;\r\n min-height: 300px;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 340px;\r\n }\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .slider-container {\r\n padding: 100px 30px 35px 30px;\r\n \/* ===== BORDER RADIUS TABLET ===== *\/\r\n border-radius: 0 0 40px 40px;\r\n }\r\n .slider-container::before {\r\n border-radius: 0 0 40px 40px;\r\n }\r\n .content-wrapper {\r\n gap: 1.5rem;\r\n padding: 1.5rem 0;\r\n min-height: calc(100vh - 135px);\r\n }\r\n .left-col {\r\n padding: 1.5rem 1.8rem;\r\n min-height: 280px;\r\n gap: 0.8rem;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 300px;\r\n }\r\n .text-slide .slide-item h2 {\r\n font-size: clamp(1.8rem, 3.8vw, 2.6rem);\r\n }\r\n .text-slide .slide-item p {\r\n font-size: clamp(1rem, 1.2vw, 1.1rem);\r\n }\r\n .btn-primary {\r\n padding: 0.7rem 2rem;\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 820px) {\r\n .slider-container {\r\n padding: 90px 25px 30px 25px;\r\n min-height: 100vh;\r\n background-attachment: scroll;\r\n \/* ===== BORDER RADIUS TABLET PORTRAIT ===== *\/\r\n border-radius: 0 0 35px 35px;\r\n }\r\n .slider-container::before {\r\n border-radius: 0 0 35px 35px;\r\n }\r\n .content-wrapper {\r\n grid-template-columns: 1fr;\r\n grid-template-rows: auto auto;\r\n gap: 2rem;\r\n min-height: calc(100vh - 120px);\r\n padding: 1.5rem 0;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n }\r\n .left-col {\r\n order: 2;\r\n min-height: 250px;\r\n background: rgba(0, 0, 0, 0.45);\r\n padding: 2rem 2.2rem;\r\n border-radius: 1.8rem;\r\n gap: 1rem;\r\n }\r\n .left-col:hover {\r\n background: rgba(0, 0, 0, 0.5);\r\n }\r\n .right-col {\r\n order: 1;\r\n aspect-ratio: 16 \/ 10;\r\n min-height: 280px;\r\n max-height: 400px;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 320px;\r\n border-radius: 1.2rem;\r\n }\r\n .text-slide .slide-item p {\r\n max-width: 100%;\r\n }\r\n .text-slide .slide-item h2 {\r\n font-size: clamp(2rem, 4.5vw, 2.8rem);\r\n }\r\n .text-slide .slide-item p {\r\n font-size: clamp(1.1rem, 2vw, 1.3rem);\r\n line-height: 1.7;\r\n }\r\n .btn-primary {\r\n font-size: 1rem;\r\n padding: 0.8rem 2.2rem;\r\n margin-top: 0.8rem;\r\n }\r\n .dots-container {\r\n bottom: 1.8rem;\r\n }\r\n .dot {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .slider-container {\r\n padding: 80px 20px 25px 20px;\r\n \/* ===== BORDER RADIUS HP LANDSCAPE ===== *\/\r\n border-radius: 0 0 30px 30px;\r\n }\r\n .slider-container::before {\r\n border-radius: 0 0 30px 30px;\r\n }\r\n .content-wrapper {\r\n padding: 1rem 0;\r\n gap: 1.5rem;\r\n min-height: calc(100vh - 105px);\r\n max-width: 100%;\r\n }\r\n .left-col {\r\n padding: 1.5rem;\r\n min-height: 200px;\r\n border-radius: 1.5rem;\r\n gap: 0.8rem;\r\n background: rgba(0, 0, 0, 0.45);\r\n }\r\n .right-col {\r\n min-height: 220px;\r\n max-height: 350px;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 260px;\r\n border-radius: 1rem;\r\n }\r\n .text-slide .slide-item h2 {\r\n font-size: clamp(1.6rem, 5vw, 2.2rem);\r\n }\r\n .text-slide .slide-item p {\r\n font-size: clamp(1rem, 2.2vw, 1.15rem);\r\n line-height: 1.6;\r\n }\r\n .btn-primary {\r\n font-size: 0.95rem;\r\n padding: 0.7rem 1.8rem;\r\n margin-top: 0.6rem;\r\n }\r\n .dots-container {\r\n gap: 0.7rem;\r\n bottom: 1.5rem;\r\n }\r\n .dot {\r\n width: 13px;\r\n height: 13px;\r\n }\r\n .badge-slide {\r\n font-size: 0.6rem;\r\n padding: 0.2rem 0.8rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .slider-container {\r\n padding: 70px 16px 20px 16px;\r\n \/* ===== BORDER RADIUS HP PORTRAIT ===== *\/\r\n border-radius: 0 0 25px 25px;\r\n }\r\n .slider-container::before {\r\n border-radius: 0 0 25px 25px;\r\n }\r\n .content-wrapper {\r\n padding: 0.5rem 0;\r\n gap: 1rem;\r\n min-height: calc(100vh - 90px);\r\n }\r\n .left-col {\r\n padding: 1.2rem;\r\n min-height: 180px;\r\n border-radius: 1.2rem;\r\n gap: 0.6rem;\r\n background: rgba(0, 0, 0, 0.5);\r\n }\r\n .right-col {\r\n min-height: 180px;\r\n aspect-ratio: 4 \/ 3;\r\n max-height: 280px;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 200px;\r\n border-radius: 0.8rem;\r\n }\r\n .text-slide .slide-item h2 {\r\n font-size: clamp(1.3rem, 5vw, 1.8rem);\r\n }\r\n .text-slide .slide-item p {\r\n font-size: clamp(0.9rem, 2.2vw, 1rem);\r\n line-height: 1.5;\r\n margin-top: 0.3rem;\r\n }\r\n .btn-primary {\r\n font-size: 0.85rem;\r\n padding: 0.6rem 1.6rem;\r\n margin-top: 0.5rem;\r\n border-radius: 50px;\r\n }\r\n .dots-container {\r\n gap: 0.6rem;\r\n bottom: 1rem;\r\n }\r\n .dot {\r\n width: 11px;\r\n height: 11px;\r\n }\r\n .badge-slide {\r\n font-size: 0.55rem;\r\n padding: 0.15rem 0.7rem;\r\n }\r\n }\r\n\r\n @media (max-width: 380px) {\r\n .slider-container {\r\n padding: 60px 12px 15px 12px;\r\n \/* ===== BORDER RADIUS HP KECIL ===== *\/\r\n border-radius: 0 0 20px 20px;\r\n }\r\n .slider-container::before {\r\n border-radius: 0 0 20px 20px;\r\n }\r\n .content-wrapper {\r\n padding: 0.3rem 0;\r\n gap: 0.8rem;\r\n min-height: calc(100vh - 75px);\r\n }\r\n .left-col {\r\n padding: 0.9rem;\r\n min-height: 160px;\r\n border-radius: 1rem;\r\n gap: 0.5rem;\r\n background: rgba(0, 0, 0, 0.5);\r\n }\r\n .right-col {\r\n min-height: 150px;\r\n max-height: 220px;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 170px;\r\n border-radius: 0.6rem;\r\n }\r\n .text-slide .slide-item h2 {\r\n font-size: clamp(1.1rem, 4.5vw, 1.4rem);\r\n }\r\n .text-slide .slide-item p {\r\n font-size: clamp(0.8rem, 2vw, 0.9rem);\r\n line-height: 1.4;\r\n }\r\n .btn-primary {\r\n font-size: 0.75rem;\r\n padding: 0.5rem 1.3rem;\r\n margin-top: 0.4rem;\r\n }\r\n .dots-container {\r\n gap: 0.5rem;\r\n bottom: 0.8rem;\r\n }\r\n .dot {\r\n width: 9px;\r\n height: 9px;\r\n }\r\n .badge-slide {\r\n font-size: 0.5rem;\r\n padding: 0.1rem 0.6rem;\r\n }\r\n }\r\n\r\n \/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .text-slide .slide-item {\r\n animation: none;\r\n }\r\n .left-col {\r\n transition: none;\r\n }\r\n .btn-primary {\r\n transition: none;\r\n }\r\n .right-col .image-slide {\r\n transition: none;\r\n }\r\n .dot {\r\n transition: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <div class=\"slider-container\">\r\n\r\n <div class=\"content-wrapper\">\r\n\r\n <!-- =====================================================\r\n KOLOM KIRI - SDIT PERMATA\r\n ====================================================== -->\r\n\r\n <div class=\"left-col\">\r\n\r\n <div class=\"text-slide\">\r\n\r\n <!-- SLIDE 1: PPDB -->\r\n <div class=\"slide-item active\" data-index=\"0\">\r\n\r\n <span class=\"badge-slide\">\ud83c\udf92 Pendaftaran Dibuka<\/span>\r\n\r\n <h2>\r\n Penerimaan Peserta <br><span class=\"highlight\">Didik Baru<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n Bergabunglah dengan keluarga besar SDIT Permata!\r\n Tempat di mana anak-anak belajar dengan <span class=\"highlight-text\">gembira<\/span>,\r\n bermain sambil belajar, dan tumbuh menjadi generasi\r\n <span class=\"highlight-text\">cerdas<\/span> & <span class=\"highlight-text\">berkarakter<\/span>.\r\n <\/p>\r\n\r\n <a href=\"#\" class=\"btn-primary\">\r\n \ud83d\udccb Daftar Sekarang\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <!-- SLIDE 2: Misi -->\r\n <div class=\"slide-item\" data-index=\"1\">\r\n\r\n <span class=\"badge-slide\">\ud83c\udfaf Visi & Misi<\/span>\r\n\r\n <h2>\r\n Misi <span class=\"highlight\">SDIT Permata<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n 1. Membiasakan siswa <span class=\"highlight-text\">membaca, menghafal,<\/span> dan memahami Al-Qur'an<br>\r\n 2. Menyeimbangkan potensi kecerdasan <span class=\"highlight-text\">Kognitif, Emosi<\/span> dan Spiritual<br>\r\n 3. Mengoptimalkan kemampuan <span class=\"highlight-text\">berkomunikasi<\/span>, menyelesaikan masalah, menguasai teknologi serta berpikir kritis dan kreatif<br>\r\n 4. Menciptakan lingkungan yang <span class=\"highlight-text\">kondusif<\/span>, bersih, indah, rindang dan nyaman\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <!-- SLIDE 3: Prestasi -->\r\n <div class=\"slide-item\" data-index=\"2\">\r\n\r\n <span class=\"badge-slide\">\ud83c\udf1f Prestasi<\/span>\r\n\r\n <h2>\r\n Prestasi & <br><span class=\"highlight\">Perkembangan Anak<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n Setiap anak adalah <span class=\"highlight-text\">bintang<\/span>! Dengan pendekatan\r\n pembelajaran yang menyenangkan dan guru-guru yang\r\n penuh kasih, kami bangga melihat perkembangan luar\r\n biasa anak-anak kami. Dari segi <span class=\"highlight-text\">akademik, seni,<\/span>\r\n hingga <span class=\"highlight-text\">karakter<\/span>, semua berkembang optimal.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- =====================================================\r\n KOLOM KANAN - GAMBAR SDIT PERMATA\r\n ====================================================== -->\r\n\r\n <div class=\"right-col\">\r\n\r\n <!-- GAMBAR 1 -->\r\n <div class=\"image-slide active\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-scaled.webp\"\r\n alt=\"SDIT Permata\"\r\n \/>\r\n <\/div>\r\n\r\n <!-- GAMBAR 2 -->\r\n <div class=\"image-slide\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-scaled.webp\"\r\n alt=\"Kegiatan SDIT Permata\"\r\n \/>\r\n <\/div>\r\n\r\n <!-- GAMBAR 3 -->\r\n <div class=\"image-slide\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-scaled.webp\"\r\n alt=\"Prestasi SDIT Permata\"\r\n \/>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- =====================================================\r\n DOTS\r\n ====================================================== -->\r\n\r\n <div class=\"dots-container\">\r\n\r\n <span 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\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- =========================================================\r\n JAVASCRIPT SLIDER\r\n ========================================================== -->\r\n\r\n <script>\r\n (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(function (el) {\r\n el.classList.remove('active');\r\n });\r\n textItems.forEach(function (el) {\r\n el.classList.remove('active');\r\n });\r\n dots.forEach(function (el) {\r\n el.classList.remove('active');\r\n });\r\n\r\n if (imageSlides[index]) {\r\n imageSlides[index].classList.add('active');\r\n }\r\n if (textItems[index]) {\r\n textItems[index].classList.add('active');\r\n }\r\n if (dots[index]) {\r\n dots[index].classList.add('active');\r\n }\r\n }\r\n\r\n function goToSlide(index) {\r\n if (index < 0) {\r\n index = total - 1;\r\n }\r\n if (index >= total) {\r\n index = 0;\r\n }\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) {\r\n clearInterval(interval);\r\n interval = null;\r\n }\r\n interval = setInterval(function () {\r\n nextSlide();\r\n }, delay);\r\n }\r\n\r\n dots.forEach(function (dot, idx) {\r\n dot.addEventListener('click', function (e) {\r\n e.stopPropagation();\r\n if (currentIndex !== idx) {\r\n goToSlide(idx);\r\n }\r\n });\r\n });\r\n\r\n resetAutoPlay();\r\n\r\n const container = document.querySelector('.slider-container');\r\n\r\n if (container) {\r\n container.addEventListener('mouseenter', function () {\r\n if (interval) {\r\n clearInterval(interval);\r\n interval = null;\r\n }\r\n });\r\n\r\n container.addEventListener('mouseleave', function () {\r\n if (!interval) {\r\n resetAutoPlay();\r\n }\r\n });\r\n\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 })();\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=\"768\" height=\"768\" src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-768x768.webp\" class=\"attachment-medium_large size-medium_large wp-image-1249\" alt=\"\" srcset=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-768x768.webp 768w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-300x300.webp 300w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-1024x1024.webp 1024w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-150x150.webp 150w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-1536x1536.webp 1536w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-2048x2048.webp 2048w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\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 SDIT Permata<\/h5>\n\t\t\t\t<div class=\"elementor-element elementor-element-449b519 elementor-widget elementor-widget-text-editor\" data-id=\"449b519\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong><i>Menjadi Sekolah Dasar terdepan dalam mewujudkan generasi cinta Al- Qur\u2019an, cerdas, berjiwa pemimpin, dan berbudaya lingkungan<\/i><\/strong><\/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 SDIT Permata<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-13a0bef elementor-invisible elementor-widget elementor-widget-hfe-basic-posts\" data-id=\"13a0bef\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp"}\" 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:\/\/sditpermatamojokerto.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1376\" height=\"768\" src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_7zy0kv7zy0kv7zy0.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Lupakan Gadget Sejenak: Serunya Permainan Tradisional di SDIT Permata\" loading=\"lazy\" srcset=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_7zy0kv7zy0kv7zy0.jpg 1376w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_7zy0kv7zy0kv7zy0-300x167.jpg 300w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_7zy0kv7zy0kv7zy0-1024x572.jpg 1024w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_7zy0kv7zy0kv7zy0-768x429.jpg 768w\" sizes=\"auto, (max-width: 1376px) 100vw, 1376px\" \/>\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:\/\/sditpermatamojokerto.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t\tLupakan Gadget Sejenak: Serunya Permainan Tradisional di SDIT Permata\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\tDi tengah pesatnya perkembangan teknologi dan maraknya permainan digital, SDIT Permata menghadirkan suasana berbeda melalui...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/sditpermatamojokerto.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:\/\/sditpermatamojokerto.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"864\" src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/tulistangan3-1536x864-1.webp\" class=\"attachment-full size-full wp-post-image\" alt=\"Pentingnya Literasi Membaca untuk Kesuksesan Akademik Anak\" loading=\"lazy\" srcset=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/tulistangan3-1536x864-1.webp 1536w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/tulistangan3-1536x864-1-300x169.webp 300w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/tulistangan3-1536x864-1-1024x576.webp 1024w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/tulistangan3-1536x864-1-768x432.webp 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/sditpermatamojokerto.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t\tPentingnya Literasi Membaca untuk Kesuksesan Akademik Anak\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\tLiterasi membaca adalah salah satu fondasi utama keberhasilan belajar anak. Anak yang terbiasa membaca akan...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/sditpermatamojokerto.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:\/\/sditpermatamojokerto.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"864\" src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2024-09-10-at-14.21.23-1536x864-1.jpeg\" class=\"attachment-full size-full wp-post-image\" alt=\"Asyiknya Hari Aksara Internasional 2024 di SDIT Permata Mojokerto\" loading=\"lazy\" srcset=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2024-09-10-at-14.21.23-1536x864-1.jpeg 1536w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2024-09-10-at-14.21.23-1536x864-1-300x169.jpeg 300w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2024-09-10-at-14.21.23-1536x864-1-1024x576.jpeg 1024w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2024-09-10-at-14.21.23-1536x864-1-768x432.jpeg 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/sditpermatamojokerto.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t\tAsyiknya Hari Aksara Internasional 2024 di SDIT Permata Mojokerto\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-post-meta\">\n\t\t\t\t\t\t<span class=\"hfe-post-date\">6 Agustus 2026<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-post-excerpt\">\n\t\t\t\t\t\tMojokerto, 10 September 2024 \u2014 Dalam rangka memperingati Hari Aksara Internasional (HAI) 2024 pada 8...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/sditpermatamojokerto.sch.id\/?p=469\" class=\"hfe-read-more\" rel=\"bookmark\">\n\t\t\t\t\t\tBaca Selengkapnya \u2192\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/section>\n<div class=\"elementor-element elementor-element-cbb2ea6 e-con e-atomic-element e-flexbox-base e-cbb2ea6-a641792 \" data-id=\"cbb2ea6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cbb2ea6\">\n <section class=\"elementor-element elementor-element-f869a31 e-con e-atomic-element e-flexbox-base e-f869a31-6d8fa94 \" data-id=\"f869a31\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f869a31\">\n <div class=\"elementor-element elementor-element-2777ca8 e-con e-atomic-element e-flexbox-base e-2777ca8-56649eb \" data-id=\"2777ca8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2777ca8\">\n \t\t\t<img decoding=\"async\" class=\"e-image-base e-861aca3-12d04bf\" data-interaction-id=\"861aca3\" id=\"1248\" src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-768x768.webp\" width=\"768\" height=\"768\" srcset=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-768x768.webp 768w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-300x300.webp 300w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1024x1024.webp 1024w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-150x150.webp 150w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-1536x1536.webp 1536w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-10-2048x2048.webp 2048w\" alt=\"\"\/>\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4894f63 e-con e-atomic-element e-flexbox-base e-4894f63-2c4665c \" data-id=\"4894f63\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4894f63\">\n \t\t\t<img decoding=\"async\" class=\"e-image-base e-eb8a007-51bedcc\" data-interaction-id=\"eb8a007\" id=\"1488\" src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/09\/cropped-Tanpa-judul-Konten-Instagram-34-15-scaled-1.png\" width=\"512\" height=\"512\" srcset=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/09\/cropped-Tanpa-judul-Konten-Instagram-34-15-scaled-1.png 512w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/09\/cropped-Tanpa-judul-Konten-Instagram-34-15-scaled-1-300x300.png 300w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/09\/cropped-Tanpa-judul-Konten-Instagram-34-15-scaled-1-150x150.png 150w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/09\/cropped-Tanpa-judul-Konten-Instagram-34-15-scaled-1-270x270.png 270w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/09\/cropped-Tanpa-judul-Konten-Instagram-34-15-scaled-1-192x192.png 192w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/09\/cropped-Tanpa-judul-Konten-Instagram-34-15-scaled-1-180x180.png 180w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/09\/cropped-Tanpa-judul-Konten-Instagram-34-15-scaled-1-64x64.png 64w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/09\/cropped-Tanpa-judul-Konten-Instagram-34-15-scaled-1-32x32.png 32w\" alt=\"\"\/>\t\t\t\t\t<h1 data-interaction-id=\"bcf1e5b\" class=\"e-bcf1e5b-0bdee46 e-heading-base\">Program Unggulan<\/h1>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-1f2154d e-con e-atomic-element e-flexbox-base e-1f2154d-4214281 \" data-id=\"1f2154d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1f2154d\">\n \t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"e-image-base e-3e69dba-b20969f\" data-interaction-id=\"3e69dba\" id=\"1266\" src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-12-768x768.webp\" width=\"768\" height=\"768\" srcset=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-12-768x768.webp 768w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-12-300x300.webp 300w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-12-1024x1024.webp 1024w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-12-150x150.webp 150w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-12-1536x1536.webp 1536w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-12-2048x2048.webp 2048w\" alt=\"\"\/>\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n<div class=\"elementor-element elementor-element-d2de8a3 e-con e-atomic-element e-flexbox-base e-1473273 \" data-id=\"d2de8a3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d2de8a3\">\n \t\t\t<h1 data-interaction-id=\"a0d11cd\" class=\"e-a0d11cd-815bbdf e-heading-base\">Fasilitas<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c84e24 elementor-widget elementor-widget-html\" data-id=\"3c84e24\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\n SLIDER GALERI HORIZONTAL (INFINITE LOOP)\r\n Slide tengah aktif: background BIRU #007fae\r\n + LIGHTBOX untuk detail lengkap\r\n Mendukung multi-instance & fallback gambar\r\n Warna: #007fae (BIRU)\r\n FIX: GAMBAR LEBIH JERNIH\r\n========================================== -->\r\n\r\n<!-- Slick CSS CDN -->\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick.css\"\/>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick-theme.css\"\/>\r\n\r\n<div class=\"permata-slider-container\" data-slider-instance>\r\n\r\n <!-- Skeleton Loading -->\r\n <div class=\"slider-skeleton\">\r\n <div class=\"skeleton-card\"><\/div>\r\n <div class=\"skeleton-card\"><\/div>\r\n <div class=\"skeleton-card\"><\/div>\r\n <div class=\"skeleton-card\"><\/div>\r\n <\/div>\r\n\r\n <!-- Slick Horizontal Slider -->\r\n <div class=\"slider-content-wrapper\" style=\"display: none;\">\r\n <div class=\"horizontal-slider js-horizontal-gallery-slider\">\r\n <!-- Item Slider akan diisi lewat JS -->\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ===== LIGHTBOX \/ MODAL ===== -->\r\n <div class=\"lightbox-overlay\" id=\"facilityLightbox\">\r\n <div class=\"lightbox-content\">\r\n <button class=\"lightbox-close\" id=\"lightboxClose\">×<\/button>\r\n <div class=\"lightbox-body\">\r\n <div class=\"lightbox-image-wrapper\">\r\n <img decoding=\"async\" id=\"lightboxImage\" src=\"\" alt=\"Detail Fasilitas\" \/>\r\n <\/div>\r\n <div class=\"lightbox-info\">\r\n <h2 id=\"lightboxTitle\" class=\"lightbox-title\"><\/h2>\r\n <p id=\"lightboxDescription\" class=\"lightbox-description\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* --- Container Utama --- *\/\r\n.permata-slider-container {\r\n max-width: 1350px;\r\n margin: 0 auto;\r\n padding: 40px 25px;\r\n position: relative;\r\n font-family: 'Poppins', 'Inter', sans-serif;\r\n}\r\n\r\n\/* Flex layout mendatar & jarak antar slide *\/\r\n.horizontal-slider .slick-track {\r\n display: flex !important;\r\n align-items: stretch;\r\n}\r\n\r\n.horizontal-slider .slick-slide {\r\n height: auto;\r\n padding: 0 12px;\r\n outline: none;\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n\/* --- Gallery Card --- *\/\r\n.slider-card {\r\n background: #ffffff;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n text-align: left;\r\n transition: background-color 0.5s ease,\r\n box-shadow 0.5s ease,\r\n transform 0.3s ease;\r\n cursor: pointer;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\r\n will-change: background-color;\r\n}\r\n\r\n.slider-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n\/* --- SLIDE TENGAH (AKTIF) : background BIRU #007fae --- *\/\r\n.slick-center .slider-card {\r\n background-color: #007fae;\r\n box-shadow: 0 8px 30px rgba(0, 127, 174, 0.35);\r\n}\r\n\r\n.slick-center .slider-card .card-content {\r\n background-color: #007fae;\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: #f0f8ff;\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 #007fae (BIRU) --- *\/\r\n.slider-card:hover {\r\n background-color: #007fae !important;\r\n box-shadow: 0 8px 30px rgba(0, 127, 174, 0.35) !important;\r\n transition: background-color 0.3s ease,\r\n box-shadow 0.3s ease,\r\n transform 0.3s ease;\r\n transform: translateY(-4px);\r\n}\r\n\r\n.slider-card:hover .card-content {\r\n background-color: #007fae !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: #f0f8ff !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 - FIX GAMBAR JERNIH --- *\/\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 \/* === FIX: GAMBAR JERNIH === *\/\r\n image-rendering: auto;\r\n image-rendering: -webkit-optimize-contrast;\r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n transform: translateZ(0);\r\n -webkit-transform: translateZ(0);\r\n \/* Menghilangkan blur pada gambar *\/\r\n filter: none !important;\r\n -webkit-filter: none !important;\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 BIRU #007fae --- *\/\r\n.horizontal-slider .slick-prev,\r\n.horizontal-slider .slick-next {\r\n width: 48px;\r\n height: 48px;\r\n background: #007fae !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(0, 127, 174, 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: #00668A !important;\r\n transform: scale(1.1);\r\n}\r\n\r\n.horizontal-slider .slick-prev { left: -22px; }\r\n.horizontal-slider .slick-next { right: -22px; }\r\n\r\n.horizontal-slider .slick-prev:before { content: '\u276e'; }\r\n.horizontal-slider .slick-next:before { content: '\u276f'; }\r\n\r\n\/* --- Skeleton Loading --- *\/\r\n.slider-skeleton {\r\n display: flex;\r\n gap: 24px;\r\n overflow: hidden;\r\n}\r\n\r\n.skeleton-card {\r\n flex: 1;\r\n min-width: 200px;\r\n height: 280px;\r\n border-radius: 20px;\r\n background: linear-gradient(90deg, #eee 25%, #f7f7f7 37%, #eee 63%);\r\n background-size: 400% 100%;\r\n animation: skeleton-shimmer 1.4s infinite;\r\n}\r\n\r\n@keyframes skeleton-shimmer {\r\n 0% { background-position: 100% 0; }\r\n 100% { background-position: -100% 0; }\r\n}\r\n\r\n\/* ==========================================\r\n LIGHTBOX \/ MODAL STYLES - TEMA BIRU #007fae\r\n GAMBAR FULL TANPA TERPOTONG & JERNIH\r\n========================================== *\/\r\n.lightbox-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.85);\r\n z-index: 9999;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n box-sizing: border-box;\r\n animation: lightboxFadeIn 0.3s ease;\r\n}\r\n\r\n.lightbox-overlay.active {\r\n display: flex;\r\n}\r\n\r\n@keyframes lightboxFadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n}\r\n\r\n.lightbox-content {\r\n background: #ffffff;\r\n border-radius: 24px;\r\n max-width: 700px;\r\n width: 100%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n position: relative;\r\n box-shadow: 0 20px 60px rgba(0, 127, 174, 0.3);\r\n animation: lightboxSlideUp 0.4s ease;\r\n}\r\n\r\n@keyframes lightboxSlideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(40px) scale(0.95);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n}\r\n\r\n.lightbox-close {\r\n position: absolute;\r\n top: 16px;\r\n right: 20px;\r\n background: #007fae;\r\n color: #ffffff;\r\n border: none;\r\n border-radius: 50%;\r\n width: 44px;\r\n height: 44px;\r\n font-size: 28px;\r\n line-height: 44px;\r\n text-align: center;\r\n cursor: pointer;\r\n z-index: 10;\r\n transition: all 0.3s ease;\r\n padding: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 4px 12px rgba(0, 127, 174, 0.4);\r\n}\r\n\r\n.lightbox-close:hover {\r\n background: #00668A;\r\n transform: rotate(90deg) scale(1.1);\r\n}\r\n\r\n.lightbox-body {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n\/* ===== GAMBAR TIDAK TERPOTONG & JERNIH ===== *\/\r\n.lightbox-image-wrapper {\r\n width: 100%;\r\n height: 280px;\r\n background: #0a0a0a;\r\n overflow: hidden;\r\n border-radius: 24px 24px 0 0;\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.lightbox-image-wrapper img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n display: block;\r\n background: #0a0a0a;\r\n \/* === FIX: GAMBAR JERNIH DI LIGHTBOX === *\/\r\n image-rendering: auto;\r\n image-rendering: -webkit-optimize-contrast;\r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n transform: translateZ(0);\r\n -webkit-transform: translateZ(0);\r\n filter: none !important;\r\n -webkit-filter: none !important;\r\n}\r\n\r\n.lightbox-info {\r\n padding: 28px 32px 32px;\r\n background: #ffffff;\r\n border-radius: 0 0 24px 24px;\r\n}\r\n\r\n.lightbox-title {\r\n font-size: 26px;\r\n font-weight: 700;\r\n color: #1a2a36;\r\n margin: 0 0 12px 0;\r\n line-height: 1.2;\r\n}\r\n\r\n.lightbox-title::before {\r\n content: \"\u2726 \";\r\n color: #007fae;\r\n}\r\n\r\n.lightbox-description {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #3d5563;\r\n line-height: 1.8;\r\n margin: 0;\r\n white-space: pre-wrap;\r\n word-wrap: break-word;\r\n}\r\n\r\n\/* --- Responsive Lightbox --- *\/\r\n@media (max-width: 768px) {\r\n .lightbox-image-wrapper {\r\n height: 200px;\r\n }\r\n .lightbox-info {\r\n padding: 20px 20px 24px;\r\n }\r\n .lightbox-title {\r\n font-size: 20px;\r\n }\r\n .lightbox-description {\r\n font-size: 14px;\r\n line-height: 1.6;\r\n }\r\n .lightbox-close {\r\n top: 10px;\r\n right: 14px;\r\n width: 38px;\r\n height: 38px;\r\n font-size: 22px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .lightbox-image-wrapper {\r\n height: 160px;\r\n }\r\n .lightbox-info {\r\n padding: 16px 16px 20px;\r\n }\r\n .lightbox-title {\r\n font-size: 18px;\r\n }\r\n .lightbox-description {\r\n font-size: 13px;\r\n line-height: 1.6;\r\n }\r\n .lightbox-close {\r\n top: 8px;\r\n right: 10px;\r\n width: 34px;\r\n height: 34px;\r\n font-size: 20px;\r\n }\r\n}\r\n\r\n\/* --- Responsive Slider --- *\/\r\n@media (max-width: 1024px) {\r\n .horizontal-slider .slick-prev { left: -10px; }\r\n .horizontal-slider .slick-next { right: -10px; }\r\n .image-wrapper { height: 180px; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .image-wrapper { height: 170px; }\r\n .card-title { font-size: 16px; }\r\n .card-description { font-size: 13px; }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n .image-wrapper { height: 160px; }\r\n .horizontal-slider .slick-prev { left: 0px; }\r\n .horizontal-slider .slick-next { right: 0px; }\r\n .card-content { padding: 12px 14px 16px 14px; }\r\n .card-title { font-size: 15px; }\r\n .card-description { font-size: 12px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n \/\/ --- Loader script dinamis ---\r\n function loadScript(src, checkFn) {\r\n return new Promise(function (resolve, reject) {\r\n if (checkFn && checkFn()) {\r\n resolve();\r\n return;\r\n }\r\n var s = document.createElement('script');\r\n s.src = src;\r\n s.onload = function () { resolve(); };\r\n s.onerror = function () { reject(new Error('Gagal memuat script: ' + src)); };\r\n document.head.appendChild(s);\r\n });\r\n }\r\n\r\n function hasJQuery() {\r\n return typeof window.jQuery !== 'undefined';\r\n }\r\n\r\n function hasSlick() {\r\n return hasJQuery() && typeof window.jQuery.fn.slick !== 'undefined';\r\n }\r\n\r\n function initAllSliders($) {\r\n\r\n \/* ===========================================================\r\n \ud83d\udcf7 DATA FASILITAS SDIT PERMATA\r\n WARNA: #007fae (BIRU)\r\n =========================================================== *\/\r\n var sliderData = [\r\n {\r\n title: \"\ud83c\udfeb Ruang Kelas Representatif\",\r\n description: \"Ruang kelas nyaman dengan AC, pencahayaan baik, media pembelajaran interaktif, dan suasana kondusif untuk belajar aktif & menyenangkan.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Ruang-Kelas-Representatif.jpeg\"\r\n },\r\n {\r\n title: \"\ud83d\udcd6 Perpustakaan\",\r\n description: \"Pusat literasi dengan koleksi buku beragam, ruang baca nyaman, dan program gemar membaca untuk meningkatkan wawasan & minat baca siswa.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Perpustakaan.jpeg\"\r\n },\r\n {\r\n title: \"\ud83c\udfa4 Hall SD\",\r\n description: \"Ruang serbaguna modern untuk upacara, pentas seni, pertemuan orang tua, dan berbagai kegiatan sekolah lainnya.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Hall-SD.jpeg\"\r\n },\r\n {\r\n title: \"\ud83d\udcbb Lab Komputer\",\r\n description: \"Fasilitas teknologi dengan komputer spesifikasi terbaru, internet cepat, dan software edukatif untuk bekal keterampilan digital siswa.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Lab-Komputer.jpeg\"\r\n },\r\n {\r\n title: \"\ud83c\udff8 GOR (Gedung Olahraga)\",\r\n description: \"Ruang olahraga indoor lengkap untuk basket, voli, bulu tangkis, senam, dan kegiatan ekstrakurikuler fisik yang menyehatkan.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/GOR.jpeg\"\r\n },\r\n {\r\n title: \"\ud83d\udd4c Masjid Miftahul Ilmi\",\r\n description: \"Pusat ibadah & pembinaan karakter Islami dengan ruang sholat luas, program tahfidz, sholat berjamaah, dan kajian keislaman rutin.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Masjid-Miftahul-Ilmi.jpeg\"\r\n }\r\n ];\r\n\r\n \/\/ --- Build HTML dengan data attribute untuk lightbox & gambar jernih ---\r\n var itemsHtml = '';\r\n sliderData.forEach(function (item, index) {\r\n var desc = item.description.replace(\/\"\/g, '"');\r\n itemsHtml += '' +\r\n '<div data-slide-index=\"' + index + '\">' +\r\n '<div class=\"slider-card\" data-title=\"' + item.title + '\" data-desc=\"' + desc + '\" data-img=\"' + item.image + '\">' +\r\n '<div class=\"image-wrapper\">' +\r\n '<img decoding=\"async\" src=\"' + item.image + '\" alt=\"' + item.title + '\" ' +\r\n 'loading=\"eager\" fetchpriority=\"high\" ' +\r\n 'onerror=\"this.onerror=null;this.src=\\'https:\/\/placehold.co\/800x600\/007fae\/white?text=Gambar+tidak+tersedia\\';\" ' +\r\n 'style=\"image-rendering:auto;-webkit-image-rendering:optimize-contrast;\" \/>' +\r\n '<\/div>' +\r\n '<div class=\"card-content\">' +\r\n '<div class=\"card-title\">' + item.title + '<\/div>' +\r\n '<div class=\"card-description\">' + desc + '<\/div>' +\r\n '<\/div>' +\r\n '<\/div>' +\r\n '<\/div>';\r\n });\r\n\r\n \/\/ --- Inisialisasi setiap instance slider ---\r\n $('[data-slider-instance] .js-horizontal-gallery-slider').each(function () {\r\n var $slider = $(this);\r\n\r\n if ($slider.hasClass('slick-initialized') || $slider.data('slider-inited')) {\r\n return;\r\n }\r\n $slider.data('slider-inited', true);\r\n\r\n $slider.html(itemsHtml);\r\n\r\n $slider.closest('.permata-slider-container')\r\n .find('.slider-skeleton').hide()\r\n .end()\r\n .find('.slider-content-wrapper').show();\r\n\r\n \/\/ --- Konfigurasi Slick dengan centerMode aktif ---\r\n $slider.slick({\r\n slidesToShow: 3,\r\n slidesToScroll: 1,\r\n infinite: true,\r\n autoplay: true,\r\n autoplaySpeed: 3000,\r\n arrows: true,\r\n dots: false,\r\n pauseOnHover: true,\r\n centerMode: true,\r\n centerPadding: '60px',\r\n responsive: [\r\n { breakpoint: 1024, settings: { slidesToShow: 3, centerPadding: '40px' } },\r\n { breakpoint: 768, settings: { slidesToShow: 2, centerPadding: '30px' } },\r\n { breakpoint: 480, settings: { slidesToShow: 1, centerPadding: '20px' } }\r\n ]\r\n });\r\n\r\n \/\/ --- Event click untuk Lightbox ---\r\n $slider.on('click', '.slider-card', function () {\r\n var title = $(this).data('title') || 'Detail Fasilitas';\r\n var desc = $(this).data('desc') || 'Tidak ada deskripsi';\r\n var img = $(this).data('img') || '';\r\n\r\n $('#lightboxTitle').text(title);\r\n $('#lightboxDescription').text(desc);\r\n $('#lightboxImage').attr('src', img);\r\n \/\/ Force refresh gambar agar jernih\r\n var imgEl = document.getElementById('lightboxImage');\r\n if (imgEl) {\r\n imgEl.style.filter = 'none';\r\n imgEl.style.webkitFilter = 'none';\r\n }\r\n\r\n $('#facilityLightbox').addClass('active');\r\n $('body').css('overflow', 'hidden');\r\n });\r\n });\r\n\r\n \/\/ --- Lightbox Close Events ---\r\n $('#lightboxClose').on('click', function () {\r\n closeLightbox();\r\n });\r\n\r\n $('#facilityLightbox').on('click', function (e) {\r\n if (e.target === this) {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n $(document).on('keydown', function (e) {\r\n if (e.key === 'Escape') {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n function closeLightbox() {\r\n $('#facilityLightbox').removeClass('active');\r\n $('body').css('overflow', '');\r\n }\r\n }\r\n\r\n function boot() {\r\n var jq = window.jQuery;\r\n jq(document).ready(function ($) {\r\n initAllSliders($);\r\n });\r\n }\r\n\r\n \/\/ --- Muat jQuery & Slick ---\r\n loadScript('https:\/\/code.jquery.com\/jquery-3.6.0.min.js', hasJQuery)\r\n .then(function () {\r\n return loadScript('https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick.min.js', hasSlick);\r\n })\r\n .then(boot)\r\n .catch(function (err) {\r\n console.error('[Slider Galeri] Gagal inisialisasi:', err);\r\n var containers = document.querySelectorAll('[data-slider-instance]');\r\n containers.forEach(function (c) {\r\n var skeleton = c.querySelector('.slider-skeleton');\r\n if (skeleton) {\r\n skeleton.innerHTML = '<p style=\"width:100%;text-align:center;color:#7a8a94;padding:40px 0;\">Galeri tidak dapat dimuat. Coba muat ulang halaman.<\/p>';\r\n }\r\n });\r\n });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-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<style>\r\n\/* =========================================================\r\n QUALITY ASSURANCE - SDIT PERMATA\r\n Warna: #007fae (Biru)\r\n ========================================================= *\/\r\n\r\n.qa-section {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 50px 20px;\r\n font-family: 'Inter', 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Judul *\/\r\n.qa-title {\r\n text-align: center;\r\n font-size: clamp(28px, 4vw, 40px);\r\n font-weight: 800;\r\n color: #243746;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.qa-title span {\r\n color: #007fae;\r\n}\r\n\r\n.qa-subtitle {\r\n text-align: center;\r\n font-size: 16px;\r\n color: #66787f;\r\n margin-bottom: 40px;\r\n}\r\n\r\n\/* Grid - 3 kolom *\/\r\n.qa-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n}\r\n\r\n\/* Card *\/\r\n.qa-card {\r\n background: #ffffff;\r\n border-radius: 16px;\r\n padding: 25px 22px;\r\n text-align: center;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\r\n border: 2px solid #f0f4f8;\r\n transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n cursor: pointer;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n\/* Efek hover - berubah jadi biru *\/\r\n.qa-card:hover {\r\n border-color: #007fae;\r\n transform: translateY(-8px);\r\n box-shadow: 0 16px 50px rgba(0, 127, 174, 0.20);\r\n background: #007fae;\r\n}\r\n\r\n\/* Icon *\/\r\n.qa-card .icon {\r\n font-size: 36px;\r\n margin-bottom: 12px;\r\n display: block;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n.qa-card:hover .icon {\r\n transform: scale(1.2);\r\n}\r\n\r\n\/* Judul card *\/\r\n.qa-card h3 {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: #243746;\r\n margin: 0 0 8px 0;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n\/* Deskripsi card *\/\r\n.qa-card p {\r\n font-size: 13.5px;\r\n color: #5a6f7e;\r\n line-height: 1.6;\r\n margin: 0;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n\/* HOVER - Semua teks jadi putih *\/\r\n.qa-card:hover h3,\r\n.qa-card:hover p {\r\n color: #ffffff;\r\n}\r\n\r\n\/* Card Lebar Penuh (Fasilitas + Ketrampilan Hidup) *\/\r\n.qa-card-full {\r\n grid-column: 1 \/ -1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 30px;\r\n flex-wrap: wrap;\r\n background: #f8faff;\r\n border-radius: 16px;\r\n padding: 20px 30px;\r\n border: 2px solid #e8edf5;\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.qa-card-full:hover {\r\n border-color: #007fae;\r\n background: #007fae;\r\n transform: translateY(-4px);\r\n box-shadow: 0 16px 50px rgba(0, 127, 174, 0.20);\r\n}\r\n\r\n.qa-card-full .full-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #243746;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.qa-card-full .full-item .icon {\r\n font-size: 28px;\r\n}\r\n\r\n.qa-card-full:hover .full-item {\r\n color: #ffffff;\r\n}\r\n\r\n\/* =========================================================\r\n RESPONSIVE\r\n ========================================================= *\/\r\n\r\n@media (max-width: 992px) {\r\n .qa-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .qa-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .qa-card-full {\r\n flex-direction: column;\r\n gap: 15px;\r\n padding: 20px;\r\n }\r\n \r\n .qa-title {\r\n font-size: 24px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<!-- =========================================================\r\n HTML QUALITY ASSURANCE\r\n ========================================================= -->\r\n\r\n<div class=\"qa-section\">\r\n\r\n <!-- Judul -->\r\n <h2 class=\"qa-title\">\u2728 Quality <span>Assurance<\/span><\/h2>\r\n <p class=\"qa-subtitle\">Standar kualitas lulusan SDIT Permata Mojokerto<\/p>\r\n\r\n <!-- Grid -->\r\n <div class=\"qa-grid\">\r\n\r\n <!-- CARD 1 -->\r\n <div class=\"qa-card\">\r\n <span class=\"icon\">\ud83d\udcaa<\/span>\r\n <h3>Pribadi Tangguh<\/h3>\r\n <p>Menjadi pribadi yang sungguh-sungguh, disiplin, dan mampu menahan hawa nafsunya<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 2 -->\r\n <div class=\"qa-card\">\r\n <span class=\"icon\">\ud83d\udcd6<\/span>\r\n <h3>Ahli Al-Quran<\/h3>\r\n <p>Memiliki kemampuan membaca, menghafal, dan memahami Al-Qur'an dengan baik<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 3 -->\r\n <div class=\"qa-card\">\r\n <span class=\"icon\">\ud83c\udf1f<\/span>\r\n <h3>Berakhlak Mulia<\/h3>\r\n <p>Berkepribadian yang matang dan berakhlak mulia<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 4 -->\r\n <div class=\"qa-card\">\r\n <span class=\"icon\">\ud83d\udd4b<\/span>\r\n <h3>Aqidah Lurus<\/h3>\r\n <p>Memiliki aqidah yang lurus<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 5 -->\r\n <div class=\"qa-card\">\r\n <span class=\"icon\">\ud83e\udd32<\/span>\r\n <h3>Ibadah Benar<\/h3>\r\n <p>Melakukan ibadah yang benar<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 6 -->\r\n <div class=\"qa-card\">\r\n <span class=\"icon\">\ud83c\udf0d<\/span>\r\n <h3>Wawasan Luas<\/h3>\r\n <p>Memiliki wawasan yang luas<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 7: Fasilitas -->\r\n <div class=\"qa-card\">\r\n <span class=\"icon\">\ud83c\udfeb<\/span>\r\n <h3>Fasilitas<\/h3>\r\n <p>Didukung dengan fasilitas belajar yang representatif dan modern<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 8: Ketrampilan Hidup (FULL WIDTH) -->\r\n <div class=\"qa-card-full\">\r\n <span class=\"full-item\">\r\n <span class=\"icon\">\ud83d\udee0\ufe0f<\/span> Ketrampilan Hidup\r\n <\/span>\r\n <span class=\"full-item\">\r\n <span class=\"icon\">\ud83c\udfaf<\/span> Life Skills\r\n <\/span>\r\n <span class=\"full-item\">\r\n <span class=\"icon\">\ud83e\udde0<\/span> Kemandirian\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-ae3a1a2 e-con e-atomic-element e-flexbox-base e-ae3a1a2-c5ee118 \" data-id=\"ae3a1a2\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"ae3a1a2\">\n <section class=\"elementor-element elementor-element-f4c7162 e-con e-atomic-element e-flexbox-base e-f4c7162-9083852 \" data-id=\"f4c7162\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f4c7162\">\n <div class=\"elementor-element elementor-element-5c7e8e0 e-con e-atomic-element e-flexbox-base e-5c7e8e0-fff3c16 \" data-id=\"5c7e8e0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5c7e8e0\">\n \t\t<div class=\"elementor-element elementor-element-8fea170 elementor-widget elementor-widget-image\" data-id=\"8fea170\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-300x300.webp\" class=\"attachment-medium size-medium wp-image-1249\" alt=\"\" srcset=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-300x300.webp 300w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-1024x1024.webp 1024w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-150x150.webp 150w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-768x768.webp 768w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-1536x1536.webp 1536w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-2048x2048.webp 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2fd425f e-con e-atomic-element e-flexbox-base e-2fd425f-70ea93f \" data-id=\"2fd425f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2fd425f\">\n \t\t\t<img class=\"e-image-base \" data-interaction-id=\"1d1ef2f\"\/>\t\t\t\t\t<h1 data-interaction-id=\"f8a7987\" class=\"e-f8a7987-9be8cde e-heading-base\">Tumbuhkan Potensi, Mulai dari Sini!<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-5113df4 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"5113df4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/ppdb.sitpermata.id\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Daftar Sekarang<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n<div class=\"elementor-element elementor-element-757dc9a e-flex e-con-boxed e-con e-parent\" data-id=\"757dc9a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0028dc9 elementor-widget elementor-widget-html\" data-id=\"0028dc9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n TESTIMONI SDIT PERMATA \u2014 MODERN SLIDER (Elementor HTML Widget)\r\n WARNA DOMINAN #007fae (BIRU)\r\n========================================================= -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\/>\r\n\r\n<section class=\"phm-testi\" id=\"phmTesti\">\r\n <div class=\"phm-testi__head\">\r\n <span class=\"phm-testi__eyebrow\">\ud83d\udcac Apa Kata Mereka<\/span>\r\n <h2 class=\"phm-testi__title\">Testimoni <span>Orang Tua<\/span><\/h2>\r\n <p class=\"phm-testi__sub\">Pendapat dan kesan orang tua tentang kegiatan Student-Led Conference dan SDIT Permata<\/p>\r\n <\/div>\r\n\r\n <!-- ===== VIDEO YOUTUBE & INSTAGRAM GRID ===== -->\r\n <div class=\"phm-testi__video-grid\">\r\n <!-- Video 1 - YouTube -->\r\n <div class=\"phm-testi__video-wrapper\">\r\n <div class=\"phm-testi__video-container\">\r\n <iframe \r\n src=\"https:\/\/www.youtube.com\/embed\/gp08uxCNY7g\" \r\n title=\"Video Testimoni SDIT Permata 1\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n <!-- Video 2 - YouTube -->\r\n <div class=\"phm-testi__video-wrapper\">\r\n <div class=\"phm-testi__video-container\">\r\n <iframe \r\n src=\"https:\/\/www.youtube.com\/embed\/CVTj9U2qfKI\" \r\n title=\"Video Testimoni SDIT Permata 2\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n <!-- Video 3 - YouTube -->\r\n <div class=\"phm-testi__video-wrapper\">\r\n <div class=\"phm-testi__video-container\">\r\n <iframe \r\n src=\"https:\/\/www.youtube.com\/embed\/KLnAmvK2KRw\" \r\n title=\"Video Testimoni SDIT Permata 3\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n <!-- Video 4 - YouTube -->\r\n <div class=\"phm-testi__video-wrapper\">\r\n <div class=\"phm-testi__video-container\">\r\n <iframe \r\n src=\"https:\/\/www.youtube.com\/embed\/MIUCmyA82XQ\" \r\n title=\"Video Testimoni SDIT Permata 4\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n <!-- Video 5 - Instagram (dijadikan landscape juga) -->\r\n <div class=\"phm-testi__video-wrapper\">\r\n <div class=\"phm-testi__video-container phm-testi__video-instagram\">\r\n <blockquote class=\"instagram-media\" \r\n data-instgrm-permalink=\"https:\/\/www.instagram.com\/reel\/DZPgNrONc7E\/?utm_source=ig_embed&utm_campaign=loading\"\r\n data-instgrm-version=\"14\"\r\n style=\"position:absolute;top:0;left:0;width:100%;height:100%;border:none;padding:0;margin:0;\">\r\n <\/blockquote>\r\n <\/div>\r\n <\/div>\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 <article class=\"phm-card\" data-accent=\"blue\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">OW<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phm-card__quote-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7.17 6C4.87 6 3 7.87 3 10.17V17h6.83v-6.83H5.83c0-1.29 1.05-2.34 2.34-2.34V6ZM17.17 6c-2.3 0-4.17 1.87-4.17 4.17V17H20v-6.83h-4.17c0-1.29 1.05-2.34 2.34-2.34V6Z\" fill=\"#fff\"\/><\/svg>\r\n <\/div>\r\n <p class=\"phm-card__text\">\r\n <span class=\"phm-short\">\"Kegiatan Student-Led Conference memberikan kesempatan bagi kami untuk melihat secara langsung perkembangan dan proses belajar anak.\"<\/span>\r\n <span class=\"phm-full\" hidden>\"Kegiatan Student-Led Conference memberikan kesempatan bagi kami untuk melihat secara langsung perkembangan dan proses belajar anak.\"\r\n\r\nOrang tua dapat mengenal lebih dekat perkembangan, kemampuan, dan potensi anak selama mengikuti proses pembelajaran.<\/span>\r\n <button type=\"button\" class=\"phm-card__toggle\">Baca Selengkapnya<\/button>\r\n <\/p>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">\ud83c\udf1f Melihat Perkembangan Anak<\/div>\r\n <div class=\"phm-card__role\">Orang tua dapat mengenal lebih dekat perkembangan, kemampuan, dan potensi anak selama mengikuti proses pembelajaran.<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <!-- ===== KARTU 2 ===== -->\r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"blue\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">OW<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phm-card__quote-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7.17 6C4.87 6 3 7.87 3 10.17V17h6.83v-6.83H5.83c0-1.29 1.05-2.34 2.34-2.34V6ZM17.17 6c-2.3 0-4.17 1.87-4.17 4.17V17H20v-6.83h-4.17c0-1.29 1.05-2.34 2.34-2.34V6Z\" fill=\"#fff\"\/><\/svg>\r\n <\/div>\r\n <p class=\"phm-card__text\">\r\n <span class=\"phm-short\">\"Kami bangga melihat anak-anak mampu menyampaikan hasil belajar mereka dengan percaya diri.\"<\/span>\r\n <span class=\"phm-full\" hidden>\"Kami bangga melihat anak-anak mampu menyampaikan hasil belajar mereka dengan percaya diri.\"\r\n\r\nStudent-Led Conference menjadi wadah bagi peserta didik untuk belajar mandiri, berani berbicara, dan percaya pada kemampuan dirinya.<\/span>\r\n <button type=\"button\" class=\"phm-card__toggle\">Baca Selengkapnya<\/button>\r\n <\/p>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">\ud83d\udc99 Menumbuhkan Kepercayaan Diri<\/div>\r\n <div class=\"phm-card__role\">Student-Led Conference menjadi wadah bagi peserta didik untuk belajar mandiri, berani berbicara, dan percaya pada kemampuan dirinya.<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <!-- ===== KARTU 3 ===== -->\r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"blue\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">OW<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phm-card__quote-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7.17 6C4.87 6 3 7.87 3 10.17V17h6.83v-6.83H5.83c0-1.29 1.05-2.34 2.34-2.34V6ZM17.17 6c-2.3 0-4.17 1.87-4.17 4.17V17H20v-6.83h-4.17c0-1.29 1.05-2.34 2.34-2.34V6Z\" fill=\"#fff\"\/><\/svg>\r\n <\/div>\r\n <p class=\"phm-card__text\">\r\n <span class=\"phm-short\">\"Kegiatan ini menjadi pengalaman yang positif bagi anak maupun orang tua.\"<\/span>\r\n <span class=\"phm-full\" hidden>\"Kegiatan ini menjadi pengalaman yang positif bagi anak maupun orang tua.\"\r\n\r\nSLC mempererat hubungan antara sekolah, peserta didik, dan orang tua dalam mendukung proses tumbuh dan belajar anak.<\/span>\r\n <button type=\"button\" class=\"phm-card__toggle\">Baca Selengkapnya<\/button>\r\n <\/p>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">\ud83e\udd1d Kolaborasi Bersama<\/div>\r\n <div class=\"phm-card__role\">SLC mempererat hubungan antara sekolah, peserta didik, dan orang tua dalam mendukung proses tumbuh dan belajar anak.<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Navigasi -->\r\n <div class=\"swiper-button-prev phm-testi__nav\"><\/div>\r\n <div class=\"swiper-button-next phm-testi__nav\"><\/div>\r\n <div class=\"swiper-pagination phm-testi__dots\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.phm-testi {\r\n --phm-blue: #007fae;\r\n --phm-blue-dark: #005f82;\r\n --phm-blue-light: #E6F3F8;\r\n --phm-ink: #1f2d33;\r\n --phm-muted: #66787f;\r\n \r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 80px 24px 100px;\r\n font-family: 'Inter', 'Poppins', sans-serif;\r\n position: relative;\r\n}\r\n\r\n.phm-testi *, .phm-testi *::before, .phm-testi *::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n.phm-testi__head {\r\n text-align: center;\r\n max-width: 640px;\r\n margin: 0 auto 56px;\r\n}\r\n\r\n.phm-testi__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 13px;\r\n font-weight: 700;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n color: var(--phm-blue-dark);\r\n}\r\n\r\n.phm-testi__eyebrow::before,\r\n.phm-testi__eyebrow::after {\r\n content: \"\";\r\n width: 22px;\r\n height: 2px;\r\n background: var(--phm-blue);\r\n border-radius: 2px;\r\n}\r\n\r\n.phm-testi__title {\r\n margin: 14px 0 12px;\r\n font-size: clamp(28px, 4vw, 40px);\r\n font-weight: 800;\r\n color: var(--phm-ink);\r\n letter-spacing: -0.5px;\r\n line-height: 1.2;\r\n}\r\n\r\n.phm-testi__title span {\r\n color: var(--phm-blue);\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\/* ===== VIDEO GRID - SEMUA LANDSCAPE 16:9 ===== *\/\r\n.phm-testi__video-grid {\r\n display: grid;\r\n grid-template-columns: repeat(5, 1fr);\r\n gap: 20px;\r\n max-width: 1300px;\r\n margin: 0 auto 56px;\r\n padding: 0 16px;\r\n align-items: start;\r\n}\r\n\r\n.phm-testi__video-wrapper {\r\n position: relative;\r\n width: 100%;\r\n}\r\n\r\n\/* SEMUA VIDEO LANDSCAPE 16:9 *\/\r\n.phm-testi__video-container {\r\n position: relative;\r\n padding-bottom: 56.25%; \/* 16:9 *\/\r\n height: 0;\r\n overflow: hidden;\r\n border-radius: 14px;\r\n box-shadow: 0 8px 25px rgba(0, 127, 174, 0.12);\r\n border: 2px solid var(--phm-blue);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n background: #000;\r\n}\r\n\r\n.phm-testi__video-container:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 35px rgba(0, 127, 174, 0.2);\r\n}\r\n\r\n.phm-testi__video-container iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 12px;\r\n}\r\n\r\n\/* Instagram tetap landscape *\/\r\n.phm-testi__video-instagram {\r\n border-color: #E4405F;\r\n}\r\n\r\n.phm-testi__video-instagram:hover {\r\n border-color: #E4405F;\r\n box-shadow: 0 12px 35px rgba(228, 64, 95, 0.2);\r\n}\r\n\r\n.phm-testi__video-instagram .instagram-media {\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n min-width: auto !important;\r\n min-height: auto !important;\r\n border: none !important;\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n border-radius: 12px !important;\r\n overflow: hidden !important;\r\n}\r\n\r\n\/* Fallback untuk Instagram jika script belum load *\/\r\n.phm-testi__video-instagram .instagram-media::before {\r\n content: \"\ud83d\udcf8 Instagram Reel\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n color: #E4405F;\r\n font-weight: 600;\r\n font-size: 14px;\r\n background: rgba(255,255,255,0.9);\r\n padding: 12px 24px;\r\n border-radius: 8px;\r\n z-index: 1;\r\n}\r\n\r\n\/* ===== SLIDER ===== *\/\r\n.phm-testi__slider-wrap {\r\n position: relative;\r\n padding: 50px 40px 64px;\r\n}\r\n\r\n.phm-testi__swiper {\r\n overflow: hidden;\r\n padding: 50px 4px 50px;\r\n}\r\n\r\n.phm-testi__swiper .swiper-slide {\r\n height: auto;\r\n display: flex;\r\n}\r\n\r\n.phm-testi__swiper:not(.swiper-initialized) .swiper-wrapper {\r\n display: flex;\r\n overflow-x: auto;\r\n gap: 28px;\r\n scroll-snap-type: x mandatory;\r\n -webkit-overflow-scrolling: touch;\r\n padding-bottom: 20px;\r\n}\r\n\r\n.phm-testi__swiper:not(.swiper-initialized) .swiper-slide {\r\n flex: 0 0 85%;\r\n max-width: 400px;\r\n scroll-snap-align: start;\r\n}\r\n\r\n\/* ===== KARTU ===== *\/\r\n.phm-card {\r\n position: relative;\r\n background: #fff;\r\n border-radius: 24px;\r\n padding: 56px 30px 32px;\r\n border: 1px solid #eef2f3;\r\n box-shadow: 0 4px 20px rgba(31, 45, 51, 0.05);\r\n transition: transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s ease;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.phm-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 22px 45px rgba(31, 45, 51, 0.12);\r\n}\r\n\r\n.phm-card::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 24px;\r\n right: 24px;\r\n height: 4px;\r\n border-radius: 0 0 6px 6px;\r\n background: var(--phm-accent, var(--phm-blue));\r\n}\r\n\r\n.phm-card[data-accent=\"blue\"] { --phm-accent: var(--phm-blue); }\r\n\r\n\/* ===== AVATAR ===== *\/\r\n.phm-card__avatar-wrap {\r\n position: absolute;\r\n top: -34px;\r\n left: 30px;\r\n width: 76px;\r\n height: 76px;\r\n border-radius: 50%;\r\n padding: 3px;\r\n background: var(--phm-blue);\r\n box-shadow: 0 8px 18px rgba(0, 127, 174, 0.3);\r\n z-index: 2;\r\n}\r\n\r\n.phm-card__avatar {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n background: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 3px solid #fff;\r\n}\r\n\r\n.phm-card__avatar img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center 15%;\r\n display: block;\r\n}\r\n\r\n.phm-card__avatar .phm-initials {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 800;\r\n font-size: 22px;\r\n color: #fff;\r\n background: var(--phm-blue);\r\n}\r\n\r\n\/* ===== QUOTE ICON ===== *\/\r\n.phm-card__quote-icon {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 12px;\r\n background: var(--phm-blue);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 12px 0 18px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.phm-card__quote-icon svg {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\/* ===== TEKS ===== *\/\r\n.phm-card__text {\r\n font-size: 15.5px;\r\n line-height: 1.75;\r\n color: #3d4b51;\r\n margin-bottom: 22px;\r\n flex-grow: 1;\r\n}\r\n\r\n.phm-full { display: none; }\r\n.phm-card__text.is-expanded .phm-short { display: none; }\r\n.phm-card__text.is-expanded .phm-full { display: inline; }\r\n\r\n.phm-card__toggle {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: var(--phm-blue);\r\n cursor: pointer;\r\n margin-top: 4px;\r\n transition: opacity 0.2s;\r\n}\r\n\r\n.phm-card__toggle:hover {\r\n opacity: 0.7;\r\n text-decoration: underline;\r\n}\r\n\r\n\/* ===== FOOTER ===== *\/\r\n.phm-card__footer {\r\n border-top: 1px solid #f0f3f4;\r\n padding-top: 18px;\r\n margin-top: auto;\r\n}\r\n\r\n.phm-card__name {\r\n font-size: 16px;\r\n font-weight: 800;\r\n color: var(--phm-ink);\r\n line-height: 1.35;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.phm-card__role {\r\n font-size: 13.5px;\r\n color: var(--phm-muted);\r\n line-height: 1.5;\r\n}\r\n\r\n\/* ===== NAVIGASI ===== *\/\r\n.phm-testi__nav,\r\n.phm-testi__dots {\r\n display: none;\r\n}\r\n\r\n.phm-testi__slider-wrap.is-ready .phm-testi__nav {\r\n display: flex;\r\n}\r\n\r\n.phm-testi__slider-wrap.is-ready .phm-testi__dots {\r\n display: block;\r\n}\r\n\r\n.phm-testi__nav {\r\n width: 44px;\r\n height: 44px;\r\n background: #fff;\r\n border-radius: 50%;\r\n box-shadow: 0 8px 20px rgba(31, 45, 51, 0.1);\r\n top: 40%;\r\n z-index: 10;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.phm-testi__nav::after {\r\n font-size: 14px;\r\n font-weight: 900;\r\n color: var(--phm-blue);\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.phm-testi__nav:hover {\r\n background: var(--phm-blue);\r\n box-shadow: 0 8px 20px rgba(0, 127, 174, 0.3);\r\n}\r\n\r\n.phm-testi__nav:hover::after {\r\n color: #fff;\r\n}\r\n\r\n.swiper-button-prev.phm-testi__nav { left: 0; }\r\n.swiper-button-next.phm-testi__nav { right: 0; }\r\n\r\n\/* ===== DOTS ===== *\/\r\n.phm-testi__dots {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n bottom: 10px;\r\n text-align: center;\r\n z-index: 10;\r\n}\r\n\r\n.phm-testi__dots .swiper-pagination-bullet {\r\n width: 10px;\r\n height: 10px;\r\n background: #d8e2e4;\r\n opacity: 1;\r\n margin: 0 6px !important;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.phm-testi__dots .swiper-pagination-bullet-active {\r\n background: var(--phm-blue);\r\n width: 28px;\r\n border-radius: 6px;\r\n}\r\n\r\n\/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n\r\n\/* PC: 5 kolom *\/\r\n@media (min-width: 1025px) {\r\n .phm-testi__video-grid {\r\n grid-template-columns: repeat(5, 1fr);\r\n gap: 20px;\r\n }\r\n}\r\n\r\n\/* Tablet: 2 kolom *\/\r\n@media (min-width: 768px) and (max-width: 1024px) {\r\n .phm-testi__video-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 18px;\r\n max-width: 700px;\r\n margin: 0 auto 40px;\r\n }\r\n .phm-testi__video-container {\r\n border-radius: 12px;\r\n }\r\n .phm-testi__video-container iframe {\r\n border-radius: 10px;\r\n }\r\n}\r\n\r\n\/* Mobile: 1 kolom *\/\r\n@media (max-width: 767px) {\r\n .phm-testi__video-grid {\r\n grid-template-columns: 1fr;\r\n gap: 16px;\r\n max-width: 500px;\r\n margin: 0 auto 40px;\r\n padding: 0 8px;\r\n }\r\n .phm-testi__video-container {\r\n border-radius: 12px;\r\n border-width: 2px;\r\n }\r\n .phm-testi__video-container iframe {\r\n border-radius: 10px;\r\n }\r\n .phm-testi__video-instagram .instagram-media::before {\r\n font-size: 12px;\r\n padding: 10px 18px;\r\n }\r\n}\r\n\r\n\/* HP kecil: 1 kolom *\/\r\n@media (max-width: 480px) {\r\n .phm-testi__video-grid {\r\n gap: 14px;\r\n max-width: 400px;\r\n margin: 0 auto 32px;\r\n padding: 0 4px;\r\n }\r\n .phm-testi__video-container {\r\n border-radius: 10px;\r\n border-width: 2px;\r\n }\r\n .phm-testi__video-container iframe {\r\n border-radius: 8px;\r\n }\r\n .phm-testi__video-instagram .instagram-media::before {\r\n font-size: 10px;\r\n padding: 8px 14px;\r\n }\r\n}\r\n\r\n\/* Tablet & Mobile navigasi disembunyikan *\/\r\n@media (max-width: 1024px) {\r\n .phm-testi__nav { display: none !important; }\r\n .phm-testi__slider-wrap { padding-left: 20px; padding-right: 20px; }\r\n}\r\n\r\n@media (max-width: 680px) {\r\n .phm-testi { padding: 60px 16px 70px; }\r\n .phm-card { padding: 48px 24px 28px; }\r\n .phm-card__avatar-wrap { left: 24px; width: 68px; height: 68px; top: -30px; }\r\n .phm-card__avatar .phm-initials { font-size: 18px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .phm-card { transition: none; }\r\n .phm-testi__video-container { transition: none; }\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\r\n<script async src=\"\/\/www.instagram.com\/embed.js\"><\/script>\r\n\r\n<script>\r\n(function($) {\r\n 'use strict';\r\n \r\n var isElementorEdit = (window.elementorFrontend && window.elementorFrontend.isEditMode());\r\n\r\n function initPhmTesti() {\r\n var section = document.getElementById('phmTesti');\r\n if (!section) return;\r\n\r\n section.addEventListener('click', function (e) {\r\n var btn = e.target.closest('.phm-card__toggle');\r\n if (!btn) return;\r\n e.preventDefault();\r\n var wrap = btn.closest('.phm-card__text');\r\n var isExpanded = wrap.classList.toggle('is-expanded');\r\n btn.textContent = isExpanded ? 'Sembunyikan' : 'Baca Selengkapnya';\r\n });\r\n\r\n \/\/ Refresh Instagram embed setelah DOM ready\r\n if (window.instgrm) {\r\n window.instgrm.Embeds.process();\r\n }\r\n\r\n if (typeof window.Swiper !== 'undefined') {\r\n var sliderWrap = document.querySelector('.phm-testi__slider-wrap');\r\n var swiperContainer = document.querySelector('.phm-testi__swiper');\r\n \r\n if (!sliderWrap || !swiperContainer) return;\r\n\r\n if (sliderWrap.swiperInstance) {\r\n sliderWrap.swiperInstance.destroy(true, true);\r\n }\r\n\r\n var swiper = new window.Swiper(swiperContainer, {\r\n slidesPerView: 1,\r\n spaceBetween: 28,\r\n speed: 800,\r\n loop: true,\r\n grabCursor: true,\r\n autoplay: {\r\n delay: 4500,\r\n disableOnInteraction: false,\r\n pauseOnMouseEnter: true\r\n },\r\n pagination: {\r\n el: '.phm-testi__dots',\r\n clickable: true\r\n },\r\n navigation: {\r\n nextEl: '.swiper-button-next.phm-testi__nav',\r\n prevEl: '.swiper-button-prev.phm-testi__nav'\r\n },\r\n breakpoints: {\r\n 0: { slidesPerView: 1 },\r\n 768: { slidesPerView: 2 },\r\n 1100: { slidesPerView: 3 }\r\n },\r\n on: {\r\n init: function () {\r\n sliderWrap.classList.add('is-ready');\r\n }\r\n }\r\n });\r\n \r\n sliderWrap.swiperInstance = swiper;\r\n }\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initPhmTesti);\r\n } else {\r\n initPhmTesti();\r\n }\r\n\r\n if (window.elementorFrontend) {\r\n window.elementorFrontend.hooks.addAction('frontend\/element_ready\/html.default', function($scope) {\r\n if ($scope.find('#phmTesti').length) {\r\n setTimeout(initPhmTesti, 150);\r\n }\r\n });\r\n \r\n window.elementor.on('document:loaded', function() {\r\n setTimeout(initPhmTesti, 300);\r\n });\r\n }\r\n})(window.jQuery);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SDIT Permata – Penerimaan Peserta Didik Baru \ud83c\udf92 Pendaftaran Dibuka Penerimaan Peserta Didik Baru Bergabunglah dengan keluarga besar SDIT Permata! Tempat di mana anak-anak belajar dengan gembira, bermain sambil belajar, dan tumbuh menjadi generasi cerdas & berkarakter. \ud83d\udccb Daftar Sekarang \ud83c\udfaf Visi & Misi Misi SDIT Permata 1. Membiasakan siswa membaca, menghafal, dan memahami Al-Qur’an […]<\/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:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":602,"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":1580,"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/1580"}],"wp:attachment":[{"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}