/* ==============================
   Bebiri World Button Styles (v4.3)
   ------------------------------
   11 distinct styles, amber gold preserved.
   ============================== */

/* Variables */
:root{
  --sticky-offset:96px;
  --amber:#ffd277; --amber-dark:#b66f00;
  --btn-w:clamp(190px,30vw,230px);
  --btn-h:clamp(52px,7vw,60px);
  --btn-fs:clamp(18px,2.2vw,18px);
}
#pakej{scroll-margin-top:var(--sticky-offset)}
.bw-btn-wrap{text-align:center}

/* Base Button */
.bw-btn{
  position:relative; display:inline-flex; justify-content:center; align-items:center;
  width:var(--btn-w); height:var(--btn-h);
  border-radius:14px; border:0; overflow:hidden; cursor:pointer;
  font:600 var(--btn-fs)/1.0 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  text-transform:uppercase; letter-spacing:.3px; text-decoration:none;
  z-index:10;        /* lebih tinggi daripada shine-glass (4) */
  color:#fff !important;
  background:linear-gradient(180deg,#3e2723,#1b0000);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  transition:.35s;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.bw-btn:hover{ transform:translateY(-2px); }

/* Diamond Pattern (subtle texture) */
.bw-btn::before{
  content:""; position:absolute; inset:0; opacity:.12; z-index:1;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px);
  background-size:20px 20px;
  animation:diamondSlide 12s linear infinite;
}
@keyframes diamondSlide {
  to { background-position:20px 20px,20px 20px; }
}

/* Gradient Border (overlay) */
.bw-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:3px;
  background:linear-gradient(135deg,#8d6e63,#ffb74d,#6d4c41,#3e2723,#8d6e63);
  background-size:300% 300%;
  animation:borderShift 6s ease infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:2;
}
@keyframes borderShift {
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* Text Layer */
.bw-btn .btn-text{ position:relative; z-index:5; padding:0 14px; }

/* Aurora Shine Overlay */
.bw-btn .shine-glass{
  position:absolute; top:-60%; left:-120%;
  width:100%; height:250%;
  background:linear-gradient(120deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0.02) 75%,
    rgba(255,255,255,0.08) 100%);
  transform:rotate(20deg);
  filter:blur(6px);
  opacity:.8;
  animation:auroraFlow 10s ease-in-out infinite;
  border-radius:inherit; z-index:4; pointer-events:none;
}
@keyframes auroraFlow {
  0%   { left:-120%; opacity:.4; }
  25%  { opacity:.9; }
  50%  { left:60%; opacity:.6; }
  75%  { opacity:.9; }
  100% { left:120%; opacity:.4; }
}

/* ==============================
   Per-style base backgrounds
   ============================== */

/* 1. Amber Gold (kekal) */
.bw-btn.amber{
  background:linear-gradient(180deg,var(--amber),#f0a91f);
  color:#2b1600 !important;
  box-shadow:0 12px 30px rgba(182,111,0,0.18), inset 0 -4px 12px rgba(0,0,0,0.12);
}
.bw-btn.amber .shine-glass{
  background:linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,230,180,0.28), rgba(255,255,255,0.08));
}

