/* Floating Menu - kiri bawah, diagonal kanan-atas (lebih rapat) */
:root{
  --btn: 64px;        /* size tombol */
  --item: 64px;       /* size icon item */
  --gap: 10px;         /* << jarak diagonal lebih rapat */
  --offset: 0px;      /* jarak panel dari tombol */
  --shadow: inset 0 0 0 2px rgba(255,179,0,.95);
  --shadowHover: inset 0 0 0 2px #ff1e1e;
}

.float-menu{
  position: fixed;
  left: 12px;
  bottom: 50px;
  z-index: 9999999;
  width: var(--btn);
  height: var(--btn);
}

/* Toggle button (image) */
.float-menu__btn{
  width: var(--btn);
  height: var(--btn);
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 12px;
  background: transparent;
  position: relative;
  z-index: 2;
  transform-origin: 50% 50%;
  transition: transform .25s ease;
}
.float-menu.is-open .float-menu__btn{ transform: scale(0.98) rotate(-2deg); }

.float-menu__btn img{
  width: var(--btn);
  height: var(--btn);
  display: block;
  border-radius: 12px;
}

.float-menu__panel{
  position: absolute;
  left: 0;  /* jangan geser ke kanan */
  bottom: calc(var(--btn) + var(--gap) + 6px); /* mulai di atas tombol */
  width: 1px;
  height: 1px;
  z-index: 1;
  pointer-events: none;
}


/* Each item positioned diagonally up-right using CSS variables */
.float-menu__item{
  position: absolute;
  width: var(--item);
  height: var(--item);
  border-radius: 12px;
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow);
  background: rgba(0,0,0,.22);

  /* hidden state */
  opacity: 0;
  transform: translate(0,0) scale(.7);
  filter: blur(2px);
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    opacity .30s ease,
    filter .35s ease;
  transition-delay: var(--delay, 0ms);
  pointer-events: none;
}

.float-menu__item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.float-menu__item:hover{ box-shadow: var(--shadowHover); }

.float-menu.is-open .float-menu__item{
  opacity: 1;
  filter: blur(0);
  transform:
    translate(
      0px,
      calc(var(--i) * -1 * (var(--item) + var(--gap)))
    )
    scale(1);
  pointer-events: auto;
}


/* Hover pop */
.float-menu.is-open .float-menu__item:hover{
  transform:
    translate(
      calc(var(--i) * (var(--item) + var(--gap))),
      calc(var(--i) * -1 * (var(--item) + var(--gap)))
    )
    scale(1.06);
}

/* Backdrop: click outside to close */
.float-menu__backdrop{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 9999998;
  background: transparent;
}
.float-menu.is-open ~ .float-menu__backdrop{ display:block; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .float-menu__btn, .float-menu__item{ transition: none !important; }
  .float-menu__item{ filter:none !important; }
}

/* ===============================
   MOBILE FINAL FIX (KE ATAS + BESAR)
   =============================== */
@media (max-width: 1024px), (hover: none) and (pointer: coarse){

  /* override ukuran khusus mobile */
  :root{
    --btn: 72px;
    --item: 78px;
    --gap: 12px;
    --offset: 0px;
  }

  /* posisi menu tetap kiri bawah */
  .float-menu{
    left: 12px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  /* panel tepat di atas tombol */
  .float-menu__panel{
    left: 0 !important;
    bottom: 0 !important;
  }

/* kasih jarak agar item pertama gak ketimpa tombol */
.float-menu__panel{
  bottom: calc(var(--btn) + 10px) !important; /* naikkan titik start */
}
.float-menu__panel{
  bottom: calc(var(--btn) + var(--gap)) !important;
}



  /* GERAK CUMA KE ATAS (X = 0) */
  .float-menu.is-open .float-menu__item{
    transform:
      translate(
        0px,
        calc(var(--i) * -1 * (var(--item) + var(--gap)))
      )
      scale(1) !important;
  }

  .float-menu.is-open .float-menu__item:hover{
    transform:
      translate(
        0px,
        calc(var(--i) * -1 * (var(--item) + var(--gap)))
      )
      scale(1.06) !important;
  }
}

/* ===============================
   MOBILE: LEBIH BESAR + KE ATAS
   =============================== */
@media (max-width: 768px){
  :root{
    --btn: 90px;   /* mobile lebih besar */
    --item: 90px;
    --gap: 12px;   /* jarak enak buat jari */
    --offset: 0px;
  }

  .float-menu{
    left: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* start panel tetap di atas tombol */
  .float-menu__panel{
    left: 0 !important;
    bottom: calc(var(--btn) + var(--gap) + 6px) !important;
  }
}