body{
  margin:0;
  background:#0A0A0A;
  font-family:Arial;
  font-weight: bold;
  color:#A8A8A8;
}

.header{
  text-align:center;
  padding:15px;
  background:#0D0D0D;
  box-shadow:0 0 20px rgba(255,215,0,0.2);
}

.header-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 15px;
  background:#000;
  border-bottom:1px solid #111;
}

.header-left .logo{
  height:40px;
}

.header-right{
  display:flex;
  gap:10px;
}

.info-box{
  background:#0b0b0b;
  box-shadow:0 0 10px #2B2B2B;
  border:1px solid #222;
  padding:8px 12px;
  border-radius:6px;
  text-align:center;
  min-width:90px;
}

.label{
  display:block;
  font-size:10px;
  color:#00bfff;
  margin-bottom:3px;
}

#guest, #servertime{
  font-family: 'Orbitron';
  font-size:16px;
  font-weight:bold;
}

/* MOBILE */
@media(max-width:600px){
  .header-bar{
    flex-direction:column;
    gap:8px;
  }

  .header-right{
    width:100%;
    justify-content:space-between;
  }
}

.logo{width:160px;}

.marquee {
  overflow: hidden;
  background: #1E1E1E;
  padding: 5px;
  color: #ffae00;
}

.track {
  display: flex;
  width: max-content;
  animation:scroll 30s linear infinite;
}

.track span {
  white-space: nowrap;
  padding-right: 10px;
  
}

@keyframes scroll {
  0% { transform: translateX(20%); }
  100% { transform: translateX(-100%); }
}



/* JACKPOT HEADER */
.jackpot-bar{
  text-align:center;
  padding:12px;
  background:linear-gradient(180deg,#000,#111);
  border-bottom:1px solid #222;
}

.jackpot-title{
  font-size:16px;
  color:gold;
  letter-spacing:2px;
  margin-bottom:5px;
}

.jackpot-value{
  font-family: 'Orbitron';
  font-size:30px;
  font-weight:bold;
  color:#ffffff;
  text-shadow:0 0 10px rgb(91, 244, 255), 0 0 20px rgba(63, 226, 255, 0.5);
  transition:0.3s;
}

/* animasi glow */
.jackpot-value.animate{
  transform:scale(1.05);
}



/* CAROUSEL */
amp-carousel{
  margin: top 2px;
  margin: bottom 2px;
}

/* MAIN IMAGE */
.img-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}

.img-center img {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border: 3px solid #ffae00;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(255,215,0,0.3);
}

/* RESPONSIVE */
@media (max-width: 500px) {
  .img-center img {
    width: 90%;
    height: auto;
  }
}

.container{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin: 0;
}

.draw-box{
  border:3px solid #ffae00;
  border-radius:15px;
  padding:10px;
  text-align:center;
  background:#111;
  width: fit-content;
  margin: 10px auto; /* INI YANG BIKIN CENTER */
}

.ball{
  width:60px;
  height:60px;
  border-radius:20%;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin:6px;
  font-size:22px;
  font-weight:bold;
  background:radial-gradient(circle,#f8e689,#bf8e20);
  color:#000;
}

.btn-group{
  display:flex;
  gap:10px;
  margin:15px;
  margin-top: 0px;
}

.btn{
  flex:1;
  padding:12px;
  border-radius:22px;
  text-align:center;
  font-weight:bold;
}

.login{background:linear-gradient(0deg,#2B2B2B,#777777); color:#fff;}
.daftar{background:linear-gradient(0deg,#bf8e20,#f8e689); color:#151515;}

.winner-box{
  text-align:center;
  margin:20px auto;
}

.winner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #222;
  font-size: 20px;
  font-weight: bold;
}

.name {
  text-align: left;
  margin-right: auto;
  color: #ffae00;
}

.rp {
  text-align: center;
  margin-right: 80px;
  margin-left: 80px;
}

.nominal {
  text-align: right;
  margin-left: auto;
}