/* ═══════════════════════════
   SIDEBAR FINAL (ULTIMATE CLEAN - FIXED SPLASH)
═══════════════════════════ */
.sidebar {
  width: 100px;     
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  padding: 10px 0;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  height: fit-content;
  max-height: 90vh;

  overflow: visible;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.hero .sidebar {
  position: absolute;
  left: 110px;     /* geser kiri */
  top: 150px;     /* turunin */
  transform: none;
  z-index: 10;
}

/* ── ITEM ── */
.sidebar-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;   /* ← ini yang bikin rata tengah */
  justify-content: center;  /* ← tambah ini */
  padding: 18px 0 12px;
  cursor: pointer;
  transition: 0.25s ease;
  overflow: visible;  /* ← tambah ini */
  text-decoration: none;
}

/* ── ICON WRAPPER ── */
.sidebar-icon-wrap {
  position: relative;
  width: 75px;
  height: 80px;

  display: flex;
  align-items: center;
  justify-content: center;  /* ← tambah ini */
  margin: 0 auto;           /* ← tambah ini */

  /* 🔥 INI PENTING */
  overflow: visible;
}

/* ═══════════════════════════
   🔥 SPLASH OUTLINE (3 LAYER)
═══════════════════════════ */
/* SPLASH WRAPPER */
.sidebar-splash {
  position: absolute;

  width: 75px;   /* 🔥 samakan dengan SVG */
  height: 80px;  /* 🔥 samakan dengan viewBox */

  top: 50%;
  left: 50%;

  transform: translate(-30%, -30%) scale(0);
  transform-origin: center; /* 🔥 biar scaling nggak geser */

  z-index: 0;
  pointer-events: none;
}

/* SVG HEX */
.sidebar-splash svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sidebar-splash polygon {
  fill: none;
  stroke: rgb(255, 255, 255); /* putih */
  stroke-width: 1.3;
}

/* ANIMASI */
@keyframes splashWave {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.6;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0;
  }
}

/* LOOP */
.sidebar-item:not(.active) .splash-1 {
  animation: splashWave 2.4s ease-out infinite;
}
.sidebar-item:not(.active) .splash-2 {
  animation: splashWave 2.4s ease-out infinite;
  animation-delay: 0.7s;
}
.sidebar-item:not(.active) .splash-3 {
  animation: splashWave 2.4s ease-out infinite;
  animation-delay: 1.5s;
}

/* STOP SAAT ACTIVE */
.sidebar-item.active .sidebar-splash {
  animation: none;
}

/* ═══════════════════════════
   HEX & ICON
═══════════════════════════ */

/* HEX KUNING */
.sidebar-hex-ring {
  position: absolute;
  place-items: center;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: none;
  transform: translateY(0.3px);
}

/* HEX BG */
.sidebar-hex-fill {
  position: absolute;
  width: 55px;
  height: 62px;
  top: 50%;
  left: 50%;
  transform: translate(-49%, -49%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 3;

  background: #ffffff;
  transition: 0.3s ease;
}

/* ICON */
.sidebar-icon-img {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 5; /* 🔥 paling atas */

  filter: invert(48%) sepia(92%) saturate(400%) hue-rotate(120deg);
  transition: 0.3s ease;
}

/* ── ACTIVE ── */
.sidebar-item.active .sidebar-hex-ring {
  display: block;
}

.sidebar-item.active .sidebar-hex-fill {
  background: #17b8a6;
}

.sidebar-item.active .sidebar-icon-img {
  filter: brightness(0) invert(1);
}

/* ── LABEL ── */
.sidebar-label {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #17b8a6;
}