{"id":8,"date":"2026-02-22T21:48:47","date_gmt":"2026-02-22T21:48:47","guid":{"rendered":"https:\/\/punchkun.site\/?page_id=8"},"modified":"2026-02-22T23:13:08","modified_gmt":"2026-02-22T23:13:08","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/punchkun.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-cf284f9 e-con-full e-flex e-con e-parent\" data-id=\"cf284f9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9a2301 elementor-widget elementor-widget-html\" data-id=\"d9a2301\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Dela+Gothic+One&family=Plus+Jakarta+Sans:wght@600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* ================= LAYOUT DASAR ================= *\/\r\n    :root {\r\n        --text-color: #1e3a5f;\r\n        --glass-bg: rgba(255, 255, 255, 0.2);\r\n        --glass-border: rgba(255, 255, 255, 0.4);\r\n    }\r\n\r\n    .punch-nav {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        padding: 15px 5%;\r\n        background: transparent;\r\n        z-index: 9999;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .nav-logo {\r\n        font-family: 'Dela Gothic One', cursive;\r\n        font-size: 20px;\r\n        color: var(--text-color);\r\n        text-decoration: none;\r\n        white-space: nowrap;\r\n        z-index: 10001;\r\n    }\r\n\r\n    \/* ================= MENU DESKTOP ================= *\/\r\n    .nav-menu {\r\n        display: flex;\r\n        gap: 10px;\r\n        align-items: center;\r\n    }\r\n\r\n    .btn-glass {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-size: 11px;\r\n        font-weight: 800;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        text-decoration: none;\r\n        color: var(--text-color);\r\n        padding: 8px 14px;\r\n        background: var(--glass-bg);\r\n        backdrop-filter: blur(8px);\r\n        -webkit-backdrop-filter: blur(8px);\r\n        border: 1px solid var(--glass-border);\r\n        border-radius: 8px;\r\n        transition: all 0.3s ease;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .btn-glass:hover {\r\n        background: rgba(255, 255, 255, 0.4);\r\n        transform: translateY(-2px);\r\n    }\r\n\r\n    \/* ================= MOBILE MENU (Hamburger) ================= *\/\r\n    .menu-toggle {\r\n        display: none;\r\n        flex-direction: column;\r\n        gap: 5px;\r\n        cursor: pointer;\r\n        z-index: 10001;\r\n        padding: 10px;\r\n    }\r\n\r\n    .menu-toggle span {\r\n        width: 25px;\r\n        height: 2px;\r\n        background: var(--text-color);\r\n        transition: 0.3s;\r\n    }\r\n\r\n    @media (max-width: 850px) {\r\n        .menu-toggle { display: flex; }\r\n\r\n        .nav-menu {\r\n            position: fixed;\r\n            top: 0;\r\n            right: -100%;\r\n            height: 100vh;\r\n            width: 70%;\r\n            background: rgba(255, 255, 255, 0.9);\r\n            backdrop-filter: blur(20px);\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            box-shadow: -10px 0 30px rgba(0,0,0,0.05);\r\n        }\r\n\r\n        .nav-menu.active { right: 0; }\r\n\r\n        .btn-glass {\r\n            width: 70%;\r\n            text-align: center;\r\n            font-size: 14px;\r\n            padding: 15px;\r\n            background: white;\r\n            border: 1px solid rgba(0,0,0,0.05);\r\n        }\r\n\r\n        \/* Animasi Hamburger jadi X *\/\r\n        .active-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\n        .active-toggle span:nth-child(2) { opacity: 0; }\r\n        .active-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n    }\r\n\r\n    \/* ================= BACKGROUND PEGUNUNGAN ES ================= *\/\r\n    .bg-fixed {\r\n        position: fixed;\r\n        inset: 0;\r\n        z-index: -1;\r\n        background: linear-gradient(180deg, #d1f2ff 0%, #ffffff 100%);\r\n        overflow: hidden;\r\n    }\r\n\r\n    .cloud {\r\n        position: absolute;\r\n        background: white;\r\n        filter: blur(40px);\r\n        border-radius: 50%;\r\n        opacity: 0.6;\r\n        animation: moveClouds linear infinite;\r\n    }\r\n\r\n    @keyframes moveClouds {\r\n        from { transform: translateX(-120%); }\r\n        to { transform: translateX(120vw); }\r\n    }\r\n\r\n    .mountain {\r\n        position: absolute;\r\n        bottom: 0;\r\n        width: 100%;\r\n    }\r\n\r\n    .mt-1 {\r\n        height: 50vh;\r\n        background: #a5d8ff;\r\n        clip-path: polygon(0% 100%, 0% 60%, 15% 30%, 30% 65%, 45% 20%, 65% 55%, 80% 15%, 100% 50%, 100% 100%);\r\n        opacity: 0.4;\r\n    }\r\n\r\n    .mt-2 {\r\n        height: 35vh;\r\n        background: #74c0fc;\r\n        clip-path: polygon(0% 100%, 0% 80%, 20% 40%, 35% 85%, 50% 30%, 70% 80%, 85% 45%, 100% 80%, 100% 100%);\r\n        opacity: 0.6;\r\n    }\r\n\r\n    .mt-3 {\r\n        height: 20vh;\r\n        background: #ffffff;\r\n        clip-path: polygon(0% 100%, 0% 90%, 10% 65%, 25% 95%, 40% 55%, 60% 98%, 75% 60%, 90% 95%, 100% 85%, 100% 100%);\r\n        filter: drop-shadow(0 -5px 15px rgba(0,0,0,0.05));\r\n    }\r\n\r\n    \/* Penyesuaian Gunung di Mobile *\/\r\n    @media (max-width: 600px) {\r\n        .mt-1 { height: 35vh; }\r\n        .mt-2 { height: 25vh; }\r\n        .mt-3 { height: 15vh; }\r\n        .nav-logo { font-size: 18px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"bg-fixed\">\r\n    <div class=\"cloud\" style=\"width: 300px; height: 120px; top: 15%; animation-duration: 45s;\"><\/div>\r\n    <div class=\"cloud\" style=\"width: 200px; height: 80px; top: 35%; animation-duration: 30s; animation-delay: -5s;\"><\/div>\r\n    \r\n    <div class=\"mountain mt-1\"><\/div>\r\n    <div class=\"mountain mt-2\"><\/div>\r\n    <div class=\"mountain mt-3\"><\/div>\r\n<\/div>\r\n\r\n<nav class=\"punch-nav\">\r\n    <a href=\"#\" class=\"nav-logo\">\u30d1\u30f3\u30c1\u304f\u3093<\/a>\r\n    \r\n    <div class=\"menu-toggle\" id=\"mobile-toggle\">\r\n        <span><\/span>\r\n        <span><\/span>\r\n        <span><\/span>\r\n    <\/div>\r\n\r\n    <div class=\"nav-menu\" id=\"nav-list\">\r\n        <a href=\"#home\" class=\"btn-glass\">Home<\/a>\r\n        <a href=\"#about\" class=\"btn-glass\">About<\/a>\r\n        <a href=\"#how\" class=\"btn-glass\">Get $punchkun<\/a>\r\n        <a href=\"#join\" class=\"btn-glass\" style=\"background: rgba(15,20,25,0.05)\">X Community<\/a>\r\n    <\/div>\r\n<\/nav>\r\n\r\n<script>\r\n    const toggle = document.getElementById('mobile-toggle');\r\n    const menu = document.getElementById('nav-list');\r\n\r\n    toggle.addEventListener('click', () => {\r\n        menu.classList.toggle('active');\r\n        toggle.classList.toggle('active-toggle');\r\n    });\r\n\r\n    \/\/ Tutup menu jika link diklik (untuk mobile)\r\n    document.querySelectorAll('.btn-glass').forEach(link => {\r\n        link.addEventListener('click', () => {\r\n            menu.classList.remove('active');\r\n            toggle.classList.remove('active-toggle');\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-11c6658 e-con-full e-flex e-con e-parent\" data-id=\"11c6658\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f682f1 elementor-widget elementor-widget-html\" data-id=\"3f682f1\" 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    \/* Container Utama *\/\r\n    .epic-ice-bg {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100vh;\r\n        z-index: -1;\r\n        background: linear-gradient(180deg, #87CEEB 0%, #c9e8f5 50%, #eaf5fa 100%);\r\n        overflow: hidden;\r\n        pointer-events: none; \/* Aman untuk klik Elementor *\/\r\n    }\r\n\r\n    \/* Efek Salju Jatuh *\/\r\n    .snow-layer {\r\n        position: absolute;\r\n        top: -100%;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 200%;\r\n        background-image: radial-gradient(circle at 4px 4px, rgba(255,255,255,0.8) 1.5px, transparent 0),\r\n                          radial-gradient(circle at 8px 8px, rgba(255,255,255,0.5) 1px, transparent 0);\r\n        background-size: 100px 100px, 60px 60px;\r\n        animation: snowDrop 30s linear infinite;\r\n        opacity: 0.6;\r\n    }\r\n\r\n    @keyframes snowDrop {\r\n        0% { transform: translateY(0); }\r\n        100% { transform: translateY(50%); }\r\n    }\r\n\r\n    \/* Awan Organik (Tersebar Vertikal) *\/\r\n    .fluffy-cloud {\r\n        position: absolute;\r\n        background: rgba(255, 255, 255, 0.85);\r\n        border-radius: 50%;\r\n        width: 60px; \r\n        height: 60px;\r\n        \/* Membentuk gumpalan awan acak dengan box-shadow *\/\r\n        box-shadow: \r\n            40px 15px 0 10px rgba(255, 255, 255, 0.85), \r\n            85px 5px 0 5px rgba(255, 255, 255, 0.85), \r\n            30px -15px 0 15px rgba(255, 255, 255, 0.85), \r\n            70px -15px 0 20px rgba(255, 255, 255, 0.85);\r\n        filter: blur(4px); \/* Efek lembut\/kabut *\/\r\n        left: -300px; \/* Mulai dari luar layar *\/\r\n    }\r\n\r\n    \/* Posisi & Kecepatan Awan Random *\/\r\n    .fc-1 { top: 8%; transform: scale(0.7); animation: drift 55s linear infinite; }\r\n    .fc-2 { top: 20%; transform: scale(1.1); animation: drift 70s linear infinite 15s; }\r\n    .fc-3 { top: 45%; transform: scale(0.9); animation: drift 60s linear infinite 5s; opacity: 0.7; }\r\n    .fc-4 { top: 60%; transform: scale(1.4); animation: drift 85s linear infinite 25s; opacity: 0.6; } \/* Kabut tengah *\/\r\n    .fc-5 { top: 75%; transform: scale(1.8); animation: drift 100s linear infinite 10s; opacity: 0.5; } \/* Kabut bawah *\/\r\n    .fc-6 { top: 88%; transform: scale(2.2); animation: drift 120s linear infinite 35s; opacity: 0.4; } \/* Kabut tanah *\/\r\n\r\n    @keyframes drift {\r\n        to { left: 110%; }\r\n    }\r\n\r\n    \/* Pegunungan Detail (Layer + 3D Shadow) *\/\r\n    .ice-mountain {\r\n        position: absolute;\r\n        bottom: 0;\r\n        width: 110%; \/* Lebih lebar agar bayangan tidak terpotong *\/\r\n        left: -5%;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    \/* --- LAYER 1: Paling Belakang --- *\/\r\n    .m1 {\r\n        height: 65vh;\r\n        background: #85b8cb;\r\n        clip-path: polygon(0 100%, 0 45%, 6% 38%, 13% 52%, 20% 28%, 28% 48%, 35% 32%, 45% 65%, 52% 42%, 60% 55%, 72% 20%, 82% 48%, 90% 35%, 96% 45%, 100% 30%, 100% 100%);\r\n    }\r\n\r\n    \/* --- LAYER 2: Tengah Belakang --- *\/\r\n    .m2-shadow {\r\n        height: 50vh;\r\n        background: #5e95af;\r\n        transform: translateX(1px); \/* Geser ke kanan untuk efek 3D tebing es *\/\r\n        clip-path: polygon(0 100%, 0 60%, 10% 45%, 18% 75%, 26% 35%, 36% 55%, 46% 30%, 56% 70%, 66% 40%, 76% 55%, 86% 25%, 96% 55%, 100% 45%, 100% 100%);\r\n    }\r\n    .m2 {\r\n        height: 50vh;\r\n        background: linear-gradient(180deg, #99cce6 0%, #70a6c2 100%);\r\n        clip-path: polygon(0 100%, 0 60%, 10% 45%, 18% 75%, 26% 35%, 36% 55%, 46% 30%, 56% 70%, 66% 40%, 76% 55%, 86% 25%, 96% 55%, 100% 45%, 100% 100%);\r\n    }\r\n\r\n    \/* --- LAYER 3: Tengah Depan --- *\/\r\n    .m3-shadow {\r\n        height: 35vh;\r\n        background: #8cb9d1;\r\n        transform: translateX(8px);\r\n        clip-path: polygon(0 100%, 0 75%, 14% 45%, 26% 85%, 38% 40%, 50% 80%, 64% 45%, 76% 85%, 88% 40%, 100% 65%, 100% 100%);\r\n    }\r\n    .m3 {\r\n        height: 35vh;\r\n        background: linear-gradient(180deg, #cde6f5 0%, #9bc4df 100%);\r\n        clip-path: polygon(0 100%, 0 75%, 14% 45%, 26% 85%, 38% 40%, 50% 80%, 64% 45%, 76% 85%, 88% 40%, 100% 65%, 100% 100%);\r\n    }\r\n\r\n    \/* --- LAYER 4: Paling Depan (Salju Murni) --- *\/\r\n    .m4-shadow {\r\n        height: 20vh;\r\n        background: #cbe2f0;\r\n        transform: translateX(12px);\r\n        clip-path: polygon(0 100%, 0 90%, 12% 60%, 25% 95%, 40% 55%, 55% 90%, 70% 60%, 85% 95%, 100% 70%, 100% 100%);\r\n    }\r\n    .m4 {\r\n        height: 20vh;\r\n        background: linear-gradient(180deg, #ffffff 0%, #e1f0fa 100%);\r\n        clip-path: polygon(0 100%, 0 90%, 12% 60%, 25% 95%, 40% 55%, 55% 90%, 70% 60%, 85% 95%, 100% 70%, 100% 100%);\r\n    }\r\n\r\n    \/* Responsif Mobile (Kurangi tinggi gunung agar konten terbaca) *\/\r\n    @media (max-width: 768px) {\r\n        .m1 { height: 45vh; }\r\n        .m2, .m2-shadow { height: 35vh; }\r\n        .m3, .m3-shadow { height: 25vh; }\r\n        .m4, .m4-shadow { height: 15vh; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"epic-ice-bg\">\r\n    <div class=\"snow-layer\"><\/div>\r\n\r\n    <div class=\"fluffy-cloud fc-1\"><\/div>\r\n    <div class=\"fluffy-cloud fc-2\"><\/div>\r\n\r\n    <div class=\"ice-mountain m1\"><\/div>\r\n\r\n    <div class=\"fluffy-cloud fc-3\"><\/div>\r\n\r\n    <div class=\"ice-mountain m2-shadow\"><\/div>\r\n    <div class=\"ice-mountain m2\"><\/div>\r\n\r\n    <div class=\"fluffy-cloud fc-4\"><\/div>\r\n\r\n    <div class=\"ice-mountain m3-shadow\"><\/div>\r\n    <div class=\"ice-mountain m3\"><\/div>\r\n\r\n    <div class=\"fluffy-cloud fc-5\"><\/div>\r\n\r\n    <div class=\"ice-mountain m4-shadow\"><\/div>\r\n    <div class=\"ice-mountain m4\"><\/div>\r\n\r\n    <div class=\"fluffy-cloud fc-6\"><\/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-75b1ace e-con-full e-flex e-con e-parent\" data-id=\"75b1ace\" data-element_type=\"container\" id=\"home\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb40c0a elementor-widget elementor-widget-html\" data-id=\"cb40c0a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    \/* Hero Section Container *\/\r\n    .hero-section {\r\n        position: relative;\r\n        min-height: 100vh;\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: 10px 20px 60px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* Judul Hero *\/\r\n    .hero-title {\r\n        font-family: 'Dela Gothic One', cursive;\r\n        font-size: clamp(2.5rem, 6vw, 4.5rem);\r\n        color: #1e3a5f;\r\n        max-width: 900px;\r\n        line-height: 1.1;\r\n        margin-bottom: 40px;\r\n        text-shadow: 0 10px 20px rgba(255, 255, 255, 0.5);\r\n        animation: fadeInUp 1s ease-out;\r\n    }\r\n\r\n    \/* Button Group (Twitter, Telegram, etc) *\/\r\n    .hero-buttons {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 12px;\r\n        margin-bottom: 40px;\r\n        animation: fadeInUp 1.2s ease-out;\r\n    }\r\n\r\n    .btn-social {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-weight: 800;\r\n        font-size: 13px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        text-decoration: none;\r\n        color: #1e3a5f;\r\n        padding: 12px 24px;\r\n        background: rgba(255, 255, 255, 0.4);\r\n        backdrop-filter: blur(5px);\r\n        -webkit-backdrop-filter: blur(5px);\r\n        border: 1px solid rgba(255, 255, 255, 0.5);\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .btn-social:hover {\r\n        background: rgba(255, 255, 255, 0.8);\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 10px 20px rgba(30, 58, 95, 0.1);\r\n    }\r\n\r\n    \/* Highlight Swap Now *\/\r\n    .btn-swap {\r\n        background: #1e3a5f !important;\r\n        color: #ffffff !important;\r\n        border: none;\r\n    }\r\n\r\n    \/* CA Box Styling *\/\r\n    .ca-container {\r\n        animation: fadeInUp 1.4s ease-out;\r\n    }\r\n\r\n    .ca-box {\r\n        display: flex;\r\n        align-items: center;\r\n        background: rgba(255, 255, 255, 0.2);\r\n        backdrop-filter: blur(10px);\r\n        border: 1px solid rgba(255, 255, 255, 0.5);\r\n        border-radius: 50px;\r\n        padding: 8px 8px 8px 25px;\r\n        max-width: 100%;\r\n    }\r\n\r\n    .ca-text {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-weight: 600;\r\n        font-size: 14px;\r\n        color: #1e3a5f;\r\n        margin-right: 20px;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n        white-space: nowrap;\r\n        max-width: 250px;\r\n    }\r\n\r\n    .copy-btn {\r\n        background: #1e3a5f;\r\n        color: white;\r\n        border: none;\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .copy-btn:hover {\r\n        transform: scale(1.1);\r\n        background: #3498db;\r\n    }\r\n\r\n    \/* Animations *\/\r\n    @keyframes fadeInUp {\r\n        from { opacity: 0; transform: translateY(30px); }\r\n        to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    \/* Mobile Adjustments *\/\r\n    @media (max-width: 768px) {\r\n        .hero-title { font-size: 2.2rem; }\r\n        .btn-social { width: calc(50% - 10px); font-size: 11px; padding: 12px 10px; justify-content: center; }\r\n        .ca-text { max-width: 150px; font-size: 12px; }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"hero-section\">\r\n    <h1 class=\"hero-title\">Even the Smallest Hearts Deserve a Sanctuary.<\/h1>\r\n\r\n    <div class=\"hero-buttons\">\r\n        <a href=\"#\" class=\"btn-social\">\r\n            <i class=\"fab fa-x-twitter\"><\/i> Twitter\r\n        <\/a>\r\n        <a href=\"#\" class=\"btn-social\">\r\n            <i class=\"fab fa-telegram\"><\/i> Telegram\r\n        <\/a>\r\n        <a href=\"#\" class=\"btn-social\">\r\n            <i class=\"fas fa-chart-line\"><\/i> Chart\r\n        <\/a>\r\n        <a href=\"#\" class=\"btn-social btn-swap\">\r\n            <i class=\"fas fa-right-left\"><\/i> Buy<\/a>\r\n    <\/div>\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()\" title=\"Copy Address\">\r\n                <i class=\"far fa-copy\" id=\"copyIcon\"><\/i>\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    function copyCA() {\r\n        const caText = document.getElementById('caValue').innerText;\r\n        const copyIcon = document.getElementById('copyIcon');\r\n        \r\n        navigator.clipboard.writeText(caText).then(() => {\r\n            \/\/ Feedback Visual saat berhasil copy\r\n            copyIcon.className = 'fas fa-check';\r\n            setTimeout(() => {\r\n                copyIcon.className = 'far fa-copy';\r\n            }, 2000);\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-2ae122a e-con-full e-flex e-con e-parent\" data-id=\"2ae122a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-18b1744 elementor-widget elementor-widget-html\" data-id=\"18b1744\" 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    .marquee-wrapper {\r\n        width: 100%;\r\n        overflow: hidden;\r\n        padding: 40px 0;\r\n        background: transparent;\r\n    }\r\n\r\n    .marquee-track {\r\n        display: flex;\r\n        align-items: center; \/* Biar gambar beda tinggi tetap sejajar tengah *\/\r\n        gap: 30px; \/* Jarak antar card *\/\r\n        width: max-content;\r\n        animation: scrollX 20s linear infinite;\r\n    }\r\n\r\n    \/* Card menyesuaikan konten *\/\r\n    .glass-card {\r\n        flex: 0 0 auto;\r\n        padding: 15px; \/* Spasi antara gambar dan tepi card *\/\r\n        background: rgba(255, 255, 255, 0.2);\r\n        backdrop-filter: blur(8px);\r\n        -webkit-backdrop-filter: blur(8px);\r\n        border: 1px solid rgba(255, 255, 255, 0.4);\r\n        border-radius: 20px;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n\r\n    \/* Gambar menyesuaikan ukuran aslinya tapi dibatasi max-height agar rapi *\/\r\n    .glass-card img {\r\n        height: 180px; \/* Ukuran dasar di desktop *\/\r\n        width: auto;\r\n        display: block;\r\n        object-fit: contain;\r\n    }\r\n\r\n    @keyframes scrollX {\r\n        0% { transform: translateX(0); }\r\n        100% { transform: translateX(-50%); } \/* Geser setengah total lebar (karena diduplikasi) *\/\r\n    }\r\n\r\n    \/* Responsive Mobile *\/\r\n    @media (max-width: 768px) {\r\n        .glass-card { padding: 10px; }\r\n        .glass-card img { height: 120px; } \/* Lebih kecil di HP *\/\r\n        .marquee-track { gap: 15px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"marquee-wrapper\">\r\n    <div class=\"marquee-track\">\r\n        <div class=\"glass-card\"><img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/Asset-5.png\"><\/div>\r\n        <div class=\"glass-card\"><img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/Asset-6.png\"><\/div>\r\n        <div class=\"glass-card\"><img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/Asset-7.png\"><\/div>\r\n        <div class=\"glass-card\"><img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/Asset-8.png\"><\/div>\r\n\r\n        <div class=\"glass-card\"><img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/Asset-5.png\"><\/div>\r\n        <div class=\"glass-card\"><img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/Asset-6.png\"><\/div>\r\n        <div class=\"glass-card\"><img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/Asset-7.png\"><\/div>\r\n        <div class=\"glass-card\"><img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/Asset-8.png\"><\/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-d407db0 e-con-full e-flex e-con e-parent\" data-id=\"d407db0\" data-element_type=\"container\" id=\"about\">\n\t\t\t\t<div class=\"elementor-element elementor-element-32feeb8 elementor-widget elementor-widget-html\" data-id=\"32feeb8\" 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    .about-section {\r\n        position: relative;\r\n        padding: 80px 5%;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        min-height: 70vh;\r\n        z-index: 10;\r\n    }\r\n\r\n    .about-container {\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        gap: 60px;\r\n        max-width: 1100px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        border: 1px solid rgba(255, 255, 255, 0.3);\r\n        padding: 60px;\r\n        border-radius: 40px;\r\n    }\r\n\r\n    \/* Efek pada Gambar *\/\r\n    .about-visual {\r\n        flex: 1;\r\n        position: relative;\r\n    }\r\n\r\n    .about-visual img {\r\n        width: 100%;\r\n        max-width: 380px;\r\n        border-radius: 25px;\r\n        \/* Efek bayangan berpendar lembut *\/\r\n        box-shadow: 0 0 30px rgba(135, 206, 235, 0.3);\r\n        animation: softGlow 4s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes softGlow {\r\n        0%, 100% { box-shadow: 0 0 20px rgba(135, 206, 235, 0.2); transform: scale(1); }\r\n        50% { box-shadow: 0 0 50px rgba(135, 206, 235, 0.5); transform: scale(1.02); }\r\n    }\r\n\r\n    \/* Efek pada Teks *\/\r\n    .about-content {\r\n        flex: 1.5;\r\n    }\r\n\r\n    .about-title {\r\n        font-family: 'Dela Gothic One', cursive;\r\n        font-size: clamp(26px, 4vw, 40px);\r\n        color: #1e3a5f;\r\n        margin-bottom: 25px;\r\n        line-height: 1.2;\r\n        \/* Efek gradient text *\/\r\n        background: linear-gradient(135deg, #1e3a5f 0%, #3498db 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        position: relative;\r\n    }\r\n\r\n    .about-description {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-size: 16px;\r\n        line-height: 1.8;\r\n        color: #2c3e50;\r\n        font-weight: 500;\r\n        opacity: 0.9;\r\n        border-left: 3px solid rgba(52, 152, 219, 0.3);\r\n        padding-left: 20px;\r\n    }\r\n\r\n    \/* Mobile *\/\r\n    @media (max-width: 900px) {\r\n        .about-container {\r\n            flex-direction: column;\r\n            text-align: center;\r\n            padding: 40px 20px;\r\n        }\r\n        .about-description {\r\n            border-left: none;\r\n            padding-left: 0;\r\n            border-top: 1px solid rgba(52, 152, 219, 0.2);\r\n            padding-top: 20px;\r\n        }\r\n        .about-visual img {\r\n            max-width: 280px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"about-section\">\r\n    <div class=\"about-container\">\r\n        <div class=\"about-visual\">\r\n            <img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/punch-the-monkey.gif\" alt=\"Punch-kun\">\r\n        <\/div>\r\n\r\n        <div class=\"about-content\">\r\n            <h2 class=\"about-title\">About Punch-kun<br> \u30d1\u30f3\u30c1\u304f\u3093<\/h2>\r\n            <div class=\"about-description\">\r\n                Punch-kun was born alone, rejected at birth and left without comfort. In a quiet sanctuary, he found warmth in a simple plush companion he refused to let go. \r\n                <br><br>\r\n                His story touched millions \u2014 a reminder that even the smallest hearts seek love, safety, and belonging. <strong>$PUNCHKUN<\/strong> honors resilience, tenderness, and the bond that carries us through.\r\n            <\/div>\r\n        <\/div>\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-e77fe8f e-con-full e-flex e-con e-parent\" data-id=\"e77fe8f\" data-element_type=\"container\" id=\"how\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0b1e41 elementor-widget elementor-widget-html\" data-id=\"a0b1e41\" 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    .buy-section {\r\n        padding: 80px 5%;\r\n        text-align: center;\r\n        z-index: 10;\r\n        position: relative;\r\n    }\r\n\r\n    .buy-title {\r\n        font-family: 'Dela Gothic One', cursive;\r\n        font-size: clamp(24px, 4vw, 38px);\r\n        line-height: 2em;\r\n        color: #1e3a5f;\r\n        margin-bottom: 50px;\r\n        background: linear-gradient(135deg, #1e3a5f 0%, #3498db 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n    }\r\n\r\n    \/* Container untuk 2 Card *\/\r\n    .buy-grid {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 30px;\r\n        max-width: 1000px;\r\n        margin: 0 auto 50px;\r\n    }\r\n\r\n    \/* Card Styling *\/\r\n    .step-card {\r\n        flex: 1;\r\n        background: rgba(255, 255, 255, 0.15);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        border: 1px solid rgba(255, 255, 255, 0.4);\r\n        padding: 40px 30px;\r\n        border-radius: 30px;\r\n        text-align: left;\r\n        position: relative;\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .step-number {\r\n        font-family: 'Dela Gothic One', cursive;\r\n        font-size: 40px;\r\n        color: rgba(52, 152, 219, 0.2);\r\n        position: absolute;\r\n        top: 20px;\r\n        right: 30px;\r\n    }\r\n\r\n    .step-card h3 {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-weight: 800;\r\n        font-size: 20px;\r\n        color: #1e3a5f;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .step-card p {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-size: 15px;\r\n        line-height: 1.6;\r\n        color: #2c3e50;\r\n        font-weight: 500;\r\n    }\r\n\r\n    \/* CTA Button *\/\r\n    .buy-now-btn {\r\n        display: inline-block;\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-weight: 800;\r\n        font-size: 16px;\r\n        color: #fff;\r\n        background: #1e3a5f;\r\n        padding: 18px 45px;\r\n        border-radius: 50px;\r\n        text-decoration: none;\r\n        box-shadow: 0 10px 20px rgba(30, 58, 95, 0.2);\r\n        transition: all 0.3s ease;\r\n        border: 2px solid transparent;\r\n    }\r\n\r\n    .buy-now-btn:hover {\r\n        transform: translateY(-5px);\r\n        background: #3498db;\r\n        box-shadow: 0 15px 30px rgba(52, 152, 219, 0.3);\r\n    }\r\n\r\n    \/* Mobile Responsive *\/\r\n    @media (max-width: 768px) {\r\n        .buy-grid {\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n        .step-card {\r\n            width: 100%;\r\n            max-width: 400px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"buy-section\">\r\n    <h2 class=\"buy-title\">Begin Your Journey<\/h2>\r\n\r\n    <div class=\"buy-grid\">\r\n        <div class=\"step-card\">\r\n            <div class=\"step-number\">01<\/div>\r\n            <h3>1. Prepare Your Pocket<\/h3>\r\n            <p>Set up a Solana wallet and place a little SOL inside \u2014 this will be your bridge into Punch-kun\u2019s world.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"step-card\">\r\n            <div class=\"step-number\">02<\/div>\r\n            <h3>2. Welcome Punch-kun<\/h3>\r\n            <p>Visit a Solana swap platform, enter the official $PUNCHKUN address, and exchange your SOL to bring Punch-kun home.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <a href=\"#\" class=\"buy-now-btn\">BUY $PUNCHKUN NOW<\/a>\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-159410e e-con-full e-flex e-con e-parent\" data-id=\"159410e\" data-element_type=\"container\" id=\"join\">\n\t\t\t\t<div class=\"elementor-element elementor-element-94a8cbb elementor-widget elementor-widget-html\" data-id=\"94a8cbb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .community-section {\r\n        position: relative;\r\n        padding: 100px 5%;\r\n        overflow: hidden;\r\n        z-index: 10;\r\n    }\r\n\r\n    .community-wrapper {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 40px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        border: 1px solid rgba(255, 255, 255, 0.3);\r\n        border-radius: 50px;\r\n        padding: 60px;\r\n        position: relative;\r\n    }\r\n\r\n    \/* Bagian Teks *\/\r\n    .comm-text {\r\n        flex: 1.2;\r\n        text-align: left;\r\n    }\r\n\r\n    .comm-title {\r\n        font-family: 'Dela Gothic One', cursive;\r\n        font-size: clamp(28px, 4vw, 45px);\r\n        color: #1e3a5f;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .comm-desc {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-size: 17px;\r\n        line-height: 1.8;\r\n        color: #2c3e50;\r\n        margin-bottom: 35px;\r\n        font-weight: 500;\r\n    }\r\n\r\n    \/* Button Group *\/\r\n    .comm-btns {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 15px;\r\n    }\r\n\r\n    .btn-join {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-weight: 800;\r\n        font-size: 14px;\r\n        text-decoration: none;\r\n        padding: 14px 28px;\r\n        border-radius: 15px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n\r\n    \/* Warna khusus Button *\/\r\n    .btn-x-comm { background: #000; color: #fff; }\r\n    .btn-x { background: rgba(0,0,0,0.1); color: #000; border: 1px solid rgba(0,0,0,0.1); }\r\n    .btn-tg { background: #24A1DE; color: #fff; }\r\n\r\n    .btn-join:hover {\r\n        transform: scale(1.05) translateY(-5px);\r\n        box-shadow: 0 15px 30px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    \/* Bagian Gambar Asset-9 *\/\r\n    .comm-visual {\r\n        flex: 0.8;\r\n        display: flex;\r\n        justify-content: center;\r\n        position: relative;\r\n    }\r\n\r\n    .comm-visual img {\r\n        width: 130%; \/* Buat agak besar supaya menonjol *\/\r\n        max-width: 500px;\r\n        filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));\r\n        transition: transform 0.5s ease;\r\n    }\r\n\r\n    \/* Efek Interaktif Gambar *\/\r\n    .community-wrapper:hover .comm-visual img {\r\n        transform: rotate(-3deg) scale(1.05);\r\n    }\r\n\r\n    \/* Mobile Responsive *\/\r\n    @media (max-width: 991px) {\r\n        .community-wrapper {\r\n            flex-direction: column;\r\n            text-align: center;\r\n            padding: 40px 25px;\r\n        }\r\n        .comm-text { text-align: center; }\r\n        .comm-btns { justify-content: center; }\r\n        .comm-visual img { width: 100%; margin-top: 20px; }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"community-section\">\r\n    <div class=\"community-wrapper\">\r\n        \r\n        <div class=\"comm-text\">\r\n            <h2 class=\"comm-title\">Find Your Place Here<\/h2>\r\n            <p class=\"comm-desc\">\r\n                Punch-kun\u2019s story was never meant to be watched from afar. It\u2019s meant to be shared.\r\n                <br><br>\r\n                Step into a circle of kind hearts, quiet strength, and people who believe even the smallest soul deserves warmth. Here, we celebrate softness, resilience, and the simple comfort of belonging.\r\n                <br><br>\r\n                <strong>Come sit with us. Stay awhile. Grow together. \ud83d\udc12\u2728<\/strong>\r\n            <\/p>\r\n\r\n            <div class=\"comm-btns\">\r\n                <a href=\"#\" class=\"btn-join btn-x-comm\">\r\n                    <i class=\"fab fa-x-twitter\"><\/i> X Community\r\n                <\/a>\r\n                <a href=\"#\" class=\"btn-join btn-x\">\r\n                    <i class=\"fab fa-x-twitter\"><\/i> X\r\n                <\/a>\r\n                <a href=\"#\" class=\"btn-join btn-tg\">\r\n                    <i class=\"fab fa-telegram-plane\"><\/i> Telegram\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"comm-visual\">\r\n            <img decoding=\"async\" src=\"http:\/\/punchkun.site\/wp-content\/uploads\/2026\/02\/Asset-9.png\" alt=\"Punch-kun Community\">\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    \/\/ Interaksi simpel: Elemen muncul saat scroll (Observer)\r\n    const observerOptions = { threshold: 0.2 };\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.style.opacity = \"1\";\r\n                entry.target.style.transform = \"translateY(0)\";\r\n            }\r\n        });\r\n    }, observerOptions);\r\n\r\n    const wrapper = document.querySelector('.community-wrapper');\r\n    wrapper.style.opacity = \"0\";\r\n    wrapper.style.transform = \"translateY(50px)\";\r\n    wrapper.style.transition = \"all 0.8s ease-out\";\r\n    observer.observe(wrapper);\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-39f8403 e-con-full e-flex e-con e-parent\" data-id=\"39f8403\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe0550d elementor-widget elementor-widget-html\" data-id=\"fe0550d\" 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    .punch-footer-minimal {\r\n        padding: 80px 5% 50px;\r\n        text-align: center;\r\n        position: relative;\r\n        z-index: 10;\r\n        background: transparent;\r\n    }\r\n\r\n    .footer-divider {\r\n        width: 60px;\r\n        height: 1.5px;\r\n        background: rgba(30, 58, 95, 0.15);\r\n        margin: 0 auto 40px;\r\n    }\r\n\r\n    .f-logo {\r\n        font-family: 'Dela Gothic One', cursive;\r\n        font-size: 26px;\r\n        color: #1e3a5f;\r\n        text-decoration: none;\r\n        display: block;\r\n        margin-bottom: 12px;\r\n        letter-spacing: -0.5px;\r\n    }\r\n\r\n    .f-tagline {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-size: 14px;\r\n        color: #5d7899;\r\n        font-weight: 500;\r\n        margin-bottom: 40px;\r\n        opacity: 0.8;\r\n    }\r\n\r\n    .f-copy {\r\n        font-family: 'Plus Jakarta Sans', sans-serif;\r\n        font-size: 11px;\r\n        color: rgba(30, 58, 95, 0.4);\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n    }\r\n<\/style>\r\n\r\n<footer class=\"punch-footer-minimal\">\r\n    <div class=\"footer-divider\"><\/div>\r\n    \r\n    <div class=\"f-logo\">\u30d1\u30f3\u30c1\u304f\u3093<\/div>\r\n    \r\n    <p class=\"f-tagline\">Even the smallest hearts deserve a sanctuary.<\/p>\r\n    \r\n    <div class=\"f-copy\">\r\n        &copy; 2026 PUNCH-KUN. ALL RIGHTS RESERVED.\r\n    <\/div>\r\n<\/footer>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08b1668 elementor-widget elementor-widget-html\" data-id=\"08b1668\" 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    \/* Styling Tombol Back to Top *\/\r\n    #backToTop {\r\n        position: fixed;\r\n        bottom: 30px;\r\n        right: 30px;\r\n        width: 50px;\r\n        height: 50px;\r\n        background: rgba(255, 255, 255, 0.2);\r\n        backdrop-filter: blur(10px);\r\n        -webkit-backdrop-filter: blur(10px);\r\n        border: 1px solid rgba(255, 255, 255, 0.4);\r\n        border-radius: 50%;\r\n        color: #1e3a5f;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 20px;\r\n        cursor: pointer;\r\n        z-index: 9999;\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    #backToTop:hover {\r\n        background: rgba(255, 255, 255, 0.5);\r\n        transform: translateY(-5px);\r\n        color: #3498db;\r\n    }\r\n\r\n    \/* Munculkan tombol saat class 'show' aktif *\/\r\n    #backToTop.show {\r\n        opacity: 1;\r\n        visibility: visible;\r\n    }\r\n\r\n    \/* Mobile Adjustment *\/\r\n    @media (max-width: 768px) {\r\n        #backToTop {\r\n            bottom: 20px;\r\n            right: 20px;\r\n            width: 45px;\r\n            height: 45px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"backToTop\" onclick=\"scrollToTop()\">\r\n    <i class=\"fas fa-chevron-up\"><\/i>\r\n<\/div>\r\n\r\n<script>\r\n    const backToTopBtn = document.getElementById('backToTop');\r\n\r\n    \/\/ Pantau scroll user\r\n    window.addEventListener('scroll', () => {\r\n        if (window.pageYOffset > 400) {\r\n            backToTopBtn.classList.add('show');\r\n        } else {\r\n            backToTopBtn.classList.remove('show');\r\n        }\r\n    });\r\n\r\n    \/\/ Fungsi scroll ke atas yang smooth\r\n    function scrollToTop() {\r\n        window.scrollTo({\r\n            top: 0,\r\n            behavior: 'smooth'\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u30d1\u30f3\u30c1\u304f\u3093 Home About Get $punchkun X Community Even the Smallest Hearts Deserve a Sanctuary. Twitter Telegram Chart Buy CA : NULL About Punch-kun \u30d1\u30f3\u30c1\u304f\u3093 Punch-kun was born alone, rejected at birth and left without comfort. In a quiet sanctuary, he found warmth in a simple plush companion he refused to let go. His story touched [&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:\/\/punchkun.site\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/punchkun.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/punchkun.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/punchkun.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/punchkun.site\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":19,"href":"https:\/\/punchkun.site\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/punchkun.site\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/punchkun.site\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}