{"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-10T02:56:53","modified_gmt":"2026-09-10T02:56:53","slug":"beranda","status":"publish","type":"page","link":"https:\/\/pgitpermata.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 KBIT Permata Kota Mojokerto - 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', 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:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2025-08-15-at-11.11.54-1024x576-1.jpeg');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: scroll;\r\n\r\n padding: 80px 0 0 0;\r\n margin: 0;\r\n\r\n \/* ===== BORDER RADIUS - HANYA BAWAH ===== *\/\r\n border-radius: 0 0 50px 50px;\r\n }\r\n\r\n \/* =========================================================\r\n OVERLAY - DENGAN BORDER RADIUS MENGIKUTI CONTAINER\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.55);\r\n z-index: 1;\r\n \/* ===== BORDER RADIUS - HANYA BAWAH ===== *\/\r\n border-radius: 0 0 50px 50px;\r\n }\r\n\r\n \/* =========================================================\r\n CONTENT WRAPPER\r\n ========================================================= *\/\r\n\r\n .content-wrapper {\r\n position: relative;\r\n z-index: 2;\r\n\r\n width: 100%;\r\n max-width: 1200px;\r\n\r\n padding: 2rem 2rem;\r\n\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n\r\n gap: 2rem;\r\n\r\n align-items: center;\r\n\r\n min-height: calc(100vh - 80px);\r\n }\r\n\r\n \/* =========================================================\r\n KOLOM KIRI - EFEK RINGAN\r\n ========================================================= *\/\r\n\r\n .left-col {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n\r\n gap: 1rem;\r\n\r\n padding: 2rem 2.2rem;\r\n\r\n background: rgba(0, 0, 0, 0.35);\r\n\r\n border-radius: 1.5rem;\r\n\r\n border: 1px solid rgba(255, 153, 0, 0.10);\r\n\r\n box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4);\r\n\r\n min-height: 300px;\r\n\r\n transition: background 0.25s ease,\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease,\r\n border-color 0.25s ease;\r\n\r\n position: relative;\r\n }\r\n\r\n .left-col::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 1.5rem;\r\n background: linear-gradient(135deg, rgba(255, 153, 0, 0.05), transparent 50%, rgba(255, 153, 0, 0.05));\r\n z-index: -1;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n pointer-events: none;\r\n }\r\n\r\n .left-col:hover::before {\r\n opacity: 1;\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 box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);\r\n border-color: rgba(255, 153, 0, 0.20);\r\n }\r\n\r\n \/* =========================================================\r\n TEXT SLIDER\r\n ========================================================= *\/\r\n\r\n .text-slide .slide-item {\r\n display: none;\r\n opacity: 0;\r\n transition: opacity 0.25s ease;\r\n }\r\n\r\n .text-slide .slide-item.active {\r\n display: block;\r\n opacity: 1;\r\n }\r\n\r\n \/* =========================================================\r\n JUDUL - WARNA ORANGE\r\n ========================================================= *\/\r\n\r\n .text-slide .slide-item h2 {\r\n font-size: clamp(1.8rem, 4vw, 3rem);\r\n font-weight: 700;\r\n line-height: 1.1;\r\n color: #FF9900;\r\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\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.7;\r\n max-width: 95%;\r\n margin-top: 0.5rem;\r\n font-weight: 300;\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 2rem;\r\n background: linear-gradient(135deg, #FF9900, #E68A00);\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.2s ease;\r\n box-shadow: 0 4px 16px rgba(255, 153, 0, 0.2);\r\n text-decoration: none;\r\n border: 1px solid rgba(255, 153, 0, 0.25);\r\n text-align: center;\r\n width: fit-content;\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 24px rgba(255, 153, 0, 0.3);\r\n background: linear-gradient(135deg, #FFAA33, #FF9900);\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: 250px;\r\n }\r\n\r\n \/* =========================================================\r\n IMAGE SLIDE\r\n ========================================================= *\/\r\n\r\n .right-col .image-slide {\r\n position: absolute;\r\n 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.4s ease;\r\n filter: drop-shadow(0 20px 16px rgba(0, 0, 0, 0.35));\r\n }\r\n\r\n .right-col .image-slide.active {\r\n opacity: 1;\r\n }\r\n\r\n .right-col .image-slide svg,\r\n .right-col .image-slide img {\r\n width: auto;\r\n height: 100%;\r\n max-height: 380px;\r\n max-width: 100%;\r\n object-fit: contain;\r\n border-radius: 20px;\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.7rem;\r\n position: absolute;\r\n bottom: 2rem;\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: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 2px solid rgba(255, 255, 255, 0.15);\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n position: relative;\r\n }\r\n\r\n .dot.active {\r\n background: #FF9900;\r\n border-color: #FF9900;\r\n transform: scale(1.2);\r\n box-shadow: 0 0 12px rgba(255, 153, 0, 0.3);\r\n }\r\n\r\n .dot:hover {\r\n transform: scale(1.1);\r\n background: rgba(255, 153, 0, 0.3);\r\n }\r\n\r\n \/* =========================================================\r\n RESPONSIVE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 1280px) {\r\n .content-wrapper {\r\n max-width: 1100px;\r\n padding: 1.8rem 2rem;\r\n gap: 1.8rem;\r\n }\r\n .left-col {\r\n padding: 1.8rem 2rem;\r\n min-height: 280px;\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 .content-wrapper {\r\n gap: 1.5rem;\r\n padding: 1.5rem 1.8rem;\r\n min-height: calc(100vh - 80px);\r\n }\r\n .left-col {\r\n padding: 1.5rem 1.8rem;\r\n min-height: 260px;\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 \/* ===== BORDER RADIUS TABLET ===== *\/\r\n .slider-container {\r\n border-radius: 0 0 40px 40px;\r\n }\r\n .slider-container::before {\r\n border-radius: 0 0 40px 40px;\r\n }\r\n }\r\n\r\n @media (max-width: 820px) {\r\n .slider-container {\r\n padding: 70px 0 0;\r\n min-height: 100vh;\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 - 70px);\r\n padding: 2rem;\r\n max-width: 700px;\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.40);\r\n padding: 2rem 2.2rem;\r\n border-radius: 1.8rem;\r\n gap: 1rem;\r\n }\r\n .right-col {\r\n order: 1;\r\n aspect-ratio: 16 \/ 10;\r\n min-height: 280px;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 320px;\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: 60px 0 0;\r\n \/* ===== BORDER RADIUS HP LANDSCAPE ===== *\/\r\n border-radius: 0 0 30px 30px;\r\n }\r\n .slider-container::before {\r\n border-radius: 0 0 30px 30px;\r\n }\r\n .content-wrapper {\r\n padding: 1.5rem;\r\n gap: 1.5rem;\r\n min-height: calc(100vh - 60px);\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 }\r\n .right-col {\r\n min-height: 220px;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 260px;\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: 14px;\r\n height: 14px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .slider-container {\r\n padding: 55px 0 0;\r\n \/* ===== BORDER RADIUS HP PORTRAIT ===== *\/\r\n border-radius: 0 0 25px 25px;\r\n }\r\n .slider-container::before {\r\n border-radius: 0 0 25px 25px;\r\n }\r\n .content-wrapper {\r\n padding: 1rem;\r\n gap: 1rem;\r\n min-height: calc(100vh - 55px);\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 }\r\n .right-col {\r\n min-height: 180px;\r\n aspect-ratio: 4 \/ 3;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 210px;\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: 12px;\r\n height: 12px;\r\n }\r\n }\r\n\r\n @media (max-width: 380px) {\r\n .slider-container {\r\n padding: 50px 0 0;\r\n \/* ===== BORDER RADIUS HP KECIL ===== *\/\r\n border-radius: 0 0 20px 20px;\r\n }\r\n .slider-container::before {\r\n border-radius: 0 0 20px 20px;\r\n }\r\n .content-wrapper {\r\n padding: 0.8rem;\r\n gap: 0.8rem;\r\n min-height: calc(100vh - 50px);\r\n }\r\n .left-col {\r\n padding: 0.9rem;\r\n min-height: 150px;\r\n border-radius: 1rem;\r\n gap: 0.5rem;\r\n }\r\n .right-col {\r\n min-height: 150px;\r\n }\r\n .right-col .image-slide img {\r\n max-height: 170px;\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: 10px;\r\n height: 10px;\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 .right-col .image-slide {\r\n transition: opacity 0.2s ease;\r\n }\r\n .left-col {\r\n transition: none;\r\n }\r\n .left-col::before {\r\n transition: none;\r\n }\r\n .btn-primary {\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 - KBIT 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 -->\r\n <div class=\"slide-item active\" data-index=\"0\">\r\n\r\n <h2>\r\n \ud83c\udfeb Penerimaan Peserta Didik Baru KBIT Permata\r\n <\/h2>\r\n\r\n <p>\r\n \ud83c\udf89 Bergabunglah dengan keluarga besar KBIT Permata Kota Mojokerto! \ud83c\udf1f\r\n Tempat di mana anak-anak belajar dengan gembira \ud83c\udf88,\r\n bermain sambil belajar \ud83e\uddf8, dan tumbuh menjadi generasi\r\n cerdas \ud83e\udde0, berakhlak mulia \ud83e\udd32, & berkarakter Qur'ani \ud83d\udcd6.\r\n <\/p>\r\n\r\n <a href=\"https:\/\/ppdb.sitpermata.id\/\" class=\"btn-primary no-underline\">\r\n \ud83d\udccb Daftar Sekarang\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <!-- SLIDE 2 -->\r\n <div class=\"slide-item\" data-index=\"1\">\r\n\r\n <h2>\r\n \ud83c\udfa8 Pembelajaran Kreatif & Menyenangkan\r\n <\/h2>\r\n\r\n <p>\r\n \ud83d\udd8c\ufe0f Beragam aktivitas seru seperti menggambar, bernyanyi \ud83c\udfb5,\r\n menari \ud83d\udc83, olahraga \u26bd, dan bermain peran \ud83c\udfad yang mengasah\r\n kreativitas \u2728, motorik \ud83e\udd38, serta kecerdasan sosial anak \ud83e\udd1d.\r\n Dilengkapi dengan pembelajaran Al-Quran \ud83d\udcd6 dan nilai-nilai\r\n Islami \u262a\ufe0f dalam setiap kegiatan.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <!-- SLIDE 3 -->\r\n <div class=\"slide-item\" data-index=\"2\">\r\n\r\n <h2>\r\n \ud83c\udf1f Prestasi & Perkembangan Anak\r\n <\/h2>\r\n\r\n <p>\r\n \u2728 Setiap anak adalah bintang! \u2b50 Dengan pendekatan\r\n pembelajaran yang menyenangkan \ud83c\udf88 dan guru-guru yang\r\n penuh kasih \ud83d\udc96 serta berkompeten \ud83d\udc69\u200d\ud83c\udfeb, kami bangga melihat\r\n perkembangan luar biasa anak-anak kami. Dari segi\r\n akademik \ud83d\udcda, seni \ud83c\udfad, hingga karakter Islami \u262a\ufe0f, semua\r\n berkembang optimal \ud83d\ude80.\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 KBIT 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:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/09\/Tanpa-judul-Konten-Instagram-34.png\"\r\n alt=\"KBIT Permata\"\r\n loading=\"lazy\"\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:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/24-scaled.png\"\r\n alt=\"Kegiatan KBIT Permata\"\r\n loading=\"lazy\"\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:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/25-scaled.png\"\r\n alt=\"Prestasi KBIT Permata\"\r\n loading=\"lazy\"\r\n \/>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- =====================================================\r\n DOTS\r\n ====================================================== -->\r\n\r\n <div class=\"dots-container\">\r\n\r\n <span\r\n class=\"dot active\"\r\n data-index=\"0\">\r\n <\/span>\r\n\r\n <span\r\n class=\"dot\"\r\n data-index=\"1\">\r\n <\/span>\r\n\r\n <span\r\n class=\"dot\"\r\n data-index=\"2\">\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- =========================================================\r\n JAVASCRIPT SLIDER - RINGAN\r\n ========================================================== -->\r\n\r\n <script>\r\n\r\n (function () {\r\n\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\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 })();\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__width-initial 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=\"2560\" height=\"2560\" src=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/25-scaled.png\" class=\"attachment-full size-full wp-image-1126\" alt=\"\" srcset=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/25-scaled.png 2560w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/25-300x300.png 300w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/25-1024x1024.png 1024w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/25-150x150.png 150w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/25-768x768.png 768w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/25-1536x1536.png 1536w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/25-2048x2048.png 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/>\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 KBIT <br>Permata<\/h5>\n\t\t\t\t<div class=\"elementor-element elementor-element-449b519 elementor-widget elementor-widget-text-editor\" data-id=\"449b519\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong><i>Menjadi Kelompok Bermain terdepan dalam mewujudkan dalam mewujudkan generasi Al-Qur\u2019an, cerdas, dan berjiwa pemimpin.<\/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 KBIT 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:\/\/pgitpermata.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"540\" src=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/mpls-kbit.png\" class=\"attachment-full size-full wp-post-image\" alt=\"MPLS Menyenangkan di KBIT Permata: Dua Pekan Penuh Keceriaan, Kemandirian, dan Pengalaman Bermakna\" loading=\"lazy\" srcset=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/mpls-kbit.png 960w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/mpls-kbit-300x169.png 300w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/mpls-kbit-768x432.png 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/>\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:\/\/pgitpermata.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t\tMPLS Menyenangkan di KBIT Permata: Dua Pekan Penuh Keceriaan, Kemandirian, dan Pengalaman Bermakna\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 KBIT Permata sukses menyelenggarakan Masa Pengenalan Lingkungan Sekolah (MPLS) Menyenangkan selama dua pekan, mulai 13 hingga 24...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/pgitpermata.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:\/\/pgitpermata.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1668\" height=\"943\" src=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-21-2026-01_58_24-PM.png\" class=\"attachment-full size-full wp-post-image\" alt=\"Si Kecil Suka Tiup Balon? Ternyata Ini Rahasia \u201cAjaib\u201d di Balik Keseruannya!\" loading=\"lazy\" srcset=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-21-2026-01_58_24-PM.png 1668w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-21-2026-01_58_24-PM-300x170.png 300w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-21-2026-01_58_24-PM-1024x579.png 1024w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-21-2026-01_58_24-PM-768x434.png 768w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-21-2026-01_58_24-PM-1536x868.png 1536w\" sizes=\"auto, (max-width: 1668px) 100vw, 1668px\" \/>\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:\/\/pgitpermata.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t\tSi Kecil Suka Tiup Balon? Ternyata Ini Rahasia \u201cAjaib\u201d di Balik Keseruannya!\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\tPernahkah Ayah Bunda melihat si kecil pipinya sampai kembang-kempis berusaha meniup balon warna-warni? Mungkin terlihat...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/pgitpermata.sch.id\/?p=469\" class=\"hfe-read-more\" rel=\"bookmark\">\n\t\t\t\t\t\tBaca Selengkapnya \u2192\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/section>\n<div class=\"elementor-element elementor-element-cbb2ea6 e-con e-atomic-element e-flexbox-base e-cbb2ea6-a641792 \" data-id=\"cbb2ea6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cbb2ea6\">\n <section class=\"elementor-element elementor-element-f869a31 e-con e-atomic-element e-flexbox-base e-f869a31-6d8fa94 \" data-id=\"f869a31\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f869a31\">\n <div class=\"elementor-element elementor-element-2777ca8 e-con e-atomic-element e-flexbox-base e-2777ca8-56649eb \" data-id=\"2777ca8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2777ca8\">\n \t\t\t<img decoding=\"async\" class=\"e-image-base \" data-interaction-id=\"861aca3\" id=\"1129\" src=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/28-scaled.png\" width=\"2560\" height=\"2560\" srcset=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/28-scaled.png 2560w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/28-300x300.png 300w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/28-1024x1024.png 1024w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/28-150x150.png 150w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/28-768x768.png 768w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/28-1536x1536.png 1536w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/28-2048x2048.png 2048w\" alt=\"\"\/>\t\t\t\t\t<h1 data-interaction-id=\"916bea5\" class=\"e-916bea5-a53f232 e-heading-base\">Study Visual<\/h1>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4894f63 e-con e-atomic-element e-flexbox-base e-4894f63-2c4665c \" data-id=\"4894f63\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4894f63\">\n \t\t\t<img decoding=\"async\" class=\"e-image-base e-eb8a007-51bedcc\" data-interaction-id=\"eb8a007\" id=\"836\" src=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/07\/20260812_114505_0000.png\" width=\"1107\" height=\"1107\" srcset=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/07\/20260812_114505_0000.png 1107w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/07\/20260812_114505_0000-300x300.png 300w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/07\/20260812_114505_0000-1024x1024.png 1024w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/07\/20260812_114505_0000-150x150.png 150w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/07\/20260812_114505_0000-768x768.png 768w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/07\/elementor\/thumbs\/20260812_114505_0000-rrs71l4c97mlufat3nv6m8fv458jfjyqxk9vhsy02w.png 100w\" alt=\"\"\/>\t\t\t\t\t<h1 data-interaction-id=\"bcf1e5b\" class=\"e-bcf1e5b-0bdee46 e-heading-base\">Program Unggulan<\/h1>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-b035202 e-con e-atomic-element e-flexbox-base e-b035202-8defb69 \" data-id=\"b035202\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b035202\">\n \t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"e-image-base \" data-interaction-id=\"39a86a6\" id=\"1130\" src=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-scaled.png\" width=\"2560\" height=\"2560\" srcset=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-scaled.png 2560w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-300x300.png 300w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-1024x1024.png 1024w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-150x150.png 150w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-768x768.png 768w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-1536x1536.png 1536w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-2048x2048.png 2048w\" alt=\"\"\/>\t\t\t\t\t<h1 data-interaction-id=\"6a01e2c\" class=\"e-6a01e2c-ff92d0f e-heading-base\">Home Visit<\/h1>\n\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n<div class=\"elementor-element elementor-element-d2de8a3 e-con e-atomic-element e-flexbox-base e-1473273 \" data-id=\"d2de8a3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d2de8a3\">\n \t\t\t<h1 data-interaction-id=\"a0d11cd\" class=\"e-a0d11cd-815bbdf e-heading-base\">Fasilitas<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c84e24 elementor-widget elementor-widget-html\" data-id=\"3c84e24\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\n SLIDER GALERI HORIZONTAL (INFINITE LOOP)\r\n Slide tengah aktif: background ORANGE #FF9900 & PUTIH CERAH\r\n Mendukung multi-instance & fallback gambar\r\n Warna: #FF9900 (ORANGE) & PUTIH CERAH\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;\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 ORANGE #FF9900 --- *\/\r\n.slick-center .slider-card {\r\n background-color: #FF9900;\r\n box-shadow: 0 8px 30px rgba(255, 153, 0, 0.35);\r\n}\r\n\r\n.slick-center .slider-card .card-content {\r\n background-color: #FF9900;\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: #fff8f0;\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 ORANGE #FF9900 --- *\/\r\n.slider-card:hover {\r\n background-color: #FF9900 !important;\r\n box-shadow: 0 8px 30px rgba(255, 153, 0, 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: #FF9900 !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: #fff8f0 !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: #f5f0eb;\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: #4A2A1A;\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: #6B4A3A;\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 ORANGE #FF9900 --- *\/\r\n.horizontal-slider .slick-prev,\r\n.horizontal-slider .slick-next {\r\n width: 48px;\r\n height: 48px;\r\n background: #FF9900 !important;\r\n border-radius: 50%;\r\n z-index: 20;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 6px 16px rgba(255, 153, 0, 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: #E68A00 !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 DATA SLIDER GALERI\r\n ===========================================================\r\n UKS - Ruang kesehatan dengan fasilitas lengkap\r\n Kamar Mandi - Fasilitas kebersihan yang bersih & aman\r\n Simulasi Sentra - Pembelajaran interaktif berbasis sentra\r\n Playground - Area bermain outdoor yang aman\r\n Sudut Baca - Ruang literasi yang nyaman\r\n =========================================================== *\/\r\n\r\n var sliderData = [\r\n {\r\n title: \"Playground\",\r\n description: \"Area bermain outdoor yang aman dan menyenangkan untuk mendukung aktivitas fisik, kreativitas, serta interaksi sosial anak.\",\r\n image: \"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tempat-Bermain-2-scaled.jpg\"\r\n },\r\n {\r\n title: \"Kamar Mandi\",\r\n description: \"Fasilitas kamar mandi yang bersih, nyaman, dan aman dengan desain ramah anak serta dilengkapi dengan perlengkapan kebersihan yang memadai.\",\r\n image: \"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-27-2026-10_12_15-AM.png\"\r\n },\r\n {\r\n title: \"UKS\",\r\n description: \"Ruang UKS yang nyaman dan lengkap dengan peralatan medis dasar serta tenaga kesehatan terlatih untuk mendukung kesehatan dan keselamatan anak.\",\r\n image: \"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-27-2026-10_09_10-AM.png\"\r\n },\r\n {\r\n title: \"Simulasi Sentra\",\r\n description: \"Pembelajaran interaktif berbasis sentra yang dirancang untuk mengembangkan kemampuan kognitif, motorik, sosial, dan emosional anak secara holistik.\",\r\n image: \"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-09_02_44-AM.png\"\r\n },\r\n {\r\n title: \"Playground\",\r\n description: \"Area bermain yang aman dan menyenangkan untuk mendukung aktivitas fisik, kreativitas, serta interaksi sosial anak.\",\r\n image: \"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tempat-Bermain-1-scaled.jpg\"\r\n },\r\n {\r\n title: \"Sudut Baca\",\r\n description: \"Ruang literasi yang nyaman dengan koleksi buku bergambar dan cerita anak untuk menumbuhkan minat baca dan imajinasi sejak dini.\",\r\n image: \"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tempat-Literasi-1-scaled.jpg\"\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, '"');\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\/FF9900\/white?text=' + encodeURIComponent(item.title) + '\\';\" \/>' +\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 }\r\n\r\n function boot() {\r\n var jq = window.jQuery;\r\n jq(document).ready(function ($) {\r\n initAllSliders($);\r\n });\r\n }\r\n\r\n \/\/ --- Muat jQuery & Slick ---\r\n loadScript('https:\/\/code.jquery.com\/jquery-3.6.0.min.js', hasJQuery)\r\n .then(function () {\r\n return loadScript('https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick.min.js', hasSlick);\r\n })\r\n .then(boot)\r\n .catch(function (err) {\r\n console.error('[Slider Galeri] Gagal inisialisasi:', err);\r\n var containers = document.querySelectorAll('[data-slider-instance]');\r\n containers.forEach(function (c) {\r\n var skeleton = c.querySelector('.slider-skeleton');\r\n if (skeleton) {\r\n skeleton.innerHTML = '<p style=\"width:100%;text-align:center;color:#7a8a94;padding:40px 0;\">Galeri tidak dapat dimuat. Coba muat ulang halaman.<\/p>';\r\n }\r\n });\r\n });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-dffe69c e-con e-atomic-element e-flexbox-base e-dffe69c-8aeb8d7 \" data-id=\"dffe69c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dffe69c\">\n <section class=\"elementor-element elementor-element-a2ef5cd e-con e-atomic-element e-flexbox-base e-a2ef5cd-41b2691 \" data-id=\"a2ef5cd\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a2ef5cd\">\n <div class=\"elementor-element elementor-element-215aa64 e-con e-atomic-element e-flexbox-base e-215aa64-f2e6262 \" data-id=\"215aa64\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"215aa64\">\n \t\t<div class=\"elementor-element elementor-element-575b7ea elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"575b7ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-300x300.png\" class=\"attachment-medium size-medium wp-image-1130\" alt=\"\" srcset=\"https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-300x300.png 300w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-1024x1024.png 1024w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-150x150.png 150w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-768x768.png 768w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-1536x1536.png 1536w, https:\/\/pgitpermata.sch.id\/wp-content\/uploads\/2026\/08\/29-2048x2048.png 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-60824ad e-con e-atomic-element e-flexbox-base e-60824ad-4662c62 \" data-id=\"60824ad\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"60824ad\">\n \t\t\t<img class=\"e-image-base \" data-interaction-id=\"3357710\"\/>\t\t\t\t\t<h1 data-interaction-id=\"7f48fb3\" class=\"e-7f48fb3-9708643 e-heading-base\">Wujudkan Prestasi, Mulai di Sini!<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-b31c0aa elementor-hidden-tablet elementor-hidden-mobile elementor-align-center elementor-widget elementor-widget-button\" data-id=\"b31c0aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/ppdb.sitpermata.id\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Daftar Sekarang<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n<div class=\"elementor-element elementor-element-c7b118e e-con e-atomic-element e-flexbox-base e-58010e7 \" data-id=\"c7b118e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c7b118e\">\n \t\t<div class=\"elementor-element elementor-element-6a6e4ec elementor-widget elementor-widget-html\" data-id=\"6a6e4ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n TESTIMONI KBIT PERMATA \u2014 SLIDER DENGAN TEMA ANAK-ANAK\r\n GRADASI ORANGE-MERAH #FF9900 & #E8483A\r\n VERSI RINGAN - TANPA ANIMASI BERAT\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 <!-- Efek Bintang & Bulan Background - RINGAN (tanpa animasi float) -->\r\n <div class=\"phm-testi__stars\">\r\n <span class=\"star star-1\">\u2b50<\/span>\r\n <span class=\"star star-2\">\ud83c\udf19<\/span>\r\n <span class=\"star star-3\">\u2b50<\/span>\r\n <span class=\"star star-4\">\ud83c\udf1f<\/span>\r\n <span class=\"star star-5\">\ud83c\udf19<\/span>\r\n <span class=\"star star-6\">\u2b50<\/span>\r\n <span class=\"star star-7\">\ud83c\udf1f<\/span>\r\n <span class=\"star star-8\">\ud83c\udf19<\/span>\r\n <span class=\"star star-9\">\u2b50<\/span>\r\n <span class=\"star star-10\">\ud83c\udf1f<\/span>\r\n <span class=\"star star-11\">\ud83c\udf19<\/span>\r\n <span class=\"star star-12\">\u2b50<\/span>\r\n <\/div>\r\n\r\n <!-- Elemen Pelangi Orange-Merah - RINGAN (tanpa animasi float) -->\r\n <div class=\"phm-testi__rainbow\">\r\n <span class=\"rainbow-arc\"><\/span>\r\n <span class=\"rainbow-arc\"><\/span>\r\n <span class=\"rainbow-arc\"><\/span>\r\n <span class=\"rainbow-arc\"><\/span>\r\n <span class=\"rainbow-arc\"><\/span>\r\n <span class=\"rainbow-arc\"><\/span>\r\n <\/div>\r\n\r\n <!-- Header -->\r\n <div class=\"phm-testi__head\">\r\n <span class=\"phm-testi__eyebrow\">\u2b50 Apa Kata Mereka<\/span>\r\n <h2 class=\"phm-testi__title\">Testimoni & Kepercayaan<\/h2>\r\n <p class=\"phm-testi__sub\">Selayang pandang walimurid tentang KBIT Permata Kota Mojokerto.<\/p>\r\n <\/div>\r\n\r\n <!-- Slider -->\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 <!-- ===== TESTIMONI 1: Bapak Mohammad As'ad Fuadi ===== -->\r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"orange-red\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">AF<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phm-card__stars\">\r\n <span>\u2b50<\/span><span>\u2b50<\/span><span>\u2b50<\/span><span>\u2b50<\/span><span>\u2b50<\/span>\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 <div class=\"phm-card__text-wrapper\">\r\n <p class=\"phm-card__text\">\r\n <span class=\"phm-short\">Alhamdulillah sangat senang dan puas menyekolahkan putra dan putri kami di KBIT Permata. Disini kurikulumnya sesuai, banyak pembiasaan Islami yang diajarkan...<\/span>\r\n <span class=\"phm-full\" hidden>Alhamdulillah sangat senang dan puas menyekolahkan putra dan putri kami di KBIT Permata. Disini kurikulumnya sesuai, banyak pembiasaan Islami yang diajarkan dan Alhamdulillah kedua anak saya alumni dari KBIT Permata dengan capaian mengaji yang baik dan bisa melanjutkan capaiannya langsung ketika berada di jenjang berikutnya di TKIT Permata. Dan dalam PBM anak kedua kami sudah mulai ada program MBG, Alhamdulillah MBG yang diterima anak kami cukup baik, sesuai dengan menu gizi seimbang untuk anak kami.<\/span>\r\n <\/p>\r\n <button type=\"button\" class=\"phm-card__toggle\">Baca Selengkapnya<\/button>\r\n <\/div>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">Bapak Mohammad As'ad Fuadi<\/div>\r\n <div class=\"phm-card__role\">Ayah dari Ananda Rara \u00b7 Walimurid KBIT Permata<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <!-- ===== TESTIMONI 2: dr. Asep Hari Rohman ===== -->\r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"orange-red\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">AH<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phm-card__stars\">\r\n <span>\u2b50<\/span><span>\u2b50<\/span><span>\u2b50<\/span><span>\u2b50<\/span><span>\u2b50<\/span>\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 <div class=\"phm-card__text-wrapper\">\r\n <p class=\"phm-card__text\">\r\n <span class=\"phm-short\">Alhamdulillah sangat senang dan bangga mempercayakan putri dan putra kami keduanya di Permata. Kami mengutamakan pendidikan karakter islami yang baik...<\/span>\r\n <span class=\"phm-full\" hidden>Alhamdulillah sangat senang dan bangga mempercayakan putri dan putra kami keduanya di Permata. Kami mengutamakan pendidikan karakter islami yang baik di sekolah Mojokerto ini, kebetulan kami pindahan dari Surabaya, dan ketika pindah di Mojokerto langsung mempercayakan kedua putra dan putri kami di Permata. Di KBIT Permata kami merasa aman dalam pengawasan yang dilakukan ustadzahnya. Pembentukan karakter sejak dini yang diterapkan sudah cukup bagus. Karena kami mencari sekolah yang benar-benar bukan meningkatkan akademik anak tapi kami mengutamakan penanaman karakter islami sejak dini yang kami temukan di KBIT Permata.<\/span>\r\n <\/p>\r\n <button type=\"button\" class=\"phm-card__toggle\">Baca Selengkapnya<\/button>\r\n <\/div>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">dr. Asep Hari Rohman<\/div>\r\n <div class=\"phm-card__role\">Ayah dari Ananda Rasya \u00b7 Walimurid KBIT Permata<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Navigasi dengan desain baru -->\r\n <div class=\"swiper-button-prev phm-testi__nav phm-nav-prev\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 19l-7-7 7-7\"\/>\r\n <\/svg>\r\n <span class=\"nav-label\">Sebelumnya<\/span>\r\n <\/div>\r\n <div class=\"swiper-button-next phm-testi__nav phm-nav-next\">\r\n <span class=\"nav-label\">Selanjutnya<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/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-orange: #FF9900;\r\n --phm-orange-dark: #E68A00;\r\n --phm-orange-light: #FFF0D6;\r\n --phm-red: #E8483A;\r\n --phm-red-dark: #C0392B;\r\n --phm-red-light: #FFE8E6;\r\n --phm-white: #FFFFFF;\r\n --phm-ink: #2C1810;\r\n --phm-muted: #5C3D2E;\r\n \r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 80px 24px 100px;\r\n font-family: 'Inter', 'Poppins', 'Comic Sans MS', sans-serif;\r\n position: relative;\r\n overflow: hidden;\r\n background: linear-gradient(180deg, #FFFFFF 0%, #FFF5ED 30%, #FFEDE6 70%, #FFFFFF 100%);\r\n border-radius: 30px;\r\n box-shadow: 0 10px 60px rgba(232, 72, 58, 0.06);\r\n}\r\n\r\n\/* =========================================================\r\n EFEK BINTANG & BULAN - TANPA ANIMASI (statis)\r\n========================================================= *\/\r\n.phm-testi__stars {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n overflow: hidden;\r\n}\r\n\r\n.star {\r\n position: absolute;\r\n font-size: 20px;\r\n opacity: 0.15;\r\n}\r\n\r\n.star-1 { top: 5%; left: 5%; font-size: 24px; opacity: 0.2; }\r\n.star-2 { top: 10%; right: 8%; font-size: 30px; opacity: 0.15; }\r\n.star-3 { top: 22%; left: 12%; font-size: 18px; opacity: 0.25; }\r\n.star-4 { top: 35%; right: 15%; font-size: 28px; opacity: 0.12; }\r\n.star-5 { top: 50%; left: 8%; font-size: 22px; opacity: 0.2; }\r\n.star-6 { top: 65%; right: 10%; font-size: 32px; opacity: 0.12; }\r\n.star-7 { top: 80%; left: 15%; font-size: 20px; opacity: 0.2; }\r\n.star-8 { top: 15%; left: 45%; font-size: 16px; opacity: 0.25; }\r\n.star-9 { top: 55%; left: 55%; font-size: 26px; opacity: 0.12; }\r\n.star-10 { top: 30%; left: 75%; font-size: 22px; opacity: 0.2; }\r\n.star-11 { top: 72%; left: 70%; font-size: 18px; opacity: 0.2; }\r\n.star-12 { top: 45%; left: 30%; font-size: 30px; opacity: 0.12; }\r\n\r\n\/* =========================================================\r\n ELEMEN PELANGI - TANPA ANIMASI (statis)\r\n========================================================= *\/\r\n.phm-testi__rainbow {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n overflow: hidden;\r\n}\r\n\r\n.rainbow-arc {\r\n position: absolute;\r\n border-radius: 50%;\r\n border-style: solid;\r\n border-width: 6px;\r\n opacity: 0.06;\r\n}\r\n\r\n.rainbow-arc:nth-child(1) { top: -80px; right: -80px; width: 400px; height: 400px; border-color: #FF9900; }\r\n.rainbow-arc:nth-child(2) { top: -60px; right: -60px; width: 370px; height: 370px; border-color: #FF6B3D; }\r\n.rainbow-arc:nth-child(3) { top: -40px; right: -40px; width: 340px; height: 340px; border-color: #E8483A; }\r\n.rainbow-arc:nth-child(4) { top: -20px; right: -20px; width: 310px; height: 310px; border-color: #FF9900; }\r\n.rainbow-arc:nth-child(5) { top: 0px; right: 0px; width: 280px; height: 280px; border-color: #E68A00; }\r\n.rainbow-arc:nth-child(6) { top: 20px; right: 20px; width: 250px; height: 250px; border-color: #C0392B; }\r\n\r\n\/* =========================================================\r\n HEADER\r\n========================================================= *\/\r\n.phm-testi *,\r\n.phm-testi *::before,\r\n.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 position: relative;\r\n z-index: 1;\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: 14px;\r\n font-weight: 700;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n color: #E8483A;\r\n background: rgba(232, 72, 58, 0.08);\r\n padding: 6px 18px;\r\n border-radius: 30px;\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: linear-gradient(90deg, #FF9900, #E8483A, #FF9900);\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 letter-spacing: -0.5px;\r\n line-height: 1.2;\r\n color: #E8483A;\r\n}\r\n\r\n.phm-testi__sub {\r\n margin: 0;\r\n color: #5C3D2E;\r\n font-size: 16px;\r\n line-height: 1.6;\r\n}\r\n\r\n.phm-testi__slider-wrap {\r\n position: relative;\r\n padding: 50px 50px 64px;\r\n z-index: 1;\r\n}\r\n\r\n\/* =========================================================\r\n SWIPER - PERBAIKAN CARD TERPOTONG\r\n========================================================= *\/\r\n.phm-testi__swiper {\r\n overflow: visible;\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\/* =========================================================\r\n KARTU - TIDAK TERPOTONG\r\n========================================================= *\/\r\n.phm-card {\r\n position: relative;\r\n background: linear-gradient(145deg, #FFFFFF, #FFFDFA);\r\n border-radius: 24px;\r\n padding: 56px 30px 32px;\r\n border: 3px solid transparent;\r\n background-clip: padding-box;\r\n box-shadow: 0 8px 30px rgba(232, 72, 58, 0.06), 0 4px 15px rgba(255, 153, 0, 0.04);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 380px;\r\n}\r\n\r\n\/* Border gradasi - ringan (tanpa animasi) *\/\r\n.phm-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: -3px;\r\n border-radius: 27px;\r\n padding: 3px;\r\n background: linear-gradient(135deg, #FF9900, #E68A00, #E8483A, #C0392B);\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n\/* Garis atas - ringan (tanpa animasi) *\/\r\n.phm-card::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 24px;\r\n right: 24px;\r\n height: 5px;\r\n border-radius: 0 0 8px 8px;\r\n background: linear-gradient(90deg, #FF9900, #E68A00, #E8483A, #C0392B);\r\n z-index: 1;\r\n}\r\n\r\n.phm-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 40px rgba(232, 72, 58, 0.10), 0 8px 20px rgba(255, 153, 0, 0.06);\r\n}\r\n\r\n\/* =========================================================\r\n BINTANG RATING - TANPA ANIMASI BERAT\r\n========================================================= *\/\r\n.phm-card__stars {\r\n display: flex;\r\n gap: 4px;\r\n margin-bottom: 10px;\r\n font-size: 20px;\r\n}\r\n\r\n.phm-card__stars span {\r\n display: inline-block;\r\n color: #FF9900;\r\n}\r\n\r\n\/* =========================================================\r\n AVATAR - TANPA ANIMASI BERAT\r\n========================================================= *\/\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: linear-gradient(135deg, #FF9900, #E8483A);\r\n box-shadow: 0 8px 25px rgba(255, 153, 0, 0.20);\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 .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: linear-gradient(135deg, #FF9900, #E8483A);\r\n}\r\n\r\n\/* =========================================================\r\n QUOTE ICON\r\n========================================================= *\/\r\n.phm-card__quote-icon {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 14px;\r\n background: linear-gradient(135deg, #FF9900, #E8483A);\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 box-shadow: 0 4px 20px rgba(255, 153, 0, 0.20);\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\/* =========================================================\r\n TEKS - PERBAIKAN WRAPPER AGAR TIDAK TERPOTONG\r\n========================================================= *\/\r\n.phm-card__text-wrapper {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: visible;\r\n}\r\n\r\n.phm-card__text {\r\n font-size: 15.5px;\r\n line-height: 1.75;\r\n color: #2C1810;\r\n margin: 0 0 12px 0;\r\n flex: 1;\r\n overflow: visible;\r\n}\r\n\r\n.phm-full {\r\n display: none;\r\n}\r\n.phm-card__text.is-expanded .phm-short {\r\n display: none;\r\n}\r\n.phm-card__text.is-expanded .phm-full {\r\n display: inline;\r\n}\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: 14px;\r\n color: #FF9900;\r\n cursor: pointer;\r\n transition: color 0.2s ease;\r\n align-self: flex-start;\r\n flex-shrink: 0;\r\n}\r\n\r\n.phm-card__toggle:hover {\r\n color: #E8483A;\r\n text-decoration: underline;\r\n}\r\n\r\n\/* =========================================================\r\n FOOTER KARTU\r\n========================================================= *\/\r\n.phm-card__footer {\r\n border-top: 2px solid;\r\n border-image: linear-gradient(90deg, #FF9900, #E68A00, #E8483A, #C0392B) 1;\r\n padding-top: 18px;\r\n margin-top: 16px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.phm-card__name {\r\n font-size: 16px;\r\n font-weight: 800;\r\n color: #2C1810;\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: #5C3D2E;\r\n line-height: 1.5;\r\n}\r\n\r\n\/* =========================================================\r\n NAVIGASI - DESAIN BARU LEBIH BAGUS\r\n========================================================= *\/\r\n.phm-testi__nav {\r\n width: auto;\r\n height: 52px;\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 60px;\r\n box-shadow: 0 6px 30px rgba(232, 72, 58, 0.10);\r\n top: 45%;\r\n z-index: 10;\r\n transition: all 0.3s ease;\r\n border: 2px solid rgba(255, 153, 0, 0.15);\r\n color: #FF9900;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0 20px;\r\n gap: 10px;\r\n}\r\n\r\n.phm-testi__nav svg {\r\n width: 22px;\r\n height: 22px;\r\n stroke: #FF9900;\r\n transition: stroke 0.3s ease;\r\n}\r\n\r\n.phm-testi__nav .nav-label {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: #FF9900;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.phm-testi__nav::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: -3px;\r\n border-radius: 62px;\r\n padding: 3px;\r\n background: linear-gradient(135deg, #FF9900, #E8483A, #FF9900);\r\n background-size: 300% 300%;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n pointer-events: none;\r\n z-index: -1;\r\n}\r\n\r\n.phm-testi__nav:hover {\r\n transform: scale(1.06);\r\n background: linear-gradient(135deg, #FF9900, #E8483A);\r\n box-shadow: 0 8px 40px rgba(232, 72, 58, 0.25);\r\n border-color: transparent;\r\n}\r\n\r\n.phm-testi__nav:hover svg {\r\n stroke: #FFFFFF;\r\n}\r\n\r\n.phm-testi__nav:hover .nav-label {\r\n color: #FFFFFF;\r\n}\r\n\r\n.phm-testi__nav:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n\/* Posisi Tombol *\/\r\n.swiper-button-prev.phm-testi__nav {\r\n left: -10px;\r\n}\r\n.swiper-button-next.phm-testi__nav {\r\n right: -10px;\r\n}\r\n\r\n\/* Hapus pseudo default Swiper *\/\r\n.phm-testi__nav::after {\r\n display: none;\r\n}\r\n\r\n\/* =========================================================\r\n DOTS\r\n========================================================= *\/\r\n.phm-testi__dots {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\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: 12px;\r\n height: 12px;\r\n opacity: 0.2;\r\n margin: 0 8px !important;\r\n transition: all 0.3s ease;\r\n border-radius: 50%;\r\n background: #FF9900;\r\n border: 2px solid rgba(255, 153, 0, 0.1);\r\n}\r\n\r\n.phm-testi__dots .swiper-pagination-bullet:hover {\r\n opacity: 0.6;\r\n transform: scale(1.1);\r\n}\r\n\r\n.phm-testi__dots .swiper-pagination-bullet-active {\r\n opacity: 1;\r\n width: 36px;\r\n border-radius: 8px;\r\n background: linear-gradient(135deg, #FF9900, #E8483A);\r\n box-shadow: 0 0 20px rgba(255, 153, 0, 0.20);\r\n border-color: transparent;\r\n}\r\n\r\n\/* =========================================================\r\n RESPONSIVE\r\n========================================================= *\/\r\n@media (max-width: 1024px) {\r\n .phm-testi__nav {\r\n display: none !important;\r\n }\r\n .phm-testi__slider-wrap {\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .phm-testi {\r\n padding: 60px 16px 70px;\r\n border-radius: 20px;\r\n }\r\n .phm-card {\r\n padding: 48px 24px 28px;\r\n min-height: 340px;\r\n }\r\n .phm-card__avatar-wrap {\r\n left: 24px;\r\n width: 68px;\r\n height: 68px;\r\n top: -30px;\r\n }\r\n .phm-card__avatar .phm-initials {\r\n font-size: 18px;\r\n }\r\n .phm-card__stars {\r\n font-size: 16px;\r\n }\r\n .star {\r\n font-size: 16px !important;\r\n }\r\n .phm-testi__dots .swiper-pagination-bullet {\r\n width: 10px;\r\n height: 10px;\r\n margin: 0 6px !important;\r\n }\r\n .phm-testi__dots .swiper-pagination-bullet-active {\r\n width: 28px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .phm-testi {\r\n padding: 40px 12px 50px;\r\n border-radius: 16px;\r\n }\r\n .phm-card {\r\n padding: 40px 16px 20px;\r\n border-radius: 18px;\r\n min-height: 300px;\r\n }\r\n .phm-card__avatar-wrap {\r\n left: 16px;\r\n width: 58px;\r\n height: 58px;\r\n top: -26px;\r\n }\r\n .phm-card__avatar .phm-initials {\r\n font-size: 16px;\r\n }\r\n .phm-card__text {\r\n font-size: 14px;\r\n line-height: 1.6;\r\n }\r\n .phm-card__stars {\r\n font-size: 14px;\r\n }\r\n .phm-card__quote-icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 10px;\r\n }\r\n .phm-card__quote-icon svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n .phm-testi__slider-wrap {\r\n padding: 30px 8px 40px;\r\n }\r\n .phm-testi__swiper {\r\n padding: 30px 2px 30px;\r\n overflow: visible;\r\n }\r\n .phm-testi__dots .swiper-pagination-bullet {\r\n width: 8px;\r\n height: 8px;\r\n margin: 0 4px !important;\r\n }\r\n .phm-testi__dots .swiper-pagination-bullet-active {\r\n width: 24px;\r\n }\r\n .star {\r\n font-size: 12px !important;\r\n opacity: 0.10;\r\n }\r\n .rainbow-arc {\r\n border-width: 3px !important;\r\n opacity: 0.04;\r\n }\r\n .rainbow-arc:nth-child(1) { width: 200px; height: 200px; top: -40px; right: -40px; }\r\n .rainbow-arc:nth-child(2) { width: 180px; height: 180px; top: -30px; right: -30px; }\r\n .rainbow-arc:nth-child(3) { width: 160px; height: 160px; top: -20px; right: -20px; }\r\n .rainbow-arc:nth-child(4) { width: 140px; height: 140px; top: -10px; right: -10px; }\r\n .rainbow-arc:nth-child(5) { width: 120px; height: 120px; top: 0px; right: 0px; }\r\n .rainbow-arc:nth-child(6) { width: 100px; height: 100px; top: 10px; right: 10px; }\r\n}\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n========================================================= *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n .phm-card {\r\n transition: none;\r\n }\r\n .phm-testi__nav {\r\n transition: none;\r\n }\r\n .phm-testi__dots .swiper-pagination-bullet {\r\n transition: none;\r\n }\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 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 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: 500,\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.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>KBIT Permata Kota Mojokerto – Penerimaan Peserta Didik Baru \ud83c\udfeb Penerimaan Peserta Didik Baru KBIT Permata \ud83c\udf89 Bergabunglah dengan keluarga besar KBIT Permata Kota Mojokerto! \ud83c\udf1f Tempat di mana anak-anak belajar dengan gembira \ud83c\udf88, bermain sambil belajar \ud83e\uddf8, dan tumbuh menjadi generasi cerdas \ud83e\udde0, berakhlak mulia \ud83e\udd32, & berkarakter Qur’ani \ud83d\udcd6. \ud83d\udccb Daftar Sekarang \ud83c\udfa8 […]<\/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:\/\/pgitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pgitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pgitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pgitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pgitpermata.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":347,"href":"https:\/\/pgitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":1241,"href":"https:\/\/pgitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/1241"}],"wp:attachment":[{"href":"https:\/\/pgitpermata.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}