* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family: Arial;
  background:#0b0b0b;
  color:white;
}

/* LOGIN */
.center {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.card {
  background:#1a1a1a;
  padding:25px;
  border-radius:12px;
  width:260px;
}
input,button {
  width:100%;
  padding:10px;
  margin:8px 0;
  border:none;
  border-radius:6px;
}
button {background:orange;}

/* HEADER */
.header {
  display:flex;
  justify-content:space-between;
  padding:15px;
  background:#111;
}
.logo span {color:orange;}

/* USER */
.user-card {
  margin:15px;
  padding:15px;
  background:#1a1a1a;
  border-radius:12px;
  display:flex;
  justify-content:space-between;
}
.deposit-btn {
  background:orange;
  padding:5px;
  margin-top:5px;
  border-radius:6px;
}

/* SLIDER */
.banner {
  margin:15px;
  overflow:hidden;
  border-radius:12px;
  position:relative;
}
.slides {
  display:flex;
  width:300%;
  animation:slide 9s infinite;
}
.slides img {width:100%;}

@keyframes slide {
  0%{transform:translateX(0);}
  33%{transform:translateX(-100%);}
  66%{transform:translateX(-200%);}
  100%{transform:translateX(0);}
}

.play-btn {
  position:absolute;
  bottom:15px;
  left:15px;
  background:red;
  padding:10px;
}

/* JACKPOT FIX CENTER */
.jackpot-box {
  margin:15px;
  padding:20px;
  background:#111;
  border-radius:12px;
  text-align:center !important;
}

.jackpot-box h3 {
  width:100%;
  text-align:center !important;
}

#jackpot {
  width:100%;
  text-align:center !important;
  color:red;
  font-size:24px;
  font-weight:bold;
}

/* MENU */
.menu {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:15px;
}
.menu-item {
  background:#1a1a1a;
  padding:10px;
  text-align:center;
  border-radius:10px;
}

/* GRID */
.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:15px;
}
.game-card {
  height:100px;
  border-radius:10px;
  overflow:hidden;
}
.game-card img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* NAV */
.bottom-nav {
  position:fixed;
  bottom:0;
  width:100%;
  background:#111;
  display:flex;
  justify-content:space-around;
  padding:10px 0;
}

/* POPUP */
.popup {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  display:none;
  justify-content:center;
  align-items:center;
}
.popup-content {
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  width:250px;
}

/* TOAST */
.toast {
  position:fixed;
  bottom:90px;
  left:50%;
  transform:translateX(-50%);
  background:orange;
  padding:10px;
  border-radius:20px;
  display:none;
}

/* WA */
.wa-float {
  position:fixed;
  bottom:80px;
  right:15px;
  background:#25D366;
  padding:15px;
  border-radius:50%;
}
/* MENU AKTIF (FITUR 3) */
.menu-item.active {
  border: 1px solid orange;
  color: orange;
  transform: scale(1.05);
}

.menu-item:active {
  transform: scale(0.95);
}

/* ANIMASI GAME MASUK (FITUR 4) */
.game-card {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HOVER PREMIUM */
.game-card:hover {
  transform: scale(1.07);
}