{"id":8,"date":"2026-03-10T22:14:05","date_gmt":"2026-03-10T22:14:05","guid":{"rendered":"https:\/\/inokumi.online\/?page_id=8"},"modified":"2026-03-30T10:39:02","modified_gmt":"2026-03-30T10:39:02","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/inokumi.online\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n InoKumi Navigation<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Reset CSS *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', sans-serif;\r\n }\r\n\r\n body {\r\n \/* Background simulasi langit biru anime yang kita buat *\/\r\n background: linear-gradient(to bottom, #87CEEB, #E0F7FA);\r\n min-height: 100vh;\r\n }\r\n\r\n \/* Navbar Styling *\/\r\n .navbar {\r\n position: fixed;\r\n top: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 90%;\r\n max-width: 1200px;\r\n background: rgba(255, 255, 255, 0.2);\r\n backdrop-filter: blur(10px); \/* Efek Glassmorphism *\/\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 50px;\r\n padding: 10px 30px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n z-index: 1000;\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .logo {\r\n font-size: 24px;\r\n font-weight: 700;\r\n color: #1A5F7A;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .logo span {\r\n color: #FF69B4; \/* Warna pink untuk Kumi si kucing *\/\r\n }\r\n\r\n \/* Desktop Menu *\/\r\n .nav-links {\r\n display: flex;\r\n list-style: none;\r\n gap: 25px;\r\n align-items: center;\r\n }\r\n\r\n .nav-links li a {\r\n text-decoration: none;\r\n color: #1A5F7A;\r\n font-weight: 500;\r\n font-size: 15px;\r\n transition: 0.3s;\r\n position: relative;\r\n }\r\n\r\n \/* Hover Animation: Underline Glow *\/\r\n .nav-links li a::after {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 2px;\r\n bottom: -5px;\r\n left: 0;\r\n background-color: #FF69B4;\r\n transition: 0.3s ease-in-out;\r\n box-shadow: 0 0 10px #FF69B4;\r\n }\r\n\r\n .nav-links li a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n .nav-links li a:hover {\r\n color: #000;\r\n }\r\n\r\n \/* Button Buy *\/\r\n .btn-buy {\r\n background: #1A5F7A;\r\n color: #fff !important;\r\n padding: 10px 25px;\r\n border-radius: 30px;\r\n font-weight: 600;\r\n transition: 0.4s;\r\n border: none;\r\n box-shadow: 0 4px 15px rgba(26, 95, 122, 0.3);\r\n }\r\n\r\n .btn-buy:hover {\r\n background: #FF69B4;\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);\r\n }\r\n\r\n \/* Mobile Menu Toggle *\/\r\n .mobile-toggle {\r\n display: none;\r\n cursor: pointer;\r\n flex-direction: column;\r\n gap: 5px;\r\n }\r\n\r\n .mobile-toggle span {\r\n width: 25px;\r\n height: 3px;\r\n background: #1A5F7A;\r\n border-radius: 5px;\r\n transition: 0.3s;\r\n }\r\n\r\n \/* Responsive Breakpoint *\/\r\n @media (max-width: 992px) {\r\n .nav-links {\r\n position: absolute;\r\n top: 80px;\r\n right: -100%; \/* Sembunyi di luar layar *\/\r\n flex-direction: column;\r\n background: rgba(255, 255, 255, 0.95);\r\n backdrop-filter: blur(15px);\r\n width: 250px;\r\n padding: 40px;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n transition: 0.5s ease-in-out;\r\n }\r\n\r\n .nav-links.active {\r\n right: 0; \/* Muncul saat aktif *\/\r\n }\r\n\r\n .mobile-toggle {\r\n display: flex;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <nav class=\"navbar\">\r\n <a href=\"#\" class=\"logo\">InoKumi<\/span><\/a>\r\n\r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a href=\"#lore\">The Lore<\/a><\/li>\r\n <li><a href=\"#inokomics\">InoKomics<\/a><\/li>\r\n <li><a href=\"#bluemap\">Blue Map<\/a><\/li>\r\n <li><a href=\"#faq\">FAQ<\/a><\/li>\r\n <li><a href=\"#join\" class=\"btn-buy\">Join the InoKumi<\/a><\/li>\r\n <\/ul>\r\n\r\n <div class=\"mobile-toggle\" onclick=\"toggleMenu()\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/div>\r\n <\/nav>\r\n\r\n <script>\r\n function toggleMenu() {\r\n const navLinks = document.getElementById('navLinks');\r\n navLinks.classList.toggle('active');\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d0e465c e-con-full e-flex e-con e-child\" data-id=\"d0e465c\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcab6ec elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"dcab6ec\" 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=Poppins:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Hero Section Base *\/\r\n .hero-section {\r\n padding-top: 40px; \r\n padding-bottom: 60px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 80vh;\r\n font-family: 'Poppins', sans-serif;\r\n overflow: hidden;\r\n background: transparent; \r\n }\r\n\r\n .hero-container {\r\n width: 90%;\r\n max-width: 1200px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 40px;\r\n }\r\n\r\n \/* Left Content Styling *\/\r\n .hero-content {\r\n flex: 1.2;\r\n min-width: 280px;\r\n }\r\n\r\n .hero-brand {\r\n font-size: 18px;\r\n font-weight: 800;\r\n color: #FF69B4;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n margin-bottom: 10px;\r\n display: block;\r\n text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .hero-title {\r\n font-size: clamp(28px, 5vw, 56px);\r\n font-weight: 800;\r\n line-height: 1.1;\r\n margin-bottom: 20px;\r\n letter-spacing: -1px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15));\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 16px;\r\n line-height: 1.6;\r\n margin-bottom: 30px;\r\n color: #000000;\r\n max-width: 600px;\r\n font-weight: 500;\r\n text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); \r\n }\r\n\r\n \/* Contract Address Styling *\/\r\n .ca-box {\r\n margin-bottom: 35px;\r\n max-width: 100%;\r\n }\r\n\r\n .ca-title {\r\n font-weight: 700;\r\n font-size: 13px;\r\n color: #1A5F7A;\r\n margin-bottom: 8px;\r\n display: block;\r\n }\r\n\r\n .ca-container {\r\n background: rgba(255, 255, 255, 0.7); \r\n backdrop-filter: blur(10px);\r\n border: 2px solid #1A5F7A;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n padding: 6px 12px;\r\n transition: 0.3s ease;\r\n width: 100%;\r\n }\r\n\r\n .ca-container:hover {\r\n background: rgba(255, 255, 255, 0.9);\r\n border-color: #FF69B4;\r\n box-shadow: 0 5px 15px rgba(255, 105, 180, 0.2);\r\n }\r\n\r\n #caInput {\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n width: 100%;\r\n font-size: 12px;\r\n font-family: 'Courier New', monospace;\r\n color: #1A5F7A;\r\n font-weight: 600;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n #copyBtn {\r\n background: #1A5F7A;\r\n color: white;\r\n border: none;\r\n padding: 8px 15px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 700;\r\n font-size: 11px;\r\n transition: 0.3s;\r\n text-transform: uppercase;\r\n flex-shrink: 0;\r\n margin-left: 10px;\r\n }\r\n\r\n #copyBtn:hover {\r\n background: #FF69B4;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* --- UPDATE: HOVER TOMBOL UTAMA --- *\/\r\n .hero-btns {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n\r\n .btn-community, .btn-chart {\r\n text-decoration: none;\r\n padding: 16px 32px;\r\n border-radius: 50px;\r\n font-weight: 700;\r\n font-size: 15px;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n text-align: center;\r\n flex: 1;\r\n min-width: 180px;\r\n display: inline-block;\r\n }\r\n\r\n .btn-community {\r\n background: #1A5F7A;\r\n color: white;\r\n box-shadow: 0 4px 15px rgba(26, 95, 122, 0.2);\r\n }\r\n\r\n .btn-community:hover {\r\n background: #FF69B4; \/* Berubah Pink saat hover *\/\r\n transform: translateY(-5px); \/* Melompat sedikit ke atas *\/\r\n box-shadow: 0 8px 25px rgba(255, 105, 180, 0.4);\r\n }\r\n\r\n .btn-chart {\r\n background: rgba(255, 255, 255, 0.6);\r\n color: #1A5F7A;\r\n border: 2px solid #1A5F7A;\r\n }\r\n\r\n .btn-chart:hover {\r\n background: #1A5F7A; \/* Berubah Biru saat hover *\/\r\n color: white;\r\n transform: translateY(-5px);\r\n box-shadow: 0 8px 25px rgba(26, 95, 122, 0.3);\r\n }\r\n\r\n \/* Mobile Breakpoint *\/\r\n @media (max-width: 768px) {\r\n .hero-section {\r\n padding-top: 20px;\r\n text-align: center;\r\n }\r\n .hero-container {\r\n flex-direction: column;\r\n gap: 30px;\r\n }\r\n .hero-subtitle {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n .hero-btns {\r\n flex-direction: column;\r\n }\r\n .btn-community, .btn-chart {\r\n width: 100%;\r\n flex: none;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"hero-section\">\r\n <div class=\"hero-container\">\r\n <div class=\"hero-content\">\r\n <span class=\"hero-brand\">InoKumi<\/span>\r\n <h1 class=\"hero-title\">A Little World of Kindness and Companionship<\/h1>\r\n <p class=\"hero-subtitle\">\r\n InoKumi is a cheerful girl who believes that even the smallest acts of kindness can change the world. \r\n Together with her loyal companions, she brings warmth, joy, and positivity wherever she goes.\r\n <\/p>\r\n\r\n <div class=\"ca-box\">\r\n <span class=\"ca-title\">Contract Address<\/span>\r\n <div class=\"ca-container\">\r\n <input type=\"text\" value=\"7KYmo8AC1sRRt2d3RRCpXWjfWKJGtJdGxTEg6rQpump\" id=\"caInput\" readonly>\r\n <button onclick=\"copyCA()\" id=\"copyBtn\">COPY<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-btns\">\r\n <a href=\"https:\/\/t.me\/inokumi\" class=\"btn-community\">Join Community<\/a>\r\n <a href=\"https:\/\/dexscreener.com\/solana\/7kymo8ac1srrt2d3rrcpxwjfwkjgtjdgxteg6rqpump\" class=\"btn-chart\">View Chart<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"hero-image-area\">\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n function copyCA() {\r\n var copyText = document.getElementById(\"caInput\");\r\n copyText.select();\r\n copyText.setSelectionRange(0, 99999);\r\n navigator.clipboard.writeText(copyText.value);\r\n\r\n var btn = document.getElementById(\"copyBtn\");\r\n var originalText = btn.innerHTML;\r\n btn.innerHTML = \"DONE!\";\r\n btn.style.backgroundColor = \"#27ae60\";\r\n\r\n setTimeout(function() {\r\n btn.innerHTML = originalText;\r\n btn.style.backgroundColor = \"#1A5F7A\";\r\n }, 2000);\r\n }\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cc90b25 e-flex e-con-boxed e-con e-parent\" data-id=\"cc90b25\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6858679 e-con-full e-flex e-con e-child\" data-id=\"6858679\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d65a5a2 elementor-widget elementor-widget-html\" data-id=\"d65a5a2\" 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=Poppins:wght@800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Container Marquee *\/\r\n .marquee-wrapper {\r\n width: 100%;\r\n overflow: hidden; \/* Menyembunyikan teks yang keluar batas *\/\r\n background: transparent;\r\n padding: 2px 0;\r\n display: flex;\r\n align-items: center;\r\n font-family: 'Poppins', sans-serif;\r\n border-top: 1px solid rgba(26, 95, 122, 0.1);\r\n border-bottom: 1px solid rgba(26, 95, 122, 0.1);\r\n }\r\n\r\n .marquee-content {\r\n display: flex;\r\n white-space: nowrap;\r\n animation: marqueeScroll 20s linear infinite; \/* Kecepatan jalan teks *\/\r\n }\r\n\r\n \/* Gaya Teks *\/\r\n .marquee-item {\r\n font-size: clamp(24px, 4vw, 40px);\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n padding: 0 10px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: 2px;\r\n }\r\n\r\n \/* Dot Separator *\/\r\n .marquee-item::after {\r\n content: \" \u2022 \";\r\n margin-left: 15px;\r\n -webkit-text-fill-color: #FF69B4; \/* Warna dot agar kontras *\/\r\n }\r\n\r\n \/* Animasi Jalan Mulus Tanpa Putus *\/\r\n @keyframes marqueeScroll {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%); \/* Geser setengah panjang kontainer teks *\/\r\n }\r\n }\r\n\r\n \/* Pause saat di-hover (opsional, bisa dihapus) *\/\r\n .marquee-wrapper:hover .marquee-content {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsif Mobile *\/\r\n @media (max-width: 480px) {\r\n .marquee-wrapper {\r\n padding: 15px 0;\r\n }\r\n .marquee-item {\r\n font-size: 20px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"marquee-wrapper\">\r\n <div class=\"marquee-content\">\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f9615ad e-flex e-con-boxed e-con e-parent\" data-id=\"f9615ad\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d1dc6e4 e-con-full e-flex e-con e-child\" data-id=\"d1dc6e4\" data-element_type=\"container\" id=\"lore\">\n\t\t\t\t<div class=\"elementor-element elementor-element-288589c elementor-widget elementor-widget-html\" data-id=\"288589c\" 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=Poppins:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Reset Box-Sizing inside Section *\/\r\n .about-section, .about-section * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .about-section {\r\n padding: 60px 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-family: 'Poppins', sans-serif;\r\n background: transparent;\r\n overflow: hidden;\r\n }\r\n\r\n .about-container {\r\n width: 90%;\r\n max-width: 1200px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 40px;\r\n }\r\n\r\n \/* Left Side: Clean Image *\/\r\n .about-image-area {\r\n flex: 1 1 300px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n animation: floatImg 4s ease-in-out infinite;\r\n }\r\n\r\n .about-image-area img {\r\n width: 100%;\r\n max-width: 450px;\r\n height: auto;\r\n display: block;\r\n filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));\r\n }\r\n\r\n \/* Right Side: Glass Content Card *\/\r\n .about-content-card {\r\n flex: 1.2 1 320px;\r\n background: rgba(255, 255, 255, 0.5); \/* Sedikit lebih solid agar kontras *\/\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n border: 2px solid rgba(255, 255, 255, 0.4);\r\n border-radius: 30px;\r\n padding: clamp(20px, 5vw, 40px); \/* Padding adaptif *\/\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);\r\n transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n\r\n .about-content-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 20px 45px rgba(26, 95, 122, 0.1);\r\n }\r\n\r\n .about-title {\r\n font-size: clamp(28px, 4vw, 42px);\r\n font-weight: 800;\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n line-height: 1.2;\r\n }\r\n\r\n \/* --- UPDATE: High Contrast Black Text --- *\/\r\n .about-text {\r\n font-size: 16px;\r\n line-height: 1.8;\r\n color: #000000; \/* Hitam pekat *\/\r\n font-weight: 400;\r\n text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .about-text p {\r\n margin-bottom: 15px;\r\n }\r\n\r\n .about-text p:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Animations *\/\r\n @keyframes floatImg {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-15px); }\r\n }\r\n\r\n \/* Mobile Responsive Fixes *\/\r\n @media (max-width: 992px) {\r\n .about-container {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n \r\n .about-content-card {\r\n width: 100%;\r\n }\r\n\r\n .about-image-area img {\r\n max-width: 320px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .about-section {\r\n padding: 40px 10px;\r\n }\r\n .about-title {\r\n font-size: 26px;\r\n }\r\n .about-text {\r\n font-size: 15px;\r\n line-height: 1.6;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"about-section\">\r\n <div class=\"about-container\">\r\n \r\n <div class=\"about-image-area\">\r\n <img decoding=\"async\" src=\"http:\/\/inokumi.online\/wp-content\/uploads\/2026\/03\/ASETINOKUMI2-scaled.png\" alt=\"InoKumi and Friends\">\r\n <\/div>\r\n\r\n <div class=\"about-content-card\">\r\n <h2 class=\"about-title\">Who is InoKumi?<\/h2>\r\n <div class=\"about-text\">\r\n <p>\r\n <strong>InoKumi<\/strong> is known for her gentle heart and calm personality. \r\n She enjoys quiet mornings, long walks, and spending time with the animals she cares about.\r\n <\/p>\r\n <p>\r\n One day she found a small stray kitten hiding near a quiet street corner. \r\n Instead of leaving it behind, she brought it home and gave it a place to belong.\r\n <\/p>\r\n <p>\r\n Not long after, a friendly golden dog began following her during her daily walks. \r\n Now the three of them share their days together \u2014 exploring, relaxing, and enjoying the peaceful rhythm of life.\r\n <\/p>\r\n <\/div>\r\n <\/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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-23fc2f4 e-flex e-con-boxed e-con e-parent\" data-id=\"23fc2f4\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-362c18b e-con-full e-flex e-con e-child\" data-id=\"362c18b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5dd2f8 elementor-widget elementor-widget-html\" data-id=\"e5dd2f8\" 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=Poppins:wght@800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Container Marquee *\/\r\n .marquee-wrapper {\r\n width: 100%;\r\n overflow: hidden; \/* Menyembunyikan teks yang keluar batas *\/\r\n background: transparent;\r\n padding: 2px 0;\r\n display: flex;\r\n align-items: center;\r\n font-family: 'Poppins', sans-serif;\r\n border-top: 1px solid rgba(26, 95, 122, 0.1);\r\n border-bottom: 1px solid rgba(26, 95, 122, 0.1);\r\n }\r\n\r\n .marquee-content {\r\n display: flex;\r\n white-space: nowrap;\r\n animation: marqueeScroll 20s linear infinite; \/* Kecepatan jalan teks *\/\r\n }\r\n\r\n \/* Gaya Teks *\/\r\n .marquee-item {\r\n font-size: clamp(24px, 4vw, 40px);\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n padding: 0 10px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: 2px;\r\n }\r\n\r\n \/* Dot Separator *\/\r\n .marquee-item::after {\r\n content: \" \u2022 \";\r\n margin-left: 15px;\r\n -webkit-text-fill-color: #FF69B4; \/* Warna dot agar kontras *\/\r\n }\r\n\r\n \/* Animasi Jalan Mulus Tanpa Putus *\/\r\n @keyframes marqueeScroll {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%); \/* Geser setengah panjang kontainer teks *\/\r\n }\r\n }\r\n\r\n \/* Pause saat di-hover (opsional, bisa dihapus) *\/\r\n .marquee-wrapper:hover .marquee-content {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsif Mobile *\/\r\n @media (max-width: 480px) {\r\n .marquee-wrapper {\r\n padding: 15px 0;\r\n }\r\n .marquee-item {\r\n font-size: 20px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"marquee-wrapper\">\r\n <div class=\"marquee-content\">\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-abf5b7d e-flex e-con-boxed e-con e-parent\" data-id=\"abf5b7d\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-daeb48e e-con-full e-flex e-con e-child\" data-id=\"daeb48e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-875a442 elementor-widget elementor-widget-html\" data-id=\"875a442\" 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=Poppins:wght@400;600;800&family=Dancing+Script:wght@600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Story Section Base *\/\r\n .story-section {\r\n padding: 80px 20px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-family: 'Poppins', sans-serif;\r\n background: transparent;\r\n overflow: hidden;\r\n }\r\n\r\n .story-container {\r\n width: 100%;\r\n max-width: 900px; \/* Ukuran ideal agar teks tidak terlalu lebar *\/\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n \/* Glass Card Story *\/\r\n .story-card {\r\n background: rgba(255, 255, 255, 0.45);\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 40px;\r\n padding: 60px 40px;\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);\r\n transition: transform 0.3s ease;\r\n width: 100%;\r\n }\r\n\r\n .story-card:hover {\r\n transform: scale(1.01);\r\n background: rgba(255, 255, 255, 0.55);\r\n }\r\n\r\n .story-tag {\r\n font-family: 'Poppins', sans-serif;\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n color: #FF69B4;\r\n font-size: 14px;\r\n margin-bottom: 10px;\r\n display: block;\r\n }\r\n\r\n .story-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: clamp(32px, 5vw, 48px);\r\n font-weight: 800;\r\n margin-bottom: 30px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .story-content {\r\n font-size: 17px;\r\n line-height: 1.9;\r\n color: #4A6E7D;\r\n text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .story-content p {\r\n margin-bottom: 20px;\r\n }\r\n\r\n \/* Highlight puitis di bagian akhir *\/\r\n .story-quote {\r\n font-family: 'Dancing Script', cursive; \/* Font tulisan tangan yang cantik *\/\r\n font-size: 26px;\r\n color: #1A5F7A;\r\n margin-top: 30px;\r\n display: block;\r\n }\r\n\r\n \/* Responsif Mobile *\/\r\n @media (max-width: 768px) {\r\n .story-section {\r\n padding: 50px 15px;\r\n }\r\n .story-card {\r\n padding: 40px 20px;\r\n border-radius: 30px;\r\n }\r\n .story-title {\r\n font-size: 28px;\r\n margin-bottom: 20px;\r\n }\r\n .story-content {\r\n font-size: 15px;\r\n line-height: 1.7;\r\n }\r\n .story-quote {\r\n font-size: 22px;\r\n }\r\n }\r\n\r\n \/* Mencegah teks keluar batas di layar sangat kecil (iPhone SE, dll) *\/\r\n @media (max-width: 380px) {\r\n .story-card {\r\n padding: 30px 15px;\r\n }\r\n .story-title {\r\n font-size: 24px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"story-section\">\r\n <div class=\"story-container\">\r\n \r\n <div class=\"story-card\">\r\n <span class=\"story-tag\">Story Section<\/span>\r\n <h2 class=\"story-title\">A Small Family<\/h2>\r\n \r\n <div class=\"story-content\">\r\n <p>\r\n Life became brighter when <strong>InoKumi<\/strong> met her two companions. \r\n The curious kitten, always playful and energetic, and the loyal golden dog, calm and protective.\r\n <\/p>\r\n <p>\r\n They may be different, but together they form a perfect little family. \r\n Whether it's a quiet afternoon under the sun or an evening walk through the neighborhood, \r\n their bond grows stronger every day.\r\n <\/p>\r\n <p>\r\n Their story reminds us that family is not always about where you come from \u2014\r\n <\/p>\r\n \r\n <span class=\"story-quote\">\r\n \"sometimes it\u2019s about who chooses to stay.\"\r\n <\/span>\r\n <\/div>\r\n <\/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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eba8cab e-flex e-con-boxed e-con e-parent\" data-id=\"eba8cab\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-08242a8 e-con-full e-flex e-con e-child\" data-id=\"08242a8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-136ec5f elementor-widget elementor-widget-html\" data-id=\"136ec5f\" 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=Poppins:wght@800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Container Marquee *\/\r\n .marquee-wrapper {\r\n width: 100%;\r\n overflow: hidden; \/* Menyembunyikan teks yang keluar batas *\/\r\n background: transparent;\r\n padding: 2px 0;\r\n display: flex;\r\n align-items: center;\r\n font-family: 'Poppins', sans-serif;\r\n border-top: 1px solid rgba(26, 95, 122, 0.1);\r\n border-bottom: 1px solid rgba(26, 95, 122, 0.1);\r\n }\r\n\r\n .marquee-content {\r\n display: flex;\r\n white-space: nowrap;\r\n animation: marqueeScroll 20s linear infinite; \/* Kecepatan jalan teks *\/\r\n }\r\n\r\n \/* Gaya Teks *\/\r\n .marquee-item {\r\n font-size: clamp(24px, 4vw, 40px);\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n padding: 0 10px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: 2px;\r\n }\r\n\r\n \/* Dot Separator *\/\r\n .marquee-item::after {\r\n content: \" \u2022 \";\r\n margin-left: 15px;\r\n -webkit-text-fill-color: #FF69B4; \/* Warna dot agar kontras *\/\r\n }\r\n\r\n \/* Animasi Jalan Mulus Tanpa Putus *\/\r\n @keyframes marqueeScroll {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%); \/* Geser setengah panjang kontainer teks *\/\r\n }\r\n }\r\n\r\n \/* Pause saat di-hover (opsional, bisa dihapus) *\/\r\n .marquee-wrapper:hover .marquee-content {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsif Mobile *\/\r\n @media (max-width: 480px) {\r\n .marquee-wrapper {\r\n padding: 15px 0;\r\n }\r\n .marquee-item {\r\n font-size: 20px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"marquee-wrapper\">\r\n <div class=\"marquee-content\">\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c928795 e-flex e-con-boxed e-con e-parent\" data-id=\"c928795\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b67774c e-con-full e-flex e-con e-child\" data-id=\"b67774c\" data-element_type=\"container\" id=\"inokomics\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b0544a elementor-widget elementor-widget-html\" data-id=\"1b0544a\" 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=Poppins:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Reset Box-Sizing for WordPress Safety *\/\r\n .token-section, .token-section * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .token-section {\r\n padding: 60px 15px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-family: 'Poppins', sans-serif;\r\n background: transparent;\r\n overflow: hidden;\r\n }\r\n\r\n .token-container {\r\n width: 100%;\r\n max-width: 1200px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 40px;\r\n }\r\n\r\n \/* Left Side: Content Area *\/\r\n .token-content {\r\n flex: 1.2 1 320px;\r\n min-width: 0;\r\n }\r\n\r\n .token-title {\r\n font-size: clamp(30px, 5vw, 48px);\r\n font-weight: 800;\r\n margin-bottom: 15px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n line-height: 1.2;\r\n }\r\n\r\n \/* --- UPDATE: Black Subtitle --- *\/\r\n .token-subtitle {\r\n font-size: 16px;\r\n color: #000000; \/* Hitam pekat *\/\r\n margin-bottom: 30px;\r\n max-width: 600px;\r\n line-height: 1.6;\r\n font-weight: 500;\r\n text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n \/* Vertical List Card *\/\r\n .token-list-card {\r\n background: rgba(255, 255, 255, 0.5); \/* Sedikit lebih solid agar kontras *\/\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n border: 2px solid rgba(255, 255, 255, 0.4);\r\n border-radius: 30px;\r\n padding: clamp(20px, 5vw, 40px);\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n\r\n .token-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-bottom: 1px solid rgba(26, 95, 122, 0.15);\r\n padding-bottom: 15px;\r\n flex-wrap: wrap; \/* Menghindari teks tumpang tindih di HP sangat kecil *\/\r\n gap: 10px;\r\n }\r\n\r\n .token-item:last-child {\r\n border-bottom: none;\r\n padding-bottom: 0;\r\n }\r\n\r\n .token-info-label {\r\n font-size: 13px;\r\n font-weight: 700;\r\n color: #FF69B4;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n }\r\n\r\n \/* --- UPDATE: Black Token Values --- *\/\r\n .token-info-value {\r\n font-size: clamp(18px, 2.5vw, 24px);\r\n font-weight: 800;\r\n color: #000000; \/* Hitam pekat *\/\r\n text-align: right;\r\n }\r\n\r\n \/* Right Side: Image Area *\/\r\n .token-image-area {\r\n flex: 1 1 300px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n animation: floatToken 4s ease-in-out infinite;\r\n }\r\n\r\n .token-image-area img {\r\n width: 100%;\r\n max-width: 450px;\r\n height: auto;\r\n display: block;\r\n filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1));\r\n }\r\n\r\n \/* Floating Animation *\/\r\n @keyframes floatToken {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-15px); }\r\n }\r\n\r\n \/* --- RESPONSIVE FIXES --- *\/\r\n @media (max-width: 992px) {\r\n .token-container {\r\n flex-direction: column-reverse; \/* Gambar di atas agar flow bagus *\/\r\n text-align: center;\r\n }\r\n .token-subtitle {\r\n margin: 0 auto 30px auto;\r\n }\r\n .token-item {\r\n justify-content: center; \/* Rata tengah di mobile *\/\r\n text-align: center;\r\n }\r\n .token-info-value {\r\n text-align: center;\r\n width: 100%; \/* Memaksa baris baru jika perlu *\/\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .token-section {\r\n padding: 40px 10px;\r\n }\r\n .token-list-card {\r\n border-radius: 20px;\r\n }\r\n .token-title {\r\n font-size: 28px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"token-section\">\r\n <div class=\"token-container\">\r\n \r\n <div class=\"token-content\">\r\n <h2 class=\"token-title\">InoKomics<\/h2>\r\n <p class=\"token-subtitle\">\r\n Designed for long-term growth and community security. \r\n Transparent, secure, and purely community-driven.\r\n <\/p>\r\n\r\n <div class=\"token-list-card\">\r\n <div class=\"token-item\">\r\n <span class=\"token-info-label\">Total Supply<\/span>\r\n <span class=\"token-info-value\">1,000,000,000<\/span>\r\n <\/div>\r\n <div class=\"token-item\">\r\n <span class=\"token-info-label\">Liquidity<\/span>\r\n <span class=\"token-info-value\">100% LP Burned<\/span>\r\n <\/div>\r\n <div class=\"token-item\">\r\n <span class=\"token-info-label\">Transaction Tax<\/span>\r\n <span class=\"token-info-value\">ZERO (0% Tax)<\/span>\r\n <\/div>\r\n <div class=\"token-item\">\r\n <span class=\"token-info-label\">Contract Status<\/span>\r\n <span class=\"token-info-value\">Renounced Ownership<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"token-image-area\">\r\n <img decoding=\"async\" src=\"http:\/\/inokumi.online\/wp-content\/uploads\/2026\/03\/ASETINOKUMI3-scaled.png\" alt=\"InoKumi Tokenomics\">\r\n <\/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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3fed230 e-flex e-con-boxed e-con e-parent\" data-id=\"3fed230\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4c54403 e-con-full e-flex e-con e-child\" data-id=\"4c54403\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e79e4c elementor-widget elementor-widget-html\" data-id=\"6e79e4c\" 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=Poppins:wght@800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Container Marquee *\/\r\n .marquee-wrapper {\r\n width: 100%;\r\n overflow: hidden; \/* Menyembunyikan teks yang keluar batas *\/\r\n background: transparent;\r\n padding: 2px 0;\r\n display: flex;\r\n align-items: center;\r\n font-family: 'Poppins', sans-serif;\r\n border-top: 1px solid rgba(26, 95, 122, 0.1);\r\n border-bottom: 1px solid rgba(26, 95, 122, 0.1);\r\n }\r\n\r\n .marquee-content {\r\n display: flex;\r\n white-space: nowrap;\r\n animation: marqueeScroll 20s linear infinite; \/* Kecepatan jalan teks *\/\r\n }\r\n\r\n \/* Gaya Teks *\/\r\n .marquee-item {\r\n font-size: clamp(24px, 4vw, 40px);\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n padding: 0 10px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: 2px;\r\n }\r\n\r\n \/* Dot Separator *\/\r\n .marquee-item::after {\r\n content: \" \u2022 \";\r\n margin-left: 15px;\r\n -webkit-text-fill-color: #FF69B4; \/* Warna dot agar kontras *\/\r\n }\r\n\r\n \/* Animasi Jalan Mulus Tanpa Putus *\/\r\n @keyframes marqueeScroll {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%); \/* Geser setengah panjang kontainer teks *\/\r\n }\r\n }\r\n\r\n \/* Pause saat di-hover (opsional, bisa dihapus) *\/\r\n .marquee-wrapper:hover .marquee-content {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsif Mobile *\/\r\n @media (max-width: 480px) {\r\n .marquee-wrapper {\r\n padding: 15px 0;\r\n }\r\n .marquee-item {\r\n font-size: 20px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"marquee-wrapper\">\r\n <div class=\"marquee-content\">\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-604d2dc e-flex e-con-boxed e-con e-parent\" data-id=\"604d2dc\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-32448b4 e-con-full e-flex e-con e-child\" data-id=\"32448b4\" data-element_type=\"container\" id=\"bluemap\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c979be0 elementor-widget elementor-widget-html\" data-id=\"c979be0\" 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=Poppins:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Roadmap Section Base *\/\r\n .roadmap-section {\r\n padding: 80px 20px;\r\n font-family: 'Poppins', sans-serif;\r\n background: transparent;\r\n display: flex;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n\r\n .roadmap-container {\r\n width: 100%;\r\n max-width: 1000px;\r\n text-align: center;\r\n }\r\n\r\n .roadmap-header {\r\n margin-bottom: 60px;\r\n }\r\n\r\n .roadmap-title {\r\n font-size: clamp(32px, 5vw, 48px);\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 15px;\r\n }\r\n\r\n \/* Timeline Container *\/\r\n .timeline {\r\n position: relative;\r\n padding: 20px 0;\r\n }\r\n\r\n \/* Garis Tengah Timeline (Hanya tampil di Desktop) *\/\r\n .timeline::before {\r\n content: '';\r\n position: absolute;\r\n width: 4px;\r\n background: rgba(26, 95, 122, 0.2);\r\n top: 0;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n border-radius: 10px;\r\n }\r\n\r\n \/* Timeline Item Wrapper *\/\r\n .timeline-item {\r\n position: relative;\r\n width: 100%;\r\n margin-bottom: 40px;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n \/* Glass Card Roadmap *\/\r\n .roadmap-card {\r\n width: 45%;\r\n background: rgba(255, 255, 255, 0.4);\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 25px;\r\n padding: 30px;\r\n text-align: left;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n }\r\n\r\n .roadmap-card:hover {\r\n transform: translateY(-5px);\r\n border-color: #FF69B4;\r\n background: rgba(255, 255, 255, 0.6);\r\n box-shadow: 0 15px 40px rgba(26, 95, 122, 0.1);\r\n }\r\n\r\n \/* Penempatan Kiri-Kanan *\/\r\n .timeline-item:nth-child(odd) { justify-content: flex-start; }\r\n .timeline-item:nth-child(even) { justify-content: flex-end; }\r\n\r\n \/* Dot\/Titik di Garis Tengah *\/\r\n .timeline-dot {\r\n position: absolute;\r\n width: 20px;\r\n height: 20px;\r\n background: #1A5F7A;\r\n border: 4px solid #fff;\r\n border-radius: 50%;\r\n top: 30px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 2;\r\n box-shadow: 0 0 10px rgba(26, 95, 122, 0.3);\r\n }\r\n\r\n \/* Isi Card *\/\r\n .phase-label {\r\n font-size: 13px;\r\n font-weight: 800;\r\n color: #FF69B4;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .phase-title {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #1A5F7A;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .roadmap-list {\r\n list-style: none;\r\n padding: 0;\r\n }\r\n\r\n .roadmap-list li {\r\n font-size: 15px;\r\n color: #4A6E7D;\r\n margin-bottom: 8px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .roadmap-list li::before {\r\n content: '\u2726';\r\n color: #FF69B4;\r\n font-size: 12px;\r\n }\r\n\r\n \/* --- RESPONSIVE MOBILE --- *\/\r\n @media (max-width: 850px) {\r\n .timeline::before { left: 20px; }\r\n .timeline-dot { left: 20px; transform: none; top: 35px; }\r\n \r\n .timeline-item {\r\n justify-content: flex-start !important;\r\n padding-left: 50px;\r\n }\r\n\r\n .roadmap-card {\r\n width: 100%;\r\n padding: 25px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .roadmap-section { padding: 40px 15px; }\r\n .phase-title { font-size: 19px; }\r\n .roadmap-list li { font-size: 14px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"roadmap-section\">\r\n <div class=\"roadmap-container\">\r\n \r\n <div class=\"roadmap-header\">\r\n <h2 class=\"roadmap-title\">Roadmap<\/h2>\r\n <\/div>\r\n\r\n <div class=\"timeline\">\r\n \r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-dot\"><\/div>\r\n <div class=\"roadmap-card\">\r\n <span class=\"phase-label\">Phase 1<\/span>\r\n <h3 class=\"phase-title\">Beginning<\/h3>\r\n <ul class=\"roadmap-list\">\r\n <li>Launch website<\/li>\r\n <li>Deploy token<\/li>\r\n <li>Start community channels<\/li>\r\n <li>Initial marketing<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-dot\"><\/div>\r\n <div class=\"roadmap-card\">\r\n <span class=\"phase-label\">Phase 2<\/span>\r\n <h3 class=\"phase-title\">Growing Together<\/h3>\r\n <ul class=\"roadmap-list\">\r\n <li>Community events<\/li>\r\n <li>Influencer partnerships<\/li>\r\n <li>Coin listing platforms<\/li>\r\n <li>Global marketing push<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-dot\"><\/div>\r\n <div class=\"roadmap-card\">\r\n <span class=\"phase-label\">Phase 3<\/span>\r\n <h3 class=\"phase-title\">Expanding the World<\/h3>\r\n <ul class=\"roadmap-list\">\r\n <li>NFT collection<\/li>\r\n <li>Community competitions<\/li>\r\n <li>Merchandise concepts<\/li>\r\n <li>Ecosystem ideas<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-dot\"><\/div>\r\n <div class=\"roadmap-card\">\r\n <span class=\"phase-label\">Phase 4<\/span>\r\n <h3 class=\"phase-title\">Long Term Vision<\/h3>\r\n <ul class=\"roadmap-list\">\r\n <li>Community governance<\/li>\r\n <li>New collaborations<\/li>\r\n <li>Creative ecosystem growth<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-598f237 e-flex e-con-boxed e-con e-parent\" data-id=\"598f237\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8b4d4bb e-con-full e-flex e-con e-child\" data-id=\"8b4d4bb\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-055952a elementor-widget elementor-widget-html\" data-id=\"055952a\" 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=Poppins:wght@800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Container Marquee *\/\r\n .marquee-wrapper {\r\n width: 100%;\r\n overflow: hidden; \/* Menyembunyikan teks yang keluar batas *\/\r\n background: transparent;\r\n padding: 2px 0;\r\n display: flex;\r\n align-items: center;\r\n font-family: 'Poppins', sans-serif;\r\n border-top: 1px solid rgba(26, 95, 122, 0.1);\r\n border-bottom: 1px solid rgba(26, 95, 122, 0.1);\r\n }\r\n\r\n .marquee-content {\r\n display: flex;\r\n white-space: nowrap;\r\n animation: marqueeScroll 20s linear infinite; \/* Kecepatan jalan teks *\/\r\n }\r\n\r\n \/* Gaya Teks *\/\r\n .marquee-item {\r\n font-size: clamp(24px, 4vw, 40px);\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n padding: 0 10px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: 2px;\r\n }\r\n\r\n \/* Dot Separator *\/\r\n .marquee-item::after {\r\n content: \" \u2022 \";\r\n margin-left: 15px;\r\n -webkit-text-fill-color: #FF69B4; \/* Warna dot agar kontras *\/\r\n }\r\n\r\n \/* Animasi Jalan Mulus Tanpa Putus *\/\r\n @keyframes marqueeScroll {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%); \/* Geser setengah panjang kontainer teks *\/\r\n }\r\n }\r\n\r\n \/* Pause saat di-hover (opsional, bisa dihapus) *\/\r\n .marquee-wrapper:hover .marquee-content {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsif Mobile *\/\r\n @media (max-width: 480px) {\r\n .marquee-wrapper {\r\n padding: 15px 0;\r\n }\r\n .marquee-item {\r\n font-size: 20px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"marquee-wrapper\">\r\n <div class=\"marquee-content\">\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-56ea0e8 e-flex e-con-boxed e-con e-parent\" data-id=\"56ea0e8\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-02562f3 e-con-full e-flex e-con e-child\" data-id=\"02562f3\" data-element_type=\"container\" id=\"faq\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-39ef80e elementor-widget elementor-widget-html\" data-id=\"39ef80e\" 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=Poppins:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* FAQ Section Base *\/\r\n .faq-section {\r\n padding: 80px 20px;\r\n font-family: 'Poppins', sans-serif;\r\n background: transparent;\r\n display: flex;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n\r\n .faq-container {\r\n width: 100%;\r\n max-width: 900px;\r\n }\r\n\r\n .faq-header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .faq-title {\r\n font-size: clamp(32px, 5vw, 48px);\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 15px;\r\n }\r\n\r\n \/* Accordion Style *\/\r\n .faq-item {\r\n margin-bottom: 15px;\r\n background: rgba(255, 255, 255, 0.4);\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .faq-item:hover {\r\n background: rgba(255, 255, 255, 0.6);\r\n border-color: #FF69B4;\r\n }\r\n\r\n .faq-question {\r\n padding: 20px 25px;\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n cursor: pointer;\r\n border: none;\r\n background: transparent;\r\n text-align: left;\r\n font-size: 16px;\r\n font-weight: 700;\r\n color: #1A5F7A;\r\n outline: none;\r\n }\r\n\r\n .faq-question::after {\r\n content: '+';\r\n font-size: 22px;\r\n color: #FF69B4;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .faq-item.active .faq-question::after {\r\n transform: rotate(45deg);\r\n }\r\n\r\n .faq-answer {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease-out;\r\n padding: 0 25px;\r\n color: #4A6E7D;\r\n font-size: 15px;\r\n line-height: 1.7;\r\n }\r\n\r\n .faq-item.active .faq-answer {\r\n max-height: 500px; \/* Adjust based on content *\/\r\n padding-bottom: 25px;\r\n }\r\n\r\n .faq-answer ul {\r\n padding-left: 20px;\r\n margin-top: 10px;\r\n }\r\n\r\n .faq-answer li {\r\n margin-bottom: 5px;\r\n }\r\n\r\n \/* Mobile adjustments *\/\r\n @media (max-width: 768px) {\r\n .faq-question { font-size: 15px; padding: 18px 20px; }\r\n .faq-answer { font-size: 14px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"faq-section\">\r\n <div class=\"faq-container\">\r\n \r\n <div class=\"faq-header\">\r\n <h2 class=\"faq-title\">Frequently Asked Questions<\/h2>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">What is InoKumi?<\/button>\r\n <div class=\"faq-answer\">\r\n <p>InoKumi is a community-driven meme token inspired by the story of a kind-hearted girl and her loyal animal companions. The project focuses on building a positive and engaging community while celebrating creativity, friendship, and shared experiences in the crypto space.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">What makes InoKumi different from other meme tokens?<\/button>\r\n <div class=\"faq-answer\">\r\n <p>InoKumi combines strong visual storytelling with a community-focused approach. Rather than focusing purely on hype, the project aims to build a recognizable character-driven identity that encourages long-term engagement and creativity.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">What is the total supply of InoKumi?<\/button>\r\n <div class=\"faq-answer\">\r\n <p>The total supply is 1,000,000,000 tokens. The supply is fixed, meaning no additional tokens can be minted in the future.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">Are there any transaction taxes?<\/button>\r\n <div class=\"faq-answer\">\r\n <p>No. InoKumi operates with 0% buy tax and 0% sell tax, ensuring a transparent and straightforward trading experience for all participants.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">Is the liquidity burned and ownership renounced?<\/button>\r\n <div class=\"faq-answer\">\r\n <p>Yes. The liquidity has been burned to ensure it cannot be removed, and contract ownership has been renounced. This provides maximum transparency and security for the community.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">How can I purchase InoKumi tokens?<\/button>\r\n <div class=\"faq-answer\">\r\n <ul>\r\n <li>Install a compatible crypto wallet (e.g., Phantom or MetaMask).<\/li>\r\n <li>Fund your wallet with the required base currency (e.g., SOL or ETH).<\/li>\r\n <li>Connect your wallet to a supported decentralized exchange (DEX).<\/li>\r\n <li>Paste the official contract address and swap for $INOKUMI.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">Is InoKumi a financial investment product?<\/button>\r\n <div class=\"faq-answer\">\r\n <p>InoKumi is a community-driven meme token created primarily for entertainment. Participation in cryptocurrency projects carries risk; always conduct your own research (DYOR) before making decisions.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n document.querySelectorAll('.faq-question').forEach(button => {\r\n button.addEventListener('click', () => {\r\n const faqItem = button.parentElement;\r\n \r\n \/\/ Close other items (optional, remove if you want multiple open)\r\n document.querySelectorAll('.faq-item').forEach(item => {\r\n if (item !== faqItem) item.classList.remove('active');\r\n });\r\n\r\n faqItem.classList.toggle('active');\r\n });\r\n });\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-21e6c80 e-flex e-con-boxed e-con e-parent\" data-id=\"21e6c80\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-76b53d6 e-con-full e-flex e-con e-child\" data-id=\"76b53d6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb3d487 elementor-widget elementor-widget-html\" data-id=\"fb3d487\" 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=Poppins:wght@800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Container Marquee *\/\r\n .marquee-wrapper {\r\n width: 100%;\r\n overflow: hidden; \/* Menyembunyikan teks yang keluar batas *\/\r\n background: transparent;\r\n padding: 2px 0;\r\n display: flex;\r\n align-items: center;\r\n font-family: 'Poppins', sans-serif;\r\n border-top: 1px solid rgba(26, 95, 122, 0.1);\r\n border-bottom: 1px solid rgba(26, 95, 122, 0.1);\r\n }\r\n\r\n .marquee-content {\r\n display: flex;\r\n white-space: nowrap;\r\n animation: marqueeScroll 20s linear infinite; \/* Kecepatan jalan teks *\/\r\n }\r\n\r\n \/* Gaya Teks *\/\r\n .marquee-item {\r\n font-size: clamp(24px, 4vw, 40px);\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n padding: 0 10px;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: 2px;\r\n }\r\n\r\n \/* Dot Separator *\/\r\n .marquee-item::after {\r\n content: \" \u2022 \";\r\n margin-left: 15px;\r\n -webkit-text-fill-color: #FF69B4; \/* Warna dot agar kontras *\/\r\n }\r\n\r\n \/* Animasi Jalan Mulus Tanpa Putus *\/\r\n @keyframes marqueeScroll {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%); \/* Geser setengah panjang kontainer teks *\/\r\n }\r\n }\r\n\r\n \/* Pause saat di-hover (opsional, bisa dihapus) *\/\r\n .marquee-wrapper:hover .marquee-content {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsif Mobile *\/\r\n @media (max-width: 480px) {\r\n .marquee-wrapper {\r\n padding: 15px 0;\r\n }\r\n .marquee-item {\r\n font-size: 20px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"marquee-wrapper\">\r\n <div class=\"marquee-content\">\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <span class=\"marquee-item\">INOKUMI<\/span>\r\n <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cda57be e-flex e-con-boxed e-con e-parent\" data-id=\"cda57be\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-3850230 e-con-full e-flex e-con e-child\" data-id=\"3850230\" data-element_type=\"container\" id=\"join\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d776112 elementor-widget elementor-widget-html\" data-id=\"d776112\" 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=Poppins:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* Global Reset inside Section to prevent WordPress conflict *\/\r\n .community-section, .community-section * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .community-section {\r\n padding: 60px 15px; \/* Padding sisi untuk keamanan mobile *\/\r\n font-family: 'Poppins', sans-serif;\r\n background: transparent;\r\n display: flex;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n\r\n .community-container {\r\n width: 100%;\r\n max-width: 1100px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 30px;\r\n }\r\n\r\n \/* Image Area - Flexible & Centered *\/\r\n .community-image {\r\n flex: 1 1 300px; \/* Fleksibel namun punya batas minimal *\/\r\n display: flex;\r\n justify-content: center;\r\n animation: floatSlim 4s ease-in-out infinite;\r\n }\r\n\r\n .community-image img {\r\n max-width: 100%; \/* Pastikan tidak pernah lebih lebar dari kontainernya *\/\r\n width: 350px;\r\n height: auto;\r\n filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));\r\n }\r\n\r\n \/* Content Area - Balanced *\/\r\n .community-content {\r\n flex: 1.5 1 320px;\r\n min-width: 0; \/* Penting untuk mencegah overflow pada flex item *\/\r\n }\r\n\r\n .community-tag {\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n color: #FF69B4;\r\n font-size: 13px;\r\n display: block;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .community-title {\r\n font-size: clamp(24px, 4vw, 42px); \/* Font adaptif *\/\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #1A5F7A 0%, #FF69B4 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 15px;\r\n line-height: 1.2;\r\n }\r\n\r\n .community-subtitle {\r\n font-size: 16px;\r\n color: #000000;\r\n line-height: 1.6;\r\n margin-bottom: 30px;\r\n font-weight: 400;\r\n text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); \r\n }\r\n\r\n \/* --- SMART RESPONSIVE BUTTONS --- *\/\r\n .social-btns {\r\n display: flex;\r\n flex-wrap: wrap; \r\n gap: 10px;\r\n width: 100%;\r\n }\r\n\r\n .social-btn {\r\n background: rgba(255, 255, 255, 0.5);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border: 1.5px solid rgba(26, 95, 122, 0.3);\r\n border-radius: 12px;\r\n padding: 12px 15px;\r\n text-decoration: none;\r\n text-align: center;\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: #1A5F7A;\r\n transition: all 0.3s ease;\r\n \/* Kalkulasi tombol: 2 kolom di mobile sedang, 4 di desktop *\/\r\n flex: 1 1 calc(50% - 10px); \r\n min-width: 120px;\r\n white-space: nowrap;\r\n }\r\n\r\n .social-btn:hover {\r\n background: #1A5F7A;\r\n color: #ffffff;\r\n border-color: #1A5F7A;\r\n transform: translateY(-3px);\r\n box-shadow: 0 5px 15px rgba(26, 95, 122, 0.2);\r\n }\r\n\r\n .community-footer-slim {\r\n margin-top: 40px;\r\n font-size: 12px;\r\n color: #000000;\r\n opacity: 0.8;\r\n }\r\n\r\n \/* Animations *\/\r\n @keyframes floatSlim {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-15px); }\r\n }\r\n\r\n \/* Responsive Adjustments *\/\r\n @media (max-width: 850px) {\r\n .community-container {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n .community-subtitle {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .social-btn {\r\n flex: 1 1 100%; \/* Tombol lebar penuh di HP sangat kecil agar rapi *\/\r\n font-size: 14px;\r\n }\r\n .community-title {\r\n font-size: 26px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"community-section\">\r\n <div class=\"community-container\">\r\n \r\n <div class=\"community-image\">\r\n <img decoding=\"async\" src=\"http:\/\/inokumi.online\/wp-content\/uploads\/2026\/03\/ASETINOKUMI1-scaled.png\" alt=\"InoKumi Family\">\r\n <\/div>\r\n\r\n <div class=\"community-content\">\r\n <span class=\"community-tag\">Community<\/span>\r\n <h2 class=\"community-title\">Join the InoKumi Community<\/h2>\r\n <p class=\"community-subtitle\">\r\n InoKumi is more than just a token. It\u2019s a space where creativity, kindness, and fun come together. \r\n Follow us and stay connected with our growing family.\r\n <\/p>\r\n\r\n <div class=\"social-btns\">\r\n <a href=\"https:\/\/x.com\/inokumisol\" class=\"social-btn\">Twitter<\/a>\r\n <a href=\"https:\/\/t.me\/inokumi\" class=\"social-btn\">Telegram<\/a>\r\n <a href=\"#https:\/\/x.com\/inokumisol\" class=\"social-btn\">X Community<\/a>\r\n <a href=\"https:\/\/dexscreener.com\/solana\/7kymo8ac1srrt2d3rrcpxwjfwkjgtjdgxteg6rqpump\" class=\"social-btn\">Live Chart<\/a>\r\n <\/div>\r\n\r\n <div class=\"community-footer-slim\">\r\n <p>\u00a9 2026 InoKumi Project. All Rights Reserved.<\/p>\r\n <\/div>\r\n <\/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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>InoKumi Navigation InoKumi The Lore InoKomics Blue Map FAQ Join the InoKumi InoKumi A Little World of Kindness and Companionship InoKumi is a cheerful girl who believes that even the smallest acts of kindness can change the world. Together with her loyal companions, she brings warmth, joy, and positivity wherever she goes. Contract Address COPY […]<\/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:\/\/inokumi.online\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inokumi.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inokumi.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inokumi.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inokumi.online\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":22,"href":"https:\/\/inokumi.online\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/inokumi.online\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/inokumi.online\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}