{"id":8,"date":"2026-06-24T20:38:22","date_gmt":"2026-06-24T20:38:22","guid":{"rendered":"https:\/\/hamadog.fun\/?page_id=8"},"modified":"2026-06-24T21:46:02","modified_gmt":"2026-06-24T21:46:02","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/hamadog.fun\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-06ebd37 e-con-full e-flex e-con e-parent\" data-id=\"06ebd37\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/hamadog.fun\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/HAMA-BG1.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-4fc4e13 e-con-full e-flex e-con e-child\" data-id=\"4fc4e13\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7d547e elementor-widget elementor-widget-html\" data-id=\"c7d547e\" 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=Unbounded:wght@600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* Reset & Font *\/\r\n.hama-navbar-container, .hama-navbar-container * {\r\n  box-sizing: border-box;\r\n  font-family: 'Unbounded', sans-serif;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n\/* Navbar Induk (Background Transparent) *\/\r\n.hama-navbar-container {\r\n  width: 100%;\r\n  background: transparent;\r\n  padding: 5px 30px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n\/* Logo di Kiri *\/\r\n.hama-nav-logo {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.hama-nav-logo img {\r\n  width: 60px;\r\n  height: 60px;\r\n  border-radius: 50%;\r\n  object-fit: cover;\r\n  transition: transform 0.3s ease;\r\n}\r\n.hama-nav-logo:hover img {\r\n  transform: scale(1.05) rotate(-5deg);\r\n}\r\n\r\n\/* Kumpulan Button di Kanan *\/\r\n.hama-nav-links {\r\n  display: flex;\r\n  gap: 15px;\r\n  align-items: center;\r\n}\r\n\r\n\/* --- STYLE UNTUK BUTTON (EFEK PILL LUAR & DALAM) --- *\/\r\n\r\n\/* 1. Pill Luar (Outline Putih Transparan + Border 3px) *\/\r\n.hama-pill-outer {\r\n  background: rgba(255, 255, 255, 0.25); \/* Putih agak transparent *\/\r\n  border: 1px solid #ffffff; \/* Border putih 3px *\/\r\n  border-radius: 999px; \/* Rounded pill *\/\r\n  padding: 5px; \/* Jarak antara border luar dan pill dalam *\/\r\n  display: inline-flex;\r\n  cursor: pointer;\r\n  text-decoration: none;\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.hama-pill-outer:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n\/* 2. Pill Dalam (Solid) *\/\r\n.hama-pill-inner {\r\n  border-radius: 999px;\r\n  padding: 12px 28px;\r\n  font-weight: 800;\r\n  font-size: 14px;\r\n  letter-spacing: 0.05em;\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\/* Warna Default Pill Dalam (Untuk Twitter & Telegram) *\/\r\n.hama-pill-normal .hama-pill-inner {\r\n  background: #ffffff; \/* Putih polos *\/\r\n  color: #FC6005; \/* Warna teks orange agar kontras\/terbaca di background putih *\/\r\n}\r\n\r\n\/* Warna Pill Dalam Khusus Buy Now (Gradient) *\/\r\n.hama-pill-gradient .hama-pill-inner {\r\n  background: linear-gradient(90deg, #FCD208 0%, #FC6005 100%); \/* Sesuai request *\/\r\n  color: #ffffff; \/* Teks putih *\/\r\n}\r\n\r\n\/* Efek hover pada inner pill *\/\r\n.hama-pill-outer:hover .hama-pill-inner {\r\n  transform: scale(0.98);\r\n}\r\n\r\n\/* Responsive Tablet & Mobile *\/\r\n@media (max-width: 768px) {\r\n  .hama-navbar-container {\r\n    padding: 15px 20px;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n  }\r\n  .hama-nav-links {\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 10px;\r\n  }\r\n  .hama-pill-inner {\r\n    padding: 10px 20px;\r\n    font-size: 12px;\r\n  }\r\n}\r\n@media (max-width: 480px) {\r\n  .hama-nav-links {\r\n    gap: 8px;\r\n  }\r\n  .hama-pill-outer {\r\n    border-width: 2px;\r\n    padding: 4px;\r\n  }\r\n  .hama-pill-inner {\r\n    padding: 8px 16px;\r\n    font-size: 11px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<nav class=\"hama-navbar-container\" id=\"hamaNavbar\">\r\n  <a href=\"#\" class=\"hama-nav-logo\">\r\n    <img decoding=\"async\" src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/Asset-11.png\" alt=\"HAMA Logo\">\r\n  <\/a>\r\n\r\n  <div class=\"hama-nav-links\">\r\n    <a href=\"#\" class=\"hama-pill-outer hama-pill-normal\">\r\n      <div class=\"hama-pill-inner\">TWITTER<\/div>\r\n    <\/a>\r\n    \r\n    <a href=\"#\" class=\"hama-pill-outer hama-pill-normal\">\r\n      <div class=\"hama-pill-inner\">TELEGRAM<\/div>\r\n    <\/a>\r\n    \r\n    <a href=\"#\" class=\"hama-pill-outer hama-pill-gradient\">\r\n      <div class=\"hama-pill-inner\">BUY NOW<\/div>\r\n    <\/a>\r\n  <\/div>\r\n<\/nav>\r\n\r\n<script>\r\n\/\/ Jika sewaktu-waktu membutuhkan logic interaksi pada navbar\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const navButtons = document.querySelectorAll('.hama-pill-outer');\r\n  \r\n  \/\/ Memberikan efek click ripple\/logika ringan (Opsional)\r\n  navButtons.forEach(btn => {\r\n    btn.addEventListener('mousedown', function() {\r\n      this.style.transform = 'translateY(1px) scale(0.95)';\r\n    });\r\n    btn.addEventListener('mouseup', function() {\r\n      this.style.transform = 'translateY(-3px) scale(1)';\r\n    });\r\n    btn.addEventListener('mouseleave', function() {\r\n      this.style.transform = '';\r\n    });\r\n  });\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bebb381 e-con-full e-flex e-con e-child\" data-id=\"bebb381\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-279eb6c e-con-full e-flex e-con e-child\" data-id=\"279eb6c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-18dfbdf elementor-widget elementor-widget-heading\" data-id=\"18dfbdf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">HAMA<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-957fc5c elementor-widget elementor-widget-html\" data-id=\"957fc5c\" 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=Unbounded:wght@600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* Reset Element *\/\r\n.hama-ca-section, .hama-ca-section * {\r\n  box-sizing: border-box;\r\n  font-family: 'Unbounded', sans-serif;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n\/* Container Menyamping (Ukurannya Mengikuti Konten, Tidak Full Width) *\/\r\n.hama-ca-row-compact {\r\n  display: inline-flex;\r\n  gap: 12px; \/* Jarak antara kotak CA dan tombol Copy *\/\r\n  align-items: center;\r\n}\r\n\r\n\/* === 1. PILL LUAR & DALAM UNTUK CA: NULL === *\/\r\n.hama-ca-outer-box {\r\n  background: rgba(255, 255, 255, 0.25);\r\n  border: 1px solid #ffffff; \/* Border tipis 1px *\/\r\n  border-radius: 999px;\r\n  padding: 5px; \/* Jarak pill luar ke dalam *\/\r\n  display: flex;\r\n}\r\n\r\n.hama-ca-inner-white {\r\n  background: #ffffff; \/* Warna putih polos *\/\r\n  border-radius: 999px;\r\n  padding: 12px 24px;\r\n  color: #333333;\r\n  font-weight: 700;\r\n  font-size: 14px;\r\n  letter-spacing: 0.05em;\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 240px; \/* Menjaga ukuran box text tetap ideal *\/\r\n}\r\n\r\n.hama-ca-text-value {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  width: 100%;\r\n}\r\n\r\n\/* === 2. PILL LUAR & DALAM UNTUK TOMBOL COPY === *\/\r\n.hama-copy-outer-btn {\r\n  background: rgba(255, 255, 255, 0.25);\r\n  border: 1px solid #ffffff; \/* Border tipis 1px *\/\r\n  border-radius: 999px;\r\n  padding: 5px; \/* Jarak pill luar ke dalam *\/\r\n  display: inline-flex;\r\n  cursor: pointer;\r\n  border-style: solid;\r\n  outline: none;\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.hama-copy-inner-gradient {\r\n  background: linear-gradient(90deg, #FCD208 0%, #FC6005 100%); \/* Gradien *\/\r\n  border-radius: 999px;\r\n  color: #ffffff;\r\n  padding: 12px 32px;\r\n  font-weight: 800;\r\n  font-size: 14px;\r\n  letter-spacing: 0.05em;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n\/* Efek interaksi tombol Copy *\/\r\n.hama-copy-outer-btn:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);\r\n}\r\n.hama-copy-outer-btn:hover .hama-copy-inner-gradient {\r\n  transform: scale(0.98);\r\n}\r\n.hama-copy-outer-btn:active {\r\n  transform: translateY(1px) scale(0.95);\r\n}\r\n\r\n\/* Responsive Mobile Layout *\/\r\n@media (max-width: 576px) {\r\n  .hama-ca-row-compact {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    width: 100%;\r\n  }\r\n  .hama-ca-inner-white {\r\n    min-width: unset;\r\n    justify-content: center;\r\n  }\r\n  .hama-copy-outer-btn, .hama-copy-inner-gradient {\r\n    width: 100%;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"hama-ca-section\">\r\n  <div class=\"hama-ca-row-compact\">\r\n    \r\n    <div class=\"hama-ca-outer-box\">\r\n      <div class=\"hama-ca-inner-white\">\r\n        <span class=\"hama-ca-text-value\" id=\"hamaCaValueText\">CA: NULL<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <button class=\"hama-copy-outer-btn\" id=\"hamaCopyTriggerBtn\">\r\n      <div class=\"hama-copy-inner-gradient\" id=\"hamaCopyBtnText\">\r\n        COPY\r\n      <\/div>\r\n    <\/button>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const btnTrigger = document.getElementById('hamaCopyTriggerBtn');\r\n  const btnText = document.getElementById('hamaCopyBtnText');\r\n  \r\n  \/\/ Ganti value ini dengan Contract Address (CA) HAMA yang aslinya nanti\r\n  const contractAddress = \"NULL\"; \r\n\r\n  btnTrigger.addEventListener('click', () => {\r\n    if (navigator.clipboard && navigator.clipboard.writeText) {\r\n      navigator.clipboard.writeText(contractAddress).then(() => {\r\n        showCopiedFeedback();\r\n      }).catch(err => {\r\n        fallbackCopy();\r\n      });\r\n    } else {\r\n      fallbackCopy();\r\n    }\r\n  });\r\n\r\n  function showCopiedFeedback() {\r\n    const originalText = btnText.innerText;\r\n    btnText.innerText = \"COPIED!\";\r\n    setTimeout(() => {\r\n      btnText.innerText = originalText;\r\n    }, 2000);\r\n  }\r\n\r\n  function fallbackCopy() {\r\n    const tempInput = document.createElement(\"input\");\r\n    tempInput.value = contractAddress;\r\n    document.body.appendChild(tempInput);\r\n    tempInput.select();\r\n    try {\r\n      document.execCommand(\"copy\");\r\n      showCopiedFeedback();\r\n    } catch (err) {\r\n      console.error(\"Fallback copy gagal\", err);\r\n    }\r\n    document.body.removeChild(tempInput);\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-733fbdc e-con-full e-flex e-con e-child\" data-id=\"733fbdc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe60cc7 elementor-widget elementor-widget-html\" data-id=\"fe60cc7\" 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=Unbounded:wght@400;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* === RESET & FONT === *\/\r\n.hama-slider-wrapper-main, .hama-slider-wrapper-main * { \r\n  box-sizing: border-box; \r\n  font-family: 'Unbounded', sans-serif; \r\n}\r\n\r\n.hama-slider-wrapper-main {\r\n  position: relative;\r\n  width: 100%;\r\n  padding: 0px 0; \r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n\/* === SLIDER VIEWPORT COMPONENT === *\/\r\n.hama-slider-viewport {\r\n  width: 100%;\r\n  max-width: 650px; \r\n  overflow: hidden; \r\n  \r\n  \/* Jarak aman agar gambar overlapping & shadow tidak terpotong *\/\r\n  padding: 120px 0 50px 0; \r\n  margin: -120px 0 -50px 0; \r\n\r\n  \/* Efek Fade Out di kanan dan kiri menggunakan CSS Masking *\/\r\n  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);\r\n  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);\r\n}\r\n\r\n\/* Track slider *\/\r\n.hama-slider-track {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px; \r\n  width: max-content;\r\n  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); \r\n}\r\n\r\n\/* === DOUBLE OUTER CARD STYLE (GAYA BUTTON COPY CA) === *\/\r\n.hama-card-outer {\r\n  width: min(75vw, 280px); \r\n  flex: 0 0 auto;\r\n  \r\n  background: rgba(255, 255, 255, 0.25); \/* Outer layer putih transparan *\/\r\n  border: 1px solid #ffffff; \/* Border tipis 1px *\/\r\n  border-radius: 32px;\r\n  padding: 6px; \r\n  \r\n  cursor: pointer;\r\n  transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;\r\n  position: relative;\r\n  opacity: 0.5; \r\n  transform: scale(0.85); \r\n}\r\n\r\n\/* State ketika card berada di tengah (Aktif) *\/\r\n.hama-card-outer.active-slide {\r\n  opacity: 1;\r\n  transform: scale(1);\r\n}\r\n\r\n\/* Inner element card warna gradasi *\/\r\n.hama-card-inner {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 260px; \r\n  border-radius: 24px;\r\n  background: linear-gradient(135deg, #ffd24a 0%, #ff7a1a 100%);\r\n  border: 4px solid #fff; \r\n  overflow: visible;\r\n  display: flex;\r\n  align-items: flex-end;\r\n  padding: 20px;\r\n}\r\n\r\n\/* Animasi angkat saat hover pada card aktif *\/\r\n.hama-card-outer.active-slide:hover {\r\n  transform: scale(1.02) translateY(-5px);\r\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);\r\n}\r\n\r\n\/* Gambar Overlapping *\/\r\n.hama-card-avatar {\r\n  position: absolute;\r\n  bottom: -2%;\r\n  left: -5%;\r\n  width: 90%;\r\n  height: 125%;\r\n  object-fit: contain;\r\n  object-position: bottom left;\r\n  pointer-events: none;\r\n  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));\r\n  transition: transform 0.4s ease;\r\n}\r\n\r\n.hama-card-outer.active-slide:hover .hama-card-avatar {\r\n  transform: translateY(-5px) scale(1.04);\r\n}\r\n\r\n\/* Label Teks Samping Vertikal *\/\r\n.hama-card-label {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 15px;\r\n  bottom: 15px;\r\n  writing-mode: vertical-rl;\r\n  transform: rotate(180deg);\r\n  font-weight: 900;\r\n  font-size: clamp(24px, 5vw, 32px);\r\n  color: #fff;\r\n  letter-spacing: 0.02em;\r\n  line-height: 0.95;\r\n  text-align: center;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-shadow: 0 2px 6px rgba(0,0,0,0.15);\r\n}\r\n\r\n\/* === INDICATOR DOTS (FIXED CLICK LAYER) === *\/\r\n.hama-dots-row {\r\n  display: flex;\r\n  gap: 8px;\r\n  margin-top: 25px;\r\n  position: relative; \/* Membuat layer tersendiri *\/\r\n  z-index: 10;        \/* Menaikkan layer di atas margin negatif viewport *\/\r\n  pointer-events: auto; \/* Memastikan paksa agar bisa menerima klik *\/\r\n}\r\n.hama-dot {\r\n  width: 12px;\r\n  height: 12px;\r\n  background: rgba(255, 255, 255, 0.4);\r\n  border: 2px solid #2a2a2a;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n}\r\n.hama-dot.active {\r\n  background: #ff7a1a;\r\n  width: 28px;\r\n  border-radius: 10px;\r\n}\r\n\r\n\/* === POPUP MODAL === *\/\r\n.hama-modal {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: rgba(0,0,0,0.65);\r\n  backdrop-filter: blur(6px);\r\n  -webkit-backdrop-filter: blur(6px);\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 99999;\r\n  padding: 20px;\r\n  animation: hamaFade .25s ease;\r\n}\r\n.hama-modal.active { display: flex; }\r\n@keyframes hamaFade { from{opacity:0} to{opacity:1} }\r\n\r\n.hama-modal-content {\r\n  background: linear-gradient(180deg,#fff7e6 0%, #ffe0a8 100%);\r\n  border: 4px solid #ff7a1a;\r\n  border-radius: 24px;\r\n  max-width: 880px;\r\n  width: 100%;\r\n  max-height: 88vh;\r\n  overflow-y: auto;\r\n  padding: 36px 40px;\r\n  position: relative;\r\n  box-shadow: 0 30px 80px rgba(0,0,0,0.4);\r\n  color: #4a2a00;\r\n  animation: hamaPop .3s ease;\r\n}\r\n@keyframes hamaPop { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }\r\n\r\n.hama-modal-close {\r\n  position: absolute;\r\n  top: 14px; right: 14px;\r\n  width: 42px; height: 42px;\r\n  border-radius: 50%;\r\n  border: none;\r\n  background: #ff6a00;\r\n  color: #fff;\r\n  font-size: 24px;\r\n  font-weight: 800;\r\n  cursor: pointer;\r\n  display: flex; align-items: center; justify-content: center;\r\n  box-shadow: 0 4px 12px rgba(0,0,0,0.2);\r\n  transition: transform 0.2s;\r\n}\r\n.hama-modal-close:hover { background: #e85a00; transform: scale(1.1) rotate(90deg); }\r\n\r\n.hama-modal-title {\r\n  font-weight: 900;\r\n  font-size: clamp(28px, 4vw, 44px);\r\n  color: #ff6a00;\r\n  margin: 0 0 18px 0;\r\n  letter-spacing: 0.02em;\r\n}\r\n.hama-modal-body {\r\n  font-weight: 400;\r\n  font-size: 15px;\r\n  line-height: 1.7;\r\n  color: #4a2a00;\r\n}\r\n.hama-modal-body p { margin: 0 0 14px 0; }\r\n.hama-modal-body strong { font-weight: 800; color: #c94500; }\r\n.hama-modal-body h3 {\r\n  font-weight: 800;\r\n  font-size: 18px;\r\n  color: #ff6a00;\r\n  margin: 18px 0 8px 0;\r\n}\r\n\r\n.hama-gallery-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 14px;\r\n  margin-top: 10px;\r\n}\r\n.hama-gallery-grid video {\r\n  width: 100%;\r\n  aspect-ratio: 1 \/ 1;\r\n  object-fit: cover;\r\n  border-radius: 14px;\r\n  border: 3px solid #ff7a1a;\r\n  background: #000;\r\n  cursor: pointer;\r\n  transition: transform .2s ease;\r\n}\r\n.hama-gallery-grid video:hover { transform: scale(1.04); }\r\n\r\n@media (max-width: 576px) {\r\n  .hama-modal-content { padding: 26px 20px; }\r\n  .hama-gallery-grid { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n<\/style>\r\n\r\n<div class=\"hama-slider-wrapper-main\">\r\n  \r\n  <div class=\"hama-slider-viewport\" id=\"hamaViewport\">\r\n    <div class=\"hama-slider-track\" id=\"hamaTrack\">\r\n      \r\n      <div class=\"hama-card-outer\" data-popup=\"about\">\r\n        <div class=\"hama-card-inner\">\r\n          <img decoding=\"async\" class=\"hama-card-avatar\" src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/Asset-5.png\" alt=\"About HAMA\">\r\n          <div class=\"hama-card-label\">ABOUT<br>HAMA<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hama-card-outer\" data-popup=\"tokenomics\">\r\n        <div class=\"hama-card-inner\">\r\n          <img decoding=\"async\" class=\"hama-card-avatar\" src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/Asset-6.png\" alt=\"Tokenomics\">\r\n          <div class=\"hama-card-label\">TOKEN<br>OMICS<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hama-card-outer\" data-popup=\"gallery\">\r\n        <div class=\"hama-card-inner\">\r\n          <img decoding=\"async\" class=\"hama-card-avatar\" src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/Asset-7.png\" alt=\"Gallery\">\r\n          <div class=\"hama-card-label\">HAMA<br>STAGE<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"hama-dots-row\" id=\"hamaDots\">\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"hama-modal\" id=\"hamaModal\">\r\n  <div class=\"hama-modal-content\">\r\n    <button class=\"hama-modal-close\" id=\"hamaModalClose\">&times;<\/button>\r\n    <h2 class=\"hama-modal-title\" id=\"hamaModalTitle\"><\/h2>\r\n    <div class=\"hama-modal-body\" id=\"hamaModalBody\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const popupContentMap = {\r\n    about: {\r\n      title: \"ABOUT HAMA\",\r\n      html: `\r\n        <h3>Born to Dance, Built to Vibe<\/h3>\r\n        <p>At first glance, <strong>HAMA<\/strong> looks like your typical chubby, good boy who loves a solid nap. But the moment a beat drops, he turns any spot into a dance floor.<\/p>\r\n        <p>HAMA doesn't chase tennis balls; he chases the groove. For him, no matter how crazy the day - or the market - gets, the secret is simple: just ride the rhythm, keep the energy high, and dance it out.<\/p>\r\n        <p>Now, HAMA is bringing his unstoppable moves to Web3. It's not just about a token; it's about a solid community, good vibes, and moving forward together without sweating the small stuff.<\/p>\r\n        <p><strong>Drop the beat. Join the movement.<\/strong><\/p>\r\n      `\r\n    },\r\n    tokenomics: {\r\n      title: \"TOKENOMICS\",\r\n      html: `\r\n        <p><strong>0% Tax:<\/strong> No hidden steps here. Zero taxes on buys and sells so you can trade freely.<\/p>\r\n        <p><strong>LP Burned:<\/strong> Liquidity pool is 100% burned. Safe, locked in, and ready to roll.<\/p>\r\n        <p><strong>Contract Renounced:<\/strong> HAMA belongs to the dancers. The community is in full control of the stage.<\/p>\r\n        <p><strong>Powered by Solana:<\/strong> Built on the Solana blockchain for lightning-fast speeds and fees lower than a dog's bark.<\/p>\r\n      `\r\n    },\r\n    gallery: {\r\n      title: \"HAMA STAGE\",\r\n      html: `\r\n        <div class=\"hama-gallery-grid\">\r\n          <video src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/HAMA1.mp4\" autoplay muted loop playsinline><\/video>\r\n          <video src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/HAMA2.mp4\" autoplay muted loop playsinline><\/video>\r\n          <video src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/HAMA3.mp4\" autoplay muted loop playsinline><\/video>\r\n          <video src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/HAMA4.mp4\" autoplay muted loop playsinline><\/video>\r\n          <video src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/HAMA5.mp4\" autoplay muted loop playsinline><\/video>\r\n          <video src=\"https:\/\/hamadog.fun\/wp-content\/uploads\/2026\/06\/HAMA6.mp4\" autoplay muted loop playsinline><\/video>\r\n        <\/div>\r\n      `\r\n    }\r\n  };\r\n\r\n  \/\/ ===== ENGINE SLIDER =====\r\n  const track = document.getElementById('hamaTrack');\r\n  const viewport = document.getElementById('hamaViewport');\r\n  const dotsContainer = document.getElementById('hamaDots');\r\n  const cards = document.querySelectorAll('.hama-card-outer');\r\n  \r\n  let slideIndex = 0;\r\n  const slideCount = cards.length;\r\n  let autoPlayTimer = null;\r\n  const playSpeed = 3000; \r\n\r\n  \/\/ Generate Dots Manual Clickable\r\n  cards.forEach((_, idx) => {\r\n    const dot = document.createElement('div');\r\n    dot.classList.add('hama-dot');\r\n    if (idx === 0) dot.classList.add('active');\r\n    \r\n    \/\/ Fungsi Klik manual pada dot indikator\r\n    dot.addEventListener('click', (e) => {\r\n      e.stopPropagation();\r\n      renderSlide(idx);\r\n      startAutoCycle();\r\n    });\r\n    \r\n    dotsContainer.appendChild(dot);\r\n  });\r\n  \r\n  const dots = document.querySelectorAll('.hama-dot');\r\n\r\n  function renderSlide(targetIndex) {\r\n    slideIndex = targetIndex;\r\n    \r\n    const cardWidth = cards[0].offsetWidth;\r\n    const gap = parseInt(window.getComputedStyle(track).gap) || 20; \r\n    const viewportWidth = viewport.offsetWidth;\r\n    \r\n    const centerOffset = (viewportWidth \/ 2) - (cardWidth \/ 2);\r\n    const moveAmount = slideIndex * (cardWidth + gap);\r\n    const finalTranslate = centerOffset - moveAmount;\r\n    \r\n    track.style.transform = `translateX(${finalTranslate}px)`;\r\n    \r\n    dots.forEach((dot, index) => {\r\n      dot.classList.toggle('active', index === slideIndex);\r\n    });\r\n    \r\n    cards.forEach((c, index) => {\r\n      c.classList.toggle('active-slide', index === slideIndex);\r\n    });\r\n  }\r\n\r\n  function startAutoCycle() {\r\n    stopAutoCycle();\r\n    autoPlayTimer = setInterval(() => {\r\n      let nextIndex = (slideIndex + 1) % slideCount;\r\n      renderSlide(nextIndex);\r\n    }, playSpeed);\r\n  }\r\n\r\n  function stopAutoCycle() {\r\n    if (autoPlayTimer) clearInterval(autoPlayTimer);\r\n  }\r\n\r\n  \/\/ Klik card area\r\n  cards.forEach((card, index) => {\r\n    card.addEventListener('click', () => {\r\n      if (index !== slideIndex) {\r\n        renderSlide(index);\r\n        startAutoCycle();\r\n      } else {\r\n        const key = card.getAttribute('data-popup');\r\n        if (!popupContentMap[key]) return;\r\n        \r\n        document.getElementById('hamaModalTitle').innerHTML = popupContentMap[key].title;\r\n        document.getElementById('hamaModalBody').innerHTML = popupContentMap[key].html;\r\n        document.getElementById('hamaModal').classList.add('active');\r\n        document.body.style.overflow = 'hidden';\r\n        stopAutoCycle();\r\n      }\r\n    });\r\n  });\r\n\r\n  window.addEventListener('resize', () => renderSlide(slideIndex));\r\n  viewport.addEventListener('mouseenter', stopAutoCycle);\r\n  viewport.addEventListener('mouseleave', startAutoCycle);\r\n\r\n  setTimeout(() => renderSlide(0), 100);\r\n  startAutoCycle();\r\n\r\n  \/\/ ===== POPUP MODAL CONTROL =====\r\n  const modal = document.getElementById('hamaModal');\r\n  const modalClose = document.getElementById('hamaModalClose');\r\n\r\n  function shutModal() {\r\n    modal.classList.remove('active');\r\n    document.getElementById('hamaModalBody').innerHTML = '';\r\n    document.body.style.overflow = '';\r\n    startAutoCycle();\r\n  }\r\n\r\n  modalClose.addEventListener('click', shutModal);\r\n  modal.addEventListener('click', (e) => { if (e.target === modal) shutModal(); });\r\n  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') shutModal(); });\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>TWITTER TELEGRAM BUY NOW HAMA CA: NULL COPY ABOUTHAMA TOKENOMICS HAMASTAGE &times;<\/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:\/\/hamadog.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hamadog.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hamadog.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hamadog.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hamadog.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":31,"href":"https:\/\/hamadog.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":59,"href":"https:\/\/hamadog.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/59"}],"wp:attachment":[{"href":"https:\/\/hamadog.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}