:root {
  /* ================= DARK BASE ================= */
  --primary: #1a1a1a;       /* background utama lebih gelap */
  --secondary: #222222;     /* elemen sekunder */
  --accent: #444422;        /* aksen gelap keemasan */
  --dark: #121212;           /* untuk shadow / overlay */
  --light: #f5f5dc;          /* teks terang, ke cream/gold */

  /* ================= GRADIENT GOLD ================= */
  --gold-gradient: linear-gradient(135deg, #FFD700, #FFC107, #FFA500);

  /* ================= LAYOUT ================= */
  --radius: 16px;
  --shadow: 0 15px 40px rgba(0,0,0,.7);

  --main-bg: var(--gold-gradient), url("../assets/bgadf.jpeg");
  --main-bg-blend: overlay;
}

/* ================= BODY ================= */
body {
  background: var(--main-bg);
  background-blend-mode: var(--main-bg-blend);
  color: var(--light);
  font-family: 'Inter', sans-serif;
}
/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Poppins, Arial, sans-serif;
}

/* BACKGROUND */

body {
  min-height: 100vh;
  background-image: var(--main-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* WRAPPER */

.page-wrapper {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

/* MAIN CONTAINER */

.container{
  width: 100%;
  max-width: 540px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;

  min-height: 100vh;

  position: relative;
  overflow: hidden;

  background:
    url("../assets/container-bg.png") center top / cover no-repeat;

  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.container-inner{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.footer{
  margin-top: auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}



/* ================= TOPBAR ================= */

.topbar {
  background: linear-gradient(180deg, #181818, #000000);
  padding: 12px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
    position: sticky;
  top: 0;
  backdrop-filter: blur(6px);

  z-index: 999;
}

.logo img {
  height: 36px;
}

.btn-join {
  background: linear-gradient(135deg, var(--secondary), #fffb00);
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: bold;
}

/* ================= HERO ================= */

.hero {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 6px;
  box-sizing: border-box;
}

/* Rasio fleksibel tapi tidak maksa crop */
.hero-inner{
  width: 100%;
}

/* ================= SLIDER ================= */

.slider{
  position: relative;
  width: 100%;
}

.slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}

.slide.active{
  opacity: 1;
  position: relative; /* ⬅ penting biar tinggi ikut gambar */
}

/* ================= IMAGE NO CROP ================= */

.slide img{
  width: 100%;
  height: auto;          /* ⬅ gambar ikut mengecil */
  display: block;
  border-radius: calc(var(--radius) - 4px);
  object-fit: contain;   /* ⬅ tidak akan kepotong */
  background: #000;      /* opsional, isi space kosong */
}

/* ================= AUTH ULTRA PREMIUM ================= */
/* ================= AUTH POP OUT ================= */

.auth-box {
  display: flex;
  gap: 0;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;

  /* container tetap blend */
  background: rgba(8, 18, 35, 0.55);
  border: 1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}


/* ================= BUTTON POP ================= */

.btn-login,
.btn-register {
  flex: 1;
  padding: 13px;
  border: none;

  /* GRADIENT PRIMARY -> SECONDARY (VERTICAL) */
  background: linear-gradient(
    to bottom,
    var(--primary),
    var(--secondary)
  );

  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: none;

  position: relative;
  transition: 0.25s ease;

  /* POP OUT SHADOW */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 14px rgba(0,0,0,0.35);
}


/* divider tengah */
.btn-login {
  border-right: 1px solid rgba(0,0,0,0.25);
}


/* ================= HOVER ================= */

.btn-login:hover,
.btn-register:hover {
  filter: brightness(1.08);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 8px 20px rgba(0,0,0,0.45),
    0 0 12px var(--primary);
}


/* ================= CLICK ================= */

.btn-login:active,
.btn-register:active {
  transform: scale(0.96);
}


/* ================= SECTION ================= */

.section {
  padding: 14px 16px;
}

.more-btn {
  font-size: 12px;
  color: var(--secondary);
  text-decoration: none;
}

/* ================= TOGEL LIST ================= */

.pasaran-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pasaran-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(255,255,255,.08);
  padding: 10px 12px;
  border-radius: 12px;
}

.pasaran-item button {
  background: linear-gradient(135deg, var(--secondary), #fffb00);
  border: none;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
}

/* ================= SLOT GRID ================= */

.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.slot-item {
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 6px;
  text-align: center;
}

.slot-item img {
  width: 100%;
  border-radius: 8px;
}

.slot-item small {
  display: block;
  font-size: 12px;
  margin: 4px 0;
}

.rtp-badge {
  font-size: 11px;
  color: #00ffb7;
}

.slot-item button {
  width: 100%;
  margin-top: 5px;
  padding: 6px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg,var(--accent),#fffb00);
  color: white;
}

/* ================= PROMO SLIDER ================= */

.promo-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
}

.promo-card {
  min-width: 220px;
  background: rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
}

.promo-card img {
  width: 100%;
}

.promo-text {
  padding: 8px;
  font-size: 12px;
}



.bottom-nav {

  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  max-width: 480px;

  background: linear-gradient(180deg, #181818, #000000);

  padding: 12px 0;

  display: flex;
  justify-content: space-around;

  z-index: 999;

  box-shadow: 0 -6px 20px rgba(0,0,0,.6);

  border-top: 1px solid rgba(255,255,255,.08);

}




/* ================= FLOAT CHAT ================= */

.chat-btn {

  position: fixed;
  right: 15px;
  bottom: 80px;

  width: 55px;
  height: 55px;

  background: linear-gradient(135deg, var(--accent), #006cff);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: var(--shadow);

  z-index: 998;

}


/* ================= MODAL ================= */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal.active {
  display: flex;
}

.modal-box {
  width: 90%;
  max-width: 400px;
  background: rgba(10,20,60,.95);
  border-radius: 16px;
  padding: 16px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.close-btn {
  cursor: pointer;
}

/* ================= TABLE ================= */

.prediksi-table {
  width: 100%;
  border-collapse: collapse;
}

.prediksi-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.prediksi-table td:last-child {
  text-align: right;
  font-weight: bold;
  color: var(--secondary);
}

/* ================= RTP ================= */

.rtp-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
}

.good {color:#00ff7b;font-weight:bold;}
.medium {color:#ffcc00;font-weight:bold;}
.bad {color:#ff4d4d;font-weight:bold;}

.vip-btn {
  background: linear-gradient(135deg, #00ffcc, #008cff);
  border: none;
  padding: 10px;
  width: 100%;
  border-radius: 12px;
  font-weight: bold;
}

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

@media(max-width:600px){

  body {
    background: none;
  }

  .container {
    max-width: 100%;
    border-radius: 0;
  }

  .slot-grid {
    grid-template-columns: repeat(2,1fr);
  }

}


/* ITEM */

.nav-item {

  text-decoration: none;
  color: white;

  display: flex;
  flex-direction: column;
  align-items: center;

  font-size: 12px;
}

.nav-item span {
  font-size: 18px;
}

.nav-item small {
  margin-top: 2px;
  font-size: 10px;
}

/* HIGHLIGHT DAFTAR */

.nav-item.highlight {

  background: linear-gradient(135deg, var(--secondary), #fffb00);
  padding: 6px 10px;
  border-radius: 14px;
  color: #000;
}
.container {
  padding-bottom: 0;
}


/* ================= SOCIAL MEDIA ================= */

.social-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

}

.social-card {

  background: rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: white;

  box-shadow: var(--shadow);

  transition: .3s ease;

}

.social-card:hover {

  transform: translateY(-4px);
  background: linear-gradient(135deg, var(--secondary), var(--accent));

}

.social-card img {

  width: 34px;
  margin-bottom: 6px;

}

.social-card span {

  font-size: 12px;
  font-weight: bold;

}

/* Mobile 2 Column */

@media(max-width:480px){

  .social-grid {
    grid-template-columns: repeat(2,1fr);
  }

}
.vip-content {

  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;

}

.vip-desc {

  font-size: 13px;
  opacity: .8;

}

.vip-submit {

  background: linear-gradient(135deg,var(--secondary),var(--accent));
  border: none;
  padding: 12px;
  border-radius: 14px;
  font-weight: bold;

}

.vip-loading {

  display: none;
  font-size: 12px;
  color: var(--secondary);
  animation: blink 1s infinite;

}

@keyframes blink {

  0% {opacity:.3;}
  50% {opacity:1;}
  100% {opacity:.3;}

}
/* =====================================================
   TEXT SLIDER — MATCH NAV STYLE
   ===================================================== */

.text-slider{
  position: relative;
  overflow: hidden;
  padding: 7px 0;

  /* SAME GRADIENT AS NAV */
  background: linear-gradient(
    180deg,
    var(--primary),
    var(--secondary)
  );

  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.25);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -8px 18px rgba(0,0,0,0.25);
}


/* ===== SOFT TOP LIGHT ===== */
.text-slider::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: radial-gradient(
    circle at 50% 0%,
    rgba(255,255,255,0.25),
    transparent 60%
  );

  opacity: 0.25;
}


/* =====================================================
   TEXT MARQUEE
   ===================================================== */

.text-marquee{
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;

  color: #ffffff;
  opacity: 0.95;

  animation: textMarquee 18s linear infinite;
}


/* SMOOTH MARQUEE */
@keyframes textMarquee{
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ================= JACKPOT ================= */

.jackpot-box {

  margin: 0 16px 10px;
  border-radius: 14px;
  overflow: hidden;

  box-shadow: var(--shadow);

}

.jackpot-box img {

  width: 100%;
  display: block;

}

/* ANIMATION */

@keyframes slideUp {

  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }

}

/* TITLE */

.quick-menu-box h3 {

  text-align: center;
  margin-bottom: 4px;

}

.quick-desc {

  text-align: center;
  font-size: 12px;
  opacity: .8;
  margin-bottom: 12px;

}

/* ITEM */

.quick-item {

  display: flex;
  align-items: center;

  background: #000;
  border-radius: 14px;

  padding: 10px 12px;
  margin-bottom: 10px;

  text-decoration: none;
  color: var(--secondary);

  box-shadow: inset 0 0 10px rgba(0,255,255,.1);

}

.quick-item img {

  width: 34px;
  margin-right: 10px;

}

.quick-item span {

  font-size: 14px;
  font-weight: bold;

}

/* CLOSE BUTTON */

.quick-close {

  width: 100%;
  padding: 10px;

  border-radius: 20px;
  border: 2px solid var(--secondary);

  background: transparent;
  color: var(--secondary);

  font-weight: bold;

  margin-top: 6px;

}
/* ================= WA SIDE PANEL ================= */

.wa-side-panel {

  position: fixed;
  top: 0;
  right: -320px;

  width: 300px;
  height: 100vh;

  background: #001f1f;

  z-index: 9999;

  transition: .4s ease;

  box-shadow: -10px 0 30px rgba(0,0,0,.6);

}

/* ACTIVE */

.wa-side-panel.active {

  right: 0;

}

/* HEADER */

.wa-side-header {

  background: linear-gradient(135deg,var(--secondary),var(--accent));

  padding: 14px;

  text-align: center;

  position: relative;

}

.wa-side-header h3 {

  color: #000;
  font-size: 16px;

}

.wa-side-header p {

  font-size: 12px;
  color: #000;
  opacity: .8;

}

/* CLOSE BTN */

.wa-close {

  position: absolute;
  right: 10px;
  top: 10px;

  font-size: 18px;
  cursor: pointer;
  color: #000;

}

/* BODY */

.wa-side-body {

  padding: 10px;

}

/* CONTACT ITEM */

.wa-contact {

  background: rgba(255,255,255,.05);

  border-radius: 12px;

  padding: 10px;

  margin-bottom: 10px;

  display: flex;
  justify-content: space-between;
  align-items: center;

}

/* INFO */

.wa-info {

  display: flex;
  align-items: center;

}

/* STATUS */

.status {

  width: 10px;
  height: 10px;

  border-radius: 50%;
  margin-right: 8px;

}

.online { background:#00ff7b; }
.offline { background:#ff5555; }

/* CHAT BUTTON */

.wa-chat-btn {

  background: linear-gradient(135deg,var(--secondary),var(--accent));

  color: #000;
  font-size: 12px;
  font-weight: bold;

  padding: 6px 12px;
  border-radius: 14px;

  text-decoration: none;

}
/* MINI BANNER */

.mini-banner-row{
  display:flex;
  gap:8px;
  margin:12px 0;
}

.mini-banner-row img{
  width:100%;
  height:70px;
  object-fit:cover;
  border-radius:10px;
  flex:1;
}

/* ================= QUICK IMAGE BUTTON ================= */

.quick-img-row{
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

/* BOX / TOMBOL (tinggi utama) */
.quick-img-row a,
.quick-img-row .quick-box{
  flex: 1;
  height: 100px;              /* tinggi tombol */
  display: block;
}

/* IMAGE IKUT TOMBOL */
.quick-img-row img{
  width: 100%;
  height: 100%;               /* ⬅ ikut tinggi tombol */
  object-fit: cover;          /* isi penuh */
  border-radius: 12px;
  display: block;
  transition: transform .2s ease;
}

/* Hover desktop saja */
@media (hover: hover){
  .quick-img-row img:hover{
    transform: scale(1.03);
  }
}

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

@media (max-width: 540px){

  .quick-img-row a,
  .quick-img-row .quick-box{
    height: 22vw;             /* tinggi tombol ikut layar */
    min-height: 72px;
    max-height: 110px;
  }
}

/* HP kecil */
@media (max-width: 380px){
  .quick-img-row a,
  .quick-img-row .quick-box{
    height: 24vw;
  }
}
/* ================= QUICK IMAGE BUTTON ================= */

.quick-img-row{
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

/* BOX / TOMBOL (tinggi utama) */
.quick-img-row a,
.quick-img-row .quick-box{
  flex: 1;
  height: 100px;              /* tinggi tombol */
  display: block;
}

/* IMAGE IKUT TOMBOL */
.quick-img-row img{
  width: 100%;
  height: 100%;               /* ⬅ ikut tinggi tombol */
  object-fit: cover;          /* isi penuh */
  border-radius: 12px;
  display: block;
  transition: transform .2s ease;
}

/* Hover desktop saja */
@media (hover: hover){
  .quick-img-row img:hover{
    transform: scale(1.03);
  }
}

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

@media (max-width: 540px){

  .quick-img-row a,
  .quick-img-row .quick-box{
    height: 22vw;             /* tinggi tombol ikut layar */
    min-height: 72px;
    max-height: 110px;
  }
}

/* HP kecil */
@media (max-width: 380px){
  .quick-img-row a,
  .quick-img-row .quick-box{
    height: 24vw;
  }
}
/* ================= QUICK IMAGE BUTTON ================= */

.quick-img-row{
  display: flex;
  gap: 10px;                 /* jarak antar tombol */
  margin: 10px 12px 18px;    /* ⬅ kasih space dari container kiri kanan + atas */
}

/* BOX / TOMBOL */
.quick-img-row a,
.quick-img-row .quick-box{
  flex: 1;
  height: 100px;
  display: block;
  padding: 3px;              /* ⬅ space dalam biar image tidak nempel */
  background: rgba(255,255,255,0.04); /* opsional biar kelihatan rapi */
  border-radius: 14px;
}

/* IMAGE ikut tombol */
.quick-img-row img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* MOBILE */
@media (max-width: 540px){

  .quick-img-row{
    margin: 8px 10px 16px;   /* space mobile */
    gap: 8px;
  }

  .quick-img-row a,
  .quick-img-row .quick-box{
    height: 22vw;
    min-height: 72px;
    max-height: 110px;
  }
}

/* ================= BIO LINK — MINIMAL + GLOW + LUXURY BLACK ================= */

.bio-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ITEM */
.bio-item{
  position: relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none;
  color:#ffffff;
  overflow:hidden;

  /* ===== LUXURY BLACK GRADIENT ===== */
  background: linear-gradient(145deg, #000000, #141414, #222222);

  /* ===== MINIMAL STROKE (GRADIENT) ===== */
  border:1px solid transparent;
  background-image:
    linear-gradient(145deg, #000000, #141414, #222222),
    linear-gradient(135deg, var(--primary), var(--secondary));
  background-origin:border-box;
  background-clip:padding-box, border-box;

  /* ===== DEPTH ===== */
  box-shadow: 0 3px 8px rgba(0,0,0,0.28);

  transition: all 0.22s ease;
}

/* ICON */
.bio-item img{
  width:26px;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
}

/* ===== SOFT GLOW BORDER ===== */
.bio-item::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  opacity:0;
  z-index:-1;
  transition:0.25s ease;
}

/* ===== HOVER ===== */
.bio-item:hover{
  transform: translateY(-2px);

  box-shadow:
    0 6px 14px rgba(0,0,0,0.38),
    0 0 6px rgba(255,255,255,0.04),
    0 0 10px var(--primary),
    0 0 18px var(--secondary);
}

/* Glow muncul halus */
.bio-item:hover::after{
  opacity:0.18;
}

/* ===== CLICK ===== */
.bio-item:active{
  transform: scale(0.98);
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* ================= JACKPOT BANNER ================= */

.jackpot-banner{
  padding:12px 16px 6px;
}

.jackpot-banner img{
  width:100%;
  border-radius:12px;
  display:block;
}

/* =======================================================
   BIO — UNIFIED LUXURY BLACK THEME
   Gradient Black + Primary Secondary Accent + Soft Glow
   ======================================================= */


/* ================= BASE COLORS SHADOW ================= */

:root{
  --bio-bg: linear-gradient(145deg,#000000,#141414,#222222);
  --bio-stroke: linear-gradient(135deg,var(--primary),var(--secondary));
  --bio-shadow: 0 4px 12px rgba(0,0,0,0.35);
  --bio-shadow-hover:
    0 8px 18px rgba(0,0,0,0.45),
    0 0 8px var(--primary),
    0 0 16px var(--secondary);
}


/* ================= BIO ICON ONLY ================= */

.bio-links.icon-only{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  padding:10px 0 4px;
}

.bio-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  text-decoration:none;
  position:relative;
  background:var(--bio-bg);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:var(--bio-shadow);
  transition:all .22s ease;
}

/* gradient accent stroke */
.bio-icon::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:14px;
  background:var(--bio-stroke);
  opacity:.18;
  z-index:-1;
}

/* icon */
.bio-icon img,
.bio-icon i,
.bio-icon svg{
  width:26px;
  height:26px;
}

/* hover */
.bio-icon:hover{
  transform:translateY(-2px);
  box-shadow:var(--bio-shadow-hover);
}

/* click */
.bio-icon:active{
  transform:scale(.96);
}


/* ================= BIO HORIZONTAL MODE ================= */

.bio-links.bio-horizontal{
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.bio-links.icon-only.bio-horizontal .bio-icon{
  width:52px;
  height:52px;
}


/* ================= BIO URL LINKS ================= */

.bio-url-links{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}


/* ===== ITEM ===== */

.bio-url-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  text-decoration:none;
  color:#ffffff;
  font-size:15px;
  line-height:1;
  position:relative;

  background:var(--bio-bg);

  border:1px solid transparent;
  background-image:
    var(--bio-bg),
    var(--bio-stroke);
  background-origin:border-box;
  background-clip:padding-box,border-box;

  box-shadow:var(--bio-shadow);
  transition:all .22s ease;
}


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

.bio-url-item i,
.bio-url-item svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:block;
  position:relative;
  top:.5px;
  stroke:var(--primary);
  transition:.2s;
}


/* hover icon color */
.bio-url-item:hover i,
.bio-url-item:hover svg{
  stroke:var(--secondary);
}


/* ===== TEXT ===== */

.bio-url-item span{
  display:flex;
  align-items:center;
}


/* ===== HOVER ===== */

.bio-url-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--bio-shadow-hover);
}


/* ===== CLICK ===== */

.bio-url-item:active{
  transform:scale(.97);
}
/* ================= SECTION HEADER CENTER FIX ================= */

.section-header{
  text-align:center;
  margin-bottom:14px;
}

.section-header h3{
  color:#ffffff;
  font-weight:600;
  letter-spacing:.5px;
  font-size:16px;
  margin:0;
  position:relative;
  display:inline-block;
}

/* garis tipis elegan bawah judul (opsional tapi bagus) */
.section-header h3::after{
  content:"";
  display:block;
  width:42px;
  height:2px;
  margin:6px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  opacity:.85;
}

/* ================= FOOTER BASE ================= */

.footer{
  position: relative;
  text-align: center;
  padding: 70px 20px 0;
  color: #ffffff;
  background: #0b0b0b;
  overflow: hidden;
  margin-top: auto;
}


/* ================= FOOTER BOTTOM IMAGE ================= */

.footer::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:300px;

  z-index:0;
}

/* supaya teks tetap di atas */
.footer > *{
  position:relative;
  z-index:1;
}


/* ================= LOGO CENTER FIX ================= */

.footer-logo{
  width:120px;
  display:block;          /* ⬅ penting */
  margin:0 auto 12px;     /* ⬅ center horizontal */
}


/* ================= TEXT ================= */

.footer p{
  font-size:13px;
  opacity:.9;
  max-width:520px;
  margin:0 auto 10px;
}

/* copyright */
.footer small{
  opacity:.7;
  font-size:12px;
}

/* ================= TOPBAR CENTER LOGO ================= */

.topbar{
  position: sticky;
  top: 0;
  z-index: 999;

  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  /* BACKGROUND */
  background-image:
    url("../assets/topbar-bg.png");

  background-position: center top;   /* fokus atas gambar */
  background-size: 100% auto;        /* tampilkan lebar penuh, tidak zoom */
  background-repeat: no-repeat;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* logo center */
.logo-center img{
  height: 38px;
  display:block;
}

/* optional glow halus */
.logo-center{
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.15));
}
/* ================= PROMO PAGE ================= */

.promo-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* CARD */
.promo-item{
  background: rgba(255,255,255,.08);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}

/* IMAGE */
.promo-item img{
  width:100%;
  display:block;
}

/* CONTENT */
.promo-body{
  padding:14px;
}

.promo-body h4{
  font-size:15px;
  margin-bottom:6px;
}

.promo-body p{
  font-size:13px;
  opacity:.85;
  line-height:1.5;
}

/* BUTTON */
.promo-claim{
  margin-top:12px;
  display:block;
  text-align:center;
  padding:12px;
  border-radius:14px;
  font-weight:bold;
  color:#000;
  text-decoration:none;

  background: linear-gradient(
    135deg,
    var(--secondary),
    var(--accent)
  );

  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition:.25s ease;
}

.promo-claim:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.6),
    0 0 12px var(--secondary);
}

.promo-claim:active{
  transform:scale(.96);
}
/* ================= BACK BUTTON ================= */

.back-section{
  padding: 10px 16px 0;
}

.back-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 14px;

  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: #000;

  background: linear-gradient(
    135deg,
    var(--secondary),
    var(--accent)
  );

  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: .25s ease;
}

.back-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.6),
    0 0 10px var(--secondary);
}

.back-btn:active{
  transform: scale(.96);
}
/* ================= PROMO TEXT CONTRAST ================= */

.promo-body h4{
  color: #ffffff;
  font-weight: 600;
}

.promo-body p{
  color: rgba(255,255,255,.88);
}

/* ================= BACK BUTTON TEXT WHITE ================= */

.back-btn{
  color:#ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.promo-body h4{
  text-shadow:
    0 0 6px rgba(255,255,255,.12),
    0 0 10px rgba(255,255,255,.08);
}
/* ================= BUKTI JACKPOT TABLE ================= */

.jp-table-wrap{
  background: rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.jp-table{
  width:100%;
  border-collapse: collapse;
}

.jp-table thead{
  background: linear-gradient(
    135deg,
    var(--secondary),
    var(--accent)
  );
}

.jp-table thead th{
  padding:10px 8px;
  font-size:12px;
  font-weight:700;
  color:#000;
  text-align:center;
}

.jp-table tbody td{
  padding:10px 8px;
  font-size:12px;
  text-align:center;
  color:#ffffff;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.jp-table tbody tr:last-child td{
  border-bottom:none;
}

/* jackpot highlight */
.jp-amount{
  font-weight:bold;
  color: var(--secondary);
  text-shadow: 0 0 6px rgba(255,215,0,.35);
}

/* game name */
.jp-game{
  font-size:11px;
  opacity:.85;
}
/* ================= KELUHAN FORM — LUXURY SOFT ================= */

.keluhan-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* GROUP */
.form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* LABEL */
.form-group label{
  font-size:12px;
  color:rgba(255,255,255,.8);
  font-weight:500;
}

/* INPUT BASE */
.form-group input,
.form-group select,
.form-group textarea{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:12px 14px;
  color:rgba(255,255,255,.9);
  font-size:13px;
  outline:none;

  box-shadow: inset 0 0 10px rgba(0,0,0,.35);
  transition:.25s ease;
}

/* PLACEHOLDER */
.form-group input::placeholder,
.form-group textarea::placeholder{
  color: rgba(255,255,255,.45);
}

/* FOCUS STATE */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color: var(--secondary);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.45),
    0 0 8px rgba(255,215,0,.25);
}

/* SELECT */
.form-group select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--secondary) 50%),
    linear-gradient(135deg, var(--secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px;
  background-repeat:no-repeat;
}

/* TEXTAREA */
.form-group textarea{
  resize:none;
}
/* =================================================
   FORCE FIX SELECT — KELUHAN FORM (ANTI PUTIH)
   ================================================= */

/* SELECT BASE */
.keluhan-form select{
  background-color: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.9) !important;
  border:1px solid rgba(255,255,255,.12) !important;

  box-shadow: inset 0 0 10px rgba(0,0,0,.45) !important;
}

/* OPTION */
.keluhan-form select option{
  background-color: #0b0b0b !important;
  color: #ffffff !important;
}

/* OPTION HOVER / SELECTED (browser support terbatas, tapi aman) */
.keluhan-form select option:checked{
  background-color: var(--secondary) !important;
  color: #000 !important;
}

/* FOCUS STATE */
.keluhan-form select:focus{
  border-color: var(--secondary) !important;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.55),
    0 0 8px rgba(255,215,0,.25) !important;
}

