{"id":93,"date":"2026-04-19T06:10:38","date_gmt":"2026-04-19T06:10:38","guid":{"rendered":"https:\/\/lab.rwb.my.id\/paud\/?page_id=93"},"modified":"2026-04-19T09:58:52","modified_gmt":"2026-04-19T09:58:52","slug":"game-edukasi","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/paud\/game-edukasi\/","title":{"rendered":"Game Edukasi"},"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 Game Edukasi - PAUD Nurul Fikri<\/title>\n\n <!-- SEO & Meta Tags -->\n <meta name=\"description\" content=\"Mainkan game edukasi seru dari PAUD Nurul Fikri! Belajar bahasa, warna, bentuk, angka, matematika, dan melatih memori dengan cara menyenangkan.\">\n <meta property=\"og:title\" content=\"Game Edukasi - PAUD Nurul Fikri\">\n <meta property=\"og:description\" content=\"Mainkan game edukasi seru dari PAUD Nurul Fikri!\">\n <meta property=\"og:url\" content=\"https:\/\/paud-nurulfikri.com\/game-edukasi\/\">\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 @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 (SAMA DENGAN BERANDA) --- *\/\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 \/* Active state untuk halaman saat ini *\/\n .nav-link.active-nav {\n color: var(--text-light);\n }\n .nav-link.active-nav::after {\n width: 100%;\n }\n .dropdown-toggle.active-nav {\n color: var(--text-light);\n }\n .dropdown-toggle.active-nav::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 .dropdown-menu li a.active-sub {\n color: var(--primary-color);\n font-weight: 500;\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 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 \/* --- MAIN CONTENT --- *\/\n main {\n padding: 4rem 2rem;\n position: relative;\n z-index: 2;\n }\n\n .lobby-container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .page-title {\n text-align: center;\n font-size: 3rem;\n margin-bottom: 1rem;\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 .page-subtitle {\n text-align: center;\n font-size: 1.2rem;\n color: var(--text-gray);\n margin-bottom: 3rem;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.6;\n }\n\n \/* --- GAME GRID --- *\/\n .game-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n\n .game-card {\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n border: 1px solid var(--glass-border);\n border-radius: 25px;\n overflow: hidden;\n transition: all 0.4s ease;\n position: relative;\n }\n\n .game-card:hover {\n transform: translateY(-10px);\n border-color: var(--primary-color);\n box-shadow: 0 20px 40px rgba(255, 154, 162, 0.15);\n }\n\n .game-card-banner {\n height: 180px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 5rem;\n position: relative;\n overflow: hidden;\n }\n\n .game-card-banner::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0.15;\n background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3));\n }\n\n .banner-word { background: linear-gradient(135deg, #667eea, #764ba2); }\n .banner-fun { background: linear-gradient(135deg, #FFB6C1, #87CEEB, #98FB98); }\n .banner-memory { background: linear-gradient(135deg, #FFE4B5, #FFB6C1, #87CEEB); }\n .banner-math { background: linear-gradient(135deg, #667eea, #764ba2); }\n\n .game-card-content {\n padding: 2rem;\n text-align: center;\n }\n\n .game-card-content h3 {\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n color: var(--primary-color);\n }\n\n .game-card-content .game-desc {\n color: var(--text-gray);\n font-size: 0.95rem;\n line-height: 1.5;\n margin-bottom: 1.5rem;\n }\n\n .game-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n justify-content: center;\n margin-bottom: 1.5rem;\n }\n\n .game-tag {\n padding: 0.3rem 0.8rem;\n background: rgba(255, 154, 162, 0.15);\n border-radius: 50px;\n font-size: 0.8rem;\n color: var(--primary-color);\n }\n\n .btn-play {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border: none;\n border-radius: 50px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--dark-bg);\n font-family: 'Poppins', sans-serif;\n }\n\n .btn-play:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 25px rgba(255, 154, 162, 0.3);\n }\n\n \/* --- INFO SECTION --- *\/\n .info-section {\n margin-top: 4rem;\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n padding: 2.5rem;\n text-align: center;\n }\n\n .info-section h2 {\n font-size: 1.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\n .info-tips {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n text-align: center;\n }\n\n .tip-item {\n padding: 1.5rem 1rem;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 15px;\n border: 1px solid var(--glass-border);\n }\n\n .tip-icon {\n font-size: 2.5rem;\n margin-bottom: 0.8rem;\n }\n\n .tip-text {\n color: var(--text-gray);\n font-size: 0.95rem;\n line-height: 1.5;\n }\n\n \/* --- FOOTER --- *\/\n footer { \n padding: 3rem 2rem 1.5rem; \n background: rgba(10, 25, 47, 0.9); \n border-top: 1px solid var(--glass-border); \n position: relative; \n z-index: 2;\n margin-top: 4rem;\n }\n .footer-content { \n max-width: 1200px; \n margin: 0 auto; \n text-align: center; \n }\n .social-links { \n display: flex; \n justify-content: center; \n gap: 1.5rem; \n margin-bottom: 2rem; \n }\n .social-links a { \n width: 40px; \n height: 40px; \n background: var(--glass-bg); \n border: 1px solid var(--glass-border); \n border-radius: 50%; \n display: flex; \n align-items: center; \n justify-content: center; \n color: var(--text-gray); \n transition: all 0.3s ease; \n }\n .social-links a:hover { \n background: var(--primary-color); \n color: var(--dark-bg); \n transform: translateY(-3px); \n }\n .footer-text { \n color: var(--text-gray); \n margin-bottom: 1rem; \n }\n .credit { \n font-size: 0.9rem; \n color: var(--text-gray); \n text-decoration: none; \n display: inline-block; \n }\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 { \n position: fixed; \n top: 0; \n left: 0; \n width: 100%; \n height: 100%; \n background: var(--dark-bg); \n display: flex; \n align-items: center; \n justify-content: center; \n z-index: 9999; \n transition: opacity 0.5s ease; \n }\n .loader.hidden { \n opacity: 0; \n pointer-events: none; \n }\n .loader-circle { \n width: 50px; \n height: 50px; \n border: 3px solid var(--glass-border); \n border-top-color: var(--primary-color); \n border-radius: 50%; \n animation: spin 1s linear infinite; \n }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n \/* --- HIDDEN CLASS --- *\/\n .mobile-hidden {\n display: none !important;\n }\n\n \/* --- MOBILE RESPONSIVE --- *\/\n @media (max-width: 768px) {\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.active-sub {\n color: var(--primary-color) !important;\n font-weight: 500 !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 body { padding-top: 70px; }\n main { padding: 2rem 1rem; }\n .page-title { font-size: 1.8rem; margin-bottom: 0.5rem; }\n .page-subtitle { font-size: 1rem; margin-bottom: 2rem; }\n\n .game-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n\n .game-card-banner {\n height: 140px;\n font-size: 4rem;\n }\n\n .game-card-content {\n padding: 1.5rem;\n }\n\n .game-card-content h3 {\n font-size: 1.3rem;\n }\n\n .info-section {\n padding: 2rem 1.5rem;\n margin-top: 3rem;\n }\n\n .info-tips {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n\n footer { \n padding: 2rem 1rem 1rem; \n margin-top: 3rem;\n }\n .footer-text { font-size: 0.85rem; }\n .credit { font-size: 0.75rem; }\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 active-nav\" 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=\".\/\" class=\"active-sub\">\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 <!-- Main Content -->\n <main>\n <div class=\"lobby-container\">\n <h1 class=\"page-title\">Game Edukasi<\/h1>\n <p class=\"page-subtitle\">Ayo belajar sambil bermain! Pilih game favoritmu dan asah kemampuanmu dengan cara yang menyenangkan.<\/p>\n \n <div class=\"game-grid\">\n <!-- Game 1 -->\n <div class=\"game-card\">\n <div class=\"game-card-banner banner-word\">\ud83d\udcda<\/div>\n <div class=\"game-card-content\">\n <h3>Word Master Adventure<\/h3>\n <p class=\"game-desc\">Belajar bahasa Inggris seru dengan tebak kata, susun kalimat, cocokkan kata, dan dengarkan!<\/p>\n <div class=\"game-tags\">\n <span class=\"game-tag\">Vocabulary<\/span>\n <span class=\"game-tag\">Sentence<\/span>\n <span class=\"game-tag\">Listening<\/span>\n <\/div>\n <a href=\"https:\/\/lab.rwb.my.id\/paud\/game-1-word-master-adventure\/\" class=\"btn-play\">\n <i class=\"fas fa-play\"><\/i> Mainkan\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Game 2 -->\n <div class=\"game-card\">\n <div class=\"game-card-banner banner-fun\">\ud83c\udf08<\/div>\n <div class=\"game-card-content\">\n <h3>Fun Learning<\/h3>\n <p class=\"game-desc\">Kenali warna-warna indah, bentuk-bentuk lucu, angka, dan hewan-hewan yang menarik!<\/p>\n <div class=\"game-tags\">\n <span class=\"game-tag\">Warna<\/span>\n <span class=\"game-tag\">Bentuk<\/span>\n <span class=\"game-tag\">Hewan<\/span>\n <\/div>\n <a href=\"https:\/\/lab.rwb.my.id\/paud\/game-2-fun-learning\/\" class=\"btn-play\">\n <i class=\"fas fa-play\"><\/i> Mainkan\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Game 3 -->\n <div class=\"game-card\">\n <div class=\"game-card-banner banner-memory\">\ud83e\udde0<\/div>\n <div class=\"game-card-content\">\n <h3>Memory Fun Game<\/h3>\n <p class=\"game-desc\">Latih daya ingatmu dengan mencocokkan kartu berpasangan! Tersedia 3 tingkat kesulitan.<\/p>\n <div class=\"game-tags\">\n <span class=\"game-tag\">Memori<\/span>\n <span class=\"game-tag\">Kartu<\/span>\n <span class=\"game-tag\">Cocokkan<\/span>\n <\/div>\n <a href=\"https:\/\/lab.rwb.my.id\/paud\/game-3-memori\/\" class=\"btn-play\">\n <i class=\"fas fa-play\"><\/i> Mainkan\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Game 4 -->\n <div class=\"game-card\">\n <div class=\"game-card-banner banner-math\">\ud83e\uddee<\/div>\n <div class=\"game-card-content\">\n <h3>Math Adventure<\/h3>\n <p class=\"game-desc\">Petualangan matematika seru dengan tambah, kurang, kali! Tersedia 4 tingkat kesulitan.<\/p>\n <div class=\"game-tags\">\n <span class=\"game-tag\">Matematika<\/span>\n <span class=\"game-tag\">Tambah<\/span>\n <span class=\"game-tag\">Kali<\/span>\n <\/div>\n <a href=\"https:\/\/lab.rwb.my.id\/paud\/game-4-math\/\" class=\"btn-play\">\n <i class=\"fas fa-play\"><\/i> Mainkan\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Info Section -->\n <div class=\"info-section\">\n <h2>Tips Bermain<\/h2>\n <div class=\"info-tips\">\n <div class=\"tip-item\">\n <div class=\"tip-icon\">\ud83d\udd50<\/div>\n <p class=\"tip-text\">Mainkan sesuai waktu yang ditentukan orang tua<\/p>\n <\/div>\n <div class=\"tip-item\">\n <div class=\"tip-icon\">\ud83c\udfaf<\/div>\n <p class=\"tip-text\">Coba level mudah dulu sebelum naik level<\/p>\n <\/div>\n <div class=\"tip-item\">\n <div class=\"tip-icon\">\ud83d\udcda<\/div>\n <p class=\"tip-text\">Game ini untuk belajar, bukan hanya menang<\/p>\n <\/div>\n <div class=\"tip-item\">\n <div class=\"tip-icon\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/div>\n <p class=\"tip-text\">Ajak orang tua bermain bersama!<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\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 <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 \/\/ Tutup menu mobile saat klik nav-link biasa\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 \/\/ Dropdown toggle (mobile: klik buka\/tutup accordion)\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 \/\/ Tutup menu mobile saat klik item di dalam dropdown\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 \/\/ Set current year\n document.getElementById('year').textContent = new Date().getFullYear();\n\n \/\/ Hide loader when page is loaded\n const loader = document.getElementById('loader');\n setTimeout(() => { loader.classList.add('hidden'); }, 500);\n\n \/\/ Initialize floating balloons\n createBalloons();\n setInterval(createBalloons, 30000);\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>Game Edukasi – PAUD Nurul Fikri PAUD Nurul Fikri Beranda Tentang Kami Profile Fasilitas Kegiatan Program Kami Galeri Game Edukasi Baru! Kontak & Pendaftaran \ud83d\udca1Proudly\ud83d\udc23by Rudi Web Builder Game Edukasi Ayo belajar sambil bermain! Pilih game favoritmu dan asah kemampuanmu dengan cara yang menyenangkan. \ud83d\udcda Word Master Adventure Belajar bahasa Inggris seru dengan tebak kata, […]<\/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-93","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/93","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=93"}],"version-history":[{"count":24,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/93\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/93\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/media?parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}