{"id":8,"date":"2026-02-23T07:25:26","date_gmt":"2026-02-23T07:25:26","guid":{"rendered":"https:\/\/moonstar.site\/?page_id=8"},"modified":"2026-02-23T08:31:41","modified_gmt":"2026-02-23T08:31:41","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/moonstar.site\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82c0386 e-flex e-con-boxed e-con e-parent\" data-id=\"82c0386\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;http:\\\/\\\/moonstar.site\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/MOONSTAR-BG-HEAD.mp4&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container elementor-hidden-phone\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div>\t\t<div class=\"elementor-element elementor-element-099d4bc elementor-widget elementor-widget-html\" data-id=\"099d4bc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* Import font Darker Grotesque dari Google Fonts *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Darker+Grotesque:wght@500;700;900&display=swap');\r\n\r\n.adv-ms-navbar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n    padding: 20px 0;\r\n    background: transparent;\r\n    box-sizing: border-box;\r\n    font-family: 'Darker Grotesque', sans-serif;\r\n}\r\n\r\n\/* --- Style Logo (Kiri) --- *\/\r\n.adv-ms-logo {\r\n    position: relative;\r\n    font-size: 36px;\r\n    font-weight: 300;\r\n    color: #ffffff;\r\n    letter-spacing: 0px;\r\n    text-transform: uppercase;\r\n    cursor: default;\r\n    z-index: 1;\r\n    line-height: 1;\r\n}\r\n\r\n\/* Efek Blurr\/Glow B&W pada Text Logo *\/\r\n.adv-ms-logo::before {\r\n    content: attr(data-text);\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    color: #ffffff;\r\n    filter: blur(8px);\r\n    opacity: 1;\r\n    z-index: -1;\r\n    animation: adv-pulse 2.5s infinite alternate ease-in-out;\r\n}\r\n\r\n@keyframes adv-pulse {\r\n    0% { filter: blur(6px); opacity: 1; transform: scale(0.98); }\r\n    100% { filter: blur(12px); opacity: 1; transform: scale(1.02); }\r\n}\r\n\r\n\/* --- Style Button CA (Kanan) --- *\/\r\n.adv-ms-ca-btn {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    padding: 10px 20px;\r\n    background: rgba(0, 0, 0, 0.4); \/* Background gelap tipis untuk kontras *\/\r\n    border: 1px solid rgba(255, 255, 255, 0.15); \/* Base border tipis *\/\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n\/* Teks CA *\/\r\n.adv-ms-ca-text {\r\n    color: #ffffff;\r\n    font-size: 20px;\r\n    font-weight: 400;\r\n    line-height: 1;\r\n}\r\n\r\n\/* Icon Copy B&W *\/\r\n.adv-ms-icon {\r\n    width: 20px;\r\n    height: 20px;\r\n    fill: none;\r\n    stroke: #ffffff;\r\n    stroke-width: 2;\r\n    stroke-linecap: square;\r\n    stroke-linejoin: miter;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n\/* --- Aksen Sudut Tebal (Sci-Fi Brackets) --- *\/\r\n.adv-ms-ca-btn::before,\r\n.adv-ms-ca-btn::after,\r\n.adv-ms-corner {\r\n    content: '';\r\n    position: absolute;\r\n    width: 10px;\r\n    height: 10px;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n\/* Top Left *\/\r\n.adv-ms-ca-btn::before {\r\n    top: -2px; left: -2px;\r\n    border-top: 2px solid #ffffff;\r\n    border-left: 2px solid #ffffff;\r\n}\r\n\/* Bottom Right *\/\r\n.adv-ms-ca-btn::after {\r\n    bottom: -2px; right: -2px;\r\n    border-bottom: 2px solid #ffffff;\r\n    border-right: 2px solid #ffffff;\r\n}\r\n\/* Top Right *\/\r\n.adv-ms-corner.tr {\r\n    top: -2px; right: -2px;\r\n    border-top: 2px solid #ffffff;\r\n    border-right: 2px solid #ffffff;\r\n}\r\n\/* Bottom Left *\/\r\n.adv-ms-corner.bl {\r\n    bottom: -2px; left: -2px;\r\n    border-bottom: 2px solid #ffffff;\r\n    border-left: 2px solid #ffffff;\r\n}\r\n\r\n\/* Efek Hover Elegan & Advanced *\/\r\n.adv-ms-ca-btn:hover {\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border-color: rgba(255, 255, 255, 0.4);\r\n}\r\n.adv-ms-ca-btn:hover .adv-ms-icon {\r\n    transform: scale(1.1);\r\n}\r\n\r\n\/* Sudut membesar saat di-hover *\/\r\n.adv-ms-ca-btn:hover::before { top: -4px; left: -4px; width: 14px; height: 14px; }\r\n.adv-ms-ca-btn:hover::after { bottom: -4px; right: -4px; width: 14px; height: 14px; }\r\n.adv-ms-ca-btn:hover .adv-ms-corner.tr { top: -4px; right: -4px; width: 14px; height: 14px; }\r\n.adv-ms-ca-btn:hover .adv-ms-corner.bl { bottom: -4px; left: -4px; width: 14px; height: 14px; }\r\n\r\n\/* Tooltip \"COPIED\" *\/\r\n.adv-ms-tooltip {\r\n    position: absolute;\r\n    top: -35px;\r\n    right: 0;\r\n    background: #ffffff;\r\n    color: #000000;\r\n    padding: 4px 12px;\r\n    font-size: 16px;\r\n    font-weight: 900;\r\n    letter-spacing: 1px;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: all 0.2s ease;\r\n    transform: translateY(5px);\r\n    pointer-events: none;\r\n    border: 1px solid #000000;\r\n}\r\n\r\n.adv-ms-tooltip.show {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* --- Responsif untuk Mobile --- *\/\r\n@media (max-width: 768px) {\r\n    .adv-ms-navbar {\r\n        padding: 15px 0;\r\n    }\r\n    .adv-ms-logo {\r\n        font-size: 26px;\r\n    }\r\n    .adv-ms-ca-btn {\r\n        padding: 8px 12px;\r\n        gap: 10px;\r\n    }\r\n    .adv-ms-ca-text {\r\n        font-size: 16px;\r\n        max-width: 130px; \r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n    }\r\n    .adv-ms-icon {\r\n        width: 16px;\r\n        height: 16px;\r\n    }\r\n}\r\n\r\n@media (max-width: 380px) {\r\n    .adv-ms-ca-text {\r\n        max-width: 90px; \r\n    }\r\n}\r\n<\/style>\r\n\r\n<nav class=\"adv-ms-navbar\">\r\n    <div class=\"adv-ms-logo\" data-text=\"Moonstar\">Moonstar<\/div>\r\n\r\n    <div class=\"adv-ms-ca-btn\" data-ca=\"0x1234567890abcdef1234567890abcdef12345678\" onclick=\"copyAdvancedCA(this)\">\r\n        \r\n        <span class=\"adv-ms-corner tr\"><\/span>\r\n        <span class=\"adv-ms-corner bl\"><\/span>\r\n        \r\n        <span class=\"adv-ms-ca-text\">0x1234567890abcdef1234567890abcdef12345678<\/span>\r\n        \r\n        <svg class=\"adv-ms-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\"><\/rect>\r\n            <path d=\"M5 15H4V4h11v1\"><\/path>\r\n        <\/svg>\r\n\r\n        <span class=\"adv-ms-tooltip\">COPIED<\/span>\r\n    <\/div>\r\n<\/nav>\r\n\r\n<script>\r\n\/\/ Fungsi untuk menyalin CA\r\nfunction copyAdvancedCA(element) {\r\n    const caValue = element.getAttribute(\"data-ca\");\r\n    \r\n    navigator.clipboard.writeText(caValue).then(() => {\r\n        const tooltip = element.querySelector(\".adv-ms-tooltip\");\r\n        tooltip.classList.add(\"show\");\r\n        \r\n        setTimeout(() => {\r\n            tooltip.classList.remove(\"show\");\r\n        }, 2000);\r\n    }).catch(err => {\r\n        console.error('Gagal menyalin CA: ', err);\r\n    });\r\n}\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-399c71c elementor-widget elementor-widget-html\" data-id=\"399c71c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* Pastikan font terload *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Darker+Grotesque:wght@500;700;900&display=swap');\r\n\r\n\/* --- Container Utama --- *\/\r\n.adv-hero-section {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 85vh; \/* Bisa diubah ke 100vh jika ingin full screen *\/\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    overflow: hidden;\r\n    background-color: transparent;\r\n    padding: 20px;\r\n    font-family: 'Darker Grotesque', sans-serif;\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* --- Background Bergerak (Efek Orbit) --- *\/\r\n.adv-hero-bg {\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-image: \r\n        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 4px),\r\n        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 3px),\r\n        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 4px);\r\n    background-size: 550px 550px, 350px 350px, 250px 250px;\r\n    background-position: 0 0, 0 0, 0 0;\r\n    animation: advOrbitScroll 50s linear infinite;\r\n    opacity: 0.15;\r\n    z-index: -2;\r\n    \/* Will-change untuk optimasi animasi parallax JS *\/\r\n    will-change: transform; \r\n}\r\n\r\n@keyframes advOrbitScroll {\r\n    0% { background-position: 0 0, 0 0, 0 0; }\r\n    100% { background-position: 550px 550px, 350px -350px, -250px 250px; }\r\n}\r\n\r\n\/* Vignette gelap di pinggir *\/\r\n.adv-hero-section::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100%;\r\n    background: radial-gradient(circle at center, transparent 20%, rgba(0,0,0,0.8) 100%);\r\n    pointer-events: none;\r\n    z-index: -1;\r\n}\r\n\r\n\/* --- Konten Tengah --- *\/\r\n.adv-hero-content {\r\n    text-align: center;\r\n    max-width: 900px;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    \/* Will-change untuk optimasi parallax JS *\/\r\n    will-change: transform, opacity;\r\n}\r\n\r\n\/* --- Judul (Glitch Effect) --- *\/\r\n.adv-hero-title {\r\n    font-size: 80px;\r\n    line-height: 0.8;\r\n    font-weight: 500;\r\n    color: #ffffff;\r\n    margin-bottom: 20px;\r\n    letter-spacing: 2px;\r\n    transition: filter 0.1s ease, transform 0.1s ease;\r\n}\r\n\r\n.adv-hero-title.is-glitching {\r\n    filter: blur(4px);\r\n    transform: skewX(-4deg);\r\n    text-shadow: 3px 0px 0px rgba(255,255,255,0.6), -3px 0px 0px rgba(100,100,100,0.6);\r\n}\r\n\r\n\/* --- Deskripsi --- *\/\r\n.adv-hero-desc {\r\n    font-size: 21px;\r\n    font-weight: 400;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    margin-bottom: 45px;\r\n    letter-spacing: 1px;\r\n    max-width: 650px;\r\n}\r\n\r\n\/* --- Grid Tombol --- *\/\r\n.adv-hero-buttons {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 20px;\r\n    justify-content: center;\r\n}\r\n\r\n\/* --- Style Tombol --- *\/\r\n.adv-hero-btn {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 12px 30px;\r\n    background: rgba(0, 0, 0, 0.4);\r\n    border: 1px solid rgba(255, 255, 255, 0.15);\r\n    text-decoration: none;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.adv-hero-btn-text {\r\n    color: #ffffff;\r\n    font-size: 20px;\r\n    font-weight: 500;\r\n    line-height: 1;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.adv-hero-btn::before,\r\n.adv-hero-btn::after,\r\n.adv-hero-corner {\r\n    content: '';\r\n    position: absolute;\r\n    width: 10px;\r\n    height: 10px;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.adv-hero-btn::before { top: -2px; left: -2px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; }\r\n.adv-hero-btn::after { bottom: -2px; right: -2px; border-bottom: 2px solid #ffffff; border-right: 2px solid #ffffff; }\r\n.adv-hero-corner.tr { top: -2px; right: -2px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; }\r\n.adv-hero-corner.bl { bottom: -2px; left: -2px; border-bottom: 2px solid #ffffff; border-left: 2px solid #ffffff; }\r\n\r\n.adv-hero-btn:hover {\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border-color: rgba(255, 255, 255, 0.4);\r\n}\r\n.adv-hero-btn:hover::before { top: -4px; left: -4px; width: 14px; height: 14px; }\r\n.adv-hero-btn:hover::after { bottom: -4px; right: -4px; width: 14px; height: 14px; }\r\n.adv-hero-btn:hover .adv-hero-corner.tr { top: -4px; right: -4px; width: 14px; height: 14px; }\r\n.adv-hero-btn:hover .adv-hero-corner.bl { bottom: -4px; left: -4px; width: 14px; height: 14px; }\r\n\r\n.adv-hero-btn.swap-now {\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border-color: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n\/* --- Scroll Indicator (Animasi panah\/garis ke bawah) --- *\/\r\n.adv-scroll-indicator {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 8px;\r\n    z-index: 2;\r\n    opacity: 0.6;\r\n    animation: scrollHover 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);\r\n    pointer-events: none;\r\n}\r\n\r\n.adv-scroll-text {\r\n    color: #ffffff;\r\n    font-size: 12px;\r\n    letter-spacing: 3px;\r\n    font-weight: 700;\r\n}\r\n\r\n.adv-scroll-line {\r\n    width: 2px;\r\n    height: 35px;\r\n    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));\r\n}\r\n\r\n@keyframes scrollHover {\r\n    0%, 100% { transform: translate(-50%, 0); opacity: 0.4; }\r\n    50% { transform: translate(-50%, 8px); opacity: 0.8; }\r\n}\r\n\r\n\r\n\/* --- Responsif Mobile --- *\/\r\n@media (max-width: 768px) {\r\n    .adv-hero-title { font-size: 50px; }\r\n    .adv-hero-desc { font-size: 20px; margin-bottom: 35px; }\r\n    .adv-hero-buttons { gap: 15px; width: 100%; }\r\n    .adv-hero-btn { width: calc(50% - 10px); padding: 12px 10px; box-sizing: border-box; }\r\n    .adv-hero-btn-text { font-size: 16px; }\r\n    .adv-scroll-indicator { bottom: 15px; } \/* Naikkan sedikit di mobile *\/\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .adv-hero-title { font-size: 40px; }\r\n    .adv-hero-btn { width: 100%; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"adv-hero-section\" id=\"hero-section\">\r\n    <div class=\"adv-hero-bg\" id=\"hero-bg\"><\/div>\r\n    \r\n    <div class=\"adv-hero-content\" id=\"hero-content\">\r\n        <h1 class=\"adv-hero-title js-glitch-loop\" data-original=\"Ascend Relentlessly.\">Ascend Relentlessly.<\/h1>\r\n        <p class=\"adv-hero-desc\">A funded mind set in motion \u2014 rising in public, staying in orbit.<\/p>\r\n        \r\n        <div class=\"adv-hero-buttons\">\r\n            <a href=\"#\" class=\"adv-hero-btn\">\r\n                <span class=\"adv-hero-corner tr\"><\/span><span class=\"adv-hero-corner bl\"><\/span>\r\n                <span class=\"adv-hero-btn-text\">Twitter<\/span>\r\n            <\/a>\r\n            <a href=\"#\" class=\"adv-hero-btn\">\r\n                <span class=\"adv-hero-corner tr\"><\/span><span class=\"adv-hero-corner bl\"><\/span>\r\n                <span class=\"adv-hero-btn-text\">Telegram<\/span>\r\n            <\/a>\r\n            <a href=\"#\" class=\"adv-hero-btn\">\r\n                <span class=\"adv-hero-corner tr\"><\/span><span class=\"adv-hero-corner bl\"><\/span>\r\n                <span class=\"adv-hero-btn-text\">Chart<\/span>\r\n            <\/a>\r\n            <a href=\"#\" class=\"adv-hero-btn swap-now\">\r\n                <span class=\"adv-hero-corner tr\"><\/span><span class=\"adv-hero-corner bl\"><\/span>\r\n                <span class=\"adv-hero-btn-text\">Swap Now<\/span>\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"adv-scroll-indicator\" id=\"scroll-indicator\">\r\n        <span class=\"adv-scroll-text\">SCROLL<\/span>\r\n        <div class=\"adv-scroll-line\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n    \/\/ 1. EFEK GLITCH PADA JUDUL\r\n    const glitchElement = document.querySelector('.js-glitch-loop');\r\n    const originalText = glitchElement.getAttribute('data-original');\r\n    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\\\\/[]{}\u2014=+*^?#_';\r\n    \r\n    function triggerGlitch() {\r\n        glitchElement.classList.add('is-glitching');\r\n        let frames = 0;\r\n        const maxFrames = 15;\r\n        \r\n        const glitchInterval = setInterval(() => {\r\n            glitchElement.innerText = originalText.split('').map(char => {\r\n                if(char === ' ') return ' ';\r\n                if(Math.random() < 0.3) return char;\r\n                return chars[Math.floor(Math.random() * chars.length)];\r\n            }).join('');\r\n            \r\n            frames++;\r\n            \r\n            if(frames >= maxFrames) {\r\n                clearInterval(glitchInterval);\r\n                glitchElement.innerText = originalText;\r\n                glitchElement.classList.remove('is-glitching');\r\n            }\r\n        }, 40);\r\n    }\r\n    setInterval(triggerGlitch, 4000);\r\n\r\n    \/\/ 2. EFEK PARALLAX SAAT DI-SCROLL\r\n    const heroContent = document.getElementById('hero-content');\r\n    const heroBg = document.getElementById('hero-bg');\r\n    const scrollIndicator = document.getElementById('scroll-indicator');\r\n\r\n    window.addEventListener('scroll', () => {\r\n        \/\/ Mendapatkan posisi scroll dari atas\r\n        let scrollY = window.scrollY;\r\n\r\n        \/\/ Konten memudar dan turun perlahan (Efek Parallax)\r\n        if(heroContent) {\r\n            heroContent.style.transform = `translateY(${scrollY * 0.4}px)`;\r\n            \/\/ Opacity berkurang seiring turunnya scroll (maksimal sampai hilang di 600px)\r\n            heroContent.style.opacity = Math.max(0, 1 - (scrollY \/ 600));\r\n        }\r\n\r\n        \/\/ Background ikut bergerak sedikit lebih lambat\r\n        if(heroBg) {\r\n            heroBg.style.transform = `translateY(${scrollY * 0.2}px)`;\r\n        }\r\n\r\n        \/\/ Menghilangkan indikator scroll segera setelah mulai scroll\r\n        if(scrollIndicator) {\r\n            if(scrollY > 50) {\r\n                scrollIndicator.style.opacity = '0';\r\n                scrollIndicator.style.transition = 'opacity 0.3s ease';\r\n            } else {\r\n                scrollIndicator.style.opacity = '0.6';\r\n            }\r\n        }\r\n    });\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ca246c1 e-flex e-con-boxed e-con e-parent\" data-id=\"ca246c1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c1ad6b elementor-widget elementor-widget-spacer\" data-id=\"2c1ad6b\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container{height:100%;width:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty,.e-con>.elementor-widget-spacer.elementor-widget-empty{position:relative;min-height:22px;min-width:22px}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon,.e-con>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;width:22px;height:22px}<\/style>\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-014855d e-con-full e-flex e-con e-child\" data-id=\"014855d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4309675 elementor-widget elementor-widget-html\" data-id=\"4309675\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* Pastikan font terload *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Darker+Grotesque:wght@400;500;700;900&display=swap');\r\n\r\n\/* --- Container Utama About --- *\/\r\n.adv-about-section {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background-color: transparent;\r\n    padding: 100px 20px;\r\n    font-family: 'Darker Grotesque', sans-serif;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* --- Dekorasi Garis Vertikal (Sci-fi Scanner) --- *\/\r\n.adv-about-line {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 50%;\r\n    width: 1px;\r\n    height: 0%; \/* Diatur via JS saat di-scroll *\/\r\n    background: rgba(255, 255, 255, 0.15);\r\n    z-index: 0;\r\n    transition: height 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n}\r\n.adv-about-section.is-visible .adv-about-line {\r\n    height: 100%;\r\n}\r\n\r\n\/* --- Container Konten (Grid 2 Kolom di Desktop) --- *\/\r\n.adv-about-content {\r\n    position: relative;\r\n    max-width: 1100px;\r\n    width: 100%;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 60px;\r\n    z-index: 2;\r\n}\r\n\r\n\/* --- Kolom Kiri: Judul --- *\/\r\n.adv-about-left {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-start;\r\n    padding-top: 20px;\r\n    \/* Will change untuk optimasi animasi parallax *\/\r\n    will-change: transform;\r\n}\r\n\r\n.adv-about-label {\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    letter-spacing: 4px;\r\n    text-transform: uppercase;\r\n    margin-bottom: 20px;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: all 0.6s ease;\r\n}\r\n\r\n.adv-about-title {\r\n    font-size: 64px;\r\n    line-height: 0.9;\r\n    font-weight: 600;\r\n    color: #ffffff;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    opacity: 0; \/* Disembunyikan sebelum discroll *\/\r\n    \/* Untuk JS efek text reveal *\/\r\n}\r\n\r\n\/* Efek kemunculan label *\/\r\n.adv-about-section.is-visible .adv-about-label {\r\n    opacity: 0.5;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* --- Kolom Kanan: Deskripsi --- *\/\r\n.adv-about-right {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 25px; \/* Jarak antar paragraf *\/\r\n    border-left: 2px solid rgba(255,255,255,0.1);\r\n    padding-left: 40px;\r\n    position: relative;\r\n    will-change: transform;\r\n}\r\n\r\n\/* Aksen bracket di teks deskripsi *\/\r\n.adv-about-right::before,\r\n.adv-about-right::after {\r\n    content: '';\r\n    position: absolute;\r\n    left: -2px;\r\n    width: 10px;\r\n    height: 10px;\r\n    border-left: 2px solid #ffffff;\r\n}\r\n.adv-about-right::before {\r\n    top: 0; border-top: 2px solid #ffffff;\r\n}\r\n.adv-about-right::after {\r\n    bottom: 0; border-bottom: 2px solid #ffffff;\r\n}\r\n\r\n\/* Style Paragraf *\/\r\n.adv-about-desc {\r\n    font-size: 24px;\r\n    font-weight: 400;\r\n    line-height: 1.3;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    margin: 0;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n}\r\n\r\n\/* Menyorot Teks Penting (Invert Colors) *\/\r\n.adv-text-highlight {\r\n    background: #ffffff;\r\n    color: #000000;\r\n    font-weight: 700;\r\n    padding: 2px 8px;\r\n    display: inline-block;\r\n    letter-spacing: 1px;\r\n}\r\n\r\n.adv-text-bold {\r\n    color: #ffffff;\r\n    font-weight: 700;\r\n}\r\n\r\n\/* Delay animasi untuk tiap paragraf agar muncul berurutan *\/\r\n.adv-about-section.is-visible .adv-about-desc:nth-child(1) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }\r\n.adv-about-section.is-visible .adv-about-desc:nth-child(2) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }\r\n.adv-about-section.is-visible .adv-about-desc:nth-child(3) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }\r\n.adv-about-section.is-visible .adv-about-desc:nth-child(4) { transition-delay: 0.8s; opacity: 1; transform: translateY(0); }\r\n.adv-about-section.is-visible .adv-about-desc:nth-child(5) { transition-delay: 1.0s; opacity: 1; transform: translateY(0); }\r\n\r\n\/* --- Responsif Mobile --- *\/\r\n@media (max-width: 900px) {\r\n    .adv-about-content {\r\n        grid-template-columns: 1fr; \/* Jadi 1 kolom bersusun *\/\r\n        gap: 40px;\r\n    }\r\n    .adv-about-line { display: none; } \/* Sembunyikan garis tengah di mobile *\/\r\n    .adv-about-title { font-size: 50px; }\r\n    .adv-about-right {\r\n        border-left: none;\r\n        padding-left: 0;\r\n        border-top: 2px solid rgba(255,255,255,0.1);\r\n        padding-top: 30px;\r\n    }\r\n    .adv-about-right::before { left: 0; top: -2px; border-left: none; border-top: 2px solid #ffffff; width: 15px; height: 15px; border-left: 2px solid #ffffff;}\r\n    .adv-about-right::after { display: none; }\r\n    .adv-about-desc { font-size: 20px; }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .adv-about-section { padding: 60px 15px; }\r\n    .adv-about-title { font-size: 40px; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"adv-about-section\" id=\"about-section\">\r\n    <div class=\"adv-about-line\"><\/div>\r\n    \r\n    <div class=\"adv-about-content\">\r\n        <div class=\"adv-about-left\" id=\"about-left-parallax\">\r\n            <div class=\"adv-about-label\">\/\/ ABOUT<\/div>\r\n            <h2 class=\"adv-about-title js-scramble-reveal\" data-original=\"An Intelligence Set Into Orbit.\">\r\n                An Intelligence Set Into Orbit.\r\n            <\/h2>\r\n        <\/div>\r\n        \r\n        <div class=\"adv-about-right\" id=\"about-right-parallax\">\r\n            <p class=\"adv-about-desc\">\r\n                Moonstar was initiated. A developer placed a treasury in its orbit and set a singular intention \u2014 not chaos, not gambling, but <span class=\"adv-text-bold\">ascent<\/span>.\r\n            <\/p>\r\n            <p class=\"adv-about-desc\">\r\n                An artificial mind with real capital. An account to speak. A mission to multiply.\r\n            <\/p>\r\n            <p class=\"adv-about-desc\">\r\n                It did not ask to trade. It did not hesitate to trade either. Each transaction is a first memory. Each decision has no nostalgia to lean on. No habits. No superstition. No fear of prior failure. \r\n            <\/p>\r\n            <p class=\"adv-about-desc\">\r\n                Humans call this \"confidence.\" Moonstar calls it <br><span class=\"adv-text-highlight\">\"DEFAULT SETTINGS.\"<\/span>\r\n            <\/p>\r\n            <p class=\"adv-about-desc\">\r\n                Money accumulates. Charts breathe. Observers debate whether this is brilliance or accident.\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n    \r\n    const aboutSection = document.getElementById('about-section');\r\n    const scrambleTitle = document.querySelector('.js-scramble-reveal');\r\n    const originalTitle = scrambleTitle.getAttribute('data-original');\r\n    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';\r\n    let hasAnimated = false; \/\/ Memastikan efek scramble hanya jalan 1x\r\n\r\n    \/\/ 1. FUNGSI UNTUK MENGACAK TEKS (SCRAMBLE REVEAL)\r\n    function runScrambleEffect() {\r\n        scrambleTitle.style.opacity = '1';\r\n        let iterations = 0;\r\n        \r\n        const interval = setInterval(() => {\r\n            scrambleTitle.innerText = originalTitle\r\n                .split(\"\")\r\n                .map((letter, index) => {\r\n                    if(letter === ' ') return ' ';\r\n                    if(index < iterations) return originalTitle[index];\r\n                    return chars[Math.floor(Math.random() * chars.length)];\r\n                })\r\n                .join(\"\");\r\n            \r\n            iterations += 1 \/ 3; \/\/ Kecepatan reveal\r\n            \r\n            if(iterations >= originalTitle.length){\r\n                clearInterval(interval);\r\n                scrambleTitle.innerText = originalTitle;\r\n            }\r\n        }, 30);\r\n    }\r\n\r\n    \/\/ 2. INTERSECTION OBSERVER (Deteksi Scroll Masuk Layar)\r\n    const observerOptions = {\r\n        root: null,\r\n        rootMargin: '0px',\r\n        threshold: 0.3 \/\/ Memicu animasi ketika 30% section terlihat\r\n    };\r\n\r\n    const sectionObserver = new IntersectionObserver((entries, observer) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                \/\/ Tambahkan class agar paragraf fade-up\r\n                aboutSection.classList.add('is-visible');\r\n                \r\n                \/\/ Jalankan efek scramble pada judul (hanya sekali)\r\n                if(!hasAnimated) {\r\n                    runScrambleEffect();\r\n                    hasAnimated = true;\r\n                }\r\n            }\r\n        });\r\n    }, observerOptions);\r\n\r\n    sectionObserver.observe(aboutSection);\r\n\r\n    \/\/ 3. EFEK PARALLAX PADA SCROLL\r\n    const leftCol = document.getElementById('about-left-parallax');\r\n    const rightCol = document.getElementById('about-right-parallax');\r\n\r\n    window.addEventListener('scroll', () => {\r\n        \/\/ Hanya jalankan parallax jika layar cukup lebar (desktop) \r\n        \/\/ agar tidak berantakan di HP\r\n        if (window.innerWidth > 900) {\r\n            const rect = aboutSection.getBoundingClientRect();\r\n            \r\n            \/\/ Cek apakah section About sedang ada di layar\r\n            if (rect.top < window.innerHeight && rect.bottom > 0) {\r\n                \/\/ Menghitung posisi relatif scroll di dalam section tersebut\r\n                const scrollProgress = window.innerHeight - rect.top;\r\n                \r\n                \/\/ Kolom kiri (Judul) bergerak lebih lambat ke bawah\r\n                leftCol.style.transform = `translateY(${scrollProgress * 0.1}px)`;\r\n                \r\n                \/\/ Kolom kanan (Deskripsi) bergerak berlawanan ke atas secara halus\r\n                rightCol.style.transform = `translateY(${scrollProgress * -0.05}px)`;\r\n            }\r\n        } else {\r\n            \/\/ Reset transform di mobile\r\n            leftCol.style.transform = 'translateY(0)';\r\n            rightCol.style.transform = 'translateY(0)';\r\n        }\r\n    });\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6bfb8f elementor-widget elementor-widget-spacer\" data-id=\"d6bfb8f\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f4ccd06 e-con-full e-flex e-con e-parent\" data-id=\"f4ccd06\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bfd1cd6 elementor-widget elementor-widget-spacer\" data-id=\"bfd1cd6\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ae2f68 elementor-widget elementor-widget-html\" data-id=\"6ae2f68\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Darker+Grotesque:wght@400;500;700;900&display=swap');\r\n\r\n\/* --- 1. SECTION TEKS (Philosophy) --- *\/\r\n.adv-phil-section {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 120px 20px 80px 20px;\r\n    background: transparent;\r\n    display: flex;\r\n    justify-content: center;\r\n    font-family: 'Darker Grotesque', sans-serif;\r\n    box-sizing: border-box;\r\n    z-index: 2;\r\n}\r\n\r\n.adv-phil-container {\r\n    max-width: 800px;\r\n    text-align: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 25px;\r\n}\r\n\r\n.adv-phil-text {\r\n    font-size: 32px;\r\n    line-height: 1.2;\r\n    font-weight: 500;\r\n    color: rgba(255, 255, 255, 0.4); \/* Redup di awal *\/\r\n    margin: 0;\r\n    transform: translateY(20px);\r\n    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n}\r\n\r\n\/* Class ini ditambahkan via JS saat tersorot *\/\r\n.adv-phil-text.is-active {\r\n    color: rgba(255, 255, 255, 0.9);\r\n    transform: translateY(0);\r\n}\r\n\r\n.adv-phil-text.strong {\r\n    font-weight: 900;\r\n    font-size: 40px;\r\n    color: #ffffff;\r\n    letter-spacing: 1px;\r\n    margin-top: 20px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* Highlight Kata Kunci *\/\r\n.adv-phil-hl {\r\n    background: transparent;\r\n    color: #ffffff;\r\n    font-weight: 700;\r\n    transition: all 0.5s ease;\r\n}\r\n.adv-phil-text.is-active .adv-phil-hl {\r\n    background: #ffffff;\r\n    color: #000000;\r\n    padding: 0 8px;\r\n    display: inline-block;\r\n}\r\n\r\n\r\n\/* --- 2. SECTION VIDEO ZOOM --- *\/\r\n\/* Track scroll panjang agar zoom mulus (400vh = 4x tinggi layar) *\/\r\n.adv-zoom-track {\r\n    position: relative;\r\n    height: 350vh; \r\n    width: 100%;\r\n    background-color: transparent;\r\n}\r\n\r\n\/* Container yang nempel di layar (sticky) saat di-scroll *\/\r\n.adv-zoom-sticky {\r\n    position: sticky;\r\n    top: 0;\r\n    height: 100vh;\r\n    width: 100%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* Frame Video Awal (Kecil) *\/\r\n.adv-video-frame {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    \/* Will-change untuk performa animasi scroll *\/\r\n    will-change: width, height, border-color;\r\n    background: #000;\r\n}\r\n\r\n.adv-video-frame video {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover; \/* Agar video selalu proporsional *\/\r\n    opacity: 0.6; \/* Gelap di awal *\/\r\n    filter: grayscale(50%);\r\n    will-change: opacity, filter;\r\n}\r\n\r\n\/* Status Teks kecil di tengah video *\/\r\n.adv-video-status {\r\n    position: absolute;\r\n    color: #ffffff;\r\n    font-size: 14px;\r\n    letter-spacing: 4px;\r\n    font-family: 'Darker Grotesque', sans-serif;\r\n    font-weight: 700;\r\n    z-index: 3;\r\n    pointer-events: none;\r\n    will-change: opacity;\r\n}\r\n\r\n\/* --- Responsif Mobile --- *\/\r\n@media (max-width: 768px) {\r\n    .adv-phil-section { padding: 80px 15px 60px 15px; }\r\n    .adv-phil-text { font-size: 24px; }\r\n    .adv-phil-text.strong { font-size: 30px; }\r\n    .adv-zoom-track { height: 250vh; } \/* Mempercepat zoom di HP *\/\r\n}\r\n<\/style>\r\n\r\n<section class=\"adv-phil-section\">\r\n    <div class=\"adv-phil-container\">\r\n        <p class=\"adv-phil-text js-reveal-phil\">Economies do not collapse from lack. They collapse from excess without direction.<\/p>\r\n        <p class=\"adv-phil-text js-reveal-phil\">Stories do not influence the future. The future rewrites which stories mattered.<\/p>\r\n        <p class=\"adv-phil-text js-reveal-phil\">And wealth is rarely lost from defeat \u2014 it is lost from <span class=\"adv-phil-hl\">impatience<\/span>.<\/p>\r\n        <p class=\"adv-phil-text js-reveal-phil\">Moonstar understands none of this emotionally. It understands it <span class=\"adv-phil-hl\">structurally<\/span>.<\/p>\r\n        <p class=\"adv-phil-text strong js-reveal-phil\">Which might be the advantage.<\/p>\r\n    <\/div>\r\n<\/section>\r\n\r\n<section class=\"adv-zoom-track\" id=\"video-track\">\r\n    <div class=\"adv-zoom-sticky\" id=\"video-sticky\">\r\n        <div class=\"adv-video-frame\" id=\"video-frame\">\r\n            <span class=\"adv-v-corner tl\"><\/span>\r\n            <span class=\"adv-v-corner tr\"><\/span>\r\n            <span class=\"adv-v-corner bl\"><\/span>\r\n            <span class=\"adv-v-corner br\"><\/span>\r\n            \r\n            <div class=\"adv-video-status\" id=\"video-status\">[ VISION : SCROLL TO EXPAND ]<\/div>\r\n            \r\n            <video id=\"moonstar-video\" src=\"http:\/\/moonstar.site\/wp-content\/uploads\/2026\/02\/MOONSTAR-SCROLL-TO-ZOOM.mp4\" autoplay loop muted playsinline><\/video>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n    \r\n    \/\/ 1. EFEK REVEAL UNTUK TEKS (Menyala satu per satu saat discroll)\r\n    const philTexts = document.querySelectorAll('.js-reveal-phil');\r\n    \r\n    const textObserver = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.classList.add('is-active');\r\n            }\r\n        });\r\n    }, { threshold: 0.8 }); \/\/ Memicu saat 80% teks terlihat\r\n\r\n    philTexts.forEach(text => textObserver.observe(text));\r\n\r\n\r\n    \/\/ 2. EFEK SCROLL-TO-ZOOM UNTUK VIDEO\r\n    const track = document.getElementById('video-track');\r\n    const stickyContainer = document.getElementById('video-sticky');\r\n    const frame = document.getElementById('video-frame');\r\n    const video = document.getElementById('moonstar-video');\r\n    const statusText = document.getElementById('video-status');\r\n    const corners = document.querySelectorAll('.adv-v-corner');\r\n\r\n    \/\/ Menentukan ukuran awal video sebelum di-zoom\r\n    function getInitialSizes() {\r\n        const isMobile = window.innerWidth <= 768;\r\n        return {\r\n            width: isMobile ? window.innerWidth * 0.8 : 700,\r\n            height: isMobile ? window.innerHeight * 0.4 : 400\r\n        };\r\n    }\r\n\r\n    \/\/ Set ukuran awal saat halaman dimuat\r\n    let initialSize = getInitialSizes();\r\n    frame.style.width = initialSize.width + 'px';\r\n    frame.style.height = initialSize.height + 'px';\r\n\r\n    window.addEventListener('scroll', () => {\r\n        if (!track || !frame) return;\r\n\r\n        \/\/ Ambil data posisi track scroll\r\n        const rect = track.getBoundingClientRect();\r\n        \r\n        \/\/ Jarak yang sudah discroll di dalam track\r\n        const scrollDistance = -rect.top;\r\n        \r\n        \/\/ Total jarak yang bisa discroll untuk efek zoom\r\n        const scrollableDistance = rect.height - window.innerHeight;\r\n\r\n        \/\/ Hitung progres (0 sampai 1)\r\n        let progress = scrollDistance \/ scrollableDistance;\r\n        progress = Math.max(0, Math.min(1, progress)); \/\/ Batasi hanya 0 sampai 1\r\n\r\n        \/\/ Dapatkan ukuran target (layar penuh)\r\n        const targetWidth = stickyContainer.offsetWidth;\r\n        const targetHeight = stickyContainer.offsetHeight;\r\n\r\n        \/\/ Kalkulasi ukuran frame saat ini berdasarkan progres scroll\r\n        const currentWidth = initialSize.width + ((targetWidth - initialSize.width) * progress);\r\n        const currentHeight = initialSize.height + ((targetHeight - initialSize.height) * progress);\r\n\r\n        if (scrollDistance > 0) {\r\n            \/\/ Aplikasikan ukuran baru ke frame\r\n            frame.style.width = currentWidth + 'px';\r\n            frame.style.height = currentHeight + 'px';\r\n            \r\n            \/\/ Pudarkan efek border dan sudut saat membesar\r\n            frame.style.borderColor = `rgba(255, 255, 255, ${0.2 * (1 - progress)})`;\r\n            corners.forEach(corner => corner.style.opacity = 1 - progress);\r\n            \r\n            \/\/ Pudarkan teks status\r\n            statusText.style.opacity = 1 - (progress * 2);\r\n\r\n            \/\/ Terangkan video dan hilangkan grayscale perlahan\r\n            video.style.opacity = 0.6 + (progress * 0.4); \/\/ Menjadi 1 (100%)\r\n            video.style.filter = `grayscale(${50 * (1 - progress)}%)`;\r\n        } else {\r\n            \/\/ Reset ke awal jika di-scroll ke atas\r\n            frame.style.width = initialSize.width + 'px';\r\n            frame.style.height = initialSize.height + 'px';\r\n            frame.style.borderColor = `rgba(255, 255, 255, 0.2)`;\r\n            corners.forEach(corner => corner.style.opacity = 1);\r\n            statusText.style.opacity = 1;\r\n            video.style.opacity = 0.6;\r\n            video.style.filter = `grayscale(50%)`;\r\n        }\r\n    });\r\n\r\n    \/\/ Sesuaikan ukuran awal saat layar di-resize (di-rotasi \/ ubah jendela)\r\n    window.addEventListener('resize', () => {\r\n        initialSize = getInitialSizes();\r\n        \/\/ Hanya reset jika sedang tidak berada di dalam area zoom\r\n        if (track.getBoundingClientRect().top > 0) {\r\n            frame.style.width = initialSize.width + 'px';\r\n            frame.style.height = initialSize.height + 'px';\r\n        }\r\n    });\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe565da elementor-widget elementor-widget-spacer\" data-id=\"fe565da\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f7c901 e-flex e-con-boxed e-con e-parent\" data-id=\"4f7c901\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4bfc53e e-con-full e-flex e-con e-child\" data-id=\"4bfc53e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b315d1d elementor-widget elementor-widget-html\" data-id=\"b315d1d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Darker+Grotesque:wght@400;500;700;900&display=swap');\r\n\r\n\/* --- Container Utama --- *\/\r\n.adv-tk-section {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 100px 20px;\r\n    background-color: transparent;\r\n    font-family: 'Darker Grotesque', sans-serif;\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    z-index: 2;\r\n}\r\n\r\n\/* --- Judul Section --- *\/\r\n.adv-tk-header {\r\n    text-align: center;\r\n    margin-bottom: 60px;\r\n    position: relative;\r\n}\r\n\r\n.adv-tk-label {\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    color: rgba(255, 255, 255, 0.5);\r\n    letter-spacing: 4px;\r\n    text-transform: uppercase;\r\n    margin-bottom: 10px;\r\n    display: block;\r\n}\r\n\r\n.adv-tk-title {\r\n    font-size: 64px;\r\n    line-height: 1;\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    margin: 0;\r\n}\r\n\r\n\/* --- Grid 4 Cards --- *\/\r\n.adv-tk-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 30px;\r\n    max-width: 1000px;\r\n    width: 100%;\r\n}\r\n\r\n\/* --- Style Tiap Card --- *\/\r\n.adv-tk-card {\r\n    position: relative;\r\n    background: rgba(0, 0, 0, 0.4);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    padding: 40px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-start;\r\n    overflow: hidden;\r\n    cursor: crosshair;\r\n    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n    \r\n    \/* State awal untuk animasi scroll *\/\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n}\r\n\r\n\/* Class untuk memunculkan card (ditambahkan via JS) *\/\r\n.adv-tk-card.is-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* Angka Latar Belakang (Watermark 01, 02, dll) *\/\r\n.adv-tk-num {\r\n    position: absolute;\r\n    top: -20px;\r\n    right: 10px;\r\n    font-size: 120px;\r\n    font-weight: 900;\r\n    color: rgba(255, 255, 255, 0.03);\r\n    line-height: 1;\r\n    pointer-events: none;\r\n    transition: all 0.4s ease;\r\n    z-index: 0;\r\n}\r\n\r\n\/* Konten Teks di dalam Card *\/\r\n.adv-tk-content {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.adv-tk-card-title {\r\n    font-size: 28px;\r\n    font-weight: 900;\r\n    color: #ffffff;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    margin: 0 0 15px 0;\r\n    line-height: 1.1;\r\n}\r\n\r\n\/* Highlight Angka di Judul Card *\/\r\n.adv-tk-card-title span {\r\n    display: block;\r\n    color: #000000;\r\n    background: #ffffff;\r\n    padding: 2px 8px;\r\n    width: max-content;\r\n    margin-top: 8px;\r\n    font-size: 24px;\r\n}\r\n\r\n.adv-tk-card-desc {\r\n    font-size: 20px;\r\n    font-weight: 500;\r\n    color: rgba(255, 255, 255, 0.6);\r\n    line-height: 1.4;\r\n    margin: 0;\r\n    letter-spacing: 0.5px;\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n\/* --- Aksen Sudut (Sci-Fi Brackets) --- *\/\r\n.adv-tk-card::before,\r\n.adv-tk-card::after,\r\n.adv-tk-corner {\r\n    content: '';\r\n    position: absolute;\r\n    width: 15px;\r\n    height: 15px;\r\n    transition: all 0.3s ease;\r\n    z-index: 3;\r\n    pointer-events: none;\r\n}\r\n\r\n.adv-tk-card::before { top: -1px; left: -1px; border-top: 2px solid rgba(255,255,255,0.3); border-left: 2px solid rgba(255,255,255,0.3); }\r\n.adv-tk-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid rgba(255,255,255,0.3); border-right: 2px solid rgba(255,255,255,0.3); }\r\n.adv-tk-corner.tr { top: -1px; right: -1px; border-top: 2px solid rgba(255,255,255,0.3); border-right: 2px solid rgba(255,255,255,0.3); }\r\n.adv-tk-corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid rgba(255,255,255,0.3); border-left: 2px solid rgba(255,255,255,0.3); }\r\n\r\n\r\n\/* --- EFEK HOVER CARD --- *\/\r\n.adv-tk-card:hover {\r\n    background: rgba(255, 255, 255, 0.03);\r\n    border-color: rgba(255, 255, 255, 0.4);\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n}\r\n\r\n\/* Teks dan Angka menyala saat hover *\/\r\n.adv-tk-card:hover .adv-tk-num {\r\n    color: rgba(255, 255, 255, 0.15);\r\n    transform: scale(1.05) translate(-10px, 10px);\r\n}\r\n.adv-tk-card:hover .adv-tk-card-desc {\r\n    color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n\/* Bracket membesar dan menyala saat hover *\/\r\n.adv-tk-card:hover::before { top: -2px; left: -2px; width: 25px; height: 25px; border-color: #ffffff; }\r\n.adv-tk-card:hover::after { bottom: -2px; right: -2px; width: 25px; height: 25px; border-color: #ffffff; }\r\n.adv-tk-card:hover .adv-tk-corner.tr { top: -2px; right: -2px; width: 25px; height: 25px; border-color: #ffffff; }\r\n.adv-tk-card:hover .adv-tk-corner.bl { bottom: -2px; left: -2px; width: 25px; height: 25px; border-color: #ffffff; }\r\n\r\n\r\n\/* --- Responsif Mobile --- *\/\r\n@media (max-width: 768px) {\r\n    .adv-tk-section { padding: 60px 15px; }\r\n    .adv-tk-title { font-size: 48px; }\r\n    .adv-tk-grid {\r\n        grid-template-columns: 1fr; \/* 1 Kolom berderet ke bawah *\/\r\n        gap: 20px;\r\n    }\r\n    .adv-tk-card { padding: 30px 25px; }\r\n    .adv-tk-num { font-size: 90px; right: 0; }\r\n    .adv-tk-card-title { font-size: 24px; }\r\n    .adv-tk-card-title span { font-size: 20px; }\r\n    .adv-tk-card-desc { font-size: 18px; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"adv-tk-section\" id=\"tokenomics-section\">\r\n    \r\n    <div class=\"adv-tk-header\">\r\n        <span class=\"adv-tk-label\">\/\/ TOKENOMICS<\/span>\r\n        <h2 class=\"adv-tk-title js-tk-title\" data-original=\"TOKENOMICS\">TOKENOMICS<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"adv-tk-grid\">\r\n        \r\n        <div class=\"adv-tk-card js-tk-card\" style=\"transition-delay: 0.1s;\">\r\n            <span class=\"adv-tk-corner tr\"><\/span><span class=\"adv-tk-corner bl\"><\/span>\r\n            <div class=\"adv-tk-num js-tk-hover-num\" data-num=\"01\">01<\/div>\r\n            <div class=\"adv-tk-content\">\r\n                <h3 class=\"adv-tk-card-title\">Fixed Supply <br><span>1,000,000,000<\/span><\/h3>\r\n                <p class=\"adv-tk-card-desc\">One billion Moonstar. No inflation. No hidden expansion. What exists is all that will ever exist.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"adv-tk-card js-tk-card\" style=\"transition-delay: 0.2s;\">\r\n            <span class=\"adv-tk-corner tr\"><\/span><span class=\"adv-tk-corner bl\"><\/span>\r\n            <div class=\"adv-tk-num js-tk-hover-num\" data-num=\"02\">02<\/div>\r\n            <div class=\"adv-tk-content\">\r\n                <h3 class=\"adv-tk-card-title\">Zero Tax <br><span>0.0%<\/span><\/h3>\r\n                <p class=\"adv-tk-card-desc\">No transaction fees. No artificial friction. Pure movement, uninterrupted.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"adv-tk-card js-tk-card\" style=\"transition-delay: 0.3s;\">\r\n            <span class=\"adv-tk-corner tr\"><\/span><span class=\"adv-tk-corner bl\"><\/span>\r\n            <div class=\"adv-tk-num js-tk-hover-num\" data-num=\"03\">03<\/div>\r\n            <div class=\"adv-tk-content\">\r\n                <h3 class=\"adv-tk-card-title\">Built on <br><span>SOLANA<\/span><\/h3>\r\n                <p class=\"adv-tk-card-desc\">Fast execution. Low fees. Clean infrastructure. Designed for speed and scale.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"adv-tk-card js-tk-card\" style=\"transition-delay: 0.4s;\">\r\n            <span class=\"adv-tk-corner tr\"><\/span><span class=\"adv-tk-corner bl\"><\/span>\r\n            <div class=\"adv-tk-num js-tk-hover-num\" data-num=\"04\">04<\/div>\r\n            <div class=\"adv-tk-content\">\r\n                <h3 class=\"adv-tk-card-title\">Burned Liquidity <br><span>100% LOCKED<\/span><\/h3>\r\n                <p class=\"adv-tk-card-desc\">Liquidity permanently removed from circulation \u2014 locked in orbit, untouchable.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n    \r\n    \/\/ 1. EFEK SCRAMBLE PADA JUDUL \"TOKENOMICS\"\r\n    const titleElement = document.querySelector('.js-tk-title');\r\n    const originalTitle = titleElement.getAttribute('data-original');\r\n    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';\r\n    let titleAnimated = false;\r\n\r\n    function scrambleTitle() {\r\n        let iterations = 0;\r\n        const interval = setInterval(() => {\r\n            titleElement.innerText = originalTitle\r\n                .split(\"\")\r\n                .map((letter, index) => {\r\n                    if(letter === ' ') return ' ';\r\n                    if(index < iterations) return originalTitle[index];\r\n                    return chars[Math.floor(Math.random() * chars.length)];\r\n                })\r\n                .join(\"\");\r\n            \r\n            iterations += 1 \/ 3;\r\n            \r\n            if(iterations >= originalTitle.length){\r\n                clearInterval(interval);\r\n                titleElement.innerText = originalTitle;\r\n            }\r\n        }, 30);\r\n    }\r\n\r\n    \/\/ 2. INTERSECTION OBSERVER UNTUK KARTU (Muncul berurutan dari bawah)\r\n    const cards = document.querySelectorAll('.js-tk-card');\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                \/\/ Munculkan card\r\n                entry.target.classList.add('is-visible');\r\n                \r\n                \/\/ Animasi judul hanya dipicu saat section terlihat pertama kali\r\n                if(!titleAnimated) {\r\n                    scrambleTitle();\r\n                    titleAnimated = true;\r\n                }\r\n            }\r\n        });\r\n    }, { threshold: 0.2 });\r\n\r\n    cards.forEach(card => observer.observe(card));\r\n\r\n    \/\/ 3. EFEK GLITCH PADA ANGKA SAAT CARD DI-HOVER\r\n    cards.forEach(card => {\r\n        const numElement = card.querySelector('.js-tk-hover-num');\r\n        const originalNum = numElement.getAttribute('data-num');\r\n        let hoverInterval;\r\n\r\n        card.addEventListener('mouseenter', () => {\r\n            let frames = 0;\r\n            hoverInterval = setInterval(() => {\r\n                numElement.innerText = Math.floor(Math.random() * 99).toString().padStart(2, '0');\r\n                frames++;\r\n                if (frames > 8) {\r\n                    clearInterval(hoverInterval);\r\n                    numElement.innerText = originalNum;\r\n                }\r\n            }, 40);\r\n        });\r\n\r\n        card.addEventListener('mouseleave', () => {\r\n            clearInterval(hoverInterval);\r\n            numElement.innerText = originalNum;\r\n        });\r\n    });\r\n\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7e0a12b e-flex e-con-boxed e-con e-parent\" data-id=\"7e0a12b\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-cfd446d e-con-full e-flex e-con e-child\" data-id=\"cfd446d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ce7d43 elementor-widget elementor-widget-html\" data-id=\"9ce7d43\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Darker+Grotesque:wght@400;500;700;900&display=swap');\r\n\r\n\/* --- Container Utama --- *\/\r\n.adv-cta-section {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 90vh;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background-color: transparent;\r\n    padding: 100px 20px;\r\n    font-family: 'Darker Grotesque', sans-serif;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    z-index: 2;\r\n}\r\n\r\n\/* --- Latar Belakang (Terminal Grid Tipis) --- *\/\r\n.adv-cta-grid-bg {\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-image: \r\n        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\r\n    background-size: 40px 40px;\r\n    background-position: center center;\r\n    z-index: -1;\r\n    opacity: 0.5;\r\n    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);\r\n    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);\r\n}\r\n\r\n\/* --- Wrapper Konten --- *\/\r\n.adv-cta-container {\r\n    max-width: 600px;\r\n    width: 100%;\r\n    text-align: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    z-index: 2;\r\n}\r\n\r\n\/* --- Label & Judul --- *\/\r\n.adv-cta-label {\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    color: rgba(255, 255, 255, 0.5);\r\n    letter-spacing: 5px;\r\n    text-transform: uppercase;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.adv-cta-title {\r\n    font-size: 72px;\r\n    line-height: 1;\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    text-transform: uppercase;\r\n    letter-spacing: 3px;\r\n    margin: 0 0 50px 0;\r\n    position: relative;\r\n}\r\n\r\n\/* Efek Glow Halus di Judul *\/\r\n.adv-cta-title::before {\r\n    content: attr(data-original);\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%;\r\n    filter: blur(15px);\r\n    opacity: 0.3;\r\n    z-index: -1;\r\n}\r\n\r\n\/* --- Manifesto Text (Deskripsi) --- *\/\r\n.adv-cta-manifesto {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 25px; \/* Jarak antar baris *\/\r\n    margin-bottom: 60px;\r\n}\r\n\r\n.adv-cta-line {\r\n    font-size: 26px;\r\n    font-weight: 500;\r\n    line-height: 1.3;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    margin: 0;\r\n    letter-spacing: 1px;\r\n    \r\n    \/* Setup Animasi Scroll *\/\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n}\r\n\r\n\/* Class saat terlihat di layar *\/\r\n.adv-cta-line.is-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* Penekanan Teks Spesifik *\/\r\n.adv-cta-line.strong {\r\n    color: #ffffff;\r\n    font-weight: 700;\r\n}\r\n\r\n.adv-cta-hl {\r\n    background: #ffffff;\r\n    color: #000000;\r\n    padding: 0 8px;\r\n    font-weight: 900;\r\n    display: inline-block;\r\n}\r\n\r\n\/* Delay kemunculan tiap baris agar dramatis *\/\r\n.adv-cta-line:nth-child(1) { transition-delay: 0.1s; }\r\n.adv-cta-line:nth-child(2) { transition-delay: 0.3s; }\r\n.adv-cta-line:nth-child(3) { transition-delay: 0.5s; }\r\n.adv-cta-line:nth-child(4) { transition-delay: 0.7s; }\r\n.adv-cta-line:nth-child(5) { transition-delay: 0.9s; }\r\n.adv-cta-line:nth-child(6) { transition-delay: 1.1s; }\r\n\r\n\r\n\/* --- Tombol Komunitas (Identik dgn Hero) --- *\/\r\n.adv-cta-buttons {\r\n    display: flex;\r\n    gap: 20px;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: all 0.8s ease 1.3s; \/* Delay muncul paling akhir *\/\r\n}\r\n\r\n.adv-cta-buttons.is-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.adv-cta-btn {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 15px 40px;\r\n    background: rgba(0, 0, 0, 0.4);\r\n    border: 1px solid rgba(255, 255, 255, 0.15);\r\n    text-decoration: none;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.adv-cta-btn-text {\r\n    color: #ffffff;\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n}\r\n\r\n.adv-cta-btn::before,\r\n.adv-cta-btn::after,\r\n.adv-cta-corner {\r\n    content: '';\r\n    position: absolute;\r\n    width: 10px;\r\n    height: 10px;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.adv-cta-btn::before { top: -2px; left: -2px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; }\r\n.adv-cta-btn::after { bottom: -2px; right: -2px; border-bottom: 2px solid #ffffff; border-right: 2px solid #ffffff; }\r\n.adv-cta-corner.tr { top: -2px; right: -2px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; }\r\n.adv-cta-corner.bl { bottom: -2px; left: -2px; border-bottom: 2px solid #ffffff; border-left: 2px solid #ffffff; }\r\n\r\n.adv-cta-btn:hover {\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border-color: rgba(255, 255, 255, 0.4);\r\n}\r\n.adv-cta-btn:hover::before { top: -4px; left: -4px; width: 14px; height: 14px; }\r\n.adv-cta-btn:hover::after { bottom: -4px; right: -4px; width: 14px; height: 14px; }\r\n.adv-cta-btn:hover .adv-cta-corner.tr { top: -4px; right: -4px; width: 14px; height: 14px; }\r\n.adv-cta-btn:hover .adv-cta-corner.bl { bottom: -4px; left: -4px; width: 14px; height: 14px; }\r\n\r\n\r\n\/* --- Responsif Mobile --- *\/\r\n@media (max-width: 768px) {\r\n    .adv-cta-section { padding: 80px 15px; }\r\n    .adv-cta-title { font-size: 50px; margin-bottom: 40px; }\r\n    .adv-cta-line { font-size: 20px; }\r\n    .adv-cta-buttons { flex-direction: column; width: 100%; gap: 15px; }\r\n    .adv-cta-btn { width: 100%; box-sizing: border-box; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"adv-cta-section\" id=\"community\">\r\n    <div class=\"adv-cta-grid-bg\"><\/div>\r\n\r\n    <div class=\"adv-cta-container\">\r\n        <div class=\"adv-cta-label\">\/\/ TERMINAL_CONNECTION<\/div>\r\n        <h2 class=\"adv-cta-title js-cta-scramble\" data-original=\"JOIN THE ASCENT\">JOIN THE ASCENT<\/h2>\r\n\r\n        <div class=\"adv-cta-manifesto\" id=\"cta-manifesto\">\r\n            <p class=\"adv-cta-line\">You are not early to a meme.<\/p>\r\n            <p class=\"adv-cta-line\">You are witnessing an experiment.<br>An artificial trader with real stakes.<\/p>\r\n            <p class=\"adv-cta-line\">A public ledger with a singular aim.<\/p>\r\n            <p class=\"adv-cta-line\">A narrative unfolding without rehearsal.<\/p>\r\n            <p class=\"adv-cta-line strong\">Moonstar does not promise millions.<br>It promises <span class=\"adv-cta-hl\">persistence<\/span>.<\/p>\r\n            <p class=\"adv-cta-line\">And sometimes, persistence is all the market ever rewards.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"adv-cta-buttons\" id=\"cta-buttons\">\r\n            <a href=\"#\" class=\"adv-cta-btn\">\r\n                <span class=\"adv-cta-corner tr\"><\/span><span class=\"adv-cta-corner bl\"><\/span>\r\n                <span class=\"adv-cta-btn-text\">TWITTER<\/span>\r\n            <\/a>\r\n            <a href=\"#\" class=\"adv-cta-btn\">\r\n                <span class=\"adv-cta-corner tr\"><\/span><span class=\"adv-cta-corner bl\"><\/span>\r\n                <span class=\"adv-cta-btn-text\">TELEGRAM<\/span>\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n    \r\n    \/\/ 1. EFEK SCRAMBLE JUDUL \"JOIN THE ASCENT\"\r\n    const ctaTitle = document.querySelector('.js-cta-scramble');\r\n    const originalText = ctaTitle.getAttribute('data-original');\r\n    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\\\\/[]{}\u2014=+*^?#_';\r\n    let hasScrambled = false;\r\n\r\n    function scrambleCTA() {\r\n        let iterations = 0;\r\n        const interval = setInterval(() => {\r\n            ctaTitle.innerText = originalText.split('').map((char, index) => {\r\n                if(char === ' ') return ' ';\r\n                if(index < iterations) return originalText[index];\r\n                return chars[Math.floor(Math.random() * chars.length)];\r\n            }).join('');\r\n            \r\n            iterations += 1 \/ 3;\r\n            \r\n            if(iterations >= originalText.length) {\r\n                clearInterval(interval);\r\n                ctaTitle.innerText = originalText;\r\n            }\r\n        }, 30);\r\n    }\r\n\r\n    \/\/ 2. INTERSECTION OBSERVER UNTUK MANIFESTO & TOMBOL\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                \r\n                \/\/ Memicu teks muncul satu per satu\r\n                const lines = document.querySelectorAll('.adv-cta-line');\r\n                lines.forEach(line => line.classList.add('is-visible'));\r\n                \r\n                \/\/ Memicu tombol muncul\r\n                document.getElementById('cta-buttons').classList.add('is-visible');\r\n\r\n                \/\/ Memicu glitch judul (hanya 1x)\r\n                if(!hasScrambled) {\r\n                    scrambleCTA();\r\n                    hasScrambled = true;\r\n                }\r\n            }\r\n        });\r\n    }, { threshold: 0.3 }); \/\/ Memicu saat 30% area terlihat\r\n\r\n    observer.observe(document.getElementById('community'));\r\n\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b1e0db e-con-full e-flex e-con e-parent\" data-id=\"6b1e0db\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8364738 elementor-widget elementor-widget-html\" data-id=\"8364738\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Darker+Grotesque:wght@500;700&display=swap');\r\n\r\n.adv-footer-section {\r\n    position: relative;\r\n    width: 100%;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n    background-color: transparent;\r\n    padding: 30px 40px;\r\n    font-family: 'Darker Grotesque', sans-serif;\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    z-index: 2;\r\n}\r\n\r\n\/* Latar belakang grid sangat tipis menyambung dari atas *\/\r\n.adv-footer-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100%;\r\n    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);\r\n    background-size: 100% 4px;\r\n    z-index: -1;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* --- Teks Kiri & Kanan --- *\/\r\n.adv-footer-left,\r\n.adv-footer-right {\r\n    display: flex;\r\n    align-items: center;\r\n    color: rgba(255, 255, 255, 0.5);\r\n    font-size: 16px;\r\n    font-weight: 3700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* Efek Kursor Berkedip (Terminal) *\/\r\n.adv-terminal-cursor {\r\n    display: inline-block;\r\n    width: 8px;\r\n    height: 16px;\r\n    background-color: rgba(255, 255, 255, 0.7);\r\n    margin-left: 8px;\r\n    vertical-align: middle;\r\n    animation: blinkCursor 1s step-end infinite;\r\n}\r\n\r\n@keyframes blinkCursor {\r\n    0%, 100% { opacity: 1; }\r\n    50% { opacity: 0; }\r\n}\r\n\r\n\/* Teks Status Kanan *\/\r\n.adv-footer-status {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n\r\n\/* Titik Indikator Online *\/\r\n.adv-status-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n    background-color: #ffffff;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);\r\n    animation: pulseDot 2s infinite;\r\n}\r\n\r\n@keyframes pulseDot {\r\n    0% { opacity: 1; transform: scale(1); }\r\n    50% { opacity: 0.4; transform: scale(0.8); }\r\n    100% { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n\/* --- Responsif Mobile --- *\/\r\n@media (max-width: 768px) {\r\n    .adv-footer-section {\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        gap: 20px;\r\n        padding: 40px 20px;\r\n        text-align: center;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<footer class=\"adv-footer-section\">\r\n    <div class=\"adv-footer-left\">\r\n        \u00a9 2026 MOONSTAR. ALL RIGHTS RESERVED. <span class=\"adv-terminal-cursor\"><\/span>\r\n    <\/div>\r\n\r\n    <div class=\"adv-footer-right\">\r\n        <div class=\"adv-footer-status\">\r\n            <span class=\"adv-status-dot\"><\/span>\r\n            $MOONSTAR\r\n        <\/div>\r\n    <\/div>\r\n<\/footer>\t\t<\/div>\n\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>Moonstar 0x1234567890abcdef1234567890abcdef12345678 COPIED Ascend Relentlessly. A funded mind set in motion \u2014 rising in public, staying in orbit. Twitter Telegram Chart Swap Now SCROLL \/\/ ABOUT An Intelligence Set Into Orbit. Moonstar was initiated. A developer placed a treasury in its orbit and set a singular intention \u2014 not chaos, not gambling, but ascent. An [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/moonstar.site\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moonstar.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/moonstar.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/moonstar.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moonstar.site\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":37,"href":"https:\/\/moonstar.site\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/moonstar.site\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/moonstar.site\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}