{"id":100,"date":"2026-07-23T04:24:52","date_gmt":"2026-07-23T04:24:52","guid":{"rendered":"http:\/\/localhost\/base_wp_unit\/?page_id=100"},"modified":"2026-09-08T03:15:17","modified_gmt":"2026-09-08T03:15:17","slug":"fasilitas","status":"publish","type":"page","link":"https:\/\/sditpermatamojokerto.sch.id\/?page_id=100","title":{"rendered":"Fasilitas"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Fasilitas SDIT Permata - Sekolah Islam Terpadu<\/title>\r\n\r\n <!-- Google Fonts -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n \/* =========================================================\r\n RESET & BASE\r\n ========================================================= *\/\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html,\r\n body {\r\n width: 100%;\r\n min-height: 100vh;\r\n font-family: 'Inter', 'Poppins', system-ui, sans-serif;\r\n background: #f8fafc;\r\n overflow-x: hidden;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n \/* =========================================================\r\n HEADER HALAMAN\r\n ========================================================= *\/\r\n\r\n .facility-header {\r\n position: relative;\r\n padding: 80px 20px 60px;\r\n text-align: center;\r\n background: linear-gradient(160deg, #007fae 0%, #005a7a 100%);\r\n overflow: hidden;\r\n border-radius: 0 0 3rem 3rem;\r\n }\r\n\r\n .facility-header::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08), transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .facility-header .corner-deco {\r\n position: absolute;\r\n width: 200px;\r\n height: 200px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,0.04);\r\n pointer-events: none;\r\n }\r\n .facility-header .corner-deco:nth-child(1) { top: -60px; right: -60px; width: 300px; height: 300px; }\r\n .facility-header .corner-deco:nth-child(2) { bottom: -80px; left: -80px; width: 350px; height: 350px; }\r\n .facility-header .corner-deco:nth-child(3) { top: 20px; left: 10%; width: 120px; height: 120px; border-color: rgba(255,255,255,0.03); }\r\n\r\n .facility-header .badge-header {\r\n display: inline-block;\r\n padding: 0.3rem 1.4rem;\r\n background: rgba(255,255,255,0.12);\r\n border: 1px solid rgba(255,255,255,0.15);\r\n border-radius: 30px;\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: #a8d8ea;\r\n margin-bottom: 1rem;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .facility-header h1 {\r\n font-size: clamp(2.2rem, 5vw, 3.8rem);\r\n font-weight: 800;\r\n color: #ffffff;\r\n line-height: 1.1;\r\n position: relative;\r\n z-index: 2;\r\n text-shadow: 0 4px 30px rgba(0,0,0,0.15);\r\n }\r\n\r\n .facility-header h1 span {\r\n color: #81D4FA;\r\n position: relative;\r\n }\r\n\r\n .facility-header h1 span::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #81D4FA, transparent);\r\n border-radius: 4px;\r\n }\r\n\r\n .facility-header p {\r\n font-size: clamp(1rem, 1.2vw, 1.2rem);\r\n color: rgba(255,255,255,0.85);\r\n max-width: 600px;\r\n margin: 1rem auto 0;\r\n position: relative;\r\n z-index: 2;\r\n font-weight: 300;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* =========================================================\r\n BREADCRUMB\r\n ========================================================= *\/\r\n\r\n .breadcrumb {\r\n max-width: 1350px;\r\n margin: 0 auto;\r\n padding: 16px 25px 0;\r\n font-size: 0.85rem;\r\n color: #7a8a94;\r\n }\r\n .breadcrumb a {\r\n color: #007fae;\r\n text-decoration: none;\r\n font-weight: 500;\r\n transition: color 0.2s ease;\r\n }\r\n .breadcrumb a:hover { color: #005a7a; }\r\n .breadcrumb span { color: #94a3b8; }\r\n\r\n \/* =========================================================\r\n SECTION TITLE\r\n ========================================================= *\/\r\n\r\n .section-title {\r\n text-align: center;\r\n max-width: 700px;\r\n margin: 0 auto 2.5rem;\r\n }\r\n\r\n .section-title .sub-label {\r\n display: inline-block;\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: #007fae;\r\n background: rgba(0, 127, 174, 0.08);\r\n padding: 0.2rem 1.2rem;\r\n border-radius: 30px;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .section-title h2 {\r\n font-size: clamp(1.8rem, 3vw, 2.8rem);\r\n font-weight: 700;\r\n color: #1a2a36;\r\n line-height: 1.2;\r\n }\r\n\r\n .section-title h2 span {\r\n color: #007fae;\r\n }\r\n\r\n .section-title p {\r\n color: #5a6f7e;\r\n font-size: 1rem;\r\n margin-top: 0.5rem;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* =========================================================\r\n GRID FASILITAS (ARTIKEL LENGKAP)\r\n ========================================================= *\/\r\n\r\n .facility-grid-section {\r\n max-width: 1350px;\r\n margin: 0 auto;\r\n padding: 40px 25px 60px;\r\n }\r\n\r\n .facility-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 28px;\r\n }\r\n\r\n .facility-card-large {\r\n background: #ffffff;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n border: 1px solid rgba(0, 127, 174, 0.06);\r\n }\r\n\r\n .facility-card-large:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 12px 40px rgba(0, 127, 174, 0.15);\r\n border-color: rgba(0, 127, 174, 0.2);\r\n }\r\n\r\n \/* =========================================================\r\n EFEK GAMBAR AGAR JERNIH + SHARPENING OPTIK\r\n ========================================================= *\/\r\n\r\n .facility-card-large .card-img {\r\n height: 230px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .facility-card-large .card-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;\r\n\r\n \/* ===== SHARPENING EFFECT (agar gambar lebih jernih) ===== *\/\r\n image-rendering: auto;\r\n filter: contrast(1.05) saturate(1.08) brightness(1.02);\r\n transform: scale(1.01);\r\n }\r\n\r\n \/* Hover: zoom halus + sharpening bertambah *\/\r\n .facility-card-large:hover .card-img img {\r\n transform: scale(1.07);\r\n filter: contrast(1.1) saturate(1.12) brightness(1.04);\r\n }\r\n\r\n \/* ===== EFFECT GLOW \/ CAHAYA TIPIS DI SUDUT GAMBAR ===== *\/\r\n .facility-card-large .card-img::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%, rgba(0,127,174,0.03) 100%);\r\n pointer-events: none;\r\n z-index: 1;\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n .facility-card-large:hover .card-img::after {\r\n opacity: 0.5;\r\n }\r\n\r\n \/* Badge *\/\r\n .facility-card-large .card-img .badge-facility {\r\n position: absolute;\r\n bottom: 16px;\r\n left: 16px;\r\n background: #007fae;\r\n color: #fff;\r\n font-size: 0.65rem;\r\n font-weight: 600;\r\n padding: 0.3rem 1.2rem;\r\n border-radius: 30px;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n box-shadow: 0 4px 16px rgba(0, 127, 174, 0.35);\r\n z-index: 2;\r\n backdrop-filter: blur(2px);\r\n }\r\n\r\n \/* Card Body *\/\r\n .facility-card-large .card-body {\r\n padding: 22px 26px 26px;\r\n }\r\n\r\n .facility-card-large .card-body h3 {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n color: #1a2a36;\r\n margin-bottom: 8px;\r\n line-height: 1.3;\r\n }\r\n\r\n .facility-card-large .card-body p {\r\n font-size: 0.95rem;\r\n color: #5a6f7e;\r\n line-height: 1.8;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .facility-card-large .card-body .read-more {\r\n color: #007fae;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n transition: gap 0.3s ease;\r\n }\r\n\r\n .facility-card-large .card-body .read-more:hover {\r\n gap: 12px;\r\n }\r\n\r\n .facility-card-large .card-body .read-more::after {\r\n content: '\u2192';\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .facility-card-large .card-body .read-more:hover::after {\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* =========================================================\r\n LIGHTBOX \/ MODAL\r\n ========================================================= *\/\r\n\r\n .lightbox-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.85);\r\n z-index: 9999;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n box-sizing: border-box;\r\n animation: lightboxFadeIn 0.3s ease;\r\n }\r\n\r\n .lightbox-overlay.active {\r\n display: flex;\r\n }\r\n\r\n @keyframes lightboxFadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n .lightbox-content {\r\n background: #ffffff;\r\n border-radius: 24px;\r\n max-width: 700px;\r\n width: 100%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n position: relative;\r\n box-shadow: 0 20px 60px rgba(0, 127, 174, 0.3);\r\n animation: lightboxSlideUp 0.4s ease;\r\n }\r\n\r\n @keyframes lightboxSlideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(40px) scale(0.95);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n\r\n .lightbox-close {\r\n position: absolute;\r\n top: 16px;\r\n right: 20px;\r\n background: #007fae;\r\n color: #ffffff;\r\n border: none;\r\n border-radius: 50%;\r\n width: 44px;\r\n height: 44px;\r\n font-size: 28px;\r\n line-height: 44px;\r\n text-align: center;\r\n cursor: pointer;\r\n z-index: 10;\r\n transition: all 0.3s ease;\r\n padding: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 4px 12px rgba(0, 127, 174, 0.4);\r\n }\r\n\r\n .lightbox-close:hover {\r\n background: #00668A;\r\n transform: rotate(90deg) scale(1.1);\r\n }\r\n\r\n .lightbox-body {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* ===== LIGHTBOX GAMBAR JERNIH ===== *\/\r\n .lightbox-image-wrapper {\r\n width: 100%;\r\n height: 320px;\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 \/* SHARPENING di lightbox *\/\r\n image-rendering: auto;\r\n filter: contrast(1.05) saturate(1.06) brightness(1.02);\r\n }\r\n\r\n .lightbox-info {\r\n padding: 30px 34px 34px;\r\n background: #ffffff;\r\n border-radius: 0 0 24px 24px;\r\n }\r\n\r\n .lightbox-title {\r\n font-size: 26px;\r\n font-weight: 700;\r\n color: #1a2a36;\r\n margin: 0 0 12px 0;\r\n line-height: 1.2;\r\n }\r\n\r\n .lightbox-title::before {\r\n content: \"\u2726 \";\r\n color: #007fae;\r\n }\r\n\r\n .lightbox-description {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #3d5563;\r\n line-height: 1.8;\r\n margin: 0;\r\n white-space: pre-wrap;\r\n word-wrap: break-word;\r\n }\r\n\r\n \/* =========================================================\r\n RESPONSIVE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 1024px) {\r\n .facility-grid { grid-template-columns: repeat(2, 1fr); }\r\n .facility-card-large .card-img { height: 200px; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .facility-header { padding: 60px 20px 50px; border-radius: 0 0 2rem 2rem; }\r\n .facility-grid { grid-template-columns: 1fr; max-width: 550px; margin: 0 auto; }\r\n .facility-card-large .card-img { height: 220px; }\r\n .lightbox-image-wrapper { height: 220px; }\r\n .lightbox-info { padding: 22px 22px 26px; }\r\n .lightbox-title { font-size: 20px; }\r\n .lightbox-description { font-size: 14px; }\r\n .lightbox-close { top: 12px; right: 14px; width: 38px; height: 38px; font-size: 22px; }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .facility-card-large .card-img { height: 190px; }\r\n .facility-card-large .card-body { padding: 18px 20px 22px; }\r\n .facility-card-large .card-body h3 { font-size: 1.05rem; }\r\n .facility-card-large .card-body p { font-size: 0.9rem; }\r\n .lightbox-image-wrapper { height: 180px; }\r\n .lightbox-info { padding: 18px 18px 22px; }\r\n .lightbox-title { font-size: 18px; }\r\n .lightbox-description { font-size: 13px; }\r\n .lightbox-close { top: 10px; right: 10px; width: 34px; height: 34px; font-size: 20px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .facility-grid-section { padding: 20px 14px 40px; }\r\n .facility-header { padding: 50px 16px 40px; border-radius: 0 0 1.5rem 1.5rem; }\r\n .facility-card-large .card-img { height: 170px; }\r\n .facility-card-large .card-img .badge-facility { font-size: 0.55rem; padding: 0.2rem 0.9rem; bottom: 12px; left: 12px; }\r\n .lightbox-image-wrapper { height: 150px; }\r\n .lightbox-info { padding: 14px 16px 18px; }\r\n .lightbox-title { font-size: 16px; }\r\n .lightbox-description { font-size: 12px; line-height: 1.6; }\r\n }\r\n\r\n @media (max-width: 380px) {\r\n .facility-card-large .card-img { height: 150px; }\r\n .facility-card-large .card-body { padding: 14px 16px 18px; }\r\n .facility-card-large .card-body h3 { font-size: 0.95rem; }\r\n .facility-card-large .card-body p { font-size: 0.8rem; }\r\n }\r\n\r\n \/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n *,\r\n *::before,\r\n *::after {\r\n animation-duration: 0.01ms !important;\r\n animation-iteration-count: 1 !important;\r\n transition-duration: 0.01ms !important;\r\n }\r\n .facility-card-large:hover { transform: none !important; }\r\n .facility-card-large:hover .card-img img { transform: none !important; filter: none !important; }\r\n }\r\n\r\n \/* =========================================================\r\n SKELETON LOADING (opsional, untuk menunggu data)\r\n ========================================================= *\/\r\n\r\n .facility-grid .skeleton-loading {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n padding: 20px;\r\n }\r\n .facility-grid .skeleton-loading .skeleton-img {\r\n width: 100%;\r\n height: 200px;\r\n border-radius: 16px;\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 .facility-grid .skeleton-loading .skeleton-text {\r\n height: 16px;\r\n border-radius: 8px;\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 .facility-grid .skeleton-loading .skeleton-text:nth-child(2) { width: 80%; }\r\n .facility-grid .skeleton-loading .skeleton-text:nth-child(3) { width: 60%; }\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 <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <!-- =========================================================\r\n HEADER\r\n ========================================================== -->\r\n\r\n <header class=\"facility-header\">\r\n <div class=\"corner-deco\"><\/div>\r\n <div class=\"corner-deco\"><\/div>\r\n <div class=\"corner-deco\"><\/div>\r\n\r\n <span class=\"badge-header\">Sarana & Prasarana<\/span>\r\n <h1>Fasilitas <span>SDIT Permata<\/span><\/h1>\r\n <p>Berbagai fasilitas unggulan yang mendukung proses belajar mengajar yang nyaman, aman, dan menyenangkan bagi seluruh siswa.<\/p>\r\n <\/header>\r\n\r\n <!-- =========================================================\r\n BREADCRUMB\r\n ========================================================== -->\r\n\r\n \r\n\r\n <!-- =========================================================\r\n GRID FASILITAS (ARTIKEL LENGKAP)\r\n ========================================================== -->\r\n\r\n <section class=\"facility-grid-section\">\r\n\r\n <div class=\"section-title\">\r\n <span class=\"sub-label\">\ud83d\udcd6 Detail Fasilitas<\/span>\r\n <h2>Fasilitas <span>Unggulan<\/span> SDIT Permata<\/h2>\r\n <p>Informasi lengkap tentang berbagai fasilitas yang tersedia untuk mendukung tumbuh kembang siswa.<\/p>\r\n <\/div>\r\n\r\n <div class=\"facility-grid\" id=\"facilityGrid\">\r\n <!-- Akan diisi lewat JS -->\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- =========================================================\r\n LIGHTBOX \/ MODAL\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 <!-- =========================================================\r\n JAVASCRIPT\r\n ========================================================== -->\r\n\r\n <script>\r\n (function () {\r\n\r\n \/* ===========================================================\r\n DATA FASILITAS SDIT PERMATA\r\n WARNA: #007fae (BIRU)\r\n =========================================================== *\/\r\n\r\n var facilityData = [{\r\n title: \"\ud83c\udfeb Ruang Kelas Representatif\",\r\n description: \"Ruang kelas yang nyaman dengan fasilitas AC, pencahayaan alami yang baik, media pembelajaran interaktif berbasis teknologi, dan suasana yang kondusif untuk belajar aktif serta menyenangkan. Setiap kelas dirancang untuk mendukung proses belajar mengajar yang optimal dengan kapasitas ideal sehingga setiap siswa mendapatkan perhatian yang cukup dari guru.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Ruang-Kelas-Representatif.jpeg\",\r\n badge: \"Ruang Belajar\"\r\n }, {\r\n title: \"\ud83d\udcd6 Perpustakaan\",\r\n description: \"Pusat literasi dengan koleksi buku yang beragam mulai dari buku pelajaran, cerita anak, ensiklopedia, hingga referensi pendidikan. Dilengkapi dengan ruang baca yang nyaman, area diskusi, dan program gemar membaca yang rutin diadakan untuk meningkatkan wawasan serta minat baca siswa sejak dini.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Perpustakaan.jpeg\",\r\n badge: \"Literasi\"\r\n }, {\r\n title: \"\ud83c\udfa4 Hall SD\",\r\n description: \"Ruang serbaguna modern yang dapat menampung berbagai kegiatan sekolah seperti upacara bendera, pentas seni, pertemuan orang tua, seminar, dan acara-acara penting lainnya. Dilengkapi dengan sistem audio yang baik dan tata cahaya yang mendukung setiap acara agar berjalan dengan maksimal.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Hall-SD.jpeg\",\r\n badge: \"Serbaguna\"\r\n }, {\r\n title: \"\ud83d\udcbb Lab Komputer\",\r\n description: \"Fasilitas teknologi informasi dengan komputer spesifikasi terbaru, koneksi internet cepat, dan berbagai software edukatif yang mendukung proses pembelajaran digital. Siswa diajarkan keterampilan dasar komputer, pemrograman, dan literasi digital sebagai bekal menghadapi era teknologi.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Lab-Komputer.jpeg\",\r\n badge: \"Teknologi\"\r\n }, {\r\n title: \"\ud83c\udff8 GOR (Gedung Olahraga)\",\r\n description: \"Ruang olahraga indoor yang lengkap dan representatif untuk berbagai kegiatan fisik seperti basket, voli, bulu tangkis, senam, dan ekstrakurikuler olahraga lainnya. Fasilitas ini mendukung pengembangan fisik siswa agar tumbuh sehat, bugar, dan memiliki jiwa sportivitas yang tinggi.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/GOR.jpeg\",\r\n badge: \"Olahraga\"\r\n }, {\r\n title: \"\ud83d\udd4c Masjid Miftahul Ilmi\",\r\n description: \"Pusat ibadah dan pembinaan karakter Islami yang dilengkapi dengan ruang sholat luas, area wudhu yang bersih, serta program pembinaan rutin seperti tahfidz Al-Qur'an, sholat berjamaah, dan kajian keislaman. Masjid ini menjadi tempat siswa belajar nilai-nilai spiritual dan akhlak mulia.\",\r\n image: \"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Masjid-Miftahul-Ilmi.jpeg\",\r\n badge: \"Ibadah\"\r\n }];\r\n\r\n \/* ===========================================================\r\n RENDER GRID FASILITAS\r\n =========================================================== *\/\r\n\r\n function renderGrid() {\r\n var grid = document.getElementById('facilityGrid');\r\n var gridHtml = '';\r\n\r\n facilityData.forEach(function (item) {\r\n var descShort = item.description.length > 140 ?\r\n item.description.substring(0, 140) + '...' :\r\n item.description;\r\n\r\n gridHtml += '' +\r\n '<div class=\"facility-card-large\" data-title=\"' + item.title + '\" data-desc=\"' + item\r\n .description.replace(\/\"\/g, '"') + '\" data-img=\"' + item.image + '\">' +\r\n '<div class=\"card-img\">' +\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\/007fae\/white?text=Gambar+tidak+tersedia\\';\" \/>' +\r\n '<span class=\"badge-facility\">' + item.badge + '<\/span>' +\r\n '<\/div>' +\r\n '<div class=\"card-body\">' +\r\n '<h3>' + item.title + '<\/h3>' +\r\n '<p>' + descShort + '<\/p>' +\r\n '<a href=\"#\" class=\"read-more\">Baca Selengkapnya<\/a>' +\r\n '<\/div>' +\r\n '<\/div>';\r\n });\r\n\r\n grid.innerHTML = gridHtml;\r\n\r\n \/\/ Event klik kartu grid untuk Lightbox\r\n grid.addEventListener('click', function (e) {\r\n var card = e.target.closest('.facility-card-large');\r\n if (!card) return;\r\n\r\n \/\/ Jika yang diklik adalah tombol \"Baca Selengkapnya\"\r\n if (e.target.closest('.read-more')) {\r\n e.preventDefault();\r\n openLightbox(card);\r\n return;\r\n }\r\n\r\n openLightbox(card);\r\n });\r\n }\r\n\r\n \/* ===========================================================\r\n LIGHTBOX FUNGSI\r\n =========================================================== *\/\r\n\r\n function openLightbox(element) {\r\n var title = element.dataset.title || 'Detail Fasilitas';\r\n var desc = element.dataset.desc || 'Tidak ada deskripsi';\r\n var img = element.dataset.img || '';\r\n\r\n document.getElementById('lightboxTitle').textContent = title;\r\n document.getElementById('lightboxDescription').textContent = desc;\r\n document.getElementById('lightboxImage').src = img;\r\n\r\n document.getElementById('facilityLightbox').classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeLightbox() {\r\n document.getElementById('facilityLightbox').classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/* ===========================================================\r\n LIGHTBOX EVENT\r\n =========================================================== *\/\r\n\r\n document.getElementById('lightboxClose').addEventListener('click', closeLightbox);\r\n\r\n document.getElementById('facilityLightbox').addEventListener('click', function (e) {\r\n if (e.target === this) {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n document.addEventListener('keydown', function (e) {\r\n if (e.key === 'Escape') {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n \/* ===========================================================\r\n BOOT\r\n =========================================================== *\/\r\n\r\n \/\/ Render grid setelah DOM siap\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', renderGrid);\r\n } else {\r\n renderGrid();\r\n }\r\n\r\n })();\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-da750c6 e-con e-atomic-element e-flexbox-base e-da750c6-8ad08fd \" data-id=\"da750c6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"da750c6\">\n <section class=\"elementor-element elementor-element-164223a e-con e-atomic-element e-flexbox-base e-164223a-4ed7139 \" data-id=\"164223a\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"164223a\">\n <div class=\"elementor-element elementor-element-f4b9ffd e-con e-atomic-element e-flexbox-base e-f4b9ffd-680e13f \" data-id=\"f4b9ffd\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f4b9ffd\">\n \t\t<div class=\"elementor-element elementor-element-0f74a5a elementor-widget elementor-widget-image\" data-id=\"0f74a5a\" 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=\"300\" height=\"300\" src=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-300x300.webp\" class=\"attachment-medium size-medium wp-image-1249\" alt=\"\" srcset=\"https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-300x300.webp 300w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-1024x1024.webp 1024w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-150x150.webp 150w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-768x768.webp 768w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-1536x1536.webp 1536w, https:\/\/sditpermatamojokerto.sch.id\/wp-content\/uploads\/2026\/08\/Tanpa-judul-Konten-Instagram-34-11-1-2048x2048.webp 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2c6b48f e-con e-atomic-element e-flexbox-base e-2c6b48f-24ef862 \" data-id=\"2c6b48f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2c6b48f\">\n \t\t\t<img class=\"e-image-base \" data-interaction-id=\"6db2ec2\"\/>\t\t\t\t\t<h1 data-interaction-id=\"c4bbbb6\" class=\"e-c4bbbb6-cdb0361 e-heading-base\">Tumbuhkan Potensi, Mulai dari Sini!<\/h1>\n\t\t\t\t<div class=\"elementor-element elementor-element-c2f550b elementor-align-center elementor-widget elementor-widget-button\" data-id=\"c2f550b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/ppdb.sitpermata.id\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Daftar Sekarang<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/section>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Fasilitas SDIT Permata – Sekolah Islam Terpadu Sarana & Prasarana Fasilitas SDIT Permata Berbagai fasilitas unggulan yang mendukung proses belajar mengajar yang nyaman, aman, dan menyenangkan bagi seluruh siswa. \ud83d\udcd6 Detail Fasilitas Fasilitas Unggulan SDIT Permata Informasi lengkap tentang berbagai fasilitas yang tersedia untuk mendukung tumbuh kembang siswa. × Tumbuhkan Potensi, Mulai dari Sini! Daftar […]<\/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-100","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=100"}],"version-history":[{"count":73,"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/100\/revisions"}],"predecessor-version":[{"id":1572,"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/100\/revisions\/1572"}],"wp:attachment":[{"href":"https:\/\/sditpermatamojokerto.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}