SMPIT 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', system-ui, sans-serif;\r\n background: #f0f4f5;\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:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-10.17.02.jpeg');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: scroll;\r\n\r\n padding: 120px 20px 40px 20px;\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 - LEBIH GELAP, TANPA BLUR\r\n ========================================================= *\/\r\n\r\n .slider-container::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n \/* ===== OVERLAY LEBIH GELAP ===== *\/\r\n background: rgba(0, 0, 0, 0.72);\r\n z-index: 1;\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\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: 1250px;\r\n\r\n padding: 2rem 1rem;\r\n\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n\r\n gap: 2.5rem;\r\n\r\n align-items: center;\r\n\r\n min-height: calc(100vh - 160px);\r\n }\r\n\r\n \/* =========================================================\r\n KOLOM KIRI - TANPA ANIMASI BERAT\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: 1.2rem;\r\n\r\n padding: 2.5rem 2.8rem;\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.08);\r\n\r\n box-shadow:\r\n 0 30px 60px -20px rgba(0, 0, 0, 0.6),\r\n 0 0 0 1px rgba(255, 255, 255, 0.03) inset;\r\n\r\n min-height: 320px;\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 overflow: hidden;\r\n\r\n margin: 0 0 20px 0;\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:\r\n 0 36px 70px -20px rgba(0, 0, 0, 0.7),\r\n 0 0 0 1px rgba(255, 255, 255, 0.10) inset;\r\n border-color: rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n \/* =========================================================\r\n TEXT SLIDER - RINGAN\r\n ========================================================= *\/\r\n\r\n .text-slide .slide-item {\r\n display: none;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\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 opacity: 1;\r\n }\r\n\r\n \/* =========================================================\r\n JUDUL\r\n ========================================================= *\/\r\n\r\n .text-slide .slide-item h2 {\r\n font-size: clamp(1.8rem, 4vw, 3rem);\r\n font-weight: 700;\r\n line-height: 1.1;\r\n color: #fff;\r\n text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n \/* --- GARIS BAWAH (STATIS, TANPA ANIMASI BERAT) --- *\/\r\n .text-slide .slide-item h2 .underline-effect {\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .text-slide .slide-item h2 .underline-effect::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: linear-gradient(90deg, #28565D, #4A8A93, #8FC4C9, #4A8A93, #28565D);\r\n background-size: 200% 100%;\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 \/* =========================================================\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 margin: 10px 0 20px 0;\r\n padding: 8px;\r\n border-radius: 2rem;\r\n\r\n background: rgba(0, 0, 0, 0.25);\r\n box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n \/* =========================================================\r\n IMAGE SLIDE - TANPA ROTASI BERAT\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 transform: scale(0.95);\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.45));\r\n border-radius: 1.8rem;\r\n overflow: hidden;\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 transition: transform 0.4s ease, filter 0.4s ease;\r\n }\r\n\r\n .right-col .image-slide.active img:hover {\r\n transform: scale(1.02);\r\n filter: brightness(1.05) contrast(1.02);\r\n }\r\n\r\n \/* =========================================================\r\n DOTS - WARNA #28565D\r\n ========================================================= *\/\r\n\r\n .dots-container {\r\n display: flex;\r\n justify-content: center;\r\n gap: 0.85rem;\r\n position: absolute;\r\n bottom: 1.8rem;\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: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.20);\r\n border: 2px solid rgba(255, 255, 255, 0.20);\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n position: relative;\r\n }\r\n\r\n .dot.active {\r\n background: #4A8A93;\r\n border-color: #4A8A93;\r\n transform: scale(1.25);\r\n box-shadow: 0 0 25px rgba(40, 86, 93, 0.5);\r\n }\r\n\r\n .dot:hover {\r\n transform: scale(1.15);\r\n background: rgba(40, 86, 93, 0.4);\r\n border-color: rgba(40, 86, 93, 0.4);\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 1rem;\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 .slider-container {\r\n padding: 100px 16px 40px 16px;\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.8rem;\r\n min-height: calc(100vh - 140px);\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 border-radius: 1.5rem;\r\n }\r\n .right-col {\r\n border-radius: 1.5rem;\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 }\r\n\r\n @media (max-width: 820px) {\r\n .slider-container {\r\n padding: 90px 14px 30px 14px;\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 - 120px);\r\n padding: 1.5rem 0.5rem;\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.45);\r\n padding: 2rem 2.2rem;\r\n border-radius: 1.8rem;\r\n gap: 1rem;\r\n box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.5);\r\n }\r\n .left-col:hover {\r\n background: rgba(0, 0, 0, 0.50);\r\n }\r\n .right-col {\r\n order: 1;\r\n aspect-ratio: 16 \/ 10;\r\n min-height: 280px;\r\n margin: 0 0 10px 0;\r\n padding: 6px;\r\n border-radius: 1.5rem;\r\n }\r\n .right-col .image-slide {\r\n border-radius: 1.5rem;\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 .dots-container {\r\n bottom: 1.5rem;\r\n gap: 0.7rem;\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 12px 25px 12px;\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.3rem;\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 padding: 4px;\r\n border-radius: 1.2rem;\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 .dots-container {\r\n gap: 0.7rem;\r\n bottom: 1.2rem;\r\n }\r\n .dot {\r\n width: 13px;\r\n height: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .slider-container {\r\n padding: 70px 10px 20px 10px;\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.8rem 0.2rem;\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 box-shadow: 0 12px 30px -10px 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 padding: 3px;\r\n border-radius: 1rem;\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 .dots-container {\r\n gap: 0.6rem;\r\n bottom: 0.8rem;\r\n }\r\n .dot {\r\n width: 11px;\r\n height: 11px;\r\n }\r\n }\r\n\r\n @media (max-width: 380px) {\r\n .slider-container {\r\n padding: 60px 8px 15px 8px;\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.5rem 0.1rem;\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: 150px;\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 padding: 2px;\r\n border-radius: 0.8rem;\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 .dots-container {\r\n gap: 0.5rem;\r\n bottom: 0.6rem;\r\n }\r\n .dot {\r\n width: 9px;\r\n height: 9px;\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 transition: none;\r\n }\r\n .right-col .image-slide {\r\n transition: none;\r\n }\r\n .right-col .image-slide.active img:hover {\r\n transform: none;\r\n }\r\n .left-col {\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\r\n <div class=\"left-col\">\r\n\r\n <div class=\"text-slide\">\r\n\r\n \r\n <div class=\"slide-item active\" data-index=\"0\">\r\n\r\n <h2>\r\n <span class=\"underline-effect\">\ud83c\udf92 Penerimaan Peserta Didik Baru<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n Bergabunglah dengan keluarga besar SMPIT Permata!\r\n Tempat di mana generasi muda dibina dengan pendidikan\r\n berkualitas, berbasis Islam, dan berwawasan global\r\n untuk mencetak pemimpin masa depan.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"slide-item\" data-index=\"1\">\r\n\r\n <h2>\r\n <span class=\"underline-effect\">\ud83d\udcda Fasilitas & Kegiatan Unggulan<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n Didukung oleh fasilitas modern dan kegiatan\r\n ekstrakurikuler yang beragam, mulai dari sains,\r\n olahraga, seni, hingga pengembangan karakter Islami.\r\n Setiap siswa diberikan ruang untuk berkembang\r\n sesuai potensi dan bakatnya.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"slide-item\" data-index=\"2\">\r\n\r\n <h2>\r\n <span class=\"underline-effect\">\ud83c\udf1f Prestasi & Karakter Unggul<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n Kami bangga dengan prestasi akademik maupun\r\n non-akademik yang diraih oleh siswa-siswi SMPIT Permata.\r\n Dengan pendekatan pendidikan yang holistik dan\r\n pembinaan akhlak mulia, kami mencetak generasi\r\n cerdas, beriman, dan berkarakter.\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\r\n <div class=\"right-col\">\r\n\r\n \r\n <div class=\"image-slide active\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM.png\"\r\n alt=\"SMPIT Permata\"\r\n loading=\"lazy\"\r\n \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"image-slide\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom.png\"\r\n alt=\"Kegiatan SMPIT Permata\"\r\n loading=\"lazy\"\r\n \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"image-slide\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom.png\"\r\n alt=\"Prestasi SMPIT 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\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\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\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=\"806\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-768x806.png\" class=\"attachment-medium_large size-medium_large wp-image-1195\" alt=\"\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-768x806.png 768w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-286x300.png 286w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-975x1024.png 975w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM.png 1224w\" 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 SMPIT 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 Menengah Pertama terdepa 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 SMPIT 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:\/\/smpitpermata.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"960\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata.jpeg\" class=\"attachment-full size-full wp-post-image\" alt=\"Langkah Perdana Kelas 9 SMPIT Permata: Menaklukkan TKA dengan Persiapan Matang\" loading=\"lazy\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata.jpeg 1280w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata-300x225.jpeg 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata-768x576.jpeg 768w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata-1024x768.jpeg 1024w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t\tLangkah Perdana Kelas 9 SMPIT Permata: Menaklukkan TKA dengan Persiapan Matang\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 Atmosfer berbeda menyelimuti SMPIT Permata Mojokerto pekan ini. Untuk pertama kalinya, seluruh siswa...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.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:\/\/smpitpermata.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Keseruan Pucak MPLS SMPIT Permata Mojokerto: Membentuk Pribadi Berjiwa Pemimpin, Tangguh dn Kreatif\" loading=\"lazy\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit.jpg 1280w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit-300x169.jpg 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit-1024x576.jpg 1024w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit-768x432.jpg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t\tKeseruan Pucak MPLS SMPIT Permata Mojokerto: Membentuk Pribadi Berjiwa Pemimpin, Tangguh dn Kreatif\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, 19 Juli 2024, SMPIT Permata Mojokerto sukses menyelenggarakan Perkemahan Jum\u2019at-Sabtu Dengan mengusung tema Membentuk...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.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:\/\/smpitpermata.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"864\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Siswi SMPIT Permata Mendapat Juara di Divya Competition Tingkat Nasional\" loading=\"lazy\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1.jpg 1536w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1-300x169.jpg 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1-1024x576.jpg 1024w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1-768x432.jpg 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t\tSiswi SMPIT Permata Mendapat Juara di Divya Competition Tingkat Nasional\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\tBy\u00a0faizna\u00a0\/\u00a025\/04\/2024 Alhamdulillah Barakallah Selamat Kepada Ananda Aurelia Zakiyyah Fatmawati siswi SMPIT Permata telah mendapatkan Juara...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.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-452454b e-con e-atomic-element e-flexbox-base e-452454b-51fff9f \" data-id=\"452454b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"452454b\">\n <section class=\"elementor-element elementor-element-d606da6 e-con e-atomic-element e-flexbox-base e-d606da6-5b75344 \" data-id=\"d606da6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d606da6\">\n <div class=\"elementor-element elementor-element-e42e292 e-con e-atomic-element e-flexbox-base e-e42e292-f8826de \" data-id=\"e42e292\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e42e292\">\n \t\t\t<img decoding=\"async\" class=\"e-image-base \" data-interaction-id=\"fbaccf9\" id=\"1164\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom.png\" width=\"1080\" height=\"1080\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom.png 1080w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom-300x300.png 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom-1024x1024.png 1024w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom-150x150.png 150w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom-768x768.png 768w\" alt=\"\"\/>\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-ad950e9 e-con e-atomic-element e-flexbox-base e-ad950e9-7792d18 \" data-id=\"ad950e9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"ad950e9\">\n \t\t\t<img decoding=\"async\" class=\"e-image-base e-07ee9a4-40ec693\" data-interaction-id=\"07ee9a4\" id=\"930\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52.png\" width=\"1160\" height=\"1355\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52.png 1160w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52-257x300.png 257w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52-877x1024.png 877w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52-768x897.png 768w\" alt=\"\"\/>\t\t\t\t\t<h1 data-interaction-id=\"fbc905e\" class=\"e-fbc905e-640a3ac e-heading-base\">Program Unggulan<\/h1>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d1e6bb8 e-con e-atomic-element e-flexbox-base e-d1e6bb8-df7d157 \" data-id=\"d1e6bb8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d1e6bb8\">\n \t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"e-image-base \" data-interaction-id=\"e9dbd73\" id=\"1165\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom.png\" width=\"1080\" height=\"1080\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom.png 1080w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom-300x300.png 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom-1024x1024.png 1024w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom-150x150.png 150w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom-768x768.png 768w\" alt=\"\"\/>\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n<div class=\"elementor-element elementor-element-81539b9 e-con e-atomic-element e-flexbox-base e-06120eb \" data-id=\"81539b9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"81539b9\">\n \t\t<div class=\"elementor-element elementor-element-50128bb elementor-widget elementor-widget-html\" data-id=\"50128bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n PROGRAM UNGGULAN - SMPIT PERMATA\r\n Warna: #28565d\r\n ========================================================= *\/\r\n\r\n.unggulan-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.unggulan-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: 8px;\r\n}\r\n\r\n.unggulan-title span {\r\n color: #28565d;\r\n}\r\n\r\n.unggulan-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.unggulan-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n}\r\n\r\n\/* Card Program *\/\r\n.unggulan-card {\r\n background: #ffffff;\r\n border-radius: 20px;\r\n padding: 30px 25px 35px;\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 *\/\r\n.unggulan-card:hover {\r\n border-color: #28565d;\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 60px rgba(40, 86, 93, 0.25);\r\n background: #28565d;\r\n}\r\n\r\n\/* Icon besar *\/\r\n.unggulan-card .icon {\r\n font-size: 50px;\r\n margin-bottom: 15px;\r\n display: block;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n.unggulan-card:hover .icon {\r\n transform: scale(1.2) rotate(-5deg);\r\n}\r\n\r\n\/* Nomor urut *\/\r\n.unggulan-card .number {\r\n display: inline-block;\r\n background: #28565d;\r\n color: #ffffff;\r\n font-size: 12px;\r\n font-weight: 700;\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n margin-bottom: 12px;\r\n letter-spacing: 0.5px;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.unggulan-card:hover .number {\r\n background: #ffffff;\r\n color: #28565d;\r\n}\r\n\r\n\/* Judul card *\/\r\n.unggulan-card h3 {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #243746;\r\n margin: 0 0 10px 0;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n\/* Deskripsi card *\/\r\n.unggulan-card p {\r\n font-size: 14px;\r\n color: #5a6f7e;\r\n line-height: 1.7;\r\n margin: 0;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n\/* HOVER - Semua teks jadi putih *\/\r\n.unggulan-card:hover h3,\r\n.unggulan-card:hover p {\r\n color: #ffffff;\r\n}\r\n\r\n\/* Efek garis bawah animasi *\/\r\n.unggulan-card::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n width: 0;\r\n height: 4px;\r\n background: #28565d;\r\n transition: all 0.4s ease;\r\n transform: translateX(-50%);\r\n border-radius: 4px 4px 0 0;\r\n}\r\n\r\n.unggulan-card:hover::after {\r\n width: 70%;\r\n}\r\n\r\n\/* Efek sudut dekorasi *\/\r\n.unggulan-card::before {\r\n content: '';\r\n position: absolute;\r\n top: -50px;\r\n right: -50px;\r\n width: 100px;\r\n height: 100px;\r\n background: rgba(40, 86, 93, 0.05);\r\n border-radius: 50%;\r\n transition: all 0.4s ease;\r\n}\r\n\r\n.unggulan-card:hover::before {\r\n background: rgba(255, 255, 255, 0.10);\r\n transform: scale(1.5);\r\n}\r\n\r\n\/* Badge \"Unggulan\" *\/\r\n.unggulan-badge {\r\n display: inline-block;\r\n background: #28565d;\r\n color: #ffffff;\r\n font-size: 10px;\r\n font-weight: 700;\r\n padding: 4px 14px;\r\n border-radius: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n margin-top: 12px;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.unggulan-card:hover .unggulan-badge {\r\n background: #ffffff;\r\n color: #28565d;\r\n}\r\n\r\n\/* =========================================================\r\n RESPONSIVE\r\n ========================================================= *\/\r\n\r\n@media (max-width: 992px) {\r\n .unggulan-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .unggulan-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .unggulan-card {\r\n padding: 25px 20px 30px;\r\n }\r\n \r\n .unggulan-title {\r\n font-size: 24px;\r\n }\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n<div class=\"unggulan-section\">\r\n\r\n \r\n <h2 class=\"unggulan-title\">\u2b50 Program <span>Unggulan<\/span><\/h2>\r\n <p class=\"unggulan-subtitle\">Program pembinaan karakter dan prestasi untuk mencetak generasi pemimpin<\/p>\r\n\r\n \r\n <div class=\"unggulan-grid\">\r\n\r\n \r\n <div class=\"unggulan-card\">\r\n <span class=\"icon\">\ud83d\udcd6<\/span>\r\n <span class=\"number\">#01<\/span>\r\n <h3>Tahfidz Al-Qur'an<\/h3>\r\n <p>Program pembinaan hafalan Al-Qur'an dengan metode yang menyenangkan dan terstruktur. Target hafalan 1-3 juz untuk setiap siswa.<\/p>\r\n <span class=\"unggulan-badge\">\ud83c\udf1f Program Utama<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"unggulan-card\">\r\n <span class=\"icon\">\ud83d\udc51<\/span>\r\n <span class=\"number\">#02<\/span>\r\n <h3>Leadership School <br><span style=\"font-size:14px; font-weight:500;\">with Leader In Me<\/span><\/h3>\r\n <p>Program kepemimpinan berbasis 7 Habits of Highly Effective People untuk membentuk karakter pemimpin yang tangguh dan berintegritas.<\/p>\r\n <span class=\"unggulan-badge\">\ud83c\udf1f Program Unggulan<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"unggulan-card\">\r\n <span class=\"icon\">\ud83c\udfc6<\/span>\r\n <span class=\"number\">#03<\/span>\r\n <h3>Leader of <br><span style=\"font-size:22px; font-weight:700; color:#28565d;\">Champion<\/span><\/h3>\r\n <p>Program pembinaan prestasi non-akademik di bidang olimpiade, olahraga, dan seni dengan bimbingan pelatih profesional.<\/p>\r\n <span class=\"unggulan-badge\">\ud83c\udf1f Program Andalan<\/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-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\r\n\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 \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 \r\n <div class=\"slider-content-wrapper\" style=\"display: none;\">\r\n <div class=\"horizontal-slider js-horizontal-gallery-slider\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \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 #28565d --- *\/\r\n.slick-center .slider-card {\r\n background-color: #28565d;\r\n box-shadow: 0 8px 30px rgba(40, 86, 93, 0.35);\r\n}\r\n\r\n.slick-center .slider-card .card-content {\r\n background-color: #28565d;\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 #28565d --- *\/\r\n.slider-card:hover {\r\n background-color: #28565d !important;\r\n box-shadow: 0 8px 30px rgba(40, 86, 93, 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: #28565d !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 --- *\/\r\n.image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 210px;\r\n border-radius: 20px 20px 0 0;\r\n overflow: hidden;\r\n background: #eef2f3;\r\n flex-shrink: 0;\r\n}\r\n\r\n.image-wrapper img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s ease;\r\n border-radius: 20px 20px 0 0;\r\n display: block;\r\n}\r\n\r\n\/* --- Card Content (Judul + Deskripsi) --- *\/\r\n.card-content {\r\n padding: 16px 18px 20px 18px;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n transition: background-color 0.5s ease;\r\n border-radius: 0 0 20px 20px;\r\n background-color: #ffffff;\r\n}\r\n\r\n.card-title {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #243746;\r\n line-height: 1.3;\r\n margin: 0 0 6px 0;\r\n transition: color 0.3s ease;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.card-description {\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: #5a6f7e;\r\n line-height: 1.5;\r\n margin: 0;\r\n transition: color 0.3s ease;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n\/* --- Tombol Panah Navigasi (Arrows) - WARNA #28565d --- *\/\r\n.horizontal-slider .slick-prev,\r\n.horizontal-slider .slick-next {\r\n width: 48px;\r\n height: 48px;\r\n background: #28565d !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(40, 86, 93, 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: #1E4045 !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 #28565d\r\n GAMBAR FULL TANPA TERPOTONG\r\n========================================== *\/\r\n.lightbox-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.85);\r\n z-index: 9999;\r\n justify-content: center;\r\n align-items: center;\r\n 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(40, 86, 93, 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: #28565d;\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(40, 86, 93, 0.4);\r\n}\r\n\r\n.lightbox-close:hover {\r\n background: #1E4045;\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 ===== *\/\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}\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: #28565d;\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 SLIDER - FASILITAS SMPIT PERMATA\r\n Warna: #28565d\r\n ===========================================================\r\n \u2605 Ganti URL gambar dengan URL dari Media Library kamu\r\n \u2605 Ganti title dan description sesuai keinginan\r\n =========================================================== *\/\r\n\r\n var sliderData = [\r\n {\r\n title: \"Kantin\",\r\n description: \"Kantin sehat dengan menu bergizi dan beragam pilihan makanan serta minuman yang terjaga kebersihan dan kualitasnya. Menyediakan makanan ringan hingga makan siang untuk memenuhi kebutuhan nutrisi siswa selama berada di sekolah.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-11.06.21-1.jpeg\"\r\n },\r\n {\r\n title: \"Perpustakaan\",\r\n description: \"Pusat literasi dengan koleksi buku yang lengkap dan beragam, mulai dari buku pelajaran, novel, hingga ensiklopedia. Ruang baca yang nyaman dan program gemar membaca untuk meningkatkan wawasan serta minat baca siswa.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-10.56.07-1.jpeg\"\r\n },\r\n {\r\n title: \"Lab Komputer\",\r\n description: \"Fasilitas teknologi modern dengan komputer spesifikasi terbaru, akses internet cepat, dan software edukatif yang mendukung pembelajaran. Bekal keterampilan digital untuk menghadapi era industri 4.0.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata-2.jpeg\"\r\n },\r\n {\r\n title: \"Lab IPA\",\r\n description: \"Ruang praktikum sains yang lengkap dengan alat-alat eksperimen untuk pembelajaran Fisika, Kimia, dan Biologi secara langsung. Siswa dapat melakukan percobaan ilmiah yang menyenangkan dan interaktif.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-11.04.11.jpeg\"\r\n },\r\n {\r\n title: \"Permata Mart\",\r\n description: \"Toko sekolah yang menyediakan berbagai kebutuhan siswa seperti alat tulis, seragam, perlengkapan sekolah, dan camilan sehat. Memudahkan siswa dan orang tua dalam memenuhi kebutuhan belajar.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-10.56.06-1.jpeg\"\r\n },\r\n {\r\n title: \"Sport Center (GOR)\",\r\n description: \"Ruang olahraga indoor yang luas dan modern untuk berbagai kegiatan fisik seperti basket, voli, bulu tangkis, senam, dan futsal. Mendukung pengembangan bakat olahraga dan gaya hidup sehat siswa.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-10.56.05.jpeg\"\r\n }\r\n ];\r\n\r\n \/\/ --- Build HTML dengan data attribute untuk lightbox ---\r\n var itemsHtml = '';\r\n sliderData.forEach(function (item, index) {\r\n var desc = item.description.replace(\/\"\/g, '"');\r\n itemsHtml += '' +\r\n '<div data-slide-index=\"' + index + '\">' +\r\n '<div class=\"slider-card\" data-title=\"' + item.title + '\" data-desc=\"' + desc + '\" data-img=\"' + item.image + '\">' +\r\n '<div class=\"image-wrapper\">' +\r\n '<img decoding=\"async\" src=\"' + item.image + '\" alt=\"' + item.title + '\" loading=\"lazy\" ' +\r\n 'onerror=\"this.onerror=null;this.src=\\'https:\/\/placehold.co\/800x600\/28565d\/white?text=Gambar+tidak+tersedia\\';\" \/>' +\r\n '<\/div>' +\r\n '<div class=\"card-content\">' +\r\n '<div class=\"card-title\">' + item.title + '<\/div>' +\r\n '<div class=\"card-description\">' + desc + '<\/div>' +\r\n '<\/div>' +\r\n '<\/div>' +\r\n '<\/div>';\r\n });\r\n\r\n \/\/ --- Inisialisasi setiap instance slider ---\r\n $('[data-slider-instance] .js-horizontal-gallery-slider').each(function () {\r\n var $slider = $(this);\r\n\r\n if ($slider.hasClass('slick-initialized') || $slider.data('slider-inited')) {\r\n return;\r\n }\r\n $slider.data('slider-inited', true);\r\n\r\n $slider.html(itemsHtml);\r\n\r\n $slider.closest('.permata-slider-container')\r\n .find('.slider-skeleton').hide()\r\n .end()\r\n .find('.slider-content-wrapper').show();\r\n\r\n \/\/ --- Konfigurasi Slick dengan centerMode aktif ---\r\n $slider.slick({\r\n slidesToShow: 3,\r\n slidesToScroll: 1,\r\n infinite: true,\r\n autoplay: true,\r\n autoplaySpeed: 3000,\r\n arrows: true,\r\n dots: false,\r\n pauseOnHover: true,\r\n centerMode: true,\r\n centerPadding: '60px',\r\n responsive: [\r\n { breakpoint: 1024, settings: { slidesToShow: 3, centerPadding: '40px' } },\r\n { breakpoint: 768, settings: { slidesToShow: 2, centerPadding: '30px' } },\r\n { breakpoint: 480, settings: { slidesToShow: 1, centerPadding: '20px' } }\r\n ]\r\n });\r\n\r\n \/\/ --- Event click untuk Lightbox ---\r\n $slider.on('click', '.slider-card', function () {\r\n var title = $(this).data('title') || 'Detail Fasilitas';\r\n var desc = $(this).data('desc') || 'Tidak ada deskripsi';\r\n var img = $(this).data('img') || '';\r\n\r\n $('#lightboxTitle').text(title);\r\n $('#lightboxDescription').text(desc);\r\n $('#lightboxImage').attr('src', img);\r\n\r\n $('#facilityLightbox').addClass('active');\r\n $('body').css('overflow', 'hidden');\r\n });\r\n });\r\n\r\n \/\/ --- Lightbox Close Events ---\r\n $('#lightboxClose').on('click', function () {\r\n closeLightbox();\r\n });\r\n\r\n $('#facilityLightbox').on('click', function (e) {\r\n if (e.target === this) {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n $(document).on('keydown', function (e) {\r\n if (e.key === 'Escape') {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n function closeLightbox() {\r\n $('#facilityLightbox').removeClass('active');\r\n $('body').css('overflow', '');\r\n }\r\n }\r\n\r\n function boot() {\r\n var jq = window.jQuery;\r\n jq(document).ready(function ($) {\r\n initAllSliders($);\r\n });\r\n }\r\n\r\n \/\/ --- Muat jQuery & Slick ---\r\n loadScript('https:\/\/code.jquery.com\/jquery-3.6.0.min.js', hasJQuery)\r\n .then(function () {\r\n return loadScript('https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick.min.js', hasSlick);\r\n })\r\n .then(boot)\r\n .catch(function (err) {\r\n console.error('[Slider Galeri] Gagal inisialisasi:', err);\r\n var containers = document.querySelectorAll('[data-slider-instance]');\r\n containers.forEach(function (c) {\r\n var skeleton = c.querySelector('.slider-skeleton');\r\n if (skeleton) {\r\n skeleton.innerHTML = '<p style=\"width:100%;text-align:center;color:#7a8a94;padding:40px 0;\">Galeri tidak dapat dimuat. Coba muat ulang halaman.<\/p>';\r\n }\r\n });\r\n });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-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 PROGRAM CAMBRIDGE - SMPIT PERMATA\r\n Warna: #28565d\r\n ========================================================= *\/\r\n\r\n.cambridge-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.cambridge-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: 8px;\r\n}\r\n\r\n.cambridge-title span {\r\n color: #28565d;\r\n}\r\n\r\n.cambridge-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 - 4 kolom *\/\r\n.cambridge-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n\r\n\/* Card Program *\/\r\n.cambridge-card {\r\n background: #ffffff;\r\n border-radius: 16px;\r\n padding: 25px 20px;\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 #28565d *\/\r\n.cambridge-card:hover {\r\n border-color: #28565d;\r\n transform: translateY(-8px);\r\n box-shadow: 0 16px 50px rgba(40, 86, 93, 0.20);\r\n background: #28565d;\r\n}\r\n\r\n\/* Icon *\/\r\n.cambridge-card .icon {\r\n font-size: 40px;\r\n margin-bottom: 12px;\r\n display: block;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n.cambridge-card:hover .icon {\r\n transform: scale(1.2) rotate(-5deg);\r\n}\r\n\r\n\/* Nomor urut *\/\r\n.cambridge-card .number {\r\n display: inline-block;\r\n background: #28565d;\r\n color: #ffffff;\r\n font-size: 12px;\r\n font-weight: 700;\r\n padding: 3px 12px;\r\n border-radius: 20px;\r\n margin-bottom: 10px;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.cambridge-card:hover .number {\r\n background: #ffffff;\r\n color: #28565d;\r\n}\r\n\r\n\/* Judul card *\/\r\n.cambridge-card h3 {\r\n font-size: 18px;\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.cambridge-card p {\r\n font-size: 13px;\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.cambridge-card:hover h3,\r\n.cambridge-card:hover p {\r\n color: #ffffff;\r\n}\r\n\r\n\/* Efek garis bawah animasi *\/\r\n.cambridge-card::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n width: 0;\r\n height: 4px;\r\n background: #28565d;\r\n transition: all 0.4s ease;\r\n transform: translateX(-50%);\r\n border-radius: 4px 4px 0 0;\r\n}\r\n\r\n.cambridge-card:hover::after {\r\n width: 60%;\r\n}\r\n\r\n\/* Card Full Width (Program Immersion) *\/\r\n.cambridge-card-full {\r\n grid-column: 1 \/ -1;\r\n display: grid;\r\n grid-template-columns: 1fr 2fr;\r\n gap: 0;\r\n background: #ffffff;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);\r\n border: 2px solid #f0f4f8;\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.cambridge-card-full:hover {\r\n border-color: #28565d;\r\n transform: translateY(-6px);\r\n box-shadow: 0 16px 50px rgba(40, 86, 93, 0.20);\r\n}\r\n\r\n.cambridge-card-full .full-icon {\r\n background: #28565d;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 60px;\r\n padding: 30px;\r\n min-height: 150px;\r\n transition: all 0.4s ease;\r\n}\r\n\r\n.cambridge-card-full:hover .full-icon {\r\n background: #1a3b40;\r\n transform: scale(1.02);\r\n}\r\n\r\n.cambridge-card-full .full-body {\r\n padding: 25px 30px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n background: #f8faff;\r\n transition: all 0.4s ease;\r\n}\r\n\r\n.cambridge-card-full:hover .full-body {\r\n background: #ffffff;\r\n}\r\n\r\n.cambridge-card-full .full-body h3 {\r\n font-size: 22px;\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.cambridge-card-full .full-body h3 span {\r\n color: #28565d;\r\n}\r\n\r\n.cambridge-card-full .full-body p {\r\n font-size: 14px;\r\n color: #5a6f7e;\r\n line-height: 1.7;\r\n margin: 0;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.cambridge-card-full:hover .full-body h3,\r\n.cambridge-card-full:hover .full-body p {\r\n color: #243746;\r\n}\r\n\r\n\/* Badge Program *\/\r\n.cambridge-badge {\r\n display: inline-block;\r\n background: #28565d;\r\n color: #ffffff;\r\n font-size: 11px;\r\n font-weight: 600;\r\n padding: 4px 14px;\r\n border-radius: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n margin-top: 10px;\r\n width: fit-content;\r\n}\r\n\r\n.cambridge-card-full:hover .cambridge-badge {\r\n background: #1a3b40;\r\n}\r\n\r\n\/* =========================================================\r\n RESPONSIVE\r\n ========================================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n .cambridge-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .cambridge-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .cambridge-card-full {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .cambridge-card-full .full-icon {\r\n min-height: 100px;\r\n font-size: 40px;\r\n padding: 20px;\r\n }\r\n \r\n .cambridge-card-full .full-body {\r\n padding: 20px;\r\n }\r\n \r\n .cambridge-title {\r\n font-size: 24px;\r\n }\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n<div class=\"cambridge-section\">\r\n\r\n \r\n <h2 class=\"cambridge-title\">\ud83c\udf93 Program <span>Cambridge<\/span><\/h2>\r\n <p class=\"cambridge-subtitle\">Program unggulan berstandar internasional untuk mencetak generasi berprestasi<\/p>\r\n\r\n \r\n <div class=\"cambridge-grid\">\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83d\udde3\ufe0f<\/span>\r\n <span class=\"number\">#01<\/span>\r\n <h3>5 Minutes Presentation<\/h3>\r\n <p>Melatih keberanian dan kemampuan berbicara di depan umum dalam Bahasa Inggris selama 5 menit secara rutin.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83d\ude8c<\/span>\r\n <span class=\"number\">#02<\/span>\r\n <h3>Outing Session<\/h3>\r\n <p>Kegiatan belajar di luar kelas yang menyenangkan untuk mengaplikasikan kemampuan Bahasa Inggris dalam situasi nyata.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83c\udf0f<\/span>\r\n <span class=\"number\">#03<\/span>\r\n <h3>Stadium with Native<\/h3>\r\n <p>Sesi interaksi langsung dengan penutur asli (native speaker) untuk meningkatkan kemampuan speaking dan listening.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\u26fa<\/span>\r\n <span class=\"number\">#04<\/span>\r\n <h3>English Camp<\/h3>\r\n <p>Program berkemah dengan full English environment untuk mengasah kemampuan berbahasa Inggris secara intensif.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83c\udfad<\/span>\r\n <span class=\"number\">#05<\/span>\r\n <h3>ICP on Stage<\/h3>\r\n <p>Pentas seni dan presentasi proyek dalam Bahasa Inggris sebagai ajang unjuk kemampuan siswa.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83e\udd1d<\/span>\r\n <span class=\"number\">#06<\/span>\r\n <h3>Philanthropy<\/h3>\r\n <p>Program sosial yang mengajarkan siswa untuk berbagi dan peduli terhadap sesama melalui aksi nyata.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card-full\">\r\n <div class=\"full-icon\">\ud83c\udf0d<\/div>\r\n <div class=\"full-body\">\r\n <h3>\ud83c\udf1f Program <span>Immersion<\/span><\/h3>\r\n <p>Program pencelupan bahasa dan budaya selama periode tertentu di lingkungan berbahasa Inggris. Siswa tinggal bersama keluarga asing (host family) dan mengikuti aktivitas sehari-hari menggunakan Bahasa Inggris, sehingga kemampuan berbahasa berkembang secara alami dan menyenangkan.<\/p>\r\n <span class=\"cambridge-badge\">Program Unggulan<\/span>\r\n <\/div>\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-cd7f36d e-con e-atomic-element e-flexbox-base e-11e88f4 \" data-id=\"cd7f36d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cd7f36d\">\n \t\t<div class=\"elementor-element elementor-element-e1b5c47 elementor-widget elementor-widget-html\" data-id=\"e1b5c47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\/>\r\n\r\n<section class=\"phm-testi\" id=\"phmTesti\">\r\n <div class=\"phm-testi__head\">\r\n <span class=\"phm-testi__eyebrow\">Apa Kata Mereka<\/span>\r\n <h2 class=\"phm-testi__title\">Testimoni <span>Walimurid<\/span><\/h2>\r\n <p class=\"phm-testi__sub\">Kesan dan pesan dari orang tua siswa SMPIT Permata Mojokerto<\/p>\r\n <\/div>\r\n\r\n <div class=\"phm-testi__slider-wrap\">\r\n <div class=\"swiper phm-testi__swiper\">\r\n <div class=\"swiper-wrapper\" id=\"phmTestiGrid\">\r\n\r\n \r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"primary\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">HN<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phm-card__quote-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7.17 6C4.87 6 3 7.87 3 10.17V17h6.83v-6.83H5.83c0-1.29 1.05-2.34 2.34-2.34V6ZM17.17 6c-2.3 0-4.17 1.87-4.17 4.17V17H20v-6.83h-4.17c0-1.29 1.05-2.34 2.34-2.34V6Z\" fill=\"#fff\"\/><\/svg>\r\n <\/div>\r\n <p class=\"phm-card__text\">\r\n <span class=\"phm-short\">Alhamdulillah, selama 3 tahun bersekolah di SMP IT Permata, hafalan Ananda semakin bertambah dan yang paling penting adalah rasa percaya dirinya...<\/span>\r\n <span class=\"phm-full\" hidden>Alhamdulillah, selama 3 tahun bersekolah di SMP IT Permata, hafalan Ananda semakin bertambah dan yang paling penting adalah rasa percaya dirinya. Banyak hal yang berkembang menjadi lebih baik, sehingga Ananda tumbuh menjadi pribadi yang lebih percaya diri dan insyaAllah menjadi manusia yang lebih baik. Ustadz dan ustadzah juga sangat baik dalam mendampingi proses pendidikan Ananda.<\/span>\r\n <button type=\"button\" class=\"phm-card__toggle\">Read more<\/button>\r\n <\/p>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">Ibu Herdiana Setyaningsih<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n \r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"primary\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">AA<\/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\">Jazakumullahu Khairan katsir Ustadz\/Ustadzah, Semoga SMP Islam Terpadu Permata Mojokerto selalu berjaya...<\/span>\r\n <span class=\"phm-full\" hidden>Jazakumullahu Khairan katsir Ustadz\/Ustadzah, Semoga SMP Islam Terpadu Permata Mojokerto selalu berjaya dan terus mencetak generasi-generasi Qur'ani yang berakhlak mulia.<\/span>\r\n <button type=\"button\" class=\"phm-card__toggle\">Read more<\/button>\r\n <\/p>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">Arie Arie<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n \r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"primary\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">ZS<\/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\">MasyaAllah... AAM yang sangat berkesan, beda dari lainnya... SMPIT Permata luar biasa...<\/span>\r\n <span class=\"phm-full\" hidden>MasyaAllah... AAM yang sangat berkesan, beda dari lainnya... SMPIT Permata luar biasa dalam mendidik karakter dan membangun kepribadian anak-anak menjadi pribadi yang beriman dan berprestasi.<\/span>\r\n <button type=\"button\" class=\"phm-card__toggle\">Read more<\/button>\r\n <\/p>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">Zulfi Sufairoh<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \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-primary: #28565d;\r\n --phm-primary-dark: #1d3f45;\r\n --phm-primary-light: #4a8a94;\r\n --phm-ink: #243746;\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 background: #f8fafc;\r\n border-radius: 24px;\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-primary);\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-primary);\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-primary);\r\n}\r\n\r\n.phm-testi__sub {\r\n margin: 0;\r\n color: var(--phm-muted);\r\n font-size: 16px;\r\n line-height: 1.6;\r\n}\r\n\r\n.phm-testi__slider-wrap {\r\n position: relative;\r\n padding: 50px 40px 64px;\r\n}\r\n\r\n\/* --- Perbaikan agar avatar tidak kepotong --- *\/\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(40, 86, 93, 0.15);\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-primary));\r\n}\r\n\r\n.phm-card[data-accent=\"primary\"] { --phm-accent: var(--phm-primary); }\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: linear-gradient(135deg, var(--phm-primary), var(--phm-primary-light));\r\n box-shadow: 0 8px 18px rgba(40, 86, 93, 0.25);\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: linear-gradient(135deg, var(--phm-primary), var(--phm-primary-dark));\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-accent, var(--phm-primary));\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 kutipan --- *\/\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-accent, var(--phm-primary));\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.8;\r\n text-decoration: underline;\r\n}\r\n\r\n\/* --- Nama --- *\/\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}\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-primary);\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.phm-testi__nav:hover {\r\n background: var(--phm-primary);\r\n box-shadow: 0 8px 20px rgba(40, 86, 93, 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.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-primary);\r\n width: 28px;\r\n border-radius: 6px;\r\n}\r\n\r\n\/* --- Responsive --- *\/\r\n@media (max-width: 1024px) {\r\n .phm-testi__nav { display: none !important; }\r\n .phm-testi__slider-wrap { padding-left: 20px; padding-right: 20px; }\r\n}\r\n\r\n@media (max-width: 680px) {\r\n .phm-testi { padding: 60px 16px 70px; }\r\n .phm-card { padding: 48px 24px 28px; }\r\n .phm-card__avatar-wrap { left: 24px; width: 68px; height: 68px; top: -30px; }\r\n .phm-card__avatar .phm-initials { font-size: 18px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .phm-card { transition: none; }\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\r\n\r\n<script>\r\n(function($) {\r\n 'use strict';\r\n \r\n var isElementorEdit = (window.elementorFrontend && window.elementorFrontend.isEditMode());\r\n\r\n function initPhmTesti() {\r\n var section = document.getElementById('phmTesti');\r\n if (!section) return;\r\n\r\n section.addEventListener('click', function (e) {\r\n var btn = e.target.closest('.phm-card__toggle');\r\n if (!btn) return;\r\n e.preventDefault();\r\n var wrap = btn.closest('.phm-card__text');\r\n var isExpanded = wrap.classList.toggle('is-expanded');\r\n btn.textContent = isExpanded ? 'Read less' : 'Read more';\r\n });\r\n\r\n if (typeof window.Swiper !== 'undefined') {\r\n var sliderWrap = document.querySelector('.phm-testi__slider-wrap');\r\n var swiperContainer = document.querySelector('.phm-testi__swiper');\r\n \r\n if (!sliderWrap || !swiperContainer) return;\r\n\r\n if (sliderWrap.swiperInstance) {\r\n sliderWrap.swiperInstance.destroy(true, true);\r\n }\r\n\r\n var swiper = new window.Swiper(swiperContainer, {\r\n slidesPerView: 1,\r\n spaceBetween: 28,\r\n speed: 800,\r\n loop: true,\r\n grabCursor: true,\r\n autoplay: {\r\n delay: 4500,\r\n disableOnInteraction: false,\r\n pauseOnMouseEnter: true\r\n },\r\n pagination: {\r\n el: '.phm-testi__dots',\r\n clickable: true\r\n },\r\n navigation: {\r\n nextEl: '.swiper-button-next.phm-testi__nav',\r\n prevEl: '.swiper-button-prev.phm-testi__nav'\r\n },\r\n breakpoints: {\r\n 0: { slidesPerView: 1 },\r\n 768: { slidesPerView: 2 },\r\n 1100: { slidesPerView: 3 }\r\n },\r\n on: {\r\n init: function () {\r\n sliderWrap.classList.add('is-ready');\r\n }\r\n }\r\n });\r\n \r\n sliderWrap.swiperInstance = swiper;\r\n }\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initPhmTesti);\r\n } else {\r\n initPhmTesti();\r\n }\r\n\r\n if (window.elementorFrontend) {\r\n window.elementorFrontend.hooks.addAction('frontend\/element_ready\/html.default', function($scope) {\r\n if ($scope.find('#phmTesti').length) {\r\n setTimeout(initPhmTesti, 150);\r\n }\r\n });\r\n \r\n window.elementor.on('document:loaded', function() {\r\n setTimeout(initPhmTesti, 300);\r\n });\r\n }\r\n})(window.jQuery);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-c74148c e-con e-atomic-element e-flexbox-base e-c74148c-e183062 \" data-id=\"c74148c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c74148c\">\n <section class=\"elementor-element elementor-element-aa099a1 e-con e-atomic-element e-flexbox-base e-aa099a1-4f4d9eb \" data-id=\"aa099a1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"aa099a1\">\n <div class=\"elementor-element elementor-element-4771673 e-con e-atomic-element e-flexbox-base e-4771673-f021890 \" data-id=\"4771673\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4771673\">\n \t\t<div class=\"elementor-element elementor-element-7f0b293 elementor-widget elementor-widget-image\" data-id=\"7f0b293\" 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=\"286\" height=\"300\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-286x300.png\" class=\"attachment-medium size-medium wp-image-1195\" alt=\"\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-286x300.png 286w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-975x1024.png 975w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-768x806.png 768w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM.png 1224w\" sizes=\"(max-width: 286px) 100vw, 286px\" \/>\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-9aeb221 e-con e-atomic-element e-flexbox-base e-9aeb221-4f7b766 \" data-id=\"9aeb221\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9aeb221\">\n \t\t\t<img class=\"e-image-base \" data-interaction-id=\"c646785\"\/>\t\t\t\t\t<h1 data-interaction-id=\"19de104\" class=\"e-19de104-c96ee2e e-heading-base\">Wujudkan Prestasi, Mulai di Sini!<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-01cb891 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"01cb891\" 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:\/\/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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SMPIT Permata – Penerimaan Peserta Didik Baru \ud83c\udf92 Penerimaan Peserta Didik Baru Bergabunglah dengan keluarga besar SMPIT Permata! Tempat di mana generasi muda dibina dengan pendidikan berkualitas, berbasis Islam, dan berwawasan global untuk mencetak pemimpin masa depan. \ud83d\udcda Fasilitas & Kegiatan Unggulan Didukung oleh fasilitas modern dan kegiatan ekstrakurikuler yang beragam, mulai dari sains, olahraga, […]<\/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:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":344,"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":1271,"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/1271"}],"wp:attachment":[{"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n SMPIT 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', system-ui, sans-serif;\r\n background: #f0f4f5;\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:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-10.17.02.jpeg');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: scroll;\r\n\r\n padding: 120px 20px 40px 20px;\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 - LEBIH GELAP, TANPA BLUR\r\n ========================================================= *\/\r\n\r\n .slider-container::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n \/* ===== OVERLAY LEBIH GELAP ===== *\/\r\n background: rgba(0, 0, 0, 0.72);\r\n z-index: 1;\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\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: 1250px;\r\n\r\n padding: 2rem 1rem;\r\n\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n\r\n gap: 2.5rem;\r\n\r\n align-items: center;\r\n\r\n min-height: calc(100vh - 160px);\r\n }\r\n\r\n \/* =========================================================\r\n KOLOM KIRI - TANPA ANIMASI BERAT\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: 1.2rem;\r\n\r\n padding: 2.5rem 2.8rem;\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.08);\r\n\r\n box-shadow:\r\n 0 30px 60px -20px rgba(0, 0, 0, 0.6),\r\n 0 0 0 1px rgba(255, 255, 255, 0.03) inset;\r\n\r\n min-height: 320px;\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 overflow: hidden;\r\n\r\n margin: 0 0 20px 0;\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:\r\n 0 36px 70px -20px rgba(0, 0, 0, 0.7),\r\n 0 0 0 1px rgba(255, 255, 255, 0.10) inset;\r\n border-color: rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n \/* =========================================================\r\n TEXT SLIDER - RINGAN\r\n ========================================================= *\/\r\n\r\n .text-slide .slide-item {\r\n display: none;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\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 opacity: 1;\r\n }\r\n\r\n \/* =========================================================\r\n JUDUL\r\n ========================================================= *\/\r\n\r\n .text-slide .slide-item h2 {\r\n font-size: clamp(1.8rem, 4vw, 3rem);\r\n font-weight: 700;\r\n line-height: 1.1;\r\n color: #fff;\r\n text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n \/* --- GARIS BAWAH (STATIS, TANPA ANIMASI BERAT) --- *\/\r\n .text-slide .slide-item h2 .underline-effect {\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .text-slide .slide-item h2 .underline-effect::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: linear-gradient(90deg, #28565D, #4A8A93, #8FC4C9, #4A8A93, #28565D);\r\n background-size: 200% 100%;\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 \/* =========================================================\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 margin: 10px 0 20px 0;\r\n padding: 8px;\r\n border-radius: 2rem;\r\n\r\n background: rgba(0, 0, 0, 0.25);\r\n box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n \/* =========================================================\r\n IMAGE SLIDE - TANPA ROTASI BERAT\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 transform: scale(0.95);\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.45));\r\n border-radius: 1.8rem;\r\n overflow: hidden;\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 transition: transform 0.4s ease, filter 0.4s ease;\r\n }\r\n\r\n .right-col .image-slide.active img:hover {\r\n transform: scale(1.02);\r\n filter: brightness(1.05) contrast(1.02);\r\n }\r\n\r\n \/* =========================================================\r\n DOTS - WARNA #28565D\r\n ========================================================= *\/\r\n\r\n .dots-container {\r\n display: flex;\r\n justify-content: center;\r\n gap: 0.85rem;\r\n position: absolute;\r\n bottom: 1.8rem;\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: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.20);\r\n border: 2px solid rgba(255, 255, 255, 0.20);\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n position: relative;\r\n }\r\n\r\n .dot.active {\r\n background: #4A8A93;\r\n border-color: #4A8A93;\r\n transform: scale(1.25);\r\n box-shadow: 0 0 25px rgba(40, 86, 93, 0.5);\r\n }\r\n\r\n .dot:hover {\r\n transform: scale(1.15);\r\n background: rgba(40, 86, 93, 0.4);\r\n border-color: rgba(40, 86, 93, 0.4);\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 1rem;\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 .slider-container {\r\n padding: 100px 16px 40px 16px;\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.8rem;\r\n min-height: calc(100vh - 140px);\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 border-radius: 1.5rem;\r\n }\r\n .right-col {\r\n border-radius: 1.5rem;\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 }\r\n\r\n @media (max-width: 820px) {\r\n .slider-container {\r\n padding: 90px 14px 30px 14px;\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 - 120px);\r\n padding: 1.5rem 0.5rem;\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.45);\r\n padding: 2rem 2.2rem;\r\n border-radius: 1.8rem;\r\n gap: 1rem;\r\n box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.5);\r\n }\r\n .left-col:hover {\r\n background: rgba(0, 0, 0, 0.50);\r\n }\r\n .right-col {\r\n order: 1;\r\n aspect-ratio: 16 \/ 10;\r\n min-height: 280px;\r\n margin: 0 0 10px 0;\r\n padding: 6px;\r\n border-radius: 1.5rem;\r\n }\r\n .right-col .image-slide {\r\n border-radius: 1.5rem;\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 .dots-container {\r\n bottom: 1.5rem;\r\n gap: 0.7rem;\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 12px 25px 12px;\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.3rem;\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 padding: 4px;\r\n border-radius: 1.2rem;\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 .dots-container {\r\n gap: 0.7rem;\r\n bottom: 1.2rem;\r\n }\r\n .dot {\r\n width: 13px;\r\n height: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .slider-container {\r\n padding: 70px 10px 20px 10px;\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.8rem 0.2rem;\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 box-shadow: 0 12px 30px -10px 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 padding: 3px;\r\n border-radius: 1rem;\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 .dots-container {\r\n gap: 0.6rem;\r\n bottom: 0.8rem;\r\n }\r\n .dot {\r\n width: 11px;\r\n height: 11px;\r\n }\r\n }\r\n\r\n @media (max-width: 380px) {\r\n .slider-container {\r\n padding: 60px 8px 15px 8px;\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.5rem 0.1rem;\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: 150px;\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 padding: 2px;\r\n border-radius: 0.8rem;\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 .dots-container {\r\n gap: 0.5rem;\r\n bottom: 0.6rem;\r\n }\r\n .dot {\r\n width: 9px;\r\n height: 9px;\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 transition: none;\r\n }\r\n .right-col .image-slide {\r\n transition: none;\r\n }\r\n .right-col .image-slide.active img:hover {\r\n transform: none;\r\n }\r\n .left-col {\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\r\n <div class=\"left-col\">\r\n\r\n <div class=\"text-slide\">\r\n\r\n \r\n <div class=\"slide-item active\" data-index=\"0\">\r\n\r\n <h2>\r\n <span class=\"underline-effect\">\ud83c\udf92 Penerimaan Peserta Didik Baru<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n Bergabunglah dengan keluarga besar SMPIT Permata!\r\n Tempat di mana generasi muda dibina dengan pendidikan\r\n berkualitas, berbasis Islam, dan berwawasan global\r\n untuk mencetak pemimpin masa depan.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"slide-item\" data-index=\"1\">\r\n\r\n <h2>\r\n <span class=\"underline-effect\">\ud83d\udcda Fasilitas & Kegiatan Unggulan<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n Didukung oleh fasilitas modern dan kegiatan\r\n ekstrakurikuler yang beragam, mulai dari sains,\r\n olahraga, seni, hingga pengembangan karakter Islami.\r\n Setiap siswa diberikan ruang untuk berkembang\r\n sesuai potensi dan bakatnya.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"slide-item\" data-index=\"2\">\r\n\r\n <h2>\r\n <span class=\"underline-effect\">\ud83c\udf1f Prestasi & Karakter Unggul<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n Kami bangga dengan prestasi akademik maupun\r\n non-akademik yang diraih oleh siswa-siswi SMPIT Permata.\r\n Dengan pendekatan pendidikan yang holistik dan\r\n pembinaan akhlak mulia, kami mencetak generasi\r\n cerdas, beriman, dan berkarakter.\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\r\n <div class=\"right-col\">\r\n\r\n \r\n <div class=\"image-slide active\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM.png\"\r\n alt=\"SMPIT Permata\"\r\n loading=\"lazy\"\r\n \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"image-slide\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom.png\"\r\n alt=\"Kegiatan SMPIT Permata\"\r\n loading=\"lazy\"\r\n \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"image-slide\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom.png\"\r\n alt=\"Prestasi SMPIT 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\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\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\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=\"806\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-768x806.png\" class=\"attachment-medium_large size-medium_large wp-image-1195\" alt=\"\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-768x806.png 768w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-286x300.png 286w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-975x1024.png 975w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM.png 1224w\" 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 SMPIT 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 Menengah Pertama terdepa 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 SMPIT 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:\/\/smpitpermata.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"960\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata.jpeg\" class=\"attachment-full size-full wp-post-image\" alt=\"Langkah Perdana Kelas 9 SMPIT Permata: Menaklukkan TKA dengan Persiapan Matang\" loading=\"lazy\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata.jpeg 1280w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata-300x225.jpeg 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata-768x576.jpeg 768w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata-1024x768.jpeg 1024w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.sch.id\/?p=485\" rel=\"bookmark\">\n\t\t\t\t\t\t\tLangkah Perdana Kelas 9 SMPIT Permata: Menaklukkan TKA dengan Persiapan Matang\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 Atmosfer berbeda menyelimuti SMPIT Permata Mojokerto pekan ini. Untuk pertama kalinya, seluruh siswa...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.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:\/\/smpitpermata.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Keseruan Pucak MPLS SMPIT Permata Mojokerto: Membentuk Pribadi Berjiwa Pemimpin, Tangguh dn Kreatif\" loading=\"lazy\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit.jpg 1280w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit-300x169.jpg 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit-1024x576.jpg 1024w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/pramuka_smpit-768x432.jpg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.sch.id\/?p=481\" rel=\"bookmark\">\n\t\t\t\t\t\t\tKeseruan Pucak MPLS SMPIT Permata Mojokerto: Membentuk Pribadi Berjiwa Pemimpin, Tangguh dn Kreatif\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, 19 Juli 2024, SMPIT Permata Mojokerto sukses menyelenggarakan Perkemahan Jum\u2019at-Sabtu Dengan mengusung tema Membentuk...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.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:\/\/smpitpermata.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"864\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Siswi SMPIT Permata Mendapat Juara di Divya Competition Tingkat Nasional\" loading=\"lazy\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1.jpg 1536w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1-300x169.jpg 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1-1024x576.jpg 1024w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/prestasi-SMPIT-1-1536x864-1-768x432.jpg 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-post-content\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"hfe-post-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.sch.id\/?p=469\" rel=\"bookmark\">\n\t\t\t\t\t\t\tSiswi SMPIT Permata Mendapat Juara di Divya Competition Tingkat Nasional\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\tBy\u00a0faizna\u00a0\/\u00a025\/04\/2024 Alhamdulillah Barakallah Selamat Kepada Ananda Aurelia Zakiyyah Fatmawati siswi SMPIT Permata telah mendapatkan Juara...\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/smpitpermata.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-452454b e-con e-atomic-element e-flexbox-base e-452454b-51fff9f \" data-id=\"452454b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"452454b\">\n <section class=\"elementor-element elementor-element-d606da6 e-con e-atomic-element e-flexbox-base e-d606da6-5b75344 \" data-id=\"d606da6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d606da6\">\n <div class=\"elementor-element elementor-element-e42e292 e-con e-atomic-element e-flexbox-base e-e42e292-f8826de \" data-id=\"e42e292\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e42e292\">\n \t\t\t<img decoding=\"async\" class=\"e-image-base \" data-interaction-id=\"fbaccf9\" id=\"1164\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom.png\" width=\"1080\" height=\"1080\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom.png 1080w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom-300x300.png 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom-1024x1024.png 1024w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom-150x150.png 150w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-Photoroom-768x768.png 768w\" alt=\"\"\/>\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-ad950e9 e-con e-atomic-element e-flexbox-base e-ad950e9-7792d18 \" data-id=\"ad950e9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"ad950e9\">\n \t\t\t<img decoding=\"async\" class=\"e-image-base e-07ee9a4-40ec693\" data-interaction-id=\"07ee9a4\" id=\"930\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52.png\" width=\"1160\" height=\"1355\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52.png 1160w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52-257x300.png 257w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52-877x1024.png 877w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-20-Agu-2026-09.46.52-768x897.png 768w\" alt=\"\"\/>\t\t\t\t\t<h1 data-interaction-id=\"fbc905e\" class=\"e-fbc905e-640a3ac e-heading-base\">Program Unggulan<\/h1>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d1e6bb8 e-con e-atomic-element e-flexbox-base e-d1e6bb8-df7d157 \" data-id=\"d1e6bb8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d1e6bb8\">\n \t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"e-image-base \" data-interaction-id=\"e9dbd73\" id=\"1165\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom.png\" width=\"1080\" height=\"1080\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom.png 1080w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom-300x300.png 300w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom-1024x1024.png 1024w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom-150x150.png 150w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-1-Photoroom-768x768.png 768w\" alt=\"\"\/>\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n<div class=\"elementor-element elementor-element-81539b9 e-con e-atomic-element e-flexbox-base e-06120eb \" data-id=\"81539b9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"81539b9\">\n \t\t<div class=\"elementor-element elementor-element-50128bb elementor-widget elementor-widget-html\" data-id=\"50128bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n PROGRAM UNGGULAN - SMPIT PERMATA\r\n Warna: #28565d\r\n ========================================================= *\/\r\n\r\n.unggulan-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.unggulan-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: 8px;\r\n}\r\n\r\n.unggulan-title span {\r\n color: #28565d;\r\n}\r\n\r\n.unggulan-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.unggulan-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n}\r\n\r\n\/* Card Program *\/\r\n.unggulan-card {\r\n background: #ffffff;\r\n border-radius: 20px;\r\n padding: 30px 25px 35px;\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 *\/\r\n.unggulan-card:hover {\r\n border-color: #28565d;\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 60px rgba(40, 86, 93, 0.25);\r\n background: #28565d;\r\n}\r\n\r\n\/* Icon besar *\/\r\n.unggulan-card .icon {\r\n font-size: 50px;\r\n margin-bottom: 15px;\r\n display: block;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n.unggulan-card:hover .icon {\r\n transform: scale(1.2) rotate(-5deg);\r\n}\r\n\r\n\/* Nomor urut *\/\r\n.unggulan-card .number {\r\n display: inline-block;\r\n background: #28565d;\r\n color: #ffffff;\r\n font-size: 12px;\r\n font-weight: 700;\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n margin-bottom: 12px;\r\n letter-spacing: 0.5px;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.unggulan-card:hover .number {\r\n background: #ffffff;\r\n color: #28565d;\r\n}\r\n\r\n\/* Judul card *\/\r\n.unggulan-card h3 {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #243746;\r\n margin: 0 0 10px 0;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n\/* Deskripsi card *\/\r\n.unggulan-card p {\r\n font-size: 14px;\r\n color: #5a6f7e;\r\n line-height: 1.7;\r\n margin: 0;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n\/* HOVER - Semua teks jadi putih *\/\r\n.unggulan-card:hover h3,\r\n.unggulan-card:hover p {\r\n color: #ffffff;\r\n}\r\n\r\n\/* Efek garis bawah animasi *\/\r\n.unggulan-card::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n width: 0;\r\n height: 4px;\r\n background: #28565d;\r\n transition: all 0.4s ease;\r\n transform: translateX(-50%);\r\n border-radius: 4px 4px 0 0;\r\n}\r\n\r\n.unggulan-card:hover::after {\r\n width: 70%;\r\n}\r\n\r\n\/* Efek sudut dekorasi *\/\r\n.unggulan-card::before {\r\n content: '';\r\n position: absolute;\r\n top: -50px;\r\n right: -50px;\r\n width: 100px;\r\n height: 100px;\r\n background: rgba(40, 86, 93, 0.05);\r\n border-radius: 50%;\r\n transition: all 0.4s ease;\r\n}\r\n\r\n.unggulan-card:hover::before {\r\n background: rgba(255, 255, 255, 0.10);\r\n transform: scale(1.5);\r\n}\r\n\r\n\/* Badge \"Unggulan\" *\/\r\n.unggulan-badge {\r\n display: inline-block;\r\n background: #28565d;\r\n color: #ffffff;\r\n font-size: 10px;\r\n font-weight: 700;\r\n padding: 4px 14px;\r\n border-radius: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n margin-top: 12px;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.unggulan-card:hover .unggulan-badge {\r\n background: #ffffff;\r\n color: #28565d;\r\n}\r\n\r\n\/* =========================================================\r\n RESPONSIVE\r\n ========================================================= *\/\r\n\r\n@media (max-width: 992px) {\r\n .unggulan-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .unggulan-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .unggulan-card {\r\n padding: 25px 20px 30px;\r\n }\r\n \r\n .unggulan-title {\r\n font-size: 24px;\r\n }\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n<div class=\"unggulan-section\">\r\n\r\n \r\n <h2 class=\"unggulan-title\">\u2b50 Program <span>Unggulan<\/span><\/h2>\r\n <p class=\"unggulan-subtitle\">Program pembinaan karakter dan prestasi untuk mencetak generasi pemimpin<\/p>\r\n\r\n \r\n <div class=\"unggulan-grid\">\r\n\r\n \r\n <div class=\"unggulan-card\">\r\n <span class=\"icon\">\ud83d\udcd6<\/span>\r\n <span class=\"number\">#01<\/span>\r\n <h3>Tahfidz Al-Qur'an<\/h3>\r\n <p>Program pembinaan hafalan Al-Qur'an dengan metode yang menyenangkan dan terstruktur. Target hafalan 1-3 juz untuk setiap siswa.<\/p>\r\n <span class=\"unggulan-badge\">\ud83c\udf1f Program Utama<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"unggulan-card\">\r\n <span class=\"icon\">\ud83d\udc51<\/span>\r\n <span class=\"number\">#02<\/span>\r\n <h3>Leadership School <br><span style=\"font-size:14px; font-weight:500;\">with Leader In Me<\/span><\/h3>\r\n <p>Program kepemimpinan berbasis 7 Habits of Highly Effective People untuk membentuk karakter pemimpin yang tangguh dan berintegritas.<\/p>\r\n <span class=\"unggulan-badge\">\ud83c\udf1f Program Unggulan<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"unggulan-card\">\r\n <span class=\"icon\">\ud83c\udfc6<\/span>\r\n <span class=\"number\">#03<\/span>\r\n <h3>Leader of <br><span style=\"font-size:22px; font-weight:700; color:#28565d;\">Champion<\/span><\/h3>\r\n <p>Program pembinaan prestasi non-akademik di bidang olimpiade, olahraga, dan seni dengan bimbingan pelatih profesional.<\/p>\r\n <span class=\"unggulan-badge\">\ud83c\udf1f Program Andalan<\/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-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\r\n\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 \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 \r\n <div class=\"slider-content-wrapper\" style=\"display: none;\">\r\n <div class=\"horizontal-slider js-horizontal-gallery-slider\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \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 #28565d --- *\/\r\n.slick-center .slider-card {\r\n background-color: #28565d;\r\n box-shadow: 0 8px 30px rgba(40, 86, 93, 0.35);\r\n}\r\n\r\n.slick-center .slider-card .card-content {\r\n background-color: #28565d;\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 #28565d --- *\/\r\n.slider-card:hover {\r\n background-color: #28565d !important;\r\n box-shadow: 0 8px 30px rgba(40, 86, 93, 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: #28565d !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 --- *\/\r\n.image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 210px;\r\n border-radius: 20px 20px 0 0;\r\n overflow: hidden;\r\n background: #eef2f3;\r\n flex-shrink: 0;\r\n}\r\n\r\n.image-wrapper img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s ease;\r\n border-radius: 20px 20px 0 0;\r\n display: block;\r\n}\r\n\r\n\/* --- Card Content (Judul + Deskripsi) --- *\/\r\n.card-content {\r\n padding: 16px 18px 20px 18px;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n transition: background-color 0.5s ease;\r\n border-radius: 0 0 20px 20px;\r\n background-color: #ffffff;\r\n}\r\n\r\n.card-title {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #243746;\r\n line-height: 1.3;\r\n margin: 0 0 6px 0;\r\n transition: color 0.3s ease;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.card-description {\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: #5a6f7e;\r\n line-height: 1.5;\r\n margin: 0;\r\n transition: color 0.3s ease;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n\/* --- Tombol Panah Navigasi (Arrows) - WARNA #28565d --- *\/\r\n.horizontal-slider .slick-prev,\r\n.horizontal-slider .slick-next {\r\n width: 48px;\r\n height: 48px;\r\n background: #28565d !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(40, 86, 93, 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: #1E4045 !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 #28565d\r\n GAMBAR FULL TANPA TERPOTONG\r\n========================================== *\/\r\n.lightbox-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.85);\r\n z-index: 9999;\r\n justify-content: center;\r\n align-items: center;\r\n 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(40, 86, 93, 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: #28565d;\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(40, 86, 93, 0.4);\r\n}\r\n\r\n.lightbox-close:hover {\r\n background: #1E4045;\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 ===== *\/\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}\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: #28565d;\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 SLIDER - FASILITAS SMPIT PERMATA\r\n Warna: #28565d\r\n ===========================================================\r\n \u2605 Ganti URL gambar dengan URL dari Media Library kamu\r\n \u2605 Ganti title dan description sesuai keinginan\r\n =========================================================== *\/\r\n\r\n var sliderData = [\r\n {\r\n title: \"Kantin\",\r\n description: \"Kantin sehat dengan menu bergizi dan beragam pilihan makanan serta minuman yang terjaga kebersihan dan kualitasnya. Menyediakan makanan ringan hingga makan siang untuk memenuhi kebutuhan nutrisi siswa selama berada di sekolah.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-11.06.21-1.jpeg\"\r\n },\r\n {\r\n title: \"Perpustakaan\",\r\n description: \"Pusat literasi dengan koleksi buku yang lengkap dan beragam, mulai dari buku pelajaran, novel, hingga ensiklopedia. Ruang baca yang nyaman dan program gemar membaca untuk meningkatkan wawasan serta minat baca siswa.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-10.56.07-1.jpeg\"\r\n },\r\n {\r\n title: \"Lab Komputer\",\r\n description: \"Fasilitas teknologi modern dengan komputer spesifikasi terbaru, akses internet cepat, dan software edukatif yang mendukung pembelajaran. Bekal keterampilan digital untuk menghadapi era industri 4.0.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/TKA-SMPIT-Permata-2.jpeg\"\r\n },\r\n {\r\n title: \"Lab IPA\",\r\n description: \"Ruang praktikum sains yang lengkap dengan alat-alat eksperimen untuk pembelajaran Fisika, Kimia, dan Biologi secara langsung. Siswa dapat melakukan percobaan ilmiah yang menyenangkan dan interaktif.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-11.04.11.jpeg\"\r\n },\r\n {\r\n title: \"Permata Mart\",\r\n description: \"Toko sekolah yang menyediakan berbagai kebutuhan siswa seperti alat tulis, seragam, perlengkapan sekolah, dan camilan sehat. Memudahkan siswa dan orang tua dalam memenuhi kebutuhan belajar.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-10.56.06-1.jpeg\"\r\n },\r\n {\r\n title: \"Sport Center (GOR)\",\r\n description: \"Ruang olahraga indoor yang luas dan modern untuk berbagai kegiatan fisik seperti basket, voli, bulu tangkis, senam, dan futsal. Mendukung pengembangan bakat olahraga dan gaya hidup sehat siswa.\",\r\n image: \"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-10.56.05.jpeg\"\r\n }\r\n ];\r\n\r\n \/\/ --- Build HTML dengan data attribute untuk lightbox ---\r\n var itemsHtml = '';\r\n sliderData.forEach(function (item, index) {\r\n var desc = item.description.replace(\/\"\/g, '"');\r\n itemsHtml += '' +\r\n '<div data-slide-index=\"' + index + '\">' +\r\n '<div class=\"slider-card\" data-title=\"' + item.title + '\" data-desc=\"' + desc + '\" data-img=\"' + item.image + '\">' +\r\n '<div class=\"image-wrapper\">' +\r\n '<img decoding=\"async\" src=\"' + item.image + '\" alt=\"' + item.title + '\" loading=\"lazy\" ' +\r\n 'onerror=\"this.onerror=null;this.src=\\'https:\/\/placehold.co\/800x600\/28565d\/white?text=Gambar+tidak+tersedia\\';\" \/>' +\r\n '<\/div>' +\r\n '<div class=\"card-content\">' +\r\n '<div class=\"card-title\">' + item.title + '<\/div>' +\r\n '<div class=\"card-description\">' + desc + '<\/div>' +\r\n '<\/div>' +\r\n '<\/div>' +\r\n '<\/div>';\r\n });\r\n\r\n \/\/ --- Inisialisasi setiap instance slider ---\r\n $('[data-slider-instance] .js-horizontal-gallery-slider').each(function () {\r\n var $slider = $(this);\r\n\r\n if ($slider.hasClass('slick-initialized') || $slider.data('slider-inited')) {\r\n return;\r\n }\r\n $slider.data('slider-inited', true);\r\n\r\n $slider.html(itemsHtml);\r\n\r\n $slider.closest('.permata-slider-container')\r\n .find('.slider-skeleton').hide()\r\n .end()\r\n .find('.slider-content-wrapper').show();\r\n\r\n \/\/ --- Konfigurasi Slick dengan centerMode aktif ---\r\n $slider.slick({\r\n slidesToShow: 3,\r\n slidesToScroll: 1,\r\n infinite: true,\r\n autoplay: true,\r\n autoplaySpeed: 3000,\r\n arrows: true,\r\n dots: false,\r\n pauseOnHover: true,\r\n centerMode: true,\r\n centerPadding: '60px',\r\n responsive: [\r\n { breakpoint: 1024, settings: { slidesToShow: 3, centerPadding: '40px' } },\r\n { breakpoint: 768, settings: { slidesToShow: 2, centerPadding: '30px' } },\r\n { breakpoint: 480, settings: { slidesToShow: 1, centerPadding: '20px' } }\r\n ]\r\n });\r\n\r\n \/\/ --- Event click untuk Lightbox ---\r\n $slider.on('click', '.slider-card', function () {\r\n var title = $(this).data('title') || 'Detail Fasilitas';\r\n var desc = $(this).data('desc') || 'Tidak ada deskripsi';\r\n var img = $(this).data('img') || '';\r\n\r\n $('#lightboxTitle').text(title);\r\n $('#lightboxDescription').text(desc);\r\n $('#lightboxImage').attr('src', img);\r\n\r\n $('#facilityLightbox').addClass('active');\r\n $('body').css('overflow', 'hidden');\r\n });\r\n });\r\n\r\n \/\/ --- Lightbox Close Events ---\r\n $('#lightboxClose').on('click', function () {\r\n closeLightbox();\r\n });\r\n\r\n $('#facilityLightbox').on('click', function (e) {\r\n if (e.target === this) {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n $(document).on('keydown', function (e) {\r\n if (e.key === 'Escape') {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n function closeLightbox() {\r\n $('#facilityLightbox').removeClass('active');\r\n $('body').css('overflow', '');\r\n }\r\n }\r\n\r\n function boot() {\r\n var jq = window.jQuery;\r\n jq(document).ready(function ($) {\r\n initAllSliders($);\r\n });\r\n }\r\n\r\n \/\/ --- Muat jQuery & Slick ---\r\n loadScript('https:\/\/code.jquery.com\/jquery-3.6.0.min.js', hasJQuery)\r\n .then(function () {\r\n return loadScript('https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick.min.js', hasSlick);\r\n })\r\n .then(boot)\r\n .catch(function (err) {\r\n console.error('[Slider Galeri] Gagal inisialisasi:', err);\r\n var containers = document.querySelectorAll('[data-slider-instance]');\r\n containers.forEach(function (c) {\r\n var skeleton = c.querySelector('.slider-skeleton');\r\n if (skeleton) {\r\n skeleton.innerHTML = '<p style=\"width:100%;text-align:center;color:#7a8a94;padding:40px 0;\">Galeri tidak dapat dimuat. Coba muat ulang halaman.<\/p>';\r\n }\r\n });\r\n });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-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 PROGRAM CAMBRIDGE - SMPIT PERMATA\r\n Warna: #28565d\r\n ========================================================= *\/\r\n\r\n.cambridge-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.cambridge-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: 8px;\r\n}\r\n\r\n.cambridge-title span {\r\n color: #28565d;\r\n}\r\n\r\n.cambridge-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 - 4 kolom *\/\r\n.cambridge-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n\r\n\/* Card Program *\/\r\n.cambridge-card {\r\n background: #ffffff;\r\n border-radius: 16px;\r\n padding: 25px 20px;\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 #28565d *\/\r\n.cambridge-card:hover {\r\n border-color: #28565d;\r\n transform: translateY(-8px);\r\n box-shadow: 0 16px 50px rgba(40, 86, 93, 0.20);\r\n background: #28565d;\r\n}\r\n\r\n\/* Icon *\/\r\n.cambridge-card .icon {\r\n font-size: 40px;\r\n margin-bottom: 12px;\r\n display: block;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n.cambridge-card:hover .icon {\r\n transform: scale(1.2) rotate(-5deg);\r\n}\r\n\r\n\/* Nomor urut *\/\r\n.cambridge-card .number {\r\n display: inline-block;\r\n background: #28565d;\r\n color: #ffffff;\r\n font-size: 12px;\r\n font-weight: 700;\r\n padding: 3px 12px;\r\n border-radius: 20px;\r\n margin-bottom: 10px;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.cambridge-card:hover .number {\r\n background: #ffffff;\r\n color: #28565d;\r\n}\r\n\r\n\/* Judul card *\/\r\n.cambridge-card h3 {\r\n font-size: 18px;\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.cambridge-card p {\r\n font-size: 13px;\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.cambridge-card:hover h3,\r\n.cambridge-card:hover p {\r\n color: #ffffff;\r\n}\r\n\r\n\/* Efek garis bawah animasi *\/\r\n.cambridge-card::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n width: 0;\r\n height: 4px;\r\n background: #28565d;\r\n transition: all 0.4s ease;\r\n transform: translateX(-50%);\r\n border-radius: 4px 4px 0 0;\r\n}\r\n\r\n.cambridge-card:hover::after {\r\n width: 60%;\r\n}\r\n\r\n\/* Card Full Width (Program Immersion) *\/\r\n.cambridge-card-full {\r\n grid-column: 1 \/ -1;\r\n display: grid;\r\n grid-template-columns: 1fr 2fr;\r\n gap: 0;\r\n background: #ffffff;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);\r\n border: 2px solid #f0f4f8;\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.cambridge-card-full:hover {\r\n border-color: #28565d;\r\n transform: translateY(-6px);\r\n box-shadow: 0 16px 50px rgba(40, 86, 93, 0.20);\r\n}\r\n\r\n.cambridge-card-full .full-icon {\r\n background: #28565d;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 60px;\r\n padding: 30px;\r\n min-height: 150px;\r\n transition: all 0.4s ease;\r\n}\r\n\r\n.cambridge-card-full:hover .full-icon {\r\n background: #1a3b40;\r\n transform: scale(1.02);\r\n}\r\n\r\n.cambridge-card-full .full-body {\r\n padding: 25px 30px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n background: #f8faff;\r\n transition: all 0.4s ease;\r\n}\r\n\r\n.cambridge-card-full:hover .full-body {\r\n background: #ffffff;\r\n}\r\n\r\n.cambridge-card-full .full-body h3 {\r\n font-size: 22px;\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.cambridge-card-full .full-body h3 span {\r\n color: #28565d;\r\n}\r\n\r\n.cambridge-card-full .full-body p {\r\n font-size: 14px;\r\n color: #5a6f7e;\r\n line-height: 1.7;\r\n margin: 0;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.cambridge-card-full:hover .full-body h3,\r\n.cambridge-card-full:hover .full-body p {\r\n color: #243746;\r\n}\r\n\r\n\/* Badge Program *\/\r\n.cambridge-badge {\r\n display: inline-block;\r\n background: #28565d;\r\n color: #ffffff;\r\n font-size: 11px;\r\n font-weight: 600;\r\n padding: 4px 14px;\r\n border-radius: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n margin-top: 10px;\r\n width: fit-content;\r\n}\r\n\r\n.cambridge-card-full:hover .cambridge-badge {\r\n background: #1a3b40;\r\n}\r\n\r\n\/* =========================================================\r\n RESPONSIVE\r\n ========================================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n .cambridge-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .cambridge-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .cambridge-card-full {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .cambridge-card-full .full-icon {\r\n min-height: 100px;\r\n font-size: 40px;\r\n padding: 20px;\r\n }\r\n \r\n .cambridge-card-full .full-body {\r\n padding: 20px;\r\n }\r\n \r\n .cambridge-title {\r\n font-size: 24px;\r\n }\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n<div class=\"cambridge-section\">\r\n\r\n \r\n <h2 class=\"cambridge-title\">\ud83c\udf93 Program <span>Cambridge<\/span><\/h2>\r\n <p class=\"cambridge-subtitle\">Program unggulan berstandar internasional untuk mencetak generasi berprestasi<\/p>\r\n\r\n \r\n <div class=\"cambridge-grid\">\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83d\udde3\ufe0f<\/span>\r\n <span class=\"number\">#01<\/span>\r\n <h3>5 Minutes Presentation<\/h3>\r\n <p>Melatih keberanian dan kemampuan berbicara di depan umum dalam Bahasa Inggris selama 5 menit secara rutin.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83d\ude8c<\/span>\r\n <span class=\"number\">#02<\/span>\r\n <h3>Outing Session<\/h3>\r\n <p>Kegiatan belajar di luar kelas yang menyenangkan untuk mengaplikasikan kemampuan Bahasa Inggris dalam situasi nyata.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83c\udf0f<\/span>\r\n <span class=\"number\">#03<\/span>\r\n <h3>Stadium with Native<\/h3>\r\n <p>Sesi interaksi langsung dengan penutur asli (native speaker) untuk meningkatkan kemampuan speaking dan listening.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\u26fa<\/span>\r\n <span class=\"number\">#04<\/span>\r\n <h3>English Camp<\/h3>\r\n <p>Program berkemah dengan full English environment untuk mengasah kemampuan berbahasa Inggris secara intensif.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83c\udfad<\/span>\r\n <span class=\"number\">#05<\/span>\r\n <h3>ICP on Stage<\/h3>\r\n <p>Pentas seni dan presentasi proyek dalam Bahasa Inggris sebagai ajang unjuk kemampuan siswa.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card\">\r\n <span class=\"icon\">\ud83e\udd1d<\/span>\r\n <span class=\"number\">#06<\/span>\r\n <h3>Philanthropy<\/h3>\r\n <p>Program sosial yang mengajarkan siswa untuk berbagi dan peduli terhadap sesama melalui aksi nyata.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"cambridge-card-full\">\r\n <div class=\"full-icon\">\ud83c\udf0d<\/div>\r\n <div class=\"full-body\">\r\n <h3>\ud83c\udf1f Program <span>Immersion<\/span><\/h3>\r\n <p>Program pencelupan bahasa dan budaya selama periode tertentu di lingkungan berbahasa Inggris. Siswa tinggal bersama keluarga asing (host family) dan mengikuti aktivitas sehari-hari menggunakan Bahasa Inggris, sehingga kemampuan berbahasa berkembang secara alami dan menyenangkan.<\/p>\r\n <span class=\"cambridge-badge\">Program Unggulan<\/span>\r\n <\/div>\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-cd7f36d e-con e-atomic-element e-flexbox-base e-11e88f4 \" data-id=\"cd7f36d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cd7f36d\">\n \t\t<div class=\"elementor-element elementor-element-e1b5c47 elementor-widget elementor-widget-html\" data-id=\"e1b5c47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\/>\r\n\r\n<section class=\"phm-testi\" id=\"phmTesti\">\r\n <div class=\"phm-testi__head\">\r\n <span class=\"phm-testi__eyebrow\">Apa Kata Mereka<\/span>\r\n <h2 class=\"phm-testi__title\">Testimoni <span>Walimurid<\/span><\/h2>\r\n <p class=\"phm-testi__sub\">Kesan dan pesan dari orang tua siswa SMPIT Permata Mojokerto<\/p>\r\n <\/div>\r\n\r\n <div class=\"phm-testi__slider-wrap\">\r\n <div class=\"swiper phm-testi__swiper\">\r\n <div class=\"swiper-wrapper\" id=\"phmTestiGrid\">\r\n\r\n \r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"primary\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">HN<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phm-card__quote-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7.17 6C4.87 6 3 7.87 3 10.17V17h6.83v-6.83H5.83c0-1.29 1.05-2.34 2.34-2.34V6ZM17.17 6c-2.3 0-4.17 1.87-4.17 4.17V17H20v-6.83h-4.17c0-1.29 1.05-2.34 2.34-2.34V6Z\" fill=\"#fff\"\/><\/svg>\r\n <\/div>\r\n <p class=\"phm-card__text\">\r\n <span class=\"phm-short\">Alhamdulillah, selama 3 tahun bersekolah di SMP IT Permata, hafalan Ananda semakin bertambah dan yang paling penting adalah rasa percaya dirinya...<\/span>\r\n <span class=\"phm-full\" hidden>Alhamdulillah, selama 3 tahun bersekolah di SMP IT Permata, hafalan Ananda semakin bertambah dan yang paling penting adalah rasa percaya dirinya. Banyak hal yang berkembang menjadi lebih baik, sehingga Ananda tumbuh menjadi pribadi yang lebih percaya diri dan insyaAllah menjadi manusia yang lebih baik. Ustadz dan ustadzah juga sangat baik dalam mendampingi proses pendidikan Ananda.<\/span>\r\n <button type=\"button\" class=\"phm-card__toggle\">Read more<\/button>\r\n <\/p>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">Ibu Herdiana Setyaningsih<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n \r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"primary\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">AA<\/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\">Jazakumullahu Khairan katsir Ustadz\/Ustadzah, Semoga SMP Islam Terpadu Permata Mojokerto selalu berjaya...<\/span>\r\n <span class=\"phm-full\" hidden>Jazakumullahu Khairan katsir Ustadz\/Ustadzah, Semoga SMP Islam Terpadu Permata Mojokerto selalu berjaya dan terus mencetak generasi-generasi Qur'ani yang berakhlak mulia.<\/span>\r\n <button type=\"button\" class=\"phm-card__toggle\">Read more<\/button>\r\n <\/p>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">Arie Arie<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n \r\n <div class=\"swiper-slide\">\r\n <article class=\"phm-card\" data-accent=\"primary\">\r\n <div class=\"phm-card__avatar-wrap\">\r\n <div class=\"phm-card__avatar\">\r\n <div class=\"phm-initials\">ZS<\/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\">MasyaAllah... AAM yang sangat berkesan, beda dari lainnya... SMPIT Permata luar biasa...<\/span>\r\n <span class=\"phm-full\" hidden>MasyaAllah... AAM yang sangat berkesan, beda dari lainnya... SMPIT Permata luar biasa dalam mendidik karakter dan membangun kepribadian anak-anak menjadi pribadi yang beriman dan berprestasi.<\/span>\r\n <button type=\"button\" class=\"phm-card__toggle\">Read more<\/button>\r\n <\/p>\r\n <div class=\"phm-card__footer\">\r\n <div class=\"phm-card__name\">Zulfi Sufairoh<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \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-primary: #28565d;\r\n --phm-primary-dark: #1d3f45;\r\n --phm-primary-light: #4a8a94;\r\n --phm-ink: #243746;\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 background: #f8fafc;\r\n border-radius: 24px;\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-primary);\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-primary);\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-primary);\r\n}\r\n\r\n.phm-testi__sub {\r\n margin: 0;\r\n color: var(--phm-muted);\r\n font-size: 16px;\r\n line-height: 1.6;\r\n}\r\n\r\n.phm-testi__slider-wrap {\r\n position: relative;\r\n padding: 50px 40px 64px;\r\n}\r\n\r\n\/* --- Perbaikan agar avatar tidak kepotong --- *\/\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(40, 86, 93, 0.15);\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-primary));\r\n}\r\n\r\n.phm-card[data-accent=\"primary\"] { --phm-accent: var(--phm-primary); }\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: linear-gradient(135deg, var(--phm-primary), var(--phm-primary-light));\r\n box-shadow: 0 8px 18px rgba(40, 86, 93, 0.25);\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: linear-gradient(135deg, var(--phm-primary), var(--phm-primary-dark));\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-accent, var(--phm-primary));\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 kutipan --- *\/\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-accent, var(--phm-primary));\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.8;\r\n text-decoration: underline;\r\n}\r\n\r\n\/* --- Nama --- *\/\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}\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-primary);\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.phm-testi__nav:hover {\r\n background: var(--phm-primary);\r\n box-shadow: 0 8px 20px rgba(40, 86, 93, 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.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-primary);\r\n width: 28px;\r\n border-radius: 6px;\r\n}\r\n\r\n\/* --- Responsive --- *\/\r\n@media (max-width: 1024px) {\r\n .phm-testi__nav { display: none !important; }\r\n .phm-testi__slider-wrap { padding-left: 20px; padding-right: 20px; }\r\n}\r\n\r\n@media (max-width: 680px) {\r\n .phm-testi { padding: 60px 16px 70px; }\r\n .phm-card { padding: 48px 24px 28px; }\r\n .phm-card__avatar-wrap { left: 24px; width: 68px; height: 68px; top: -30px; }\r\n .phm-card__avatar .phm-initials { font-size: 18px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .phm-card { transition: none; }\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\r\n\r\n<script>\r\n(function($) {\r\n 'use strict';\r\n \r\n var isElementorEdit = (window.elementorFrontend && window.elementorFrontend.isEditMode());\r\n\r\n function initPhmTesti() {\r\n var section = document.getElementById('phmTesti');\r\n if (!section) return;\r\n\r\n section.addEventListener('click', function (e) {\r\n var btn = e.target.closest('.phm-card__toggle');\r\n if (!btn) return;\r\n e.preventDefault();\r\n var wrap = btn.closest('.phm-card__text');\r\n var isExpanded = wrap.classList.toggle('is-expanded');\r\n btn.textContent = isExpanded ? 'Read less' : 'Read more';\r\n });\r\n\r\n if (typeof window.Swiper !== 'undefined') {\r\n var sliderWrap = document.querySelector('.phm-testi__slider-wrap');\r\n var swiperContainer = document.querySelector('.phm-testi__swiper');\r\n \r\n if (!sliderWrap || !swiperContainer) return;\r\n\r\n if (sliderWrap.swiperInstance) {\r\n sliderWrap.swiperInstance.destroy(true, true);\r\n }\r\n\r\n var swiper = new window.Swiper(swiperContainer, {\r\n slidesPerView: 1,\r\n spaceBetween: 28,\r\n speed: 800,\r\n loop: true,\r\n grabCursor: true,\r\n autoplay: {\r\n delay: 4500,\r\n disableOnInteraction: false,\r\n pauseOnMouseEnter: true\r\n },\r\n pagination: {\r\n el: '.phm-testi__dots',\r\n clickable: true\r\n },\r\n navigation: {\r\n nextEl: '.swiper-button-next.phm-testi__nav',\r\n prevEl: '.swiper-button-prev.phm-testi__nav'\r\n },\r\n breakpoints: {\r\n 0: { slidesPerView: 1 },\r\n 768: { slidesPerView: 2 },\r\n 1100: { slidesPerView: 3 }\r\n },\r\n on: {\r\n init: function () {\r\n sliderWrap.classList.add('is-ready');\r\n }\r\n }\r\n });\r\n \r\n sliderWrap.swiperInstance = swiper;\r\n }\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initPhmTesti);\r\n } else {\r\n initPhmTesti();\r\n }\r\n\r\n if (window.elementorFrontend) {\r\n window.elementorFrontend.hooks.addAction('frontend\/element_ready\/html.default', function($scope) {\r\n if ($scope.find('#phmTesti').length) {\r\n setTimeout(initPhmTesti, 150);\r\n }\r\n });\r\n \r\n window.elementor.on('document:loaded', function() {\r\n setTimeout(initPhmTesti, 300);\r\n });\r\n }\r\n})(window.jQuery);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-c74148c e-con e-atomic-element e-flexbox-base e-c74148c-e183062 \" data-id=\"c74148c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c74148c\">\n <section class=\"elementor-element elementor-element-aa099a1 e-con e-atomic-element e-flexbox-base e-aa099a1-4f4d9eb \" data-id=\"aa099a1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"aa099a1\">\n <div class=\"elementor-element elementor-element-4771673 e-con e-atomic-element e-flexbox-base e-4771673-f021890 \" data-id=\"4771673\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4771673\">\n \t\t<div class=\"elementor-element elementor-element-7f0b293 elementor-widget elementor-widget-image\" data-id=\"7f0b293\" 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=\"286\" height=\"300\" src=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-286x300.png\" class=\"attachment-medium size-medium wp-image-1195\" alt=\"\" srcset=\"https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-286x300.png 286w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-975x1024.png 975w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM-768x806.png 768w, https:\/\/smpitpermata.sch.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-31-2026-08_42_52-PM.png 1224w\" sizes=\"(max-width: 286px) 100vw, 286px\" \/>\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-9aeb221 e-con e-atomic-element e-flexbox-base e-9aeb221-4f7b766 \" data-id=\"9aeb221\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9aeb221\">\n \t\t\t<img class=\"e-image-base \" data-interaction-id=\"c646785\"\/>\t\t\t\t\t<h1 data-interaction-id=\"19de104\" class=\"e-19de104-c96ee2e e-heading-base\">Wujudkan Prestasi, Mulai di Sini!<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-01cb891 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"01cb891\" 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:\/\/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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SMPIT Permata – Penerimaan Peserta Didik Baru \ud83c\udf92 Penerimaan Peserta Didik Baru Bergabunglah dengan keluarga besar SMPIT Permata! Tempat di mana generasi muda dibina dengan pendidikan berkualitas, berbasis Islam, dan berwawasan global untuk mencetak pemimpin masa depan. \ud83d\udcda Fasilitas & Kegiatan Unggulan Didukung oleh fasilitas modern dan kegiatan ekstrakurikuler yang beragam, mulai dari sains, olahraga, […]<\/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:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":344,"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":1271,"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/1271"}],"wp:attachment":[{"href":"https:\/\/smpitpermata.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}