/* ==========================================================
   SAMAKU PREMIUM NAV V2
   4 tombol benar-benar simetris
   ========================================================== */

.samaku-pro-nav-bar {
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  align-items: stretch !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 5px 8px calc(5px + env(safe-area-inset-bottom)) !important;

  gap: 0 !important;

  background:
    linear-gradient(
      180deg,
      rgba(13,15,22,.96),
      rgba(8,9,14,.985)
    ) !important;

  border-top:
    1px solid rgba(255,255,255,.055) !important;

  box-shadow:
    0 -8px 30px rgba(0,0,0,.18) !important;
}


.samaku-pro-nav-item {
  box-sizing: border-box !important;

  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;

  height: 64px !important;
  min-height: 64px !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 4px !important;

  border: 0 !important;

  background: transparent !important;

  color: #687080 !important;

  text-align: center !important;
  text-decoration: none !important;

  overflow: visible !important;

  -webkit-tap-highlight-color: transparent;

  transition:
    color .18s ease !important;
}


/* hapus efek layout dari CSS lama */

.samaku-pro-nav-item > * {
  box-sizing: border-box;
}


/* ==========================================================
   ACTIVE BACKGROUND
   ========================================================== */

.samaku-nav-active-bg {
  position: absolute;

  top: 5px;
  left: 50%;

  width: 52px;
  height: 38px;

  transform: translateX(-50%);

  border-radius: 14px;

  background: transparent;

  opacity: 0;

  pointer-events: none;

  transition: .2s ease;
}


.samaku-nav-active
.samaku-nav-active-bg {
  opacity: 1;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(93,235,184,.13),
      rgba(93,235,184,.02) 70%
    );

  box-shadow:
    0 0 20px rgba(80,225,171,.08);
}


/* ==========================================================
   ICON
   ========================================================== */

.samaku-nav-icon {
  position: relative;
  z-index: 2;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 28px !important;

  width: 28px !important;
  height: 28px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
}


.samaku-nav-icon svg {
  display: block !important;

  width: 21px !important;
  height: 21px !important;

  margin: 0 !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 1.8 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


.samaku-nav-active
.samaku-nav-icon {
  color: #69e8b4 !important;
}


/* ==========================================================
   LABEL
   ========================================================== */

.samaku-nav-label {
  position: relative;
  z-index: 2;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  font-size: 8px !important;
  line-height: 11px !important;

  font-weight: 850 !important;

  letter-spacing: .055em !important;

  text-align: center !important;

  white-space: nowrap !important;
}


.samaku-nav-active
.samaku-nav-label {
  color: #dafa53 !important;
}


/* ==========================================================
   ACTIVE INDICATOR
   ========================================================== */

.samaku-nav-indicator {
  position: absolute;

  bottom: 1px;
  left: 50%;

  width: 16px;
  height: 2px;

  transform:
    translateX(-50%)
    scaleX(0);

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #57dfaa,
      #dafa53
    );

  opacity: 0;

  box-shadow:
    0 0 9px rgba(96,227,173,.55);

  transition:
    .18s ease;
}


.samaku-nav-active
.samaku-nav-indicator {
  opacity: 1;

  transform:
    translateX(-50%)
    scaleX(1);
}


/* ==========================================================
   TAP
   Tidak mengubah ukuran/layout tombol
   ========================================================== */

.samaku-pro-nav-item:active
.samaku-nav-icon {
  transform: scale(.9);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:600px) {

  .samaku-pro-nav-bar {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .samaku-pro-nav-item {
    height: 67px !important;
    min-height: 67px !important;
  }

  .samaku-nav-icon {
    width: 29px !important;
    height: 29px !important;
  }

  .samaku-nav-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .samaku-nav-label {
    font-size: 8px !important;
  }
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width:601px) {

  .samaku-pro-nav-bar {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .samaku-pro-nav-item {
    height: 62px !important;
    min-height: 62px !important;
  }
}