/* =========================
   Porta — MAIN STYLES
   ========================= */

/* Reset & base */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: hidden;
  background: url(../img/background.gif) center center / cover no-repeat;
}
/* =========================
   LOADING OVERLAY
   - HTML: <div id="loading"><img ...></div>
   - Hilang otomatis kalau body diberi class .is-loaded
   ========================= */
#loading {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(6px);
  transition: opacity .35s ease, visibility .35s ease;
}
#loading img {
  width: auto;
  height: auto;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.45));
  animation: loader-pop .6s ease both;
}
@keyframes loader-pop {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
/* ===== Popup Base ===== */
.popup-overlay[hidden],
.popup-dialog[hidden] { display: none; }

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  z-index: 9998;
}

.popup-dialog {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.popup-card {
  position: relative;
  max-width: min(92vw, 960px);
  max-height: 92vh;
  background: #0d0d0d;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.popup-media {
  display: block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
}

.popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  border-radius: 10px;
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
}
.popup-close:focus-visible { 
  outline: 2px solid #6cf; 
  outline-offset: 2px; 
}

/* ============ GLOBAL BASE ============ */
img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* Accessible focus */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #67e8f9;
  outline-offset: 4px;
  border-radius: 10px;
}

/* ====== Variables (posisi gampang diubah) ====== */
:root {
  --socials-top: 24px;
  --socials-left: 24px;
  --social-size: 44px;
  --social-gap: 12px;

  --about-top: 340px;
  --about-left: 370px;
  --about-width: auto; /* max 36vw */

  --table-max-w: 890px;
  --table-h-margin: 0px;
  --table-side-pad: 0px;

  /* Rasio kanvas meja agar anchor stabil (ubah sesuai rasio gambar table.png) */
  --table-aspect-w: 1920;
  --table-aspect-h: 1080;

  /* Injection positions (relatif ke .table-section) */
  --inj1-left: 5%;
  --inj1-top: 28%;
  --inj1-w: 25%;
  

  --inj2-left: 18%;
  --inj2-top: 32%;
  --inj2-w: 25%;
  --inj2-rot: -15deg;

  --inj3-left: 45%;
  --inj3-top: 40%;
  --inj3-w: 25%;
  --inj3-rot: 4deg;
}

/* ============ SOCIALS ============ */
/* FIXED supaya tidak mempengaruhi flow dan stabil saat digeser */
.socials {
  position: relative;
  top: var(--socials-top);
  left: var(--socials-left);
  display: flex;
  flex-direction: column;
  gap: var(--social-gap);
  z-index: 50;
  margin: 0; /* pastikan tidak ada margin yang ngedorong layout */
}
.socials > div { position: relative; }
.socials a {
  display: inline-block;
}
.socials a img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  transition: transform .18s ease, filter .18s ease;
  pointer-events: none; 
}
.socials a:hover img { 
  transform: translateY(-2px); 
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); 
}
.social-solana { 
  filter: drop-shadow(0 6px 18px rgba(0,128,255,.35));
  position: relative;
  top: 55px;
  left: 1495px;
  width: 180px;
}
.social-x { 
  filter: drop-shadow(0 6px 18px rgba(255,255,255,.35));
  position: relative;
  top: 90px;
  left: 1475px;
  width: 45px;
}

.social-dexscreener { 
  filter: drop-shadow(0 6px 18px rgba(255,255,255,.35));
  position: relative;
  top: 20px;
  left: 1600px;
  width: 60px;
}
.social-pumpfun { 
  filter: drop-shadow(0 6px 18px rgba(255,255,255,.35));
  position: relative;
  top: 195px;
  left: 1160px;
  width: 60px;
}

