/* DGAMING — Glossy Neon Buttons */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 50px;
  transition: transform .2s, filter .2s, box-shadow .2s;
}

.button::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 9%;
  width: 82%;
  height: 44%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.9),
    rgba(255,255,255,.2),
    transparent
  );
  pointer-events: none;
}

.button::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -65%;
  left: -85%;
  width: 43%;
  height: 230%;
  transform: rotate(24deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.98),
    transparent
  );
  animation: dgaming-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}

.button-gold {
  color: #17213a;
  border: 1px solid #fff7c9;
  background: linear-gradient(
    180deg,
    #fff9d6 0%,
    #ffe88a 16%,
    #f8d05b 42%,
    #e9a92f 76%,
    #b97919 100%
  );
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 #7e480466,
    0 4px 0 #8c5a12,
    0 0 14px #ffda5bcc,
    0 0 30px #ffbe2a77;
}

.button-cyan {
  color: #052144;
  border: 1px solid #d8ffff;
  background: linear-gradient(
    180deg,
    #f4ffff 0%,
    #91f9ff 15%,
    #36e7ff 43%,
    #00b8eb 72%,
    #0877bd 100%
  );
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 #004b8b66,
    0 4px 0 #075c99,
    0 0 14px #36e7ffdd,
    0 0 30px #00cdff85;
}

.button:hover {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.15);
}

.button:active {
  transform: translateY(2px) scale(.985);
}

@keyframes dgaming-shine {
  0%, 20% { left: -85%; opacity: 0; }
  30% { opacity: 1; }
  70% { left: 145%; opacity: 1; }
  82%, 100% { left: 145%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .button::after { animation: none; }
}

/* DGAMING — Tombol PROMO Neon Gold */
.mobile-dock .dock-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid #fff4ae;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    #fffbd5 0%,
    #ffe77b 25%,
    #f5c94e 58%,
    #d99120 100%
  );
  color: #06152f;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -4px 0 #a56816,
    0 0 12px #ffdf68,
    0 0 28px #ffbd35a8,
    0 0 42px #ffbd3545;
  animation: promo-glow 2s ease-in-out infinite alternate;
}

.mobile-dock .dock-promo::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -85%;
  width: 45%;
  height: 180%;
  transform: rotate(25deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.95),
    transparent
  );
  animation: promo-shine 2.5s ease-in-out infinite;
  pointer-events: none;
}

.mobile-dock .dock-promo > span,
.mobile-dock .dock-promo small {
  position: relative;
  z-index: 2;
  color: #06152f;
}

@keyframes promo-glow {
  from {
    filter: brightness(1);
    box-shadow: 0 0 12px #ffdf68, 0 0 24px #ffbd3570;
  }
  to {
    filter: brightness(1.12);
    box-shadow: 0 0 20px #fff0a0, 0 0 38px #ffbd35bd;
  }
}

@keyframes promo-shine {
  0%, 20% { left: -85%; opacity: 0; }
  35% { opacity: 1; }
  70%, 100% { left: 145%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-dock .dock-promo,
  .mobile-dock .dock-promo::after {
    animation: none;
  }
}