/* === LAYER GLOBAL === */
.snow-wrap{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:9999;
}

/* === HUJAN NEON CYAN + GOLD + BLACK === */
.raindrop{
  position:absolute;
  top:-15vh;
  width:2px;
  height:18px;
  border-radius:50px;

  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.95),
    var(--c1),
    rgba(0,0,0,0)
  );

  box-shadow:
    0 0 6px var(--glow),
    0 0 12px var(--glow);

  opacity:.9;

  animation:
    rain-fall var(--dur) linear var(--delay) infinite,
    rain-sway var(--sway) ease-in-out infinite;
}

.raindrop.-sm{
  height:12px;
  opacity:.6;
}

.raindrop.-lg{
  height:26px;
  width:2.5px;
  opacity:1;
}

@keyframes rain-fall{
  to{
    transform:translate3d(var(--drift),115vh,0);
  }
}

@keyframes rain-sway{
  from{
    margin-left:-4px;
  }
  to{
    margin-left:4px;
  }
}

/* === KEMBANG API CYAN + GOLD === */
.firework{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  opacity:0;

  background:radial-gradient(
    circle,
    #ffffff 0%,
    var(--fw) 42%,
    transparent 72%
  );

  box-shadow:
    0 0 8px var(--fw),
    0 0 16px var(--fw);

  animation:firework-burst 1.8s ease-out forwards;
}

.firework::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;

  box-shadow:
    0 -25px 0 var(--fw),
    18px -18px 0 var(--fw),
    25px 0 0 var(--fw),
    18px 18px 0 var(--fw),
    0 25px 0 var(--fw),
    -18px 18px 0 var(--fw),
    -25px 0 0 var(--fw),
    -18px -18px 0 var(--fw);
}

@keyframes firework-burst{
  0%{
    transform:translate(-50%,-50%) scale(.2);
    opacity:0;
  }

  30%{
    opacity:1;
  }

  70%{
    transform:translate(-50%,-50%) scale(1.4);
    opacity:1;
  }

  100%{
    transform:translate(-50%,-50%) scale(2);
    opacity:0;
  }
}

/* Kurangi animasi jika perangkat/user memintanya */
@media(prefers-reduced-motion:reduce){
  .raindrop,
  .firework,
  .firework::before{
    animation:none!important;
  }
}

.btn-x{
  display:inline-block;
  min-width:200px;
  text-align:center;
  padding:14px 28px;
  margin:5px;

  /* CYAN + GOLD + BLACK */
  background:linear-gradient(
    135deg,
    #050505 0%,
    #082b2f 25%,
    #00cfd8 50%,
    #d4af37 78%,
    #8a6a00 100%
  );

  color:#ffffff;
  border:2px solid #d4af37;
  font-weight:700;
  border-radius:10px;
  text-decoration:none;

  box-shadow:
    0 3px 8px rgba(0,0,0,.75),
    0 0 10px rgba(0,229,255,.30),
    0 0 8px rgba(212,175,55,.25);

  cursor:pointer;
  transition:all .25s ease;
}

.btn-x:hover{
  background:linear-gradient(
    135deg,
    #d4af37 0%,
    #ffd966 35%,
    #00e5ff 70%,
    #008b95 100%
  );

  color:#050505;
  border-color:#00e5ff;

  box-shadow:
    0 4px 12px rgba(0,0,0,.8),
    0 0 16px rgba(0,229,255,.55),
    0 0 14px rgba(212,175,55,.45);

  transform:translateY(-2px);
}

.btn-x:active{
  transform:translateY(0);
}

/* Sembunyikan total kolom kanan di desktop kalau kosong */
.right-rail:empty,
.sidebar:empty,
.product__aside:empty {
  display:none !important;
}

/* Jika pakai grid 2 kolom, jadikan 1 kolom saat kolom kanan hilang */
.page-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}