MentorOnline.asia | Kuasai Skill Digital Masa Depan<\/title>\n<meta name=\"description\" content=\"Platform mentoring digital intensif 1-on-1. Belajar UI\/UX, Coding, Desain, dan Video Editing bersama praktisi industri.\">\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link rel=\"dns-prefetch\" href=\"https:\/\/www.youtube.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap\" rel=\"stylesheet\">\n\n<style>\n \/* =======================================================\n RESET & VARIABLES (MAIN PAGE)\n ======================================================= *\/\n * { margin: 0; padding: 0; box-sizing: border-box; }\n \n :root {\n --bg-main: #FFFFFF; \n --text-main: #0A192F; \n --text-muted: #475569; \n --color-yellow: #FFD166;\n --color-pink: #EF476F;\n --color-blue: #118AB2;\n --color-green: #06D6A0;\n --color-purple: #8338EC;\n --radius-pill: 100px;\n --radius-xl: 32px;\n --radius-lg: 24px;\n --radius-md: 16px;\n --shadow-solid: 6px 6px 0px var(--text-main);\n --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n \n \/* GAME VARIABLES *\/\n --mentor-blue: #2A72E5;\n --mentor-blue-dark: #1C54AF;\n --mentor-yellow: #FFAE19;\n --mentor-yellow-dark: #D48900;\n --mentor-green: #3CC36E;\n --mentor-green-dark: #2A9953;\n --mentor-red: #FF5A79;\n --mentor-red-dark: #D63554;\n --purple-sky-top: #5527DB;\n --purple-sky-mid: #6836E6;\n --purple-sky-bot: #7D48F7;\n --castle-yellow-top: #FFE57F;\n --castle-yellow-left: #F7CA45;\n --castle-yellow-right: #E2AC22;\n }\n\n body {\n font-family: 'Nunito', sans-serif;\n background-color: var(--bg-main);\n color: var(--text-main);\n line-height: 1.6;\n overflow-x: hidden;\n text-rendering: optimizeLegibility; \n }\n\n h1, h2, h3, h4, .brand, .btn, .price, .step-num { font-family: 'Fredoka', sans-serif; }\n a { text-decoration: none; color: inherit; }\n ul { list-style: none; }\n img { max-width: 100%; display: block; border-radius: var(--radius-md); }\n\n .container { max-width: 1440px; margin: 0 auto; padding: 0 4%; }\n .section-pad { padding: 100px 0; }\n \n .section-header { text-align: center; margin-bottom: 60px; position: relative; }\n .section-header h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: var(--text-main) !important; }\n .section-header p { color: var(--text-muted) !important; font-size: 1.15rem; font-weight: 600; max-width: 700px; margin: 0 auto; }\n\n \/* =======================================================\n BUTTONS\n ======================================================= *\/\n .btn {\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n padding: 14px 32px; border-radius: var(--radius-pill); font-weight: 700;\n font-size: 1.1rem; cursor: pointer; transition: var(--transition-bounce);\n border: 3px solid var(--text-main); text-transform: capitalize;\n will-change: transform; \n }\n .btn-primary { background-color: var(--color-yellow); color: var(--text-main); box-shadow: 4px 4px 0px var(--text-main); }\n .btn-primary:hover { transform: translate(-4px, -4px) scale(1.05); box-shadow: 8px 8px 0px var(--text-main); }\n .btn-secondary { background-color: var(--color-pink); color: white; border: 3px solid var(--text-main); box-shadow: 4px 4px 0px var(--text-main); }\n .btn-secondary:hover { transform: translate(-4px, -4px) scale(1.05); box-shadow: 8px 8px 0px var(--text-main); }\n\n \/* =======================================================\n NAVBAR\n ======================================================= *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0; padding: 20px 0; z-index: 1000;\n background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); transition: var(--transition);\n }\n .nav-inner {\n display: flex; justify-content: space-between; align-items: center;\n background: white; padding: 10px 30px; border-radius: var(--radius-pill);\n border: 3px solid var(--text-main); box-shadow: var(--shadow-solid);\n }\n .nav-brand { font-size: 1.5rem; font-weight: 800; color: var(--color-blue); display: flex; align-items: center; gap: 12px; }\n .brand-logo { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--text-main); object-fit: cover; }\n .nav-links { display: flex; gap: 24px; font-weight: 700; font-size: 1.05rem; align-items: center; }\n .nav-links a { color: var(--text-main); transition: var(--transition); }\n .nav-links a:hover { color: var(--color-pink); }\n .nav-links .nav-highlight { color: var(--color-pink); border-bottom: 2px dashed var(--color-pink); }\n .nav-links .nav-highlight:hover { color: var(--color-blue); border-bottom-color: var(--color-blue); }\n\n \/* =======================================================\n MODALS (POPUP WELCOME & TUTOR)\n ======================================================= *\/\n .popup-overlay {\n position: fixed; top: 0; left: 0; right: 0; bottom: 0;\n background: rgba(10, 25, 47, 0.75); backdrop-filter: blur(4px); z-index: 9999;\n display: flex; align-items: center; justify-content: center;\n opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: 20px;\n }\n .popup-overlay.show { opacity: 1; visibility: visible; }\n .popup-box {\n background-color: var(--bg-main); width: 100%; max-width: 450px;\n border-radius: var(--radius-xl); border: 4px solid var(--text-main);\n box-shadow: 8px 8px 0px var(--text-main); padding: 40px 30px;\n position: relative; text-align: center; transform: translateY(50px) scale(0.9);\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n max-height: 90vh; overflow-y: auto;\n }\n .popup-overlay.show .popup-box { transform: translateY(0) scale(1); }\n .popup-close {\n position: absolute; top: 15px; right: 20px; background: none; border: none;\n font-size: 2rem; color: var(--text-muted); cursor: pointer; transition: var(--transition);\n }\n .popup-close:hover { color: var(--color-pink); transform: scale(1.1) rotate(90deg); }\n .popup-badge { background: var(--color-pink); color: white; font-weight: 700; font-size: 0.85rem; padding: 6px 16px; border-radius: var(--radius-pill); display: inline-block; border: 2px solid var(--text-main); margin-bottom: 20px;}\n \n .tutor-modal-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; text-align: left;}\n .tutor-modal-img { width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--text-main); object-fit: contain; object-position: bottom;}\n .tutor-modal-header h3 { color: var(--text-main); }\n\n .btn-popup { width: 100%; padding: 16px; font-size: 1.2rem; background: var(--color-green); color: var(--text-main); animation: wiggle 2s infinite ease-in-out; cursor: pointer;}\n .btn-popup:hover { animation: none; background: var(--color-yellow); }\n @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } }\n\n \/* =======================================================\n HERO SECTION\n ======================================================= *\/\n .hero {\n background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-12-at-16.59.06.jpeg');\n background-size: cover; background-position: center; background-color: var(--bg-main);\n min-height: 100vh; display: flex; align-items: center; padding-top: 100px; padding-bottom: 50px; position: relative;\n }\n .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; z-index: 1; width: 100%; }\n .hero-badge { display: inline-block; background-color: var(--text-main); color: white; padding: 8px 20px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.9rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 3px 3px 0px var(--color-pink); }\n .hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 24px; color: var(--text-main); }\n .hero-title span { color: var(--color-pink); }\n .hero-desc { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-muted); font-weight: 600; margin-bottom: 40px; max-width: 600px; }\n \n .hero-stats { display: flex; gap: 30px; margin-top: 50px; flex-wrap: wrap;}\n .stat-item { border: 3px solid var(--text-main); padding: 16px 24px; border-radius: var(--radius-xl); box-shadow: 4px 4px 0px var(--text-main); text-align: center; flex: 1; min-width: 140px;}\n .stat-item h4 { font-size: 2.2rem; line-height: 1; margin-bottom: 5px;}\n .stat-item p { font-size: 0.95rem; font-weight: 700; color: inherit; }\n\n .hero-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }\n .h-card { border-radius: var(--radius-xl); color: var(--text-main); display: flex; flex-direction: column; border: 3px solid var(--text-main); transition: var(--transition-bounce); box-shadow: 4px 4px 0px var(--text-main); overflow: hidden; background-color: white; will-change: transform;}\n .h-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 10px 10px 0px var(--text-main); }\n .h-card-img { width: 100%; height: clamp(120px, 15vh, 160px); object-fit: cover; border-bottom: 3px solid var(--text-main); border-radius: 0; }\n .h-card-content { padding: 20px; display: flex; flex-direction: column; flex: 1; }\n .h-card h3 { font-size: 1.2rem; margin-bottom: 8px; font-weight: 700; color: var(--text-main); }\n .h-card p { font-size: 0.9rem; font-weight: 600; margin-bottom: 16px; flex: 1; color: var(--text-main); line-height: 1.4; }\n \n .c-yellow .h-card-content { background-color: var(--color-yellow); }\n .c-pink .h-card-content { background-color: var(--color-pink); }\n .c-blue .h-card-content { background-color: var(--color-blue); }\n .c-green .h-card-content { background-color: var(--color-green); }\n\n \/* =======================================================\n PARTNER SECTION\n ======================================================= *\/\n .partner-section { background-color: #FAFAFA; border-top: 4px solid var(--text-main); border-bottom: 4px solid var(--text-main); overflow: hidden; padding-bottom: 60px; position: relative;}\n .partner-slider { scroll-snap-type: none !important; } \n .partner-slider .partner-card { scroll-snap-align: none !important; cursor: default; }\n\n .partner-card { \n width: 250px; flex-shrink: 0; border: 4px solid var(--text-main); border-radius: var(--radius-xl); \n box-shadow: 6px 6px 0px var(--text-main); background-color: white; display: flex; \n align-items: center; justify-content: center; padding: 20px; overflow: hidden; \n transition: var(--transition-bounce); height: 120px;\n }\n .partner-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 10px 10px 0px var(--text-main); }\n .partner-logo { \n height: 60px; width: auto; max-width: 100%; object-fit: contain; \n filter: grayscale(100%) opacity(0.5); transition: var(--transition-bounce); \n }\n .partner-card:hover .partner-logo { filter: grayscale(0%) opacity(1); transform: scale(1.1); }\n\n \/* =======================================================\n INTERACTIVE GAME SECTION\n ======================================================= *\/\n .interactive-game-section { background-color: #F8FAFC; border-bottom: 4px solid var(--text-main); }\n \n .mentor-app {\n display: flex; flex-direction: column; width: 100%;\n height: 85vh; min-height: 650px; position: relative;\n border-radius: var(--radius-xl); overflow: hidden;\n border: 4px solid var(--text-main); box-shadow: 8px 8px 0px var(--text-main);\n background-color: var(--purple-sky-mid);\n -webkit-tap-highlight-color: transparent; user-select: none;\n }\n \n .screen-shake { animation: shakeScreenAnim 0.38s cubic-bezier(.36,.07,.19,.97) both; }\n @keyframes shakeScreenAnim {\n 10%, 90% { transform: translate3d(-3px, -2px, 0); }\n 20%, 80% { transform: translate3d(4px, 3px, 0); }\n 30%, 50%, 70% { transform: translate3d(-5px, -3px, 0); }\n 40%, 60% { transform: translate3d(5px, 3px, 0); }\n }\n\n #confettiCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; }\n\n .cheer-popup {\n position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%) scale(0);\n background: linear-gradient(135deg, #FF5A79, #FF8F3D); color: white; padding: 14px 26px;\n border-radius: 28px; box-shadow: 0 14px 30px rgba(255, 90, 121, 0.45); border: 4px solid white;\n font-size: 1.4rem; font-weight: 900; display: flex; align-items: center; gap: 12px;\n z-index: 500; pointer-events: none; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .cheer-popup.show { transform: translate(-50%, -50%) scale(1); }\n\n .game-navbar {\n height: 52px; background: rgba(26, 16, 74, 0.78); backdrop-filter: blur(8px);\n border-bottom: 2px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center;\n justify-content: space-between; padding: 0 16px; color: white; flex-shrink: 0; z-index: 10;\n }\n .nav-left, .nav-controls, .nav-right { display: flex; align-items: center; gap: 12px; }\n .game-brand-container { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.18); padding: 4px 12px 4px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.3); }\n .game-brand-logo-img { width: 30px; height: 30px; object-fit: contain; border-radius: 8px; background: white; padding: 2px; }\n .game-brand-name-text { font-size: 1.15rem; font-weight: 900; color: white; letter-spacing: 0.3px; }\n\n .btn-action-ctrl { width: 44px; height: 36px; border-radius: 12px; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; }\n .btn-flag-green { background: var(--mentor-green); box-shadow: 0 3px 0 var(--mentor-green-dark); }\n .btn-flag-green:hover { background: #47D279; }\n .btn-flag-green:active { transform: translateY(2px); box-shadow: none; }\n .btn-stop-red { background: var(--mentor-red); box-shadow: 0 3px 0 var(--mentor-red-dark); }\n .btn-stop-red:hover { background: #FF738C; }\n .btn-stop-red:active { transform: translateY(2px); box-shadow: none; }\n\n .btn-bgm { background: rgba(255,255,255,0.22); border: 2px solid rgba(255,255,255,0.4); color: white; font-family: inherit; font-weight: 800; border-radius: 12px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }\n .level-pills { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.25); padding: 4px 8px; border-radius: 14px; }\n .level-label { font-size: 0.8rem; font-weight: 800; color: #E2EFFF; }\n .lvl-btn { width: 32px; height: 32px; border-radius: 9px; border: none; background: white; color: var(--mentor-blue); font-weight: 900; font-size: 0.95rem; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.2); position: relative; display: flex; align-items: center; justify-content: center; }\n .lvl-btn.active { background: var(--mentor-yellow); color: white; box-shadow: 0 3px 0 var(--mentor-yellow-dark); transform: translateY(-1px); }\n .lvl-btn.locked { background: #8E94A5; color: #D1D5DB; cursor: not-allowed; }\n .lvl-btn.locked::after { content: \"\ud83d\udd12\"; position: absolute; font-size: 9px; top: -3px; right: -3px; }\n\n .app-workspace { flex: 1; display: grid; grid-template-columns: 1.35fr 1fr; min-height: 0; gap: 12px; padding: 8px 14px; }\n .stage-card { background: rgba(255, 255, 255, 0.96); border: 3px solid #FFD452; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.3); position: relative; }\n .stage-header-bar { background: #FFF8E5; padding: 6px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #FFEBB3; }\n .stage-title { font-weight: 800; font-size: 0.88rem; color: #9C5D00; display: flex; align-items: center; gap: 6px; }\n .speech-wrap { margin: 6px 12px 2px 12px; background: #FFF9E6; border: 2px solid #FFE082; border-radius: 14px; padding: 5px 12px; display: flex; align-items: center; gap: 10px; }\n .speech-avatar { font-size: 1.8rem; line-height: 1; }\n .speech-text { font-size: 0.9rem; font-weight: 700; color: #5D4037; margin: 0; line-height: 1.25; }\n\n .bg-cloud { position: absolute; background: rgba(255, 255, 255, 0.88); border-radius: 30px; pointer-events: none; }\n .cloud-1 { width: 75px; height: 36px; top: 16px; left: 24px; transform: rotate(-15deg); filter: blur(0.5px); }\n .cloud-2 { width: 55px; height: 28px; top: 44px; right: 35px; transform: rotate(10deg); }\n .cloud-3 { width: 48px; height: 22px; top: 115px; left: 16px; transform: rotate(-5deg); }\n .bg-balloon { position: absolute; top: 15px; right: 48px; font-size: 2.6rem; animation: gentleHover 3s infinite ease-in-out; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35)); }\n .water-stream { position: absolute; bottom: -10px; right: 18px; width: 140px; height: 48px; background: linear-gradient(90deg, #48C6EF, #2A95D6); border-radius: 14px 0 0 0; transform: skewX(-28deg); box-shadow: 0 4px 15px rgba(42, 149, 214, 0.5); pointer-events: none; }\n .mini-tree { position: absolute; font-size: 1.6rem; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3)); }\n .tree-1 { bottom: 35px; left: 35px; }\n .tree-2 { bottom: 18px; left: 62px; }\n .tree-3 { top: 120px; right: 28px; }\n\n .iso-castle-base { background: var(--castle-yellow-top); border-radius: 36px; padding: 16px; box-shadow: -18px 18px 0px var(--castle-yellow-left), -34px 34px 0px var(--castle-yellow-right), -40px 42px 32px rgba(12, 5, 45, 0.48); position: relative; transform-style: preserve-3d; border: 4px solid #FFF29B; }\n .sign-badge { position: absolute; background: #FF5A79; color: white; font-size: 0.72rem; font-weight: 900; padding: 3px 8px; border-radius: 6px; border: 2px solid white; box-shadow: -2px 3px 0px rgba(0,0,0,0.25); transform: rotateZ(45deg) rotateX(-58deg); pointer-events: none; z-index: 50; }\n .sign-start { top: -14px; left: 10px; }\n .iso-grid { display: grid; gap: clamp(10px, 1.8vmin, 16px); position: relative; transform-style: preserve-3d; }\n .iso-tile { width: clamp(50px, 10.5vmin, 90px); height: clamp(50px, 10.5vmin, 90px); background: #FFFFFF; border-radius: 20px; position: relative; transform-style: preserve-3d; transition: all 0.25s ease; box-shadow: -5px 6px 0px #F2CA52, -9px 12px 14px rgba(110, 75, 10, 0.22); display: flex; align-items: center; justify-content: center; }\n .iso-tile::before { content: \"\"; position: absolute; top: 4px; left: 4px; right: 4px; height: 38%; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.1)); border-radius: 14px 14px 40% 40%; pointer-events: none; }\n .iso-tile.active-tile { background: #E0FBEA; box-shadow: -5px 6px 0px #70D394, -9px 12px 16px rgba(46, 175, 87, 0.35); }\n .billboard-item { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px); transform-origin: center bottom; display: flex; align-items: center; justify-content: center; pointer-events: none; filter: drop-shadow(-4px 8px 6px rgba(0,0,0,0.25)); }\n .item-carrot { font-size: clamp(2.8rem, 6.5vmin, 4.4rem); animation: gentleHover 2.2s infinite ease-in-out; }\n .item-rock { font-size: clamp(2.4rem, 5.5vmin, 3.8rem); }\n .item-wolf { font-size: clamp(2.8rem, 6.5vmin, 4.2rem); animation: wolfWiggle 1.8s infinite ease-in-out; }\n\n .rabbit-3d-actor { position: absolute; width: clamp(50px, 10.5vmin, 90px); height: clamp(50px, 10.5vmin, 90px); top: 0; left: 0; transform-style: preserve-3d; pointer-events: none; z-index: 100; transition: top 0.48s cubic-bezier(0.34, 1.25, 0.64, 1), left 0.48s cubic-bezier(0.34, 1.25, 0.64, 1); display: flex; align-items: center; justify-content: center; }\n .rabbit-body-3d { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px); transform-origin: center bottom; position: relative; width: clamp(50px, 9.2vmin, 88px); height: clamp(50px, 9.2vmin, 88px); filter: drop-shadow(-6px 12px 10px rgba(0,0,0,0.35)); transition: transform 0.2s ease; display: flex; align-items: center; justify-content: center; }\n .rabbit-asset-img { width: 100%; height: 100%; object-fit: contain; }\n .rabbit-3d-actor.jumping .rabbit-body-3d { animation: dynamicHop3D 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }\n .rabbit-3d-actor.falling .rabbit-body-3d { animation: fallDown3D 0.82s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; }\n .rabbit-3d-actor.celebrating .rabbit-body-3d { animation: victoryDance3D 0.9s infinite ease-in-out; }\n .rabbit-shadow-3d { position: absolute; width: 48px; height: 26px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 72%); bottom: -6px; border-radius: 50%; transition: transform 0.48s ease, opacity 0.48s ease; }\n .rabbit-3d-actor.jumping .rabbit-shadow-3d { animation: shadowJump 0.48s ease forwards; }\n .rabbit-3d-actor.falling .rabbit-shadow-3d { opacity: 0; }\n\n .workspace-actions { display: flex; gap: 8px; margin-top: 8px; }\n .btn-mentor-action { font-family: inherit; border: none; border-radius: 14px; padding: 11px 16px; font-size: 1.05rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s ease; }\n .btn-exec-flag { flex: 2; background: var(--mentor-green); color: white; box-shadow: 0 4px 0 var(--mentor-green-dark); }\n .btn-exec-flag:hover { background: #47D279; }\n .btn-exec-flag:active { transform: translateY(2px); box-shadow: none; }\n .btn-reset-workspace { flex: 1; background: #E2E8F0; color: #475569; box-shadow: 0 4px 0 #CBD5E1; }\n .btn-reset-workspace:active { transform: translateY(2px); box-shadow: none; }\n .btn-mentor-action:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }\n\n .game-modal-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(24, 15, 65, 0.82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; border-radius: inherit; }\n .game-modal-box { background: white; max-width: 480px; width: 100%; border-radius: 28px; border: 5px solid #FFD452; padding: 26px 22px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,0.3); animation: modalZoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }\n .game-modal-logo-img { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); animation: gentleBounce 2s infinite ease-in-out; }\n .game-modal-heading { font-size: 1.75rem; font-weight: 900; color: #9C5D00; margin: 10px 0 6px 0; line-height: 1.2;}\n .game-modal-desc { font-size: 1.02rem; color: #64748B; font-weight: 600; line-height: 1.4; margin: 0 0 20px 0; }\n .btn-game-modal-start { width: 100%; background: var(--mentor-green); color: white; border: none; border-radius: 18px; padding: 14px 20px; font-size: 1.25rem; font-weight: 900; cursor: pointer; box-shadow: 0 6px 0 var(--mentor-green-dark); transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; gap: 10px; }\n .btn-game-modal-start:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--mentor-green-dark); }\n\n @keyframes dynamicHop3D { 0% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px) scale(1); } 45% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-85px) scale(1.22); } 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px) scale(1); } }\n @keyframes shadowJump { 0% { transform: scale(1); opacity: 0.45; } 45% { transform: scale(0.5); opacity: 0.15; } 100% { transform: scale(1); opacity: 0.45; } }\n @keyframes fallDown3D { 0% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px) rotate(0deg); opacity: 1; } 35% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-45px) rotate(-35deg); } 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(140px) rotate(110deg) scale(0.6); opacity: 0; } }\n @keyframes victoryDance3D { 0%, 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px) scale(1); } 50% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-75px) rotate(15deg) scale(1.25); } }\n @keyframes gentleHover { 0%, 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px); } 50% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-32px); } }\n @keyframes wolfWiggle { 0%, 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px) rotate(0deg); } 25% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px) rotate(-8deg); } 75% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px) rotate(8deg); } }\n @keyframes gentleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }\n @keyframes popIn { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }\n @keyframes modalZoom { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }\n\n .arena-viewport { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px; position: relative; background: linear-gradient(180deg, var(--purple-sky-top) 0%, var(--purple-sky-mid) 48%, var(--purple-sky-bot) 100%); perspective: 1200px; overflow: hidden; cursor: grab; touch-action: none; }\n .arena-viewport:active { cursor: grabbing; }\n\n .orbit-hud { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(20, 10, 55, 0.75); backdrop-filter: blur(6px); padding: 5px 12px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, 0.3); z-index: 60; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }\n .orbit-btn { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); color: white; font-family: inherit; font-weight: 800; font-size: 0.75rem; border-radius: 12px; padding: 4px 10px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: background 0.15s, transform 0.1s; }\n .orbit-btn:hover { background: rgba(255, 255, 255, 0.35); }\n .orbit-btn:active { transform: scale(0.95); }\n .orbit-hint { font-size: 0.72rem; color: #FFE57F; font-weight: 700; pointer-events: none; white-space: nowrap; }\n .iso-world { transform-style: preserve-3d; position: relative; will-change: transform; }\n\n .coding-card { background: white; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 3px solid #E2E8F0; }\n .category-bar { background: #E2E8F0; padding: 8px 14px; }\n .cat-pill { display: inline-flex; align-items: center; gap: 6px; background: white; padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 800; color: var(--text-main); }\n .cat-dot { width: 10px; height: 10px; background: var(--mentor-blue); border-radius: 50%; }\n\n .block-palette { padding: 10px 14px; background: #FAFBFD; border-bottom: 2px solid #E8EEF5; display: flex; flex-direction: column; gap: 8px; }\n .palette-label { font-size: 0.82rem; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; }\n .blocks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 4px 6px 6px 2px; }\n\n .mentor-block { color: white; border-radius: 12px 18px 18px 12px; padding: 12px 6px 12px 10px; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: grab; position: relative; transition: transform 0.12s, box-shadow 0.12s; touch-action: none; border: 2px solid rgba(255, 255, 255, 0.4); }\n .mentor-block::after { content: \"\"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 18px; height: 22px; border-radius: 0 14px 14px 0; z-index: 5; box-shadow: 2px 3px 0 rgba(0,0,0,0.18); }\n .block-atas { background: #2EC4B6; box-shadow: 0 5px 0 #1B8C81; } .block-atas::after { background: #2EC4B6; }\n .block-bawah { background: #FF9F1C; box-shadow: 0 5px 0 #D47B00; } .block-bawah::after { background: #FF9F1C; }\n .block-kiri { background: #9B5DE5; box-shadow: 0 5px 0 #733CB3; } .block-kiri::after { background: #9B5DE5; }\n .block-kanan { background: #00BBF9; box-shadow: 0 5px 0 #008EC4; } .block-kanan::after { background: #00BBF9; }\n .mentor-block:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.06); }\n .mentor-block:active { transform: translateY(3px) scale(0.98); cursor: grabbing; box-shadow: none !important; }\n .block-symbol { font-size: 2.1rem; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); }\n .block-caption { font-size: 0.85rem; font-weight: 900; margin-top: 4px; pointer-events: none; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.25); color: white;}\n\n .workspace-area { padding: 14px; flex: 1; display: flex; flex-direction: column; }\n .hat-block { background: #FFB703; color: white; border-radius: 20px 20px 8px 8px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 0.95rem; box-shadow: 0 5px 0 #D49000; margin-right: 12px; margin-bottom: 10px; position: relative; align-self: flex-start; border: 2px solid rgba(255,255,255,0.4); }\n .hat-block::after { content: \"\"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 18px; height: 22px; background: #FFB703; border-radius: 0 14px 14px 0; box-shadow: 2px 3px 0 #D49000; z-index: 5; }\n\n .canvas-dropzone { flex: 1; background: #FFFFFF; border: 3.5px dashed #94A3B8; border-radius: 28px; padding: 16px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0px; overflow-y: auto; transition: all 0.25s ease; box-shadow: inset 0 3px 8px rgba(0,0,0,0.04); }\n .canvas-dropzone.drag-active { background: #EFFBF3; border-color: #2EC4B6; border-style: solid; box-shadow: inset 0 0 12px rgba(46, 196, 182, 0.25); }\n .canvas-dropzone.shake-hint { animation: dropzoneGlow 0.4s ease; border-color: #FF9F1C; }\n @keyframes dropzoneGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); border-color: #FF9F1C; } }\n\n .connected-tile { color: white; border-radius: 10px; padding: 9px 16px 9px 18px; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; position: relative; margin-right: 12px; margin-bottom: 10px; cursor: pointer; animation: popIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); border: 2px solid rgba(255, 255, 255, 0.4); }\n .connected-tile::before { content: \"\"; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 12px; height: 20px; background: white; border-radius: 0 12px 12px 0; z-index: 1; }\n .connected-tile::after { content: \"\"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 17px; height: 20px; border-radius: 0 14px 14px 0; z-index: 6; box-shadow: 2px 2px 0 rgba(0,0,0,0.18); }\n .tile-atas { background: #2EC4B6; box-shadow: 0 4px 0 #1B8C81; } .tile-atas::after { background: #2EC4B6; }\n .tile-bawah { background: #FF9F1C; box-shadow: 0 4px 0 #D47B00; } .tile-bawah::after { background: #FF9F1C; }\n .tile-kiri { background: #9B5DE5; box-shadow: 0 4px 0 #733CB3; } .tile-kiri::after { background: #9B5DE5; }\n .tile-kanan { background: #00BBF9; box-shadow: 0 4px 0 #008EC4; } .tile-kanan::after { background: #00BBF9; }\n .connected-tile.running { transform: scale(1.12); filter: brightness(1.2); z-index: 10; box-shadow: 0 6px 14px rgba(0,0,0,0.3) !important; }\n .tile-step { font-size: 0.78rem; background: rgba(0,0,0,0.22); padding: 2px 6px; border-radius: 6px; font-weight: 900; }\n .tile-icon { font-size: 1.55rem; line-height: 1; }\n .tile-text { font-size: 0.85rem; font-weight: 900; letter-spacing: 0.4px; }\n .tile-del { font-size: 0.9rem; color: rgba(255,255,255,0.7); font-weight: bold; margin-left: 4px; }\n .connected-tile:hover .tile-del { color: #FFF0F0; }\n\n @media (max-width: 860px) { .app-workspace { grid-template-columns: 1fr; height: auto; } }\n\n \/* =======================================================\n SLIDER MECHANIC (REUSABLE UTK TUTOR & PARTNER)\n ======================================================= *\/\n .slider-wrapper { position: relative; display: flex; align-items: center; max-width: 1140px; margin: 0 auto;}\n .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: white; border: 3px solid var(--text-main); border-radius: 50%; font-size: 1.5rem; font-weight: bold; cursor: pointer; z-index: 10; box-shadow: 4px 4px 0px var(--text-main); transition: var(--transition-bounce); display: flex; align-items: center; justify-content: center; color: var(--text-main); }\n .slider-btn:hover { background: var(--color-yellow); transform: translateY(-50%) scale(1.1); box-shadow: 6px 6px 0px var(--text-main); }\n .slider-btn.prev { left: -25px; }\n .slider-btn.next { right: -25px; }\n \n .slider-content { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 20px 4px 40px; width: 100%; -ms-overflow-style: none; scrollbar-width: none; }\n .slider-content::-webkit-scrollbar { display: none; }\n\n \/* =======================================================\n SIMULASI (ROADMAP) COLORFUL DGN TEXTURE\n ======================================================= *\/\n .simulasi-section { background-color: var(--color-blue); border-top: 4px solid var(--text-main); border-bottom: 4px solid var(--text-main); background-image: radial-gradient(rgba(255,255,255,0.1) 2px, transparent 2px); background-size: 30px 30px; }\n .simulasi-section .section-header h2 { color: white !important; }\n .simulasi-section .section-header p { color: rgba(255,255,255,0.9) !important; }\n .roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }\n .roadmap-grid::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 4px; background-image: linear-gradient(to right, var(--text-main) 50%, transparent 50%); background-size: 20px 4px; z-index: 0; transform: translateY(-50%); }\n \n .step-card { border: 4px solid var(--text-main); border-radius: var(--radius-xl); padding: 30px 20px; text-align: center; box-shadow: 6px 6px 0px var(--text-main); position: relative; z-index: 1; transition: var(--transition-bounce); will-change: transform; \n \/* Dotted texture here *\/\n background-image: radial-gradient(rgba(255,255,255,0.5) 3px, transparent 3px);\n background-size: 18px 18px;\n }\n .step-card:nth-child(odd):hover { transform: translateY(-10px) scale(1.03) rotate(-2deg); box-shadow: 8px 12px 0px var(--text-main); }\n .step-card:nth-child(even):hover { transform: translateY(-10px) scale(1.03) rotate(2deg); box-shadow: 8px 12px 0px var(--text-main); }\n \n .step-card.c-yellow { background-color: var(--color-yellow); }\n .step-card.c-pink { background-color: var(--color-pink); }\n .step-card.c-blue { background-color: var(--color-blue); }\n .step-card.c-green { background-color: var(--color-green); }\n\n .step-card .step-num { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--text-main); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; margin: 0 auto 16px; background: white; color: var(--text-main); box-shadow: 3px 3px 0px var(--text-main); }\n .step-card h3 { font-size: 1.25rem; margin-bottom: 8px; color: var(--text-main); }\n .step-card p { font-size: 0.95rem; font-weight: 600; color: var(--text-main); line-height: 1.4;}\n \n \/* Override Teks Putih untuk background Pink & Blue *\/\n .step-card.c-pink h3, .step-card.c-pink p, .step-card.c-blue h3, .step-card.c-blue p { color: white; }\n\n .step-badge { background: white; color: var(--text-main); display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); border: 2px solid var(--text-main); font-size: 0.8rem; font-weight: 800; margin-top: 16px; }\n .step-icon { font-size: 3.5rem; margin: 10px 0 20px; filter: drop-shadow(3px 3px 0px var(--text-main)); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }\n .step-card:hover .step-icon { transform: scale(1.15) rotate(10deg); }\n\n \/* =======================================================\n PROMO\n ======================================================= *\/\n .promo-banner { background-color: white; border-radius: var(--radius-xl); padding: 50px; display: flex; align-items: center; justify-content: space-between; border: 4px solid var(--text-main); box-shadow: 8px 8px 0px var(--text-main); transition: var(--transition-bounce); will-change: transform;}\n .promo-banner:hover { transform: translateY(-6px) scale(1.01); box-shadow: 12px 12px 0px var(--text-main); }\n .promo-text h3 { font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: 16px; color: var(--text-main); }\n .promo-text p { color: var(--text-main); font-weight: 600; }\n .promo-text .price { font-size: clamp(2rem, 3vw, 3rem); font-weight: 800; color: var(--text-main); background: var(--color-yellow); padding: 8px 30px; border-radius: var(--radius-pill); display: inline-block; border: 3px solid var(--text-main); transform: rotate(-3deg); margin-bottom: 20px; box-shadow: 4px 4px 0px var(--text-main); transition: var(--transition-bounce); cursor: pointer; }\n .promo-text .price:hover { transform: translateY(-8px) rotate(-5deg) scale(1.08); background-color: var(--color-pink); color: white; }\n\n \/* =======================================================\n FOUNDER\n ======================================================= *\/\n .founder-wrapper { background-color: white; border-radius: var(--radius-xl); padding: 50px; display: grid; grid-template-columns: 1fr 2fr; gap: 50px; align-items: center; border: 4px solid var(--text-main); box-shadow: 8px 8px 0px var(--text-main); transition: var(--transition-bounce); }\n .founder-wrapper:hover { transform: translateY(-6px) scale(1.01); box-shadow: 12px 12px 0px var(--text-main); }\n .founder-img { width: 100%; max-width: 350px; object-fit: contain; margin: 0 auto; display: block; transition: var(--transition-bounce); }\n .founder-wrapper:hover .founder-img { transform: scale(1.03); }\n .founder-info h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 8px; color: var(--text-main); }\n .founder-info .role { color: var(--text-main); font-weight: 800; font-size: 1.1rem; font-family: 'Fredoka', sans-serif; margin-bottom: 24px; display: inline-block; background: var(--color-yellow); padding: 6px 16px; border-radius: var(--radius-pill); border: 2px solid var(--text-main); }\n .founder-info p { font-size: 1.05rem; font-weight: 600; margin-bottom: 16px; line-height: 1.7; color: var(--text-muted); }\n .founder-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }\n .f-tag { background-color: var(--color-blue); color: white; padding: 6px 16px; border-radius: var(--radius-pill); font-size: 0.95rem; font-weight: 800; border: 3px solid var(--text-main); box-shadow: 3px 3px 0px var(--text-main); }\n\n \/* =======================================================\n TUTOR \n ======================================================= *\/\n .tutor-section { background-color: white; border-top: 4px solid var(--text-main); border-bottom: 4px solid var(--text-main); overflow: hidden; padding-bottom: 80px; position: relative;}\n .tutor-slider { scroll-snap-type: x mandatory; }\n .tutor-card { width: 280px; flex-shrink: 0; border: 4px solid var(--text-main); border-radius: var(--radius-xl); box-shadow: 6px 6px 0px var(--text-main); background-color: white; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 30px; overflow: hidden; transition: var(--transition-bounce); scroll-snap-align: center; cursor: pointer; }\n .tutor-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 10px 10px 0px var(--text-main); }\n .tutor-info h3 { font-size: 1.5rem; color: var(--text-main); margin-bottom: 6px; }\n .tutor-info p { font-size: 0.9rem; font-weight: 700; color: white; background: var(--text-main); padding: 4px 14px; border-radius: var(--radius-pill); display: inline-block; margin-bottom: 20px; border: 2px solid var(--text-main);}\n .tutor-img { width: 85%; height: 230px; object-fit: contain; object-position: bottom; margin-top: auto; border-radius: 0; }\n \n .tutor-yellow { background-color: var(--color-yellow); }\n .tutor-pink { background-color: var(--color-pink); }\n .tutor-blue { background-color: var(--color-blue); }\n .tutor-green { background-color: var(--color-green); }\n\n \/* =======================================================\n PARTNER SECTION (MARQUEE HALUS + HOVER)\n ======================================================= *\/\n .partner-section { background-color: #FAFAFA; border-top: 4px solid var(--text-main); border-bottom: 4px solid var(--text-main); overflow: hidden; padding-bottom: 60px; position: relative;}\n .partner-slider { scroll-snap-type: none !important; } \n .partner-slider .partner-card { width: 250px; scroll-snap-align: none !important; cursor: default; height: 120px; padding: 20px; justify-content: center; }\n .partner-logo { height: 60px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(100%) opacity(0.5); transition: var(--transition-bounce); }\n .partner-card:hover .partner-logo { filter: grayscale(0%) opacity(1); transform: scale(1.1); }\n\n \/* =======================================================\n VIDEO & GALERI\n ======================================================= *\/\n .video-wrapper { max-width: 900px; margin: 0 auto; background: white; border: 4px solid var(--text-main); border-radius: var(--radius-xl); padding: 20px; box-shadow: 8px 8px 0px var(--text-main); transition: var(--transition-bounce); }\n .video-wrapper:hover { transform: translateY(-6px) scale(1.01); box-shadow: 12px 12px 0px var(--text-main); }\n .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-md); border: 3px solid var(--text-main); }\n .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }\n\n .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }\n .gallery-item { border-radius: var(--radius-xl); overflow: hidden; border: 4px solid var(--text-main); box-shadow: 6px 6px 0px var(--text-main); aspect-ratio: 4\/3; transition: var(--transition-bounce); background: white; will-change: transform;}\n .gallery-item:nth-child(odd):hover { transform: translateY(-10px) rotate(3deg) scale(1.03); box-shadow: 10px 10px 0px var(--text-main); }\n .gallery-item:nth-child(even):hover { transform: translateY(-10px) rotate(-3deg) scale(1.03); box-shadow: 10px 10px 0px var(--text-main); }\n .gallery-item img { width: 100%; height: 100%; object-fit: cover; }\n\n \/* =======================================================\n BLOG\n ======================================================= *\/\n .blog-section { background-color: #FAFAFA; border-top: 4px solid var(--text-main); }\n .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }\n .blog-card { background: white; border: 3px solid var(--text-main); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 6px 6px 0px var(--text-main); transition: var(--transition-bounce); display: flex; flex-direction: column; will-change: transform; cursor: pointer;}\n .blog-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 10px 10px 0px var(--text-main); }\n .blog-img { width: 100%; height: 180px; object-fit: cover; border-bottom: 3px solid var(--text-main); border-radius: 0; }\n .blog-content { padding: 24px; display: flex; flex-direction: column; flex: 1; }\n .blog-category { font-size: 0.8rem; font-weight: 700; color: var(--color-pink); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }\n .blog-content h3 { font-size: 1.3rem; color: var(--text-main); margin-bottom: 10px; line-height: 1.3; }\n .blog-content p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; flex: 1; line-height: 1.5; }\n .blog-cta { text-align: center; margin-top: 50px; }\n\n \/* =======================================================\n LEADS \/ DAFTAR SECTION\n ======================================================= *\/\n .daftar-section { background-color: white; background-image: radial-gradient(var(--text-muted) 1px, transparent 1px); background-size: 30px 30px; border-top: 4px solid var(--text-main); }\n .form-wrapper { background: white; border-radius: var(--radius-xl); border: 4px solid var(--text-main); box-shadow: 10px 10px 0px var(--text-main); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }\n .form-left { background: var(--color-yellow); padding: 50px; border-right: 4px solid var(--text-main); display: flex; flex-direction: column; justify-content: center; }\n .form-left h2 { font-size: 2.8rem; line-height: 1.1; margin-bottom: 16px; color: var(--text-main); }\n .form-left p { font-size: 1.1rem; font-weight: 600; color: var(--text-main); margin-bottom: 20px; }\n .form-right { padding: 50px; background: white; }\n .form-right h3 { color: var(--text-main); }\n .form-group { margin-bottom: 20px; }\n .form-control { width: 100%; padding: 16px; border-radius: var(--radius-md); border: 3px solid var(--text-main); font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 600; transition: var(--transition); background-color: #F8FAFC; color: var(--text-main); }\n .form-control:focus { outline: none; background-color: white; border-color: var(--color-blue); box-shadow: 4px 4px 0px var(--color-blue); }\n .form-control::placeholder { color: #94A3B8; }\n\n \/* =======================================================\n FAQ SECTION\n ======================================================= *\/\n .faq-section { background-color: white; border-top: 4px solid var(--text-main); }\n .faq-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }\n .faq-item { background: white; border: 3px solid var(--text-main); border-radius: var(--radius-lg); box-shadow: 4px 4px 0px var(--text-main); overflow: hidden; transition: var(--transition); }\n .faq-question { width: 100%; text-align: left; padding: 20px 24px; font-size: 1.2rem; font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--text-main); background: white; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); }\n .faq-question:hover { background: var(--color-yellow); }\n .faq-icon { font-size: 1.5rem; transition: transform 0.3s ease; color: var(--text-main); font-weight: 800; }\n .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: white; }\n .faq-answer p { padding: 0 24px 20px; color: var(--text-main); font-weight: 600; font-size: 1.05rem; line-height: 1.6; }\n .faq-item.active .faq-question { background: var(--color-yellow); border-bottom: 2px dashed var(--text-main); }\n .faq-item.active .faq-icon { transform: rotate(45deg); }\n\n \/* =======================================================\n FOOTER & SOSIAL MEDIA TAB\n ======================================================= *\/\n footer { background-color: white; color: var(--text-main); padding: 80px 0 30px; border-top-left-radius: 60px; border-top-right-radius: 60px; border-top: 4px solid var(--text-main); position: relative; }\n .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }\n .footer-brand { font-size: 1.8rem; font-weight: 800; margin-bottom: 16px; color: var(--color-blue); }\n .footer-links h4 { margin-bottom: 20px; font-size: 1.3rem; color: var(--color-pink); }\n .footer-links li { margin-bottom: 10px; font-weight: 600; font-size: 1.05rem; color: var(--text-main);}\n .footer-links li a:hover { color: var(--color-blue); }\n .footer-bottom { text-align: center; padding-top: 24px; border-top: 2px dashed var(--text-muted); font-weight: 600; color: var(--text-muted); font-size: 0.9rem;}\n \n .social-tab {\n display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;\n background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);\n color: white; padding: 10px 24px; border-radius: var(--radius-pill);\n font-weight: 700; font-size: 1rem; border: 3px solid var(--text-main);\n box-shadow: 4px 4px 0px var(--text-main); transition: var(--transition-bounce);\n cursor: pointer;\n }\n .social-tab:hover { transform: translateY(-4px) scale(1.05); box-shadow: 6px 6px 0px var(--text-main); color: white; }\n\n .wa-float { position: fixed; bottom: 30px; right: 30px; background-color: #06D6A0; color: var(--text-main); width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; border: 4px solid var(--text-main); box-shadow: 4px 4px 0px var(--text-main); z-index: 1000; transition: var(--transition-bounce); cursor: pointer;}\n .wa-float:hover { transform: scale(1.1) rotate(10deg); }\n\n \/* =======================================================\n ANIMATION (SCROLL REVEAL)\n ======================================================= *\/\n .reveal { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform, opacity; }\n .reveal.active { opacity: 1; transform: translateY(0); }\n\n \/* =======================================================\n RESPONSIVE\n ======================================================= *\/\n @media (max-width: 1024px) {\n .hero-grid { grid-template-columns: 1fr; text-align: center;}\n .hero-desc { margin: 0 auto 30px auto; }\n .hero-stats { justify-content: center; }\n .founder-wrapper { grid-template-columns: 1fr; text-align: center; }\n .founder-tags { justify-content: center; }\n .roadmap-grid { grid-template-columns: repeat(2, 1fr); }\n .roadmap-grid::before { display: none; }\n .form-wrapper { grid-template-columns: 1fr; }\n .form-left { border-right: none; border-bottom: 4px solid var(--text-main); text-align: center;}\n }\n @media (max-width: 768px) {\n .hero { min-height: auto; padding-top: 130px; padding-bottom: 50px; } \n .nav-links { display: none; }\n .nav-inner { padding: 10px 16px; }\n .brand-text { display: none; } \n .hero-cards { grid-template-columns: 1fr; text-align: left; }\n .promo-banner { flex-direction: column; text-align: center; gap: 24px; padding: 30px 20px; }\n .footer-grid, .roadmap-grid { grid-template-columns: 1fr; gap: 30px;}\n .hero-stats { flex-direction: column; gap: 16px; }\n .popup-box { padding: 30px 20px; }\n .slider-btn { display: none; } \n .form-right, .form-left { padding: 30px 20px; }\n .app-workspace { grid-template-columns: 1fr; height: auto; }\n }\n<\/style>\n<\/head>\n<body>\n\n \n <div class=\"popup-overlay\" id=\"welcomePopup\">\n <div class=\"popup-box\">\n <button class=\"popup-close\" id=\"closePopup\" aria-label=\"Tutup\">×<\/button>\n <div class=\"popup-badge\">\ud83c\udf81 Promo Terbatas<\/div>\n <h3>Mulai Perjalanan Digitalmu Sekarang!<\/h3>\n <p>Dapatkan Kelas Trial Interaktif dan Harga Spesial khusus pendaftaran hari ini.<\/p>\n <div class=\"popup-img-wrapper\" style=\"font-size: 4rem; background: var(--color-yellow); border-radius: 50%; width: 120px; height: 120px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--text-main); box-shadow: inset 0px -5px 0px rgba(0,0,0,0.1);\">\ud83d\ude80<\/div>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20mendapatkan%20info%20dari%20website%20dan%20ingin%20mendaftar%20kelas%20dengan%20promo%20spesial!\" class=\"btn btn-popup\" target=\"_blank\" rel=\"noopener noreferrer\">\n Daftar via WhatsApp \u2794\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"popup-overlay\" id=\"tutorModal\">\n <div class=\"popup-box\" style=\"text-align: left;\">\n <button class=\"popup-close\" onclick=\"closeTutorModal()\" aria-label=\"Tutup\">×<\/button>\n \n <div class=\"tutor-modal-header\">\n <img decoding=\"async\" id=\"tm-img\" src=\"\" class=\"tutor-modal-img\" alt=\"Foto Tutor\">\n <div>\n <h3 id=\"tm-name\" style=\"margin-bottom: 8px; color: var(--text-main);\">Nama Tutor<\/h3>\n <span id=\"tm-role\" class=\"popup-badge\" style=\"margin-bottom: 0;\">Kelas Diajar<\/span>\n <\/div>\n <\/div>\n \n <p id=\"tm-desc\" style=\"font-size: 1.05rem; font-weight: 600; color: var(--text-main); line-height: 1.6;\">\n Deskripsi detail tentang tutor akan muncul di sini. Membantu memberikan penjelasan kepada siswa dan orang tua.\n <\/p>\n \n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20tanya%20jadwal%20kelas!\" class=\"btn btn-primary\" style=\"width: 100%; margin-top: 10px;\" target=\"_blank\">Tanya Jadwal Tutor \u2794<\/a>\n <\/div>\n <\/div>\n\n \n <nav>\n <div class=\"container nav-inner\">\n <div class=\"nav-brand\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/03\/UrbanDigitalHub_Logo_Only.png\" alt=\"Logo MentorOnline\" class=\"brand-logo\" fetchpriority=\"high\" onerror=\"this.src='https:\/\/via.placeholder.com\/44x44\/FFD166\/1E293B?text=MO'\">\n <span class=\"brand-text\">MentorOnline<\/span>\n <\/div>\n <div class=\"nav-links\">\n <a href=\"#program\">Program<\/a>\n <a href=\"#tutor\">Tutor<\/a>\n <a href=\"#simulasi\">Kurikulum<\/a>\n <a href=\"#galeri\">Galeri<\/a>\n <a href=\"https:\/\/mentoronline.asia\/blog\/\">Blog<\/a>\n <a href=\"https:\/\/mentoronline.asia\/affiliasi-guru\/\" class=\"nav-highlight\">Afiliasi Guru \ud83c\udf1f<\/a>\n <\/div>\n <a href=\"#daftar\" class=\"btn btn-primary\">Mulai Kelas Trial<\/a>\n <\/div>\n <\/nav>\n\n \n <section class=\"hero\">\n <div class=\"container hero-grid\">\n <div class=\"reveal\">\n <div class=\"hero-badge\">\ud83d\ude80 Mentoring Intensif 1-on-1<\/div>\n <h1 class=\"hero-title\">\n Siapkan Skill Digital Masa Depanmu <span>Mulai Hari Ini!<\/span>\n <\/h1>\n <p class=\"hero-desc\">\n Belajar langsung dari praktisi industri lewat kelas interaktif yang menyenangkan. Bangun portofolio digitalmu dan jadilah talenta yang siap bersaing!\n <\/p>\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start;\">\n <a href=\"#program\" class=\"btn btn-primary\">Eksplor Program \u2794<\/a>\n <\/div>\n \n \n <div class=\"hero-stats\">\n <div class=\"stat-item\" style=\"background-color: var(--color-yellow); color: var(--text-main);\">\n <h4 style=\"color: var(--text-main);\">\ud83d\udc68\u200d\ud83c\udf93 100+<\/h4>\n <p>Alumni Sukses<\/p>\n <\/div>\n <div class=\"stat-item\" style=\"background-color: var(--color-pink); color: white; border-color: var(--text-main);\">\n <h4 style=\"color: white;\">\ud83d\udcbb 100%<\/h4>\n <p>Project Based<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-cards reveal\" id=\"program\">\n <div class=\"h-card c-yellow\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/kak-kiel-test-1.jpg\" alt=\"Kelas Gambar\" class=\"h-card-img\" fetchpriority=\"high\">\n <div class=\"h-card-content\">\n <h3>\ud83c\udfa8 Gambar & Ilustrasi<\/h3>\n <p>Ciptakan IP karaktermu sendiri dari sketsa hingga mahakarya digital.<\/p>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20mendaftar%20Kelas%20Gambar%20&%20Ilustrasi.%20Mohon%20info%20selanjutnya!\" class=\"btn btn-primary\" style=\"padding: 10px; font-size: 1rem; width: 100%; border: 2px solid var(--text-main);\" target=\"_blank\" rel=\"noopener noreferrer\">Pilih Kelas Ini<\/a>\n <\/div>\n <\/div>\n <div class=\"h-card c-pink\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/bizant-test1.png\" alt=\"Kelas Coding\" class=\"h-card-img\" fetchpriority=\"high\">\n <div class=\"h-card-content\">\n <h3>\ud83d\udcbb Dasar Programming<\/h3>\n <p>Asah logika komputasi dan bangun game atau aplikasimu sendiri!<\/p>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20mendaftar%20Kelas%20Dasar%20Programming.%20Mohon%20info%20selanjutnya!\" class=\"btn btn-secondary\" style=\"padding: 10px; font-size: 1rem; width: 100%; background: white; color: var(--text-main); border: 2px solid var(--text-main);\" target=\"_blank\" rel=\"noopener noreferrer\">Pilih Kelas Ini<\/a>\n <\/div>\n <\/div>\n <div class=\"h-card c-blue\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-12-pukul-17.31.31.png\" alt=\"Kelas UI\/UX\" class=\"h-card-img\" loading=\"lazy\">\n <div class=\"h-card-content\">\n <h3>\ud83d\udcf1 Desain UI\/UX<\/h3>\n <p>Rancang antarmuka visual aplikasi masa depan standar industri.<\/p>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20mendaftar%20Kelas%20Desain%20UI\/UX.%20Mohon%20info%20selanjutnya!\" class=\"btn btn-secondary\" style=\"padding: 10px; font-size: 1rem; width: 100%; background: var(--color-yellow); color: var(--text-main); border: 2px solid var(--text-main);\" target=\"_blank\" rel=\"noopener noreferrer\">Pilih Kelas Ini<\/a>\n <\/div>\n <\/div>\n <div class=\"h-card c-green\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/capcut.jpg\" alt=\"Kelas Video Editing\" class=\"h-card-img\" loading=\"lazy\">\n <div class=\"h-card-content\">\n <h3>\ud83c\udfac Video Editing<\/h3>\n <p>Pelajari teknik editing sinematik dan jadilah kreator konten andal.<\/p>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20mendaftar%20Kelas%20Video%20Editing.%20Mohon%20info%20selanjutnya!\" class=\"btn btn-primary\" style=\"padding: 10px; font-size: 1rem; width: 100%; border: 2px solid var(--text-main);\" target=\"_blank\" rel=\"noopener noreferrer\">Pilih Kelas Ini<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"partners\" class=\"section-pad partner-section\">\n <div class=\"container\">\n <div class=\"section-header reveal\" style=\"margin-bottom: 40px;\">\n <h2>Dipercaya & Berkolaborasi Bersama \ud83e\udd1d<\/h2>\n <p>Kami bekerja sama dengan berbagai pihak untuk memberikan kualitas layanan terbaik.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"slider-wrapper reveal\">\n <button class=\"slider-btn prev\" aria-label=\"Previous\" onclick=\"slidePartner(-280)\">❮<\/button>\n <div class=\"slider-content partner-slider\" id=\"partnerSlider\">\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/sp.png\" alt=\"Partner 1\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/gpa.webp\" alt=\"Partner 2\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n \n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/tk-atirah-racing.jpeg\" alt=\"Partner 4\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n \n \n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/sp.png\" alt=\"Partner 1\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/gpa.webp\" alt=\"Partner 2\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-12-pukul-20.11.18.png\" alt=\"Partner 3\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/tk-atirah-racing.jpeg\" alt=\"Partner 4\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <\/div>\n <button class=\"slider-btn next\" aria-label=\"Next\" onclick=\"slidePartner(280)\">❯<\/button>\n <\/div>\n <\/section>\n\n \n <section id=\"game-demo\" class=\"section-pad interactive-game-section\">\n <div class=\"container reveal\">\n <div class=\"section-header\" style=\"margin-bottom: 40px;\">\n <h2>Cobain Keseruan Belajar Coding! \ud83c\udfae<\/h2>\n <p>Tarik balok panah dan bantu kelinci mendapatkan wortel. Seperti inilah serunya metode belajar interaktif kami!<\/p>\n <\/div>\n\n \n <div class=\"mentor-app\">\n \n <canvas id=\"confettiCanvas\"><\/canvas>\n <div class=\"cheer-popup\" id=\"cheerPopup\">\n <span id=\"cheerIcon\">\ud83d\udcaa<\/span>\n <span id=\"cheerMsg\">Never Give Up! You Can Do It!<\/span>\n <\/div>\n <div class=\"game-modal-backdrop\" id=\"startModal\">\n <div class=\"game-modal-box\">\n <div style=\"margin: 0 auto 20px; width: 80px; height: 80px; background: var(--color-yellow); border-radius: 50%; border: 3px solid var(--text-main); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; box-shadow: inset 0px -5px 0px rgba(0,0,0,0.1);\">\ud83d\udc30<\/div>\n <h2 class=\"game-modal-heading\">MentorOnline 2.5D Castle!<\/h2>\n <p class=\"game-modal-desc\">\n Ayo bantu Kelinci melompat di istana kuning! Rangkai balok puzzle arah di sebelah bendera hijau untuk memetik wortel lezat.\n <\/p>\n <button class=\"btn-game-modal-start\" onclick=\"mulaiPetualangan()\">\n <span>\ud83d\udea9\ud83d\ude80<\/span> AYO KITA MULAI!\n <\/button>\n <\/div>\n <\/div>\n <div class=\"game-modal-backdrop\" id=\"victoryModal\" style=\"display: none;\">\n <div class=\"game-modal-box\">\n <div style=\"font-size: 4rem; line-height: 1; margin-bottom: 8px;\">\ud83c\udf89\ud83e\udd55\u2728<\/div>\n <h2 class=\"game-modal-heading\" id=\"vicTitle\">Great Job! You Did It!<\/h2>\n <p class=\"game-modal-desc\" id=\"vicDesc\">\n Kelinci sukses melompat dan memakan wortel lezat! Level berikutnya sekarang sudah terbuka!\n <\/p>\n <button class=\"btn-game-modal-start\" id=\"btnNextLevel\" onclick=\"lanjutLevel()\">\n <span>\ud83c\udf1f<\/span> LANJUT KE LEVEL BERIKUTNYA!\n <\/button>\n <\/div>\n <\/div>\n\n <header class=\"game-navbar\">\n <div class=\"nav-left\">\n <div class=\"game-brand-container\">\n <span class=\"game-brand-name-text\">Coding Simulation<\/span>\n <\/div>\n <\/div>\n <div class=\"nav-controls\">\n <button class=\"btn-action-ctrl btn-flag-green\" id=\"btnFlag\" title=\"Jalankan Kode\" onclick=\"jalankanProgram()\"><span>\ud83d\udea9<\/span><\/button>\n <button class=\"btn-action-ctrl btn-stop-red\" id=\"btnStop\" title=\"Hentikan \/ Ulangi\" onclick=\"resetStage()\"><span>\ud83d\uded1<\/span><\/button>\n <\/div>\n <div class=\"nav-right\">\n <button class=\"btn-bgm\" id=\"btnMusic\" onclick=\"toggleBGM()\">\n <span id=\"musicIcon\">\ud83d\udd08<\/span> <span id=\"musicLabel\">BGM OFF<\/span>\n <\/button>\n <div class=\"level-pills\">\n <span class=\"level-label\">Level:<\/span>\n <button class=\"lvl-btn active\" id=\"lvlBtn-1\" onclick=\"klikPilihLevel(1)\">1<\/button>\n <button class=\"lvl-btn locked\" id=\"lvlBtn-2\" onclick=\"klikPilihLevel(2)\">2<\/button>\n <button class=\"lvl-btn locked\" id=\"lvlBtn-3\" onclick=\"klikPilihLevel(3)\">3<\/button>\n <button class=\"lvl-btn locked\" id=\"lvlBtn-4\" onclick=\"klikPilihLevel(4)\">4<\/button>\n <button class=\"lvl-btn locked\" id=\"lvlBtn-5\" onclick=\"klikPilihLevel(5)\">5<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"app-workspace\">\n \n <section class=\"stage-card\">\n <div class=\"stage-header-bar\">\n <div class=\"stage-title\"><span>\ud83c\udff0 Panggung Istana 2.5D<\/span><\/div>\n <\/div>\n <div class=\"speech-wrap\">\n <div class=\"speech-avatar\" id=\"kikoAvatar\">\ud83d\udc30<\/div>\n <p class=\"speech-text\" id=\"kikoSpeech\">\n \"Halo sahabat cilik! Pasang balok panah di samping bendera hijau ya!\"\n <\/p>\n <\/div>\n <div class=\"arena-viewport\">\n <div class=\"bg-cloud cloud-1\"><\/div>\n <div class=\"bg-cloud cloud-2\"><\/div>\n <div class=\"bg-cloud cloud-3\"><\/div>\n <div class=\"bg-balloon\">\ud83c\udf88<\/div>\n <div class=\"mini-tree tree-1\">\ud83c\udf32<\/div>\n <div class=\"mini-tree tree-2\">\ud83c\udf32<\/div>\n <div class=\"mini-tree tree-3\">\ud83c\udf32<\/div>\n <div class=\"water-stream\"><\/div>\n \n <div class=\"orbit-hud\">\n <span class=\"orbit-hint\">\ud83d\udd04 Putar 360\u00b0:<\/span>\n <button class=\"orbit-btn\" onclick=\"putarManual(-45)\">\u21b6 Kiri<\/button>\n <button class=\"orbit-btn\" onclick=\"resetSudutKamera()\">\ud83c\udfaf Normal<\/button>\n <button class=\"orbit-btn\" onclick=\"putarManual(45)\">\u21b7 Kanan<\/button>\n <\/div>\n\n <div class=\"iso-world\" id=\"isoWorld\">\n <div class=\"iso-castle-base\">\n <div class=\"sign-badge sign-start\">START \ud83d\udea9<\/div>\n <div class=\"iso-grid\" id=\"isoGrid\"><\/div>\n <div class=\"rabbit-3d-actor\" id=\"rabbit3DActor\">\n <div class=\"rabbit-shadow-3d\"><\/div>\n <div class=\"rabbit-body-3d\" id=\"rabbitSprite\"><img decoding=\"async\" class=\"rabbit-asset-img\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAAEBCAYAAACexdu5AABD+UlEQVR4nO29eZSU1Z3\/\/773PkttvUADLYuyNCCIyKICyuEoxhiyCHM0MTNqcjyJJqNZZrJO5mRill8cJ3N04pyZRLPNHBOXJKgzRuNEvxoNWRQVAYUG2ZtuoJulu2uvZ7v398fT9+nqpml6qep6qrkvTx2BXupW1X3ez+d+ViKEgEKhUAAArfQCFApFeFCCoFAoApQgKBSKACUICoUiQAmCQqEIUIKgUCgClCAoFIoAJQgKhSJACYJCoQhQgqBQKAKUICgUigAlCAqFIkAJgkKhCFCCoFAoApQgKBSKACUICoUiQAmCQqEIUIKgqHq6O4+rtl8lQgmCoup57tln8OKTjwtkOpUwjBIlCIqqpu1Yi2jZvw+ZjqPY8sqLlV5O1aMEQVHV7Hj7HVj5LGpMDSfaDuPEwWZlJYwCJQiKqqbt4AEIx4amCZg6wZ7t2yu9pKpGCYKiqjl0qBUa0+B6HojrovvoEXTueUdZCSNECYKiatmzZ4\/I5CxoRgJugUMnGgzXwaHmdyq9tKpFCYKiajlx4gQ4KByPw\/F8oyBhaug8dhSFoy3KShgBShAUVUvr4VZQATiOA9v1IABwAgjPRfO2rZVeXlWiBEFRtZw4eQIA4HkebM8DJ\/6\/m7qG462HYbUfVlbCMFGCoKhaurq6oOsMnLsQxLcOOHdBhAeN29jfvKPSS6w6lCAoqhbPcaFRCkIICo4NUN9EIILDEB7Sp05VeIXVhxIERdViWRY0TQelGizLgb+dKagANADpkx1obd6hjg3DQAmComqxXce3CiiB7XjgoCBgoABYj5VweN+uSi+zqlCCoKhKmpubBeccHgQ8IWA5Nrgg8GMNABUcBjiyR1pUotIwUIKgqGo45xCCwPEEHMfr8zUiOEghh8O7lZUwVJQgKKoaQRg4AVyXo+A4oH1sAYp4NILjR9qQO9aqrIQhoARBUdXQnsiCBwLP5QB8y0DmJAjPg7BtHN77bqWWWFUoQVBUJUII2LYNLjyAEnBGkHMcCMEhBIcHDk9wMFDETQOHdu+Ac1wlKp0NJQiKqkTXdVBKIYTw\/w+KgmODEw5OOAQBBAEIIdAgoDkWju7fV+llhx4lCIqqZP78+UTXdQjhAZTCg0C+UDjt+zjlYAwwhEDb3r2wOzuUlTAIShAUVQulvdvXEwQFxwVAIQQBIRSiJ4uRCw9x00Dy1El0HD5cuQVXAUoQFFWLpmkghMHzBAQBPFeAUBMQGiAoKDiE8CCEgOu4SMSiaNmnnIuDoQRBUbVEo1EAvp+AUgpPEOQtD6LfthZCgBOACqCzvR3J\/XvVseEMKEFQVC21tbXgngfGGChl4NxDtpAHmP9niYDvYAQA3RFoP3ioIuutBpQgKKqWaDQKzv3cA0r8tOWcbQVVj32TlDgoOHQIHG9thdd1SlkJA6AEQVG1NDY2ggt5XVNwADnHgkcBSlnw7wB6EpU4YoaOQqYb7Udaxn7BVYASBEXVEo\/HAQAu9\/yiJkpQ8BzYwgOhBGQAG4AyANzDiaNHx3axVYISBEXVMn36dED4PRAA3wqwHBsO9yC48J2NAn2+zuEBVOBIywGI9Al1bOiHEgRF1XLxxRcTwI8iCCEgCIXFBRxOe0wBCggKInr9CQWnANPQ4GQzOLb\/YAVXH06UICiqmkQiASH9CILCcjUkszY4ZeAQ8OCLBRcE4AI6YyCug1oGtB86UNnFhxAlCIqq5rzJUwAuwDkHJxSc6sg7\/p89wU\/7fgY\/YUmDQCHZVYEVhxslCIqqZuasmeAeB2PM9xtQimzegst5r+UwAIxSZFNpdO1Vw2GLUYKgqGrOmzwJEG6vHwFAwbH9\/ggyG6kfhPjbnlCBjmMq2lCMEgRFVTNnzhyYpgnHcQBG4QEo2A660hkY8WjQKIWKvolKhFAwEHS0HgIKSWUl9KAEQVHVNEyZTGoTcVABMMZAiJ+glHd9K2EwGBGwChl4KeVLkChBUFQ9s2bOgsddECJAGAWHQCaXh8tlDcPpzkUqfCtB2JY6NhShBEFR9cxqmg23p8yZEAIOiqzDYYP1JC4NDOmJNnQeOzaGqw03ShAUVc+8efMRMWMQgsCyLHDGkHQpum2AE+rPcxJ9HwCgccB0gVTHSSCj\/AiAP\/FKUeW0tx0R7S37oVEKTzDEErWomViPSCyG+okTBj9IjwOmnDeVTJw4UXR0dPhNU5gGx\/XQmcpiSn1kUCtBJwyFXAFuKg0tUTeGqw4nShDGAfve3ooj7zbDSWeRzhXQmckgxV3QqIn6xESRqKvF5MYpmDCpAVOnT0djYyMmT24cV0Ixb948tLW1wdR1aITC4g66UknwCbGgOQohfrYiAAjKAUEhCOC6FtqPtmHGtBkVfhWVRwnCOCBuGohTgsnTJsMDgQ2CE\/ksOlNpJJNJHD3Zjr17msEpAdV0mNE4Jk+eLBobp2LRokVYvnx51YtDU1MTXn75ZXCPAz2Vz57rwiN+JwQQgPWMeQPhwf9d1wXTDbQfbcUMrKrM4kOEEoRxgGFqYMQBdwQgCDRQTNE0TG5ogNdQj65cDseT3ejMW8h7ApZVQMuBFrS1HMVrr72Gxx57TDQ1NWH27NlYt25dVYrDsmXLyKRJk0Qul4PtuWCGDsez0Z3NIlGXgLBtgAsQSgAQgPjDXExTh+O4yKe6gFxSIFZXla+\/VChBGAfEa+N+cR9xAQhQoYFyDYA\/o2ByzERD7XTkPIHWjk6cTGeR81xoEQM2MUE1hj179mDPnj146aWXxMyZM7F48WJcddVVVXVxzJgxA83NzYhGoyCEwCrkkcrlYSXi0EBBCEDhgggeWAmcu2AE8KwCvK6TYLFz24+gBGEcMHFCAxilAHxB4ITDj71TcM8G4wSMA1HXw8LGSchNrMOpTAaHT5xCzgFYNA7TNMEYg+d5OHjwIPbt24dXXnlFLFq0CB\/+8IerQhguueQSNDc3B38XBEimU8hPrEWcMrAB4giu8ECpAdsu4ETHcZw3vWkMVxw+VNhxHBCvqYOgfk9BTuDf\/QgHETYYBSgENMER1yiInUUELs6fWIPL5s\/BxRdMRQ0T4LkU3EIW3LWhM4poNIp0Oo1NmzbhC3\/39+IXD\/9ctBw8GOrQ3MqVK4mmaXAcx\/cNGDqSlgPb8\/WM9DReLS5xkAVQnmMj3a0yFpUgjANY\/WRS39iIgvCtAo0DmnDBCAcjFKAUnHB48MAooFGAug4i3MLs2iguu2AKLpl5HibHdcDOQaMAuAedaaiJ1cBgBra88QZ+9MOH8PB\/\/0ycOBHe6UdNTU3wPA+e54FQDVlb4EQqDY1QCM\/xjws9UKCnzRqHoVGcOKkSlJQgjBMmNjb6nYJ6Yu4EHATy6NAXKjgYAE0AumshDg\/Ta2NYOKMRF86YCmZlwZwcNOFCg4Cu66iJxiE8D2+89ibuvedf8Pzzz4dSFC6\/\/HLYtg1N0+BxgBgmTnZnYDk2CCXoXwDJKAPh\/ntlFbJwkud2WzUlCOOEaRfMAZh22oY\/G5z449NNj6OOA7NrYrhs9vmYmtAR4QV4Th7CcwHCoTENtbW1oIThiSeewj3fvVfseXdfqC6gSy+9lNTX1\/tHBkqhMYZMPodkwQaNRsFJ3y1PSE\/LdkJg5Qvo6jy3jw1KEMYJ0boJaGichuAjFf5EZD6Ej5gKgAkOnXMYnoMaJnDR+dMxf\/oU1DIOk9vwrAK4a0P2KZzUMAUdxzvw0I8ewm9+82yoRGHBggWwLAtez3\/MNHAqk0HeQ+9UJ0GDBq2MUDDuvw+5VLqia680ShDGC4kpZNJ5M5DNF+B5Ag53g7tfMYRQEJnfD0AHASM9LcuFA40KGPBgOHk0RnQsPf88zJqQQI3GQAAIzsEMf+pyNGpC1xl+\/\/sX8YMf\/CA0orBo8cUAJb0OQ3Ac60qiQFiPQNKeFms9zkZCwAiFJgi6O09WcOWVRwnCOGLSedPBdBOE6dA1E67nDvlnBeHBcYMKgHFA4y7iFJg5uR7zpjWiViPgTgHctgAuQKkGxhgYY9i\/fz++8pWviL17Kz83cdmSpWTqtGnI2xYIY+BUgwWK490p\/8jQr7aBCP+hCcDO5iu06nCgBGEcUTt7AZk4aYrfPQgAo\/oZv5cT3u+B4OGRnqMG0UAYAYWLSQmGpXPPx4z6CBIahw4CeASeK2CaJkzThOu6ePDBB\/Haa69VXBQWXLgAACAogaAMNiE40Z0ecBAsADAQUFBkkqkxX2uYUIIwzmi8YBbsHtNY188sCGek5+4pCIUQHNx1IZwCmGcjRh1cMud8zGqoRZw40LgFgt5mpowx6LqORx99FP\/7v\/9bUVFYfMliQFBw7o+KJ4aJZD4Ph1I4lAbCUDyzAeDI51JAuqviglYplCCMM2ZcvBieYcLigOfJ3P1epO+ACnrag4GBAr6Tjfj\/1yiDwQzooIDrQnMLOH9CFAsaa9CguxB23k+I4i5Yj89C13W89ML\/w8P\/\/bOKXVjz5jSRufPmwrM5rIIDQgg8CuxuOQzPMOF5AhpYIAacAGACsNPoPn6kUsuuOCp1eYzZtWuXSKVSOHnyJNKpNLqT3eCcB8k0rtv33E8IgaZpiEaj0HUdsVgMiUQCEydORCKRQG0igVgsjsmNU\/yrsXYymbngItG+cwcEoT3lvt4AKxmYgeYhAn52HxUAbAcRSmDEdCRmz4DW0YnWziSMSAwuAKppoJQiHoni1VdfRXc6Jf7u81+oSOrz0iVLsGfXbiRiUQgOeIIgabs4kcmiUdcB0ZO5KASEFE7hwc6du8cGMljvesXo2bZtm9i\/fz\/27NmDU6dOoaurC4SQ4OF5Hiil0HouJHn+l3ieF3wvpRSWZYFSCkopCCEwNB3xWAw1NTWIxkzMmX0+otyBfqoTEc8F0wAhegWhv0l4WiSC990PxXkNMsWJUOJ78ZmGjOPhWDKLve1dsCgD1XxHI0DheR4sy8KsWbPw93\/\/9xURhXvu+f9E16lT0KkOgIN7Fs6fWIfFjQ2Icg\/gfus1UAKPUKRcB\/OWX4amK99XFfUbpWbcCcI\/\/dM\/ifXr12PFihUV\/UB\/9atfiW3btuHEiRMAAMMwYJqmP1aM+5eWEAKGYfTOFBjgswgSZygNvi6EgOf5F7m8wB3HBcDhcBu1OsGqOU1ojEbBiAPw0QtCsRgILsB7Ji67rgdE4jiW83CwvQN5zqEZEdiu\/xNU05HL5TB79mz83d\/93Zh\/Jr995mnx\/PPPI2rGoDENrrAQES6WzWjEebEYhOeC9AgmpwwZx8H0hYuw6Nq\/OicFYdz4EPbv3y++9KUvic2bNyOfr0zoaNu2beL73\/+++NSnPiVeeOEFZDIZ1NTUoKamJhCDYqSFwAeZMiSPErJg50zfqzEdVNNRWz8BDhg6kikgGh1SYlL\/NRHiWwCg\/p8FJf54dUpAuO+O0yiDTjVEdB26cDEtynB502zUU4pCKgm4BVBwcNcBYwwHDx7EfffdN+Z3nxUrVkLT\/DAsJxSgGizOcTyVgaMxcMYgiN9RhQhAoxS5TGaslxkaxoUgPProo+If\/\/EfcfToUdTV1WHSpEkAgEceeUTccsst4sEHHyz7Rrz\/\/vvFj370IzQ3NyMej6O2thYA4Lpu8JAXfynp+9soHIeD6SaOdadwIpMOBpWM+PcP8vMUAKGABo6IcBHnFhbOnIEpsRiY5UCD3wXZMAwwxtDW1oZ\/\/\/d\/H1NRmNx4Hlm6dAnS2Qx0zXeZCcrQnbfQnkyDF9U3CCFABODZQ8\/fGG9UtVPxlVdeERs3bsThw4dRW1sLy7KwaNEiLFq0iHz+858XBw8ehBACXV3ly0\/\/1a9+JV566SUQQoKeApRS5HI5v+HnANmCJYVw8J7egAAgXA+gFF25NNqT3ZgwZQK0Yp+iTMohoxMm6Xyk8CspKfwjS52u45LZ09ByvButnUl4TIAaFKZpwrZt7NmzBz\/84Q\/FXXfdNWYm+YpVV2Lr1rf9SAgHAIKk7aCtqxv1iShilIAIAsr9fAS3nx\/nXKJqLYRvf\/vb4oEHHsCRI0cQi8Wg63rgpb\/99ttFa2srGhoaoOs6DMMo+fPv3LlT3H333eK5556DaZqIx+OgtCeGLwSi0WjgKCx+lBpB+g4joQBc1wE1TBzvSsEjGrwSP2\/\/SIQM3VHBoXMX9RENsxonYdakBjDbArctiJ6BrDU1Ndi1Yyd++uOfjJmlsGDBAjJnbhPS6TQIJaCaAQcEJ9NZnMpacJkOj1C\/hwQV4K4HN9k9vpxrQ6TqBKG5uVl86lOfEq+99prvWY9GA+97JBLBoUOHkM\/nEYvFgnP3hAkTSrqGX\/\/614EY1dXVgRASnO8ppacdEYof\/en\/9aF+f4AsdyYEhAhfFqgGounIFhwcaD0Bl5pwhQAjJMhGPBO9AjMwxRESQggoCAhhIMSPLBBO4OSyiHgWZk6uxcUXTIdh24BjQyN+rkNtoga7m3fgl4\/8YswuujVr1oDqGjj8pCSmRcG1CN5tO45OW4CaEXieBwYKz3HAzjIGbrxSVYKwa9cu8c\/\/\/M\/o6urC5MmTBx33LXEcBzNnzizZGv7zP\/9TvPjii6itrUUsFivZ7y05goJDw7HuJHKun47sCYHA6zDIrIIzQcXAeQr+v8mUJ\/\/vTLgwPAdT6xJYNOt8MNsCPBfCc2HbNmKxGN5880385n+fHhNRWLp0KTn\/\/PORtwpwBUCYBg4NGQ9oO96FnMshNN0XS+5BDCN3YzxRVYJw\/\/33o1AoIBqNAhggZDYAkUgEkydPDv7+8MMPi8985jPi1VdfHfZGvOeee8S2bdtQW1sLx3FGlhpcYsgZLlLAv9NnHA8tx4\/DiCXgChmq7KldGGJpdP\/JyUOFgsPwXJxfX4PFTefDcAsQsMGZQK6Qh2ZE8PIfXhmz2oerr74anPut1yn1h8IaZhTHOrvReiIF14hDgPYkYZXW+VstVI0g3HXXXeLUqVPQNC2I5fdP4hkIRlmQ\/fed73xHPPHEE2htbcXjjz8+rOf\/h3\/4B3Ho0CFEo1EUCgUAOC2rMGxwQiE0HR3dKRzp7AKLJfzipaLNfqb8h1JABIcOD9TNY1pdHItmnQ9TuDAoh6bpYD2771e\/+hV2795ddlFYvnw5mTZtWp\/QLSeAHo2h7WQK7d1Z2ITB5RyuEoTwcvfdd4tjx46htrYWjLHgA5Ue\/cGcdlxwPPPMM\/jWt74ltm7diokTJ6Kmpgbt7e1obm4+6ybcvXu3+MIXviDS6TTi8TgA3zIp54VUKjiAvOehu2Bj79EO5AiFxxg4AYTgECUWhuIkKvkQ8EC5Az1fwGRDx4VTGxETApTbcD0bTPP9Lw8\/\/PConnuoXHfddQB8X4xhGOCcw+ICBcKwt+04CkSDVlMPbcKUc9KJEHpB+OXjvxS7du1CLBYLsvOGQyKRwI4dO7Bjxw4kEgnYtg3OOfL5PFpaWs768z\/60Y\/gOA4MwxiSRRI2NNMANxhSjoeDx07AozSIShBxZudlqWHChcltzJhQgzmNDdDcAij3ENEN1NTUIJ\/P49577x0TK6G2tha2bfuDYeEfrTihcKmG5v1tcKlZ7mWEllALwo4dO8Tjv3wcpul\/QLZtD+vn5XlR0zTI9tyMsSBr8Pjx44P+\/Je\/\/GVhWRY0TQvWUE0IAnjwIDSGPAhaT3Yj63KAMQh4IMIbdji0fxTibFEJKTUe5f4gmUIOsxomYO7UKTC43\/Kdcw5N09DW1ob\/\/u\/\/LosovPPOO+LHP\/6xuPvuu0Uul\/NzEhgBBQcRPaIAilMFjn3Hzt2uSaFOTPqv\/\/ovmKYZFAANl4F+RgiBQqEA0zAHTXH+2te+JrLZLCKRCGzbDsQk7MeEPhAOx7bBNAbdjCOZSePYqRQSUyaCwYNfBem3bi8fFLzIfUk9D242jRn19fAEwYETXSCan7NRk6jD66+\/jlgsJj760Y+WxGR\/\/fXXxSuvvIK2tragu5Ou6z0JXRw0aLrK4VEKzhgOtBzBU\/\/7G3HDX60\/544NoRWEjRs3iiNHjvRUzvl3e\/nn0UAIAWMMBV5ALpcb8HseeOABkUqlwBgLPNIAqksM4EcfjB4nrGvZ0JmJfS0dqDUSmFlfCy+fAhUctCjiwM6QyShzF84Wbegf+fEHrBLICayMCf9v3MX5E+vQncvheN4C0RJwPI5oPIa\/bP4L5i+4UCxbsnTEF+SOHTvE7373u6C4TEamAH8vUdK79X3rAAD8TquEErzyyitobGwUq69YeU6JQmiPDM8++yw0bez16qGHHhI7d+4Md47BMPEvUr8tmjBMNB88hE7Lhh6vAe+x93uzCMoPBaD1ZDXOv2AaanQCcAeUETCmwdAjePLJp9B+4viIFPj73\/++ePDBB9HR0THkn5FHH6pTmKaOeDyGp556ciRPX9WEUhB+8IMfiGQyWRKLYDj89re\/FW+88Qai0Sik76Da6U0a4vAowClFHgLbD+7HKccCpzo4p0E+QzDgpadNef\/MRvnns\/kOhgITHAnKseiCaYgxX7LAAUIYTnV34ue\/+MWwft+zzz4rvvSlL4m2tjYkEgl\/vcN0mNq27Ye1Xb9sfCwcnWEilIKwadMmxOPxEUUVRsqWLVvExo0bUVNTAwDB4NOqpmfuQG\/ikn9OFoaB9nQae1qPwNNMcMGCHoMyCWmwa320FZQSKgCSz2FKTRzzZ0wF8xxQ4ddiJOIJHDh4ABuffGJIF+T3vvc98X\/\/938QQgR+J2BgP9JgMMYC57Wu62htbS2bozOMhE4QHnzwQZHL5UAphW3bZSkOGuj3\/PSnP0VNTU1wRym+s\/TP3y9+hJ5gIAmCpCQLAjQax9FkBse60+BmFC6hPeG38i6n+L1jRECDgMhnMcnUMGtiPbiwg8hETSyBV37\/Mt56660zXpC7du0SX\/va10RLSwvq6uqCIjeZozJciveZEAJ1db6jc7A1jCdCJwhbtmxBLBYDpbQs53hKKSKRCIBeB9i9994rLMs67QKvmov+LIj+Jr+g8IgGlxp4Z98BdKRT0BNx2D21DpwA\/u4\/fYZBSdclCBg0wPagOQVMm1iDGkODBgFwASE4IpEInn766QF\/\/vXXXxc\/\/OEP4ThOHzEvJZxzxONxPPHEEyX\/3WEkVIKwceNG0dHRgWg0GnQKKjWcc+RyOQjhDzF94YUXxP79+1FbW1t1UYTBkGf8YjEIjgMCINx3Mtqajp2HWnCk8xSoocOjQPlDkT6EEHiCwvU4KLcR0zxMq69BjHII7gS9ILu6uvCTn\/Qtl962bZt47LHHEIlEgjLzcqWSM8aQy+UwFo12Kk2oBOHNN99EJBLpHTRSBqeivOubpon9+\/fjd7\/73WkWw3im15\/QE1fQIrCphp2HWnAil4dNNbhU6xNmHElh05CQPg7uT6E0AUytTyCuEVDB4XGOaDSKaDSKnTt34g9\/+IMA\/BL4Rx99FLquQwgRHC\/LsV9kk1tN09Dc3IwXX3xxXItCqAThyJEjQTMTIURZFF\/2KZCpyEHl2xik744lQdSg36MXDg4\/NanAKdLcwFsH2nDCEXAjMXiCQPSOcgLhAoLL8um+k56KHyOBUv9o4jk26kyKqfU1IOBgRV2oTdPEc889hy1btohf\/\/rXcBwnqGeRmY7lQopCJBLBc889V7bnCQOhEYRnnnlGpFJj0w9fdjseD2HFUSP8wac2KLKC4s1de3G0OwMSrelpQNr7fT69mX39OzqOBEpoz8g5PxrCbRt1URPM804bMgMAjz32WBASHguLrv9zcM7xve99b9xaCaERhObm5rK0GOuPvKvEYrFxZxWMiJ6MRNkfIe9SvNW8Hy2daeSoXhR9oOiT2Epc\/1ECUQAABuofTTwPsUgE0UgEwj39d8tK00gkMuZ5KgCgaRoOHz6MJ54YWji02giNILS1tfVJLy0nkUgEuq4rQegHJxRMN+BQDW8078bBjpMoMA0O9VuPceC0qEMpHbG+R8GfNlUXS8AboLpU0zRYloVCoVARn4+u66ipqcGmTZuwffv2cScKoREEmXM+WMy\/FHkAciyafC5FD0FmIoXQTRAzht1H2rF13yGkQSEihj+rgfi9KBwXcFz\/5wgXwWP4T9v389Q4YIDC0DREDfO0blDyuDdWhWb982CKh+Q8+eT4S20OhSA0NzeLkVY0DhfTNAOzUwnC6fhdyjk4IxCGjrauFN7YvR8d6Tw8w4RDNHiCghAWDIctBQR9nZ9U+LNXB6OSYWJd19HV1YVHH310XFkJoRCEkydPwnXdMTkTyhCj7JB8riNdg7TnUEDlvxAXnHBEJtQjxTle33sAu44eR56aEHoExKGAxc\/Yz3E0UACM9x\/VHh6ktRCJRPDaa69hy5YtIVzlyAjFFZFOp4PQTrmRpqayEM4OJ4DleHCIBhsMB46fwo5DrTiZdyFiNTDqJsAjdOTxBsJ7mpkW\/QbCe7sYCVH2VOrhIq0SxljQOOfZZ5+t8KpKRygEwbIsAH68t3jwaSlMQkJI0CZM9kSUk5OrvniphPA+NoL\/gCjKz6AMNigOnezCa3tb8Oaxkzhse7A0Ey7x8xlcLoLP8EzdoDnhwQM9lZVM+BaJoC48yuExjlQhAzcUu3NgZKNfQgiOHz+Ohx56aFxYCaF4yw3DKHvdgK7rKu9gFPiXLwWLxlEgFC2d3Xhj937sbT+OlMv8vAU9Ak4NeAJw+eniLoQockB6EMJ\/eOj5Xi4AQeF4LhxXgEOMusS63FBKUVNTg3feeWdcFECFQhBM0wzu2uVCJSKVBtmGzHVdpG0b77Z3YktLO3YePYkcNeFoOjjVQInmd3UWvdaGhBSVVwf1FoKCCA2ABsemsF0BgsrPvTgb8v2IxWJ46qmnKr2cURMKQTAMA5SUTxB0XR9xOayiL7LojFIKqumwmY6k5WJ36zH8ZUczDpw4hZMFG3ndhKVF4FBfEFzSIww9g1Bk\/4XelGd\/xJpHKGzOYXtu6PwHAyFT7DVNQzabxWOPPVbVVkIorpAZM2aAaaxsjkVZu6B8BiWAu4GXgREBRgQ44SC6jiwX2H6gFW8caMP2Y8dx1HZhGwa4roEYDNAZbOHBgS8ClGrQGQMDAfc8WK4HGjXR3n0SDmyAhf\/zKu6fYRgG\/vKXv1R1wlIobOimpiYyadIk0dXVVZbQ41jlvZ9r9G+tRgWFUVeLPOfYf\/wU2o6fQpxwTIxH0DChHrWJGkT0GGiPkLggoIwCjIIZDIwC7ek0uuwCXCJAKQH42JRilwrDMPD0009jyZIllV7KiAiFIADA3Llz8fLLL6Ourq6kv1f2PZDHBZWuPDqChuqE9xlDDwAuBDzXvzkSza+D6LQKSKZstGaOQ6OnENN1REwNsYiJiK6DaBo8l8O2PVjcRUf3ScA0AM2E63jQmTH2L3IURKNRdHR04KmnnhI33HBD1d2FQiMIS5cuxSuvvNLn30p1V9d1PchOVJSGXu9\/kbOQoKgZo+anJZsJcAA2d+ECyFsOSL4A8HTwe\/zPhsATAtG6uD970oNvPVQZlmWhpqYGmzdvxpIlS0RTU1NViUJo3vFrrrmGTJ8+HUDpG5wSQkI\/mLXaIJwO+gDnEK4HcNd\/wLclCNMAXfetANMANSMghgliGDCiMVCiQacGdGb47dWqDNnPw7btqkxYCo0gAMC1116LdDodDHMtxR29OLqgjguVR+YzyIcg\/kNmJ47thIjSI\/dsJBLBoUOHsHnz5qoyS0P1zt94441kxowZsCyrZOXJst+ecioqxhJ5RH3xxRcrvZRhESpBAIAPfOAD4F7pCo9k4ogsXVUoyom88eTzeUQiERw7dgx\/\/OMfq2bjhU4QPvjBD5ILF1yIbCYLwzBGfRHLM53MOy81MvuxlHMjziU458EcBflZVTPS9yX3biQSwaZNmyq8qqETyh38yU9+EoZpYKBZCcOl3JaB7PbrOI5KfFIA6NungRCC9vb2qvElhFIQmpqayK233hpMZx7NBa1pWlmdiY7jIJ1OgzGm\/BSK05D7b\/\/+\/ZVeypAIpSAA\/tFh3rx5cBxnVBdauf0Gsh1bMplUoU3FacjGP11dXZVeypAIrSAAfhhSmuEjmdOg6+WvlvM8D4lEAqZporOzM1hjqcKm4x0ZARoP\/oOBoJTCMAwcO3as0ksZEqEWhPe\/\/\/2ktrY2qK4byQVe7twD2cfBMAxEIhEkk0kUCgV1hFAEVFNiXKgFAQCmTZsGx3GCGvywISMLmqYhHo8HZbDpdFpFHRTBGDjLsrB169bQm4yh37Hz5s2D4CKY1hM2ijs4m6YZDB+1LAvd3d0qO1IRzJ6sBj9C6AVh4cKF8Lh\/ZHAGGNwxELKP4licSz3PC2LprusikUgEnZ0ty0ImkwkGkipOx\/O8QOjHo3gSQoLj45EjRyq9nLMS+l26YsUKEo1GQ3lcGAjP8xCNRhGPx4Mhst3d3bBtu9JLU1QAOdhF13V0dHRUejlnJfSCAADz58+H67ihPDL0x3Xd4PgQi8UCCyKZTKrEpXMU2bHr6NGjlV7KWakKQVi8eDFcb2wGuYwWeV4UQiAej\/eJjCSTSRWKPAeRNwLOeegdi1UhCB\/+8IdJIpEI7r6SofoUxhp5ZuSco76+HowxcM7hui66urqC3H3lV+g7y3O8vh\/ydTHG8O7udyu8msGpmk9g7dq16Ozs7DO\/YSwSj0YL5xx1dXVB1ybP85BKpVAoFMbtBaDopX9dQ8vhlgqu5uxUzY68\/fbbyfLly9Hd3R1cXNWAECLIUTAMIzhSZLNZOI6jROEcQO5Vxhg6Ojqwe\/fu0B4bqmo33nPPPWT+\/Pk4efJkVZmYrusiEokEk6dl85d0Ol01wqYYOcVWAucczc3NFVzN4FTHFVXEfffdR9atW4dcLgfbtoO7rBwgIh9hab0ujzjFouA4DoTwk63S6XSQp1AtAldK5GseK2drsc9iLB4Dvd533w2vH6Eqd+Bdd91FvvOd72Dp0qUwDAOpVAqu6wY+BcMw4LpuqBJd5OYwTROapgWORdu2Ydu2CkmOEfKGUeqhwkPFNE10dHRg165doTw2hD+wfwYuuugictFFFwEAfvvb34rt27ejra0NqVQKuVwuKDuV5clhwTAMRKNR5PN5AL2TrymlVRFWrXbG+j3u3\/7fcRw4joOdO3di4cKFY7qWoUDGY1x8z549IpfLYf\/+\/fjDH\/5Q6eWcBqUU3d3dsCwr6DCdSCRQV1cXWAoyy3G8I4VwrJLOTNPs8\/exyCDtH2lwHAe1tbX45je\/WfkzbT\/GpSAU89nPflaYptknOaSSyDtULpdDJpPp0+LNMAzE4\/HAYUoprZqU7ZFSbkFwHAeRSAStra04fPhwUJouBXjevHnQdR25XC6ICJWa4mtMDoZNp9O47bbbsGLFilCJQtUeGYZKIpFALpcr+fCXkSKEAOccuq7DNM0gq5FzDtu2Ax9DuZrCnmuYpolt27Zhy5YtwYUpRZYxhrfffhsLFizAggULYJpmSfp4ng1ZEr17926sWLGirM81XKrSqTgc6uvrgzZslbYOgN40Vk3TEIlETrt7ZLNZcM6DCkrF6HAcB83NzfA8Lwj7mqYJ0zTBGENnZyc2bdqEP\/\/5z8jlcmMiBnINb7\/9dlmfaySMe0FIJBKBIITheFTs1dY0LUhzluG3fD4fpGSHQcCqHcYYampqAueyruswDCOI9GiahoaGBuzcuRPNzc1jsk8454FjedOmTZXflEWMe0GYOXNmkDIcBi++7CEoL3YpWACC2QSFQgGcc5imGQoRKyfSqSqtolJDCMGqVasA9EZ05Hsai8XAOUehUEA8Hsc777wTJItJ51+pw5Pys3ddF9FoFFu2bBn17ywl414QZsyYEWy0MCb+MMZO83x7nodsNot8Pq\/8CKPEdV00NjbiQx\/6ECZNmoRcLheUpNu2HVgKnufBsiy0t7dD07RRd\/s+E8VzRjVNQ1tbW8mfYzSE7wopMcuWLSPxeDzYBGGDMYZIJALOeVAVCfgbuX8UQjF8CCGwLAu1tbVYt24dVq9eDUII8vl8sCekE1emk0vKGQqVjYMLhQJeeOGF0HzA414QAGDixIllM0lLgWEYfXwJMsLgeR5s21ZWwiiQIU3ZGXvZsmX4yEc+gssuuww1NTUAegvQPM9DJBIJfAvlsiiLrQTGGHbs2FGW5xkJ4z7sCABz5sxBa2srampqQicK8g5lmiYymQx0XQ+sAkIIurq6MHny5MBKGI\/iUBwGLDX9z\/6WZQXCsGzZMhw4cACHDh1CMplEQ0MDZs6cCQBlj0rJz1jXdZw8ebJszzNczglBuPDCC\/Hqq6\/C87zQXVDFEQd555Cebln0lM1mUVtbO+6TlCrB4sWLMW\/evCD\/QNbDjFWNg67rQRp7GDgnjgwrV64ksuQ4jEhzVpqtUrTkXcqyrKA2Q1FaZKt8wzCC930sC56kj+P1118PhR\/hnBAEAJg+ffppd9iwRB3k5iu+O8nNKUVMDX4pD8V5B4yxMa9+lCHnbDY7Zs85GOfMDpNmYTQaDZXnXloBxeaqjH8DCKwG13WRSqXGrZVQqVmYxTMhKrGGSCQSmrR64BwShMWLFyMWiwXVbWHzJQD+5uzf2EUWOXmeh0KhANd1x6WlUM7kpLCTSqVCM+x2\/O2sMzBv3jwyffp0WJYVxIDDosoSmako8xGkMPQXhTCK2Wip1B260hw+fBjPPPNMaF73OSMIAHDxxRcHFoLcgGGDMRYcC4qjDTJHQVkJ44vW1lYIITBjxoxKLwXAOSYIGzZsINKbH1ZkBeSZxIpzjq6uLnDOx50oVJuVULxW2ZZNfibFrdr6I\/1GuVwOu3fvxsqVK9HU1BQKs2987agh0NTUBMuywBgL5VyH4k01UGGN3GjZbHZc5iVUk5Ugi6DkcF8ZQiwuipJl7MUP13VhGAYOHjyIfD6P9773vRV+Jb2E91ZZJi677DLs2bMn+HDC6LWXacwD3V2EEGCMBYk0sVisAissH9J3Ui1WghRnAH06PxVHiYpfi+d5iMViOHbsGN58803MmzcPa9euHfuFn4FzThCuuuoq8txzz4lsNhtKMZB3FeD0Bp3y67Kt+3i0EIDe96AaZm\/I9WmahkOHDmHfvn2IRqNIJBKIRCKIRqOn9VTs7u7Gzp07oWka1qxZg+XLl4fiuACcg4IAAMuXL8dzzz2HCRMmhM40lV2ZZe1+cURB5r5LK8F1XeRyOSQSCWiaNm5Gzssjg6zzCKNwS4orJl3XRXt7e9DvQH6teI\/Jysp4PI73ve99eM973lPB1Z\/OOSkIH\/3oR8mmTZtEGL31gw1tkeJQ3Jk5m80GZ9jx1qm5uI1cWEVBCgHnHHPnzsUFF1wQ9FZwHOe0+SD19fV44403cOTIEUyePBkf\/OAHQ2MdAOeoIADAwoULsX379tDNbZC1DINlU8rMNrnRUqkUamtrzzgtqJopzhUJoyjIAUGO4wSRH9mmjRASpENLil9DGP0k4bo9jiFXXnlln7twWD6c4jLnwS7u4rV7ntenscd4o9hDHzZkdyVd1wNnsLRsHMdBoVCAZVnBw\/M8JJNJ1NTUYOLEiZVe\/mmcs4KwfPlyMmvWrOCsDoSjqWlxMlJxXH6gEGRxow3p7TYMo0+Ogjx+nOkRduQ6hRBwXRf5fB6WZQXdqc82S3EskJEExliwVpmGLn0ghmEgFouhpaUFR48excSJEzF37tyKrHcwwr8jysjVV1\/dJ\/QYpryE4mjDYBQnwti2jVQqFZxrw5yANVLkkNzu7m4cP34cmUwmyN4splggip2U5Ubmt0hHo2EYwYDfI0eO4NVXX4Vpmpg\/fz5uvPHG0J3vxt+OGQZXXHEFefnll0Vrayt0XQ\/F+XskNRbSmSithOL05\/GG7EQtLYaTJ0\/2uRvHYrHg9UuPvrSo5M+NxXujaRosy0Imk0F7ezuam5uxb98+TJw4ER\/4wAdwyy23lH0NI2Hcj3I7G5s3bxY\/\/vGPEYvFQiMIjuMEjTuGY9bLu6BhGKirqwucWmf7mTDT\/\/UTQlAoFNDV1TXg90tzXdf14A4t\/y9zOEaT33C2PdLS0oJt27bB8zzkcjlYlgXbtnHppZfiiiuuwJo1a7Bu3brKb7QzcE5bCIDfTenVV18Ve\/bsQfEMyDAgTf9iBtvI8muu6yKdTgd3S\/lv0oytJvoLlud5yGQyEEIM+nnJKcv925P1z+yMx+MAen03kUgElmX18c8IIYLn6S8I0Wg0+JwopYjH44jFYtA0DbNnz0ZNTQ1uu+02fOhDHwqtCBRTXbujTMyePRs7d+4MTU16\/9j1cJDHB5mkJPsrFIfAwmAJjRQ5C3Ok6c2ZTKbP3+WcBtmIJpfLYd26dbjzzjuDN2nXrl1CRgvS6TSy2Sw6OzuRzWZx+PDhwG9DCEFDQwPe+973wnEcaJqG9evXY\/Xq1VXzhitBAHDq1Kkglh8GE9pxnGDy80hM22JRyOfziEQigbc+DK9vNFiWFQjCSF5L\/5+RTkBCCFKpFK6\/\/nrccccdfS7ghQsXDnpBP\/PMM+LAgQNIpVLI5\/PQdR1z5szB6tWrsWjRoqoRA0AJAgB\/U+RyuaC\/XSXhnPcZTjvSs668+PP5fHCOrmbLQCLnVMjXN9z3Z6Ajkxyy+5GPfAQf+9jHhv0mXX\/99dX\/xvZwTocdJXV1dSgUCkilUhWPz+dyOQC+c8wwjFHlDcjvz2QywaSiSr++4SJDwYwxJJPJ05rPjgT5s7IUOZPJ4I477hiRGIw3lIUAf+Cq9F5blhXcTcfaxHZdF5ZlDVrtOBI8zwuca7JFW7UcHxzHAWMM6XS6ZO8F4Icv5aTtr371q1izZs05LwaAEgQAwLRp0\/zkEdsP902YMKEicXw59RkofRPYahUFWTmYz+dLYtnIatF0Oo14PI6vfe1rWLJkiRKDHpQgALjoootILBYTruOfJePxOCKRyJieuaV1AJSvI7Rs0gr0ikI1kEwmg+POaBFCoFAoYPLkyXjwwQeVEPSjeg6TZaaxsRGO68A0TSSTyT656eWkuK\/BWCDNZJnEFDZ\/gswylBWdqVQq+PeRRhUIIcH8TM\/zMHXqVCUGZyBcu6GCNDU1Ba2wXNdFZ2cn8vl82bv2ZLNZzJkzB3PmzAmev5zZo3KWYCaTCVUSlkSmF8u03+I1jkQQZLGRPHqEZUJSWFGC0MPll18eFKEwxoL04bHgggsuwN13303i8XjZL1J5TJA5CmGzEqSvI51O9+kANVpfh+u6sG0bhmGEatpy2AjPTqgwV155JZH16ZqmQXCBTCYTNDMt10Xjui4uuOACAMDf\/u3fBhu\/XFYC5zyo3c9kMqHryyhLm4tzQkYrBrLwSw7MzWaz2Lp167ldxHMGlCAUsWzZsqB5KdN8\/8HJkyeRyWRKdieVZ3d5p544cSJWrVpFAGDNmjXkc5\/7XNBMo3\/9QSmsB5mXL\/szdnV1obu7u2JWQnGvg1wuh2w2e5r\/ZjT9HIrLnoudtcePHy\/PC6pylCAUsWrVqtPaXjmOg2QyGZjXo0Um2siEmOXLl\/f5+po1a8g3vvENRKNROLYTTGvq3867WjhTcxfpOJRHF9nXoJRIyyDoh+DxICW8ra2tpM81XlCCUMTq1avJrFmzkMvlAmGghPYRhdHeSQuFAkzTBOBX3t18882nebuXLFlCfvGLX5DZc2YHXZBkJV61URw1kC3GZN+GVCoVCIHjOCX1n\/QRA49DcBH8O6UU+\/fvL9lzjSeUIPTj8ssvD4qKCCEglPQRhdGeuSmlsCwLyWQSl1xyyaDfe99995F169bBtm2k0+lQRgXORnE\/QRk5yGQyyOVyQf1IqV+XFAMhRCAEEtu2oeu6ciyegXO+QcpAfOQjHxGO4wT9CYsRXKBhUgNGGhGglAbe7gceeGBIsfBdu3aJjRs3YuvWrYjH4yCEBAVQxRmHcrMPB+nPqKurK0uiUjabRSaTKWkNRfFUbNnglHMeVEKeDfl+PfHEEyoXoR\/KQhiAK6644oxj1wn1J++k0+kRJS7JjMSbb755yD+zcOFCcvfdd5MvfvGLmDBhAnLZHPL5fFDDL4UpTD0hJaVO7pJO3+KQpIwgDAXP86DrOgqFAv74xz+qu2E\/lCAMwBe\/+EVSV1cH1zl9k8m7UiqVQjabHXZKrW3b+MQnPoEVK1YM++60Zs0a8h\/\/8R\/ki1\/6IhYsWIB8Ph8IV1jLm2XX4VLVTchSbjndSn4ewznKySSlnTt3jno94w0lCGfgqquugmX7tQWCiz5lt9JEPXXyVJ+y4qFw5513jrqDzurVq8n3vvc98q1vfQurV6+G53no6uoquZe+FIzUQjiTuMkwbCadCdqYe+7QLQSZdEYpRUtLy7DXNd5RPoRBuPXWW0U6nYbGNFBGwT0OQk\/fqIyxoJeeruuBd1vG1xsaGnDxxRcPGFEoFb\/5zW\/E5s2bcejQIRTyBTCNBVEJKVjFvQGBvnMd6uvrYZpmyasfGWPo6urqze8YxE8hn1uKiOxc7DhOsLZcLoeGhgbccsstWLt2LfnCF74g9u3bB9M0h2SFBKnMHkc0FsUjjzwSPrOqgqhqx0FYv349fvKTn\/j9EsSZ940swpEhwmIT\/jOf+cyYTPddv349Wb9+PZqbm8Wf\/vQnbN++HSdOnIBt20Hr8kQiERRRFZvxQ50BMVLkRXi2I40UqOI2657nwTAM5LL+ulevXo0vf\/nLwS9atGgRduzYMaShsMX9JSijyOfyaG5uFhdddJEShR6UIAzCTTfdRF5++WVx5MgR\/87PB48quI4b+B0o873qYz3q+6KLLiIXXXQRAGDLli3i7bffxjvvvIPW1lacOnUKGtPANBZUWQK9F2A5REEOry0eiDMUXNeFEAKO7SCTyWDRokW49dZbsXjx4j7v5+WXX46NGzcGfQ6Gshb5\/0wmg927d0O+XwolCGflox\/9KP71X\/\/Vv5vSwS8YQklwF5Jpx\/v27RNz586tyB3o0ksvJZdeeikAYO\/evWLnzp3Ytm0bjh07hvb2dgAIkp6kp77Ubdpl+fFwjqbFSUUNkxpw44034n3ve9+A7+GSJUvIwoULxZ49exCNRAc80p0JxhiOHDky5O8\/F1CCcBauvvpqsnnzZvHiiy+ivr5+yBvbMAzkcjkcP348FDP85s2bR+bNm4e\/+qu\/AgDs3LlT7N27FwcOHMChQ4eQz+fL1qa9uOOzfI7+x4Pi\/o9CCMyYMQPr1q0b0jyDVStX4d133wXTzt4zobiFu67r2Lp1awle4fhBORWHyMc\/\/nEhcw8GQ242xhjy+Tw+\/OEP4+Mf\/3joz6i7du0S9913X1kmWLmuG2R5FhcsAQiSrKSzc8GCBbjmmmtwzTXXDGsRf\/3Xfy2GMr9RvjbZ1dpxHNx\/\/\/2olBUXNpSFMEQ+\/vGP44EHHhjyOVjeiaolZ37hwoVk6tSpIplMlvx3y9kHsgsS0JNg5LjwuIcpU6ZgxYoVWLVqFS6++OIRXZirVq3CSy+9hEgkMqgVV2wBUUqRz+exbdu2UFhxYUAJwhC59tpryVtvvSVeffXVIYsCIQQ7d+7Ezp07RTUM7Jg0aRJKLQjSeVkoFJDNZmGaJkzTxPnnn48FCxbg0ksvxbJly0b93lx33XV46aWXhnykk8JgGAZ27do12qcfN6gjwzC57bbbRDqVBhd8UGGQpjCjDNFYFE1NTYhEIkGPwPr6eqxdu3ZEGYvl4plnnhH\/8z\/\/gwkTJgROvdEinYozZ87EzJkzcd5555Wt5fm3v\/1t8dZbbw2aT9H\/OGRZFurr6\/Hzn\/88NJ9DJVEWwjC58847cc899yAajZ41VEcIARd+0c1bb70VVFDKu9Of\/vQn\/M3f\/I0oZ8LScJg9e3bwZ8\/zSuJLMAwDhUIB69evx\/z588v6Oq+77jq88cYbQWryUCImsVgMHR0d+POf\/yyqaQZjuVCpy8Nk5cqVZP369WctnxVCgBIKXdfhui5isRgMwwgSl+LxOKLRKB555BFs3749FGbaxRdfTM4777w+hUOlohy\/sz9XXHEFueSSS4L6jqEImhS+P\/3pT2VfXzWgBGEE3H777WTNmjVnbZ1OKOlNYe5JWGKMQdO0PjMKN27cOBbLHhJz5syBbdvQNK1kLeOKKzLLzQ033ABN04Zc7EUIQSKRUOHHHpQgjJBvfetbZMqUKbAsy4+t84Hj94ILf3PS3oSl4kIpTdOwqzk8Tq2lS5fC87ygAKgUlMofMRQuu+wyIntjDmX9tm2DMYYTJ07ghRdeCIWlVkmUIIyCr3\/960gkEn4ZLqMDerjPljlnmiZsx8Zbb70Vis142WWXkYaGhqCwqBQIIcZ0svYtt9wCwzDg2Gd\/TpnyHI1G8cILL4zB6sKNEoRR0NTURD7\/+c+jUCgEhTjDRaYNl+riKwXz589HJpMpiVNRHpnGsjR77ty55KqrroLtnN1vIYfrJhIJNDc34\/XXXw+FMFcKJQij5IorriBf\/epXh9S+a6BjRaFQgK7rqKurK+cyh8WKFStKlq0oIzFj4VQs5q677iKJROKs32eaZuBv0HUdzz777BisLrwoQSgB11xzDfnKV74StEdzXReC9zb4HOjism07qLxrbGxEmEpwFy9eTCZNmgRg9ANjZN\/HkyfGvqnppz\/9aSSTSRBC+vhu+iMLuwzDwObNm\/GHP\/zhnLUSlCCUiLVr15JvfOMbMHTDr+E3DQB9c+elP0GKgZzGfMstt1Rs3Wdi1apVJTv3U0qRy4\/NMNtirr76arJy5UqkUikYhjEkJ2NtbS1++tOfjsHqwokShBKycuVK8uRTT5K5c+fi1KlTYJqftss9HiQjyW7Onuchk8ngjjvuwFVXXRUa60CyYcMGIjP+RmMlyErHSg1Z\/e53v0tisZjfZm2AHpkD0d3djS9\/+cvnpJWgBKEMfP\/73ycf+9jHAPQU8XhucHxwXRfpdBqTJ0\/G3XffjZtuuil0YiApVeMQWflZKW688UbkC3noxtm7Ugvhh4mbm5vx6U9\/Wmzbtu2cEgZVy1Bmfv7zn4vdu3fj6NGj0DQNU6ZMwcqVK7Fhw4bQCkExn\/vc54QsFZZl3cNBVjjG43Hce++9FXvNX\/\/618XWrVtRV1cXDHEpRv5dHvGKW7itXr0aq1atwpQpU2AYxrgulVaCoBiUBx54QOzduzforDTcBCNZ7WgYBu6\/\/\/6KXkg33XSTkF2Xiy\/8gZBfl63c5HCdaDSKeDyOVatW4fbbbx93wqCODIpBed\/73leSkGE+n8e+ffsqeve588470dnZGfhyBmvdLjs5yQ5PiUQi6LWQTCbx+OOP46GHHhp3d1MlCIpBWbhwIVm0aFEwjm2kyPmUlWTt2rXkPe95D1KpVDBw92zIFvCe6\/WpyZg0aRL+8pe\/lHO5FUEJguKsfOADH4BhGGedqzAQ0iR3XTcUDU2\/+tWvkssvvxzpdHpI07TlUB5ZiwIgGKF3tuK2akQJguKszJ8\/n1x66aXBBTBcS0HOqeju7i7D6obPd7\/7XTJ16tQRdYcqLlCzLKvix6BSowRBMSQ+8YlPkFgsNmjG32Douo6Ojo4yrGxk\/OxnPyMjTRfnHgf3OOrq6sZdxEEJgmLIrFq1KjhDD9dKYIyhs7OzHMsaMd\/85jdH9HOUUdiOjenTp5d4RZVHCYJiyNx8881k4sSJfcJ2Q0XTtJI3cB0tCxYsIP\/yL\/+CaDSKzs5OeJ7Xp7GKfJ0yqUzmVMj8hJtuuqmSyy8LShAUw+KDH\/wgUqlU0O3pbMi8BUIIPM8LTbs4ydy5c8kvfvELsmLFCuRyOWQyGXCPBynmAMA035FqWVYwfPbTn\/40Lr300nF1XABUYpJiBPzbv\/2bePfdd4ccugN8CyGdTmPDhg1DmsZUCZ5++mnx\/PPP4+jRo8hms32SlyilYIzhwgsvxG233YYlS5aE8jWMFtV1WTFsrr\/+euzbtw+apg2a3CMpTgs+depUuZc3YjZs2EA2bNiAXbt2iebmZiSTSSSTSRiGgRkzZmDOnDmnDZsdbyhBUAybefPmkSuvvFL8\/ve\/RyKRCGYvFFP8d1kLYRgGDhw4MNbLHTYLFy4kCxcurPQyKoLyIShGxK233krq6+uHPL+Bcw5KaTCoRhFOlCAoRsxVV10V5CXI3P\/B5iHIvghvvvmmclyFFCUIihGzYcMGMmnSpGFZCUIIHDx4cAxWpxgJShAUo+I973lP0DF6KKPTNE1DS0tLuZelGCFKEBSj4pprriFNTU1D7pVAKcWxY8fGYGWKkaAEQTFqrr76ajiOM6S5FLquI5VKKT9CSFGCoBg1V1xxBVmwYMFpfoSBkt7k3MVdu8Izvk7RixIERUlYu3Zt0GZMWgpnmkcBADt27BjT9SmGhhIERUlYunQpWbBgAbq7uxGJRIJU34EwTRPZbDZ0dQ0KJQiKEvLe974XpmkOOseBMRZ0HPrzn\/88hqtTDAUlCIqSsXjxYrJs2TJks1lwzs9Y5+C6LqLRKLZv3z7GK1ScDVXtqCg5n\/nMZwRjLOgfIJHl0jI86XkeFi5ciLVr18J13XFbQVhNKEFQlJxfPv5L8dLvX4JpmoP2TOCcB\/MjZfFTTU0NampqcMkll+D6669XAjHGKEFQlIWvf\/3rorOzE7o++Pg0TdNQKBQCa0KOfRNCwDRN3HDDDbj22muVMIwRyoegKAvXXnvtGX0IxTch13VBKQUhBJFIBJzzYDoSYwyPPPIInnzySXXXGiOUICjKwtq1a8mSJUv6HAkk\/fMT5LFCigPQKxoNDQ14\/vnnsXXrViUKY4ASBEXZ+OxnP0vi8Tg8z4Ou60MqfuqPZVnQNA0vv\/xyGVao6I8SBEVZufnmm+E4zogGxQIIGp22tbWVemmKAVCCoCgry5cvJ9dffz2y2eygxU+ywUp\/ZKclefRQlBclCIqyc\/3115P3v\/\/9yOfz0DQt6GIsjxCDRbocx+kzK0FRXlSTVcWYcMMNNxAA4re\/\/S1M0wzmOlBKg6PEQMIgw5BTp04d4xWfmygLQTFm3HDDDeSTn\/wkDMNAKpVCoVCA67qBxTBQP0bGGFzXxZVXXlmhVZ9bqMQkRUV4+OGHxZtvvhn0Yyx+SIQQSCaTWLNmDe644w51ZhgDlCAoKspjjz0m9u7di7a2tsCB6HkeIpEI6urqcN1112Ht2rVKDMYIJQiK0LBjxw6RzWZhmiaWLl2qRKACKEFQKBQByqmoUCgClCAoFIoAJQgKhSJACYJCoQhQgqBQKAKUICgUigAlCAqFIkAJgkKhCFCCoFAoApQgKBSKACUICoUiQAmCQqEIUIKgUCgClCAoFIqA\/x\/ybEO9PVnrIwAAAABJRU5ErkJggg==\" alt=\"Isometric Grey Bunny\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"coding-card\">\n <div class=\"category-bar\">\n <div class=\"cat-pill\">\n <span class=\"cat-dot\"><\/span> Gerakan (Motion Puzzle)\n <\/div>\n <\/div>\n\n <div class=\"block-palette\">\n <span class=\"palette-label\">TARIk (DRAG) BALOK JIGSAW KE AREA KREATIF:<\/span>\n <div class=\"blocks-grid\">\n <div class=\"mentor-block block-atas\" draggable=\"true\" ondragstart=\"handleDragStart(event, 'atas')\" onclick=\"handlePaletteClick(event, 'atas')\">\n <span class=\"block-symbol\">\u2b06\ufe0f<\/span>\n <span class=\"block-caption\">Atas<\/span>\n <\/div>\n <div class=\"mentor-block block-bawah\" draggable=\"true\" ondragstart=\"handleDragStart(event, 'bawah')\" onclick=\"handlePaletteClick(event, 'bawah')\">\n <span class=\"block-symbol\">\u2b07\ufe0f<\/span>\n <span class=\"block-caption\">Bawah<\/span>\n <\/div>\n <div class=\"mentor-block block-kiri\" draggable=\"true\" ondragstart=\"handleDragStart(event, 'kiri')\" onclick=\"handlePaletteClick(event, 'kiri')\">\n <span class=\"block-symbol\">\u2b05\ufe0f<\/span>\n <span class=\"block-caption\">Kiri<\/span>\n <\/div>\n <div class=\"mentor-block block-kanan\" draggable=\"true\" ondragstart=\"handleDragStart(event, 'kanan')\" onclick=\"handlePaletteClick(event, 'kanan')\">\n <span class=\"block-symbol\">\u27a1\ufe0f<\/span>\n <span class=\"block-caption\">Kanan<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"workspace-area\">\n <div style=\"font-size:1.15rem; font-weight:900; color:#1E293B; letter-spacing:0.2px; margin-bottom:8px; display:flex; align-items:center; gap:8px;\"><span>\u2728<\/span> Tuangkan Kreatifmu<\/div>\n\n <div class=\"canvas-dropzone\" id=\"codeDropzone\" ondragover=\"handleDragOver(event)\" ondragleave=\"handleDragLeave(event)\" ondrop=\"handleDrop(event)\">\n <div class=\"hat-block\">\n <span>\ud83d\udea9<\/span> saat diklik\n <\/div>\n\n <div id=\"puzzleChain\" style=\"display:flex; flex-wrap:wrap; align-items:center;\"><\/div>\n\n <div class=\"empty-prompt\" id=\"emptyHint\" style=\"width:100%; text-align:center; padding: 20px; color: #94A3B8; font-weight: 700; border: 2px dashed #CBD5E1; border-radius: 16px; margin-top: 10px;\">\n <span>\ud83d\udc47<\/span> Tarik & lepaskan balok jigsaw di sini!\n <\/div>\n <\/div>\n\n <div class=\"workspace-actions\">\n <button class=\"btn-mentor-action btn-exec-flag\" id=\"btnRunBig\" onclick=\"jalankanProgram()\">\n <span>\ud83d\udea9<\/span> JALANKAN PROGRAM!\n <\/button>\n <button class=\"btn-mentor-action btn-reset-workspace\" id=\"btnResetBig\" onclick=\"resetStage()\">\n <span>\ud83d\udd04<\/span> ULANGI\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"simulasi\" class=\"section-pad simulasi-section\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Metode Belajar Terstruktur \ud83d\ude80<\/h2>\n <p>Pendekatan intensif minimal 20 Jam Mentoring (1 Sesi = 1 Jam). Fokus penuh dari pengenalan alat hingga portofolio.<\/p>\n <\/div>\n <div class=\"roadmap-grid\">\n <div class=\"step-card c-yellow reveal\">\n <div class=\"step-num\">1<\/div>\n <div class=\"step-icon\">\ud83d\udca1<\/div>\n <h3>Fundamental Concept<\/h3>\n <p>Pengenalan dasar agar fondasi keilmuanmu kuat tanpa kebingungan.<\/p>\n <div class=\"step-badge\">Sesi 1 - 5<\/div>\n <\/div>\n <div class=\"step-card c-pink reveal\">\n <div class=\"step-num\">2<\/div>\n <div class=\"step-icon\">\ud83d\udee0\ufe0f<\/div>\n <h3>Hands-on Practice<\/h3>\n <p>Memasuki pembuatan proyek mini untuk mengasah imajinasi & logika.<\/p>\n <div class=\"step-badge\" style=\"color: var(--color-pink);\">Sesi 6 - 10<\/div>\n <\/div>\n <div class=\"step-card c-blue reveal\">\n <div class=\"step-num\">3<\/div>\n <div class=\"step-icon\">\ud83d\ude80<\/div>\n <h3>Advanced Challenge<\/h3>\n <p>Mengerjakan studi kasus rill dengan tingkat kerumitan yang ditingkatkan.<\/p>\n <div class=\"step-badge\" style=\"color: var(--color-blue);\">Sesi 11 - 15<\/div>\n <\/div>\n <div class=\"step-card c-green reveal\">\n <div class=\"step-num\">4<\/div>\n <div class=\"step-icon\">\ud83c\udfc6<\/div>\n <h3>Final Portfolio<\/h3>\n <p>Karyamu sudah jadi standar industri dan siap dipamerkan!<\/p>\n <div class=\"step-badge\">Sesi 16 - 20<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"promo\" class=\"section-pad\" style=\"background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Investasi Skill Terbaik \ud83d\udd25<\/h2>\n <p>Mulai perjalanan belajarmu dengan penawaran eksklusif bulan ini.<\/p>\n <\/div>\n <div class=\"promo-banner reveal\" style=\"background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), url('https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/kak-kiel-test-1.jpg'); background-size: cover; background-position: center;\">\n <div class=\"promo-text\">\n <p style=\"font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--color-pink); margin-bottom: 10px;\">\u2728 Penawaran Terbatas<\/p>\n <h3>September Ceria: Kelas Gambar<\/h3>\n <div class=\"price\" title=\"Klik untuk Klaim Promo!\">Rp 49.000 <span style=\"font-size: 1.2rem; color: inherit;\">\/ Sesi<\/span><\/div>\n <p style=\"font-size: 1.15rem; font-weight: 600; max-width: 450px; color: var(--text-main);\">\n Salurkan imajinasimu secara maksimal! Kelas interaktif *digital art* & menggambar manual dengan biaya terjangkau.\n <\/p>\n <\/div>\n <div style=\"position: relative; z-index: 2;\">\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20Admin,%20saya%20ingin%20klaim%20Promo%20September%20Ceria%20Kelas%20Gambar%20seharga%2049k\/sesi!\" class=\"btn btn-primary btn-promo-shake\" style=\"padding: 20px 36px; font-size: 1.2rem;\" target=\"_blank\" rel=\"noopener noreferrer\">Klaim Promo Sekarang!<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"founder\" class=\"section-pad\" style=\"padding-top: 0; background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Di Balik Layar \ud83d\udc68\u200d\ud83d\udcbb<\/h2>\n <p>Kenali sosok praktisi yang merancang ekosistem pembelajaran premium ini.<\/p>\n <\/div>\n <div class=\"founder-wrapper reveal\">\n <div>\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/03\/Andri.jpeg\" alt=\"Andri Darmawan\" class=\"founder-img\" loading=\"lazy\" onerror=\"this.src='https:\/\/via.placeholder.com\/400x400\/FFD166\/1E293B?text=Foto+Andri'\">\n <\/div>\n <div class=\"founder-info\">\n <h3>Andri Darmawan, AMD, MM<\/h3>\n <div class=\"role\">Founder & CEO Urban Digital Hub<\/div>\n <p>\n Sebagai praktisi industri dengan pengalaman lebih dari satu dekade, Andri berdedikasi membangun *tech-edu startup* berstandar tinggi namun tetap mudah dicerna oleh kalangan muda.\n <\/p>\n <p>\n Visi utamanya adalah menyiapkan talenta Indonesia Emas dengan kemampuan komprehensif, mulai dari penelitian UI\/UX, perancangan *game design*, otomasi *workflow*, hingga *AI video generation*.\n <\/p>\n <div class=\"founder-tags\">\n <span class=\"f-tag\">\ud83c\udfa8 UI\/UX Research<\/span>\n <span class=\"f-tag\">\ud83c\udfac AI Video & Motion<\/span>\n <span class=\"f-tag\">\ud83c\udfae Game Design<\/span>\n <span class=\"f-tag\">\ud83d\udcda Ed-Tech Expert<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tutor\" class=\"section-pad tutor-section\" style=\"background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\" style=\"margin-bottom: 40px;\">\n <h2>Tutor Jagoan Kami \ud83e\uddb8\u200d\u2642\ufe0f\ud83e\uddb8\u200d\u2640\ufe0f<\/h2>\n <p>Belajar langsung dari praktisi yang asyik, sabar, dan super kreatif! (Klik foto untuk detail)<\/p>\n <\/div>\n <\/div>\n \n <div class=\"slider-wrapper reveal\">\n <button class=\"slider-btn prev\" aria-label=\"Previous\" onclick=\"slideTutor(-310)\">❮<\/button>\n <div class=\"slider-content\" id=\"tutorSlider\">\n <div class=\"tutor-card tutor-yellow\" onclick=\"openTutorModal('Kak Andri', 'UI\/UX & Desain', 'Kak Andri memiliki pengalaman lebih dari 10 tahun di bidang desain produk. Ia akan mengajarkan cara membuat tampilan UI\/UX yang tidak hanya cantik tapi juga fungsional!', 'https:\/\/via.placeholder.com\/300x300\/FFD166\/0A192F?text=Kak+Andri', 'var(--color-yellow)')\">\n <div class=\"tutor-info\">\n <h3>Kak Andri<\/h3>\n <p>UI\/UX & Desain<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/FFD166\/0A192F?text=Kak+Andri\" alt=\"Kak Andri\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <div class=\"tutor-card tutor-pink\" onclick=\"openTutorModal('Kak Lily', 'Komik Strip', 'Dengan keahlian ilustrasi karakter bergaya Jepang dan Barat, Kak Lily siap membantu anak-anak menuangkan ide cerita mereka menjadi mahakarya komik strip yang seru!', 'https:\/\/via.placeholder.com\/300x300\/EF476F\/FFFFFF?text=Kak+Lily', 'var(--color-pink)')\">\n <div class=\"tutor-info\">\n <h3 style=\"color: white;\">Kak Lily<\/h3>\n <p style=\"background: white; color: var(--color-pink);\">Komik Strip<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/EF476F\/FFFFFF?text=Kak+Lily\" alt=\"Kak Lily\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <div class=\"tutor-card tutor-blue\" onclick=\"openTutorModal('Kak Reynaldi', 'Programming', 'Ahli bahasa pemrograman Python dan web development. Kak Reynaldi punya metode khusus untuk menjelaskan logika coding rumit menjadi semudah bermain game!', 'https:\/\/via.placeholder.com\/300x300\/118AB2\/FFFFFF?text=Kak+Reynaldi', 'var(--color-blue)')\">\n <div class=\"tutor-info\">\n <h3 style=\"color: white;\">Kak Reynaldi<\/h3>\n <p style=\"background: white; color: var(--color-blue);\">Programming<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/118AB2\/FFFFFF?text=Kak+Reynaldi\" alt=\"Kak Reynaldi\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <div class=\"tutor-card tutor-green\" onclick=\"openTutorModal('Kak Winda', 'Video & Multimedia', 'Kak Winda adalah seorang spesialis konten kreator dan editor video. Bersamanya, kamu akan belajar rahasia editing sinematik layaknya film profesional!', 'https:\/\/via.placeholder.com\/300x300\/06D6A0\/0A192F?text=Kak+Winda', 'var(--color-green)')\">\n <div class=\"tutor-info\">\n <h3>Kak Winda<\/h3>\n <p>Video & Multimedia<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/06D6A0\/0A192F?text=Kak+Winda\" alt=\"Kak Winda\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n \n <div class=\"tutor-card tutor-yellow\" onclick=\"openTutorModal('Kak Andri', 'UI\/UX & Desain', 'Kak Andri memiliki pengalaman lebih dari 10 tahun di bidang desain produk. Ia akan mengajarkan cara membuat tampilan UI\/UX yang tidak hanya cantik tapi juga fungsional!', 'https:\/\/via.placeholder.com\/300x300\/FFD166\/0A192F?text=Kak+Andri', 'var(--color-yellow)')\">\n <div class=\"tutor-info\">\n <h3>Kak Andri<\/h3>\n <p>UI\/UX & Desain<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/FFD166\/0A192F?text=Kak+Andri\" alt=\"Kak Andri\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <div class=\"tutor-card tutor-pink\" onclick=\"openTutorModal('Kak Lily', 'Komik Strip', 'Dengan keahlian ilustrasi karakter bergaya Jepang dan Barat, Kak Lily siap membantu anak-anak menuangkan ide cerita mereka menjadi mahakarya komik strip yang seru!', 'https:\/\/via.placeholder.com\/300x300\/EF476F\/FFFFFF?text=Kak+Lily', 'var(--color-pink)')\">\n <div class=\"tutor-info\">\n <h3 style=\"color: white;\">Kak Lily<\/h3>\n <p style=\"background: white; color: var(--color-pink);\">Komik Strip<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/EF476F\/FFFFFF?text=Kak+Lily\" alt=\"Kak Lily\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <\/div>\n <button class=\"slider-btn next\" aria-label=\"Next\" onclick=\"slideTutor(310)\">❯<\/button>\n <\/div>\n <\/section>\n\n \n <section id=\"video-belajar\" class=\"section-pad\" style=\"background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Cuplikan Kelas Kami \ud83c\udfa5<\/h2>\n <p>Intip keseruan belajar membuat Komik Strip bareng Kak Lily. Interaktif, santai, dan penuh karya kreatif!<\/p>\n <\/div>\n <div class=\"video-wrapper reveal\">\n <div class=\"video-container\">\n <iframe src=\"https:\/\/www.youtube.com\/embed\/YnValRlT7_Y\" title=\"YouTube video player\" frameborder=\"0\" loading=\"lazy\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"galeri\" class=\"section-pad\" style=\"padding-top: 0; background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Dokumentasi Mentoring \ud83d\udcf8<\/h2>\n <p>Intip proses kreatif siswa dan suasana interaktif saat sesi mentoring berlangsung.<\/p>\n <\/div>\n <div class=\"gallery-grid\">\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-12-pukul-12.32.53-scaled.png\" alt=\"Siswa komik\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-12-pukul-12.04.58-scaled.png\" alt=\"Proses menggambar\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-09-pukul-21.09.32-scaled.png\" alt=\"Mentoring Offline\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-09-pukul-14.28.59-scaled.png\" alt=\"Sesi Zoom\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-12-at-16.59.06.jpeg\" alt=\"Zoom bersama\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/03\/post.jpg\" alt=\"Diskusi Interaktif\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"blog\" class=\"section-pad blog-section\" style=\"background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Blog Edukasi MentorOnline \ud83d\udcda<\/h2>\n <p>Temukan tips, trik, dan informasi seputar perkembangan dunia digital kreatif langsung dari para ahli.<\/p>\n <\/div>\n <div class=\"blog-grid\">\n <div class=\"blog-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/600x400\/BAE6FD\/0A192F?text=Ilustrasi+Blog+1\" alt=\"Blog 1\" class=\"blog-img\" loading=\"lazy\">\n <div class=\"blog-content\">\n <div class=\"blog-category\">TIPS & TRIK<\/div>\n <h3>5 Cara Mudah Membangun Portofolio UI\/UX Pertamamu<\/h3>\n <p>Membangun portofolio desain dari nol tidak harus rumit. Temukan langkah-langkah praktisnya di sini.<\/p>\n <\/div>\n <\/div>\n <div class=\"blog-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/600x400\/FFD166\/0A192F?text=Ilustrasi+Blog+2\" alt=\"Blog 2\" class=\"blog-img\" loading=\"lazy\">\n <div class=\"blog-content\">\n <div class=\"blog-category\">EDUKASI<\/div>\n <h3>Mengapa Anak Perlu Belajar Coding Sejak Dini?<\/h3>\n <p>Coding bukan sekadar menulis bahasa pemrograman, tapi cara mengasah logika problem solving.<\/p>\n <\/div>\n <\/div>\n <div class=\"blog-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/600x400\/EF476F\/FFFFFF?text=Ilustrasi+Blog+3\" alt=\"Blog 3\" class=\"blog-img\" loading=\"lazy\">\n <div class=\"blog-content\">\n <div class=\"blog-category\">INSPIRASI<\/div>\n <h3>Dari Hobi Jadi Profesi: Sukses Jadi Digital Illustrator<\/h3>\n <p>Banyak kreator muda yang sukses meraup penghasilan dari menggambar digital.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"blog-cta reveal\">\n <a href=\"https:\/\/mentoronline.asia\/blog\/\" class=\"btn btn-primary\" style=\"padding: 16px 36px; font-size: 1.2rem;\">Baca Semua Artikel Blog \u2794<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"daftar\" class=\"section-pad\" style=\"background-color: white; background-image: radial-gradient(var(--text-muted) 1px, transparent 1px); background-size: 30px 30px; border-top: 4px solid var(--text-main);\">\n <div class=\"container reveal\">\n <div class=\"form-wrapper\">\n <div class=\"form-left\">\n <h2>Mulai Kelas Trial Pertama!<\/h2>\n <p>Tinggalkan kontak Anda, dan tim konsultan pendidikan kami akan segera menghubungi untuk mengatur jadwal trial gratis dan memilih program yang paling cocok.<\/p>\n <div style=\"font-size: 4rem;\">\ud83d\ude80\u2728<\/div>\n <\/div>\n <div class=\"form-right\">\n <h3 style=\"font-size: 1.5rem; margin-bottom: 24px; color: var(--text-main);\">Formulir Pendaftaran<\/h3>\n <form id=\"leadForm\">\n <div class=\"form-group\">\n <input type=\"text\" id=\"parentName\" class=\"form-control\" placeholder=\"Nama Orang Tua\" required>\n <\/div>\n <div class=\"form-group\">\n <input type=\"text\" id=\"childName\" class=\"form-control\" placeholder=\"Nama Anak\" required>\n <\/div>\n <div class=\"form-group\">\n <select id=\"childAge\" class=\"form-control\" required style=\"appearance: auto;\">\n <option value=\"\" disabled selected>Pilih Usia Anak<\/option>\n <option value=\"7-9\">7 - 9 Tahun<\/option>\n <option value=\"10-12\">10 - 12 Tahun<\/option>\n <option value=\"13-15\">13 - 15 Tahun<\/option>\n <option value=\"16-18\">16 - 18 Tahun<\/option>\n <option value=\"Dewasa\">Dewasa \/ Guru<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <input type=\"tel\" id=\"waNumber\" class=\"form-control\" placeholder=\"Nomor WhatsApp\" required>\n <\/div>\n <button type=\"submit\" class=\"btn btn-secondary\" style=\"width: 100%; padding: 18px; font-size: 1.2rem;\">Daftar Sekarang \u2794<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"faq\" class=\"section-pad faq-section\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Tanya Jawab (FAQ) \ud83d\ude4b\u200d\u2642\ufe0f\ud83d\ude4b\u200d\u2640\ufe0f<\/h2>\n <p>Jawaban cepat untuk pertanyaan yang sering diajukan seputar MentorOnline.<\/p>\n <\/div>\n\n <div class=\"faq-container reveal\">\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Siapa saja yang bisa ikut kelas di MentorOnline?\n <span class=\"faq-icon\">+<\/span>\n <\/button>\n <div class=\"faq-answer\">\n <p>Kelas kami terbuka untuk anak usia 7 tahun ke atas, remaja, hingga dewasa. Kurikulum dan metode pengajaran akan disesuaikan secara personal dengan usia dan daya tangkap peserta.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Apakah kelasnya dilaksanakan secara online atau offline?\n <span class=\"faq-icon\">+<\/span>\n <\/button>\n <div class=\"faq-answer\">\n <p>Saat ini kami berfokus pada kelas interaktif online via Zoom agar bisa diakses dari seluruh Indonesia. Namun, khusus untuk area Makassar, kami juga menyediakan opsi sesi mentoring tatap muka (offline).<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Apa saja perlengkapan yang harus saya siapkan?\n <span class=\"faq-icon\">+<\/span>\n <\/button>\n <div class=\"faq-answer\">\n <p>Secara umum, kamu hanya perlu menyiapkan Laptop\/PC, koneksi internet yang stabil, dan aplikasi Zoom. Beberapa kelas spesifik mungkin memerlukan software tertentu yang akan dipandu instalasinya oleh mentor.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Bagaimana sistem jadwal belajarnya?\n <span class=\"faq-icon\">+<\/span>\n <\/button>\n <div class=\"faq-answer\">\n <p>Kami menggunakan sistem mentoring intensif 1-on-1, sehingga jadwal belajar sangat fleksibel. Kamu bisa berdiskusi dan menyepakati jadwal langsung dengan mentor yang bersangkutan.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer>\n <div class=\"container footer-grid\">\n <div>\n <div class=\"footer-brand\">MentorOnline.asia<\/div>\n <p style=\"color: var(--text-muted); max-width: 300px; font-size: 1.05rem;\">\n Platform pendidikan digital inovatif yang berdedikasi mencetak talenta dan kreator profesional Indonesia masa depan.\n <\/p>\n <\/div>\n <div class=\"footer-links\">\n <h4>Eksplorasi<\/h4>\n <ul>\n <li><a href=\"#program\">Pilihan Kelas Utama<\/a><\/li>\n <li><a href=\"#tutor\">Tutor Jagoan<\/a><\/li>\n <li><a href=\"#promo\">Penawaran Spesial<\/a><\/li>\n <li><a href=\"#galeri\">Dokumentasi Portofolio<\/a><\/li>\n <li><a href=\"https:\/\/mentoronline.asia\/affiliasi-guru\/\">Program Afiliasi Guru<\/a><\/li>\n <li><a href=\"https:\/\/mentoronline.asia\/blog\/\">Blog Edukasi<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-links\">\n <h4>Hubungi Kami<\/h4>\n <ul>\n <li>\ud83d\udcde +62 851-6126-8571<\/li>\n <li>\u2709\ufe0f hello@mentoronline.asia<\/li>\n <li>\ud83c\udf10 www.mentoronline.asia<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <p>© 2026 PT Indonesia Belajar Cipta Mandiri (Urban Digital Hub). Dibuat dengan penuh dedikasi.<\/p>\n \n \n <a href=\"https:\/\/www.instagram.com\/mentor_onlinemu\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"social-tab\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.036 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334\"\/>\n <\/svg>\n Ikuti Instagram @mentor_onlinemu\n <\/a>\n <\/div>\n <\/footer>\n\n \n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20tanya%20informasi%20kelas%20dan%20pendaftaran!\" class=\"wa-float\" target=\"_blank\" title=\"Tanya Kami via WhatsApp\" rel=\"noopener noreferrer\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"34\" height=\"34\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z\"\/>\n <\/svg>\n <\/a>\n\n \n <script>\n \/* =======================================================\n MAIN PAGE SCRIPTS (Scroll Reveal, Sliders, Modals)\n ======================================================= *\/\n function reveal() {\n var reveals = document.querySelectorAll(\".reveal\");\n for (var i = 0; i < reveals.length; i++) {\n var windowHeight = window.innerHeight;\n var elementTop = reveals[i].getBoundingClientRect().top;\n if (elementTop < windowHeight - 100) {\n reveals[i].classList.add(\"active\");\n }\n }\n }\n window.addEventListener(\"scroll\", reveal, { passive: true });\n reveal(); \n\n \/\/ WELCOME POP-UP LOGIC\n window.addEventListener('load', function() {\n setTimeout(function() { document.getElementById('welcomePopup').classList.add('show'); }, 2000); \n });\n document.getElementById('closePopup').addEventListener('click', function() {\n document.getElementById('welcomePopup').classList.remove('show');\n });\n document.getElementById('welcomePopup').addEventListener('click', function(e) {\n if (e.target === this) { this.classList.remove('show'); }\n });\n\n \/\/ PARTNER SLIDER LOGIC\n const partnerSlider = document.getElementById('partnerSlider');\n let partnerScrollInterval;\n function startPartnerScroll() {\n partnerScrollInterval = setInterval(() => {\n partnerSlider.scrollLeft += 1;\n if (partnerSlider.scrollLeft >= (partnerSlider.scrollWidth \/ 2)) {\n partnerSlider.scrollLeft = 0;\n }\n }, 25); \n }\n function stopPartnerScroll() { clearInterval(partnerScrollInterval); }\n startPartnerScroll();\n partnerSlider.addEventListener('mouseenter', stopPartnerScroll);\n partnerSlider.addEventListener('mouseleave', startPartnerScroll);\n\n function slidePartner(amount) {\n stopPartnerScroll();\n partnerSlider.scrollBy({ left: amount, behavior: 'smooth' });\n setTimeout(startPartnerScroll, 500); \n }\n\n \/\/ TUTOR SLIDER LOGIC\n const tutorSlider = document.getElementById('tutorSlider');\n let tutorSlideInterval;\n function startAutoSlideTutor() {\n tutorSlideInterval = setInterval(function() {\n if (tutorSlider.scrollLeft + tutorSlider.clientWidth >= tutorSlider.scrollWidth - 20) {\n tutorSlider.scrollTo({ left: 0, behavior: 'smooth' });\n } else {\n tutorSlider.scrollBy({ left: 310, behavior: 'smooth' });\n }\n }, 3000); \n }\n function stopAutoSlideTutor() { clearInterval(tutorSlideInterval); }\n startAutoSlideTutor();\n tutorSlider.addEventListener('mouseenter', stopAutoSlideTutor);\n tutorSlider.addEventListener('mouseleave', startAutoSlideTutor);\n\n function slideTutor(amount) {\n stopAutoSlideTutor();\n tutorSlider.scrollBy({ left: amount, behavior: 'smooth' });\n startAutoSlideTutor();\n }\n\n \/\/ TUTOR DETAIL MODAL LOGIC\n function openTutorModal(name, role, desc, imgSrc, bgColor) {\n document.getElementById('tm-name').innerText = name;\n document.getElementById('tm-role').innerText = role;\n document.getElementById('tm-desc').innerText = desc;\n document.getElementById('tm-img').src = imgSrc;\n document.getElementById('tm-img').style.backgroundColor = bgColor;\n document.getElementById('tutorModal').classList.add('show');\n }\n function closeTutorModal() { document.getElementById('tutorModal').classList.remove('show'); }\n document.getElementById('tutorModal').addEventListener('click', function(e) {\n if (e.target === this) { this.classList.remove('show'); }\n });\n\n \/\/ LEAD FORM LOGIC (REDIRECT TO WA WITHOUT TRACKING)\n document.getElementById('leadForm').addEventListener('submit', function(e) {\n e.preventDefault(); \n const parentName = document.getElementById('parentName').value;\n const childName = document.getElementById('childName').value;\n const childAge = document.getElementById('childAge').value;\n const waNumber = document.getElementById('waNumber').value;\n\n const textMessage = `Halo MentorOnline, saya ingin mendaftarkan anak saya untuk kelas trial.%0A%0A*Data Pendaftaran:*%0A- Nama Orang Tua: ${parentName}%0A- Nama Anak: ${childName}%0A- Usia: ${childAge} Tahun%0A- No WhatsApp: ${waNumber}%0A%0AMohon bantuan informasi jadwalnya. Terima kasih!`;\n window.open(`https:\/\/wa.me\/6285161268571?text=${textMessage}`, '_blank');\n });\n\n \/\/ FAQ ACCORDION LOGIC\n const faqQuestions = document.querySelectorAll('.faq-question');\n faqQuestions.forEach(question => {\n question.addEventListener('click', () => {\n const item = question.parentElement;\n const activeItems = document.querySelectorAll('.faq-item.active');\n activeItems.forEach(activeItem => {\n if (activeItem !== item) {\n activeItem.classList.remove('active');\n activeItem.querySelector('.faq-answer').style.maxHeight = null;\n }\n });\n item.classList.toggle('active');\n const answer = item.querySelector('.faq-answer');\n if (item.classList.contains('active')) {\n answer.style.maxHeight = answer.scrollHeight + \"px\";\n } else {\n answer.style.maxHeight = null;\n }\n });\n });\n\n \/* =======================================================\n GAME LOGIC (MENTORONLINE 2.5D CASTLE)\n ======================================================= *\/\n const AudioCtx = window.AudioContext || window.webkitAudioContext;\n let audioCtx = null;\n let bgmMasterGain = null;\n let sfxMasterGain = null;\n let isBgmPlaying = false;\n let bgmTimer = null;\n let bgmStep = 0;\n\n function initAudioEngine() {\n if (!audioCtx) {\n audioCtx = new AudioCtx();\n bgmMasterGain = audioCtx.createGain();\n bgmMasterGain.gain.setValueAtTime(0.08, audioCtx.currentTime);\n bgmMasterGain.connect(audioCtx.destination);\n sfxMasterGain = audioCtx.createGain();\n sfxMasterGain.gain.setValueAtTime(0.24, audioCtx.currentTime);\n sfxMasterGain.connect(audioCtx.destination);\n }\n if (audioCtx.state === 'suspended') { audioCtx.resume(); }\n }\n\n const BGM_NOTES = [261.63, 329.63, 392.00, 523.25, 349.23, 440.00, 523.25, 659.25, 392.00, 493.88, 587.33, 698.46, 523.25, 392.00, 329.63, 261.63];\n\n function playBgmBeat() {\n if (!isBgmPlaying || !audioCtx) return;\n initAudioEngine();\n try {\n const osc = audioCtx.createOscillator();\n const noteGain = audioCtx.createGain();\n osc.type = 'triangle';\n const freq = BGM_NOTES[bgmStep % BGM_NOTES.length];\n osc.frequency.setValueAtTime(freq, audioCtx.currentTime);\n const t = audioCtx.currentTime;\n noteGain.gain.setValueAtTime(0.001, t);\n noteGain.gain.linearRampToValueAtTime(0.08, t + 0.03);\n noteGain.gain.exponentialRampToValueAtTime(0.0001, t + 0.36);\n osc.connect(noteGain);\n noteGain.connect(bgmMasterGain);\n osc.start(t);\n osc.stop(t + 0.38);\n bgmStep++;\n } catch(e) {}\n }\n\n function startBGM() {\n initAudioEngine();\n if (isBgmPlaying) return;\n isBgmPlaying = true;\n bgmStep = 0;\n if (bgmTimer) clearInterval(bgmTimer);\n bgmTimer = setInterval(playBgmBeat, 380);\n updateMusicUI(true);\n }\n\n function stopBGM() {\n isBgmPlaying = false;\n if (bgmTimer) { clearInterval(bgmTimer); bgmTimer = null; }\n updateMusicUI(false);\n }\n\n function toggleBGM() {\n initAudioEngine();\n if (isBgmPlaying) stopBGM();\n else startBGM();\n }\n\n function updateMusicUI(active) {\n const btn = document.getElementById('btnMusic');\n const icon = document.getElementById('musicIcon');\n const label = document.getElementById('musicLabel');\n if (active) {\n btn.style.background = 'rgba(60, 195, 110, 0.45)';\n icon.innerText = '\ud83d\udd0a'; label.innerText = 'BGM ON';\n } else {\n btn.style.background = 'rgba(255,255,255,0.22)';\n icon.innerText = '\ud83d\udd08'; label.innerText = 'BGM OFF';\n }\n }\n\n function playSFX(freq, dur = 0.12, type = 'sine') {\n try {\n initAudioEngine();\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n osc.type = type;\n osc.frequency.setValueAtTime(freq, audioCtx.currentTime);\n const now = audioCtx.currentTime;\n gain.gain.setValueAtTime(0.2, now);\n gain.gain.exponentialRampToValueAtTime(0.001, now + dur);\n osc.connect(gain); gain.connect(sfxMasterGain);\n osc.start(now); osc.stop(now + dur);\n } catch(e) {}\n }\n\n function snapSound() { playSFX(780, 0.05, 'triangle'); setTimeout(() => playSFX(980, 0.07, 'sine'), 40); }\n function jumpSound() {\n try {\n initAudioEngine();\n const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'triangle';\n const now = audioCtx.currentTime; osc.frequency.setValueAtTime(420, now); osc.frequency.exponentialRampToValueAtTime(840, now + 0.22);\n gain.gain.setValueAtTime(0.25, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.28);\n osc.connect(gain); gain.connect(sfxMasterGain); osc.start(now); osc.stop(now + 0.3);\n } catch(e) {}\n }\n function fallSound() {\n try {\n initAudioEngine();\n const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'sawtooth';\n const now = audioCtx.currentTime; osc.frequency.setValueAtTime(480, now); osc.frequency.exponentialRampToValueAtTime(110, now + 0.45);\n gain.gain.setValueAtTime(0.22, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.5);\n osc.connect(gain); gain.connect(sfxMasterGain); osc.start(now); osc.stop(now + 0.52);\n } catch(e) {}\n }\n function deleteSound() { playSFX(300, 0.08, 'sine'); }\n function lockSound() { playSFX(170, 0.22, 'sawtooth'); }\n function wolfSound() { playSFX(160, 0.35, 'sawtooth'); setTimeout(() => playSFX(130, 0.4, 'sawtooth'), 180); }\n function rockSound() { playSFX(210, 0.22, 'sawtooth'); }\n function victoryFanfare() {\n const notes = [523.25, 659.25, 783.99, 1046.50, 1318.51];\n notes.forEach((f, i) => { setTimeout(() => playSFX(f, 0.22, 'triangle'), i * 110); });\n }\n\n function triggerScreenShake() {\n const gameApp = document.querySelector('.mentor-app');\n gameApp.classList.remove('screen-shake');\n void gameApp.offsetWidth;\n gameApp.classList.add('screen-shake');\n setTimeout(() => { gameApp.classList.remove('screen-shake'); }, 380);\n }\n\n const canvas = document.getElementById('confettiCanvas');\n const ctx = canvas.getContext('2d');\n let confettiParticles = [];\n let confettiAnimId = null;\n\n function resizeConfetti() {\n const appContainer = document.querySelector('.mentor-app');\n if(appContainer) {\n canvas.width = appContainer.clientWidth;\n canvas.height = appContainer.clientHeight;\n }\n }\n window.addEventListener('resize', resizeConfetti);\n resizeConfetti();\n\n function fireConfetti() {\n confettiParticles = [];\n const colors = ['#FF5A79', '#FFAE19', '#3CC36E', '#4C97FF', '#9B51E0', '#FFD166'];\n for (let i = 0; i < 150; i++) {\n confettiParticles.push({\n x: canvas.width \/ 2, y: canvas.height \/ 2, w: Math.random() * 10 + 6, h: Math.random() * 6 + 4,\n color: colors[Math.floor(Math.random() * colors.length)], vx: (Math.random() - 0.5) * 18, vy: (Math.random() - 0.7) * 18,\n rotation: Math.random() * 360, rotationSpeed: (Math.random() - 0.5) * 12, opacity: 1\n });\n }\n if (confettiAnimId) cancelAnimationFrame(confettiAnimId);\n animateConfetti();\n }\n\n function animateConfetti() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n let alive = false;\n confettiParticles.forEach(p => {\n p.x += p.vx; p.y += p.vy; p.vy += 0.36; p.rotation += p.rotationSpeed; p.opacity -= 0.007;\n if (p.opacity > 0 && p.y < canvas.height) {\n alive = true; ctx.save(); ctx.translate(p.x, p.y); ctx.rotate((p.rotation * Math.PI) \/ 180);\n ctx.fillStyle = p.color; ctx.globalAlpha = Math.max(0, p.opacity); ctx.fillRect(-p.w \/ 2, -p.h \/ 2, p.w, p.h); ctx.restore();\n }\n });\n if (alive) { confettiAnimId = requestAnimationFrame(animateConfetti); } else { ctx.clearRect(0, 0, canvas.width, canvas.height); }\n }\n\n const ENGLISH_CHEERS = [\n { msg: \"Never Give Up! You Can Do It!\", icon: \"\ud83d\udcaa\" },\n { msg: \"Keep Trying! Almost There!\", icon: \"\ud83c\udf1f\" },\n { msg: \"Good Effort! Try One More Time!\", icon: \"\ud83d\ude80\" },\n { msg: \"Don't Worry! You've Got This!\", icon: \"\ud83c\udf08\" },\n { msg: \"Believe In Yourself! Let's Go!\", icon: \"\ud83d\udd25\" }\n ];\n\n function showEnglishCheer() {\n const cheer = ENGLISH_CHEERS[Math.floor(Math.random() * ENGLISH_CHEERS.length)];\n const popup = document.getElementById('cheerPopup');\n document.getElementById('cheerMsg').innerText = cheer.msg;\n document.getElementById('cheerIcon').innerText = cheer.icon;\n popup.classList.add('show');\n setTimeout(() => { popup.classList.remove('show'); }, 2600);\n }\n\n const LEVEL_DATA = {\n 1: { size: 3, start: { x: 0, y: 1 }, target: { x: 2, y: 1 }, rocks: [], enemies: [], speech: '\"Wortelnya lurus di sebelah kanan istana! Pasang balok KANAN \u27a1\ufe0f dua kali ya!\"' },\n 2: { size: 3, start: { x: 0, y: 0 }, target: { x: 2, y: 2 }, rocks: [], enemies: [], speech: '\"Ayo belok di istana! Rangkai balok KANAN dulu, lalu ke BAWAH menuju wortel!\"' },\n 3: { size: 4, start: { x: 0, y: 1 }, target: { x: 3, y: 1 }, rocks: [{ x: 1, y: 1 }], enemies: [{ x: 2, y: 1 }], speech: '\"Awas! Ada Serigala Galak \ud83d\udc3a di tangga istana! Rangkai balok memutar ke atas atau ke bawah ya!\"' },\n 4: { size: 4, start: { x: 0, y: 0 }, target: { x: 3, y: 3 }, rocks: [{ x: 1, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }], enemies: [], speech: '\"Banyak batu licin di panggung! Hati-hati, cari celah kotak putih yang kosong untuk melompat.\"' },\n 5: { size: 4, start: { x: 0, y: 3 }, target: { x: 3, y: 0 }, rocks: [{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 2, y: 3 }], enemies: [{ x: 1, y: 1 }], speech: '\"Puncak Istana Terakhir! Ada batu dan serigala, tunjukkan lompatan 3D terbaikmu!\"' }\n };\n\n let levelSekarang = 1; let levelTerbukaMax = 1; let posisiKelinci = { x: 0, y: 0 }; let antreanBalok = []; let sedangBerjalan = false; let draggedArah = null;\n const ikonPanah = { 'atas': '\u2b06\ufe0f', 'bawah': '\u2b07\ufe0f', 'kiri': '\u2b05\ufe0f', 'kanan': '\u27a1\ufe0f' };\n\n function setSpeech(text, avatar = '\ud83d\udc30') {\n document.getElementById('kikoSpeech').innerText = text;\n document.getElementById('kikoAvatar').innerText = avatar;\n }\n\n function refreshLevelButtons() {\n for (let lvl = 1; lvl <= 5; lvl++) {\n const btn = document.getElementById(`lvlBtn-${lvl}`);\n if (!btn) continue;\n btn.classList.toggle('active', lvl === levelSekarang);\n if (lvl <= levelTerbukaMax) { btn.classList.remove('locked'); } else { btn.classList.add('locked'); }\n }\n }\n\n function klikPilihLevel(lvl) {\n if (sedangBerjalan) return;\n if (lvl > levelTerbukaMax) { lockSound(); setSpeech(`\"Selesaikan Level ${levelTerbukaMax} dulu ya agar Level ${lvl} terbuka!\"`, '\ud83d\udd12'); return; }\n levelSekarang = lvl; refreshLevelButtons();\n const config = LEVEL_DATA[lvl]; posisiKelinci = { ...config.start }; antreanBalok = [];\n renderGridStage(); renderScriptChain(); setSpeech(config.speech); playSFX(520, 0.08, 'triangle');\n }\n\n function mulaiPetualangan() {\n initAudioEngine(); startBGM();\n document.getElementById('startModal').style.opacity = '0';\n setTimeout(() => { document.getElementById('startModal').style.display = 'none'; }, 300);\n klikPilihLevel(1);\n }\n\n function renderGridStage() {\n const config = LEVEL_DATA[levelSekarang];\n const grid = document.getElementById('isoGrid'); grid.innerHTML = '';\n grid.style.gridTemplateColumns = `repeat(${config.size}, 1fr)`; grid.style.gridTemplateRows = `repeat(${config.size}, 1fr)`;\n\n for (let y = 0; y < config.size; y++) {\n for (let x = 0; x < config.size; x++) {\n const tile = document.createElement('div'); tile.className = 'iso-tile'; tile.id = `iso-tile-${x}-${y}`;\n const isTarget = (x === config.target.x && y === config.target.y);\n const isRock = config.rocks.some(r => r.x === x && y === r.y);\n const isEnemy = config.enemies.some(e => e.x === x && e.y === y);\n if (isTarget) { tile.innerHTML = `<div class=\"billboard-item item-carrot\">\ud83e\udd55<\/div>`; } \n else if (isEnemy) { tile.innerHTML = `<div class=\"billboard-item item-wolf\">\ud83d\udc3a<\/div>`; } \n else if (isRock) { tile.innerHTML = `<div class=\"billboard-item item-rock\">\ud83e\udea8<\/div>`; }\n grid.appendChild(tile);\n }\n }\n updateRabbitActorPosition(false);\n }\n\n function updateRabbitActorPosition(isHopAnimation = false) {\n const actor = document.getElementById('rabbit3DActor');\n const targetTile = document.getElementById(`iso-tile-${posisiKelinci.x}-${posisiKelinci.y}`);\n document.querySelectorAll('.iso-tile').forEach(t => t.classList.remove('active-tile'));\n if (targetTile) targetTile.classList.add('active-tile');\n if (targetTile && actor) {\n actor.style.left = `${targetTile.offsetLeft}px`; actor.style.top = `${targetTile.offsetTop}px`;\n if (isHopAnimation) {\n actor.classList.remove('jumping', 'falling', 'celebrating'); void actor.offsetWidth; actor.classList.add('jumping');\n setTimeout(() => { actor.classList.remove('jumping'); }, 480);\n }\n }\n }\n\n function handleDragStart(e, arah) { if (sedangBerjalan) { e.preventDefault(); return; } draggedArah = arah; e.dataTransfer.setData('text\/plain', arah); playSFX(550, 0.05, 'sine'); }\n function handleDragOver(e) { e.preventDefault(); document.getElementById('codeDropzone').classList.add('drag-active'); }\n function handleDragLeave(e) { document.getElementById('codeDropzone').classList.remove('drag-active'); }\n function handleDrop(e) { e.preventDefault(); document.getElementById('codeDropzone').classList.remove('drag-active'); const arah = e.dataTransfer.getData('text\/plain') || draggedArah; if (arah) tambahBalok(arah); }\n \n function handlePaletteClick(e, arah) {\n if (sedangBerjalan) return;\n playSFX(440, 0.08, 'triangle');\n setSpeech('\"Tarik (drag) balok jigsaw lalu lepaskan (drop) ke area Tuangkan Kreatifmu ya!\"', '\ud83d\udd90\ufe0f');\n const dropzone = document.getElementById('codeDropzone'); dropzone.classList.remove('shake-hint'); void dropzone.offsetWidth; dropzone.classList.add('shake-hint');\n setTimeout(() => { dropzone.classList.remove('shake-hint'); }, 450);\n }\n\n function tambahBalok(arah) {\n if (sedangBerjalan) return;\n if (antreanBalok.length >= 10) { setSpeech('\"Rantai puzzle sudah panjang! Klik bendera hijau untuk melompat!\"'); playSFX(300, 0.1); return; }\n snapSound(); antreanBalok.push(arah); renderScriptChain(); setSpeech('\"Balok puzzle terpasang! Klik bendera hijau \ud83d\udea9 untuk melompat di istana!\"');\n }\n\n function hapusBalok(idx) { if (sedangBerjalan) return; deleteSound(); antreanBalok.splice(idx, 1); renderScriptChain(); }\n\n function renderScriptChain() {\n const container = document.getElementById('puzzleChain'); const emptyHint = document.getElementById('emptyHint');\n container.innerHTML = '';\n if (antreanBalok.length === 0) { emptyHint.style.display = 'block'; return; }\n emptyHint.style.display = 'none';\n antreanBalok.forEach((arah, i) => {\n const block = document.createElement('div'); block.className = `connected-tile tile-${arah}`; block.id = `script-block-${i}`; block.title = \"Klik keping jigsaw untuk menghapus\"; block.onclick = () => hapusBalok(i);\n block.innerHTML = `<span class=\"tile-step\">${i + 1}<\/span><span class=\"tile-icon\">${ikonPanah[arah]}<\/span><span class=\"tile-text\">${arah.toUpperCase()}<\/span><span class=\"tile-del\">\u2715<\/span>`;\n container.appendChild(block);\n });\n }\n\n function resetStage() {\n if (sedangBerjalan) return;\n const config = LEVEL_DATA[levelSekarang]; posisiKelinci = { ...config.start }; antreanBalok = [];\n const actor = document.getElementById('rabbit3DActor');\n if (actor) { actor.classList.remove('jumping', 'falling', 'celebrating'); actor.style.opacity = '1'; }\n renderGridStage(); renderScriptChain(); setSpeech(config.speech); deleteSound();\n }\n\n async function jalankanProgram() {\n if (sedangBerjalan) return;\n if (antreanBalok.length === 0) { setSpeech('\"Pasang balok panah dulu ya di samping bendera hijau!\"', '\ud83e\udd14'); playSFX(260, 0.15); return; }\n sedangBerjalan = true;\n document.getElementById('btnFlag').disabled = true; document.getElementById('btnStop').disabled = true; document.getElementById('btnRunBig').disabled = true; document.getElementById('btnResetBig').disabled = true;\n\n const config = LEVEL_DATA[levelSekarang]; posisiKelinci = { ...config.start };\n const actor = document.getElementById('rabbit3DActor');\n if (actor) { actor.classList.remove('jumping', 'falling', 'celebrating'); actor.style.opacity = '1'; }\n updateRabbitActorPosition(false);\n setSpeech('\"Kelinci mulai melompat di istana 3D... Hap! Hap!\"', '\ud83d\udc30');\n\n let gagal = false;\n for (let i = 0; i < antreanBalok.length; i++) {\n const activeBlock = document.getElementById(`script-block-${i}`);\n if (activeBlock) activeBlock.classList.add('running');\n\n const aksi = antreanBalok[i];\n let targetX = posisiKelinci.x; let targetY = posisiKelinci.y;\n if (aksi === 'atas') targetY--; if (aksi === 'bawah') targetY++; if (aksi === 'kiri') targetX--; if (aksi === 'kanan') targetX++;\n\n const keluarArena = (targetX < 0 || targetX >= config.size || targetY < 0 || targetY >= config.size);\n const tabrakBatu = config.rocks.some(r => r.x === targetX && r.y === targetY);\n const kenaMusuh = config.enemies.some(e => e.x === targetX && e.y === targetY);\n\n if (keluarArena || tabrakBatu || kenaMusuh) {\n fallSound(); triggerScreenShake(); showEnglishCheer();\n if (actor) { actor.classList.remove('jumping'); actor.classList.add('falling'); }\n if (kenaMusuh) { wolfSound(); setSpeech('\"Aww! Ada Serigala Galak! Kelinci kaget dan terjatuh, ayo perbaiki jalannya!\"', '\ud83d\udc3a'); } \n else if (tabrakBatu) { rockSound(); setSpeech('\"Aduh! Kelinci tersandung batu dan terjatuh! Coba cari rute lain!\"', '\ud83e\udea8'); } \n else { setSpeech('\"Kelinci melompat keluar istana dan terjatuh! Cek kembali arah panahmu.\"', '\ud83c\udf31'); }\n gagal = true; if (activeBlock) activeBlock.classList.remove('running'); break;\n } else {\n posisiKelinci.x = targetX; posisiKelinci.y = targetY; jumpSound(); triggerScreenShake(); updateRabbitActorPosition(true);\n }\n await new Promise(r => setTimeout(r, 680));\n if (activeBlock) activeBlock.classList.remove('running');\n }\n\n if (!gagal) {\n if (posisiKelinci.x === config.target.x && posisiKelinci.y === config.target.y) {\n if (actor) { actor.classList.remove('jumping', 'falling'); actor.classList.add('celebrating'); }\n victoryFanfare(); fireConfetti();\n if (levelSekarang === levelTerbukaMax && levelTerbukaMax < 5) { levelTerbukaMax++; refreshLevelButtons(); }\n tampilkanModalMenang();\n } else {\n playSFX(300, 0.2); showEnglishCheer(); setSpeech('\"Kelinci sudah melompat, tapi wortelnya masih di depan! Tambah balok lagi ya!\"', '\ud83e\udd55');\n }\n }\n\n sedangBerjalan = false;\n document.getElementById('btnFlag').disabled = false; document.getElementById('btnStop').disabled = false; document.getElementById('btnRunBig').disabled = false; document.getElementById('btnResetBig').disabled = false;\n }\n\n function tampilkanModalMenang() {\n const modal = document.getElementById('victoryModal'); const title = document.getElementById('vicTitle'); const desc = document.getElementById('vicDesc'); const btn = document.getElementById('btnNextLevel');\n if (levelSekarang < 5) {\n title.innerText = `Awesome! Level ${levelSekarang} Cleared!`; desc.innerText = `Kelinci melompat gembira dan kenyang memakan wortel! Kunci Level ${levelSekarang + 1} kini sudah terbuka!`; btn.innerHTML = `<span>\ud83c\udf1f<\/span> LANJUT KE LEVEL ${levelSekarang + 1}!`;\n } else {\n title.innerText = 'You Are A 2.5D Castle Champion!'; desc.innerText = 'Luar Biasa! Kamu telah menuntaskan SEMUA 5 level petualangan istana 2.5D MentorOnline!'; btn.innerHTML = `<span>\ud83c\udfc6<\/span> MAIN LAGI DARI LEVEL 1`;\n }\n modal.style.display = 'flex'; modal.style.opacity = '1';\n }\n\n const viewportEl = document.querySelector('.arena-viewport');\n const isoWorldEl = document.getElementById('isoWorld');\n let rotX = 58; let rotZ = -45; let baseTranslateY = -8; let isDragging = false; let lastX = 0; let lastY = 0;\n\n function applyCameraTransform() {\n if (!isoWorldEl) return;\n isoWorldEl.style.transform = `rotateX(${rotX}deg) rotateZ(${rotZ}deg) translateY(${baseTranslateY}px)`;\n document.querySelectorAll('.billboard-item').forEach(el => { el.style.transform = `rotateZ(${-rotZ}deg) rotateX(${-rotX}deg) translateY(-20px)`; });\n const rabbitSprite = document.getElementById('rabbitSprite');\n if (rabbitSprite) { rabbitSprite.style.transform = `rotateZ(${-rotZ}deg) rotateX(${-rotX}deg) translateY(-26px)`; }\n const signBadge = document.querySelector('.sign-badge');\n if (signBadge) { signBadge.style.transform = `rotateZ(${-rotZ}deg) rotateX(${-rotX}deg)`; }\n }\n\n viewportEl.addEventListener('mousedown', (e) => {\n if (e.target.closest('.orbit-hud')) return;\n isDragging = true; lastX = e.clientX; lastY = e.clientY; viewportEl.style.cursor = 'grabbing';\n });\n\n window.addEventListener('mousemove', (e) => {\n if (!isDragging) return;\n const deltaX = e.clientX - lastX; const deltaY = e.clientY - lastY;\n lastX = e.clientX; lastY = e.clientY;\n rotZ += deltaX * 0.55; rotX -= deltaY * 0.35;\n if (rotX < 25) rotX = 25; if (rotX > 82) rotX = 82;\n applyCameraTransform();\n });\n\n window.addEventListener('mouseup', () => { if (isDragging) { isDragging = false; viewportEl.style.cursor = 'grab'; } });\n viewportEl.addEventListener('touchstart', (e) => { if (e.target.closest('.orbit-hud')) return; if (e.touches.length === 1) { isDragging = true; lastX = e.touches[0].clientX; lastY = e.touches[0].clientY; } }, { passive: true });\n window.addEventListener('touchmove', (e) => {\n if (!isDragging || e.touches.length !== 1) return;\n const deltaX = e.touches[0].clientX - lastX; const deltaY = e.touches[0].clientY - lastY;\n lastX = e.touches[0].clientX; lastY = e.touches[0].clientY;\n rotZ += deltaX * 0.65; rotX -= deltaY * 0.4;\n if (rotX < 25) rotX = 25; if (rotX > 82) rotX = 82;\n applyCameraTransform();\n }, { passive: true });\n window.addEventListener('touchend', () => { isDragging = false; });\n\n function putarManual(derajat) { rotZ += derajat; applyCameraTransform(); playSFX(480, 0.05, 'sine'); }\n function resetSudutKamera() { rotX = 58; rotZ = -45; applyCameraTransform(); playSFX(600, 0.08, 'triangle'); }\n setTimeout(() => { applyCameraTransform(); }, 100);\n\n function lanjutLevel() {\n document.getElementById('victoryModal').style.display = 'none';\n if (levelSekarang < 5) { klikPilihLevel(levelSekarang + 1); } else { klikPilihLevel(1); }\n }\n <\/script>\n\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>MentorOnline.asia | Kuasai Skill Digital Masa Depan × \ud83c\udf81 Promo Terbatas Mulai Perjalanan Digitalmu Sekarang! Dapatkan Kelas Trial Interaktif dan Harga Spesial khusus pendaftaran hari ini. \ud83d\ude80 Daftar via WhatsApp \u2794 × Nama Tutor Kelas Diajar Deskripsi detail tentang tutor akan muncul di sini. Membantu memberikan penjelasan kepada siswa dan orang tua. Tanya Jadwal Tutor […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mentoronline.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":5,"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/mentoronline.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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\nMentorOnline.asia | Kuasai Skill Digital Masa Depan<\/title>\n<meta name=\"description\" content=\"Platform mentoring digital intensif 1-on-1. Belajar UI\/UX, Coding, Desain, dan Video Editing bersama praktisi industri.\">\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link rel=\"dns-prefetch\" href=\"https:\/\/www.youtube.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap\" rel=\"stylesheet\">\n\n<style>\n \/* =======================================================\n RESET & VARIABLES (MAIN PAGE)\n ======================================================= *\/\n * { margin: 0; padding: 0; box-sizing: border-box; }\n \n :root {\n --bg-main: #FFFFFF; \n --text-main: #0A192F; \n --text-muted: #475569; \n --color-yellow: #FFD166;\n --color-pink: #EF476F;\n --color-blue: #118AB2;\n --color-green: #06D6A0;\n --color-purple: #8338EC;\n --radius-pill: 100px;\n --radius-xl: 32px;\n --radius-lg: 24px;\n --radius-md: 16px;\n --shadow-solid: 6px 6px 0px var(--text-main);\n --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n \n \/* GAME VARIABLES *\/\n --mentor-blue: #2A72E5;\n --mentor-blue-dark: #1C54AF;\n --mentor-yellow: #FFAE19;\n --mentor-yellow-dark: #D48900;\n --mentor-green: #3CC36E;\n --mentor-green-dark: #2A9953;\n --mentor-red: #FF5A79;\n --mentor-red-dark: #D63554;\n --purple-sky-top: #5527DB;\n --purple-sky-mid: #6836E6;\n --purple-sky-bot: #7D48F7;\n --castle-yellow-top: #FFE57F;\n --castle-yellow-left: #F7CA45;\n --castle-yellow-right: #E2AC22;\n }\n\n body {\n font-family: 'Nunito', sans-serif;\n background-color: var(--bg-main);\n color: var(--text-main);\n line-height: 1.6;\n overflow-x: hidden;\n text-rendering: optimizeLegibility; \n }\n\n h1, h2, h3, h4, .brand, .btn, .price, .step-num { font-family: 'Fredoka', sans-serif; }\n a { text-decoration: none; color: inherit; }\n ul { list-style: none; }\n img { max-width: 100%; display: block; border-radius: var(--radius-md); }\n\n .container { max-width: 1440px; margin: 0 auto; padding: 0 4%; }\n .section-pad { padding: 100px 0; }\n \n .section-header { text-align: center; margin-bottom: 60px; position: relative; }\n .section-header h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: var(--text-main) !important; }\n .section-header p { color: var(--text-muted) !important; font-size: 1.15rem; font-weight: 600; max-width: 700px; margin: 0 auto; }\n\n \/* =======================================================\n BUTTONS\n ======================================================= *\/\n .btn {\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n padding: 14px 32px; border-radius: var(--radius-pill); font-weight: 700;\n font-size: 1.1rem; cursor: pointer; transition: var(--transition-bounce);\n border: 3px solid var(--text-main); text-transform: capitalize;\n will-change: transform; \n }\n .btn-primary { background-color: var(--color-yellow); color: var(--text-main); box-shadow: 4px 4px 0px var(--text-main); }\n .btn-primary:hover { transform: translate(-4px, -4px) scale(1.05); box-shadow: 8px 8px 0px var(--text-main); }\n .btn-secondary { background-color: var(--color-pink); color: white; border: 3px solid var(--text-main); box-shadow: 4px 4px 0px var(--text-main); }\n .btn-secondary:hover { transform: translate(-4px, -4px) scale(1.05); box-shadow: 8px 8px 0px var(--text-main); }\n\n \/* =======================================================\n NAVBAR\n ======================================================= *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0; padding: 20px 0; z-index: 1000;\n background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); transition: var(--transition);\n }\n .nav-inner {\n display: flex; justify-content: space-between; align-items: center;\n background: white; padding: 10px 30px; border-radius: var(--radius-pill);\n border: 3px solid var(--text-main); box-shadow: var(--shadow-solid);\n }\n .nav-brand { font-size: 1.5rem; font-weight: 800; color: var(--color-blue); display: flex; align-items: center; gap: 12px; }\n .brand-logo { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--text-main); object-fit: cover; }\n .nav-links { display: flex; gap: 24px; font-weight: 700; font-size: 1.05rem; align-items: center; }\n .nav-links a { color: var(--text-main); transition: var(--transition); }\n .nav-links a:hover { color: var(--color-pink); }\n .nav-links .nav-highlight { color: var(--color-pink); border-bottom: 2px dashed var(--color-pink); }\n .nav-links .nav-highlight:hover { color: var(--color-blue); border-bottom-color: var(--color-blue); }\n\n \/* =======================================================\n MODALS (POPUP WELCOME & TUTOR)\n ======================================================= *\/\n .popup-overlay {\n position: fixed; top: 0; left: 0; right: 0; bottom: 0;\n background: rgba(10, 25, 47, 0.75); backdrop-filter: blur(4px); z-index: 9999;\n display: flex; align-items: center; justify-content: center;\n opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: 20px;\n }\n .popup-overlay.show { opacity: 1; visibility: visible; }\n .popup-box {\n background-color: var(--bg-main); width: 100%; max-width: 450px;\n border-radius: var(--radius-xl); border: 4px solid var(--text-main);\n box-shadow: 8px 8px 0px var(--text-main); padding: 40px 30px;\n position: relative; text-align: center; transform: translateY(50px) scale(0.9);\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n max-height: 90vh; overflow-y: auto;\n }\n .popup-overlay.show .popup-box { transform: translateY(0) scale(1); }\n .popup-close {\n position: absolute; top: 15px; right: 20px; background: none; border: none;\n font-size: 2rem; color: var(--text-muted); cursor: pointer; transition: var(--transition);\n }\n .popup-close:hover { color: var(--color-pink); transform: scale(1.1) rotate(90deg); }\n .popup-badge { background: var(--color-pink); color: white; font-weight: 700; font-size: 0.85rem; padding: 6px 16px; border-radius: var(--radius-pill); display: inline-block; border: 2px solid var(--text-main); margin-bottom: 20px;}\n \n .tutor-modal-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; text-align: left;}\n .tutor-modal-img { width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--text-main); object-fit: contain; object-position: bottom;}\n .tutor-modal-header h3 { color: var(--text-main); }\n\n .btn-popup { width: 100%; padding: 16px; font-size: 1.2rem; background: var(--color-green); color: var(--text-main); animation: wiggle 2s infinite ease-in-out; cursor: pointer;}\n .btn-popup:hover { animation: none; background: var(--color-yellow); }\n @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } }\n\n \/* =======================================================\n HERO SECTION\n ======================================================= *\/\n .hero {\n background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-12-at-16.59.06.jpeg');\n background-size: cover; background-position: center; background-color: var(--bg-main);\n min-height: 100vh; display: flex; align-items: center; padding-top: 100px; padding-bottom: 50px; position: relative;\n }\n .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; z-index: 1; width: 100%; }\n .hero-badge { display: inline-block; background-color: var(--text-main); color: white; padding: 8px 20px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.9rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 3px 3px 0px var(--color-pink); }\n .hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 24px; color: var(--text-main); }\n .hero-title span { color: var(--color-pink); }\n .hero-desc { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-muted); font-weight: 600; margin-bottom: 40px; max-width: 600px; }\n \n .hero-stats { display: flex; gap: 30px; margin-top: 50px; flex-wrap: wrap;}\n .stat-item { border: 3px solid var(--text-main); padding: 16px 24px; border-radius: var(--radius-xl); box-shadow: 4px 4px 0px var(--text-main); text-align: center; flex: 1; min-width: 140px;}\n .stat-item h4 { font-size: 2.2rem; line-height: 1; margin-bottom: 5px;}\n .stat-item p { font-size: 0.95rem; font-weight: 700; color: inherit; }\n\n .hero-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }\n .h-card { border-radius: var(--radius-xl); color: var(--text-main); display: flex; flex-direction: column; border: 3px solid var(--text-main); transition: var(--transition-bounce); box-shadow: 4px 4px 0px var(--text-main); overflow: hidden; background-color: white; will-change: transform;}\n .h-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 10px 10px 0px var(--text-main); }\n .h-card-img { width: 100%; height: clamp(120px, 15vh, 160px); object-fit: cover; border-bottom: 3px solid var(--text-main); border-radius: 0; }\n .h-card-content { padding: 20px; display: flex; flex-direction: column; flex: 1; }\n .h-card h3 { font-size: 1.2rem; margin-bottom: 8px; font-weight: 700; color: var(--text-main); }\n .h-card p { font-size: 0.9rem; font-weight: 600; margin-bottom: 16px; flex: 1; color: var(--text-main); line-height: 1.4; }\n \n .c-yellow .h-card-content { background-color: var(--color-yellow); }\n .c-pink .h-card-content { background-color: var(--color-pink); }\n .c-blue .h-card-content { background-color: var(--color-blue); }\n .c-green .h-card-content { background-color: var(--color-green); }\n\n \/* =======================================================\n PARTNER SECTION\n ======================================================= *\/\n .partner-section { background-color: #FAFAFA; border-top: 4px solid var(--text-main); border-bottom: 4px solid var(--text-main); overflow: hidden; padding-bottom: 60px; position: relative;}\n .partner-slider { scroll-snap-type: none !important; } \n .partner-slider .partner-card { scroll-snap-align: none !important; cursor: default; }\n\n .partner-card { \n width: 250px; flex-shrink: 0; border: 4px solid var(--text-main); border-radius: var(--radius-xl); \n box-shadow: 6px 6px 0px var(--text-main); background-color: white; display: flex; \n align-items: center; justify-content: center; padding: 20px; overflow: hidden; \n transition: var(--transition-bounce); height: 120px;\n }\n .partner-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 10px 10px 0px var(--text-main); }\n .partner-logo { \n height: 60px; width: auto; max-width: 100%; object-fit: contain; \n filter: grayscale(100%) opacity(0.5); transition: var(--transition-bounce); \n }\n .partner-card:hover .partner-logo { filter: grayscale(0%) opacity(1); transform: scale(1.1); }\n\n \/* =======================================================\n INTERACTIVE GAME SECTION\n ======================================================= *\/\n .interactive-game-section { background-color: #F8FAFC; border-bottom: 4px solid var(--text-main); }\n \n .mentor-app {\n display: flex; flex-direction: column; width: 100%;\n height: 85vh; min-height: 650px; position: relative;\n border-radius: var(--radius-xl); overflow: hidden;\n border: 4px solid var(--text-main); box-shadow: 8px 8px 0px var(--text-main);\n background-color: var(--purple-sky-mid);\n -webkit-tap-highlight-color: transparent; user-select: none;\n }\n \n .screen-shake { animation: shakeScreenAnim 0.38s cubic-bezier(.36,.07,.19,.97) both; }\n @keyframes shakeScreenAnim {\n 10%, 90% { transform: translate3d(-3px, -2px, 0); }\n 20%, 80% { transform: translate3d(4px, 3px, 0); }\n 30%, 50%, 70% { transform: translate3d(-5px, -3px, 0); }\n 40%, 60% { transform: translate3d(5px, 3px, 0); }\n }\n\n #confettiCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; }\n\n .cheer-popup {\n position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%) scale(0);\n background: linear-gradient(135deg, #FF5A79, #FF8F3D); color: white; padding: 14px 26px;\n border-radius: 28px; box-shadow: 0 14px 30px rgba(255, 90, 121, 0.45); border: 4px solid white;\n font-size: 1.4rem; font-weight: 900; display: flex; align-items: center; gap: 12px;\n z-index: 500; pointer-events: none; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .cheer-popup.show { transform: translate(-50%, -50%) scale(1); }\n\n .game-navbar {\n height: 52px; background: rgba(26, 16, 74, 0.78); backdrop-filter: blur(8px);\n border-bottom: 2px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center;\n justify-content: space-between; padding: 0 16px; color: white; flex-shrink: 0; z-index: 10;\n }\n .nav-left, .nav-controls, .nav-right { display: flex; align-items: center; gap: 12px; }\n .game-brand-container { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.18); padding: 4px 12px 4px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.3); }\n .game-brand-logo-img { width: 30px; height: 30px; object-fit: contain; border-radius: 8px; background: white; padding: 2px; }\n .game-brand-name-text { font-size: 1.15rem; font-weight: 900; color: white; letter-spacing: 0.3px; }\n\n .btn-action-ctrl { width: 44px; height: 36px; border-radius: 12px; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; }\n .btn-flag-green { background: var(--mentor-green); box-shadow: 0 3px 0 var(--mentor-green-dark); }\n .btn-flag-green:hover { background: #47D279; }\n .btn-flag-green:active { transform: translateY(2px); box-shadow: none; }\n .btn-stop-red { background: var(--mentor-red); box-shadow: 0 3px 0 var(--mentor-red-dark); }\n .btn-stop-red:hover { background: #FF738C; }\n .btn-stop-red:active { transform: translateY(2px); box-shadow: none; }\n\n .btn-bgm { background: rgba(255,255,255,0.22); border: 2px solid rgba(255,255,255,0.4); color: white; font-family: inherit; font-weight: 800; border-radius: 12px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }\n .level-pills { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.25); padding: 4px 8px; border-radius: 14px; }\n .level-label { font-size: 0.8rem; font-weight: 800; color: #E2EFFF; }\n .lvl-btn { width: 32px; height: 32px; border-radius: 9px; border: none; background: white; color: var(--mentor-blue); font-weight: 900; font-size: 0.95rem; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.2); position: relative; display: flex; align-items: center; justify-content: center; }\n .lvl-btn.active { background: var(--mentor-yellow); color: white; box-shadow: 0 3px 0 var(--mentor-yellow-dark); transform: translateY(-1px); }\n .lvl-btn.locked { background: #8E94A5; color: #D1D5DB; cursor: not-allowed; }\n .lvl-btn.locked::after { content: \"\ud83d\udd12\"; position: absolute; font-size: 9px; top: -3px; right: -3px; }\n\n .app-workspace { flex: 1; display: grid; grid-template-columns: 1.35fr 1fr; min-height: 0; gap: 12px; padding: 8px 14px; }\n .stage-card { background: rgba(255, 255, 255, 0.96); border: 3px solid #FFD452; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.3); position: relative; }\n .stage-header-bar { background: #FFF8E5; padding: 6px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #FFEBB3; }\n .stage-title { font-weight: 800; font-size: 0.88rem; color: #9C5D00; display: flex; align-items: center; gap: 6px; }\n .speech-wrap { margin: 6px 12px 2px 12px; background: #FFF9E6; border: 2px solid #FFE082; border-radius: 14px; padding: 5px 12px; display: flex; align-items: center; gap: 10px; }\n .speech-avatar { font-size: 1.8rem; line-height: 1; }\n .speech-text { font-size: 0.9rem; font-weight: 700; color: #5D4037; margin: 0; line-height: 1.25; }\n\n .bg-cloud { position: absolute; background: rgba(255, 255, 255, 0.88); border-radius: 30px; pointer-events: none; }\n .cloud-1 { width: 75px; height: 36px; top: 16px; left: 24px; transform: rotate(-15deg); filter: blur(0.5px); }\n .cloud-2 { width: 55px; height: 28px; top: 44px; right: 35px; transform: rotate(10deg); }\n .cloud-3 { width: 48px; height: 22px; top: 115px; left: 16px; transform: rotate(-5deg); }\n .bg-balloon { position: absolute; top: 15px; right: 48px; font-size: 2.6rem; animation: gentleHover 3s infinite ease-in-out; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35)); }\n .water-stream { position: absolute; bottom: -10px; right: 18px; width: 140px; height: 48px; background: linear-gradient(90deg, #48C6EF, #2A95D6); border-radius: 14px 0 0 0; transform: skewX(-28deg); box-shadow: 0 4px 15px rgba(42, 149, 214, 0.5); pointer-events: none; }\n .mini-tree { position: absolute; font-size: 1.6rem; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3)); }\n .tree-1 { bottom: 35px; left: 35px; }\n .tree-2 { bottom: 18px; left: 62px; }\n .tree-3 { top: 120px; right: 28px; }\n\n .iso-castle-base { background: var(--castle-yellow-top); border-radius: 36px; padding: 16px; box-shadow: -18px 18px 0px var(--castle-yellow-left), -34px 34px 0px var(--castle-yellow-right), -40px 42px 32px rgba(12, 5, 45, 0.48); position: relative; transform-style: preserve-3d; border: 4px solid #FFF29B; }\n .sign-badge { position: absolute; background: #FF5A79; color: white; font-size: 0.72rem; font-weight: 900; padding: 3px 8px; border-radius: 6px; border: 2px solid white; box-shadow: -2px 3px 0px rgba(0,0,0,0.25); transform: rotateZ(45deg) rotateX(-58deg); pointer-events: none; z-index: 50; }\n .sign-start { top: -14px; left: 10px; }\n .iso-grid { display: grid; gap: clamp(10px, 1.8vmin, 16px); position: relative; transform-style: preserve-3d; }\n .iso-tile { width: clamp(50px, 10.5vmin, 90px); height: clamp(50px, 10.5vmin, 90px); background: #FFFFFF; border-radius: 20px; position: relative; transform-style: preserve-3d; transition: all 0.25s ease; box-shadow: -5px 6px 0px #F2CA52, -9px 12px 14px rgba(110, 75, 10, 0.22); display: flex; align-items: center; justify-content: center; }\n .iso-tile::before { content: \"\"; position: absolute; top: 4px; left: 4px; right: 4px; height: 38%; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.1)); border-radius: 14px 14px 40% 40%; pointer-events: none; }\n .iso-tile.active-tile { background: #E0FBEA; box-shadow: -5px 6px 0px #70D394, -9px 12px 16px rgba(46, 175, 87, 0.35); }\n .billboard-item { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px); transform-origin: center bottom; display: flex; align-items: center; justify-content: center; pointer-events: none; filter: drop-shadow(-4px 8px 6px rgba(0,0,0,0.25)); }\n .item-carrot { font-size: clamp(2.8rem, 6.5vmin, 4.4rem); animation: gentleHover 2.2s infinite ease-in-out; }\n .item-rock { font-size: clamp(2.4rem, 5.5vmin, 3.8rem); }\n .item-wolf { font-size: clamp(2.8rem, 6.5vmin, 4.2rem); animation: wolfWiggle 1.8s infinite ease-in-out; }\n\n .rabbit-3d-actor { position: absolute; width: clamp(50px, 10.5vmin, 90px); height: clamp(50px, 10.5vmin, 90px); top: 0; left: 0; transform-style: preserve-3d; pointer-events: none; z-index: 100; transition: top 0.48s cubic-bezier(0.34, 1.25, 0.64, 1), left 0.48s cubic-bezier(0.34, 1.25, 0.64, 1); display: flex; align-items: center; justify-content: center; }\n .rabbit-body-3d { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px); transform-origin: center bottom; position: relative; width: clamp(50px, 9.2vmin, 88px); height: clamp(50px, 9.2vmin, 88px); filter: drop-shadow(-6px 12px 10px rgba(0,0,0,0.35)); transition: transform 0.2s ease; display: flex; align-items: center; justify-content: center; }\n .rabbit-asset-img { width: 100%; height: 100%; object-fit: contain; }\n .rabbit-3d-actor.jumping .rabbit-body-3d { animation: dynamicHop3D 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }\n .rabbit-3d-actor.falling .rabbit-body-3d { animation: fallDown3D 0.82s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; }\n .rabbit-3d-actor.celebrating .rabbit-body-3d { animation: victoryDance3D 0.9s infinite ease-in-out; }\n .rabbit-shadow-3d { position: absolute; width: 48px; height: 26px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 72%); bottom: -6px; border-radius: 50%; transition: transform 0.48s ease, opacity 0.48s ease; }\n .rabbit-3d-actor.jumping .rabbit-shadow-3d { animation: shadowJump 0.48s ease forwards; }\n .rabbit-3d-actor.falling .rabbit-shadow-3d { opacity: 0; }\n\n .workspace-actions { display: flex; gap: 8px; margin-top: 8px; }\n .btn-mentor-action { font-family: inherit; border: none; border-radius: 14px; padding: 11px 16px; font-size: 1.05rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s ease; }\n .btn-exec-flag { flex: 2; background: var(--mentor-green); color: white; box-shadow: 0 4px 0 var(--mentor-green-dark); }\n .btn-exec-flag:hover { background: #47D279; }\n .btn-exec-flag:active { transform: translateY(2px); box-shadow: none; }\n .btn-reset-workspace { flex: 1; background: #E2E8F0; color: #475569; box-shadow: 0 4px 0 #CBD5E1; }\n .btn-reset-workspace:active { transform: translateY(2px); box-shadow: none; }\n .btn-mentor-action:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }\n\n .game-modal-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(24, 15, 65, 0.82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; border-radius: inherit; }\n .game-modal-box { background: white; max-width: 480px; width: 100%; border-radius: 28px; border: 5px solid #FFD452; padding: 26px 22px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,0.3); animation: modalZoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }\n .game-modal-logo-img { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); animation: gentleBounce 2s infinite ease-in-out; }\n .game-modal-heading { font-size: 1.75rem; font-weight: 900; color: #9C5D00; margin: 10px 0 6px 0; line-height: 1.2;}\n .game-modal-desc { font-size: 1.02rem; color: #64748B; font-weight: 600; line-height: 1.4; margin: 0 0 20px 0; }\n .btn-game-modal-start { width: 100%; background: var(--mentor-green); color: white; border: none; border-radius: 18px; padding: 14px 20px; font-size: 1.25rem; font-weight: 900; cursor: pointer; box-shadow: 0 6px 0 var(--mentor-green-dark); transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; gap: 10px; }\n .btn-game-modal-start:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--mentor-green-dark); }\n\n @keyframes dynamicHop3D { 0% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px) scale(1); } 45% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-85px) scale(1.22); } 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px) scale(1); } }\n @keyframes shadowJump { 0% { transform: scale(1); opacity: 0.45; } 45% { transform: scale(0.5); opacity: 0.15; } 100% { transform: scale(1); opacity: 0.45; } }\n @keyframes fallDown3D { 0% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px) rotate(0deg); opacity: 1; } 35% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-45px) rotate(-35deg); } 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(140px) rotate(110deg) scale(0.6); opacity: 0; } }\n @keyframes victoryDance3D { 0%, 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-26px) scale(1); } 50% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-75px) rotate(15deg) scale(1.25); } }\n @keyframes gentleHover { 0%, 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px); } 50% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-32px); } }\n @keyframes wolfWiggle { 0%, 100% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px) rotate(0deg); } 25% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px) rotate(-8deg); } 75% { transform: rotateZ(45deg) rotateX(-58deg) translateY(-20px) rotate(8deg); } }\n @keyframes gentleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }\n @keyframes popIn { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }\n @keyframes modalZoom { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }\n\n .arena-viewport { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px; position: relative; background: linear-gradient(180deg, var(--purple-sky-top) 0%, var(--purple-sky-mid) 48%, var(--purple-sky-bot) 100%); perspective: 1200px; overflow: hidden; cursor: grab; touch-action: none; }\n .arena-viewport:active { cursor: grabbing; }\n\n .orbit-hud { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(20, 10, 55, 0.75); backdrop-filter: blur(6px); padding: 5px 12px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, 0.3); z-index: 60; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }\n .orbit-btn { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); color: white; font-family: inherit; font-weight: 800; font-size: 0.75rem; border-radius: 12px; padding: 4px 10px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: background 0.15s, transform 0.1s; }\n .orbit-btn:hover { background: rgba(255, 255, 255, 0.35); }\n .orbit-btn:active { transform: scale(0.95); }\n .orbit-hint { font-size: 0.72rem; color: #FFE57F; font-weight: 700; pointer-events: none; white-space: nowrap; }\n .iso-world { transform-style: preserve-3d; position: relative; will-change: transform; }\n\n .coding-card { background: white; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 3px solid #E2E8F0; }\n .category-bar { background: #E2E8F0; padding: 8px 14px; }\n .cat-pill { display: inline-flex; align-items: center; gap: 6px; background: white; padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 800; color: var(--text-main); }\n .cat-dot { width: 10px; height: 10px; background: var(--mentor-blue); border-radius: 50%; }\n\n .block-palette { padding: 10px 14px; background: #FAFBFD; border-bottom: 2px solid #E8EEF5; display: flex; flex-direction: column; gap: 8px; }\n .palette-label { font-size: 0.82rem; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; }\n .blocks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 4px 6px 6px 2px; }\n\n .mentor-block { color: white; border-radius: 12px 18px 18px 12px; padding: 12px 6px 12px 10px; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: grab; position: relative; transition: transform 0.12s, box-shadow 0.12s; touch-action: none; border: 2px solid rgba(255, 255, 255, 0.4); }\n .mentor-block::after { content: \"\"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 18px; height: 22px; border-radius: 0 14px 14px 0; z-index: 5; box-shadow: 2px 3px 0 rgba(0,0,0,0.18); }\n .block-atas { background: #2EC4B6; box-shadow: 0 5px 0 #1B8C81; } .block-atas::after { background: #2EC4B6; }\n .block-bawah { background: #FF9F1C; box-shadow: 0 5px 0 #D47B00; } .block-bawah::after { background: #FF9F1C; }\n .block-kiri { background: #9B5DE5; box-shadow: 0 5px 0 #733CB3; } .block-kiri::after { background: #9B5DE5; }\n .block-kanan { background: #00BBF9; box-shadow: 0 5px 0 #008EC4; } .block-kanan::after { background: #00BBF9; }\n .mentor-block:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.06); }\n .mentor-block:active { transform: translateY(3px) scale(0.98); cursor: grabbing; box-shadow: none !important; }\n .block-symbol { font-size: 2.1rem; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); }\n .block-caption { font-size: 0.85rem; font-weight: 900; margin-top: 4px; pointer-events: none; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.25); color: white;}\n\n .workspace-area { padding: 14px; flex: 1; display: flex; flex-direction: column; }\n .hat-block { background: #FFB703; color: white; border-radius: 20px 20px 8px 8px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 0.95rem; box-shadow: 0 5px 0 #D49000; margin-right: 12px; margin-bottom: 10px; position: relative; align-self: flex-start; border: 2px solid rgba(255,255,255,0.4); }\n .hat-block::after { content: \"\"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 18px; height: 22px; background: #FFB703; border-radius: 0 14px 14px 0; box-shadow: 2px 3px 0 #D49000; z-index: 5; }\n\n .canvas-dropzone { flex: 1; background: #FFFFFF; border: 3.5px dashed #94A3B8; border-radius: 28px; padding: 16px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0px; overflow-y: auto; transition: all 0.25s ease; box-shadow: inset 0 3px 8px rgba(0,0,0,0.04); }\n .canvas-dropzone.drag-active { background: #EFFBF3; border-color: #2EC4B6; border-style: solid; box-shadow: inset 0 0 12px rgba(46, 196, 182, 0.25); }\n .canvas-dropzone.shake-hint { animation: dropzoneGlow 0.4s ease; border-color: #FF9F1C; }\n @keyframes dropzoneGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); border-color: #FF9F1C; } }\n\n .connected-tile { color: white; border-radius: 10px; padding: 9px 16px 9px 18px; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; position: relative; margin-right: 12px; margin-bottom: 10px; cursor: pointer; animation: popIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); border: 2px solid rgba(255, 255, 255, 0.4); }\n .connected-tile::before { content: \"\"; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 12px; height: 20px; background: white; border-radius: 0 12px 12px 0; z-index: 1; }\n .connected-tile::after { content: \"\"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 17px; height: 20px; border-radius: 0 14px 14px 0; z-index: 6; box-shadow: 2px 2px 0 rgba(0,0,0,0.18); }\n .tile-atas { background: #2EC4B6; box-shadow: 0 4px 0 #1B8C81; } .tile-atas::after { background: #2EC4B6; }\n .tile-bawah { background: #FF9F1C; box-shadow: 0 4px 0 #D47B00; } .tile-bawah::after { background: #FF9F1C; }\n .tile-kiri { background: #9B5DE5; box-shadow: 0 4px 0 #733CB3; } .tile-kiri::after { background: #9B5DE5; }\n .tile-kanan { background: #00BBF9; box-shadow: 0 4px 0 #008EC4; } .tile-kanan::after { background: #00BBF9; }\n .connected-tile.running { transform: scale(1.12); filter: brightness(1.2); z-index: 10; box-shadow: 0 6px 14px rgba(0,0,0,0.3) !important; }\n .tile-step { font-size: 0.78rem; background: rgba(0,0,0,0.22); padding: 2px 6px; border-radius: 6px; font-weight: 900; }\n .tile-icon { font-size: 1.55rem; line-height: 1; }\n .tile-text { font-size: 0.85rem; font-weight: 900; letter-spacing: 0.4px; }\n .tile-del { font-size: 0.9rem; color: rgba(255,255,255,0.7); font-weight: bold; margin-left: 4px; }\n .connected-tile:hover .tile-del { color: #FFF0F0; }\n\n @media (max-width: 860px) { .app-workspace { grid-template-columns: 1fr; height: auto; } }\n\n \/* =======================================================\n SLIDER MECHANIC (REUSABLE UTK TUTOR & PARTNER)\n ======================================================= *\/\n .slider-wrapper { position: relative; display: flex; align-items: center; max-width: 1140px; margin: 0 auto;}\n .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: white; border: 3px solid var(--text-main); border-radius: 50%; font-size: 1.5rem; font-weight: bold; cursor: pointer; z-index: 10; box-shadow: 4px 4px 0px var(--text-main); transition: var(--transition-bounce); display: flex; align-items: center; justify-content: center; color: var(--text-main); }\n .slider-btn:hover { background: var(--color-yellow); transform: translateY(-50%) scale(1.1); box-shadow: 6px 6px 0px var(--text-main); }\n .slider-btn.prev { left: -25px; }\n .slider-btn.next { right: -25px; }\n \n .slider-content { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 20px 4px 40px; width: 100%; -ms-overflow-style: none; scrollbar-width: none; }\n .slider-content::-webkit-scrollbar { display: none; }\n\n \/* =======================================================\n SIMULASI (ROADMAP) COLORFUL DGN TEXTURE\n ======================================================= *\/\n .simulasi-section { background-color: var(--color-blue); border-top: 4px solid var(--text-main); border-bottom: 4px solid var(--text-main); background-image: radial-gradient(rgba(255,255,255,0.1) 2px, transparent 2px); background-size: 30px 30px; }\n .simulasi-section .section-header h2 { color: white !important; }\n .simulasi-section .section-header p { color: rgba(255,255,255,0.9) !important; }\n .roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }\n .roadmap-grid::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 4px; background-image: linear-gradient(to right, var(--text-main) 50%, transparent 50%); background-size: 20px 4px; z-index: 0; transform: translateY(-50%); }\n \n .step-card { border: 4px solid var(--text-main); border-radius: var(--radius-xl); padding: 30px 20px; text-align: center; box-shadow: 6px 6px 0px var(--text-main); position: relative; z-index: 1; transition: var(--transition-bounce); will-change: transform; \n \/* Dotted texture here *\/\n background-image: radial-gradient(rgba(255,255,255,0.5) 3px, transparent 3px);\n background-size: 18px 18px;\n }\n .step-card:nth-child(odd):hover { transform: translateY(-10px) scale(1.03) rotate(-2deg); box-shadow: 8px 12px 0px var(--text-main); }\n .step-card:nth-child(even):hover { transform: translateY(-10px) scale(1.03) rotate(2deg); box-shadow: 8px 12px 0px var(--text-main); }\n \n .step-card.c-yellow { background-color: var(--color-yellow); }\n .step-card.c-pink { background-color: var(--color-pink); }\n .step-card.c-blue { background-color: var(--color-blue); }\n .step-card.c-green { background-color: var(--color-green); }\n\n .step-card .step-num { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--text-main); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; margin: 0 auto 16px; background: white; color: var(--text-main); box-shadow: 3px 3px 0px var(--text-main); }\n .step-card h3 { font-size: 1.25rem; margin-bottom: 8px; color: var(--text-main); }\n .step-card p { font-size: 0.95rem; font-weight: 600; color: var(--text-main); line-height: 1.4;}\n \n \/* Override Teks Putih untuk background Pink & Blue *\/\n .step-card.c-pink h3, .step-card.c-pink p, .step-card.c-blue h3, .step-card.c-blue p { color: white; }\n\n .step-badge { background: white; color: var(--text-main); display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); border: 2px solid var(--text-main); font-size: 0.8rem; font-weight: 800; margin-top: 16px; }\n .step-icon { font-size: 3.5rem; margin: 10px 0 20px; filter: drop-shadow(3px 3px 0px var(--text-main)); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }\n .step-card:hover .step-icon { transform: scale(1.15) rotate(10deg); }\n\n \/* =======================================================\n PROMO\n ======================================================= *\/\n .promo-banner { background-color: white; border-radius: var(--radius-xl); padding: 50px; display: flex; align-items: center; justify-content: space-between; border: 4px solid var(--text-main); box-shadow: 8px 8px 0px var(--text-main); transition: var(--transition-bounce); will-change: transform;}\n .promo-banner:hover { transform: translateY(-6px) scale(1.01); box-shadow: 12px 12px 0px var(--text-main); }\n .promo-text h3 { font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: 16px; color: var(--text-main); }\n .promo-text p { color: var(--text-main); font-weight: 600; }\n .promo-text .price { font-size: clamp(2rem, 3vw, 3rem); font-weight: 800; color: var(--text-main); background: var(--color-yellow); padding: 8px 30px; border-radius: var(--radius-pill); display: inline-block; border: 3px solid var(--text-main); transform: rotate(-3deg); margin-bottom: 20px; box-shadow: 4px 4px 0px var(--text-main); transition: var(--transition-bounce); cursor: pointer; }\n .promo-text .price:hover { transform: translateY(-8px) rotate(-5deg) scale(1.08); background-color: var(--color-pink); color: white; }\n\n \/* =======================================================\n FOUNDER\n ======================================================= *\/\n .founder-wrapper { background-color: white; border-radius: var(--radius-xl); padding: 50px; display: grid; grid-template-columns: 1fr 2fr; gap: 50px; align-items: center; border: 4px solid var(--text-main); box-shadow: 8px 8px 0px var(--text-main); transition: var(--transition-bounce); }\n .founder-wrapper:hover { transform: translateY(-6px) scale(1.01); box-shadow: 12px 12px 0px var(--text-main); }\n .founder-img { width: 100%; max-width: 350px; object-fit: contain; margin: 0 auto; display: block; transition: var(--transition-bounce); }\n .founder-wrapper:hover .founder-img { transform: scale(1.03); }\n .founder-info h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 8px; color: var(--text-main); }\n .founder-info .role { color: var(--text-main); font-weight: 800; font-size: 1.1rem; font-family: 'Fredoka', sans-serif; margin-bottom: 24px; display: inline-block; background: var(--color-yellow); padding: 6px 16px; border-radius: var(--radius-pill); border: 2px solid var(--text-main); }\n .founder-info p { font-size: 1.05rem; font-weight: 600; margin-bottom: 16px; line-height: 1.7; color: var(--text-muted); }\n .founder-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }\n .f-tag { background-color: var(--color-blue); color: white; padding: 6px 16px; border-radius: var(--radius-pill); font-size: 0.95rem; font-weight: 800; border: 3px solid var(--text-main); box-shadow: 3px 3px 0px var(--text-main); }\n\n \/* =======================================================\n TUTOR \n ======================================================= *\/\n .tutor-section { background-color: white; border-top: 4px solid var(--text-main); border-bottom: 4px solid var(--text-main); overflow: hidden; padding-bottom: 80px; position: relative;}\n .tutor-slider { scroll-snap-type: x mandatory; }\n .tutor-card { width: 280px; flex-shrink: 0; border: 4px solid var(--text-main); border-radius: var(--radius-xl); box-shadow: 6px 6px 0px var(--text-main); background-color: white; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 30px; overflow: hidden; transition: var(--transition-bounce); scroll-snap-align: center; cursor: pointer; }\n .tutor-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 10px 10px 0px var(--text-main); }\n .tutor-info h3 { font-size: 1.5rem; color: var(--text-main); margin-bottom: 6px; }\n .tutor-info p { font-size: 0.9rem; font-weight: 700; color: white; background: var(--text-main); padding: 4px 14px; border-radius: var(--radius-pill); display: inline-block; margin-bottom: 20px; border: 2px solid var(--text-main);}\n .tutor-img { width: 85%; height: 230px; object-fit: contain; object-position: bottom; margin-top: auto; border-radius: 0; }\n \n .tutor-yellow { background-color: var(--color-yellow); }\n .tutor-pink { background-color: var(--color-pink); }\n .tutor-blue { background-color: var(--color-blue); }\n .tutor-green { background-color: var(--color-green); }\n\n \/* =======================================================\n PARTNER SECTION (MARQUEE HALUS + HOVER)\n ======================================================= *\/\n .partner-section { background-color: #FAFAFA; border-top: 4px solid var(--text-main); border-bottom: 4px solid var(--text-main); overflow: hidden; padding-bottom: 60px; position: relative;}\n .partner-slider { scroll-snap-type: none !important; } \n .partner-slider .partner-card { width: 250px; scroll-snap-align: none !important; cursor: default; height: 120px; padding: 20px; justify-content: center; }\n .partner-logo { height: 60px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(100%) opacity(0.5); transition: var(--transition-bounce); }\n .partner-card:hover .partner-logo { filter: grayscale(0%) opacity(1); transform: scale(1.1); }\n\n \/* =======================================================\n VIDEO & GALERI\n ======================================================= *\/\n .video-wrapper { max-width: 900px; margin: 0 auto; background: white; border: 4px solid var(--text-main); border-radius: var(--radius-xl); padding: 20px; box-shadow: 8px 8px 0px var(--text-main); transition: var(--transition-bounce); }\n .video-wrapper:hover { transform: translateY(-6px) scale(1.01); box-shadow: 12px 12px 0px var(--text-main); }\n .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-md); border: 3px solid var(--text-main); }\n .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }\n\n .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }\n .gallery-item { border-radius: var(--radius-xl); overflow: hidden; border: 4px solid var(--text-main); box-shadow: 6px 6px 0px var(--text-main); aspect-ratio: 4\/3; transition: var(--transition-bounce); background: white; will-change: transform;}\n .gallery-item:nth-child(odd):hover { transform: translateY(-10px) rotate(3deg) scale(1.03); box-shadow: 10px 10px 0px var(--text-main); }\n .gallery-item:nth-child(even):hover { transform: translateY(-10px) rotate(-3deg) scale(1.03); box-shadow: 10px 10px 0px var(--text-main); }\n .gallery-item img { width: 100%; height: 100%; object-fit: cover; }\n\n \/* =======================================================\n BLOG\n ======================================================= *\/\n .blog-section { background-color: #FAFAFA; border-top: 4px solid var(--text-main); }\n .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }\n .blog-card { background: white; border: 3px solid var(--text-main); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 6px 6px 0px var(--text-main); transition: var(--transition-bounce); display: flex; flex-direction: column; will-change: transform; cursor: pointer;}\n .blog-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 10px 10px 0px var(--text-main); }\n .blog-img { width: 100%; height: 180px; object-fit: cover; border-bottom: 3px solid var(--text-main); border-radius: 0; }\n .blog-content { padding: 24px; display: flex; flex-direction: column; flex: 1; }\n .blog-category { font-size: 0.8rem; font-weight: 700; color: var(--color-pink); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }\n .blog-content h3 { font-size: 1.3rem; color: var(--text-main); margin-bottom: 10px; line-height: 1.3; }\n .blog-content p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; flex: 1; line-height: 1.5; }\n .blog-cta { text-align: center; margin-top: 50px; }\n\n \/* =======================================================\n LEADS \/ DAFTAR SECTION\n ======================================================= *\/\n .daftar-section { background-color: white; background-image: radial-gradient(var(--text-muted) 1px, transparent 1px); background-size: 30px 30px; border-top: 4px solid var(--text-main); }\n .form-wrapper { background: white; border-radius: var(--radius-xl); border: 4px solid var(--text-main); box-shadow: 10px 10px 0px var(--text-main); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }\n .form-left { background: var(--color-yellow); padding: 50px; border-right: 4px solid var(--text-main); display: flex; flex-direction: column; justify-content: center; }\n .form-left h2 { font-size: 2.8rem; line-height: 1.1; margin-bottom: 16px; color: var(--text-main); }\n .form-left p { font-size: 1.1rem; font-weight: 600; color: var(--text-main); margin-bottom: 20px; }\n .form-right { padding: 50px; background: white; }\n .form-right h3 { color: var(--text-main); }\n .form-group { margin-bottom: 20px; }\n .form-control { width: 100%; padding: 16px; border-radius: var(--radius-md); border: 3px solid var(--text-main); font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 600; transition: var(--transition); background-color: #F8FAFC; color: var(--text-main); }\n .form-control:focus { outline: none; background-color: white; border-color: var(--color-blue); box-shadow: 4px 4px 0px var(--color-blue); }\n .form-control::placeholder { color: #94A3B8; }\n\n \/* =======================================================\n FAQ SECTION\n ======================================================= *\/\n .faq-section { background-color: white; border-top: 4px solid var(--text-main); }\n .faq-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }\n .faq-item { background: white; border: 3px solid var(--text-main); border-radius: var(--radius-lg); box-shadow: 4px 4px 0px var(--text-main); overflow: hidden; transition: var(--transition); }\n .faq-question { width: 100%; text-align: left; padding: 20px 24px; font-size: 1.2rem; font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--text-main); background: white; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); }\n .faq-question:hover { background: var(--color-yellow); }\n .faq-icon { font-size: 1.5rem; transition: transform 0.3s ease; color: var(--text-main); font-weight: 800; }\n .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: white; }\n .faq-answer p { padding: 0 24px 20px; color: var(--text-main); font-weight: 600; font-size: 1.05rem; line-height: 1.6; }\n .faq-item.active .faq-question { background: var(--color-yellow); border-bottom: 2px dashed var(--text-main); }\n .faq-item.active .faq-icon { transform: rotate(45deg); }\n\n \/* =======================================================\n FOOTER & SOSIAL MEDIA TAB\n ======================================================= *\/\n footer { background-color: white; color: var(--text-main); padding: 80px 0 30px; border-top-left-radius: 60px; border-top-right-radius: 60px; border-top: 4px solid var(--text-main); position: relative; }\n .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }\n .footer-brand { font-size: 1.8rem; font-weight: 800; margin-bottom: 16px; color: var(--color-blue); }\n .footer-links h4 { margin-bottom: 20px; font-size: 1.3rem; color: var(--color-pink); }\n .footer-links li { margin-bottom: 10px; font-weight: 600; font-size: 1.05rem; color: var(--text-main);}\n .footer-links li a:hover { color: var(--color-blue); }\n .footer-bottom { text-align: center; padding-top: 24px; border-top: 2px dashed var(--text-muted); font-weight: 600; color: var(--text-muted); font-size: 0.9rem;}\n \n .social-tab {\n display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;\n background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);\n color: white; padding: 10px 24px; border-radius: var(--radius-pill);\n font-weight: 700; font-size: 1rem; border: 3px solid var(--text-main);\n box-shadow: 4px 4px 0px var(--text-main); transition: var(--transition-bounce);\n cursor: pointer;\n }\n .social-tab:hover { transform: translateY(-4px) scale(1.05); box-shadow: 6px 6px 0px var(--text-main); color: white; }\n\n .wa-float { position: fixed; bottom: 30px; right: 30px; background-color: #06D6A0; color: var(--text-main); width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; border: 4px solid var(--text-main); box-shadow: 4px 4px 0px var(--text-main); z-index: 1000; transition: var(--transition-bounce); cursor: pointer;}\n .wa-float:hover { transform: scale(1.1) rotate(10deg); }\n\n \/* =======================================================\n ANIMATION (SCROLL REVEAL)\n ======================================================= *\/\n .reveal { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform, opacity; }\n .reveal.active { opacity: 1; transform: translateY(0); }\n\n \/* =======================================================\n RESPONSIVE\n ======================================================= *\/\n @media (max-width: 1024px) {\n .hero-grid { grid-template-columns: 1fr; text-align: center;}\n .hero-desc { margin: 0 auto 30px auto; }\n .hero-stats { justify-content: center; }\n .founder-wrapper { grid-template-columns: 1fr; text-align: center; }\n .founder-tags { justify-content: center; }\n .roadmap-grid { grid-template-columns: repeat(2, 1fr); }\n .roadmap-grid::before { display: none; }\n .form-wrapper { grid-template-columns: 1fr; }\n .form-left { border-right: none; border-bottom: 4px solid var(--text-main); text-align: center;}\n }\n @media (max-width: 768px) {\n .hero { min-height: auto; padding-top: 130px; padding-bottom: 50px; } \n .nav-links { display: none; }\n .nav-inner { padding: 10px 16px; }\n .brand-text { display: none; } \n .hero-cards { grid-template-columns: 1fr; text-align: left; }\n .promo-banner { flex-direction: column; text-align: center; gap: 24px; padding: 30px 20px; }\n .footer-grid, .roadmap-grid { grid-template-columns: 1fr; gap: 30px;}\n .hero-stats { flex-direction: column; gap: 16px; }\n .popup-box { padding: 30px 20px; }\n .slider-btn { display: none; } \n .form-right, .form-left { padding: 30px 20px; }\n .app-workspace { grid-template-columns: 1fr; height: auto; }\n }\n<\/style>\n<\/head>\n<body>\n\n \n <div class=\"popup-overlay\" id=\"welcomePopup\">\n <div class=\"popup-box\">\n <button class=\"popup-close\" id=\"closePopup\" aria-label=\"Tutup\">×<\/button>\n <div class=\"popup-badge\">\ud83c\udf81 Promo Terbatas<\/div>\n <h3>Mulai Perjalanan Digitalmu Sekarang!<\/h3>\n <p>Dapatkan Kelas Trial Interaktif dan Harga Spesial khusus pendaftaran hari ini.<\/p>\n <div class=\"popup-img-wrapper\" style=\"font-size: 4rem; background: var(--color-yellow); border-radius: 50%; width: 120px; height: 120px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--text-main); box-shadow: inset 0px -5px 0px rgba(0,0,0,0.1);\">\ud83d\ude80<\/div>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20mendapatkan%20info%20dari%20website%20dan%20ingin%20mendaftar%20kelas%20dengan%20promo%20spesial!\" class=\"btn btn-popup\" target=\"_blank\" rel=\"noopener noreferrer\">\n Daftar via WhatsApp \u2794\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"popup-overlay\" id=\"tutorModal\">\n <div class=\"popup-box\" style=\"text-align: left;\">\n <button class=\"popup-close\" onclick=\"closeTutorModal()\" aria-label=\"Tutup\">×<\/button>\n \n <div class=\"tutor-modal-header\">\n <img decoding=\"async\" id=\"tm-img\" src=\"\" class=\"tutor-modal-img\" alt=\"Foto Tutor\">\n <div>\n <h3 id=\"tm-name\" style=\"margin-bottom: 8px; color: var(--text-main);\">Nama Tutor<\/h3>\n <span id=\"tm-role\" class=\"popup-badge\" style=\"margin-bottom: 0;\">Kelas Diajar<\/span>\n <\/div>\n <\/div>\n \n <p id=\"tm-desc\" style=\"font-size: 1.05rem; font-weight: 600; color: var(--text-main); line-height: 1.6;\">\n Deskripsi detail tentang tutor akan muncul di sini. Membantu memberikan penjelasan kepada siswa dan orang tua.\n <\/p>\n \n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20tanya%20jadwal%20kelas!\" class=\"btn btn-primary\" style=\"width: 100%; margin-top: 10px;\" target=\"_blank\">Tanya Jadwal Tutor \u2794<\/a>\n <\/div>\n <\/div>\n\n \n <nav>\n <div class=\"container nav-inner\">\n <div class=\"nav-brand\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/03\/UrbanDigitalHub_Logo_Only.png\" alt=\"Logo MentorOnline\" class=\"brand-logo\" fetchpriority=\"high\" onerror=\"this.src='https:\/\/via.placeholder.com\/44x44\/FFD166\/1E293B?text=MO'\">\n <span class=\"brand-text\">MentorOnline<\/span>\n <\/div>\n <div class=\"nav-links\">\n <a href=\"#program\">Program<\/a>\n <a href=\"#tutor\">Tutor<\/a>\n <a href=\"#simulasi\">Kurikulum<\/a>\n <a href=\"#galeri\">Galeri<\/a>\n <a href=\"https:\/\/mentoronline.asia\/blog\/\">Blog<\/a>\n <a href=\"https:\/\/mentoronline.asia\/affiliasi-guru\/\" class=\"nav-highlight\">Afiliasi Guru \ud83c\udf1f<\/a>\n <\/div>\n <a href=\"#daftar\" class=\"btn btn-primary\">Mulai Kelas Trial<\/a>\n <\/div>\n <\/nav>\n\n \n <section class=\"hero\">\n <div class=\"container hero-grid\">\n <div class=\"reveal\">\n <div class=\"hero-badge\">\ud83d\ude80 Mentoring Intensif 1-on-1<\/div>\n <h1 class=\"hero-title\">\n Siapkan Skill Digital Masa Depanmu <span>Mulai Hari Ini!<\/span>\n <\/h1>\n <p class=\"hero-desc\">\n Belajar langsung dari praktisi industri lewat kelas interaktif yang menyenangkan. Bangun portofolio digitalmu dan jadilah talenta yang siap bersaing!\n <\/p>\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start;\">\n <a href=\"#program\" class=\"btn btn-primary\">Eksplor Program \u2794<\/a>\n <\/div>\n \n \n <div class=\"hero-stats\">\n <div class=\"stat-item\" style=\"background-color: var(--color-yellow); color: var(--text-main);\">\n <h4 style=\"color: var(--text-main);\">\ud83d\udc68\u200d\ud83c\udf93 100+<\/h4>\n <p>Alumni Sukses<\/p>\n <\/div>\n <div class=\"stat-item\" style=\"background-color: var(--color-pink); color: white; border-color: var(--text-main);\">\n <h4 style=\"color: white;\">\ud83d\udcbb 100%<\/h4>\n <p>Project Based<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-cards reveal\" id=\"program\">\n <div class=\"h-card c-yellow\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/kak-kiel-test-1.jpg\" alt=\"Kelas Gambar\" class=\"h-card-img\" fetchpriority=\"high\">\n <div class=\"h-card-content\">\n <h3>\ud83c\udfa8 Gambar & Ilustrasi<\/h3>\n <p>Ciptakan IP karaktermu sendiri dari sketsa hingga mahakarya digital.<\/p>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20mendaftar%20Kelas%20Gambar%20&%20Ilustrasi.%20Mohon%20info%20selanjutnya!\" class=\"btn btn-primary\" style=\"padding: 10px; font-size: 1rem; width: 100%; border: 2px solid var(--text-main);\" target=\"_blank\" rel=\"noopener noreferrer\">Pilih Kelas Ini<\/a>\n <\/div>\n <\/div>\n <div class=\"h-card c-pink\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/bizant-test1.png\" alt=\"Kelas Coding\" class=\"h-card-img\" fetchpriority=\"high\">\n <div class=\"h-card-content\">\n <h3>\ud83d\udcbb Dasar Programming<\/h3>\n <p>Asah logika komputasi dan bangun game atau aplikasimu sendiri!<\/p>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20mendaftar%20Kelas%20Dasar%20Programming.%20Mohon%20info%20selanjutnya!\" class=\"btn btn-secondary\" style=\"padding: 10px; font-size: 1rem; width: 100%; background: white; color: var(--text-main); border: 2px solid var(--text-main);\" target=\"_blank\" rel=\"noopener noreferrer\">Pilih Kelas Ini<\/a>\n <\/div>\n <\/div>\n <div class=\"h-card c-blue\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-12-pukul-17.31.31.png\" alt=\"Kelas UI\/UX\" class=\"h-card-img\" loading=\"lazy\">\n <div class=\"h-card-content\">\n <h3>\ud83d\udcf1 Desain UI\/UX<\/h3>\n <p>Rancang antarmuka visual aplikasi masa depan standar industri.<\/p>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20mendaftar%20Kelas%20Desain%20UI\/UX.%20Mohon%20info%20selanjutnya!\" class=\"btn btn-secondary\" style=\"padding: 10px; font-size: 1rem; width: 100%; background: var(--color-yellow); color: var(--text-main); border: 2px solid var(--text-main);\" target=\"_blank\" rel=\"noopener noreferrer\">Pilih Kelas Ini<\/a>\n <\/div>\n <\/div>\n <div class=\"h-card c-green\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/capcut.jpg\" alt=\"Kelas Video Editing\" class=\"h-card-img\" loading=\"lazy\">\n <div class=\"h-card-content\">\n <h3>\ud83c\udfac Video Editing<\/h3>\n <p>Pelajari teknik editing sinematik dan jadilah kreator konten andal.<\/p>\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20mendaftar%20Kelas%20Video%20Editing.%20Mohon%20info%20selanjutnya!\" class=\"btn btn-primary\" style=\"padding: 10px; font-size: 1rem; width: 100%; border: 2px solid var(--text-main);\" target=\"_blank\" rel=\"noopener noreferrer\">Pilih Kelas Ini<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"partners\" class=\"section-pad partner-section\">\n <div class=\"container\">\n <div class=\"section-header reveal\" style=\"margin-bottom: 40px;\">\n <h2>Dipercaya & Berkolaborasi Bersama \ud83e\udd1d<\/h2>\n <p>Kami bekerja sama dengan berbagai pihak untuk memberikan kualitas layanan terbaik.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"slider-wrapper reveal\">\n <button class=\"slider-btn prev\" aria-label=\"Previous\" onclick=\"slidePartner(-280)\">❮<\/button>\n <div class=\"slider-content partner-slider\" id=\"partnerSlider\">\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/sp.png\" alt=\"Partner 1\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/gpa.webp\" alt=\"Partner 2\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n \n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/tk-atirah-racing.jpeg\" alt=\"Partner 4\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n \n \n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/sp.png\" alt=\"Partner 1\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/gpa.webp\" alt=\"Partner 2\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-12-pukul-20.11.18.png\" alt=\"Partner 3\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <div class=\"partner-card\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/tk-atirah-racing.jpeg\" alt=\"Partner 4\" class=\"partner-logo\" loading=\"lazy\">\n <\/div>\n <\/div>\n <button class=\"slider-btn next\" aria-label=\"Next\" onclick=\"slidePartner(280)\">❯<\/button>\n <\/div>\n <\/section>\n\n \n <section id=\"game-demo\" class=\"section-pad interactive-game-section\">\n <div class=\"container reveal\">\n <div class=\"section-header\" style=\"margin-bottom: 40px;\">\n <h2>Cobain Keseruan Belajar Coding! \ud83c\udfae<\/h2>\n <p>Tarik balok panah dan bantu kelinci mendapatkan wortel. Seperti inilah serunya metode belajar interaktif kami!<\/p>\n <\/div>\n\n \n <div class=\"mentor-app\">\n \n <canvas id=\"confettiCanvas\"><\/canvas>\n <div class=\"cheer-popup\" id=\"cheerPopup\">\n <span id=\"cheerIcon\">\ud83d\udcaa<\/span>\n <span id=\"cheerMsg\">Never Give Up! You Can Do It!<\/span>\n <\/div>\n <div class=\"game-modal-backdrop\" id=\"startModal\">\n <div class=\"game-modal-box\">\n <div style=\"margin: 0 auto 20px; width: 80px; height: 80px; background: var(--color-yellow); border-radius: 50%; border: 3px solid var(--text-main); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; box-shadow: inset 0px -5px 0px rgba(0,0,0,0.1);\">\ud83d\udc30<\/div>\n <h2 class=\"game-modal-heading\">MentorOnline 2.5D Castle!<\/h2>\n <p class=\"game-modal-desc\">\n Ayo bantu Kelinci melompat di istana kuning! Rangkai balok puzzle arah di sebelah bendera hijau untuk memetik wortel lezat.\n <\/p>\n <button class=\"btn-game-modal-start\" onclick=\"mulaiPetualangan()\">\n <span>\ud83d\udea9\ud83d\ude80<\/span> AYO KITA MULAI!\n <\/button>\n <\/div>\n <\/div>\n <div class=\"game-modal-backdrop\" id=\"victoryModal\" style=\"display: none;\">\n <div class=\"game-modal-box\">\n <div style=\"font-size: 4rem; line-height: 1; margin-bottom: 8px;\">\ud83c\udf89\ud83e\udd55\u2728<\/div>\n <h2 class=\"game-modal-heading\" id=\"vicTitle\">Great Job! You Did It!<\/h2>\n <p class=\"game-modal-desc\" id=\"vicDesc\">\n Kelinci sukses melompat dan memakan wortel lezat! Level berikutnya sekarang sudah terbuka!\n <\/p>\n <button class=\"btn-game-modal-start\" id=\"btnNextLevel\" onclick=\"lanjutLevel()\">\n <span>\ud83c\udf1f<\/span> LANJUT KE LEVEL BERIKUTNYA!\n <\/button>\n <\/div>\n <\/div>\n\n <header class=\"game-navbar\">\n <div class=\"nav-left\">\n <div class=\"game-brand-container\">\n <span class=\"game-brand-name-text\">Coding Simulation<\/span>\n <\/div>\n <\/div>\n <div class=\"nav-controls\">\n <button class=\"btn-action-ctrl btn-flag-green\" id=\"btnFlag\" title=\"Jalankan Kode\" onclick=\"jalankanProgram()\"><span>\ud83d\udea9<\/span><\/button>\n <button class=\"btn-action-ctrl btn-stop-red\" id=\"btnStop\" title=\"Hentikan \/ Ulangi\" onclick=\"resetStage()\"><span>\ud83d\uded1<\/span><\/button>\n <\/div>\n <div class=\"nav-right\">\n <button class=\"btn-bgm\" id=\"btnMusic\" onclick=\"toggleBGM()\">\n <span id=\"musicIcon\">\ud83d\udd08<\/span> <span id=\"musicLabel\">BGM OFF<\/span>\n <\/button>\n <div class=\"level-pills\">\n <span class=\"level-label\">Level:<\/span>\n <button class=\"lvl-btn active\" id=\"lvlBtn-1\" onclick=\"klikPilihLevel(1)\">1<\/button>\n <button class=\"lvl-btn locked\" id=\"lvlBtn-2\" onclick=\"klikPilihLevel(2)\">2<\/button>\n <button class=\"lvl-btn locked\" id=\"lvlBtn-3\" onclick=\"klikPilihLevel(3)\">3<\/button>\n <button class=\"lvl-btn locked\" id=\"lvlBtn-4\" onclick=\"klikPilihLevel(4)\">4<\/button>\n <button class=\"lvl-btn locked\" id=\"lvlBtn-5\" onclick=\"klikPilihLevel(5)\">5<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"app-workspace\">\n \n <section class=\"stage-card\">\n <div class=\"stage-header-bar\">\n <div class=\"stage-title\"><span>\ud83c\udff0 Panggung Istana 2.5D<\/span><\/div>\n <\/div>\n <div class=\"speech-wrap\">\n <div class=\"speech-avatar\" id=\"kikoAvatar\">\ud83d\udc30<\/div>\n <p class=\"speech-text\" id=\"kikoSpeech\">\n \"Halo sahabat cilik! Pasang balok panah di samping bendera hijau ya!\"\n <\/p>\n <\/div>\n <div class=\"arena-viewport\">\n <div class=\"bg-cloud cloud-1\"><\/div>\n <div class=\"bg-cloud cloud-2\"><\/div>\n <div class=\"bg-cloud cloud-3\"><\/div>\n <div class=\"bg-balloon\">\ud83c\udf88<\/div>\n <div class=\"mini-tree tree-1\">\ud83c\udf32<\/div>\n <div class=\"mini-tree tree-2\">\ud83c\udf32<\/div>\n <div class=\"mini-tree tree-3\">\ud83c\udf32<\/div>\n <div class=\"water-stream\"><\/div>\n \n <div class=\"orbit-hud\">\n <span class=\"orbit-hint\">\ud83d\udd04 Putar 360\u00b0:<\/span>\n <button class=\"orbit-btn\" onclick=\"putarManual(-45)\">\u21b6 Kiri<\/button>\n <button class=\"orbit-btn\" onclick=\"resetSudutKamera()\">\ud83c\udfaf Normal<\/button>\n <button class=\"orbit-btn\" onclick=\"putarManual(45)\">\u21b7 Kanan<\/button>\n <\/div>\n\n <div class=\"iso-world\" id=\"isoWorld\">\n <div class=\"iso-castle-base\">\n <div class=\"sign-badge sign-start\">START \ud83d\udea9<\/div>\n <div class=\"iso-grid\" id=\"isoGrid\"><\/div>\n <div class=\"rabbit-3d-actor\" id=\"rabbit3DActor\">\n <div class=\"rabbit-shadow-3d\"><\/div>\n <div class=\"rabbit-body-3d\" id=\"rabbitSprite\"><img decoding=\"async\" class=\"rabbit-asset-img\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAAEBCAYAAACexdu5AABD+UlEQVR4nO29eZSU1Z3\/\/773PkttvUADLYuyNCCIyKICyuEoxhiyCHM0MTNqcjyJJqNZZrJO5mRill8cJ3N04pyZRLPNHBOXJKgzRuNEvxoNWRQVAYUG2ZtuoJulu2uvZ7v398fT9+nqpml6qep6qrkvTx2BXupW1X3ez+d+ViKEgEKhUAAArfQCFApFeFCCoFAoApQgKBSKACUICoUiQAmCQqEIUIKgUCgClCAoFIoAJQgKhSJACYJCoQhQgqBQKAKUICgUigAlCAqFIkAJgkKhCFCCoFAoApQgKBSKACUICoUiQAmCQqEIUIKgqHq6O4+rtl8lQgmCoup57tln8OKTjwtkOpUwjBIlCIqqpu1Yi2jZvw+ZjqPY8sqLlV5O1aMEQVHV7Hj7HVj5LGpMDSfaDuPEwWZlJYwCJQiKqqbt4AEIx4amCZg6wZ7t2yu9pKpGCYKiqjl0qBUa0+B6HojrovvoEXTueUdZCSNECYKiatmzZ4\/I5CxoRgJugUMnGgzXwaHmdyq9tKpFCYKiajlx4gQ4KByPw\/F8oyBhaug8dhSFoy3KShgBShAUVUvr4VZQATiOA9v1IABwAgjPRfO2rZVeXlWiBEFRtZw4eQIA4HkebM8DJ\/6\/m7qG462HYbUfVlbCMFGCoKhaurq6oOsMnLsQxLcOOHdBhAeN29jfvKPSS6w6lCAoqhbPcaFRCkIICo4NUN9EIILDEB7Sp05VeIXVhxIERdViWRY0TQelGizLgb+dKagANADpkx1obd6hjg3DQAmComqxXce3CiiB7XjgoCBgoABYj5VweN+uSi+zqlCCoKhKmpubBeccHgQ8IWA5Nrgg8GMNABUcBjiyR1pUotIwUIKgqGo45xCCwPEEHMfr8zUiOEghh8O7lZUwVJQgKKoaQRg4AVyXo+A4oH1sAYp4NILjR9qQO9aqrIQhoARBUdXQnsiCBwLP5QB8y0DmJAjPg7BtHN77bqWWWFUoQVBUJUII2LYNLjyAEnBGkHMcCMEhBIcHDk9wMFDETQOHdu+Ac1wlKp0NJQiKqkTXdVBKIYTw\/w+KgmODEw5OOAQBBAEIIdAgoDkWju7fV+llhx4lCIqqZP78+UTXdQjhAZTCg0C+UDjt+zjlYAwwhEDb3r2wOzuUlTAIShAUVQulvdvXEwQFxwVAIQQBIRSiJ4uRCw9x00Dy1El0HD5cuQVXAUoQFFWLpmkghMHzBAQBPFeAUBMQGiAoKDiE8CCEgOu4SMSiaNmnnIuDoQRBUbVEo1EAvp+AUgpPEOQtD6LfthZCgBOACqCzvR3J\/XvVseEMKEFQVC21tbXgngfGGChl4NxDtpAHmP9niYDvYAQA3RFoP3ioIuutBpQgKKqWaDQKzv3cA0r8tOWcbQVVj32TlDgoOHQIHG9thdd1SlkJA6AEQVG1NDY2ggt5XVNwADnHgkcBSlnw7wB6EpU4YoaOQqYb7Udaxn7BVYASBEXVEo\/HAQAu9\/yiJkpQ8BzYwgOhBGQAG4AyANzDiaNHx3axVYISBEXVMn36dED4PRAA3wqwHBsO9yC48J2NAn2+zuEBVOBIywGI9Al1bOiHEgRF1XLxxRcTwI8iCCEgCIXFBRxOe0wBCggKInr9CQWnANPQ4GQzOLb\/YAVXH06UICiqmkQiASH9CILCcjUkszY4ZeAQ8OCLBRcE4AI6YyCug1oGtB86UNnFhxAlCIqq5rzJUwAuwDkHJxSc6sg7\/p89wU\/7fgY\/YUmDQCHZVYEVhxslCIqqZuasmeAeB2PM9xtQimzegst5r+UwAIxSZFNpdO1Vw2GLUYKgqGrOmzwJEG6vHwFAwbH9\/ggyG6kfhPjbnlCBjmMq2lCMEgRFVTNnzhyYpgnHcQBG4QEo2A660hkY8WjQKIWKvolKhFAwEHS0HgIKSWUl9KAEQVHVNEyZTGoTcVABMMZAiJ+glHd9K2EwGBGwChl4KeVLkChBUFQ9s2bOgsddECJAGAWHQCaXh8tlDcPpzkUqfCtB2JY6NhShBEFR9cxqmg23p8yZEAIOiqzDYYP1JC4NDOmJNnQeOzaGqw03ShAUVc+8efMRMWMQgsCyLHDGkHQpum2AE+rPcxJ9HwCgccB0gVTHSSCj\/AiAP\/FKUeW0tx0R7S37oVEKTzDEErWomViPSCyG+okTBj9IjwOmnDeVTJw4UXR0dPhNU5gGx\/XQmcpiSn1kUCtBJwyFXAFuKg0tUTeGqw4nShDGAfve3ooj7zbDSWeRzhXQmckgxV3QqIn6xESRqKvF5MYpmDCpAVOnT0djYyMmT24cV0Ixb948tLW1wdR1aITC4g66UknwCbGgOQohfrYiAAjKAUEhCOC6FtqPtmHGtBkVfhWVRwnCOCBuGohTgsnTJsMDgQ2CE\/ksOlNpJJNJHD3Zjr17msEpAdV0mNE4Jk+eLBobp2LRokVYvnx51YtDU1MTXn75ZXCPAz2Vz57rwiN+JwQQgPWMeQPhwf9d1wXTDbQfbcUMrKrM4kOEEoRxgGFqYMQBdwQgCDRQTNE0TG5ogNdQj65cDseT3ejMW8h7ApZVQMuBFrS1HMVrr72Gxx57TDQ1NWH27NlYt25dVYrDsmXLyKRJk0Qul4PtuWCGDsez0Z3NIlGXgLBtgAsQSgAQgPjDXExTh+O4yKe6gFxSIFZXla+\/VChBGAfEa+N+cR9xAQhQoYFyDYA\/o2ByzERD7XTkPIHWjk6cTGeR81xoEQM2MUE1hj179mDPnj146aWXxMyZM7F48WJcddVVVXVxzJgxA83NzYhGoyCEwCrkkcrlYSXi0EBBCEDhgggeWAmcu2AE8KwCvK6TYLFz24+gBGEcMHFCAxilAHxB4ITDj71TcM8G4wSMA1HXw8LGSchNrMOpTAaHT5xCzgFYNA7TNMEYg+d5OHjwIPbt24dXXnlFLFq0CB\/+8IerQhguueQSNDc3B38XBEimU8hPrEWcMrAB4giu8ECpAdsu4ETHcZw3vWkMVxw+VNhxHBCvqYOgfk9BTuDf\/QgHETYYBSgENMER1yiInUUELs6fWIPL5s\/BxRdMRQ0T4LkU3EIW3LWhM4poNIp0Oo1NmzbhC3\/39+IXD\/9ctBw8GOrQ3MqVK4mmaXAcx\/cNGDqSlgPb8\/WM9DReLS5xkAVQnmMj3a0yFpUgjANY\/WRS39iIgvCtAo0DmnDBCAcjFKAUnHB48MAooFGAug4i3MLs2iguu2AKLpl5HibHdcDOQaMAuAedaaiJ1cBgBra88QZ+9MOH8PB\/\/0ycOBHe6UdNTU3wPA+e54FQDVlb4EQqDY1QCM\/xjws9UKCnzRqHoVGcOKkSlJQgjBMmNjb6nYJ6Yu4EHATy6NAXKjgYAE0AumshDg\/Ta2NYOKMRF86YCmZlwZwcNOFCg4Cu66iJxiE8D2+89ibuvedf8Pzzz4dSFC6\/\/HLYtg1N0+BxgBgmTnZnYDk2CCXoXwDJKAPh\/ntlFbJwkud2WzUlCOOEaRfMAZh22oY\/G5z449NNj6OOA7NrYrhs9vmYmtAR4QV4Th7CcwHCoTENtbW1oIThiSeewj3fvVfseXdfqC6gSy+9lNTX1\/tHBkqhMYZMPodkwQaNRsFJ3y1PSE\/LdkJg5Qvo6jy3jw1KEMYJ0boJaGichuAjFf5EZD6Ej5gKgAkOnXMYnoMaJnDR+dMxf\/oU1DIOk9vwrAK4a0P2KZzUMAUdxzvw0I8ewm9+82yoRGHBggWwLAtez3\/MNHAqk0HeQ+9UJ0GDBq2MUDDuvw+5VLqia680ShDGC4kpZNJ5M5DNF+B5Ag53g7tfMYRQEJnfD0AHASM9LcuFA40KGPBgOHk0RnQsPf88zJqQQI3GQAAIzsEMf+pyNGpC1xl+\/\/sX8YMf\/CA0orBo8cUAJb0OQ3Ac60qiQFiPQNKeFms9zkZCwAiFJgi6O09WcOWVRwnCOGLSedPBdBOE6dA1E67nDvlnBeHBcYMKgHFA4y7iFJg5uR7zpjWiViPgTgHctgAuQKkGxhgYY9i\/fz++8pWviL17Kz83cdmSpWTqtGnI2xYIY+BUgwWK490p\/8jQr7aBCP+hCcDO5iu06nCgBGEcUTt7AZk4aYrfPQgAo\/oZv5cT3u+B4OGRnqMG0UAYAYWLSQmGpXPPx4z6CBIahw4CeASeK2CaJkzThOu6ePDBB\/Haa69VXBQWXLgAACAogaAMNiE40Z0ecBAsADAQUFBkkqkxX2uYUIIwzmi8YBbsHtNY188sCGek5+4pCIUQHNx1IZwCmGcjRh1cMud8zGqoRZw40LgFgt5mpowx6LqORx99FP\/7v\/9bUVFYfMliQFBw7o+KJ4aJZD4Ph1I4lAbCUDyzAeDI51JAuqviglYplCCMM2ZcvBieYcLigOfJ3P1epO+ACnrag4GBAr6Tjfj\/1yiDwQzooIDrQnMLOH9CFAsaa9CguxB23k+I4i5Yj89C13W89ML\/w8P\/\/bOKXVjz5jSRufPmwrM5rIIDQgg8CuxuOQzPMOF5AhpYIAacAGACsNPoPn6kUsuuOCp1eYzZtWuXSKVSOHnyJNKpNLqT3eCcB8k0rtv33E8IgaZpiEaj0HUdsVgMiUQCEydORCKRQG0igVgsjsmNU\/yrsXYymbngItG+cwcEoT3lvt4AKxmYgeYhAn52HxUAbAcRSmDEdCRmz4DW0YnWziSMSAwuAKppoJQiHoni1VdfRXc6Jf7u81+oSOrz0iVLsGfXbiRiUQgOeIIgabs4kcmiUdcB0ZO5KASEFE7hwc6du8cGMljvesXo2bZtm9i\/fz\/27NmDU6dOoaurC4SQ4OF5Hiil0HouJHn+l3ieF3wvpRSWZYFSCkopCCEwNB3xWAw1NTWIxkzMmX0+otyBfqoTEc8F0wAhegWhv0l4WiSC990PxXkNMsWJUOJ78ZmGjOPhWDKLve1dsCgD1XxHI0DheR4sy8KsWbPw93\/\/9xURhXvu+f9E16lT0KkOgIN7Fs6fWIfFjQ2Icg\/gfus1UAKPUKRcB\/OWX4amK99XFfUbpWbcCcI\/\/dM\/ifXr12PFihUV\/UB\/9atfiW3btuHEiRMAAMMwYJqmP1aM+5eWEAKGYfTOFBjgswgSZygNvi6EgOf5F7m8wB3HBcDhcBu1OsGqOU1ojEbBiAPw0QtCsRgILsB7Ji67rgdE4jiW83CwvQN5zqEZEdiu\/xNU05HL5TB79mz83d\/93Zh\/Jr995mnx\/PPPI2rGoDENrrAQES6WzWjEebEYhOeC9AgmpwwZx8H0hYuw6Nq\/OicFYdz4EPbv3y++9KUvic2bNyOfr0zoaNu2beL73\/+++NSnPiVeeOEFZDIZ1NTUoKamJhCDYqSFwAeZMiSPErJg50zfqzEdVNNRWz8BDhg6kikgGh1SYlL\/NRHiWwCg\/p8FJf54dUpAuO+O0yiDTjVEdB26cDEtynB502zUU4pCKgm4BVBwcNcBYwwHDx7EfffdN+Z3nxUrVkLT\/DAsJxSgGizOcTyVgaMxcMYgiN9RhQhAoxS5TGaslxkaxoUgPProo+If\/\/EfcfToUdTV1WHSpEkAgEceeUTccsst4sEHHyz7Rrz\/\/vvFj370IzQ3NyMej6O2thYA4Lpu8JAXfynp+9soHIeD6SaOdadwIpMOBpWM+PcP8vMUAKGABo6IcBHnFhbOnIEpsRiY5UCD3wXZMAwwxtDW1oZ\/\/\/d\/H1NRmNx4Hlm6dAnS2Qx0zXeZCcrQnbfQnkyDF9U3CCFABODZQ8\/fGG9UtVPxlVdeERs3bsThw4dRW1sLy7KwaNEiLFq0iHz+858XBw8ehBACXV3ly0\/\/1a9+JV566SUQQoKeApRS5HI5v+HnANmCJYVw8J7egAAgXA+gFF25NNqT3ZgwZQK0Yp+iTMohoxMm6Xyk8CspKfwjS52u45LZ09ByvButnUl4TIAaFKZpwrZt7NmzBz\/84Q\/FXXfdNWYm+YpVV2Lr1rf9SAgHAIKk7aCtqxv1iShilIAIAsr9fAS3nx\/nXKJqLYRvf\/vb4oEHHsCRI0cQi8Wg63rgpb\/99ttFa2srGhoaoOs6DMMo+fPv3LlT3H333eK5556DaZqIx+OgtCeGLwSi0WjgKCx+lBpB+g4joQBc1wE1TBzvSsEjGrwSP2\/\/SIQM3VHBoXMX9RENsxonYdakBjDbArctiJ6BrDU1Ndi1Yyd++uOfjJmlsGDBAjJnbhPS6TQIJaCaAQcEJ9NZnMpacJkOj1C\/hwQV4K4HN9k9vpxrQ6TqBKG5uVl86lOfEq+99prvWY9GA+97JBLBoUOHkM\/nEYvFgnP3hAkTSrqGX\/\/614EY1dXVgRASnO8ppacdEYof\/en\/9aF+f4AsdyYEhAhfFqgGounIFhwcaD0Bl5pwhQAjJMhGPBO9AjMwxRESQggoCAhhIMSPLBBO4OSyiHgWZk6uxcUXTIdh24BjQyN+rkNtoga7m3fgl4\/8YswuujVr1oDqGjj8pCSmRcG1CN5tO45OW4CaEXieBwYKz3HAzjIGbrxSVYKwa9cu8c\/\/\/M\/o6urC5MmTBx33LXEcBzNnzizZGv7zP\/9TvPjii6itrUUsFivZ7y05goJDw7HuJHKun47sCYHA6zDIrIIzQcXAeQr+v8mUJ\/\/vTLgwPAdT6xJYNOt8MNsCPBfCc2HbNmKxGN5880385n+fHhNRWLp0KTn\/\/PORtwpwBUCYBg4NGQ9oO96FnMshNN0XS+5BDCN3YzxRVYJw\/\/33o1AoIBqNAhggZDYAkUgEkydPDv7+8MMPi8985jPi1VdfHfZGvOeee8S2bdtQW1sLx3FGlhpcYsgZLlLAv9NnHA8tx4\/DiCXgChmq7KldGGJpdP\/JyUOFgsPwXJxfX4PFTefDcAsQsMGZQK6Qh2ZE8PIfXhmz2oerr74anPut1yn1h8IaZhTHOrvReiIF14hDgPYkYZXW+VstVI0g3HXXXeLUqVPQNC2I5fdP4hkIRlmQ\/fed73xHPPHEE2htbcXjjz8+rOf\/h3\/4B3Ho0CFEo1EUCgUAOC2rMGxwQiE0HR3dKRzp7AKLJfzipaLNfqb8h1JABIcOD9TNY1pdHItmnQ9TuDAoh6bpYD2771e\/+hV2795ddlFYvnw5mTZtWp\/QLSeAHo2h7WQK7d1Z2ITB5RyuEoTwcvfdd4tjx46htrYWjLHgA5Ue\/cGcdlxwPPPMM\/jWt74ltm7diokTJ6Kmpgbt7e1obm4+6ybcvXu3+MIXviDS6TTi8TgA3zIp54VUKjiAvOehu2Bj79EO5AiFxxg4AYTgECUWhuIkKvkQ8EC5Az1fwGRDx4VTGxETApTbcD0bTPP9Lw8\/\/PConnuoXHfddQB8X4xhGOCcw+ICBcKwt+04CkSDVlMPbcKUc9KJEHpB+OXjvxS7du1CLBYLsvOGQyKRwI4dO7Bjxw4kEgnYtg3OOfL5PFpaWs768z\/60Y\/gOA4MwxiSRRI2NNMANxhSjoeDx07AozSIShBxZudlqWHChcltzJhQgzmNDdDcAij3ENEN1NTUIJ\/P49577x0TK6G2tha2bfuDYeEfrTihcKmG5v1tcKlZ7mWEllALwo4dO8Tjv3wcpul\/QLZtD+vn5XlR0zTI9tyMsSBr8Pjx44P+\/Je\/\/GVhWRY0TQvWUE0IAnjwIDSGPAhaT3Yj63KAMQh4IMIbdji0fxTibFEJKTUe5f4gmUIOsxomYO7UKTC43\/Kdcw5N09DW1ob\/\/u\/\/LosovPPOO+LHP\/6xuPvuu0Uul\/NzEhgBBQcRPaIAilMFjn3Hzt2uSaFOTPqv\/\/ovmKYZFAANl4F+RgiBQqEA0zAHTXH+2te+JrLZLCKRCGzbDsQk7MeEPhAOx7bBNAbdjCOZSePYqRQSUyaCwYNfBem3bi8fFLzIfUk9D242jRn19fAEwYETXSCan7NRk6jD66+\/jlgsJj760Y+WxGR\/\/fXXxSuvvIK2tragu5Ou6z0JXRw0aLrK4VEKzhgOtBzBU\/\/7G3HDX60\/544NoRWEjRs3iiNHjvRUzvl3e\/nn0UAIAWMMBV5ALpcb8HseeOABkUqlwBgLPNIAqksM4EcfjB4nrGvZ0JmJfS0dqDUSmFlfCy+fAhUctCjiwM6QyShzF84Wbegf+fEHrBLICayMCf9v3MX5E+vQncvheN4C0RJwPI5oPIa\/bP4L5i+4UCxbsnTEF+SOHTvE7373u6C4TEamAH8vUdK79X3rAAD8TquEErzyyitobGwUq69YeU6JQmiPDM8++yw0bez16qGHHhI7d+4Md47BMPEvUr8tmjBMNB88hE7Lhh6vAe+x93uzCMoPBaD1ZDXOv2AaanQCcAeUETCmwdAjePLJp9B+4viIFPj73\/++ePDBB9HR0THkn5FHH6pTmKaOeDyGp556ciRPX9WEUhB+8IMfiGQyWRKLYDj89re\/FW+88Qai0Sik76Da6U0a4vAowClFHgLbD+7HKccCpzo4p0E+QzDgpadNef\/MRvnns\/kOhgITHAnKseiCaYgxX7LAAUIYTnV34ue\/+MWwft+zzz4rvvSlL4m2tjYkEgl\/vcN0mNq27Ye1Xb9sfCwcnWEilIKwadMmxOPxEUUVRsqWLVvExo0bUVNTAwDB4NOqpmfuQG\/ikn9OFoaB9nQae1qPwNNMcMGCHoMyCWmwa320FZQSKgCSz2FKTRzzZ0wF8xxQ4ddiJOIJHDh4ABuffGJIF+T3vvc98X\/\/938QQgR+J2BgP9JgMMYC57Wu62htbS2bozOMhE4QHnzwQZHL5UAphW3bZSkOGuj3\/PSnP0VNTU1wRym+s\/TP3y9+hJ5gIAmCpCQLAjQax9FkBse60+BmFC6hPeG38i6n+L1jRECDgMhnMcnUMGtiPbiwg8hETSyBV37\/Mt56660zXpC7du0SX\/va10RLSwvq6uqCIjeZozJciveZEAJ1db6jc7A1jCdCJwhbtmxBLBYDpbQs53hKKSKRCIBeB9i9994rLMs67QKvmov+LIj+Jr+g8IgGlxp4Z98BdKRT0BNx2D21DpwA\/u4\/fYZBSdclCBg0wPagOQVMm1iDGkODBgFwASE4IpEInn766QF\/\/vXXXxc\/\/OEP4ThOHzEvJZxzxONxPPHEEyX\/3WEkVIKwceNG0dHRgWg0GnQKKjWcc+RyOQjhDzF94YUXxP79+1FbW1t1UYTBkGf8YjEIjgMCINx3Mtqajp2HWnCk8xSoocOjQPlDkT6EEHiCwvU4KLcR0zxMq69BjHII7gS9ILu6uvCTn\/Qtl962bZt47LHHEIlEgjLzcqWSM8aQy+UwFo12Kk2oBOHNN99EJBLpHTRSBqeivOubpon9+\/fjd7\/73WkWw3im15\/QE1fQIrCphp2HWnAil4dNNbhU6xNmHElh05CQPg7uT6E0AUytTyCuEVDB4XGOaDSKaDSKnTt34g9\/+IMA\/BL4Rx99FLquQwgRHC\/LsV9kk1tN09Dc3IwXX3xxXItCqAThyJEjQTMTIURZFF\/2KZCpyEHl2xik744lQdSg36MXDg4\/NanAKdLcwFsH2nDCEXAjMXiCQPSOcgLhAoLL8um+k56KHyOBUv9o4jk26kyKqfU1IOBgRV2oTdPEc889hy1btohf\/\/rXcBwnqGeRmY7lQopCJBLBc889V7bnCQOhEYRnnnlGpFJj0w9fdjseD2HFUSP8wac2KLKC4s1de3G0OwMSrelpQNr7fT69mX39OzqOBEpoz8g5PxrCbRt1URPM804bMgMAjz32WBASHguLrv9zcM7xve99b9xaCaERhObm5rK0GOuPvKvEYrFxZxWMiJ6MRNkfIe9SvNW8Hy2daeSoXhR9oOiT2Epc\/1ECUQAABuofTTwPsUgE0UgEwj39d8tK00gkMuZ5KgCgaRoOHz6MJ54YWji02giNILS1tfVJLy0nkUgEuq4rQegHJxRMN+BQDW8078bBjpMoMA0O9VuPceC0qEMpHbG+R8GfNlUXS8AboLpU0zRYloVCoVARn4+u66ipqcGmTZuwffv2cScKoREEmXM+WMy\/FHkAciyafC5FD0FmIoXQTRAzht1H2rF13yGkQSEihj+rgfi9KBwXcFz\/5wgXwWP4T9v389Q4YIDC0DREDfO0blDyuDdWhWb982CKh+Q8+eT4S20OhSA0NzeLkVY0DhfTNAOzUwnC6fhdyjk4IxCGjrauFN7YvR8d6Tw8w4RDNHiCghAWDIctBQR9nZ9U+LNXB6OSYWJd19HV1YVHH310XFkJoRCEkydPwnXdMTkTyhCj7JB8riNdg7TnUEDlvxAXnHBEJtQjxTle33sAu44eR56aEHoExKGAxc\/Yz3E0UACM9x\/VHh6ktRCJRPDaa69hy5YtIVzlyAjFFZFOp4PQTrmRpqayEM4OJ4DleHCIBhsMB46fwo5DrTiZdyFiNTDqJsAjdOTxBsJ7mpkW\/QbCe7sYCVH2VOrhIq0SxljQOOfZZ5+t8KpKRygEwbIsAH68t3jwaSlMQkJI0CZM9kSUk5OrvniphPA+NoL\/gCjKz6AMNigOnezCa3tb8Oaxkzhse7A0Ey7x8xlcLoLP8EzdoDnhwQM9lZVM+BaJoC48yuExjlQhAzcUu3NgZKNfQgiOHz+Ohx56aFxYCaF4yw3DKHvdgK7rKu9gFPiXLwWLxlEgFC2d3Xhj937sbT+OlMv8vAU9Ak4NeAJw+eniLoQockB6EMJ\/eOj5Xi4AQeF4LhxXgEOMusS63FBKUVNTg3feeWdcFECFQhBM0wzu2uVCJSKVBtmGzHVdpG0b77Z3YktLO3YePYkcNeFoOjjVQInmd3UWvdaGhBSVVwf1FoKCCA2ABsemsF0BgsrPvTgb8v2IxWJ46qmnKr2cURMKQTAMA5SUTxB0XR9xOayiL7LojFIKqumwmY6k5WJ36zH8ZUczDpw4hZMFG3ndhKVF4FBfEFzSIww9g1Bk\/4XelGd\/xJpHKGzOYXtu6PwHAyFT7DVNQzabxWOPPVbVVkIorpAZM2aAaaxsjkVZu6B8BiWAu4GXgREBRgQ44SC6jiwX2H6gFW8caMP2Y8dx1HZhGwa4roEYDNAZbOHBgS8ClGrQGQMDAfc8WK4HGjXR3n0SDmyAhf\/zKu6fYRgG\/vKXv1R1wlIobOimpiYyadIk0dXVVZbQ41jlvZ9r9G+tRgWFUVeLPOfYf\/wU2o6fQpxwTIxH0DChHrWJGkT0GGiPkLggoIwCjIIZDIwC7ek0uuwCXCJAKQH42JRilwrDMPD0009jyZIllV7KiAiFIADA3Llz8fLLL6Ourq6kv1f2PZDHBZWuPDqChuqE9xlDDwAuBDzXvzkSza+D6LQKSKZstGaOQ6OnENN1REwNsYiJiK6DaBo8l8O2PVjcRUf3ScA0AM2E63jQmTH2L3IURKNRdHR04KmnnhI33HBD1d2FQiMIS5cuxSuvvNLn30p1V9d1PchOVJSGXu9\/kbOQoKgZo+anJZsJcAA2d+ECyFsOSL4A8HTwe\/zPhsATAtG6uD970oNvPVQZlmWhpqYGmzdvxpIlS0RTU1NViUJo3vFrrrmGTJ8+HUDpG5wSQkI\/mLXaIJwO+gDnEK4HcNd\/wLclCNMAXfetANMANSMghgliGDCiMVCiQacGdGb47dWqDNnPw7btqkxYCo0gAMC1116LdDodDHMtxR29OLqgjguVR+YzyIcg\/kNmJ47thIjSI\/dsJBLBoUOHsHnz5qoyS0P1zt94441kxowZsCyrZOXJst+ecioqxhJ5RH3xxRcrvZRhESpBAIAPfOAD4F7pCo9k4ogsXVUoyom88eTzeUQiERw7dgx\/\/OMfq2bjhU4QPvjBD5ILF1yIbCYLwzBGfRHLM53MOy81MvuxlHMjziU458EcBflZVTPS9yX3biQSwaZNmyq8qqETyh38yU9+EoZpYKBZCcOl3JaB7PbrOI5KfFIA6NungRCC9vb2qvElhFIQmpqayK233hpMZx7NBa1pWlmdiY7jIJ1OgzGm\/BSK05D7b\/\/+\/ZVeypAIpSAA\/tFh3rx5cBxnVBdauf0Gsh1bMplUoU3FacjGP11dXZVeypAIrSAAfhhSmuEjmdOg6+WvlvM8D4lEAqZporOzM1hjqcKm4x0ZARoP\/oOBoJTCMAwcO3as0ksZEqEWhPe\/\/\/2ktrY2qK4byQVe7twD2cfBMAxEIhEkk0kUCgV1hFAEVFNiXKgFAQCmTZsGx3GCGvywISMLmqYhHo8HZbDpdFpFHRTBGDjLsrB169bQm4yh37Hz5s2D4CKY1hM2ijs4m6YZDB+1LAvd3d0qO1IRzJ6sBj9C6AVh4cKF8Lh\/ZHAGGNwxELKP4licSz3PC2LprusikUgEnZ0ty0ImkwkGkipOx\/O8QOjHo3gSQoLj45EjRyq9nLMS+l26YsUKEo1GQ3lcGAjP8xCNRhGPx4Mhst3d3bBtu9JLU1QAOdhF13V0dHRUejlnJfSCAADz58+H67ihPDL0x3Xd4PgQi8UCCyKZTKrEpXMU2bHr6NGjlV7KWakKQVi8eDFcb2wGuYwWeV4UQiAej\/eJjCSTSRWKPAeRNwLOeegdi1UhCB\/+8IdJIpEI7r6SofoUxhp5ZuSco76+HowxcM7hui66urqC3H3lV+g7y3O8vh\/ydTHG8O7udyu8msGpmk9g7dq16Ozs7DO\/YSwSj0YL5xx1dXVB1ybP85BKpVAoFMbtBaDopX9dQ8vhlgqu5uxUzY68\/fbbyfLly9Hd3R1cXNWAECLIUTAMIzhSZLNZOI6jROEcQO5Vxhg6Ojqwe\/fu0B4bqmo33nPPPWT+\/Pk4efJkVZmYrusiEokEk6dl85d0Ol01wqYYOcVWAucczc3NFVzN4FTHFVXEfffdR9atW4dcLgfbtoO7rBwgIh9hab0ujzjFouA4DoTwk63S6XSQp1AtAldK5GseK2drsc9iLB4Dvd533w2vH6Eqd+Bdd91FvvOd72Dp0qUwDAOpVAqu6wY+BcMw4LpuqBJd5OYwTROapgWORdu2Ydu2CkmOEfKGUeqhwkPFNE10dHRg165doTw2hD+wfwYuuugictFFFwEAfvvb34rt27ejra0NqVQKuVwuKDuV5clhwTAMRKNR5PN5AL2TrymlVRFWrXbG+j3u3\/7fcRw4joOdO3di4cKFY7qWoUDGY1x8z549IpfLYf\/+\/fjDH\/5Q6eWcBqUU3d3dsCwr6DCdSCRQV1cXWAoyy3G8I4VwrJLOTNPs8\/exyCDtH2lwHAe1tbX45je\/WfkzbT\/GpSAU89nPflaYptknOaSSyDtULpdDJpPp0+LNMAzE4\/HAYUoprZqU7ZFSbkFwHAeRSAStra04fPhwUJouBXjevHnQdR25XC6ICJWa4mtMDoZNp9O47bbbsGLFilCJQtUeGYZKIpFALpcr+fCXkSKEAOccuq7DNM0gq5FzDtu2Ax9DuZrCnmuYpolt27Zhy5YtwYUpRZYxhrfffhsLFizAggULYJpmSfp4ng1ZEr17926sWLGirM81XKrSqTgc6uvrgzZslbYOgN40Vk3TEIlETrt7ZLNZcM6DCkrF6HAcB83NzfA8Lwj7mqYJ0zTBGENnZyc2bdqEP\/\/5z8jlcmMiBnINb7\/9dlmfaySMe0FIJBKBIITheFTs1dY0LUhzluG3fD4fpGSHQcCqHcYYampqAueyruswDCOI9GiahoaGBuzcuRPNzc1jsk8454FjedOmTZXflEWMe0GYOXNmkDIcBi++7CEoL3YpWACC2QSFQgGcc5imGQoRKyfSqSqtolJDCMGqVasA9EZ05Hsai8XAOUehUEA8Hsc777wTJItJ51+pw5Pys3ddF9FoFFu2bBn17ywl414QZsyYEWy0MCb+MMZO83x7nodsNot8Pq\/8CKPEdV00NjbiQx\/6ECZNmoRcLheUpNu2HVgKnufBsiy0t7dD07RRd\/s+E8VzRjVNQ1tbW8mfYzSE7wopMcuWLSPxeDzYBGGDMYZIJALOeVAVCfgbuX8UQjF8CCGwLAu1tbVYt24dVq9eDUII8vl8sCekE1emk0vKGQqVjYMLhQJeeOGF0HzA414QAGDixIllM0lLgWEYfXwJMsLgeR5s21ZWwiiQIU3ZGXvZsmX4yEc+gssuuww1NTUAegvQPM9DJBIJfAvlsiiLrQTGGHbs2FGW5xkJ4z7sCABz5sxBa2srampqQicK8g5lmiYymQx0XQ+sAkIIurq6MHny5MBKGI\/iUBwGLDX9z\/6WZQXCsGzZMhw4cACHDh1CMplEQ0MDZs6cCQBlj0rJz1jXdZw8ebJszzNczglBuPDCC\/Hqq6\/C87zQXVDFEQd555Cebln0lM1mUVtbO+6TlCrB4sWLMW\/evCD\/QNbDjFWNg67rQRp7GDgnjgwrV64ksuQ4jEhzVpqtUrTkXcqyrKA2Q1FaZKt8wzCC930sC56kj+P1118PhR\/hnBAEAJg+ffppd9iwRB3k5iu+O8nNKUVMDX4pD8V5B4yxMa9+lCHnbDY7Zs85GOfMDpNmYTQaDZXnXloBxeaqjH8DCKwG13WRSqXGrZVQqVmYxTMhKrGGSCQSmrR64BwShMWLFyMWiwXVbWHzJQD+5uzf2EUWOXmeh0KhANd1x6WlUM7kpLCTSqVCM+x2\/O2sMzBv3jwyffp0WJYVxIDDosoSmako8xGkMPQXhTCK2Wip1B260hw+fBjPPPNMaF73OSMIAHDxxRcHFoLcgGGDMRYcC4qjDTJHQVkJ44vW1lYIITBjxoxKLwXAOSYIGzZsINKbH1ZkBeSZxIpzjq6uLnDOx50oVJuVULxW2ZZNfibFrdr6I\/1GuVwOu3fvxsqVK9HU1BQKs2987agh0NTUBMuywBgL5VyH4k01UGGN3GjZbHZc5iVUk5Ugi6DkcF8ZQiwuipJl7MUP13VhGAYOHjyIfD6P9773vRV+Jb2E91ZZJi677DLs2bMn+HDC6LWXacwD3V2EEGCMBYk0sVisAissH9J3Ui1WghRnAH06PxVHiYpfi+d5iMViOHbsGN58803MmzcPa9euHfuFn4FzThCuuuoq8txzz4lsNhtKMZB3FeD0Bp3y67Kt+3i0EIDe96AaZm\/I9WmahkOHDmHfvn2IRqNIJBKIRCKIRqOn9VTs7u7Gzp07oWka1qxZg+XLl4fiuACcg4IAAMuXL8dzzz2HCRMmhM40lV2ZZe1+cURB5r5LK8F1XeRyOSQSCWiaNm5Gzssjg6zzCKNwS4orJl3XRXt7e9DvQH6teI\/Jysp4PI73ve99eM973lPB1Z\/OOSkIH\/3oR8mmTZtEGL31gw1tkeJQ3Jk5m80GZ9jx1qm5uI1cWEVBCgHnHHPnzsUFF1wQ9FZwHOe0+SD19fV44403cOTIEUyePBkf\/OAHQ2MdAOeoIADAwoULsX379tDNbZC1DINlU8rMNrnRUqkUamtrzzgtqJopzhUJoyjIAUGO4wSRH9mmjRASpENLil9DGP0k4bo9jiFXXnlln7twWD6c4jLnwS7u4rV7ntenscd4o9hDHzZkdyVd1wNnsLRsHMdBoVCAZVnBw\/M8JJNJ1NTUYOLEiZVe\/mmcs4KwfPlyMmvWrOCsDoSjqWlxMlJxXH6gEGRxow3p7TYMo0+Ogjx+nOkRduQ6hRBwXRf5fB6WZQXdqc82S3EskJEExliwVpmGLn0ghmEgFouhpaUFR48excSJEzF37tyKrHcwwr8jysjVV1\/dJ\/QYpryE4mjDYBQnwti2jVQqFZxrw5yANVLkkNzu7m4cP34cmUwmyN4splggip2U5Ubmt0hHo2EYwYDfI0eO4NVXX4Vpmpg\/fz5uvPHG0J3vxt+OGQZXXHEFefnll0Vrayt0XQ\/F+XskNRbSmSithOL05\/GG7EQtLYaTJ0\/2uRvHYrHg9UuPvrSo5M+NxXujaRosy0Imk0F7ezuam5uxb98+TJw4ER\/4wAdwyy23lH0NI2Hcj3I7G5s3bxY\/\/vGPEYvFQiMIjuMEjTuGY9bLu6BhGKirqwucWmf7mTDT\/\/UTQlAoFNDV1TXg90tzXdf14A4t\/y9zOEaT33C2PdLS0oJt27bB8zzkcjlYlgXbtnHppZfiiiuuwJo1a7Bu3brKb7QzcE5bCIDfTenVV18Ve\/bsQfEMyDAgTf9iBtvI8muu6yKdTgd3S\/lv0oytJvoLlud5yGQyEEIM+nnJKcv925P1z+yMx+MAen03kUgElmX18c8IIYLn6S8I0Wg0+JwopYjH44jFYtA0DbNnz0ZNTQ1uu+02fOhDHwqtCBRTXbujTMyePRs7d+4MTU16\/9j1cJDHB5mkJPsrFIfAwmAJjRQ5C3Ok6c2ZTKbP3+WcBtmIJpfLYd26dbjzzjuDN2nXrl1CRgvS6TSy2Sw6OzuRzWZx+PDhwG9DCEFDQwPe+973wnEcaJqG9evXY\/Xq1VXzhitBAHDq1Kkglh8GE9pxnGDy80hM22JRyOfziEQigbc+DK9vNFiWFQjCSF5L\/5+RTkBCCFKpFK6\/\/nrccccdfS7ghQsXDnpBP\/PMM+LAgQNIpVLI5\/PQdR1z5szB6tWrsWjRoqoRA0AJAgB\/U+RyuaC\/XSXhnPcZTjvSs668+PP5fHCOrmbLQCLnVMjXN9z3Z6Ajkxyy+5GPfAQf+9jHhv0mXX\/99dX\/xvZwTocdJXV1dSgUCkilUhWPz+dyOQC+c8wwjFHlDcjvz2QywaSiSr++4SJDwYwxJJPJ05rPjgT5s7IUOZPJ4I477hiRGIw3lIUAf+Cq9F5blhXcTcfaxHZdF5ZlDVrtOBI8zwuca7JFW7UcHxzHAWMM6XS6ZO8F4Icv5aTtr371q1izZs05LwaAEgQAwLRp0\/zkEdsP902YMKEicXw59RkofRPYahUFWTmYz+dLYtnIatF0Oo14PI6vfe1rWLJkiRKDHpQgALjoootILBYTruOfJePxOCKRyJieuaV1AJSvI7Rs0gr0ikI1kEwmg+POaBFCoFAoYPLkyXjwwQeVEPSjeg6TZaaxsRGO68A0TSSTyT656eWkuK\/BWCDNZJnEFDZ\/gswylBWdqVQq+PeRRhUIIcH8TM\/zMHXqVCUGZyBcu6GCNDU1Ba2wXNdFZ2cn8vl82bv2ZLNZzJkzB3PmzAmev5zZo3KWYCaTCVUSlkSmF8u03+I1jkQQZLGRPHqEZUJSWFGC0MPll18eFKEwxoL04bHgggsuwN13303i8XjZL1J5TJA5CmGzEqSvI51O9+kANVpfh+u6sG0bhmGEatpy2AjPTqgwV155JZH16ZqmQXCBTCYTNDMt10Xjui4uuOACAMDf\/u3fBhu\/XFYC5zyo3c9kMqHryyhLm4tzQkYrBrLwSw7MzWaz2Lp167ldxHMGlCAUsWzZsqB5KdN8\/8HJkyeRyWRKdieVZ3d5p544cSJWrVpFAGDNmjXkc5\/7XNBMo3\/9QSmsB5mXL\/szdnV1obu7u2JWQnGvg1wuh2w2e5r\/ZjT9HIrLnoudtcePHy\/PC6pylCAUsWrVqtPaXjmOg2QyGZjXo0Um2siEmOXLl\/f5+po1a8g3vvENRKNROLYTTGvq3867WjhTcxfpOJRHF9nXoJRIyyDoh+DxICW8ra2tpM81XlCCUMTq1avJrFmzkMvlAmGghPYRhdHeSQuFAkzTBOBX3t18882nebuXLFlCfvGLX5DZc2YHXZBkJV61URw1kC3GZN+GVCoVCIHjOCX1n\/QRA49DcBH8O6UU+\/fvL9lzjSeUIPTj8ssvD4qKCCEglPQRhdGeuSmlsCwLyWQSl1xyyaDfe99995F169bBtm2k0+lQRgXORnE\/QRk5yGQyyOVyQf1IqV+XFAMhRCAEEtu2oeu6ciyegXO+QcpAfOQjHxGO4wT9CYsRXKBhUgNGGhGglAbe7gceeGBIsfBdu3aJjRs3YuvWrYjH4yCEBAVQxRmHcrMPB+nPqKurK0uiUjabRSaTKWkNRfFUbNnglHMeVEKeDfl+PfHEEyoXoR\/KQhiAK6644oxj1wn1J++k0+kRJS7JjMSbb755yD+zcOFCcvfdd5MvfvGLmDBhAnLZHPL5fFDDL4UpTD0hJaVO7pJO3+KQpIwgDAXP86DrOgqFAv74xz+qu2E\/lCAMwBe\/+EVSV1cH1zl9k8m7UiqVQjabHXZKrW3b+MQnPoEVK1YM++60Zs0a8h\/\/8R\/ki1\/6IhYsWIB8Ph8IV1jLm2XX4VLVTchSbjndSn4ewznKySSlnTt3jno94w0lCGfgqquugmX7tQWCiz5lt9JEPXXyVJ+y4qFw5513jrqDzurVq8n3vvc98q1vfQurV6+G53no6uoquZe+FIzUQjiTuMkwbCadCdqYe+7QLQSZdEYpRUtLy7DXNd5RPoRBuPXWW0U6nYbGNFBGwT0OQk\/fqIyxoJeeruuBd1vG1xsaGnDxxRcPGFEoFb\/5zW\/E5s2bcejQIRTyBTCNBVEJKVjFvQGBvnMd6uvrYZpmyasfGWPo6urqze8YxE8hn1uKiOxc7DhOsLZcLoeGhgbccsstWLt2LfnCF74g9u3bB9M0h2SFBKnMHkc0FsUjjzwSPrOqgqhqx0FYv349fvKTn\/j9EsSZ940swpEhwmIT\/jOf+cyYTPddv349Wb9+PZqbm8Wf\/vQnbN++HSdOnIBt20Hr8kQiERRRFZvxQ50BMVLkRXi2I40UqOI2657nwTAM5LL+ulevXo0vf\/nLwS9atGgRduzYMaShsMX9JSijyOfyaG5uFhdddJEShR6UIAzCTTfdRF5++WVx5MgR\/87PB48quI4b+B0o873qYz3q+6KLLiIXXXQRAGDLli3i7bffxjvvvIPW1lacOnUKGtPANBZUWQK9F2A5REEOry0eiDMUXNeFEAKO7SCTyWDRokW49dZbsXjx4j7v5+WXX46NGzcGfQ6Gshb5\/0wmg927d0O+XwolCGflox\/9KP71X\/\/Vv5vSwS8YQklwF5Jpx\/v27RNz586tyB3o0ksvJZdeeikAYO\/evWLnzp3Ytm0bjh07hvb2dgAIkp6kp77Ubdpl+fFwjqbFSUUNkxpw44034n3ve9+A7+GSJUvIwoULxZ49exCNRAc80p0JxhiOHDky5O8\/F1CCcBauvvpqsnnzZvHiiy+ivr5+yBvbMAzkcjkcP348FDP85s2bR+bNm4e\/+qu\/AgDs3LlT7N27FwcOHMChQ4eQz+fL1qa9uOOzfI7+x4Pi\/o9CCMyYMQPr1q0b0jyDVStX4d133wXTzt4zobiFu67r2Lp1awle4fhBORWHyMc\/\/nEhcw8GQ242xhjy+Tw+\/OEP4+Mf\/3joz6i7du0S9913X1kmWLmuG2R5FhcsAQiSrKSzc8GCBbjmmmtwzTXXDGsRf\/3Xfy2GMr9RvjbZ1dpxHNx\/\/\/2olBUXNpSFMEQ+\/vGP44EHHhjyOVjeiaolZ37hwoVk6tSpIplMlvx3y9kHsgsS0JNg5LjwuIcpU6ZgxYoVWLVqFS6++OIRXZirVq3CSy+9hEgkMqgVV2wBUUqRz+exbdu2UFhxYUAJwhC59tpryVtvvSVeffXVIYsCIQQ7d+7Ezp07RTUM7Jg0aRJKLQjSeVkoFJDNZmGaJkzTxPnnn48FCxbg0ksvxbJly0b93lx33XV46aWXhnykk8JgGAZ27do12qcfN6gjwzC57bbbRDqVBhd8UGGQpjCjDNFYFE1NTYhEIkGPwPr6eqxdu3ZEGYvl4plnnhH\/8z\/\/gwkTJgROvdEinYozZ87EzJkzcd5555Wt5fm3v\/1t8dZbbw2aT9H\/OGRZFurr6\/Hzn\/88NJ9DJVEWwjC58847cc899yAajZ41VEcIARd+0c1bb70VVFDKu9Of\/vQn\/M3f\/I0oZ8LScJg9e3bwZ8\/zSuJLMAwDhUIB69evx\/z588v6Oq+77jq88cYbQWryUCImsVgMHR0d+POf\/yyqaQZjuVCpy8Nk5cqVZP369WctnxVCgBIKXdfhui5isRgMwwgSl+LxOKLRKB555BFs3749FGbaxRdfTM4777w+hUOlohy\/sz9XXHEFueSSS4L6jqEImhS+P\/3pT2VfXzWgBGEE3H777WTNmjVnbZ1OKOlNYe5JWGKMQdO0PjMKN27cOBbLHhJz5syBbdvQNK1kLeOKKzLLzQ033ABN04Zc7EUIQSKRUOHHHpQgjJBvfetbZMqUKbAsy4+t84Hj94ILf3PS3oSl4kIpTdOwqzk8Tq2lS5fC87ygAKgUlMofMRQuu+wyIntjDmX9tm2DMYYTJ07ghRdeCIWlVkmUIIyCr3\/960gkEn4ZLqMDerjPljlnmiZsx8Zbb70Vis142WWXkYaGhqCwqBQIIcZ0svYtt9wCwzDg2Gd\/TpnyHI1G8cILL4zB6sKNEoRR0NTURD7\/+c+jUCgEhTjDRaYNl+riKwXz589HJpMpiVNRHpnGsjR77ty55KqrroLtnN1vIYfrJhIJNDc34\/XXXw+FMFcKJQij5IorriBf\/epXh9S+a6BjRaFQgK7rqKurK+cyh8WKFStKlq0oIzFj4VQs5q677iKJROKs32eaZuBv0HUdzz777BisLrwoQSgB11xzDfnKV74StEdzXReC9zb4HOjism07qLxrbGxEmEpwFy9eTCZNmgRg9ANjZN\/HkyfGvqnppz\/9aSSTSRBC+vhu+iMLuwzDwObNm\/GHP\/zhnLUSlCCUiLVr15JvfOMbMHTDr+E3DQB9c+elP0GKgZzGfMstt1Rs3Wdi1apVJTv3U0qRy4\/NMNtirr76arJy5UqkUikYhjEkJ2NtbS1++tOfjsHqwokShBKycuVK8uRTT5K5c+fi1KlTYJqftss9HiQjyW7Onuchk8ngjjvuwFVXXRUa60CyYcMGIjP+RmMlyErHSg1Z\/e53v0tisZjfZm2AHpkD0d3djS9\/+cvnpJWgBKEMfP\/73ycf+9jHAPQU8XhucHxwXRfpdBqTJ0\/G3XffjZtuuil0YiApVeMQWflZKW688UbkC3noxtm7Ugvhh4mbm5vx6U9\/Wmzbtu2cEgZVy1Bmfv7zn4vdu3fj6NGj0DQNU6ZMwcqVK7Fhw4bQCkExn\/vc54QsFZZl3cNBVjjG43Hce++9FXvNX\/\/618XWrVtRV1cXDHEpRv5dHvGKW7itXr0aq1atwpQpU2AYxrgulVaCoBiUBx54QOzduzforDTcBCNZ7WgYBu6\/\/\/6KXkg33XSTkF2Xiy\/8gZBfl63c5HCdaDSKeDyOVatW4fbbbx93wqCODIpBed\/73leSkGE+n8e+ffsqeve588470dnZGfhyBmvdLjs5yQ5PiUQi6LWQTCbx+OOP46GHHhp3d1MlCIpBWbhwIVm0aFEwjm2kyPmUlWTt2rXkPe95D1KpVDBw92zIFvCe6\/WpyZg0aRL+8pe\/lHO5FUEJguKsfOADH4BhGGedqzAQ0iR3XTcUDU2\/+tWvkssvvxzpdHpI07TlUB5ZiwIgGKF3tuK2akQJguKszJ8\/n1x66aXBBTBcS0HOqeju7i7D6obPd7\/7XTJ16tQRdYcqLlCzLKvix6BSowRBMSQ+8YlPkFgsNmjG32Douo6Ojo4yrGxk\/OxnPyMjTRfnHgf3OOrq6sZdxEEJgmLIrFq1KjhDD9dKYIyhs7OzHMsaMd\/85jdH9HOUUdiOjenTp5d4RZVHCYJiyNx8881k4sSJfcJ2Q0XTtJI3cB0tCxYsIP\/yL\/+CaDSKzs5OeJ7Xp7GKfJ0yqUzmVMj8hJtuuqmSyy8LShAUw+KDH\/wgUqlU0O3pbMi8BUIIPM8LTbs4ydy5c8kvfvELsmLFCuRyOWQyGXCPBynmAMA035FqWVYwfPbTn\/40Lr300nF1XABUYpJiBPzbv\/2bePfdd4ccugN8CyGdTmPDhg1DmsZUCZ5++mnx\/PPP4+jRo8hms32SlyilYIzhwgsvxG233YYlS5aE8jWMFtV1WTFsrr\/+euzbtw+apg2a3CMpTgs+depUuZc3YjZs2EA2bNiAXbt2iebmZiSTSSSTSRiGgRkzZmDOnDmnDZsdbyhBUAybefPmkSuvvFL8\/ve\/RyKRCGYvFFP8d1kLYRgGDhw4MNbLHTYLFy4kCxcurPQyKoLyIShGxK233krq6+uHPL+Bcw5KaTCoRhFOlCAoRsxVV10V5CXI3P\/B5iHIvghvvvmmclyFFCUIihGzYcMGMmnSpGFZCUIIHDx4cAxWpxgJShAUo+I973lP0DF6KKPTNE1DS0tLuZelGCFKEBSj4pprriFNTU1D7pVAKcWxY8fGYGWKkaAEQTFqrr76ajiOM6S5FLquI5VKKT9CSFGCoBg1V1xxBVmwYMFpfoSBkt7k3MVdu8Izvk7RixIERUlYu3Zt0GZMWgpnmkcBADt27BjT9SmGhhIERUlYunQpWbBgAbq7uxGJRIJU34EwTRPZbDZ0dQ0KJQiKEvLe974XpmkOOseBMRZ0HPrzn\/88hqtTDAUlCIqSsXjxYrJs2TJks1lwzs9Y5+C6LqLRKLZv3z7GK1ScDVXtqCg5n\/nMZwRjLOgfIJHl0jI86XkeFi5ciLVr18J13XFbQVhNKEFQlJxfPv5L8dLvX4JpmoP2TOCcB\/MjZfFTTU0NampqcMkll+D6669XAjHGKEFQlIWvf\/3rorOzE7o++Pg0TdNQKBQCa0KOfRNCwDRN3HDDDbj22muVMIwRyoegKAvXXnvtGX0IxTch13VBKQUhBJFIBJzzYDoSYwyPPPIInnzySXXXGiOUICjKwtq1a8mSJUv6HAkk\/fMT5LFCigPQKxoNDQ14\/vnnsXXrViUKY4ASBEXZ+OxnP0vi8Tg8z4Ou60MqfuqPZVnQNA0vv\/xyGVao6I8SBEVZufnmm+E4zogGxQIIGp22tbWVemmKAVCCoCgry5cvJ9dffz2y2eygxU+ywUp\/ZKclefRQlBclCIqyc\/3115P3v\/\/9yOfz0DQt6GIsjxCDRbocx+kzK0FRXlSTVcWYcMMNNxAA4re\/\/S1M0wzmOlBKg6PEQMIgw5BTp04d4xWfmygLQTFm3HDDDeSTn\/wkDMNAKpVCoVCA67qBxTBQP0bGGFzXxZVXXlmhVZ9bqMQkRUV4+OGHxZtvvhn0Yyx+SIQQSCaTWLNmDe644w51ZhgDlCAoKspjjz0m9u7di7a2tsCB6HkeIpEI6urqcN1112Ht2rVKDMYIJQiK0LBjxw6RzWZhmiaWLl2qRKACKEFQKBQByqmoUCgClCAoFIoAJQgKhSJACYJCoQhQgqBQKAKUICgUigAlCAqFIkAJgkKhCFCCoFAoApQgKBSKACUICoUiQAmCQqEIUIKgUCgClCAoFIqA\/x\/ybEO9PVnrIwAAAABJRU5ErkJggg==\" alt=\"Isometric Grey Bunny\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"coding-card\">\n <div class=\"category-bar\">\n <div class=\"cat-pill\">\n <span class=\"cat-dot\"><\/span> Gerakan (Motion Puzzle)\n <\/div>\n <\/div>\n\n <div class=\"block-palette\">\n <span class=\"palette-label\">TARIk (DRAG) BALOK JIGSAW KE AREA KREATIF:<\/span>\n <div class=\"blocks-grid\">\n <div class=\"mentor-block block-atas\" draggable=\"true\" ondragstart=\"handleDragStart(event, 'atas')\" onclick=\"handlePaletteClick(event, 'atas')\">\n <span class=\"block-symbol\">\u2b06\ufe0f<\/span>\n <span class=\"block-caption\">Atas<\/span>\n <\/div>\n <div class=\"mentor-block block-bawah\" draggable=\"true\" ondragstart=\"handleDragStart(event, 'bawah')\" onclick=\"handlePaletteClick(event, 'bawah')\">\n <span class=\"block-symbol\">\u2b07\ufe0f<\/span>\n <span class=\"block-caption\">Bawah<\/span>\n <\/div>\n <div class=\"mentor-block block-kiri\" draggable=\"true\" ondragstart=\"handleDragStart(event, 'kiri')\" onclick=\"handlePaletteClick(event, 'kiri')\">\n <span class=\"block-symbol\">\u2b05\ufe0f<\/span>\n <span class=\"block-caption\">Kiri<\/span>\n <\/div>\n <div class=\"mentor-block block-kanan\" draggable=\"true\" ondragstart=\"handleDragStart(event, 'kanan')\" onclick=\"handlePaletteClick(event, 'kanan')\">\n <span class=\"block-symbol\">\u27a1\ufe0f<\/span>\n <span class=\"block-caption\">Kanan<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"workspace-area\">\n <div style=\"font-size:1.15rem; font-weight:900; color:#1E293B; letter-spacing:0.2px; margin-bottom:8px; display:flex; align-items:center; gap:8px;\"><span>\u2728<\/span> Tuangkan Kreatifmu<\/div>\n\n <div class=\"canvas-dropzone\" id=\"codeDropzone\" ondragover=\"handleDragOver(event)\" ondragleave=\"handleDragLeave(event)\" ondrop=\"handleDrop(event)\">\n <div class=\"hat-block\">\n <span>\ud83d\udea9<\/span> saat diklik\n <\/div>\n\n <div id=\"puzzleChain\" style=\"display:flex; flex-wrap:wrap; align-items:center;\"><\/div>\n\n <div class=\"empty-prompt\" id=\"emptyHint\" style=\"width:100%; text-align:center; padding: 20px; color: #94A3B8; font-weight: 700; border: 2px dashed #CBD5E1; border-radius: 16px; margin-top: 10px;\">\n <span>\ud83d\udc47<\/span> Tarik & lepaskan balok jigsaw di sini!\n <\/div>\n <\/div>\n\n <div class=\"workspace-actions\">\n <button class=\"btn-mentor-action btn-exec-flag\" id=\"btnRunBig\" onclick=\"jalankanProgram()\">\n <span>\ud83d\udea9<\/span> JALANKAN PROGRAM!\n <\/button>\n <button class=\"btn-mentor-action btn-reset-workspace\" id=\"btnResetBig\" onclick=\"resetStage()\">\n <span>\ud83d\udd04<\/span> ULANGI\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"simulasi\" class=\"section-pad simulasi-section\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Metode Belajar Terstruktur \ud83d\ude80<\/h2>\n <p>Pendekatan intensif minimal 20 Jam Mentoring (1 Sesi = 1 Jam). Fokus penuh dari pengenalan alat hingga portofolio.<\/p>\n <\/div>\n <div class=\"roadmap-grid\">\n <div class=\"step-card c-yellow reveal\">\n <div class=\"step-num\">1<\/div>\n <div class=\"step-icon\">\ud83d\udca1<\/div>\n <h3>Fundamental Concept<\/h3>\n <p>Pengenalan dasar agar fondasi keilmuanmu kuat tanpa kebingungan.<\/p>\n <div class=\"step-badge\">Sesi 1 - 5<\/div>\n <\/div>\n <div class=\"step-card c-pink reveal\">\n <div class=\"step-num\">2<\/div>\n <div class=\"step-icon\">\ud83d\udee0\ufe0f<\/div>\n <h3>Hands-on Practice<\/h3>\n <p>Memasuki pembuatan proyek mini untuk mengasah imajinasi & logika.<\/p>\n <div class=\"step-badge\" style=\"color: var(--color-pink);\">Sesi 6 - 10<\/div>\n <\/div>\n <div class=\"step-card c-blue reveal\">\n <div class=\"step-num\">3<\/div>\n <div class=\"step-icon\">\ud83d\ude80<\/div>\n <h3>Advanced Challenge<\/h3>\n <p>Mengerjakan studi kasus rill dengan tingkat kerumitan yang ditingkatkan.<\/p>\n <div class=\"step-badge\" style=\"color: var(--color-blue);\">Sesi 11 - 15<\/div>\n <\/div>\n <div class=\"step-card c-green reveal\">\n <div class=\"step-num\">4<\/div>\n <div class=\"step-icon\">\ud83c\udfc6<\/div>\n <h3>Final Portfolio<\/h3>\n <p>Karyamu sudah jadi standar industri dan siap dipamerkan!<\/p>\n <div class=\"step-badge\">Sesi 16 - 20<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"promo\" class=\"section-pad\" style=\"background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Investasi Skill Terbaik \ud83d\udd25<\/h2>\n <p>Mulai perjalanan belajarmu dengan penawaran eksklusif bulan ini.<\/p>\n <\/div>\n <div class=\"promo-banner reveal\" style=\"background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), url('https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/kak-kiel-test-1.jpg'); background-size: cover; background-position: center;\">\n <div class=\"promo-text\">\n <p style=\"font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--color-pink); margin-bottom: 10px;\">\u2728 Penawaran Terbatas<\/p>\n <h3>September Ceria: Kelas Gambar<\/h3>\n <div class=\"price\" title=\"Klik untuk Klaim Promo!\">Rp 49.000 <span style=\"font-size: 1.2rem; color: inherit;\">\/ Sesi<\/span><\/div>\n <p style=\"font-size: 1.15rem; font-weight: 600; max-width: 450px; color: var(--text-main);\">\n Salurkan imajinasimu secara maksimal! Kelas interaktif *digital art* & menggambar manual dengan biaya terjangkau.\n <\/p>\n <\/div>\n <div style=\"position: relative; z-index: 2;\">\n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20Admin,%20saya%20ingin%20klaim%20Promo%20September%20Ceria%20Kelas%20Gambar%20seharga%2049k\/sesi!\" class=\"btn btn-primary btn-promo-shake\" style=\"padding: 20px 36px; font-size: 1.2rem;\" target=\"_blank\" rel=\"noopener noreferrer\">Klaim Promo Sekarang!<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"founder\" class=\"section-pad\" style=\"padding-top: 0; background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Di Balik Layar \ud83d\udc68\u200d\ud83d\udcbb<\/h2>\n <p>Kenali sosok praktisi yang merancang ekosistem pembelajaran premium ini.<\/p>\n <\/div>\n <div class=\"founder-wrapper reveal\">\n <div>\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/03\/Andri.jpeg\" alt=\"Andri Darmawan\" class=\"founder-img\" loading=\"lazy\" onerror=\"this.src='https:\/\/via.placeholder.com\/400x400\/FFD166\/1E293B?text=Foto+Andri'\">\n <\/div>\n <div class=\"founder-info\">\n <h3>Andri Darmawan, AMD, MM<\/h3>\n <div class=\"role\">Founder & CEO Urban Digital Hub<\/div>\n <p>\n Sebagai praktisi industri dengan pengalaman lebih dari satu dekade, Andri berdedikasi membangun *tech-edu startup* berstandar tinggi namun tetap mudah dicerna oleh kalangan muda.\n <\/p>\n <p>\n Visi utamanya adalah menyiapkan talenta Indonesia Emas dengan kemampuan komprehensif, mulai dari penelitian UI\/UX, perancangan *game design*, otomasi *workflow*, hingga *AI video generation*.\n <\/p>\n <div class=\"founder-tags\">\n <span class=\"f-tag\">\ud83c\udfa8 UI\/UX Research<\/span>\n <span class=\"f-tag\">\ud83c\udfac AI Video & Motion<\/span>\n <span class=\"f-tag\">\ud83c\udfae Game Design<\/span>\n <span class=\"f-tag\">\ud83d\udcda Ed-Tech Expert<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tutor\" class=\"section-pad tutor-section\" style=\"background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\" style=\"margin-bottom: 40px;\">\n <h2>Tutor Jagoan Kami \ud83e\uddb8\u200d\u2642\ufe0f\ud83e\uddb8\u200d\u2640\ufe0f<\/h2>\n <p>Belajar langsung dari praktisi yang asyik, sabar, dan super kreatif! (Klik foto untuk detail)<\/p>\n <\/div>\n <\/div>\n \n <div class=\"slider-wrapper reveal\">\n <button class=\"slider-btn prev\" aria-label=\"Previous\" onclick=\"slideTutor(-310)\">❮<\/button>\n <div class=\"slider-content\" id=\"tutorSlider\">\n <div class=\"tutor-card tutor-yellow\" onclick=\"openTutorModal('Kak Andri', 'UI\/UX & Desain', 'Kak Andri memiliki pengalaman lebih dari 10 tahun di bidang desain produk. Ia akan mengajarkan cara membuat tampilan UI\/UX yang tidak hanya cantik tapi juga fungsional!', 'https:\/\/via.placeholder.com\/300x300\/FFD166\/0A192F?text=Kak+Andri', 'var(--color-yellow)')\">\n <div class=\"tutor-info\">\n <h3>Kak Andri<\/h3>\n <p>UI\/UX & Desain<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/FFD166\/0A192F?text=Kak+Andri\" alt=\"Kak Andri\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <div class=\"tutor-card tutor-pink\" onclick=\"openTutorModal('Kak Lily', 'Komik Strip', 'Dengan keahlian ilustrasi karakter bergaya Jepang dan Barat, Kak Lily siap membantu anak-anak menuangkan ide cerita mereka menjadi mahakarya komik strip yang seru!', 'https:\/\/via.placeholder.com\/300x300\/EF476F\/FFFFFF?text=Kak+Lily', 'var(--color-pink)')\">\n <div class=\"tutor-info\">\n <h3 style=\"color: white;\">Kak Lily<\/h3>\n <p style=\"background: white; color: var(--color-pink);\">Komik Strip<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/EF476F\/FFFFFF?text=Kak+Lily\" alt=\"Kak Lily\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <div class=\"tutor-card tutor-blue\" onclick=\"openTutorModal('Kak Reynaldi', 'Programming', 'Ahli bahasa pemrograman Python dan web development. Kak Reynaldi punya metode khusus untuk menjelaskan logika coding rumit menjadi semudah bermain game!', 'https:\/\/via.placeholder.com\/300x300\/118AB2\/FFFFFF?text=Kak+Reynaldi', 'var(--color-blue)')\">\n <div class=\"tutor-info\">\n <h3 style=\"color: white;\">Kak Reynaldi<\/h3>\n <p style=\"background: white; color: var(--color-blue);\">Programming<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/118AB2\/FFFFFF?text=Kak+Reynaldi\" alt=\"Kak Reynaldi\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <div class=\"tutor-card tutor-green\" onclick=\"openTutorModal('Kak Winda', 'Video & Multimedia', 'Kak Winda adalah seorang spesialis konten kreator dan editor video. Bersamanya, kamu akan belajar rahasia editing sinematik layaknya film profesional!', 'https:\/\/via.placeholder.com\/300x300\/06D6A0\/0A192F?text=Kak+Winda', 'var(--color-green)')\">\n <div class=\"tutor-info\">\n <h3>Kak Winda<\/h3>\n <p>Video & Multimedia<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/06D6A0\/0A192F?text=Kak+Winda\" alt=\"Kak Winda\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n \n <div class=\"tutor-card tutor-yellow\" onclick=\"openTutorModal('Kak Andri', 'UI\/UX & Desain', 'Kak Andri memiliki pengalaman lebih dari 10 tahun di bidang desain produk. Ia akan mengajarkan cara membuat tampilan UI\/UX yang tidak hanya cantik tapi juga fungsional!', 'https:\/\/via.placeholder.com\/300x300\/FFD166\/0A192F?text=Kak+Andri', 'var(--color-yellow)')\">\n <div class=\"tutor-info\">\n <h3>Kak Andri<\/h3>\n <p>UI\/UX & Desain<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/FFD166\/0A192F?text=Kak+Andri\" alt=\"Kak Andri\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <div class=\"tutor-card tutor-pink\" onclick=\"openTutorModal('Kak Lily', 'Komik Strip', 'Dengan keahlian ilustrasi karakter bergaya Jepang dan Barat, Kak Lily siap membantu anak-anak menuangkan ide cerita mereka menjadi mahakarya komik strip yang seru!', 'https:\/\/via.placeholder.com\/300x300\/EF476F\/FFFFFF?text=Kak+Lily', 'var(--color-pink)')\">\n <div class=\"tutor-info\">\n <h3 style=\"color: white;\">Kak Lily<\/h3>\n <p style=\"background: white; color: var(--color-pink);\">Komik Strip<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300\/EF476F\/FFFFFF?text=Kak+Lily\" alt=\"Kak Lily\" class=\"tutor-img\" loading=\"lazy\">\n <\/div>\n <\/div>\n <button class=\"slider-btn next\" aria-label=\"Next\" onclick=\"slideTutor(310)\">❯<\/button>\n <\/div>\n <\/section>\n\n \n <section id=\"video-belajar\" class=\"section-pad\" style=\"background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Cuplikan Kelas Kami \ud83c\udfa5<\/h2>\n <p>Intip keseruan belajar membuat Komik Strip bareng Kak Lily. Interaktif, santai, dan penuh karya kreatif!<\/p>\n <\/div>\n <div class=\"video-wrapper reveal\">\n <div class=\"video-container\">\n <iframe src=\"https:\/\/www.youtube.com\/embed\/YnValRlT7_Y\" title=\"YouTube video player\" frameborder=\"0\" loading=\"lazy\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"galeri\" class=\"section-pad\" style=\"padding-top: 0; background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Dokumentasi Mentoring \ud83d\udcf8<\/h2>\n <p>Intip proses kreatif siswa dan suasana interaktif saat sesi mentoring berlangsung.<\/p>\n <\/div>\n <div class=\"gallery-grid\">\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-12-pukul-12.32.53-scaled.png\" alt=\"Siswa komik\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-12-pukul-12.04.58-scaled.png\" alt=\"Proses menggambar\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-09-pukul-21.09.32-scaled.png\" alt=\"Mentoring Offline\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/Tangkapan-Layar-2026-09-09-pukul-14.28.59-scaled.png\" alt=\"Sesi Zoom\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-12-at-16.59.06.jpeg\" alt=\"Zoom bersama\" loading=\"lazy\">\n <\/div>\n <div class=\"gallery-item reveal\">\n <img decoding=\"async\" src=\"https:\/\/mentoronline.asia\/wp-content\/uploads\/2026\/03\/post.jpg\" alt=\"Diskusi Interaktif\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"blog\" class=\"section-pad blog-section\" style=\"background-color: white;\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Blog Edukasi MentorOnline \ud83d\udcda<\/h2>\n <p>Temukan tips, trik, dan informasi seputar perkembangan dunia digital kreatif langsung dari para ahli.<\/p>\n <\/div>\n <div class=\"blog-grid\">\n <div class=\"blog-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/600x400\/BAE6FD\/0A192F?text=Ilustrasi+Blog+1\" alt=\"Blog 1\" class=\"blog-img\" loading=\"lazy\">\n <div class=\"blog-content\">\n <div class=\"blog-category\">TIPS & TRIK<\/div>\n <h3>5 Cara Mudah Membangun Portofolio UI\/UX Pertamamu<\/h3>\n <p>Membangun portofolio desain dari nol tidak harus rumit. Temukan langkah-langkah praktisnya di sini.<\/p>\n <\/div>\n <\/div>\n <div class=\"blog-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/600x400\/FFD166\/0A192F?text=Ilustrasi+Blog+2\" alt=\"Blog 2\" class=\"blog-img\" loading=\"lazy\">\n <div class=\"blog-content\">\n <div class=\"blog-category\">EDUKASI<\/div>\n <h3>Mengapa Anak Perlu Belajar Coding Sejak Dini?<\/h3>\n <p>Coding bukan sekadar menulis bahasa pemrograman, tapi cara mengasah logika problem solving.<\/p>\n <\/div>\n <\/div>\n <div class=\"blog-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/600x400\/EF476F\/FFFFFF?text=Ilustrasi+Blog+3\" alt=\"Blog 3\" class=\"blog-img\" loading=\"lazy\">\n <div class=\"blog-content\">\n <div class=\"blog-category\">INSPIRASI<\/div>\n <h3>Dari Hobi Jadi Profesi: Sukses Jadi Digital Illustrator<\/h3>\n <p>Banyak kreator muda yang sukses meraup penghasilan dari menggambar digital.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"blog-cta reveal\">\n <a href=\"https:\/\/mentoronline.asia\/blog\/\" class=\"btn btn-primary\" style=\"padding: 16px 36px; font-size: 1.2rem;\">Baca Semua Artikel Blog \u2794<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"daftar\" class=\"section-pad\" style=\"background-color: white; background-image: radial-gradient(var(--text-muted) 1px, transparent 1px); background-size: 30px 30px; border-top: 4px solid var(--text-main);\">\n <div class=\"container reveal\">\n <div class=\"form-wrapper\">\n <div class=\"form-left\">\n <h2>Mulai Kelas Trial Pertama!<\/h2>\n <p>Tinggalkan kontak Anda, dan tim konsultan pendidikan kami akan segera menghubungi untuk mengatur jadwal trial gratis dan memilih program yang paling cocok.<\/p>\n <div style=\"font-size: 4rem;\">\ud83d\ude80\u2728<\/div>\n <\/div>\n <div class=\"form-right\">\n <h3 style=\"font-size: 1.5rem; margin-bottom: 24px; color: var(--text-main);\">Formulir Pendaftaran<\/h3>\n <form id=\"leadForm\">\n <div class=\"form-group\">\n <input type=\"text\" id=\"parentName\" class=\"form-control\" placeholder=\"Nama Orang Tua\" required>\n <\/div>\n <div class=\"form-group\">\n <input type=\"text\" id=\"childName\" class=\"form-control\" placeholder=\"Nama Anak\" required>\n <\/div>\n <div class=\"form-group\">\n <select id=\"childAge\" class=\"form-control\" required style=\"appearance: auto;\">\n <option value=\"\" disabled selected>Pilih Usia Anak<\/option>\n <option value=\"7-9\">7 - 9 Tahun<\/option>\n <option value=\"10-12\">10 - 12 Tahun<\/option>\n <option value=\"13-15\">13 - 15 Tahun<\/option>\n <option value=\"16-18\">16 - 18 Tahun<\/option>\n <option value=\"Dewasa\">Dewasa \/ Guru<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <input type=\"tel\" id=\"waNumber\" class=\"form-control\" placeholder=\"Nomor WhatsApp\" required>\n <\/div>\n <button type=\"submit\" class=\"btn btn-secondary\" style=\"width: 100%; padding: 18px; font-size: 1.2rem;\">Daftar Sekarang \u2794<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"faq\" class=\"section-pad faq-section\">\n <div class=\"container\">\n <div class=\"section-header reveal\">\n <h2>Tanya Jawab (FAQ) \ud83d\ude4b\u200d\u2642\ufe0f\ud83d\ude4b\u200d\u2640\ufe0f<\/h2>\n <p>Jawaban cepat untuk pertanyaan yang sering diajukan seputar MentorOnline.<\/p>\n <\/div>\n\n <div class=\"faq-container reveal\">\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Siapa saja yang bisa ikut kelas di MentorOnline?\n <span class=\"faq-icon\">+<\/span>\n <\/button>\n <div class=\"faq-answer\">\n <p>Kelas kami terbuka untuk anak usia 7 tahun ke atas, remaja, hingga dewasa. Kurikulum dan metode pengajaran akan disesuaikan secara personal dengan usia dan daya tangkap peserta.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Apakah kelasnya dilaksanakan secara online atau offline?\n <span class=\"faq-icon\">+<\/span>\n <\/button>\n <div class=\"faq-answer\">\n <p>Saat ini kami berfokus pada kelas interaktif online via Zoom agar bisa diakses dari seluruh Indonesia. Namun, khusus untuk area Makassar, kami juga menyediakan opsi sesi mentoring tatap muka (offline).<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Apa saja perlengkapan yang harus saya siapkan?\n <span class=\"faq-icon\">+<\/span>\n <\/button>\n <div class=\"faq-answer\">\n <p>Secara umum, kamu hanya perlu menyiapkan Laptop\/PC, koneksi internet yang stabil, dan aplikasi Zoom. Beberapa kelas spesifik mungkin memerlukan software tertentu yang akan dipandu instalasinya oleh mentor.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Bagaimana sistem jadwal belajarnya?\n <span class=\"faq-icon\">+<\/span>\n <\/button>\n <div class=\"faq-answer\">\n <p>Kami menggunakan sistem mentoring intensif 1-on-1, sehingga jadwal belajar sangat fleksibel. Kamu bisa berdiskusi dan menyepakati jadwal langsung dengan mentor yang bersangkutan.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer>\n <div class=\"container footer-grid\">\n <div>\n <div class=\"footer-brand\">MentorOnline.asia<\/div>\n <p style=\"color: var(--text-muted); max-width: 300px; font-size: 1.05rem;\">\n Platform pendidikan digital inovatif yang berdedikasi mencetak talenta dan kreator profesional Indonesia masa depan.\n <\/p>\n <\/div>\n <div class=\"footer-links\">\n <h4>Eksplorasi<\/h4>\n <ul>\n <li><a href=\"#program\">Pilihan Kelas Utama<\/a><\/li>\n <li><a href=\"#tutor\">Tutor Jagoan<\/a><\/li>\n <li><a href=\"#promo\">Penawaran Spesial<\/a><\/li>\n <li><a href=\"#galeri\">Dokumentasi Portofolio<\/a><\/li>\n <li><a href=\"https:\/\/mentoronline.asia\/affiliasi-guru\/\">Program Afiliasi Guru<\/a><\/li>\n <li><a href=\"https:\/\/mentoronline.asia\/blog\/\">Blog Edukasi<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-links\">\n <h4>Hubungi Kami<\/h4>\n <ul>\n <li>\ud83d\udcde +62 851-6126-8571<\/li>\n <li>\u2709\ufe0f hello@mentoronline.asia<\/li>\n <li>\ud83c\udf10 www.mentoronline.asia<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <p>© 2026 PT Indonesia Belajar Cipta Mandiri (Urban Digital Hub). Dibuat dengan penuh dedikasi.<\/p>\n \n \n <a href=\"https:\/\/www.instagram.com\/mentor_onlinemu\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"social-tab\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.036 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334\"\/>\n <\/svg>\n Ikuti Instagram @mentor_onlinemu\n <\/a>\n <\/div>\n <\/footer>\n\n \n <a href=\"https:\/\/wa.me\/6285161268571?text=Halo%20MentorOnline,%20saya%20ingin%20tanya%20informasi%20kelas%20dan%20pendaftaran!\" class=\"wa-float\" target=\"_blank\" title=\"Tanya Kami via WhatsApp\" rel=\"noopener noreferrer\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"34\" height=\"34\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z\"\/>\n <\/svg>\n <\/a>\n\n \n <script>\n \/* =======================================================\n MAIN PAGE SCRIPTS (Scroll Reveal, Sliders, Modals)\n ======================================================= *\/\n function reveal() {\n var reveals = document.querySelectorAll(\".reveal\");\n for (var i = 0; i < reveals.length; i++) {\n var windowHeight = window.innerHeight;\n var elementTop = reveals[i].getBoundingClientRect().top;\n if (elementTop < windowHeight - 100) {\n reveals[i].classList.add(\"active\");\n }\n }\n }\n window.addEventListener(\"scroll\", reveal, { passive: true });\n reveal(); \n\n \/\/ WELCOME POP-UP LOGIC\n window.addEventListener('load', function() {\n setTimeout(function() { document.getElementById('welcomePopup').classList.add('show'); }, 2000); \n });\n document.getElementById('closePopup').addEventListener('click', function() {\n document.getElementById('welcomePopup').classList.remove('show');\n });\n document.getElementById('welcomePopup').addEventListener('click', function(e) {\n if (e.target === this) { this.classList.remove('show'); }\n });\n\n \/\/ PARTNER SLIDER LOGIC\n const partnerSlider = document.getElementById('partnerSlider');\n let partnerScrollInterval;\n function startPartnerScroll() {\n partnerScrollInterval = setInterval(() => {\n partnerSlider.scrollLeft += 1;\n if (partnerSlider.scrollLeft >= (partnerSlider.scrollWidth \/ 2)) {\n partnerSlider.scrollLeft = 0;\n }\n }, 25); \n }\n function stopPartnerScroll() { clearInterval(partnerScrollInterval); }\n startPartnerScroll();\n partnerSlider.addEventListener('mouseenter', stopPartnerScroll);\n partnerSlider.addEventListener('mouseleave', startPartnerScroll);\n\n function slidePartner(amount) {\n stopPartnerScroll();\n partnerSlider.scrollBy({ left: amount, behavior: 'smooth' });\n setTimeout(startPartnerScroll, 500); \n }\n\n \/\/ TUTOR SLIDER LOGIC\n const tutorSlider = document.getElementById('tutorSlider');\n let tutorSlideInterval;\n function startAutoSlideTutor() {\n tutorSlideInterval = setInterval(function() {\n if (tutorSlider.scrollLeft + tutorSlider.clientWidth >= tutorSlider.scrollWidth - 20) {\n tutorSlider.scrollTo({ left: 0, behavior: 'smooth' });\n } else {\n tutorSlider.scrollBy({ left: 310, behavior: 'smooth' });\n }\n }, 3000); \n }\n function stopAutoSlideTutor() { clearInterval(tutorSlideInterval); }\n startAutoSlideTutor();\n tutorSlider.addEventListener('mouseenter', stopAutoSlideTutor);\n tutorSlider.addEventListener('mouseleave', startAutoSlideTutor);\n\n function slideTutor(amount) {\n stopAutoSlideTutor();\n tutorSlider.scrollBy({ left: amount, behavior: 'smooth' });\n startAutoSlideTutor();\n }\n\n \/\/ TUTOR DETAIL MODAL LOGIC\n function openTutorModal(name, role, desc, imgSrc, bgColor) {\n document.getElementById('tm-name').innerText = name;\n document.getElementById('tm-role').innerText = role;\n document.getElementById('tm-desc').innerText = desc;\n document.getElementById('tm-img').src = imgSrc;\n document.getElementById('tm-img').style.backgroundColor = bgColor;\n document.getElementById('tutorModal').classList.add('show');\n }\n function closeTutorModal() { document.getElementById('tutorModal').classList.remove('show'); }\n document.getElementById('tutorModal').addEventListener('click', function(e) {\n if (e.target === this) { this.classList.remove('show'); }\n });\n\n \/\/ LEAD FORM LOGIC (REDIRECT TO WA WITHOUT TRACKING)\n document.getElementById('leadForm').addEventListener('submit', function(e) {\n e.preventDefault(); \n const parentName = document.getElementById('parentName').value;\n const childName = document.getElementById('childName').value;\n const childAge = document.getElementById('childAge').value;\n const waNumber = document.getElementById('waNumber').value;\n\n const textMessage = `Halo MentorOnline, saya ingin mendaftarkan anak saya untuk kelas trial.%0A%0A*Data Pendaftaran:*%0A- Nama Orang Tua: ${parentName}%0A- Nama Anak: ${childName}%0A- Usia: ${childAge} Tahun%0A- No WhatsApp: ${waNumber}%0A%0AMohon bantuan informasi jadwalnya. Terima kasih!`;\n window.open(`https:\/\/wa.me\/6285161268571?text=${textMessage}`, '_blank');\n });\n\n \/\/ FAQ ACCORDION LOGIC\n const faqQuestions = document.querySelectorAll('.faq-question');\n faqQuestions.forEach(question => {\n question.addEventListener('click', () => {\n const item = question.parentElement;\n const activeItems = document.querySelectorAll('.faq-item.active');\n activeItems.forEach(activeItem => {\n if (activeItem !== item) {\n activeItem.classList.remove('active');\n activeItem.querySelector('.faq-answer').style.maxHeight = null;\n }\n });\n item.classList.toggle('active');\n const answer = item.querySelector('.faq-answer');\n if (item.classList.contains('active')) {\n answer.style.maxHeight = answer.scrollHeight + \"px\";\n } else {\n answer.style.maxHeight = null;\n }\n });\n });\n\n \/* =======================================================\n GAME LOGIC (MENTORONLINE 2.5D CASTLE)\n ======================================================= *\/\n const AudioCtx = window.AudioContext || window.webkitAudioContext;\n let audioCtx = null;\n let bgmMasterGain = null;\n let sfxMasterGain = null;\n let isBgmPlaying = false;\n let bgmTimer = null;\n let bgmStep = 0;\n\n function initAudioEngine() {\n if (!audioCtx) {\n audioCtx = new AudioCtx();\n bgmMasterGain = audioCtx.createGain();\n bgmMasterGain.gain.setValueAtTime(0.08, audioCtx.currentTime);\n bgmMasterGain.connect(audioCtx.destination);\n sfxMasterGain = audioCtx.createGain();\n sfxMasterGain.gain.setValueAtTime(0.24, audioCtx.currentTime);\n sfxMasterGain.connect(audioCtx.destination);\n }\n if (audioCtx.state === 'suspended') { audioCtx.resume(); }\n }\n\n const BGM_NOTES = [261.63, 329.63, 392.00, 523.25, 349.23, 440.00, 523.25, 659.25, 392.00, 493.88, 587.33, 698.46, 523.25, 392.00, 329.63, 261.63];\n\n function playBgmBeat() {\n if (!isBgmPlaying || !audioCtx) return;\n initAudioEngine();\n try {\n const osc = audioCtx.createOscillator();\n const noteGain = audioCtx.createGain();\n osc.type = 'triangle';\n const freq = BGM_NOTES[bgmStep % BGM_NOTES.length];\n osc.frequency.setValueAtTime(freq, audioCtx.currentTime);\n const t = audioCtx.currentTime;\n noteGain.gain.setValueAtTime(0.001, t);\n noteGain.gain.linearRampToValueAtTime(0.08, t + 0.03);\n noteGain.gain.exponentialRampToValueAtTime(0.0001, t + 0.36);\n osc.connect(noteGain);\n noteGain.connect(bgmMasterGain);\n osc.start(t);\n osc.stop(t + 0.38);\n bgmStep++;\n } catch(e) {}\n }\n\n function startBGM() {\n initAudioEngine();\n if (isBgmPlaying) return;\n isBgmPlaying = true;\n bgmStep = 0;\n if (bgmTimer) clearInterval(bgmTimer);\n bgmTimer = setInterval(playBgmBeat, 380);\n updateMusicUI(true);\n }\n\n function stopBGM() {\n isBgmPlaying = false;\n if (bgmTimer) { clearInterval(bgmTimer); bgmTimer = null; }\n updateMusicUI(false);\n }\n\n function toggleBGM() {\n initAudioEngine();\n if (isBgmPlaying) stopBGM();\n else startBGM();\n }\n\n function updateMusicUI(active) {\n const btn = document.getElementById('btnMusic');\n const icon = document.getElementById('musicIcon');\n const label = document.getElementById('musicLabel');\n if (active) {\n btn.style.background = 'rgba(60, 195, 110, 0.45)';\n icon.innerText = '\ud83d\udd0a'; label.innerText = 'BGM ON';\n } else {\n btn.style.background = 'rgba(255,255,255,0.22)';\n icon.innerText = '\ud83d\udd08'; label.innerText = 'BGM OFF';\n }\n }\n\n function playSFX(freq, dur = 0.12, type = 'sine') {\n try {\n initAudioEngine();\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n osc.type = type;\n osc.frequency.setValueAtTime(freq, audioCtx.currentTime);\n const now = audioCtx.currentTime;\n gain.gain.setValueAtTime(0.2, now);\n gain.gain.exponentialRampToValueAtTime(0.001, now + dur);\n osc.connect(gain); gain.connect(sfxMasterGain);\n osc.start(now); osc.stop(now + dur);\n } catch(e) {}\n }\n\n function snapSound() { playSFX(780, 0.05, 'triangle'); setTimeout(() => playSFX(980, 0.07, 'sine'), 40); }\n function jumpSound() {\n try {\n initAudioEngine();\n const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'triangle';\n const now = audioCtx.currentTime; osc.frequency.setValueAtTime(420, now); osc.frequency.exponentialRampToValueAtTime(840, now + 0.22);\n gain.gain.setValueAtTime(0.25, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.28);\n osc.connect(gain); gain.connect(sfxMasterGain); osc.start(now); osc.stop(now + 0.3);\n } catch(e) {}\n }\n function fallSound() {\n try {\n initAudioEngine();\n const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'sawtooth';\n const now = audioCtx.currentTime; osc.frequency.setValueAtTime(480, now); osc.frequency.exponentialRampToValueAtTime(110, now + 0.45);\n gain.gain.setValueAtTime(0.22, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.5);\n osc.connect(gain); gain.connect(sfxMasterGain); osc.start(now); osc.stop(now + 0.52);\n } catch(e) {}\n }\n function deleteSound() { playSFX(300, 0.08, 'sine'); }\n function lockSound() { playSFX(170, 0.22, 'sawtooth'); }\n function wolfSound() { playSFX(160, 0.35, 'sawtooth'); setTimeout(() => playSFX(130, 0.4, 'sawtooth'), 180); }\n function rockSound() { playSFX(210, 0.22, 'sawtooth'); }\n function victoryFanfare() {\n const notes = [523.25, 659.25, 783.99, 1046.50, 1318.51];\n notes.forEach((f, i) => { setTimeout(() => playSFX(f, 0.22, 'triangle'), i * 110); });\n }\n\n function triggerScreenShake() {\n const gameApp = document.querySelector('.mentor-app');\n gameApp.classList.remove('screen-shake');\n void gameApp.offsetWidth;\n gameApp.classList.add('screen-shake');\n setTimeout(() => { gameApp.classList.remove('screen-shake'); }, 380);\n }\n\n const canvas = document.getElementById('confettiCanvas');\n const ctx = canvas.getContext('2d');\n let confettiParticles = [];\n let confettiAnimId = null;\n\n function resizeConfetti() {\n const appContainer = document.querySelector('.mentor-app');\n if(appContainer) {\n canvas.width = appContainer.clientWidth;\n canvas.height = appContainer.clientHeight;\n }\n }\n window.addEventListener('resize', resizeConfetti);\n resizeConfetti();\n\n function fireConfetti() {\n confettiParticles = [];\n const colors = ['#FF5A79', '#FFAE19', '#3CC36E', '#4C97FF', '#9B51E0', '#FFD166'];\n for (let i = 0; i < 150; i++) {\n confettiParticles.push({\n x: canvas.width \/ 2, y: canvas.height \/ 2, w: Math.random() * 10 + 6, h: Math.random() * 6 + 4,\n color: colors[Math.floor(Math.random() * colors.length)], vx: (Math.random() - 0.5) * 18, vy: (Math.random() - 0.7) * 18,\n rotation: Math.random() * 360, rotationSpeed: (Math.random() - 0.5) * 12, opacity: 1\n });\n }\n if (confettiAnimId) cancelAnimationFrame(confettiAnimId);\n animateConfetti();\n }\n\n function animateConfetti() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n let alive = false;\n confettiParticles.forEach(p => {\n p.x += p.vx; p.y += p.vy; p.vy += 0.36; p.rotation += p.rotationSpeed; p.opacity -= 0.007;\n if (p.opacity > 0 && p.y < canvas.height) {\n alive = true; ctx.save(); ctx.translate(p.x, p.y); ctx.rotate((p.rotation * Math.PI) \/ 180);\n ctx.fillStyle = p.color; ctx.globalAlpha = Math.max(0, p.opacity); ctx.fillRect(-p.w \/ 2, -p.h \/ 2, p.w, p.h); ctx.restore();\n }\n });\n if (alive) { confettiAnimId = requestAnimationFrame(animateConfetti); } else { ctx.clearRect(0, 0, canvas.width, canvas.height); }\n }\n\n const ENGLISH_CHEERS = [\n { msg: \"Never Give Up! You Can Do It!\", icon: \"\ud83d\udcaa\" },\n { msg: \"Keep Trying! Almost There!\", icon: \"\ud83c\udf1f\" },\n { msg: \"Good Effort! Try One More Time!\", icon: \"\ud83d\ude80\" },\n { msg: \"Don't Worry! You've Got This!\", icon: \"\ud83c\udf08\" },\n { msg: \"Believe In Yourself! Let's Go!\", icon: \"\ud83d\udd25\" }\n ];\n\n function showEnglishCheer() {\n const cheer = ENGLISH_CHEERS[Math.floor(Math.random() * ENGLISH_CHEERS.length)];\n const popup = document.getElementById('cheerPopup');\n document.getElementById('cheerMsg').innerText = cheer.msg;\n document.getElementById('cheerIcon').innerText = cheer.icon;\n popup.classList.add('show');\n setTimeout(() => { popup.classList.remove('show'); }, 2600);\n }\n\n const LEVEL_DATA = {\n 1: { size: 3, start: { x: 0, y: 1 }, target: { x: 2, y: 1 }, rocks: [], enemies: [], speech: '\"Wortelnya lurus di sebelah kanan istana! Pasang balok KANAN \u27a1\ufe0f dua kali ya!\"' },\n 2: { size: 3, start: { x: 0, y: 0 }, target: { x: 2, y: 2 }, rocks: [], enemies: [], speech: '\"Ayo belok di istana! Rangkai balok KANAN dulu, lalu ke BAWAH menuju wortel!\"' },\n 3: { size: 4, start: { x: 0, y: 1 }, target: { x: 3, y: 1 }, rocks: [{ x: 1, y: 1 }], enemies: [{ x: 2, y: 1 }], speech: '\"Awas! Ada Serigala Galak \ud83d\udc3a di tangga istana! Rangkai balok memutar ke atas atau ke bawah ya!\"' },\n 4: { size: 4, start: { x: 0, y: 0 }, target: { x: 3, y: 3 }, rocks: [{ x: 1, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }], enemies: [], speech: '\"Banyak batu licin di panggung! Hati-hati, cari celah kotak putih yang kosong untuk melompat.\"' },\n 5: { size: 4, start: { x: 0, y: 3 }, target: { x: 3, y: 0 }, rocks: [{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 2, y: 3 }], enemies: [{ x: 1, y: 1 }], speech: '\"Puncak Istana Terakhir! Ada batu dan serigala, tunjukkan lompatan 3D terbaikmu!\"' }\n };\n\n let levelSekarang = 1; let levelTerbukaMax = 1; let posisiKelinci = { x: 0, y: 0 }; let antreanBalok = []; let sedangBerjalan = false; let draggedArah = null;\n const ikonPanah = { 'atas': '\u2b06\ufe0f', 'bawah': '\u2b07\ufe0f', 'kiri': '\u2b05\ufe0f', 'kanan': '\u27a1\ufe0f' };\n\n function setSpeech(text, avatar = '\ud83d\udc30') {\n document.getElementById('kikoSpeech').innerText = text;\n document.getElementById('kikoAvatar').innerText = avatar;\n }\n\n function refreshLevelButtons() {\n for (let lvl = 1; lvl <= 5; lvl++) {\n const btn = document.getElementById(`lvlBtn-${lvl}`);\n if (!btn) continue;\n btn.classList.toggle('active', lvl === levelSekarang);\n if (lvl <= levelTerbukaMax) { btn.classList.remove('locked'); } else { btn.classList.add('locked'); }\n }\n }\n\n function klikPilihLevel(lvl) {\n if (sedangBerjalan) return;\n if (lvl > levelTerbukaMax) { lockSound(); setSpeech(`\"Selesaikan Level ${levelTerbukaMax} dulu ya agar Level ${lvl} terbuka!\"`, '\ud83d\udd12'); return; }\n levelSekarang = lvl; refreshLevelButtons();\n const config = LEVEL_DATA[lvl]; posisiKelinci = { ...config.start }; antreanBalok = [];\n renderGridStage(); renderScriptChain(); setSpeech(config.speech); playSFX(520, 0.08, 'triangle');\n }\n\n function mulaiPetualangan() {\n initAudioEngine(); startBGM();\n document.getElementById('startModal').style.opacity = '0';\n setTimeout(() => { document.getElementById('startModal').style.display = 'none'; }, 300);\n klikPilihLevel(1);\n }\n\n function renderGridStage() {\n const config = LEVEL_DATA[levelSekarang];\n const grid = document.getElementById('isoGrid'); grid.innerHTML = '';\n grid.style.gridTemplateColumns = `repeat(${config.size}, 1fr)`; grid.style.gridTemplateRows = `repeat(${config.size}, 1fr)`;\n\n for (let y = 0; y < config.size; y++) {\n for (let x = 0; x < config.size; x++) {\n const tile = document.createElement('div'); tile.className = 'iso-tile'; tile.id = `iso-tile-${x}-${y}`;\n const isTarget = (x === config.target.x && y === config.target.y);\n const isRock = config.rocks.some(r => r.x === x && y === r.y);\n const isEnemy = config.enemies.some(e => e.x === x && e.y === y);\n if (isTarget) { tile.innerHTML = `<div class=\"billboard-item item-carrot\">\ud83e\udd55<\/div>`; } \n else if (isEnemy) { tile.innerHTML = `<div class=\"billboard-item item-wolf\">\ud83d\udc3a<\/div>`; } \n else if (isRock) { tile.innerHTML = `<div class=\"billboard-item item-rock\">\ud83e\udea8<\/div>`; }\n grid.appendChild(tile);\n }\n }\n updateRabbitActorPosition(false);\n }\n\n function updateRabbitActorPosition(isHopAnimation = false) {\n const actor = document.getElementById('rabbit3DActor');\n const targetTile = document.getElementById(`iso-tile-${posisiKelinci.x}-${posisiKelinci.y}`);\n document.querySelectorAll('.iso-tile').forEach(t => t.classList.remove('active-tile'));\n if (targetTile) targetTile.classList.add('active-tile');\n if (targetTile && actor) {\n actor.style.left = `${targetTile.offsetLeft}px`; actor.style.top = `${targetTile.offsetTop}px`;\n if (isHopAnimation) {\n actor.classList.remove('jumping', 'falling', 'celebrating'); void actor.offsetWidth; actor.classList.add('jumping');\n setTimeout(() => { actor.classList.remove('jumping'); }, 480);\n }\n }\n }\n\n function handleDragStart(e, arah) { if (sedangBerjalan) { e.preventDefault(); return; } draggedArah = arah; e.dataTransfer.setData('text\/plain', arah); playSFX(550, 0.05, 'sine'); }\n function handleDragOver(e) { e.preventDefault(); document.getElementById('codeDropzone').classList.add('drag-active'); }\n function handleDragLeave(e) { document.getElementById('codeDropzone').classList.remove('drag-active'); }\n function handleDrop(e) { e.preventDefault(); document.getElementById('codeDropzone').classList.remove('drag-active'); const arah = e.dataTransfer.getData('text\/plain') || draggedArah; if (arah) tambahBalok(arah); }\n \n function handlePaletteClick(e, arah) {\n if (sedangBerjalan) return;\n playSFX(440, 0.08, 'triangle');\n setSpeech('\"Tarik (drag) balok jigsaw lalu lepaskan (drop) ke area Tuangkan Kreatifmu ya!\"', '\ud83d\udd90\ufe0f');\n const dropzone = document.getElementById('codeDropzone'); dropzone.classList.remove('shake-hint'); void dropzone.offsetWidth; dropzone.classList.add('shake-hint');\n setTimeout(() => { dropzone.classList.remove('shake-hint'); }, 450);\n }\n\n function tambahBalok(arah) {\n if (sedangBerjalan) return;\n if (antreanBalok.length >= 10) { setSpeech('\"Rantai puzzle sudah panjang! Klik bendera hijau untuk melompat!\"'); playSFX(300, 0.1); return; }\n snapSound(); antreanBalok.push(arah); renderScriptChain(); setSpeech('\"Balok puzzle terpasang! Klik bendera hijau \ud83d\udea9 untuk melompat di istana!\"');\n }\n\n function hapusBalok(idx) { if (sedangBerjalan) return; deleteSound(); antreanBalok.splice(idx, 1); renderScriptChain(); }\n\n function renderScriptChain() {\n const container = document.getElementById('puzzleChain'); const emptyHint = document.getElementById('emptyHint');\n container.innerHTML = '';\n if (antreanBalok.length === 0) { emptyHint.style.display = 'block'; return; }\n emptyHint.style.display = 'none';\n antreanBalok.forEach((arah, i) => {\n const block = document.createElement('div'); block.className = `connected-tile tile-${arah}`; block.id = `script-block-${i}`; block.title = \"Klik keping jigsaw untuk menghapus\"; block.onclick = () => hapusBalok(i);\n block.innerHTML = `<span class=\"tile-step\">${i + 1}<\/span><span class=\"tile-icon\">${ikonPanah[arah]}<\/span><span class=\"tile-text\">${arah.toUpperCase()}<\/span><span class=\"tile-del\">\u2715<\/span>`;\n container.appendChild(block);\n });\n }\n\n function resetStage() {\n if (sedangBerjalan) return;\n const config = LEVEL_DATA[levelSekarang]; posisiKelinci = { ...config.start }; antreanBalok = [];\n const actor = document.getElementById('rabbit3DActor');\n if (actor) { actor.classList.remove('jumping', 'falling', 'celebrating'); actor.style.opacity = '1'; }\n renderGridStage(); renderScriptChain(); setSpeech(config.speech); deleteSound();\n }\n\n async function jalankanProgram() {\n if (sedangBerjalan) return;\n if (antreanBalok.length === 0) { setSpeech('\"Pasang balok panah dulu ya di samping bendera hijau!\"', '\ud83e\udd14'); playSFX(260, 0.15); return; }\n sedangBerjalan = true;\n document.getElementById('btnFlag').disabled = true; document.getElementById('btnStop').disabled = true; document.getElementById('btnRunBig').disabled = true; document.getElementById('btnResetBig').disabled = true;\n\n const config = LEVEL_DATA[levelSekarang]; posisiKelinci = { ...config.start };\n const actor = document.getElementById('rabbit3DActor');\n if (actor) { actor.classList.remove('jumping', 'falling', 'celebrating'); actor.style.opacity = '1'; }\n updateRabbitActorPosition(false);\n setSpeech('\"Kelinci mulai melompat di istana 3D... Hap! Hap!\"', '\ud83d\udc30');\n\n let gagal = false;\n for (let i = 0; i < antreanBalok.length; i++) {\n const activeBlock = document.getElementById(`script-block-${i}`);\n if (activeBlock) activeBlock.classList.add('running');\n\n const aksi = antreanBalok[i];\n let targetX = posisiKelinci.x; let targetY = posisiKelinci.y;\n if (aksi === 'atas') targetY--; if (aksi === 'bawah') targetY++; if (aksi === 'kiri') targetX--; if (aksi === 'kanan') targetX++;\n\n const keluarArena = (targetX < 0 || targetX >= config.size || targetY < 0 || targetY >= config.size);\n const tabrakBatu = config.rocks.some(r => r.x === targetX && r.y === targetY);\n const kenaMusuh = config.enemies.some(e => e.x === targetX && e.y === targetY);\n\n if (keluarArena || tabrakBatu || kenaMusuh) {\n fallSound(); triggerScreenShake(); showEnglishCheer();\n if (actor) { actor.classList.remove('jumping'); actor.classList.add('falling'); }\n if (kenaMusuh) { wolfSound(); setSpeech('\"Aww! Ada Serigala Galak! Kelinci kaget dan terjatuh, ayo perbaiki jalannya!\"', '\ud83d\udc3a'); } \n else if (tabrakBatu) { rockSound(); setSpeech('\"Aduh! Kelinci tersandung batu dan terjatuh! Coba cari rute lain!\"', '\ud83e\udea8'); } \n else { setSpeech('\"Kelinci melompat keluar istana dan terjatuh! Cek kembali arah panahmu.\"', '\ud83c\udf31'); }\n gagal = true; if (activeBlock) activeBlock.classList.remove('running'); break;\n } else {\n posisiKelinci.x = targetX; posisiKelinci.y = targetY; jumpSound(); triggerScreenShake(); updateRabbitActorPosition(true);\n }\n await new Promise(r => setTimeout(r, 680));\n if (activeBlock) activeBlock.classList.remove('running');\n }\n\n if (!gagal) {\n if (posisiKelinci.x === config.target.x && posisiKelinci.y === config.target.y) {\n if (actor) { actor.classList.remove('jumping', 'falling'); actor.classList.add('celebrating'); }\n victoryFanfare(); fireConfetti();\n if (levelSekarang === levelTerbukaMax && levelTerbukaMax < 5) { levelTerbukaMax++; refreshLevelButtons(); }\n tampilkanModalMenang();\n } else {\n playSFX(300, 0.2); showEnglishCheer(); setSpeech('\"Kelinci sudah melompat, tapi wortelnya masih di depan! Tambah balok lagi ya!\"', '\ud83e\udd55');\n }\n }\n\n sedangBerjalan = false;\n document.getElementById('btnFlag').disabled = false; document.getElementById('btnStop').disabled = false; document.getElementById('btnRunBig').disabled = false; document.getElementById('btnResetBig').disabled = false;\n }\n\n function tampilkanModalMenang() {\n const modal = document.getElementById('victoryModal'); const title = document.getElementById('vicTitle'); const desc = document.getElementById('vicDesc'); const btn = document.getElementById('btnNextLevel');\n if (levelSekarang < 5) {\n title.innerText = `Awesome! Level ${levelSekarang} Cleared!`; desc.innerText = `Kelinci melompat gembira dan kenyang memakan wortel! Kunci Level ${levelSekarang + 1} kini sudah terbuka!`; btn.innerHTML = `<span>\ud83c\udf1f<\/span> LANJUT KE LEVEL ${levelSekarang + 1}!`;\n } else {\n title.innerText = 'You Are A 2.5D Castle Champion!'; desc.innerText = 'Luar Biasa! Kamu telah menuntaskan SEMUA 5 level petualangan istana 2.5D MentorOnline!'; btn.innerHTML = `<span>\ud83c\udfc6<\/span> MAIN LAGI DARI LEVEL 1`;\n }\n modal.style.display = 'flex'; modal.style.opacity = '1';\n }\n\n const viewportEl = document.querySelector('.arena-viewport');\n const isoWorldEl = document.getElementById('isoWorld');\n let rotX = 58; let rotZ = -45; let baseTranslateY = -8; let isDragging = false; let lastX = 0; let lastY = 0;\n\n function applyCameraTransform() {\n if (!isoWorldEl) return;\n isoWorldEl.style.transform = `rotateX(${rotX}deg) rotateZ(${rotZ}deg) translateY(${baseTranslateY}px)`;\n document.querySelectorAll('.billboard-item').forEach(el => { el.style.transform = `rotateZ(${-rotZ}deg) rotateX(${-rotX}deg) translateY(-20px)`; });\n const rabbitSprite = document.getElementById('rabbitSprite');\n if (rabbitSprite) { rabbitSprite.style.transform = `rotateZ(${-rotZ}deg) rotateX(${-rotX}deg) translateY(-26px)`; }\n const signBadge = document.querySelector('.sign-badge');\n if (signBadge) { signBadge.style.transform = `rotateZ(${-rotZ}deg) rotateX(${-rotX}deg)`; }\n }\n\n viewportEl.addEventListener('mousedown', (e) => {\n if (e.target.closest('.orbit-hud')) return;\n isDragging = true; lastX = e.clientX; lastY = e.clientY; viewportEl.style.cursor = 'grabbing';\n });\n\n window.addEventListener('mousemove', (e) => {\n if (!isDragging) return;\n const deltaX = e.clientX - lastX; const deltaY = e.clientY - lastY;\n lastX = e.clientX; lastY = e.clientY;\n rotZ += deltaX * 0.55; rotX -= deltaY * 0.35;\n if (rotX < 25) rotX = 25; if (rotX > 82) rotX = 82;\n applyCameraTransform();\n });\n\n window.addEventListener('mouseup', () => { if (isDragging) { isDragging = false; viewportEl.style.cursor = 'grab'; } });\n viewportEl.addEventListener('touchstart', (e) => { if (e.target.closest('.orbit-hud')) return; if (e.touches.length === 1) { isDragging = true; lastX = e.touches[0].clientX; lastY = e.touches[0].clientY; } }, { passive: true });\n window.addEventListener('touchmove', (e) => {\n if (!isDragging || e.touches.length !== 1) return;\n const deltaX = e.touches[0].clientX - lastX; const deltaY = e.touches[0].clientY - lastY;\n lastX = e.touches[0].clientX; lastY = e.touches[0].clientY;\n rotZ += deltaX * 0.65; rotX -= deltaY * 0.4;\n if (rotX < 25) rotX = 25; if (rotX > 82) rotX = 82;\n applyCameraTransform();\n }, { passive: true });\n window.addEventListener('touchend', () => { isDragging = false; });\n\n function putarManual(derajat) { rotZ += derajat; applyCameraTransform(); playSFX(480, 0.05, 'sine'); }\n function resetSudutKamera() { rotX = 58; rotZ = -45; applyCameraTransform(); playSFX(600, 0.08, 'triangle'); }\n setTimeout(() => { applyCameraTransform(); }, 100);\n\n function lanjutLevel() {\n document.getElementById('victoryModal').style.display = 'none';\n if (levelSekarang < 5) { klikPilihLevel(levelSekarang + 1); } else { klikPilihLevel(1); }\n }\n <\/script>\n\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>MentorOnline.asia | Kuasai Skill Digital Masa Depan × \ud83c\udf81 Promo Terbatas Mulai Perjalanan Digitalmu Sekarang! Dapatkan Kelas Trial Interaktif dan Harga Spesial khusus pendaftaran hari ini. \ud83d\ude80 Daftar via WhatsApp \u2794 × Nama Tutor Kelas Diajar Deskripsi detail tentang tutor akan muncul di sini. Membantu memberikan penjelasan kepada siswa dan orang tua. Tanya Jadwal Tutor […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mentoronline.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":5,"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/mentoronline.id\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/mentoronline.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}