/* 2. Rose Copper */
.bw-btn.rose{
  background:linear-gradient(180deg,#ffd6cc,#ff8a65);
  color:#2b0600 !important;
  box-shadow:0 10px 26px rgba(191,74,58,0.22);
}
.bw-btn.rose .shine-glass{ background:linear-gradient(120deg, rgba(255,250,248,0.12), rgba(255,200,190,0.18)); }

/* 3. Smoky Silver */
.bw-btn.silver{
  background:linear-gradient(180deg,#eceff1,#90a4ae);
  color:#051019 !important;
  box-shadow:0 10px 26px rgba(33,47,60,0.25);
}
.bw-btn.silver .shine-glass{ background:linear-gradient(120deg, rgba(255,255,255,0.08), rgba(200,220,230,0.12)); }

/* 4. Emerald Green */
.bw-btn.emerald{
  background:linear-gradient(180deg,#7de3a8,#0dbf6a);
  color:#042912 !important;
  box-shadow:0 12px 30px rgba(5,99,57,0.18);
}
.bw-btn.emerald .shine-glass{ background:linear-gradient(120deg, rgba(255,255,255,0.06), rgba(180,255,220,0.14)); }

/* 5. Sapphire Blue */
.bw-btn.sapphire{
  background:linear-gradient(180deg,#a0d8ff,#1778d6);
  color:#031a2b !important;
  box-shadow:0 12px 32px rgba(16,88,139,0.18);
}
.bw-btn.sapphire .shine-glass{ background:linear-gradient(120deg, rgba(255,255,255,0.06), rgba(180,220,255,0.14)); }

/* 6. Ruby Red */
.bw-btn.ruby{
  background:linear-gradient(180deg,#ff9aa2,#d32f2f);
  color:#2b0b0b !important;
  box-shadow:0 12px 32px rgba(150,32,32,0.22);
}
.bw-btn.ruby .shine-glass{ background:linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,170,180,0.12)); }

/* 7. Onyx Black */
.bw-btn.onyx{
  background:linear-gradient(180deg,#424242,#000000);
  color:#fff !important;
  box-shadow:0 12px 36px rgba(0,0,0,0.55), inset 0 -6px 12px rgba(255,255,255,0.02);
}
.bw-btn.onyx .shine-glass{ background:linear-gradient(120deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); }

/* 8. Pearl White */
.bw-btn.pearl{
  background:linear-gradient(180deg,#ffffff,#f2f2f6);
  color:#0b0b0f !important;
  box-shadow:0 10px 20px rgba(20,30,40,0.06), inset 0 -4px 10px rgba(0,0,0,0.03);
}
.bw-btn.pearl .shine-glass{ background:linear-gradient(120deg, rgba(255,255,255,0.22), rgba(240,240,250,0.12)); }

/* 9. Sunset Orange */
.bw-btn.sunset{
  background:linear-gradient(180deg,#ffd4a3,#ff7043);
  color:#331200 !important;
  box-shadow:0 12px 28px rgba(255,120,60,0.18);
}
.bw-btn.sunset .shine-glass{ background:linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,220,200,0.14)); }

/* 10. Aqua Teal */
.bw-btn.aqua{
  background:linear-gradient(180deg,#9ff0ea,#00a3a3);
  color:#022525 !important;
  box-shadow:0 12px 30px rgba(0,150,150,0.16);
}
.bw-btn.aqua .shine-glass{ background:linear-gradient(120deg, rgba(255,255,255,0.06), rgba(200,255,250,0.12)); }

/* 11. Topaz Yellow (baru — nama sahaja ditambah) */
.bw-btn.topaz{
  background:linear-gradient(180deg,#ffe89a,#ffcc33);
  color:#2b1600 !important;
  box-shadow:0 12px 30px rgba(255,180,20,0.16), inset 0 -4px 10px rgba(0,0,0,0.08);
}
.bw-btn.topaz .shine-glass{
  background:linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,240,200,0.22), rgba(255,255,255,0.06));
}

/* ==============================
   Hover/Border animations per-style
   (change the gradient on :hover::after)
   ============================== */

.bw-btn.amber:hover::after{
  background:linear-gradient(135deg,#ffeb99,#ffc107,#ff9800);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.rose:hover::after{
  background:linear-gradient(135deg,#ffccbc,#ff7043,#bf360c);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.silver:hover::after{
  background:linear-gradient(135deg,#cfd8dc,#90a4ae,#455a64);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.emerald:hover::after{
  background:linear-gradient(135deg,#b9f6ca,#00c853,#00695c);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.sapphire:hover::after{
  background:linear-gradient(135deg,#b3e5fc,#42a5f5,#0d47a1);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.ruby:hover::after{
  background:linear-gradient(135deg,#ff9aa2,#e53935,#880e0e);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.onyx:hover::after{
  background:linear-gradient(135deg,#6d6d6d,#212121,#000000);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.pearl:hover::after{
  background:linear-gradient(135deg,#ffffff,#f6f7fb,#e0e6f3);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.sunset:hover::after{
  background:linear-gradient(135deg,#ffd8b5,#ff8a65,#d84315);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.aqua:hover::after{
  background:linear-gradient(135deg,#b2fff2,#00bfa5,#00695c);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}
.bw-btn.topaz:hover::after{
  background:linear-gradient(135deg,#fff3bf,#ffd54f,#ffb300);
  background-size:300% 300%;
  animation:borderShiftHover 3s ease infinite;
}

@keyframes borderShiftHover {
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* Small responsive tweak */
@media (max-width:420px){
  .bw-style-sample{ width:48%; }
  .bw-btn{ --btn-w:100%; border-radius:12px; }
}