{"id":8,"date":"2026-03-07T16:22:38","date_gmt":"2026-03-07T16:22:38","guid":{"rendered":"https:\/\/warbutdrama.fun\/?page_id=8"},"modified":"2026-03-07T18:40:10","modified_gmt":"2026-03-07T18:40:10","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/warbutdrama.fun\/","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-d170235 e-flex e-con-boxed e-con e-parent\" data-id=\"d170235\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;http:\\\/\\\/warbutdrama.fun\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/BG-WARDRAMA.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\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-e5e7f6f elementor-widget elementor-widget-html\" data-id=\"e5e7f6f\" 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\/* Google Font untuk look yang lebih premium *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;700&family=Inter:wght@400;600&display=swap');\r\n\r\n:root {\r\n    --primary-glow: #ff4c00;\r\n    --accent-blue: #00d2ff;\r\n    --bg-glass: rgba(15, 15, 15, 0.8);\r\n}\r\n\r\n\/* ===== FLOATING STICKY NAVBAR ===== *\/\r\n.war-container {\r\n    padding: 10px; \/* Memberi ruang agar terlihat \"floating\" *\/\r\n    position: sticky;\r\n    top: 0;\r\n    z-index: 1000;\r\n}\r\n\r\n.war-navbar {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 12px 30px;\r\n    background: var(--bg-glass);\r\n    backdrop-filter: blur(15px) saturate(180%);\r\n    -webkit-backdrop-filter: blur(15px) saturate(180%);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 16px;\r\n    font-family: 'Inter', sans-serif;\r\n    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);\r\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n\/* Hover effect pada container navbar *\/\r\n.war-navbar:hover {\r\n    border-color: rgba(255, 76, 0, 0.3);\r\n    box-shadow: 0 10px 40px 0 rgba(255, 76, 0, 0.15);\r\n}\r\n\r\n\/* ===== LOGO ===== *\/\r\n.war-logo {\r\n    font-family: 'Orbitron', sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    letter-spacing: 2px;\r\n    color: #fff;\r\n    text-transform: uppercase;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n\r\n.war-logo span {\r\n    color: var(--primary-glow);\r\n    text-shadow: 0 0 15px rgba(255, 76, 0, 0.6);\r\n    position: relative;\r\n}\r\n\r\n\/* ===== NAV BUTTONS ===== *\/\r\n.war-buttons {\r\n    display: flex;\r\n    gap: 15px;\r\n    align-items: center;\r\n}\r\n\r\n.war-btn {\r\n    padding: 10px 22px;\r\n    border-radius: 10px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: 1px;\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n    transition: all 0.3s ease;\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    background: rgba(255, 255, 255, 0.03);\r\n    color: #ccc;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* Advanced Hover State *\/\r\n.war-btn:hover {\r\n    color: #fff;\r\n    transform: translateY(-3px);\r\n    border-color: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n\/* Glowing Border Bottom Effect *\/\r\n.war-btn::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 50%;\r\n    width: 0;\r\n    height: 2px;\r\n    background: var(--primary-glow);\r\n    transition: all 0.3s ease;\r\n    transform: translateX(-50%);\r\n}\r\n\r\n.war-btn:hover::after {\r\n    width: 80%;\r\n}\r\n\r\n\/* Brand Colors Customization *\/\r\n.btn-twitter:hover { background: rgba(29, 161, 242, 0.1); color: #1DA1F2; }\r\n.btn-telegram:hover { background: rgba(42, 171, 238, 0.1); color: #2AABEE; }\r\n\r\n\/* The Main CTA (Chart) *\/\r\n.btn-chart {\r\n    background: linear-gradient(135deg, #ff4c00, #ff8800);\r\n    color: #fff;\r\n    border: none;\r\n    box-shadow: 0 4px 15px rgba(255, 76, 0, 0.3);\r\n}\r\n\r\n.btn-chart:hover {\r\n    box-shadow: 0 6px 25px rgba(255, 76, 0, 0.5);\r\n    background: linear-gradient(135deg, #ff5e1a, #ffa200);\r\n}\r\n\r\n\/* ===== HAMBURGER (Mobile) ===== *\/\r\n.war-menu-toggle {\r\n    display: none;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n    padding: 5px;\r\n}\r\n\r\n.war-menu-toggle span {\r\n    width: 28px;\r\n    height: 3px;\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    transition: 0.3s;\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 768px) {\r\n    .war-menu-toggle { display: flex; }\r\n    \r\n    .war-buttons {\r\n        position: absolute;\r\n        top: 85px;\r\n        right: 20px;\r\n        left: 20px;\r\n        flex-direction: column;\r\n        background: rgba(10, 10, 10, 0.95);\r\n        padding: 25px;\r\n        border-radius: 15px;\r\n        gap: 15px;\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transform: translateY(-20px);\r\n        transition: all 0.4s ease;\r\n        border: 1px solid rgba(255,255,255,0.1);\r\n    }\r\n\r\n    .war-buttons.active {\r\n        opacity: 1;\r\n        visibility: visible;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    .war-btn { width: 100%; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"war-container\">\r\n    <div class=\"war-navbar\">\r\n        <div class=\"war-logo\">\r\n            WAR <span>BUT<\/span> DRAMA\r\n        <\/div>\r\n\r\n        <div class=\"war-menu-toggle\" id=\"mobile-toggle\">\r\n            <span><\/span>\r\n            <span><\/span>\r\n            <span><\/span>\r\n        <\/div>\r\n\r\n        <nav class=\"war-buttons\" id=\"warMenu\">\r\n            <a href=\"#\" class=\"war-btn btn-twitter\">Twitter<\/a>\r\n            <a href=\"#\" class=\"war-btn btn-telegram\">Telegram<\/a>\r\n            <a href=\"#\" class=\"war-btn btn-chart\">Live Chart<\/a>\r\n        <\/nav>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    const toggle = document.getElementById('mobile-toggle');\r\n    const menu = document.getElementById('warMenu');\r\n\r\n    toggle.addEventListener('click', () => {\r\n        menu.classList.toggle('active');\r\n        \r\n        \/\/ Animasi simpel hamburger ke \"X\"\r\n        const spans = toggle.getElementsByTagName('span');\r\n        if(menu.classList.contains('active')) {\r\n            spans[0].style.transform = 'rotate(45deg) translate(6px, 6px)';\r\n            spans[1].style.opacity = '0';\r\n            spans[2].style.transform = 'rotate(-45deg) translate(7px, -7px)';\r\n        } else {\r\n            spans[0].style.transform = 'none';\r\n            spans[1].style.opacity = '1';\r\n            spans[2].style.transform = 'none';\r\n        }\r\n    });\r\n\r\n    \/\/ Menutup menu saat klik di luar (UX Improvement)\r\n    document.addEventListener('click', (e) => {\r\n        if (!toggle.contains(e.target) && !menu.contains(e.target)) {\r\n            menu.classList.remove('active');\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-8b5d835 elementor-widget elementor-widget-spacer\" data-id=\"8b5d835\" 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\t\t<div class=\"elementor-element elementor-element-54069d2 elementor-widget elementor-widget-html\" data-id=\"54069d2\" 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\/* Font Import *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;700&family=Syncopate:wght@400;700&display=swap');\r\n\r\n.hero-section {\r\n    min-height: 20vh;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    text-align: center;\r\n    padding: 0 20px;\r\n    background: radial-gradient(circle at center, rgba(40, 40, 40, 0.2) 0%, transparent 70%);\r\n    overflow: hidden;\r\n    position: relative;\r\n}\r\n\r\n\/* Background Animation *\/\r\n.hero-bg-fx {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: -1;\r\n    opacity: 0.3;\r\n    background: \r\n        linear-gradient(90deg, rgba(255,76,0,0.05) 1px, transparent 1px),\r\n        linear-gradient(rgba(255,76,0,0.05) 1px, transparent 1px);\r\n    background-size: 50px 50px;\r\n}\r\n\r\n\/* ===== GLITCH & DECIPHER TEXT ===== *\/\r\n.hero-title {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(2rem, 5vw, 2.5rem);\r\n    font-weight: 700;\r\n    color: #fff;\r\n    max-width: 1000px;\r\n    line-height: 1.1;\r\n    margin-bottom: 40px;\r\n    text-transform: uppercase;\r\n    position: relative;\r\n    cursor: default;\r\n}\r\n\r\n\/* Glitch Effect CSS *\/\r\n.glitch-wrapper {\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.glitch-wrapper::before,\r\n.glitch-wrapper::after {\r\n    content: attr(data-text);\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: transparent;\r\n}\r\n\r\n.glitch-wrapper:hover::before {\r\n    left: 2px;\r\n    text-shadow: -2px 0 #ff4c00;\r\n    clip: rect(44px, 450px, 56px, 0);\r\n    animation: glitch-anim 5s infinite linear alternate-reverse;\r\n}\r\n\r\n.glitch-wrapper:hover::after {\r\n    left: -2px;\r\n    text-shadow: -2px 0 #00d2ff;\r\n    clip: rect(44px, 450px, 56px, 0);\r\n    animation: glitch-anim2 5s infinite linear alternate-reverse;\r\n}\r\n\r\n\/* ===== CA BUTTON (COPY TO CLIPBOARD) ===== *\/\r\n.ca-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 15px;\r\n}\r\n\r\n.ca-box {\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border: 1px dashed rgba(255, 76, 0, 0.4);\r\n    padding: 15px 25px;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    backdrop-filter: blur(5px);\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.ca-box:hover {\r\n    background: rgba(255, 76, 0, 0.08);\r\n    border-style: solid;\r\n}\r\n\r\n.ca-text {\r\n    font-family: 'Space Grotesk', monospace;\r\n    color: #00ffaa;\r\n    font-size: 0.8rem;\r\n    letter-spacing: 1px;\r\n}\r\n\r\n.copy-btn {\r\n    background: #ff4c00;\r\n    border: none;\r\n    color: white;\r\n    padding: 8px 18px;\r\n    border-radius: 6px;\r\n    font-family: 'Inter', sans-serif;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    font-size: 0.8rem;\r\n    text-transform: uppercase;\r\n    transition: 0.2s;\r\n}\r\n\r\n.copy-btn:active {\r\n    transform: scale(0.95);\r\n}\r\n\r\n.copy-success {\r\n    font-size: 12px;\r\n    color: #00ffaa;\r\n    opacity: 0;\r\n    transition: 0.3s;\r\n}\r\n\r\n\/* Animations *\/\r\n@keyframes glitch-anim {\r\n  0% { clip: rect(31px, 9999px, 94px, 0); }\r\n  20% { clip: rect(62px, 9999px, 42px, 0); }\r\n  \/* ... simplified for brevity ... *\/\r\n  100% { clip: rect(89px, 9999px, 98px, 0); }\r\n}\r\n\r\n@keyframes glitch-anim2 {\r\n  0% { clip: rect(15px, 9999px, 56px, 0); }\r\n  100% { clip: rect(40px, 9999px, 66px, 0); }\r\n}\r\n<\/style>\r\n\r\n<section class=\"hero-section\">\r\n    <div class=\"hero-bg-fx\"><\/div>\r\n\r\n    <h1 class=\"hero-title\" id=\"scramble-text\" data-text=\"The internet knows the truth. Not every war is a war. Sometimes it's just drama.\">\r\n        The internet knows the truth. Not every war is a war. Sometimes it's just \"drama\".\r\n    <\/h1>\r\n\r\n    <div class=\"ca-container\">\r\n        <div class=\"ca-box\">\r\n            <span class=\"ca-text\" id=\"caValue\">CA : NULL<\/span>\r\n            <button class=\"copy-btn\" onclick=\"copyCA()\">Copy CA<\/button>\r\n        <\/div>\r\n        <span class=\"copy-success\" id=\"copyLabel\">CONTRACT COPIED TO CLIPBOARD!<\/span>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/* ===== DECIPHER \/ SCRAMBLE TEXT EFFECT ===== *\/\r\nclass TextScramble {\r\n    constructor(el) {\r\n        this.el = el;\r\n        this.chars = '!<>-_\\\\\/[]{}\u2014=+*^?#________';\r\n        this.update = this.update.bind(this);\r\n    }\r\n    setText(newText) {\r\n        const oldText = this.el.innerText;\r\n        const length = Math.max(oldText.length, newText.length);\r\n        const promise = new Promise((resolve) => this.resolve = resolve);\r\n        this.queue = [];\r\n        for (let i = 0; i < length; i++) {\r\n            const from = oldText[i] || '';\r\n            const to = newText[i] || '';\r\n            const start = Math.floor(Math.random() * 40);\r\n            const end = start + Math.floor(Math.random() * 40);\r\n            this.queue.push({ from, to, start, end });\r\n        }\r\n        cancelAnimationFrame(this.frameRequest);\r\n        this.frame = 0;\r\n        this.update();\r\n        return promise;\r\n    }\r\n    update() {\r\n        let output = '';\r\n        let complete = 0;\r\n        for (let i = 0, n = this.queue.length; i < n; i++) {\r\n            let { from, to, start, end, char } = this.queue[i];\r\n            if (this.frame >= end) {\r\n                complete++;\r\n                output += to;\r\n            } else if (this.frame >= start) {\r\n                if (!char || Math.random() < 0.28) {\r\n                    char = this.randomChar();\r\n                    this.queue[i].char = char;\r\n                }\r\n                output += `<span style=\"color:#ff4c00\">${char}<\/span>`;\r\n            } else {\r\n                output += from;\r\n            }\r\n        }\r\n        this.el.innerHTML = output;\r\n        if (complete === this.queue.length) {\r\n            this.resolve();\r\n        } else {\r\n            this.frameRequest = requestAnimationFrame(this.update);\r\n            this.frame++;\r\n        }\r\n    }\r\n    randomChar() {\r\n        return this.chars[Math.floor(Math.random() * this.chars.length)];\r\n    }\r\n}\r\n\r\n\/\/ Inisialisasi Efek\r\nconst el = document.getElementById('scramble-text');\r\nconst fx = new TextScramble(el);\r\nconst originalText = el.innerText;\r\n\r\n\/\/ Jalankan efek saat load\r\nsetTimeout(() => {\r\n    fx.setText(originalText);\r\n}, 1000);\r\n\r\n\/\/ Jalankan ulang saat hover agar terasa interaktif\r\nel.addEventListener('mouseenter', () => fx.setText(originalText));\r\n\r\n\r\n\/* ===== COPY CA FUNCTION ===== *\/\r\nfunction copyCA() {\r\n    const caText = \"0x71C234...WAR_DRAMA_69\"; \/\/ Ganti dengan CA aslimu\r\n    navigator.clipboard.writeText(caText);\r\n    \r\n    const label = document.getElementById('copyLabel');\r\n    label.style.opacity = '1';\r\n    \r\n    setTimeout(() => {\r\n        label.style.opacity = '0';\r\n    }, 2000);\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-636c585 elementor-widget elementor-widget-html\" data-id=\"636c585\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"vhs-ultimate-system\">\r\n    <div class=\"vhs-noise-engine\"><\/div>\r\n    <div class=\"vhs-flicker\"><\/div>\r\n    <div class=\"vhs-scanlines-fixed\"><\/div>\r\n    <div class=\"vhs-horizontal-distortion\"><\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* MASTER CONTAINER *\/\r\n.vhs-ultimate-system {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 999999;\r\n    pointer-events: none;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* 1. AGGRESSIVE PURE CSS NOISE *\/\r\n.vhs-noise-engine {\r\n    position: absolute;\r\n    inset: -20%;\r\n    width: 140%;\r\n    height: 140%;\r\n    opacity: 0.15; \/* Atur ketajaman grain di sini *\/\r\n    background: \r\n        repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%),\r\n        repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%);\r\n    background-blend-mode: difference;\r\n    animation: grain-jump 0.15s steps(2) infinite;\r\n    mix-blend-mode: overlay;\r\n}\r\n\r\n@keyframes grain-jump {\r\n    0% { transform: translate(0,0); }\r\n    25% { transform: translate(-2%, 1%); }\r\n    50% { transform: translate(1%, -2%); }\r\n    75% { transform: translate(-1%, 2%); }\r\n    100% { transform: translate(2%, -1%); }\r\n}\r\n\r\n\/* 2. SCANLINES DENGAN EFEK CRT MIKRO *\/\r\n.vhs-scanlines-fixed {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(\r\n        rgba(18, 16, 16, 0) 50%, \r\n        rgba(0, 0, 0, 0.2) 50%\r\n    );\r\n    background-size: 100% 3px; \/* Garis sangat rapat *\/\r\n    z-index: 2;\r\n}\r\n\r\n\/* 3. SCREEN FLICKER (Kedipan cahaya halus) *\/\r\n.vhs-flicker {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: rgba(255, 255, 255, 0.015);\r\n    opacity: 0;\r\n    z-index: 3;\r\n    animation: light-flicker 0.1s infinite;\r\n}\r\n\r\n@keyframes light-flicker {\r\n    0%, 100% { opacity: 0; }\r\n    50% { opacity: 1; }\r\n}\r\n\r\n\/* 4. TRACKING DISTORTION BAR (Garis Horizontal yang Bergerak Tajam) *\/\r\n.vhs-horizontal-distortion {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 3px;\r\n    background: rgba(255, 255, 255, 0.3);\r\n    top: -10%;\r\n    filter: blur(1px);\r\n    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);\r\n    animation: tracking-vhs 6s linear infinite;\r\n    z-index: 4;\r\n}\r\n\r\n@keyframes tracking-vhs {\r\n    0% { top: -10%; transform: scaleY(1); opacity: 0; }\r\n    5% { opacity: 0.8; }\r\n    10% { top: 110%; transform: scaleY(2); opacity: 0; }\r\n    100% { top: 110%; }\r\n}\r\n\r\n\/* 5. CHROMATIC ABERRATION (Distorsi Warna di Pinggir) *\/\r\n\/* Efek ini membuat teks di pinggir layar sedikit berbayang merah\/biru *\/\r\nbody {\r\n    animation: screen-jitter 10s infinite;\r\n}\r\n\r\n@keyframes screen-jitter {\r\n    0%, 95%, 100% { transform: translate(0,0); filter: none; }\r\n    96% { transform: translate(2px, 1px); filter: hue-rotate(90deg); }\r\n    97% { transform: translate(-1px, -2px); filter: contrast(1.2); }\r\n    98% { transform: translate(3px, 0); filter: saturate(1.5); }\r\n    99% { transform: translate(-2px, 1px); }\r\n}\r\n\r\n\/* 6. VIGNETTE CINEMATIC (Efek Lensa Tua) *\/\r\n.vhs-ultimate-system::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: radial-gradient(\r\n        circle, \r\n        transparent 50%, \r\n        rgba(0, 0, 0, 0.5) 150%\r\n    );\r\n    z-index: 5;\r\n}\r\n<\/style>\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-166c8c2 e-con-full e-flex e-con e-parent\" data-id=\"166c8c2\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8fbb933 elementor-widget elementor-widget-spacer\" data-id=\"8fbb933\" 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-eb109c8 elementor-widget elementor-widget-image\" data-id=\"eb109c8\" data-element_type=\"widget\" data-widget_type=\"image.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-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"722\" height=\"432\" src=\"https:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/dreamina-2026-03-07-3110-staticfootagekarakteryanghijauseda.-ezgif.com-gif-maker.gif\" class=\"attachment-large size-large wp-image-29\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d56e2a0 elementor-widget elementor-widget-html\" data-id=\"d56e2a0\" 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\/* Font: Syne (Bold\/Unique) & Inter (Modern Sans) *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@800&family=Inter:ital,wght@0,300;0,400;0,700;1,300&display=swap');\r\n\r\n.about-section {\r\n    min-height: 100vh; \/* Ruang lebih untuk scroll storytelling *\/\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 20px 24px;\r\n    background: transparent;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* background decoration - Scanline subtle *\/\r\n.about-section::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));\r\n    background-size: 100% 4px, 3px 100%;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.about-container {\r\n    max-width: 850px;\r\n    text-align: center;\r\n    z-index: 2;\r\n    perspective: 1000px;\r\n}\r\n\r\n\/* Small Label with Glow *\/\r\n.about-tag {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.4em;\r\n    color: #ff4c00;\r\n    margin-bottom: 40px;\r\n    display: block;\r\n    text-shadow: 0 0 10px rgba(255, 76, 0, 0.5);\r\n}\r\n\r\n\/* Main Storytelling Text *\/\r\n.about-paragraph {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(1.1rem, 2.5vw, 1.1rem);\r\n    font-weight: 300;\r\n    color: #555; \/* Warna default redup *\/\r\n    margin-bottom: 0px;\r\n    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n}\r\n\r\n\/* Efek Highlight saat active *\/\r\n.about-paragraph span {\r\n    transition: all 0.8s ease;\r\n    display: inline-block;\r\n}\r\n\r\n.about-paragraph.active {\r\n    color: #fff;\r\n    transform: translateZ(20px);\r\n}\r\n\r\n.about-paragraph.active strong {\r\n    color: #ff4c00;\r\n}\r\n\r\n\/* Quote \"Seriously?\" yang lebih gila *\/\r\n.final-quote-wrap {\r\n    margin-top: 20px;\r\n    height: 100px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.seriously-text {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(1.5rem, 6vw, 2rem);\r\n    font-weight: 800;\r\n    color: transparent;\r\n    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);\r\n    position: relative;\r\n    transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n}\r\n\r\n.seriously-text.active {\r\n    color: #fff;\r\n    -webkit-text-stroke: 0px transparent;\r\n    text-shadow: 0 0 30px rgba(255, 255, 255, 0.4);\r\n    transform: scale(1.1) rotate(-2deg);\r\n}\r\n\r\n\/* Floating Elements (Cyberpunk details) *\/\r\n.data-node {\r\n    position: absolute;\r\n    font-family: monospace;\r\n    font-size: 9px;\r\n    color: rgba(255, 76, 0, 0.4);\r\n    pointer-events: none;\r\n}\r\n<\/style>\r\n\r\n<section class=\"about-section\" id=\"about-trigger\">\r\n    <div class=\"data-node\" style=\"top: 15%; left: 10%;\">[INTEL_LINK: ENABLED]<\/div>\r\n    <div class=\"data-node\" style=\"bottom: 15%; right: 10%;\">[STATUS: MONITORING_DRAMA]<\/div>\r\n\r\n    <div class=\"about-container\">\r\n        <span class=\"about-tag\">Classified Information<\/span>\r\n\r\n        <p class=\"about-paragraph scroll-reveal\">\r\n            Every conflict today has two battlefields: <br>\r\n            <strong>The real one<\/strong> and <strong>The internet<\/strong>.\r\n        <\/p>\r\n\r\n        <p class=\"about-paragraph scroll-reveal\">\r\n            Governments, influencers, media outlets, and anonymous accounts all fight for the same thing \u2014 \r\n            <strong>attention and narrative control.<\/strong>\r\n        <\/p>\r\n\r\n        <p class=\"about-paragraph scroll-reveal\">\r\n            Missiles fly in the sky. Memes fly on the timeline. <br>\r\n            And sometimes the online war becomes louder than the real one.\r\n        <\/p>\r\n\r\n        <p class=\"about-paragraph scroll-reveal\">\r\n            <strong>WAR BUT DRAMA<\/strong> was born from that absurd reality. <br>\r\n            A project inspired by the endless cycle of propaganda, online arguments, and digital warriors shouting into the void...\r\n        <\/p>\r\n\r\n        <p class=\"about-paragraph scroll-reveal\">\r\n            While the rest of us just watch and think:\r\n        <\/p>\r\n\r\n        <div class=\"final-quote-wrap\">\r\n            <h2 class=\"seriously-text scroll-reveal\">\"Seriously?\"<\/h2>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/**\r\n * Advanced Scroll Observer\r\n * Mendeteksi setiap paragraf secara individu untuk memberikan efek \"Focus\"\r\n *\/\r\nconst scrollReveal = () => {\r\n    const reveals = document.querySelectorAll('.scroll-reveal');\r\n    const triggerBottom = window.innerHeight * 0.8; \/\/ Trigger saat elemen di 80% layar\r\n\r\n    reveals.forEach(el => {\r\n        const elTop = el.getBoundingClientRect().top;\r\n\r\n        if (elTop < triggerBottom) {\r\n            el.classList.add('active');\r\n        } else {\r\n            \/\/ Opsional: Hapus class ini jika ingin efeknya tidak hilang saat scroll ke atas\r\n            el.classList.remove('active');\r\n        }\r\n    });\r\n};\r\n\r\n\/\/ Jalankan saat scroll\r\nwindow.addEventListener('scroll', scrollReveal);\r\n\/\/ Jalankan sekali saat load\r\nwindow.addEventListener('load', scrollReveal);\r\n\r\n\/\/ Efek Parallax Ringan pada Mouse Move (Opsional - Membuat section terasa hidup)\r\ndocument.addEventListener('mousemove', (e) => {\r\n    const nodes = document.querySelectorAll('.data-node');\r\n    const moveX = (e.clientX - window.innerWidth \/ 2) \/ 50;\r\n    const moveY = (e.clientY - window.innerHeight \/ 2) \/ 50;\r\n    \r\n    nodes.forEach(node => {\r\n        node.style.transform = `translate(${moveX}px, ${moveY}px)`;\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<div class=\"elementor-element elementor-element-76e77e2 e-con-full e-flex e-con e-parent\" data-id=\"76e77e2\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d62b85b elementor-widget elementor-widget-html\" data-id=\"d62b85b\" 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\/* Font Setup *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Syncopate:wght@700&family=JetBrains+Mono:wght@800&display=swap');\r\n\r\n.token-marquee-section {\r\n    padding: 50px 0;\r\n    background: transparent;\r\n    position: relative;\r\n    overflow: hidden;\r\n    width: 100%;\r\n}\r\n\r\n\/* Fading Sides (Black Masking) *\/\r\n.token-marquee-section::before,\r\n.token-marquee-section::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    width: 20%;\r\n    height: 100%;\r\n    z-index: 10;\r\n    pointer-events: none;\r\n}\r\n\r\n.token-marquee-section::before {\r\n    left: 0;\r\n    background: linear-gradient(to right, #000 20%, transparent 100%);\r\n}\r\n\r\n.token-marquee-section::after {\r\n    right: 0;\r\n    background: linear-gradient(to left, #000 20%, transparent 100%);\r\n}\r\n\r\n\/* The Marquee Track *\/\r\n.marquee-track {\r\n    display: flex;\r\n    gap: 40px;\r\n    width: max-content;\r\n    animation: marquee-run 30s linear infinite;\r\n}\r\n\r\n@keyframes marquee-run {\r\n    from { transform: translateX(0); }\r\n    to { transform: translateX(-50%); }\r\n}\r\n\r\n\/* ===== SOLID GLOWING CARD ===== *\/\r\n.token-card {\r\n    min-width: 320px;\r\n    \/* Fill Warna Oren Solid dengan Gradient *\/\r\n    background: linear-gradient(135deg, #ff4c00 0%, #ff8800 100%);\r\n    border-radius: 4px; \/* Sudut lebih tajam agar terlihat tactical *\/\r\n    padding: 40px 30px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    \/* Glow luar yang kuat *\/\r\n    box-shadow: 0 0 30px rgba(255, 76, 0, 0.4);\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n}\r\n\r\n\/* VHS Scanlines Overlay *\/\r\n.token-card::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(\r\n        rgba(18, 16, 16, 0) 50%, \r\n        rgba(0, 0, 0, 0.1) 50%\r\n    ), \r\n    linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));\r\n    background-size: 100% 3px, 100% 100%;\r\n    z-index: 2;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* VHS Grain\/Noise Effect *\/\r\n.vhs-noise {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: url('http:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/qse6b2lyudcg1.gif'); \/* Subtle noise gif *\/\r\n    opacity: 1;\r\n    mix-blend-mode: overlay;\r\n    z-index: 3;\r\n    max-height: 80vh;\r\n    margin-top: -190px;\r\n    margin-left: -90px;\r\n}\r\n\r\n\/* VHS Moving Line *\/\r\n.vhs-scan-line {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 10px;\r\n    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent);\r\n    top: -100%;\r\n    z-index: 4;\r\n    animation: vhs-scan 6s linear infinite;\r\n}\r\n\r\n@keyframes vhs-scan {\r\n    0% { top: -10%; }\r\n    100% { top: 110%; }\r\n}\r\n\r\n\/* Card Content *\/\r\n.token-card .label {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: 11px;\r\n    color: rgba(0, 0, 0, 0.7); \/* Kontras dengan background oren *\/\r\n    font-weight: 800;\r\n    letter-spacing: 3px;\r\n    margin-bottom: 8px;\r\n    z-index: 5;\r\n}\r\n\r\n.token-card .value {\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-size: 2.2rem;\r\n    color: #000; \/* Hitam pekat di atas oren terang *\/\r\n    font-weight: 900;\r\n    text-transform: uppercase;\r\n    z-index: 5;\r\n    letter-spacing: -1px;\r\n}\r\n\r\n\/* Hover State *\/\r\n.token-card:hover {\r\n    transform: translateY(-10px) scale(1.02);\r\n    box-shadow: 0 20px 50px rgba(255, 76, 0, 0.6);\r\n    filter: brightness(1.1);\r\n}\r\n\r\n.token-card:hover .value {\r\n    \/* Chromatic Aberration Effect pada teks saat hover *\/\r\n    text-shadow: 2px 0 #00f2ff, -2px 0 #ff0000;\r\n}\r\n\r\n<\/style>\r\n\r\n<section class=\"token-marquee-section\">\r\n    <div class=\"marquee-track\">\r\n        \r\n        <div class=\"token-card\">\r\n            <div class=\"vhs-noise\"><\/div>\r\n            <div class=\"vhs-scan-line\"><\/div>\r\n            <span class=\"label\">Total Supply<\/span>\r\n            <span class=\"value\">1B<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"token-card\">\r\n            <div class=\"vhs-noise\"><\/div>\r\n            <div class=\"vhs-scan-line\"><\/div>\r\n            <span class=\"label\">Buy\/Sell<\/span>\r\n            <span class=\"value\">0% Tax<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"token-card\">\r\n            <div class=\"vhs-noise\"><\/div>\r\n            <div class=\"vhs-scan-line\"><\/div>\r\n            <span class=\"label\">Liquidity<\/span>\r\n            <span class=\"value\">100% Burn<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"token-card\">\r\n            <div class=\"vhs-noise\"><\/div>\r\n            <div class=\"vhs-scan-line\"><\/div>\r\n            <span class=\"label\">Blockchain<\/span>\r\n            <span class=\"value\">SOLANA<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"token-card\"><div class=\"vhs-noise\"><\/div><div class=\"vhs-scan-line\"><\/div><span class=\"label\">Total Supply<\/span><span class=\"value\">1B<\/span><\/div>\r\n        <div class=\"token-card\"><div class=\"vhs-noise\"><\/div><div class=\"vhs-scan-line\"><\/div><span class=\"label\">Buy\/Sell<\/span><span class=\"value\">0% Tax<\/span><\/div>\r\n        <div class=\"token-card\"><div class=\"vhs-noise\"><\/div><div class=\"vhs-scan-line\"><\/div><span class=\"label\">Liquidity<\/span><span class=\"value\">100% Burn<\/span><\/div>\r\n        <div class=\"token-card\"><div class=\"vhs-noise\"><\/div><div class=\"vhs-scan-line\"><\/div><span class=\"label\">Blockchain<\/span><span class=\"value\">SOLANA<\/span><\/div>\r\n\r\n    <\/div>\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-516a014 e-con-full e-flex e-con e-parent\" data-id=\"516a014\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c9b288 elementor-widget elementor-widget-html\" data-id=\"6c9b288\" 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\/* Section Wrapper *\/\r\n.clash-section {\r\n    min-height: 120vh;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 100px 24px;\r\n    background: transparent;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* Background Noise Overlay (Consistent with About) *\/\r\n.clash-section::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: radial-gradient(circle at 50% 50%, rgba(255, 76, 0, 0.05) 0%, transparent 70%);\r\n    pointer-events: none;\r\n}\r\n\r\n.clash-container {\r\n    max-width: 900px;\r\n    text-align: center;\r\n    z-index: 2;\r\n}\r\n\r\n\/* Sub-text lines *\/\r\n.clash-line {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(0.9rem, 2vw, 1.2rem);\r\n    font-weight: 400;\r\n    color: #444; \/* Dimmed initially *\/\r\n    margin-bottom: 25px;\r\n    letter-spacing: 0.2em;\r\n    text-transform: uppercase;\r\n    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);\r\n    transform: translateY(20px);\r\n    opacity: 0;\r\n}\r\n\r\n.clash-line.active {\r\n    color: #bbb;\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\n\r\n\/* Emphasis for the \"Sometimes...\" part *\/\r\n.clash-pause {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-style: italic;\r\n    font-size: 1rem;\r\n    color: #ff4c00;\r\n    margin: 40px 0;\r\n    opacity: 0;\r\n    transition: opacity 1.5s ease;\r\n}\r\n\r\n.clash-pause.active {\r\n    opacity: 0.6;\r\n}\r\n\r\n\/* THE GRAND FINALE TEXT *\/\r\n.brand-reveal {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(1.8rem, 5vw, 3.5rem);\r\n    font-weight: 800;\r\n    color: #fff;\r\n    letter-spacing: -0.05em;\r\n    margin-top: 20px;\r\n    opacity: 0;\r\n    filter: blur(10px);\r\n    transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);\r\n}\r\n\r\n.brand-reveal span {\r\n    color: #ff4c00;\r\n    text-shadow: 0 0 20px rgba(255, 76, 0, 0.5);\r\n}\r\n\r\n.brand-reveal.active {\r\n    opacity: 1;\r\n    filter: blur(0);\r\n    letter-spacing: 0.1em;\r\n}\r\n\r\n\/* Static Decorator *\/\r\n.clash-id {\r\n    position: absolute;\r\n    bottom: 40px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    font-family: monospace;\r\n    font-size: 10px;\r\n    color: rgba(255,255,255,0.2);\r\n    letter-spacing: 3px;\r\n}\r\n<\/style>\r\n\r\n<section class=\"clash-section\">\r\n    <div class=\"clash-container\">\r\n        <p class=\"clash-line clash-reveal\">The world might be loud.<\/p>\r\n        <p class=\"clash-line clash-reveal\">The narratives might clash.<\/p>\r\n        <p class=\"clash-line clash-reveal\">But sometimes the clearest perspective<\/p>\r\n        <p class=\"clash-line clash-reveal\">comes from stepping back and realizing:<\/p>\r\n        \r\n        <p class=\"clash-line clash-reveal\" style=\"font-weight: 700; color: #fff;\">It's not always war.<\/p>\r\n        \r\n        <div class=\"clash-pause clash-reveal\">Sometimes\u2026<\/div>\r\n\r\n        <h2 class=\"brand-reveal clash-reveal\">\r\n            It's just <span>WAR BUT DRAMA.<\/span>\r\n        <\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"clash-id\">SIGNAL_STABILITY: 98% \/\/ REF_ID: WBD_FINAL<\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/**\r\n * Intersection Observer for the Clash Section\r\n *\/\r\nconst initClashReveal = () => {\r\n    const reveals = document.querySelectorAll('.clash-reveal');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                \/\/ Memberikan sedikit delay staggered berdasarkan urutan\r\n                entry.target.classList.add('active');\r\n            } else {\r\n                \/\/ Hapus jika ingin animasi reset saat scroll balik ke atas\r\n                entry.target.classList.remove('active');\r\n            }\r\n        });\r\n    }, {\r\n        threshold: 0.3 \/\/ Memicu saat 30% elemen terlihat\r\n    });\r\n\r\n    reveals.forEach(el => observer.observe(el));\r\n};\r\n\r\n\/\/ Jalankan saat DOM siap\r\ndocument.addEventListener('DOMContentLoaded', initClashReveal);\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be369a8 elementor-widget elementor-widget-image\" data-id=\"be369a8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Mar-7-2026-11_24_19-PM-1-1024x683.png\" class=\"attachment-large size-large wp-image-39\" alt=\"\" srcset=\"https:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Mar-7-2026-11_24_19-PM-1-1024x683.png 1024w, https:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Mar-7-2026-11_24_19-PM-1-300x200.png 300w, https:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Mar-7-2026-11_24_19-PM-1-768x512.png 768w, https:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Mar-7-2026-11_24_19-PM-1.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\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-9c2a4f6 e-con-full e-flex e-con e-parent\" data-id=\"9c2a4f6\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-18b1644 elementor-widget elementor-widget-html\" data-id=\"18b1644\" 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\/* Font Import *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Syncopate:wght@800&display=swap');\r\n\r\n.marquee-text-section {\r\n    width: 100%;\r\n    padding: 15px 0;\r\n    \/* BG Style persis seperti card: Solid Orange Gradient *\/\r\n    background: linear-gradient(135deg, #ff4c00 0%, #ff8800 100%);\r\n    position: relative;\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    box-shadow: 0 0 40px rgba(255, 76, 0, 0.3);\r\n    \/* Sedikit miring (skew) untuk kesan dinamis\/tactical *\/\r\n    transform: skewY(-1deg);\r\n    border-top: 1px solid rgba(255, 255, 255, 0.3);\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n\/* VHS Overlay (Sama dengan style card sebelumnya) *\/\r\n.marquee-text-section::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: repeating-linear-gradient(\r\n        0deg,\r\n        transparent 0px,\r\n        rgba(0, 0, 0, 0.05) 1px,\r\n        transparent 2px\r\n    );\r\n    background-size: 100% 4px;\r\n    z-index: 2;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Container untuk animasi marquee *\/\r\n.marquee-content {\r\n    display: flex;\r\n    white-space: nowrap;\r\n    animation: marquee-scroll 15s linear infinite;\r\n    gap: 40px; \/* Jarak antar teks *\/\r\n}\r\n\r\n.marquee-item {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(2rem, 5vw, 2.5rem);\r\n    font-weight: 800;\r\n    color: #000; \/* Hitam pekat di atas oren *\/\r\n    text-transform: uppercase;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 40px;\r\n    letter-spacing: -2px;\r\n}\r\n\r\n\/* Pemisah antar teks (Dot atau Diamond) *\/\r\n.marquee-item::after {\r\n    content: \"\u2726\";\r\n    font-size: 1.5rem;\r\n    color: rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n\/* Animasi Looping Smooth *\/\r\n@keyframes marquee-scroll {\r\n    0% { transform: translateX(0); }\r\n    100% { transform: translateX(-50%); }\r\n}\r\n\r\n\/* Efek VHS Grain subtle di atas background oren *\/\r\n.marquee-noise {\r\n    position: absolute;\r\n    inset: 0;\r\n    opacity: 0.05;\r\n    background: url('https:\/\/media.giphy.com\/media\/oEI9uWUicH9RK\/giphy.gif');\r\n    mix-blend-mode: overlay;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Responsif: Perkecil di mobile *\/\r\n@media (max-width: 768px) {\r\n    .marquee-text-section {\r\n        padding: 15px 0;\r\n        transform: skewY(-2deg);\r\n    }\r\n    .marquee-item {\r\n        font-size: 1.5rem;\r\n        gap: 20px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"marquee-text-section\">\r\n    <div class=\"marquee-noise\"><\/div>\r\n    \r\n    <div class=\"marquee-content\">\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n    <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8467f36 e-con-full e-flex e-con e-parent\" data-id=\"8467f36\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1978d9a elementor-widget elementor-widget-html\" data-id=\"1978d9a\" 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\/* Font Setup *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Syncopate:wght@700;800&family=Inter:wght@400;700;800&family=JetBrains+Mono:wght@500&display=swap');\r\n\r\n.roadmap-section {\r\n    padding: 120px 20px;\r\n    background: #000000;\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    overflow: hidden;\r\n}\r\n\r\n.roadmap-header h2 {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(1.8rem, 5vw, 2.8rem);\r\n    color: #ffffff;\r\n    margin-bottom: 100px;\r\n    letter-spacing: 8px;\r\n    text-align: center;\r\n    text-transform: uppercase;\r\n    text-shadow: 0 0 20px rgba(255, 76, 0, 0.3);\r\n}\r\n\r\n.roadmap-container {\r\n    position: relative;\r\n    max-width: 1000px;\r\n    width: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 80px;\r\n}\r\n\r\n\/* Garis Tengah *\/\r\n.roadmap-line {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 2px;\r\n    background: rgba(255, 76, 0, 0.1);\r\n    transform: translateX(-50%);\r\n}\r\n\r\n.roadmap-progress-bar {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 0;\r\n    width: 2px;\r\n    height: 0; \r\n    background: #ff4c00;\r\n    box-shadow: 0 0 20px #ff4c00, 0 0 40px rgba(255, 76, 0, 0.5);\r\n    transform: translateX(-50%);\r\n    z-index: 2;\r\n    transition: height 0.1s ease-out;\r\n}\r\n\r\n\/* Item Wrapper *\/\r\n.roadmap-item {\r\n    display: flex;\r\n    width: 100%;\r\n    justify-content: flex-start;\r\n    position: relative;\r\n    opacity: 0;\r\n    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);\r\n}\r\n\r\n.roadmap-item:nth-child(odd) { transform: translateX(-80px); }\r\n.roadmap-item:nth-child(even) { justify-content: flex-end; transform: translateX(80px); }\r\n\r\n.roadmap-item.reveal-active {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n}\r\n\r\n\/* CARD STYLE *\/\r\n.roadmap-card {\r\n    width: 44%;\r\n    background: linear-gradient(135deg, #ff4c00 0%, #ff8800 100%);\r\n    padding: 40px;\r\n    border-radius: 4px;\r\n    position: relative;\r\n    z-index: 10;\r\n    box-shadow: 0 0 30px rgba(255, 76, 0, 0.4);\r\n    overflow: hidden;\r\n}\r\n\r\n.roadmap-card::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(\r\n        rgba(18, 16, 16, 0) 50%, \r\n        rgba(0, 0, 0, 0.1) 50%\r\n    ), \r\n    linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));\r\n    background-size: 100% 3px, 100% 100%;\r\n    z-index: 2;\r\n    pointer-events: none;\r\n}\r\n\r\n.vhs-noise-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: url('http:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/437e60c3fe83d636e7f514fac5a6e39e.gif');\r\n    opacity: 0.8;\r\n    mix-blend-mode: overlay;\r\n    z-index: 3;\r\n    pointer-events: none;\r\n    background-repeat: no-repeat;\r\n    background-position: center,center;\r\n}\r\n\r\n.roadmap-dot {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50px;\r\n    width: 18px;\r\n    height: 18px;\r\n    background: #000;\r\n    border: 4px solid #ff4c00;\r\n    border-radius: 50%;\r\n    transform: translateX(-50%) scale(0);\r\n    z-index: 15;\r\n    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s;\r\n}\r\n\r\n.roadmap-item.reveal-active .roadmap-dot {\r\n    transform: translateX(-50%) scale(1);\r\n    background: #ff4c00;\r\n    box-shadow: 0 0 20px #ff4c00;\r\n}\r\n\r\n.phase-no { \r\n    font-family: 'Syncopate', sans-serif;\r\n    background: #000; \r\n    color: #ff4c00; \r\n    padding: 4px 12px; \r\n    font-size: 11px; \r\n    font-weight: 800; \r\n    display: inline-block; \r\n    margin-bottom: 20px;\r\n    position: relative;\r\n    z-index: 5;\r\n}\r\n\r\n.roadmap-card h3 { \r\n    font-family: 'Syncopate', sans-serif; \r\n    color: #000; \r\n    font-size: 1.3rem; \r\n    margin-bottom: 8px; \r\n    text-transform: uppercase; \r\n    font-weight: 800;\r\n    position: relative;\r\n    z-index: 5;\r\n}\r\n\r\n.roadmap-card .sub { \r\n    font-family: 'Syncopate', sans-serif;\r\n    color: rgba(0,0,0,0.7); \r\n    font-size: 0.9rem; \r\n    font-style: italic; \r\n    margin-bottom: 25px; \r\n    display: block; \r\n    line-height: 1.4;\r\n    position: relative;\r\n    z-index: 5;\r\n}\r\n\r\n.roadmap-list { list-style: none; padding: 0; margin: 0 0 25px 0; position: relative; z-index: 5;}\r\n.roadmap-list li { \r\n    font-family: 'Syncopate', sans-serif;\r\n    color: #000; \r\n    font-size: 1rem; \r\n    font-weight: 700; \r\n    margin-bottom: 10px; \r\n    display: flex; \r\n    align-items: flex-start;\r\n    gap: 10px; \r\n}\r\n\r\n.roadmap-list li::before { content: \"\u25a0\"; font-size: 0.7rem; margin-top: 4px; }\r\n\r\n.roadmap-card-footer { \r\n    font-family: 'Syncopate', sans-serif; \r\n    font-size: 0.85rem; \r\n    color: #000; \r\n    font-weight: 800; \r\n    border-top: 2px solid rgba(0,0,0,0.1); \r\n    padding-top: 20px; \r\n    text-transform: uppercase;\r\n    position: relative;\r\n    z-index: 5;\r\n}\r\n\r\n\/* ===== OPTIMASI MOBILE RESPONSIVE ===== *\/\r\n@media (max-width: 768px) {\r\n    .roadmap-header h2 {\r\n        margin-bottom: 60px;\r\n        letter-spacing: 4px;\r\n        padding: 0 10px;\r\n    }\r\n\r\n    .roadmap-container {\r\n        gap: 50px;\r\n        padding-left: 10px;\r\n    }\r\n\r\n    \/* Pindahkan garis ke sisi kiri *\/\r\n    .roadmap-line, .roadmap-progress-bar { \r\n        left: 20px; \r\n        transform: none; \r\n    }\r\n\r\n    \/* Pastikan dot mengikuti garis di kiri *\/\r\n    .roadmap-dot {\r\n        left: 20px;\r\n        top: 35px; \/* Sesuaikan posisi dot dengan tinggi kartu mobile *\/\r\n        transform: scale(0); \/* Reset transform untuk animasi *\/\r\n    }\r\n\r\n    .roadmap-item.reveal-active .roadmap-dot {\r\n        transform: scale(1); \/* Titik muncul tanpa translateX(-50%) *\/\r\n    }\r\n\r\n    \/* Kartu Melebar dan Sejajar ke Kiri *\/\r\n    .roadmap-card { \r\n        width: calc(100% - 60px); \r\n        margin-left: 45px !important; \r\n        margin-right: 0 !important;\r\n        padding: 25px 20px; \r\n    }\r\n\r\n    \/* Reset animasi arah item (semua masuk dari arah yang sama di mobile) *\/\r\n    .roadmap-item:nth-child(odd), \r\n    .roadmap-item:nth-child(even) { \r\n        justify-content: flex-start;\r\n        transform: translateX(30px); \/* Arah slide masuk yang lebih halus *\/\r\n        opacity: 0;\r\n    }\r\n\r\n    .roadmap-item.reveal-active {\r\n        transform: translateX(0);\r\n        opacity: 1;\r\n    }\r\n\r\n    .roadmap-card h3 {\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .roadmap-list li {\r\n        font-size: 0.85rem;\r\n    }\r\n\r\n    .roadmap-card-footer {\r\n        font-size: 0.75rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"roadmap-section\">\r\n    <div class=\"roadmap-header\">\r\n        <h2>Mission Timeline<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"roadmap-container\">\r\n        <div class=\"roadmap-line\"><\/div>\r\n        <div class=\"roadmap-progress-bar\" id=\"scrollProgress\"><\/div>\r\n\r\n        <div class=\"roadmap-item\">\r\n            <div class=\"roadmap-dot\"><\/div>\r\n            <div class=\"roadmap-card\">\r\n                <div class=\"vhs-noise-overlay\"><\/div>\r\n                <span class=\"phase-no\">PHASE 01<\/span>\r\n                <h3>The Broadcast Begins<\/h3>\r\n                <span class=\"sub\">Every narrative needs a signal.<\/span>\r\n                <ul class=\"roadmap-list\">\r\n                    <li>Launch of $WARDRAMA<\/li>\r\n                    <li>Website & social channels live<\/li>\r\n                    <li>Community formation begins<\/li>\r\n                    <li>Meme operations activated<\/li>\r\n                <\/ul>\r\n                <div class=\"roadmap-card-footer\">The internet starts noticing the signal.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"roadmap-item\">\r\n            <div class=\"roadmap-dot\"><\/div>\r\n            <div class=\"roadmap-card\">\r\n                <div class=\"vhs-noise-overlay\"><\/div>\r\n                <span class=\"phase-no\">PHASE 02<\/span>\r\n                <h3>The Propaganda Era<\/h3>\r\n                <span class=\"sub\">The timeline becomes the battlefield.<\/span>\r\n                <ul class=\"roadmap-list\">\r\n                    <li>Meme campaigns across platforms<\/li>\r\n                    <li>Influencer & creator collaborations<\/li>\r\n                    <li>Community events & contests<\/li>\r\n                    <li>Narrative amplification<\/li>\r\n                <\/ul>\r\n                <div class=\"roadmap-card-footer\">Drama spreads faster than the truth.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"roadmap-item\">\r\n            <div class=\"roadmap-dot\"><\/div>\r\n            <div class=\"roadmap-card\">\r\n                <div class=\"vhs-noise-overlay\"><\/div>\r\n                <span class=\"phase-no\">PHASE 03<\/span>\r\n                <h3>Global Takeover<\/h3>\r\n                <span class=\"sub\">The signal reaches everywhere.<\/span>\r\n                <ul class=\"roadmap-list\">\r\n                    <li>Listings on tracking platforms<\/li>\r\n                    <li>Major marketing push<\/li>\r\n                    <li>Partnerships with meme communities<\/li>\r\n                    <li>Viral ecosystem expansion<\/li>\r\n                <\/ul>\r\n                <div class=\"roadmap-card-footer\">\u201cThis isn't war\u2026 it's WAR BUT DRAMA.\u201d<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"roadmap-item\">\r\n            <div class=\"roadmap-dot\"><\/div>\r\n            <div class=\"roadmap-card\">\r\n                <div class=\"vhs-noise-overlay\"><\/div>\r\n                <span class=\"phase-no\">PHASE 04<\/span>\r\n                <h3>Culture Mode<\/h3>\r\n                <span class=\"sub\">From meme to movement.<\/span>\r\n                <ul class=\"roadmap-list\">\r\n                    <li>Community-driven initiatives<\/li>\r\n                    <li>Creative content ecosystem<\/li>\r\n                    <li>Global meme collaborations<\/li>\r\n                    <li>Internet culture integration<\/li>\r\n                <\/ul>\r\n                <div class=\"roadmap-card-footer\">The narrative belongs to the internet.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"roadmap-item\">\r\n            <div class=\"roadmap-dot\"><\/div>\r\n            <div class=\"roadmap-card\">\r\n                <div class=\"vhs-noise-overlay\"><\/div>\r\n                <span class=\"phase-no\">PHASE 05<\/span>\r\n                <h3>The Never-Ending Timeline<\/h3>\r\n                <span class=\"sub\">Because the drama never stops.<\/span>\r\n                <ul class=\"roadmap-list\">\r\n                    <li>Continuous meme evolution<\/li>\r\n                    <li>Community governance exploration<\/li>\r\n                    <li>New creative experiments<\/li>\r\n                    <li>Expanding the WBD universe<\/li>\r\n                <\/ul>\r\n                <div class=\"roadmap-card-footer\">As long as the internet argues, we have a place.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/\/ Reveal Animation\r\nconst roadmapObserver = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n            entry.target.classList.add('reveal-active');\r\n        }\r\n    });\r\n}, { threshold: 0.1 }); \/\/ Diubah sedikit agar lebih cepat muncul di mobile\r\n\r\ndocument.querySelectorAll('.roadmap-item').forEach(item => roadmapObserver.observe(item));\r\n\r\n\/\/ Progress Bar Animation\r\nwindow.addEventListener('scroll', () => {\r\n    const progressLine = document.getElementById('scrollProgress');\r\n    const container = document.querySelector('.roadmap-container');\r\n    const containerRect = container.getBoundingClientRect();\r\n    const offset = window.innerHeight * 0.5; \/\/ Titik aktif animasi progres\r\n    const progress = Math.max(0, Math.min(100, ((-containerRect.top + offset) \/ containerRect.height) * 100));\r\n    progressLine.style.height = progress + '%';\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ad0aba e-con-full e-flex e-con e-parent\" data-id=\"7ad0aba\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-833b897 elementor-widget elementor-widget-html\" data-id=\"833b897\" 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\/* Font Import *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Syncopate:wght@800&display=swap');\r\n\r\n.marquee-text-section {\r\n    width: 100%;\r\n    padding: 15px 0;\r\n    \/* BG Style persis seperti card: Solid Orange Gradient *\/\r\n    background: linear-gradient(135deg, #ff4c00 0%, #ff8800 100%);\r\n    position: relative;\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    box-shadow: 0 0 40px rgba(255, 76, 0, 0.3);\r\n    \/* Sedikit miring (skew) untuk kesan dinamis\/tactical *\/\r\n    transform: skewY(-1deg);\r\n    border-top: 1px solid rgba(255, 255, 255, 0.3);\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n\/* VHS Overlay (Sama dengan style card sebelumnya) *\/\r\n.marquee-text-section::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: repeating-linear-gradient(\r\n        0deg,\r\n        transparent 0px,\r\n        rgba(0, 0, 0, 0.05) 1px,\r\n        transparent 2px\r\n    );\r\n    background-size: 100% 4px;\r\n    z-index: 2;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Container untuk animasi marquee *\/\r\n.marquee-content {\r\n    display: flex;\r\n    white-space: nowrap;\r\n    animation: marquee-scroll 15s linear infinite;\r\n    gap: 40px; \/* Jarak antar teks *\/\r\n}\r\n\r\n.marquee-item {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(2rem, 5vw, 2.5rem);\r\n    font-weight: 800;\r\n    color: #000; \/* Hitam pekat di atas oren *\/\r\n    text-transform: uppercase;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 40px;\r\n    letter-spacing: -2px;\r\n}\r\n\r\n\/* Pemisah antar teks (Dot atau Diamond) *\/\r\n.marquee-item::after {\r\n    content: \"\u2726\";\r\n    font-size: 1.5rem;\r\n    color: rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n\/* Animasi Looping Smooth *\/\r\n@keyframes marquee-scroll {\r\n    0% { transform: translateX(0); }\r\n    100% { transform: translateX(-50%); }\r\n}\r\n\r\n\/* Efek VHS Grain subtle di atas background oren *\/\r\n.marquee-noise {\r\n    position: absolute;\r\n    inset: 0;\r\n    opacity: 0.05;\r\n    background: url('https:\/\/media.giphy.com\/media\/oEI9uWUicH9RK\/giphy.gif');\r\n    mix-blend-mode: overlay;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Responsif: Perkecil di mobile *\/\r\n@media (max-width: 768px) {\r\n    .marquee-text-section {\r\n        padding: 15px 0;\r\n        transform: skewY(-2deg);\r\n    }\r\n    .marquee-item {\r\n        font-size: 1.5rem;\r\n        gap: 20px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"marquee-text-section\">\r\n    <div class=\"marquee-noise\"><\/div>\r\n    \r\n    <div class=\"marquee-content\">\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n        <div class=\"marquee-item\">WAR BUT DRAMA<\/div>\r\n    <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fb35c87 e-con-full e-flex e-con e-parent\" data-id=\"fb35c87\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ca6d4a elementor-widget elementor-widget-spacer\" data-id=\"5ca6d4a\" 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-6eee08e elementor-widget elementor-widget-html\" data-id=\"6eee08e\" 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\/* ===== FONT SETUP ===== *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Syncopate:wght@700;800&family=Inter:wght@200;400;700&family=JetBrains+Mono:wght@500;800&display=swap');\r\n\r\n.signal-section {\r\n    padding: 20px 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    min-height: 80vh;\r\n    position: relative;\r\n}\r\n\r\n.signal-container {\r\n    max-width: 900px;\r\n    width: 100%;\r\n    text-align: center;\r\n}\r\n\r\n\/* ===== TEXT REVEAL ANIMATION ===== *\/\r\n.reveal-text {\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.revealed .reveal-text {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.revealed .delay-1 { transition-delay: 0.2s; }\r\n.revealed .delay-2 { transition-delay: 0.4s; }\r\n.revealed .delay-3 { transition-delay: 0.6s; }\r\n\r\n\/* ===== JUDUL STYLE ===== *\/\r\n.signal-title {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(2.5rem, 10vw, 5rem);\r\n    font-weight: 800;\r\n    color: #fff;\r\n    text-transform: uppercase;\r\n    letter-spacing: -3px;\r\n    line-height: 0.9;\r\n    margin-bottom: 40px;\r\n}\r\n\r\n.signal-title span {\r\n    color: #ff4c00;\r\n    position: relative;\r\n    display: inline-block;\r\n    text-shadow: 0 0 30px rgba(255, 76, 0, 0.4);\r\n}\r\n\r\n.revealed .signal-title span {\r\n    animation: signal-flicker 3s infinite;\r\n}\r\n\r\n@keyframes signal-flicker {\r\n    0%, 100% { opacity: 1; filter: brightness(1); }\r\n    92% { opacity: 1; filter: brightness(1.2); }\r\n    94% { opacity: 0.6; filter: brightness(0.8); }\r\n    96% { opacity: 1; filter: brightness(1.5); }\r\n    98% { opacity: 0.8; filter: brightness(1); }\r\n}\r\n\r\n\/* ===== DESKRIPSI ===== *\/\r\n.signal-desc {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(1rem, 2vw, 1.25rem);\r\n    color: rgba(255, 255, 255, 0.5);\r\n    line-height: 1.8;\r\n    font-weight: 200;\r\n    margin-bottom: 60px;\r\n    max-width: 800px;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n}\r\n\r\n.signal-desc strong {\r\n    color: #fff;\r\n    font-weight: 700;\r\n}\r\n\r\n\/* ===== BUTTONS STYLE WITH ADVANCED HOVER ===== *\/\r\n.signal-btns {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 15px;\r\n}\r\n\r\n.btn-link {\r\n    text-decoration: none;\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    padding: 22px 40px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\r\n    position: relative;\r\n    border: 1px solid rgba(255, 255, 255, 0.15);\r\n    color: #fff;\r\n    background: transparent;\r\n    z-index: 1;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* Hover Effect for Hollow Buttons (Twitter, Telegram, Chart) *\/\r\n.btn-link:not(.highlight):hover {\r\n    color: #ff4c00;\r\n    border-color: #ff4c00;\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 0 20px rgba(255, 76, 0, 0.3), inset 0 0 10px rgba(255, 76, 0, 0.1);\r\n}\r\n\r\n\/* Hover Effect for Highlight Button (Swap Now) *\/\r\n.btn-link.highlight {\r\n    background: #ff4c00;\r\n    color: #000;\r\n    border: none;\r\n    box-shadow: 0 0 20px rgba(255, 76, 0, 0.3);\r\n}\r\n\r\n.btn-link.highlight:hover {\r\n    background: #ffffff;\r\n    color: #000;\r\n    transform: translateY(-8px) scale(1.02);\r\n    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.4);\r\n}\r\n\r\n\/* Subtle Scanline Overlay on Hover *\/\r\n.btn-link::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100%;\r\n    background: repeating-linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.05) 1px, transparent 2px);\r\n    background-size: 100% 4px;\r\n    opacity: 0;\r\n    transition: opacity 0.3s;\r\n    pointer-events: none;\r\n}\r\n\r\n.btn-link:hover::before {\r\n    opacity: 1;\r\n}\r\n\r\n\/* Background Decoration *\/\r\n.signal-section::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: linear-gradient(rgba(255, 76, 0, 0.02) 1px, transparent 1px), \r\n                      linear-gradient(90deg, rgba(255, 76, 0, 0.02) 1px, transparent 1px);\r\n    background-size: 60px 60px;\r\n    z-index: 0;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .btn-link { width: 100%; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"signal-section\" id=\"signalArea\">\r\n    <div class=\"signal-container\">\r\n        \r\n        <h2 class=\"signal-title reveal-text delay-1\">\r\n            Join the <br><span>Signal<\/span>\r\n        <\/h2>\r\n        \r\n        <p class=\"signal-desc reveal-text delay-2\">\r\n            Every war has soldiers. Every drama has an audience. <strong>$WARDRAMA<\/strong> has a community. \r\n            A place where people across the internet gather to watch narratives unfold, share memes, \r\n            and turn global chaos into culture. <br><br>\r\n            If you\u2019ve ever scrolled the timeline during a crisis and thought, \r\n            <em>\u201cWhat is even happening right now?\u201d<\/em> then you already belong here.\r\n        <\/p>\r\n\r\n        <div class=\"signal-btns reveal-text delay-3\">\r\n            <a href=\"#\" class=\"btn-link\">Twitter<\/a>\r\n            <a href=\"#\" class=\"btn-link\">Telegram<\/a>\r\n            <a href=\"#\" class=\"btn-link\">Chart<\/a>\r\n            <a href=\"#\" class=\"btn-link highlight\">Swap Now<\/a>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n            entry.target.classList.add('revealed');\r\n        }\r\n    });\r\n}, { threshold: 0.3 });\r\n\r\nobserver.observe(document.getElementById('signalArea'));\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71aacf7 elementor-widget elementor-widget-image\" data-id=\"71aacf7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"592\" height=\"448\" src=\"https:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/ezgif.com-gif-maker-1.gif\" class=\"attachment-large size-large wp-image-31\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\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-13e44db e-con-full e-flex e-con e-parent\" data-id=\"13e44db\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e24f17 elementor-widget elementor-widget-html\" data-id=\"3e24f17\" 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\/* ===== FOOTER SETUP WITH VHS SOUL ===== *\/\r\n.main-footer {\r\n    background: #ff4c00; \r\n    padding: 100px 24px 40px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: #000000;\r\n}\r\n\r\n\/* 1. VHS SCANLINES (Garis-garis halus) *\/\r\n.main-footer::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(\r\n        rgba(0, 0, 0, 0) 50%, \r\n        rgba(0, 0, 0, 0.08) 50%\r\n    );\r\n    background-size: 100% 4px;\r\n    z-index: 2;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* 2. VHS GRAIN\/NOISE (Efek bintik film) *\/\r\n.vhs-grain-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: url('http:\/\/warbutdrama.fun\/wp-content\/uploads\/2026\/03\/m1jjiv367x771.gif');\r\n    opacity: 0.6;\r\n    mix-blend-mode: overlay;\r\n    z-index: 3;\r\n    pointer-events: none;\r\n    background-repeat: no-repeat;\r\n    background-position: center,center;\r\n}\r\n\r\n\/* 3. TRACKING LINE (Garis gangguan yang lewat) *\/\r\n.vhs-tracking-line {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100px;\r\n    background: linear-gradient(\r\n        to bottom,\r\n        transparent,\r\n        rgba(255, 255, 255, 0.1),\r\n        transparent\r\n    );\r\n    opacity: 0.4;\r\n    z-index: 4;\r\n    animation: tracking-move 8s linear infinite;\r\n    pointer-events: none;\r\n}\r\n\r\n@keyframes tracking-move {\r\n    0% { top: -100%; }\r\n    100% { top: 200%; }\r\n}\r\n\r\n.footer-container {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    position: relative;\r\n    z-index: 10; \/* Di atas semua efek VHS *\/\r\n}\r\n\r\n\/* BRANDING DENGAN SEDIKIT GLITCH *\/\r\n.footer-logo {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: clamp(2rem, 6vw, 3.5rem);\r\n    font-weight: 800;\r\n    letter-spacing: -2px;\r\n    text-transform: uppercase;\r\n    margin-bottom: 10px;\r\n    color: #000;\r\n    position: relative;\r\n}\r\n\r\n.footer-logo::after {\r\n    content: \"WAR BUT DRAMA\";\r\n    position: absolute;\r\n    top: 0; left: 0;\r\n    width: 100%;\r\n    color: #fff;\r\n    opacity: 0;\r\n    z-index: -1;\r\n}\r\n\r\n\/* Simuasi Glitch acak pada logo saat hover *\/\r\n.footer-logo:hover::after {\r\n    animation: footer-glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;\r\n    opacity: 0.5;\r\n}\r\n\r\n@keyframes footer-glitch {\r\n    0% { transform: translate(0); }\r\n    25% { transform: translate(-3px, 2px); }\r\n    50% { transform: translate(3px, -2px); }\r\n    75% { transform: translate(-3px, -2px); }\r\n    100% { transform: translate(0); }\r\n}\r\n\r\n.footer-tagline {\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 4px;\r\n    margin-bottom: 50px;\r\n    background: #000;\r\n    color: #ff4c00;\r\n    padding: 5px 15px;\r\n}\r\n\r\n\/* FOOTER NAV *\/\r\n.footer-nav {\r\n    display: flex;\r\n    gap: 40px;\r\n    margin-bottom: 80px;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n}\r\n\r\n.footer-link {\r\n    text-decoration: none;\r\n    font-family: 'Syncopate', sans-serif;\r\n    color: #000;\r\n    font-weight: 800;\r\n    font-size: 15px;\r\n    text-transform: uppercase;\r\n    transition: all 0.3s;\r\n    border-bottom: 2px solid transparent;\r\n}\r\n\r\n.footer-link:hover {\r\n    border-bottom: 2px solid #000;\r\n    transform: translateY(-3px);\r\n}\r\n\r\n\/* BOTTOM BAR *\/\r\n.footer-bottom {\r\n    width: 100%;\r\n    border-top: 2px solid rgba(0, 0, 0, 0.2);\r\n    padding-top: 30px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    font-family: 'Syncopate', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.copyright { opacity: 0.8; }\r\n\r\n.disclaimer {\r\n    max-width: 450px;\r\n    text-align: right;\r\n    line-height: 1.6;\r\n    opacity: 0.7;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .footer-bottom {\r\n        flex-direction: column;\r\n        gap: 30px;\r\n        text-align: center;\r\n    }\r\n    .disclaimer { text-align: center; }\r\n    .footer-nav { gap: 20px; }\r\n}\r\n<\/style>\r\n\r\n<footer class=\"main-footer\">\r\n    <div class=\"vhs-grain-overlay\"><\/div>\r\n    <div class=\"vhs-tracking-line\"><\/div>\r\n\r\n    <div class=\"footer-container\">\r\n        <div class=\"footer-logo\">WAR BUT DRAMA<\/div>\r\n        <div class=\"footer-tagline\">TRANSMISSION OVER_<\/div>\r\n\r\n        <nav class=\"footer-nav\">\r\n            <a href=\"#\" class=\"footer-link\">Twitter<\/a>\r\n            <a href=\"#\" class=\"footer-link\">Telegram<\/a>\r\n            <a href=\"#\" class=\"footer-link\">Dexscreener<\/a>\r\n            <a href=\"#\" class=\"footer-link\">PUMP.FUN<\/a>\r\n        <\/nav>\r\n\r\n        <div class=\"footer-bottom\">\r\n            <div class=\"copyright\">\r\n                [ EST 2026 ] \/\/ $WARDRAMA PROJECT\r\n            <\/div>\r\n            <div class=\"disclaimer\">\r\n                The content of this broadcast is for entertainment purposes only. $WARDRAMA carries no financial value and is purely a tribute to the internet's obsession with chaos and narratives.\r\n            <\/div>\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>WAR BUT DRAMA Twitter Telegram Live Chart The internet knows the truth. Not every war is a war. Sometimes it&#8217;s just &#8220;drama&#8221;. CA : NULL Copy CA CONTRACT COPIED TO CLIPBOARD! [INTEL_LINK: ENABLED] [STATUS: MONITORING_DRAMA] Classified Information Every conflict today has two battlefields: The real one and The internet. Governments, influencers, media outlets, and anonymous [&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:\/\/warbutdrama.fun\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/warbutdrama.fun\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/warbutdrama.fun\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/warbutdrama.fun\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/warbutdrama.fun\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":100,"href":"https:\/\/warbutdrama.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":126,"href":"https:\/\/warbutdrama.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/126"}],"wp:attachment":[{"href":"https:\/\/warbutdrama.fun\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}