/* ================= PREDIKSI TOGEL ================= */

.prediksi-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
/* ================= PREDIKSI LIST (TABLE FEEL) ================= */

.prediksi-item{
  background: rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.08);
}

.prediksi-info h4{
  color:#ffffff;
  font-size:14px;
  font-weight:600;
}

.prediksi-info small{
  color:rgba(255,255,255,.7);
  font-size:11px;
}


.prediksi-btn{
  padding:8px 14px;
  border-radius:14px;
  border:none;
  font-size:12px;
  font-weight:bold;
  color:#000;

  background: linear-gradient(
    135deg,
    var(--secondary),
    var(--accent)
  );

  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition:.25s ease;
}

.prediksi-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.6),
    0 0 10px var(--secondary);
}

.prediksi-btn:active{
  transform:scale(.96);
}


/* ================= MODAL PREDIKSI ================= */

.prediksi-modal-content{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.prediksi-title{
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:#ffffff;
}

.prediksi-subtitle{
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.75);
  margin-bottom:10px;
}


.prediksi-box{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:10px 12px;
  border-radius:12px;

  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);

  font-size:12px;
  color:#ffffff;
}

.prediksi-box span{
  font-weight:bold;
  color: var(--secondary);
  text-shadow: 0 0 6px rgba(255,215,0,.35);
}
/* ================= RTP SLOT ================= */