/* ============ ABOUT ============ */
.about {
  position: fixed;
  top: var(--about-top);
  left: var(--about-left);
  z-index: 40;
  margin: 0;
}
.about-img-text { position: relative; }
.about-button {
  position: relative;
  display: inline-block;
  width: var(--about-width);
  max-width: 36vw;
}
.about-button img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
  transition: transform .2s ease, filter .2s ease;
  pointer-events: none; /* klik ke tombolnya saja */
}
.about-button:hover img { transform: translateY(-3px) scale(1.02); filter: drop-shadow(0 14px 28px rgba(0,0,0,.45)); }

/* ============ TABLE ANCHOR ============ */
.table {
  position: relative;
  width: min(var(--table-max-w), 102vw);
  top: 320px;
  padding-inline: var(--table-side-pad);
  z-index: 10;
}

/* Kunci area kerja dengan aspect-ratio agar posisi absolute stabil */
.table-section {
  position: relative;
  width: 100%;
  aspect-ratio: calc(var(--table-aspect-w) / var(--table-aspect-h));
  /* fallback untuk browser tua: kalau perlu bisa pakai ::before padding-top trick */
}

/* Gambar meja jadi background layer, tidak mengganggu klik */
.main-table {
  position: absolute;
  inset: 0;
}
.main-table img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* atau cover sesuai kebutuhan */
  display: block;
  pointer-events: none;  /* biar klik tidak ketahan di img */
  user-select: none;
}

/* ============ INJECTIONS (absolute di atas kanvas) ============ */
/* Seluruh injection absolute & tanpa margin supaya geser tidak mengubah layout */
.injection-1,
.injection-2,
.injection-3 {
  position: absolute;
  z-index: 20;
  margin: 0;
  will-change: left, top, transform, width;
  transition: left .25s ease, top .25s ease, transform .25s ease, width .25s ease;
}

.injection-1 {
  left: var(--inj1-left);
  top: var(--inj1-top);
  width:var(--inj1-w);
  transform: rotate(var(--inj1-rot));
  transform-origin: 50% 50%;
}

.injection-2 {
  left: var(--inj2-left);
  top: var(--inj2-top);
  width: var(--inj2-w);
  transform: rotate(var(--inj2-rot));
  transform-origin: 50% 50%;
}

.injection-3 {
  left: var(--inj3-left);
  top: var(--inj3-top);
  width: var(--inj3-w);
  transform: rotate(var(--inj3-rot));
  transform-origin: 50% 50%;
}

.injection-button {
  position: relative; /* micro-offset jika perlu */
  display: block;
  line-height: 0;
}
.injection-button img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.5));
  transition: transform .18s ease, filter .18s ease;
  pointer-events: none; /* klik ke button, bukan ke img */
}
.injection-button:hover img { transform: translateY(-2px); filter: drop-shadow(0 16px 32px rgba(0,0,0,.55)); }

/* =========================
   CONTRACT ADDRESS (CA) BUTTON
   ========================= */
:root{
  /* mudah dipindah */
  --ca-top: 24px;
  --ca-left: 50%;
  --ca-translate-x: -50%;
  --ca-width: 70px; /* lebar gambar tombol */
  --ca-z: 45;
}

.ca-addres{
  position: fixed;          /* tidak mengganggu layout */
  top: 493px;
  left: 1606px;
  transform: translateX(var(--ca-translate-x));
  z-index: var(--ca-z);
  margin: 0;
}

.ca-img{ position: relative; }

.ca-button{
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 12px;
  outline: none;
}

.ca-button img{
  width: var(--ca-width);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
  transition: transform .18s ease, filter .18s ease;
  pointer-events: none; /* klik ke button */
}

.ca-button:hover img{
  transform: translateY(-2px) scale(1.01);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
}

/* Tooltip “Copied!” muncul setelah sukses */
.ca-button::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  background: rgba(10,12,18,.9);
  color: #fff;
  font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

/* state saat sudah di-copy */
.ca-button[data-copied="true"]::after{
  content: "Copied!";
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* kecilkan di mobile */
@media (max-width: 560px){
  :root{ --ca-width: 180px; }
}