{"id":8,"date":"2026-04-18T15:24:12","date_gmt":"2026-04-18T15:24:12","guid":{"rendered":"https:\/\/lab.rwb.my.id\/paud\/?page_id=8"},"modified":"2026-04-20T11:57:10","modified_gmt":"2026-04-20T11:57:10","slug":"beranda","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/paud\/","title":{"rendered":"Beranda"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n PAUD Nurul Fikri - Tempat Anak Tumbuh Bahagia<\/title>\n\n <!-- SEO & Meta Tags -->\n <meta name=\"description\" content=\"PAUD Nurul Fikri adalah lembaga pendidikan anak usia dini yang menyediakan lingkungan belajar yang aman, penuh kasih, dan menyenangkan untuk tumbuh kembang anak.\">\n <meta property=\"og:title\" content=\"PAUD Nurul Fikri - Tempat Anak Tumbuh Bahagia\">\n <meta property=\"og:description\" content=\"Kami menyediakan lingkungan belajar yang aman, penuh kasih, dan menyenangkan untuk mengembangkan potensi terbaik buah hati Anda.\">\n <meta property=\"og:url\" content=\"https:\/\/paud-nurulfikri.com\">\n <meta property=\"og:type\" content=\"website\">\n \n <!-- Poppins Font -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <!-- Font Awesome Icons -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- GLOBAL STYLES & VARIABLES --- *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --primary-color: #FF9AA2;\n --secondary-color: #B4E7CE;\n --accent-color: #FFF3B0;\n --dark-bg: #0a192f;\n --glass-bg: rgba(255, 255, 255, 0.1);\n --glass-border: rgba(255, 255, 255, 0.2);\n --text-light: #ffffff;\n --text-gray: #a8b2d1;\n }\n\n body {\n font-family: 'Poppins', sans-serif;\n background: linear-gradient(135deg, #0a192f 0%, #172a45 50%, #0a192f 100%);\n color: var(--text-light);\n overflow-x: hidden;\n position: relative;\n padding-top: 80px; \n }\n\n \/* --- ANIMATED BACKGROUND --- *\/\n .animated-bg {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n }\n\n .particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n }\n\n .floating-element {\n position: absolute;\n font-size: 2rem;\n opacity: 0.7;\n animation: float-up 20s infinite linear;\n pointer-events: none;\n }\n\n .balloon-red { filter: hue-rotate(-50deg) saturate(1.5); }\n .balloon-yellow { filter: hue-rotate(20deg) saturate(2) brightness(1.2); }\n .balloon-green { filter: hue-rotate(90deg) saturate(1.5); }\n .balloon-blue { filter: hue-rotate(180deg) saturate(1.5); }\n\n @keyframes float-up {\n 0% { transform: translateY(100vh) rotate(-5deg); opacity: 0; }\n 10% { opacity: 0.7; }\n 90% { opacity: 0.7; }\n 100% { transform: translateY(-100vh) rotate(5deg); opacity: 0; }\n }\n \n \/* --- HEADER --- *\/\n header {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n padding: 1rem 2rem;\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--glass-border);\n z-index: 1000;\n transition: all 0.3s ease;\n }\n\n header.scrolled {\n padding: 0.7rem 2rem;\n background: rgba(10, 25, 47, 0.95);\n }\n\n .header-container {\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo-section {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .logo-section a {\n display: flex;\n align-items: center;\n gap: 1rem;\n text-decoration: none;\n color: inherit;\n }\n\n .logo {\n width: 50px;\n height: 50px;\n background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 1.5rem;\n animation: pulse 2s infinite;\n overflow: hidden;\n }\n\n .logo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n .site-title {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n \/* --- NAVIGATION --- *\/\n nav {\n display: flex;\n align-items: center;\n gap: 2rem;\n }\n\n .nav-list {\n display: flex;\n list-style: none;\n gap: 2rem;\n }\n\n .nav-link,\n .dropdown-toggle {\n color: var(--text-gray);\n text-decoration: none;\n transition: all 0.3s ease;\n position: relative;\n padding: 0.5rem 0;\n font-weight: 500;\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n cursor: pointer;\n background: none;\n border: none;\n font-family: 'Poppins', sans-serif;\n font-size: 1rem;\n }\n\n .nav-link::after,\n .dropdown-toggle::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--primary-color);\n transition: width 0.3s ease;\n }\n\n .nav-link:hover,\n .dropdown-toggle:hover {\n color: var(--text-light);\n }\n\n .nav-link:hover::after,\n .dropdown-toggle:hover::after {\n width: 100%;\n }\n\n .dropdown-toggle .fa-chevron-down {\n font-size: 0.6rem;\n transition: transform 0.3s ease;\n }\n\n \/* --- DROPDOWN MENU (DESKTOP) --- *\/\n .dropdown {\n position: relative;\n }\n\n .dropdown-menu {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(10px);\n background: rgba(10, 25, 47, 0.95);\n backdrop-filter: blur(15px);\n -webkit-backdrop-filter: blur(15px);\n border: 1px solid var(--glass-border);\n border-radius: 15px;\n padding: 0.6rem 0;\n min-width: 230px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n list-style: none;\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);\n z-index: 100;\n }\n\n .dropdown-menu::before {\n content: '';\n position: absolute;\n top: -6px;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n width: 12px;\n height: 12px;\n background: rgba(10, 25, 47, 0.95);\n border-top: 1px solid var(--glass-border);\n border-left: 1px solid var(--glass-border);\n }\n\n .dropdown:hover .dropdown-menu {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n .dropdown:hover .dropdown-toggle .fa-chevron-down {\n transform: rotate(180deg);\n }\n\n .dropdown-menu li a {\n display: flex;\n align-items: center;\n gap: 0.7rem;\n padding: 0.7rem 1.4rem;\n color: var(--text-gray);\n text-decoration: none;\n transition: all 0.3s ease;\n font-size: 0.9rem;\n font-weight: 400;\n white-space: nowrap;\n }\n\n .dropdown-menu li a i {\n width: 18px;\n text-align: center;\n font-size: 0.85rem;\n color: var(--primary-color);\n transition: all 0.3s ease;\n }\n\n .dropdown-menu li a:hover {\n color: var(--text-light);\n background: rgba(255, 154, 162, 0.08);\n }\n\n .dropdown-menu li a:hover i {\n color: var(--secondary-color);\n transform: scale(1.15);\n }\n\n .new-badge {\n background: linear-gradient(135deg, var(--primary-color), #ff6b6b);\n color: var(--dark-bg);\n font-size: 0.6rem;\n padding: 0.15rem 0.5rem;\n border-radius: 50px;\n font-weight: 700;\n margin-left: auto;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n animation: badge-pulse 2s infinite;\n }\n\n @keyframes badge-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n\n .dropdown-menu .menu-separator {\n height: 1px;\n background: var(--glass-border);\n margin: 0.3rem 1rem;\n }\n\n \/* --- HAMBURGER --- *\/\n .hamburger {\n display: none;\n flex-direction: column;\n cursor: pointer;\n gap: 4px;\n }\n\n .hamburger span {\n width: 25px;\n height: 3px;\n background: var(--primary-color);\n transition: all 0.3s ease;\n }\n\n .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }\n .hamburger.active span:nth-child(2) { opacity: 0; }\n .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }\n\n \/* --- HERO SECTION --- *\/\n .hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem 2rem 2rem; \n position: relative;\n z-index: 2;\n }\n\n .hero-content {\n max-width: 800px;\n text-align: center;\n z-index: 2;\n }\n\n .hero h1 {\n font-size: clamp(1.8rem, 4vw, 2.5rem);\n margin-bottom: 1.5rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: glow 2s ease-in-out infinite alternate;\n }\n\n @keyframes glow {\n from { filter: drop-shadow(0 0 20px rgba(255, 154, 162, 0.5)); }\n to { filter: drop-shadow(0 0 30px rgba(180, 231, 206, 0.7)); }\n }\n\n .hero p {\n font-size: 1.2rem;\n color: var(--text-gray);\n margin-bottom: 2rem;\n line-height: 1.6;\n }\n\n .cta-buttons {\n display: flex;\n gap: 1.5rem;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .btn {\n padding: 1rem 2.5rem;\n border: none;\n border-radius: 50px;\n font-size: 1.1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n position: relative;\n overflow: hidden;\n }\n\n .btn-primary {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--dark-bg);\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--text-light);\n border: 2px solid var(--primary-color);\n }\n\n .btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(255, 154, 162, 0.3);\n }\n\n \/* --- FACILITIES SECTION --- *\/\n .facilities { padding: 5rem 2rem; background: rgba(10, 25, 47, 0.5); position: relative; z-index: 2; }\n .container { max-width: 1200px; margin: 0 auto; }\n .section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\n .facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }\n .facility-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2rem; transition: all 0.3s ease; position: relative; overflow: hidden; }\n .facility-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, transparent, rgba(255, 154, 162, 0.1)); opacity: 0; transition: opacity 0.3s ease; }\n .facility-card:hover::before { opacity: 1; }\n .facility-card:hover { transform: translateY(-10px); border-color: var(--primary-color); }\n .facility-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--dark-bg); }\n .facility-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }\n .facility-card p { color: var(--text-gray); line-height: 1.6; }\n\n \/* --- PROGRAMS SECTION --- *\/\n .programs { padding: 5rem 2rem; background: linear-gradient(135deg, rgba(255, 154, 162, 0.05), rgba(180, 231, 206, 0.05)); position: relative; z-index: 2; }\n .program-container { max-width: 1200px; margin: 0 auto; }\n .program-tabs { display: flex; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }\n .program-tab { padding: 0.8rem 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50px; color: var(--text-gray); cursor: pointer; transition: all 0.3s ease; font-family: 'Poppins', sans-serif; font-weight: 500; }\n .program-tab.active { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--dark-bg); border-color: transparent; }\n .program-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }\n .program-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; display: none; }\n .program-card.active { display: flex; flex-direction: column; }\n .program-image { height: 200px; background: linear-gradient(135deg, rgba(255, 154, 162, 0.2), rgba(180, 231, 206, 0.2)); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--primary-color); }\n .program-details { padding: 2rem; }\n .program-details h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--primary-color); }\n .program-details p { color: var(--text-gray); line-height: 1.6; margin-bottom: 1.5rem; }\n .program-features { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n .program-feature { padding: 0.5rem 1rem; background: rgba(255, 154, 162, 0.1); border-radius: 50px; font-size: 0.9rem; color: var(--primary-color); }\n\n \/* --- GALLERY SECTION --- *\/\n .gallery { padding: 5rem 2rem; background: rgba(10, 25, 47, 0.5); position: relative; z-index: 2; }\n .gallery-container { max-width: 1200px; margin: 0 auto; }\n .gallery-filters { display: flex; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }\n .gallery-filter { padding: 0.8rem 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50px; color: var(--text-gray); cursor: pointer; transition: all 0.3s ease; font-family: 'Poppins', sans-serif; font-weight: 500; }\n .gallery-filter.active { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--dark-bg); border-color: transparent; }\n .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }\n .gallery-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; }\n .gallery-card:hover { transform: translateY(-10px); border-color: var(--primary-color); }\n .gallery-image { height: 250px; background: linear-gradient(135deg, rgba(255, 154, 162, 0.2), rgba(180, 231, 206, 0.2)); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--primary-color); position: relative; overflow: hidden; }\n .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, rgba(10, 25, 47, 0.9)); display: flex; align-items: flex-end; padding: 1.5rem; opacity: 0; transition: opacity 0.3s ease; }\n .gallery-card:hover .gallery-overlay { opacity: 1; }\n .gallery-category { padding: 0.3rem 0.8rem; background: var(--accent-color); border-radius: 50px; font-size: 0.8rem; color: var(--dark-bg); font-weight: 600; margin-bottom: 0.5rem; display: inline-block; }\n .gallery-details { padding: 2rem; }\n .gallery-details h3 { font-size: 1.3rem; margin-bottom: 1rem; }\n .gallery-details p { color: var(--text-gray); line-height: 1.6; margin-bottom: 1.5rem; }\n .gallery-link { \n display: inline-flex; \n align-items: center; \n gap: 0.5rem; \n color: var(--primary-color); \n text-decoration: none; \n font-weight: 600; \n transition: gap 0.3s ease; \n background: none;\n border: none;\n cursor: pointer;\n font-family: 'Poppins', sans-serif;\n font-size: 1rem;\n }\n .gallery-link:hover { gap: 1rem; }\n\n \/* --- CTA SECTION --- *\/\n .cta-section { padding: 5rem 2rem; background: linear-gradient(135deg, rgba(255, 154, 162, 0.1), rgba(180, 231, 206, 0.1)); text-align: center; position: relative; z-index: 2; }\n .cta-content { max-width: 800px; margin: 0 auto; }\n .cta-content h2 { \n font-size: 2.5rem; \n margin-bottom: 1.5rem; \n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); \n -webkit-background-clip: text; \n -webkit-text-fill-color: transparent; \n background-clip: text; \n }\n .cta-content p { font-size: 1.2rem; color: var(--text-gray); margin-bottom: 2rem; }\n\n \/* --- FOOTER --- *\/\n footer { padding: 3rem 2rem 1.5rem; background: rgba(10, 25, 47, 0.9); border-top: 1px solid var(--glass-border); position: relative; z-index: 2; }\n .footer-content { max-width: 1200px; margin: 0 auto; text-align: center; }\n .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }\n .social-links a { width: 40px; height: 40px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-gray); transition: all 0.3s ease; }\n .social-links a:hover { background: var(--primary-color); color: var(--dark-bg); transform: translateY(-3px); }\n .footer-text { color: var(--text-gray); margin-bottom: 1rem; }\n .credit { font-size: 0.9rem; color: var(--text-gray); text-decoration: none; display: inline-block; }\n \n .neon-text {\n color: rgba(255, 255, 255, 0.8);\n text-decoration: none;\n animation: neon-blink 2s infinite;\n }\n @keyframes neon-blink { \n 0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4); opacity: 1; } \n 50% { text-shadow: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 4px rgba(255, 255, 255, 0.3), 0 0 6px rgba(255, 255, 255, 0.2); opacity: 0.8; } \n }\n\n \/* --- LOADING ANIMATION --- *\/\n .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-bg); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.5s ease; }\n .loader.hidden { opacity: 0; pointer-events: none; }\n .loader-circle { width: 50px; height: 50px; border: 3px solid var(--glass-border); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n \/* --- MODAL STYLES --- *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n }\n\n .modal-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n .modal-content {\n background: var(--dark-bg);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n padding: 2.5rem;\n max-width: 600px;\n width: 90%;\n max-height: 80vh;\n overflow-y: auto;\n position: relative;\n transform: scale(0.8);\n transition: transform 0.3s ease;\n }\n\n .modal-overlay.active .modal-content {\n transform: scale(1);\n }\n\n .modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: var(--glass-bg);\n border: 1px solid var(--glass-border);\n color: var(--text-light);\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 1.2rem;\n transition: all 0.3s ease;\n }\n\n .modal-close:hover {\n background: var(--primary-color);\n color: var(--dark-bg);\n transform: rotate(90deg);\n }\n\n .modal-content h3 {\n font-size: 1.8rem;\n margin-bottom: 0.5rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .modal-subtitle {\n color: var(--accent-color);\n font-weight: 600;\n margin-bottom: 1.5rem;\n display: inline-block;\n }\n\n .modal-content p {\n color: var(--text-gray);\n line-height: 1.7;\n margin-bottom: 1.5rem;\n }\n \n .modal-content ul {\n list-style: none;\n padding-left: 0;\n }\n .modal-content li {\n margin-bottom: 1rem;\n color: var(--text-gray);\n }\n .modal-content li strong {\n color: var(--text-light);\n }\n\n .process-steps {\n list-style: none;\n counter-reset: step-counter;\n }\n\n .process-steps li {\n counter-increment: step-counter;\n margin-bottom: 1.5rem;\n position: relative;\n padding-left: 50px;\n color: var(--text-gray);\n }\n\n .process-steps li::before {\n content: counter(step-counter);\n position: absolute;\n left: 0;\n top: 0;\n width: 35px;\n height: 35px;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--dark-bg);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n }\n\n \/* --- HIDDEN CLASS --- *\/\n .mobile-hidden {\n display: none !important;\n }\n\n \/* ============================================================\n VIRTUAL TOUR MODAL - WARNA ASLI DESAIN PERTAMA\n 2 OPSI: GALLERY FOTO + GOOGLE MAPS\n ============================================================ *\/\n .vt-overlay {\n position: fixed;\n inset: 0;\n z-index: 9999;\n background: rgba(0,0,0,0.55);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n display: none;\n align-items: center;\n justify-content: center;\n padding: 20px;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n .vt-overlay.show { display: flex; opacity: 1; }\n\n .vt-modal {\n background: #FFFDF7;\n border-radius: 20px;\n box-shadow: 0 25px 80px rgba(0,0,0,0.2);\n max-width: 720px;\n width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n position: relative;\n transform: scale(0.88) translateY(30px);\n transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);\n }\n .vt-overlay.show .vt-modal { transform: scale(1) translateY(0); }\n .vt-modal::-webkit-scrollbar { width: 5px; }\n .vt-modal::-webkit-scrollbar-track { background: transparent; }\n .vt-modal::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }\n\n \/* Tab Switcher *\/\n .vt-tab-switcher {\n display: flex;\n background: #F3F4F6;\n border-radius: 12px;\n padding: 5px;\n margin: 0 24px;\n }\n .vt-tab-btn {\n flex: 1;\n padding: 11px 14px;\n border: none;\n background: transparent;\n border-radius: 9px;\n font-family: 'Poppins', sans-serif;\n font-size: 13px;\n font-weight: 600;\n color: #6B7280;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n }\n .vt-tab-btn:hover { color: #2D8F5E; background: #ECFDF5; }\n .vt-tab-btn.active {\n background: #2D8F5E;\n color: #fff;\n box-shadow: 0 4px 12px rgba(45,143,94,0.25);\n }\n .vt-tab-btn i { font-size: 14px; }\n\n \/* Tab Content *\/\n .vt-tab-content { display: none; }\n .vt-tab-content.active { display: block; animation: vtFade 0.35s ease; }\n @keyframes vtFade {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Header Modal *\/\n .vt-header {\n padding: 22px 24px 0;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n }\n .vt-header h2 {\n font-family: 'Poppins', sans-serif;\n font-size: 19px;\n font-weight: 700;\n color: #1F2937;\n margin-bottom: 3px;\n }\n .vt-header p {\n font-family: 'Poppins', sans-serif;\n font-size: 13px;\n color: #6B7280;\n }\n .vt-close {\n width: 36px; height: 36px;\n border-radius: 10px;\n border: 1px solid #E5E7EB;\n background: #fff;\n color: #9CA3AF;\n font-size: 14px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n flex-shrink: 0;\n }\n .vt-close:hover { background: #FEE2E2; color: #DC2626; border-color: #FECACA; }\n\n \/* Gallery *\/\n .vt-gallery { padding: 18px 24px; }\n .vt-gallery-label {\n font-family: 'Poppins', sans-serif;\n font-size: 11px;\n font-weight: 600;\n color: #2D8F5E;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 10px;\n }\n .vt-gallery-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 8px;\n }\n .vt-gallery-item {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n cursor: pointer;\n aspect-ratio: 4\/3;\n }\n .vt-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }\n .vt-gallery-item:hover img { transform: scale(1.08); }\n .vt-gallery-item .vt-ov-label {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%);\n display: flex;\n align-items: flex-end;\n padding: 9px;\n opacity: 0;\n transition: opacity 0.3s;\n }\n .vt-gallery-item:hover .vt-ov-label { opacity: 1; }\n .vt-gallery-item .vt-ov-label span { color: #fff; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; }\n .vt-gallery-item .vt-ov-label .vt-zoom {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%,-50%) scale(0.7);\n width: 34px; height: 34px;\n background: rgba(45,143,94,0.9);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 13px;\n opacity: 0;\n transition: all 0.3s;\n }\n .vt-gallery-item:hover .vt-ov-label .vt-zoom { opacity: 1; transform: translate(-50%,-50%) scale(1); }\n .vt-gallery-item:first-child { grid-column: span 2; aspect-ratio: 16\/9; }\n .vt-gallery-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }\n .vt-gallery-dots { display: flex; gap: 5px; }\n .vt-gallery-dots .vt-dot { width: 7px; height: 7px; border-radius: 50%; background: #D1D5DB; cursor: pointer; transition: all 0.3s; }\n .vt-gallery-dots .vt-dot.active { background: #2D8F5E; width: 22px; border-radius: 4px; }\n .vt-gallery-count { font-family: 'Poppins', sans-serif; font-size: 12px; color: #9CA3AF; font-weight: 500; }\n\n \/* Maps *\/\n .vt-map { padding: 18px 24px; }\n .vt-map-wrapper {\n position: relative;\n border-radius: 14px;\n overflow: hidden;\n border: 2px solid #E5E7EB;\n aspect-ratio: 16\/10;\n background: #E5E7EB;\n }\n .vt-map-wrapper iframe { width: 100%; height: 100%; border: none; }\n .vt-map-badge {\n position: absolute;\n top: 10px; left: 10px;\n background: #fff;\n padding: 7px 12px;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n display: flex;\n align-items: center;\n gap: 6px;\n font-family: 'Poppins', sans-serif;\n font-size: 11px;\n font-weight: 600;\n color: #374151;\n z-index: 2;\n }\n .vt-map-badge i { color: #2D8F5E; }\n .vt-map-open {\n position: absolute;\n bottom: 10px; right: 10px;\n width: 38px; height: 38px;\n border-radius: 10px;\n background: #fff;\n border: 1px solid #E5E7EB;\n color: #6B7280;\n font-size: 13px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n z-index: 2;\n box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n }\n .vt-map-open:hover { background: #2D8F5E; color: #fff; border-color: #2D8F5E; }\n\n \/* Divider *\/\n .vt-divider { height: 1px; background: #E5E7EB; margin: 0 24px; }\n\n \/* Kontak *\/\n .vt-contact { padding: 18px 24px; }\n .vt-contact-card {\n background: linear-gradient(135deg, #ECFDF5 0%, #FEF9C3 100%);\n border-radius: 14px;\n padding: 18px;\n border: 1px solid rgba(45,143,94,0.1);\n }\n .vt-contact-card .vt-desc {\n font-family: 'Poppins', sans-serif;\n font-size: 12px;\n color: #6B7280;\n line-height: 1.7;\n margin-bottom: 14px;\n }\n .vt-contact-list { display: flex; flex-direction: column; gap: 9px; }\n .vt-contact-item {\n display: flex;\n align-items: center;\n gap: 11px;\n font-family: 'Poppins', sans-serif;\n font-size: 12px;\n color: #374151;\n }\n .vt-contact-icon {\n width: 34px; height: 34px;\n border-radius: 9px;\n background: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #2D8F5E;\n font-size: 13px;\n box-shadow: 0 2px 6px rgba(0,0,0,0.06);\n flex-shrink: 0;\n }\n .vt-contact-item span strong {\n display: block;\n font-size: 10px;\n color: #9CA3AF;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 1px;\n }\n\n \/* CTA *\/\n .vt-cta { padding: 0 24px 24px; }\n .vt-cta-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n width: 100%;\n padding: 14px;\n border: none;\n border-radius: 12px;\n font-family: 'Poppins', sans-serif;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n background: linear-gradient(135deg, #25D366, #128C7E);\n color: #fff;\n box-shadow: 0 5px 18px rgba(37,211,102,0.25);\n transition: all 0.3s ease;\n text-decoration: none;\n }\n .vt-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,0.35); }\n .vt-cta-btn:active { transform: translateY(0); }\n\n \/* Lightbox *\/\n .vt-lightbox {\n position: fixed;\n inset: 0;\n z-index: 99999;\n background: rgba(0,0,0,0.92);\n display: none;\n align-items: center;\n justify-content: center;\n padding: 20px;\n opacity: 0;\n transition: opacity 0.3s;\n }\n .vt-lightbox.show { display: flex; opacity: 1; }\n .vt-lightbox img {\n max-width: 90%;\n max-height: 85vh;\n border-radius: 14px;\n object-fit: contain;\n transition: all 0.3s ease;\n }\n .vt-lightbox.show img { transform: scale(1); }\n .vt-lightbox-close {\n position: absolute;\n top: 20px; right: 20px;\n width: 44px; height: 44px;\n border-radius: 50%;\n border: 2px solid rgba(255,255,255,0.15);\n background: rgba(255,255,255,0.08);\n color: #fff;\n font-size: 18px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n .vt-lightbox-close:hover { background: rgba(255,255,255,0.2); }\n .vt-lightbox-caption {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n color: #fff;\n font-family: 'Poppins', sans-serif;\n font-size: 13px;\n font-weight: 500;\n background: rgba(0,0,0,0.5);\n padding: 8px 20px;\n border-radius: 50px;\n white-space: nowrap;\n }\n .vt-lightbox-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 48px; height: 48px;\n border-radius: 50%;\n border: 2px solid rgba(255,255,255,0.15);\n background: rgba(255,255,255,0.08);\n color: #fff;\n font-size: 18px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n .vt-lightbox-nav:hover { background: rgba(255,255,255,0.2); }\n .vt-lightbox-nav.vt-prev { left: 20px; }\n .vt-lightbox-nav.vt-next { right: 20px; }\n\n \/* VT Responsif *\/\n @media (max-width: 768px) {\n .vt-tab-switcher { margin: 0 18px; }\n .vt-tab-btn { font-size: 12px; padding: 10px 8px; }\n .vt-tab-btn .vt-tab-full { display: none; }\n .vt-tab-btn .vt-tab-short { display: inline; }\n .vt-header { padding: 18px 18px 0; }\n .vt-header h2 { font-size: 17px; }\n .vt-gallery { padding: 14px 18px; }\n .vt-map { padding: 14px 18px; }\n .vt-contact { padding: 14px 18px; }\n .vt-cta { padding: 0 18px 18px; }\n .vt-divider { margin: 0 18px; }\n .vt-contact-card { padding: 14px; }\n .vt-cta-btn { padding: 13px; font-size: 13px; }\n }\n @media (min-width: 769px) {\n .vt-tab-btn .vt-tab-short { display: none; }\n }\n\n \/* ============================================================\n MOBILE RESPONSIVE - FIX TOTAL DROPDOWN\n ============================================================ *\/\n @media (max-width: 768px) {\n\n nav { \n position: fixed; \n top: 70px; \n left: -100%; \n width: 100%; \n height: auto;\n max-height: calc(100vh - 70px); \n overflow-y: auto; \n background: #0a192f;\n flex-direction: column; \n padding: 0; \n gap: 0;\n transition: left 0.3s ease; \n justify-content: flex-start;\n align-items: stretch;\n }\n nav.active { left: 0; }\n\n .nav-list {\n flex-direction: column;\n gap: 0;\n width: 100%;\n }\n\n .nav-list > li {\n width: 100%;\n }\n\n .nav-link,\n .dropdown-toggle {\n padding: 1rem 1.2rem;\n width: 100%;\n justify-content: space-between;\n font-size: 0.95rem;\n border-bottom: 1px solid rgba(255,255,255,0.06);\n }\n\n .nav-link::after,\n .dropdown-toggle::after {\n display: none;\n }\n\n .dropdown-menu {\n position: static !important;\n transform: none !important;\n left: auto !important;\n right: auto !important;\n top: auto !important;\n background: #071428 !important;\n backdrop-filter: none !important;\n -webkit-backdrop-filter: none !important;\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n padding: 0 !important;\n min-width: 100% !important;\n width: 100% !important;\n opacity: 1 !important;\n visibility: visible !important;\n display: none !important;\n }\n\n .dropdown-menu::before {\n display: none !important;\n }\n\n .dropdown.open .dropdown-menu {\n display: block !important;\n }\n\n .dropdown.open .dropdown-toggle {\n color: var(--primary-color) !important;\n }\n\n .dropdown.open .dropdown-toggle .fa-chevron-down {\n transform: rotate(180deg);\n }\n\n .dropdown-menu li a {\n display: flex !important;\n align-items: center !important;\n padding: 0.9rem 1.2rem 0.9rem 2.5rem !important;\n font-size: 0.9rem !important;\n color: #d0d8eb !important;\n background: none !important;\n border-left: 3px solid rgba(255,255,255,0.08) !important;\n border-bottom: 1px solid rgba(255,255,255,0.04) !important;\n margin: 0 !important;\n width: 100% !important;\n white-space: normal !important;\n text-decoration: none !important;\n gap: 0.7rem !important;\n transition: all 0.2s ease !important;\n }\n\n .dropdown-menu li a:hover,\n .dropdown-menu li a:active {\n color: #ffffff !important;\n background: rgba(255, 154, 162, 0.08) !important;\n border-left-color: var(--primary-color) !important;\n }\n\n .dropdown-menu li a i {\n color: var(--primary-color) !important;\n width: 18px !important;\n min-width: 18px !important;\n text-align: center !important;\n font-size: 0.85rem !important;\n transform: none !important;\n }\n\n .dropdown-menu .menu-separator {\n height: 1px !important;\n background: rgba(255,255,255,0.06) !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n .new-badge {\n font-size: 0.55rem !important;\n padding: 0.12rem 0.45rem !important;\n margin-left: auto !important;\n }\n\n .mobile-menu-credit {\n display: block !important;\n font-size: 0.7rem;\n padding: 1rem 1.2rem;\n width: 100%;\n text-align: center;\n border-top: 1px solid rgba(255,255,255,0.06);\n }\n\n .hamburger { display: flex; }\n .site-title { font-size: 1.2rem; }\n \n body { padding-top: 70px; }\n \n .hero { padding-top: 1.5rem; padding-bottom: 1rem; min-height: 75vh; }\n .hero h1 { font-size: 1.6rem; }\n .hero p { font-size: 1rem; }\n .btn { font-size: 0.9rem; padding: 0.8rem 1.8rem; }\n \n .facilities, .programs, .gallery, .operating-hours, .cta-section {\n padding-top: 2rem; padding-bottom: 2rem; \n }\n \n .section-title { font-size: 1.4rem; margin-bottom: 1.5rem; }\n .facility-card { padding: 1.5rem; }\n .facility-card h3 { font-size: 1.1rem; }\n .facility-card p { font-size: 0.9rem; }\n .program-tab { font-size: 0.85rem; padding: 0.6rem 1.1rem; }\n .program-details h3 { font-size: 1.2rem; }\n .program-details p { font-size: 0.9rem; }\n .program-feature { font-size: 0.8rem; padding: 0.4rem 0.8rem; }\n .gallery-filter { font-size: 0.85rem; padding: 0.6rem 1.1rem; }\n .gallery-details h3 { font-size: 1.1rem; }\n .gallery-details p { font-size: 0.9rem; }\n .gallery-category { font-size: 0.7rem; }\n .gallery-link { font-size: 0.9rem; }\n \n .cta-content h2 { font-size: 1.2rem; }\n .cta-content p { font-size: 1rem; }\n \n .programs { padding: 2rem 1rem; }\n .program-content { gap: 1.5rem; }\n .program-details { padding: 1.5rem; }\n\n .gallery { padding: 2rem 1rem; }\n .gallery-grid { gap: 1.5rem; }\n .gallery-details { padding: 1.5rem; }\n\n footer { padding: 2rem 1rem 1rem; }\n .footer-text { font-size: 0.85rem; }\n .credit { font-size: 0.75rem; }\n .cta-buttons { flex-direction: column; align-items: center; }\n .btn { width: 100%; max-width: 280px; }\n .gallery-grid { grid-template-columns: 1fr; }\n .facilities-grid { grid-template-columns: 1fr; }\n .program-content { grid-template-columns: 1fr; }\n .modal-content { padding: 1.8rem; }\n .modal-content h3 { font-size: 1.4rem; }\n .modal-content p { font-size: 0.9rem; }\n .process-steps li { font-size: 0.9rem; margin-bottom: 1.2rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- Loading Screen -->\n <div class=\"loader\" id=\"loader\">\n <div class=\"loader-circle\"><\/div>\n <\/div>\n\n <!-- Animated Background -->\n <div class=\"animated-bg\">\n <div class=\"particles\" id=\"particles\"><\/div>\n <\/div>\n\n <!-- Header -->\n <header id=\"header\">\n <div class=\"header-container\">\n <div class=\"logo-section\">\n <a href=\".\/\">\n <div class=\"logo\">\n <i class=\"fa-solid fa-graduation-cap\" style=\"color: white;\"><\/i>\n <\/div>\n <div class=\"site-title\">PAUD Nurul Fikri<\/div>\n <\/a>\n <\/div>\n <nav id=\"nav\">\n <ul class=\"nav-list\">\n <li>\n <a href=\".\/\" class=\"nav-link\">Beranda<\/a>\n <\/li>\n <li class=\"dropdown\">\n <button class=\"dropdown-toggle\" type=\"button\">\n Tentang Kami\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/button>\n <ul class=\"dropdown-menu\">\n <li>\n <a href=\"profile\/\">\n <i class=\"fas fa-user-graduate\"><\/i>\n Profile\n <\/a>\n <\/li>\n <li>\n <a href=\"fasilitas\/\">\n <i class=\"fas fa-school\"><\/i>\n Fasilitas\n <\/a>\n <\/li>\n <\/ul>\n <\/li>\n <li class=\"dropdown\">\n <button class=\"dropdown-toggle\" type=\"button\">\n Kegiatan\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/button>\n <ul class=\"dropdown-menu\">\n <li>\n <a href=\"program-kami\/\">\n <i class=\"fas fa-book-open\"><\/i>\n Program Kami\n <\/a>\n <\/li>\n <li>\n <a href=\"galeri\/\">\n <i class=\"fas fa-images\"><\/i>\n Galeri\n <\/a>\n <\/li>\n <li class=\"menu-separator\"><\/li>\n <li>\n <a href=\"https:\/\/lab.rwb.my.id\/paud\/game-edukasi\/\" target=\"_blank\">\n <i class=\"fas fa-gamepad\"><\/i>\n Game Edukasi\n <span class=\"new-badge\">Baru!<\/span>\n <\/a>\n <\/li>\n <\/ul>\n <\/li>\n <li>\n <a href=\"kontak-pendaftaran\/\" class=\"nav-link\">Kontak & Pendaftaran<\/a>\n <\/li>\n <\/ul>\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"mobile-menu-credit mobile-hidden neon-text\">\ud83d\udca1Proudly\ud83d\udc23by Rudi Web Builder<\/a>\n <\/nav>\n <div class=\"hamburger\" id=\"hamburger\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <\/header>\n\n <!-- Hero Section -->\n <section class=\"hero\" id=\"home\">\n <div class=\"hero-content\">\n <h1>Menciptakan Generasi Ceria, Kreatif & Berakhlak Mulia<\/h1>\n <p>Di PAUD Nurul Fikri, kami mempercayai bahwa setiap anak adalah permata yang unik. Kami menumbuhkembangkan potensi mereka dengan penuh kasih, melalui bermain, bernyanyi, dan bereksplorasi dalam lingkungan yang aman dan menyenangkan.<\/p>\n <div class=\"cta-buttons\">\n <a href=\"kontak-pendaftaran\/\" class=\"btn btn-primary\">\n <i class=\"fa-solid fa-pencil\"><\/i> Daftar Sekarang\n <\/a>\n <button class=\"btn btn-secondary\" id=\"btn-open-tour-modal\">Virtual Tour Sekolah<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Facilities Section -->\n <section class=\"facilities\" id=\"facilities\">\n <div class=\"container\">\n <h2 class=\"section-title\">Fasilitas Unggulan Kami<\/h2>\n <div class=\"facilities-grid\">\n <div class=\"facility-card\">\n <div class=\"facility-icon\"><i class=\"fas fa-school\"><\/i><\/div>\n <h3>Ruang Kelas Ber-AC<\/h3>\n <p>Ruang belajar yang nyaman dan sejuk untuk mendukung proses pembelajaran yang optimal dan menyenangkan.<\/p>\n <\/div>\n <div class=\"facility-card\">\n <div class=\"facility-icon\"><i class=\"fas fa-child\"><\/i><\/div>\n <h3>Area Bermain Aman & Menyenangkan<\/h3>\n <p>Kami menyediakan area bermain outdoor yang aman dengan perosotan, ayunan, dan titian langkah keseimbangan untuk melatih motorik kasar anak secara menyenangkan.<\/p>\n <\/div>\n <div class=\"facility-card\">\n <div class=\"facility-icon\"><i class=\"fas fa-book\"><\/i><\/div>\n <h3>Perpustakaan Mini<\/h3>\n <p>Koleksi buku cerita dan edukatif yang menarik untuk menumbuhkan minat baca sejak dini.<\/p>\n <\/div>\n <div class=\"facility-card\">\n <div class=\"facility-icon\"><i class=\"fas fa-apple-alt\"><\/i><\/div>\n <h3>Makanan Bergizi<\/h3>\n <p>Menu makanan sehat dan bergizi yang disiapkan dengan higienis untuk mendukung tumbuh kembang anak.<\/p>\n <\/div>\n <div class=\"facility-card\">\n <div class=\"facility-icon\"><i class=\"fas fa-palette\"><\/i><\/div>\n <h3>Kegiatan Ekstrakurikuler<\/h3>\n <p>Beragam kegiatan menarik seperti menari, melukis, dan musik untuk mengasah bakat dan kreativitas.<\/p>\n <\/div>\n <div class=\"facility-card\">\n <div class=\"facility-icon\"><i class=\"fas fa-chalkboard-teacher\"><\/i><\/div>\n <h3>Guru Profesional<\/h3>\n <p>Tenaga pendidik yang berpengalaman, sabar, dan penuh kasih sayang kepada setiap anak.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Program Section -->\n <section class=\"programs\" id=\"programs\">\n <div class=\"program-container\">\n <h2 class=\"section-title\">Program Pembelajaran Kami<\/h2>\n <div class=\"program-tabs\">\n <button class=\"program-tab active\" data-tab=\"kb\" type=\"button\">Kelompok Bermain<\/button>\n <button class=\"program-tab\" data-tab=\"tka\" type=\"button\">TK A<\/button>\n <button class=\"program-tab\" data-tab=\"tkb\" type=\"button\">TK B<\/button>\n <button class=\"program-tab\" data-tab=\"ekskul\" type=\"button\">Ekstrakurikuler<\/button>\n <\/div>\n <div class=\"program-content\">\n <div class=\"program-card active\" id=\"kb\">\n <div class=\"program-image\"><i class=\"fas fa-baby\"><\/i><\/div>\n <div class=\"program-details\">\n <h3>Kelompok Bermain (KB)<\/h3>\n <p>Fokus pada stimulasi sensorik, motorik halus dan kasar, serta pengenalan emosi dan sosialisasi awal melalui bermain.<\/p>\n <div class=\"program-features\">\n <span class=\"program-feature\">Bermain Peran<\/span>\n <span class=\"program-feature\">Seni & Kriya<\/span>\n <span class=\"program-feature\">Nyanyian & Gerak<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"program-card\" id=\"tka\">\n <div class=\"program-image\"><i class=\"fas fa-shapes\"><\/i><\/div>\n <div class=\"program-details\">\n <h3>Taman Kanak-Kanak A (TK A)<\/h3>\n <p>Perkenalan konsep huruf dan angka, peningkatan kosakata, serta pembiasaan disiplin dan kemandirian.<\/p>\n <div class=\"program-features\">\n <span class=\"program-feature\">Mengenal Huruf & Angka<\/span>\n <span class=\"program-feature\">Bercerita<\/span>\n <span class=\"program-feature\">Praktik Kehidupan<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"program-card\" id=\"tkb\">\n <div class=\"program-image\"><i class=\"fas fa-pencil-alt\"><\/i><\/div>\n <div class=\"program-details\">\n <h3>Taman Kanak-Kanak B (TK B)<\/h3>\n <p>Persiapan memasuki Sekolah Dasar dengan fokus pada membaca, menulis, berhitung (Calistung), dan problem solving sederhana.<\/p>\n <div class=\"program-features\">\n <span class=\"program-feature\">Membaca & Menulis<\/span>\n <span class=\"program-feature\">Berhitung<\/span>\n <span class=\"program-feature\">Sains Mini<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"program-card\" id=\"ekskul\">\n <div class=\"program-image\"><i class=\"fas fa-music\"><\/i><\/div>\n <div class=\"program-details\">\n <h3>Ekstrakurikuler<\/h3>\n <p>Mengasah bakat dan minat anak di luar jam pelajaran inti untuk pengembangan diri yang lebih holistik.<\/p>\n <div class=\"program-features\">\n <span class=\"program-feature\">Melukis<\/span>\n <span class=\"program-feature\">Menari<\/span>\n <span class=\"program-feature\">Memasak Mini<\/span>\n <span class=\"program-feature\">English Fun<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Gallery Section -->\n <section class=\"gallery\" id=\"gallery\">\n <div class=\"gallery-container\">\n <h2 class=\"section-title\">Galeri Kegiatan<\/h2>\n <div class=\"gallery-filters\">\n <button class=\"gallery-filter active\" data-filter=\"all\" type=\"button\">Semua Kegiatan<\/button>\n <button class=\"gallery-filter\" data-filter=\"belajar\" type=\"button\">Belajar & Bermain<\/button>\n <button class=\"gallery-filter\" data-filter=\"seni\" type=\"button\">Seni & Kreativitas<\/button>\n <button class=\"gallery-filter\" data-filter=\"outing\" type=\"button\">Outing<\/button>\n <\/div>\n <div class=\"gallery-grid\">\n <div class=\"gallery-card\" data-category=\"belajar\">\n <div class=\"gallery-image\"><i class=\"fas fa-book-open\"><\/i>\n <div class=\"gallery-overlay\"><span class=\"gallery-category\">Belajar & Bermain<\/span><\/div>\n <\/div>\n <div class=\"gallery-details\">\n <h3>Sesi Membaca Cerita<\/h3>\n <p>Anak-anak antusias mendengarkan cerita tentang petualangan di hutan yang diajarkan oleh Ibu Guru.<\/p>\n <button class=\"gallery-link\" data-modal-target=\"gallery-modal-1\">Lihat Foto <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"gallery-card\" data-category=\"seni\">\n <div class=\"gallery-image\"><i class=\"fas fa-paint-brush\"><\/i>\n <div class=\"gallery-overlay\"><span class=\"gallery-category\">Seni & Kreativitas<\/span><\/div>\n <\/div>\n <div class=\"gallery-details\">\n <h3>Kelas Melukis<\/h3>\n <p>Berkreasi dengan warna-warna ceria untuk melukis pemandangan favorit mereka di kertas kado.<\/p>\n <button class=\"gallery-link\" data-modal-target=\"gallery-modal-2\">Lihat Foto <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"gallery-card\" data-category=\"outing\">\n <div class=\"gallery-image\"><i class=\"fas fa-tree\"><\/i>\n <div class=\"gallery-overlay\"><span class=\"gallery-category\">Outing<\/span><\/div>\n <\/div>\n <div class=\"gallery-details\">\n <h3>Field Trip ke Kebun Binatang<\/h3>\n <p>Belajar langsung mengenal berbagai jenis hewan dan kehidupan mereka di alam bebas.<\/p>\n <button class=\"gallery-link\" data-modal-target=\"gallery-modal-3\">Lihat Foto <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"gallery-card\" data-category=\"belajar\">\n <div class=\"gallery-image\"><i class=\"fas fa-cube\"><\/i>\n <div class=\"gallery-overlay\"><span class=\"gallery-category\">Belajar & Bermain<\/span><\/div>\n <\/div>\n <div class=\"gallery-details\">\n <h3>Bermain Konstruksi<\/h3>\n <p>Membangun bentuk dan kastil dari balok-balok kayu untuk melatih motorik dan spasial.<\/p>\n <button class=\"gallery-link\" data-modal-target=\"gallery-modal-4\">Lihat Foto <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- CTA Section -->\n <section class=\"cta-section\" id=\"cta\">\n <div class=\"cta-content\">\n <h2>Siap Memberikan Pendidikan Terbaik untuk Buah Hati Anda?<\/h2>\n <p>Ayo bergabung dengan keluarga besar PAUD Nurul Fikri dan wujudkan tumbuh kembang anak yang ceria dan cerdas.<\/p>\n <a href=\"kontak-pendaftaran\/\" class=\"btn btn-primary\">Formulir Pendaftaran Online<\/a>\n <\/div>\n <\/section>\n\n <!-- Footer -->\n <footer>\n <div class=\"footer-content\">\n <div class=\"social-links\">\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-tiktok\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <\/div>\n <p class=\"footer-text\">\u00a9 <span id=\"year\"><\/span> PAUD Nurul Fikri. All rights reserved.<\/p>\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"credit neon-text\">\ud83d\udca1Proudly\ud83d\udc23By Rudi Web Builder<\/a>\n <\/div>\n <\/footer>\n\n <!-- Modal Gallery 1-4 (ASLI TIDAK DIUBAH) -->\n <div class=\"modal-overlay\" id=\"gallery-modal-1\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"gallery-modal-1\">×<\/span>\n <h3>Sesi Membaca Cerita<\/h3>\n <span class=\"modal-subtitle\">Belajar & Bermain<\/span>\n <p>Foto-foto kegiatan saat anak-anak duduk melingkar dan asyik mendengarkan cerita yang dibacakan oleh guru.<\/p>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/500x300.png?text=Foto+Sesi+Membaca\" alt=\"Sesi Membaca\" style=\"width:100%; border-radius:10px; margin-bottom:1rem;\">\n <\/div>\n <\/div>\n <div class=\"modal-overlay\" id=\"gallery-modal-2\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"gallery-modal-2\">×<\/span>\n <h3>Kelas Melukis<\/h3>\n <span class=\"modal-subtitle\">Seni & Kreativitas<\/span>\n <p>Dokumentasi kreativitas anak-anak saat menuangkan imajinasi mereka ke atas kanvas.<\/p>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/500x300.png?text=Foto+Kelas+Melukis\" alt=\"Kelas Melukis\" style=\"width:100%; border-radius:10px; margin-bottom:1rem;\">\n <\/div>\n <\/div>\n <div class=\"modal-overlay\" id=\"gallery-modal-3\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"gallery-modal-3\">×<\/span>\n <h3>Field Trip ke Kebun Binatang<\/h3>\n <span class=\"modal-subtitle\">Outing<\/span>\n <p>Suasana bahagia anak-anak saat berinteraksi dengan hewan di kebun binatang.<\/p>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/500x300.png?text=Foto+Field+Trip\" alt=\"Field Trip\" style=\"width:100%; border-radius:10px; margin-bottom:1rem;\">\n <\/div>\n <\/div>\n <div class=\"modal-overlay\" id=\"gallery-modal-4\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"gallery-modal-4\">×<\/span>\n <h3>Bermain Konstruksi<\/h3>\n <span class=\"modal-subtitle\">Belajar & Bermain<\/span>\n <p>Momen saat anak-anak bekerja sama membangun menara dari balok-balok.<\/p>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/500x300.png?text=Foto+Bermain+Konstruksi\" alt=\"Bermain Konstruksi\" style=\"width:100%; border-radius:10px; margin-bottom:1rem;\">\n <\/div>\n <\/div>\n\n <!-- ============================================================\n VIRTUAL TOUR MODAL BARU - WARNA ASLI + 2 OPSI\n ============================================================ -->\n <div class=\"vt-overlay\" id=\"vtOverlay\">\n <div class=\"vt-modal\">\n <!-- Header -->\n <div class=\"vt-header\">\n <div>\n <h2>Virtual Tour Sekolah<\/h2>\n <p>Jelajahi PAUD Nurul Fikri<\/p>\n <\/div>\n <button class=\"vt-close\" id=\"vtClose\"><i class=\"fas fa-xmark\"><\/i><\/button>\n <\/div>\n\n <!-- Tab Switcher -->\n <div style=\"height:16px\"><\/div>\n <div class=\"vt-tab-switcher\">\n <button class=\"vt-tab-btn active\" data-vttab=\"vt-opsi1\">\n <i class=\"fas fa-images\"><\/i>\n <span class=\"vt-tab-full\">Opsi 1: Gallery Foto<\/span>\n <span class=\"vt-tab-short\">Gallery<\/span>\n <\/button>\n <button class=\"vt-tab-btn\" data-vttab=\"vt-opsi2\">\n <i class=\"fas fa-map-location-dot\"><\/i>\n <span class=\"vt-tab-full\">Opsi 2: Google Maps<\/span>\n <span class=\"vt-tab-short\">Maps<\/span>\n <\/button>\n <\/div>\n <div style=\"height:16px\"><\/div>\n\n <!-- ===== OPSI 1: GALLERY FOTO ===== -->\n <div class=\"vt-tab-content active\" id=\"vt-opsi1\">\n <div class=\"vt-gallery\">\n <div class=\"vt-gallery-label\"><i class=\"fas fa-camera\"><\/i> Fasilitas Sekolah<\/div>\n <div class=\"vt-gallery-grid\" id=\"vtGrid\"><\/div>\n <div class=\"vt-gallery-nav\">\n <div class=\"vt-gallery-dots\" id=\"vtDots\"><\/div>\n <div class=\"vt-gallery-count\" id=\"vtCount\"><\/div>\n <\/div>\n <\/div>\n <div class=\"vt-divider\"><\/div>\n <\/div>\n\n <!-- ===== OPSI 2: GOOGLE MAPS ===== -->\n <div class=\"vt-tab-content\" id=\"vt-opsi2\">\n <div class=\"vt-map\">\n <div class=\"vt-map-wrapper\">\n <div class=\"vt-map-badge\">\n <i class=\"fas fa-map-pin\"><\/i> PAUD Nurul Fikri\n <\/div>\n <iframe \n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3966.0!2d106.82!3d-6.26!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNsKwMTUnMzYuMCJTIDEwNsKwNDknMTIuMCJF!5e0!3m2!1sid!2sid!4v1\"\n allowfullscreen=\"\" \n loading=\"lazy\" \n referrerpolicy=\"no-referrer-when-downgrade\">\n <\/iframe>\n <button class=\"vt-map-open\" title=\"Buka di Google Maps\" onclick=\"window.open('https:\/\/maps.google.com','_blank')\">\n <i class=\"fas fa-up-right-from-square\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <div class=\"vt-divider\"><\/div>\n <\/div>\n\n <!-- Kontak (shared) -->\n <div class=\"vt-contact\">\n <div class=\"vt-contact-card\">\n <p class=\"vt-desc\">Anda dapat melihat ruang kelas yang nyaman, area bermain yang menyenangkan, dan berbagai fasilitas lainnya. Untuk pengalaman yang lebih baik, kami mengundang Anda untuk datang langsung.<\/p>\n <div class=\"vt-contact-list\">\n <div class=\"vt-contact-item\">\n <div class=\"vt-contact-icon\"><i class=\"fas fa-location-dot\"><\/i><\/div>\n <span><strong>Alamat<\/strong>Jl. Contoh No. 123, Jakarta Selatan<\/span>\n <\/div>\n <div class=\"vt-contact-item\">\n <div class=\"vt-contact-icon\"><i class=\"fas fa-phone\"><\/i><\/div>\n <span><strong>Telepon<\/strong>(021) 1234-5678<\/span>\n <\/div>\n <div class=\"vt-contact-item\">\n <div class=\"vt-contact-icon\"><i class=\"fab fa-whatsapp\"><\/i><\/div>\n <span><strong>WhatsApp<\/strong>0812-3456-7890<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- CTA -->\n <div class=\"vt-cta\">\n <a href=\"https:\/\/wa.me\/6281234567890?text=Halo,%20saya%20ingin%20bertanya%20tentang%20PAUD%20Nurul%20Fikri\" target=\"_blank\" class=\"vt-cta-btn\">\n <i class=\"fab fa-whatsapp\"><\/i> Chat via WhatsApp\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Lightbox -->\n <div class=\"vt-lightbox\" id=\"vtLightbox\">\n <button class=\"vt-lightbox-close\" id=\"vtLbClose\"><i class=\"fas fa-xmark\"><\/i><\/button>\n <button class=\"vt-lightbox-nav vt-prev\" id=\"vtLbPrev\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n <button class=\"vt-lightbox-nav vt-next\" id=\"vtLbNext\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\n <img decoding=\"async\" src=\"\" alt=\"\" id=\"vtLbImg\">\n <div class=\"vt-lightbox-caption\" id=\"vtLbCaption\"><\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Fungsi untuk membuat animasi balon\n function createBalloons() {\n const particlesContainer = document.getElementById('particles');\n const balloonCount = 20;\n const balloonSymbol = '\ud83c\udf88';\n const balloonColors = ['balloon-red', 'balloon-yellow', 'balloon-green', 'balloon-blue'];\n particlesContainer.innerHTML = '';\n for (let i = 0; i < balloonCount; i++) {\n const balloon = document.createElement('div');\n balloon.className = 'floating-element';\n const randomColorClass = balloonColors[Math.floor(Math.random() * balloonColors.length)];\n balloon.classList.add(randomColorClass);\n \n balloon.textContent = balloonSymbol;\n balloon.style.left = Math.random() * 100 + '%';\n const size = 1.5 + Math.random() * 1.5 + 'rem';\n balloon.style.fontSize = size;\n const duration = 15 + Math.random() * 10;\n const delay = Math.random() * 15;\n balloon.style.animationDuration = duration + 's';\n balloon.style.animationDelay = delay + 's';\n balloon.style.opacity = 0.3 + Math.random() * 0.5;\n particlesContainer.appendChild(balloon);\n }\n }\n\n \/\/ Header scroll effect\n const header = document.getElementById('header');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n header.classList.add('scrolled');\n } else {\n header.classList.remove('scrolled');\n }\n });\n\n \/\/ Mobile menu toggle\n const hamburger = document.getElementById('hamburger');\n const nav = document.getElementById('nav');\n hamburger.addEventListener('click', () => {\n const isClosing = hamburger.classList.contains('active');\n hamburger.classList.toggle('active');\n nav.classList.toggle('active');\n if (isClosing) {\n document.querySelectorAll('.dropdown.open').forEach(d => d.classList.remove('open'));\n }\n });\n\n document.querySelectorAll('.nav-link').forEach(link => {\n link.addEventListener('click', () => {\n if (window.innerWidth <= 768) {\n hamburger.classList.remove('active');\n nav.classList.remove('active');\n document.querySelectorAll('.dropdown.open').forEach(d => d.classList.remove('open'));\n }\n });\n });\n\n const dropdownToggles = document.querySelectorAll('.dropdown-toggle');\n dropdownToggles.forEach(toggle => {\n toggle.addEventListener('click', (e) => {\n e.preventDefault();\n if (window.innerWidth <= 768) {\n const dropdown = toggle.closest('.dropdown');\n document.querySelectorAll('.dropdown.open').forEach(d => {\n if (d !== dropdown) d.classList.remove('open');\n });\n dropdown.classList.toggle('open');\n }\n });\n });\n\n document.querySelectorAll('.dropdown-menu a').forEach(link => {\n link.addEventListener('click', () => {\n if (window.innerWidth <= 768) {\n hamburger.classList.remove('active');\n nav.classList.remove('active');\n document.querySelectorAll('.dropdown.open').forEach(d => d.classList.remove('open'));\n }\n });\n });\n\n \/\/ Program tabs\n const programTabs = document.querySelectorAll('.program-tab');\n const programCards = document.querySelectorAll('.program-card');\n programTabs.forEach(tab => {\n tab.addEventListener('click', () => {\n const tabId = tab.getAttribute('data-tab');\n programTabs.forEach(t => t.classList.remove('active'));\n programCards.forEach(c => c.classList.remove('active'));\n tab.classList.add('active');\n document.getElementById(tabId).classList.add('active');\n });\n });\n\n \/\/ Gallery filter\n const galleryFilters = document.querySelectorAll('.gallery-filter');\n const galleryCards = document.querySelectorAll('.gallery-card');\n galleryFilters.forEach(filter => {\n filter.addEventListener('click', () => {\n const filterValue = filter.getAttribute('data-filter');\n galleryFilters.forEach(f => f.classList.remove('active'));\n filter.classList.add('active');\n galleryCards.forEach(card => {\n if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {\n card.style.display = 'block';\n } else {\n card.style.display = 'none';\n }\n });\n });\n });\n\n \/\/ Modal lama (Gallery 1-4)\n const modalCloseButtons = document.querySelectorAll('.modal-close');\n function openModal(modal) { modal.classList.add('active'); document.body.style.overflow = 'hidden'; }\n function closeModal(modal) { modal.classList.remove('active'); document.body.style.overflow = 'auto'; }\n\n modalCloseButtons.forEach(button => {\n button.addEventListener('click', () => {\n closeModal(document.getElementById(button.getAttribute('data-modal')));\n });\n });\n document.querySelectorAll('.gallery-link').forEach(button => {\n button.addEventListener('click', () => {\n const modal = document.getElementById(button.getAttribute('data-modal-target'));\n if (modal) openModal(modal);\n });\n });\n document.querySelectorAll('.modal-overlay').forEach(overlay => {\n overlay.addEventListener('click', (e) => { if (e.target === overlay) closeModal(overlay); });\n });\n\n document.getElementById('year').textContent = new Date().getFullYear();\n\n \/\/ Hide loader\n const loader = document.getElementById('loader');\n setTimeout(() => { loader.classList.add('hidden'); }, 500);\n\n \/\/ Balloons\n createBalloons();\n setInterval(createBalloons, 30000);\n\n\n \/* ============================================================\n VIRTUAL TOUR - GALLERY + MAPS (WARNA ASLI)\n ============================================================ *\/\n\n \/* >>> GANTI FOTO DI SINI <<< *\/\n var vtPhotos = [\n [\n { src: 'https:\/\/picsum.photos\/seed\/paud-classroom\/800\/450.jpg', label: 'Ruang Kelas' },\n { src: 'https:\/\/picsum.photos\/seed\/paud-playground\/400\/300.jpg', label: 'Area Bermain' },\n { src: 'https:\/\/picsum.photos\/seed\/paud-library\/400\/300.jpg', label: 'Perpustakaan' },\n { src: 'https:\/\/picsum.photos\/seed\/paud-garden\/400\/300.jpg', label: 'Taman Sekolah' },\n { src: 'https:\/\/picsum.photos\/seed\/paud-art\/400\/300.jpg', label: 'Ruang Seni' },\n ],\n [\n { src: 'https:\/\/picsum.photos\/seed\/paud-music\/800\/450.jpg', label: 'Ruang Musik' },\n { src: 'https:\/\/picsum.photos\/seed\/paud-canteen\/400\/300.jpg', label: 'Kantin Sehat' },\n { src: 'https:\/\/picsum.photos\/seed\/paud-prayer\/400\/300.jpg', label: 'Musholla' },\n { src: 'https:\/\/picsum.photos\/seed\/paud-front\/400\/300.jpg', label: 'Depan Sekolah' },\n { src: 'https:\/\/picsum.photos\/seed\/paud-computer\/400\/300.jpg', label: 'Ruang Komputer' },\n ]\n ];\n\n var vtPage = 0, vtLbIndex = -1;\n var vtOverlay = document.getElementById('vtOverlay');\n var vtGrid = document.getElementById('vtGrid');\n var vtDots = document.getElementById('vtDots');\n var vtCount = document.getElementById('vtCount');\n var vtLb = document.getElementById('vtLightbox');\n var vtLbImg = document.getElementById('vtLbImg');\n var vtLbCap = document.getElementById('vtLbCaption');\n\n function vtRender(page) {\n vtPage = page;\n vtGrid.innerHTML = '';\n vtPhotos[page].forEach(function(p, i) {\n var d = document.createElement('div');\n d.className = 'vt-gallery-item';\n d.innerHTML = '<img decoding=\"async\" src=\"' + p.src + '\" alt=\"' + p.label + '\" loading=\"lazy\">' +\n '<div class=\"vt-ov-label\">' +\n '<div class=\"vt-zoom\"><i class=\"fas fa-magnifying-glass-plus\"><\/i><\/div>' +\n '<span>' + p.label + '<\/span>' +\n '<\/div>';\n d.addEventListener('click', function(){ vtOpenLb(page, i); });\n vtGrid.appendChild(d);\n });\n vtDots.innerHTML = '';\n vtPhotos.forEach(function(_, i) {\n var dot = document.createElement('div');\n dot.className = 'vt-dot' + (i === page ? ' active' : '');\n dot.addEventListener('click', function(){ vtRender(i); });\n vtDots.appendChild(dot);\n });\n vtCount.textContent = (page + 1) + ' \/ ' + vtPhotos.length;\n }\n\n function vtOpenLb(page, idx) {\n vtPage = page; vtLbIndex = idx;\n var p = vtPhotos[page][idx];\n vtLbImg.src = p.src; vtLbImg.alt = p.label; vtLbCap.textContent = p.label;\n vtLb.style.display = 'flex';\n requestAnimationFrame(function(){ vtLb.classList.add('show'); });\n }\n function vtCloseLb() {\n vtLb.classList.remove('show');\n setTimeout(function(){ vtLb.style.display = 'none'; }, 300);\n }\n function vtNavLb(dir) {\n var arr = vtPhotos[vtPage];\n vtLbIndex += dir;\n if (vtLbIndex < 0) vtLbIndex = arr.length - 1;\n if (vtLbIndex >= arr.length) vtLbIndex = 0;\n var p = arr[vtLbIndex];\n vtLbImg.style.opacity = '0'; vtLbImg.style.transform = 'scale(0.92)';\n setTimeout(function(){\n vtLbImg.src = p.src; vtLbImg.alt = p.label; vtLbCap.textContent = p.label;\n vtLbImg.style.opacity = '1'; vtLbImg.style.transform = 'scale(1)';\n }, 150);\n }\n\n \/* Buka modal *\/\n function vtOpen() {\n vtRender(0);\n \/\/ Reset tab ke opsi 1\n document.querySelectorAll('.vt-tab-btn').forEach(function(b){ b.classList.remove('active'); });\n document.querySelector('.vt-tab-btn[data-vttab=\"vt-opsi1\"]').classList.add('active');\n document.querySelectorAll('.vt-tab-content').forEach(function(c){ c.classList.remove('active'); });\n document.getElementById('vt-opsi1').classList.add('active');\n\n vtOverlay.style.display = 'flex';\n requestAnimationFrame(function(){ vtOverlay.classList.add('show'); });\n document.body.style.overflow = 'hidden';\n }\n function vtClose() {\n vtOverlay.classList.remove('show');\n setTimeout(function(){ vtOverlay.style.display = 'none'; document.body.style.overflow = 'auto'; }, 300);\n }\n\n \/* Tab switching *\/\n document.querySelectorAll('.vt-tab-btn').forEach(function(btn) {\n btn.addEventListener('click', function() {\n document.querySelectorAll('.vt-tab-btn').forEach(function(b){ b.classList.remove('active'); });\n document.querySelectorAll('.vt-tab-content').forEach(function(c){ c.classList.remove('active'); });\n btn.classList.add('active');\n document.getElementById(btn.getAttribute('data-vttab')).classList.add('active');\n });\n });\n\n \/* Event listeners *\/\n document.getElementById('btn-open-tour-modal').addEventListener('click', vtOpen);\n document.getElementById('vtClose').addEventListener('click', vtClose);\n vtOverlay.addEventListener('click', function(e){ if (e.target === vtOverlay) vtClose(); });\n document.getElementById('vtLbClose').addEventListener('click', vtCloseLb);\n document.getElementById('vtLbPrev').addEventListener('click', function(){ vtNavLb(-1); });\n document.getElementById('vtLbNext').addEventListener('click', function(){ vtNavLb(1); });\n vtLb.addEventListener('click', function(e){ if (e.target === vtLb) vtCloseLb(); });\n document.addEventListener('keydown', function(e) {\n if (vtLb.style.display === 'flex') {\n if (e.key === 'Escape') vtCloseLb();\n if (e.key === 'ArrowLeft') vtNavLb(-1);\n if (e.key === 'ArrowRight') vtNavLb(1);\n } else if (vtOverlay.style.display === 'flex') {\n if (e.key === 'Escape') vtClose();\n }\n });\n\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PAUD Nurul Fikri – Tempat Anak Tumbuh Bahagia PAUD Nurul Fikri Beranda Tentang Kami Profile Fasilitas Kegiatan Program Kami Galeri Game Edukasi Baru! Kontak & Pendaftaran \ud83d\udca1Proudly\ud83d\udc23by Rudi Web Builder Menciptakan Generasi Ceria, Kreatif & Berakhlak Mulia Di PAUD Nurul Fikri, kami mempercayai bahwa setiap anak adalah permata yang unik. Kami menumbuhkembangkan potensi mereka dengan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":43,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":208,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/8\/revisions\/208"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}