/* PROVIDER NAV */
.provider-nav{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:4px 0 10px;
}

.provider-nav::-webkit-scrollbar{
  display:none;
}

.provider-item{
  flex:0 0 auto;
  background: rgba(255,255,255,.08);
  border-radius:14px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:.25s;
}

.provider-item img{
  height:26px;
  object-fit:contain;
}

.provider-item.active{
  background: linear-gradient(135deg,var(--secondary),var(--accent));
}

.provider-item.active img{
  filter: brightness(0);
}

/* GAME GRID */
.rtp-game-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  margin-top:6px;
}


.rtp-game{
  background: rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.1);
}

.rtp-game img{
  width:100%;
  display:block;
}

.rtp-info{
  padding:6px;
  font-size:11px;
}

.rtp-info strong{
  display:block;
  color:#ffffff;
  margin-bottom:2px;
    font-size:11px;

}

.rtp-value{
  font-weight:bold;
  color: var(--secondary);
  text-shadow: 0 0 6px rgba(255,215,0,.35);
}

/* RESPONSIVE — MOBILE */
@media(max-width:600px){
  .rtp-game-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ================= RTP PROGRESS BAR ================= */

.rtp-info{
  padding:8px;
  font-size:11px;
}

.rtp-info strong{
  display:block;
  color:#ffffff;
  font-size:11px;
  margin-bottom:6px;
}

/* BAR WRAP */
.rtp-bar{
  width:100%;
  height:6px;
  background: rgba(255,255,255,.12);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:6px;
}

/* BAR FILL */
.rtp-bar-fill{
  height:100%;
  width:0%;
  background: linear-gradient(
    90deg,
    var(--secondary),
    var(--accent)
  );
  box-shadow: 0 0 8px rgba(255,215,0,.45);
}

/* RTP TEXT */
.rtp-percent{
  font-size:11px;
  color: var(--secondary);
  font-weight:600;
}

/* ================= PLAY BUTTON ================= */

.play-btn{
  margin-top:6px;
  display:block;
  text-align:center;
  padding:6px;
  border-radius:10px;
  font-size:11px;
  font-weight:bold;
  text-decoration:none;
  color:#000;

  background: linear-gradient(
    135deg,
    var(--secondary),
    var(--accent)
  );

  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  transition:.2s ease;
}

.play-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.6),
    0 0 10px var(--secondary);
}

