@import url('https://fonts.googleapis.com/css?family=Montserrat:700,900|Orbitron:900&display=swap');
body {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(140deg, #101318 65%, #493e0b 100%);
  color: #fffad4;
  margin: 0; padding: 0;
  min-height: 100vh;
}
body::before {
  content:"";
  position:fixed;z-index:0;top:0;left:0;width:100vw;height:100vh;
  pointer-events:none;
  background:radial-gradient(circle, #ffd60033 1.5px,transparent 1.6px) repeat;
  background-size:22px 22px;
  opacity:.12;
  filter:blur(1.5px);
  animation: bg-move 23s linear infinite;
}
@keyframes bg-move {
  0% { background-position:0 0; }
  100% { background-position:220px 160px;}
}
h1, h2, h3 {
  font-family: 'Orbitron', 'Montserrat', sans-serif;
  color: #ffd600;
  text-shadow: 0 2px 12px #282100c7, 0 2px 30px #fee960;
  margin: 22px 0 10px;
}
h1 { font-size: 2.7rem; letter-spacing:-2px;}
h2 { font-size:1.6rem; margin-top:32px; border-left:7px solid #ffd60066; padding-left:14px;}
h3 { font-size:1.23rem;}
.container {
  border: 2.5px solid;
  border-image: linear-gradient(90deg,#ffe130 30%, #ffd600 80%, #fffbe3 100%);
  border-image-slice: 1;
  max-width: 1000px; margin:auto; padding:30px 20px;
  box-shadow: 0 6px 60px #ffd60013;
  background:rgba(36, 27, 11, .98); border-radius:24px;
  animation: border-gold 8s linear infinite;
}
@keyframes border-gold {
  0% { border-image: linear-gradient(90deg,#ffe130 30%, #ffd600 80%, #fffbe3 100%); }
  40% { border-image: linear-gradient(90deg,#fffbe3 25%, #ffe130 65%, #ffd600 100%);}
  100% { border-image: linear-gradient(90deg,#ffe130 30%, #ffd600 80%, #fffbe3 100%); }
}
.glass {
  background: rgba(255, 255, 224, 0.10);
  box-shadow: 0 8px 32px 0 #ffd60022;
  backdrop-filter: blur(7px);
  border-radius: 18px;
  border: 1.3px solid #ffe13099;
  border-top: none;
}
.button {
  padding:16px 48px; border:none; font-weight:900;
  font-family: 'Montserrat', sans-serif; font-size:1.19rem;
  border-radius:16px; background:linear-gradient(98deg,#ffd600,#ffe130 100%);
  color:#191f18;text-shadow:0 1px 7px #ffd60019;
  margin:12px 9px; cursor:pointer;box-shadow:0 4px 21px #ffd60032;
  letter-spacing:.03em;transition:all .18s cubic-bezier(.85,0,.15,1);
  text-decoration:none; display:inline-block;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.button::after {
  content: '';
  position: absolute;
  left: -40%;
  top: -50%;
  width: 180%;
  height: 200%;
  background: radial-gradient(circle, #fffbe3 0%, #ffd60000 70%);
  opacity: 0.36;
  filter: blur(12px);
  transition: opacity 0.2s, transform 0.5s;
  z-index: 0;
  pointer-events: none;
}
.button:hover::after {
  opacity: 0.75;
  transform: scale(1.09) rotate(2deg);
}
.golden-text {
  font-family: 'Orbitron', 'Montserrat', sans-serif;
  font-weight: 900;
  background: linear-gradient(100deg, #fffbe3 0%, #ffd600 20%, #ffe130 70%, #fffad4 100%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffd600;
  filter: drop-shadow(0 0 14px #ffe13055);
  text-shadow: 0 0 10px #ffe13044, 0 2px 22px #ffd60022;
  animation: gold-shimmer 2.6s linear infinite, gold-glow 3.1s ease-in-out infinite alternate;
  letter-spacing: 0.09em;
}
@keyframes gold-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@keyframes gold-glow {
  0% { filter: drop-shadow(0 0 12px #ffd60077); }
  100% { filter: drop-shadow(0 0 28px #fffbe3bb); }
}
.star-sparkle {
  display:inline-block;
  animation: star-glow 1.7s infinite alternate;
  filter: drop-shadow(0 0 12px #ffd60088);
  margin-right:2px;
  vertical-align:middle;
}
@keyframes star-glow {
  0%   { filter: drop-shadow(0 0 7px #ffe13088);}
  70%  { filter: drop-shadow(0 0 18px #ffd600cc);}
  100% { filter: drop-shadow(0 0 11px #fffbe388);}
}
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 22px 0;
}

.badge-claim {
  display:inline-block;
  font-family: 'Orbitron', 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.43em;
  background: linear-gradient(92deg,#fffbe3 7%, #ffd600 50%, #ffe130 100%);
  color: #282100;
  padding: 14px 48px 13px 48px;
  border-radius: 32px;
  letter-spacing: .18em;
  box-shadow:
    0 0 24px #ffd600bb,
    0 0 60px #ffe13044,
    0 4px 32px #fffbe3cc,
    0 0 0px #fffbe399;
  border: 2.4px solid #fffbe3ee;
  text-shadow:
    0 1px 4px #fffbe355,
    0 2px 16px #ffd60077;
  animation: badge-claim-glow 1.38s infinite alternate;
  filter: drop-shadow(0 0 10px #ffd60066);
  transition: box-shadow .24s, filter .2s;
  position: relative;
  overflow: hidden;
}
@keyframes badge-claim-glow {
  0% {
    box-shadow:
      0 0 24px #ffd600bb,
      0 0 60px #ffe13033,
      0 4px 32px #fffbe3cc;
    filter: drop-shadow(0 0 10px #ffd60088);
  }
  60% {
    box-shadow:
      0 0 44px #ffd600dd,
      0 0 120px #ffe13066,
      0 6px 44px #fffbe3ee;
    filter: drop-shadow(0 0 30px #fffbe3cc);
  }
  100% {
    box-shadow:
      0 0 38px #ffe130cc,
      0 0 90px #ffd60055,
      0 4px 24px #fffbe3cc;
    filter: drop-shadow(0 0 16px #ffd60088);
  }
}
.badge-claim::after {
  content: "";
  position: absolute;
  top: 0; left: -55px; height: 100%; width: 36px;
  background: linear-gradient(106deg, #fffbe399 0%, #ffd60000 80%);
  opacity: .31;
  filter: blur(3.5px);
  transform: skewX(-16deg);
  animation: badge-shine 3.3s linear infinite;
  pointer-events: none;
}
@keyframes badge-shine {
  0% { left: -55px; }
  48% { left: 125%; }
  100% { left: 125%; }
}
@media(max-width:700px){
  .badge-claim {
    font-size:1em;
    padding:9px 19px;
    border-radius:20px;
  }
}
.review {
  background:linear-gradient(89deg,#181b20 93%,#493e0b 101%);
  color:#fffbe7; border-radius: 12px; margin:20px 0;padding:17px 28px 14px 20px;
  box-shadow:0 4px 19px #ffe13015;
  border-left: 6px solid #ffd600;
  font-size:1.06rem; position:relative;
}
.review::before {
  content: "★"; color:#ffe130; font-size:1.2em; position:absolute;left:-20px;top:18px;filter:drop-shadow(0 2px 6px #ffe130aa);
}
details { margin:14px 0; border-left:5px solid #ffd600; padding-left:13px;background:#f8e88e38;border-radius:7px;}
table {
  border-collapse:collapse; width:100%; margin:18px 0 32px;
  background:linear-gradient(99deg,#1e1e26 96%,#fff6bb 103%);
  border-radius:13px;overflow:hidden;box-shadow:0 2px 17px #ffd60016;
}
th,td {
  padding:13px 13px; text-align:left; border-bottom:1px solid #ffe130;
  font-family:'Montserrat',sans-serif; font-size:1.07em;
}
th { background:#ffd600;color:#191f18;}
tr:last-child td { border-bottom:none;}
img, .banner-img { max-width:260px;border-radius:14px;box-shadow:0 2px 19px #ffd60014;margin:16px auto;display:block;}
a { color: #ffd600; text-decoration: underline; transition:.16s;}
a:hover { color:#fff75c;text-shadow:0 0 5px #fffad477;}
/* Badge */
.badge-jackpot {
  display:inline-block; background:#ffe130; color:#493e0b;
  padding:4px 13px; border-radius:99px; font-size:.97em;
  margin-left:9px; font-weight:900;letter-spacing:0.04em;
  box-shadow:0 2px 7px #ffe13090;
}
@media(max-width:700px){
  body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  h1{font-size:1.37em;}
  h2{font-size:1.05em;}
  .button{font-size:.92em; padding:11px 15px;}
}
.fab-floating {
  position: fixed;
  left: 18px;
  bottom: 30px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fab-main {
  background: linear-gradient(92deg, #fffbe3 0%, #ffd600 67%, #ffe130 100%);
  color: #282100;
  width: 60px; height: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 20px #ffd60066, 0 4px 32px #fffbe355;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 2.1em;
  border: 2px solid #fffbe3cc;
  transition: box-shadow .19s, filter .15s, background .18s;
  position: relative;
  outline: none;
  animation: fab-pop 0.68s cubic-bezier(.3,1.5,.45,1.14);
}
.fab-text-inside {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;     /* <--- INI WAJIB! */
  font-family: 'Montserrat', 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1em;
  color: #191909;
  letter-spacing: .04em;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 2px 8px #fffbe355, 0 2px 18px #ffd60044;
  white-space: nowrap;     /* <--- INI WAJIB! */
}
.fab-main svg {
  z-index: 1;
}
.fab-main:hover {
  box-shadow: 0 0 36px #ffd600bb, 0 4px 44px #ffe13077;
  filter: brightness(1.08);
}
@keyframes fab-pop {
  0% { transform: scale(.7); opacity:0;}
  100% { transform: scale(1); opacity:1;}
}

.fab-list {
  margin-bottom: 13px;
  background: #fffbeed9;
  border-radius: 17px;
  box-shadow: 0 2px 14px #ffd60033;
  padding: 14px 14px 8px 14px;
  display: none;
  flex-direction: column;
  gap: 11px;
  animation: fab-list-show 0.29s cubic-bezier(.15,.85,.37,1.14);
}
@keyframes fab-list-show {
  from { opacity:0; transform:translateY(40px);}
  to { opacity:1; transform:none;}
}
.fab-list.open {
  display: flex;
}

.fab-link {
  display: flex;
  align-items: center; /* WAJIB BIAR LOGO & TEKS SEJAJAR */
  background: #fff;
  color: #111;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.07em;
  border-radius: 13px;
  box-shadow: 0 2px 8px #ffd60022;
  padding: 10px 18px 10px 15px; /* padding kiri cukup buat logo */
  text-decoration: none;
  transition: background .16s, box-shadow .16s, color .18s;
  position: relative;
  min-width: 172px;
  gap: 10px; /* bikin jarak WA & teks */
}
.fab-link:hover {
  background: #ffe130;
  color: #191909;
  box-shadow: 0 0 16px #ffd60066;
}
.fab-link img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px #ffd60022;
  vertical-align: middle;
  margin: 0 6px 0 0;
  flex-shrink: 0;
}
.fab-label {
  margin-left: 0px; /* JANGAN KASIH JARAK BESAR */
  font-weight: 900;
  letter-spacing: .07em;
}

@media(max-width:700px){
  .fab-link { min-width:120px; font-size:.98em; padding:10px 10px 10px 40px;}
  .fab-label { font-size: .97em; }
}