.play-btn:active{
  transform:scale(.95);
}

/* Paksa background full hitam sampai safe area iPhone */
html, body {
  background-color: #000;   /* warna fallback */
  min-height: 100%;
}

/* Extend background ke notch / safe area */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Kalau kamu mau FULL hitam tanpa transparan */
@supports(padding: max(0px)) {
  body {
    padding-top: max(env(safe-area-inset-top), 0px);
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }
}
/* ================= NAV SCROLL ================= */
.nav-scroll-wrap{
  position: relative;
  padding: 10px 40px;
  margin: 12px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -14px 30px rgba(0,0,0,0.25);
}

.nav-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.nav-scroll::-webkit-scrollbar {
  display: none;
}

/* NAV ITEM */
.nav-item{
  min-width: 86px;
  text-align: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-item img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: none;
  transition: 0.2s ease;
}

.nav-item span{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #ffffff;
  opacity: 0.95;
}

/* SCROLL BUTTON */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.2s ease;
}

.nav-arrow:hover {
  background: rgba(0,0,0,0.7);
}

.nav-arrow.left { left: 5px; }
.nav-arrow.right { right: 5px; }



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

@media (max-width:540px){

  .nav-scroll-wrap{
    padding: 16px 36px;
  }

  .nav-item{
    min-width: 80px;
  }

  .nav-item img{
    width: 52px;
    height: 52px;
  }
}