body{
  font-family:sans-serif;
  background:radial-gradient(circle at top,#3b1400,#020617);
  color:#fff;
}

/* NAV */
.topbar{
  background:linear-gradient(135deg,#facc15,#a16207);
  padding:10px;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-weight:900;
  color:#000;
}

.menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.menu a{
  font-size:12px;
  text-decoration:none;
  color:#000;
  font-weight:700;
}

/* CONTAINER */
.container{
  max-width:900px;
  margin:auto;
  padding:10px;
}

/* BOX */
.box{
  background:linear-gradient(135deg,#facc15,#92400e);
  margin-top:15px;
  padding:12px;
  border-radius:14px;
  color:#000;
}

/* TITLE */
.title{
  font-weight:800;
  margin-bottom:10px;
  text-align:center;
}

/* BALL */
.ball-wrap{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.ball{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background:radial-gradient(circle,#fff,#facc15,#a16207);
  color:#000;
}

/* BUTTON */
button{
  width:100%;
  padding:10px;
  margin-top:10px;
  border:none;
  border-radius:10px;
  font-weight:bold;
  background:linear-gradient(135deg,#fde047,#f59e0b);
}


/* ===== WRAP ===== */
.prediksi-wrap{
  max-width:900px;
  margin:auto;
  padding:15px;
}

/* TITLE */
.title-main{
  text-align:center;
  font-weight:900;
  margin-bottom:15px;
}

/* SEARCH */
.search-box{
  display:flex;
  gap:10px;
  margin-bottom:15px;
}
.search-box input{
  flex:1;
  padding:10px;
  border-radius:10px;
  border:none;
}
.search-box button{
  padding:10px 14px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,#fde047,#f59e0b);
  font-weight:bold;
}

/* CARD */
.prediksi-card{
  background:linear-gradient(135deg,#facc15,#92400e);
  border-radius:16px;
  padding:16px;
  margin-bottom:18px;
  color:#000;
  box-shadow:0 6px 18px rgba(255,200,0,0.3);
  position:relative;
}

/* HEADER */
.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
  margin-bottom:10px;
}

/* BADGE LIVE */
.badge-live{
  background:#dc2626;
  color:#fff;
  font-size:10px;
  padding:4px 8px;
  border-radius:6px;

  display:inline-flex;
  align-items:center;
  gap:6px;

  font-weight:700;

  /* glow */
  box-shadow:0 0 8px rgba(220,38,38,0.7);

  animation:liveGlow 1.5s ease-in-out infinite;
}

/* titik putih */
.badge-live::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;

  box-shadow:0 0 6px #fff;

  animation:liveDot 1s infinite;
}



/* glow anim */
@keyframes liveGlow{
  0%,100%{
    box-shadow:0 0 6px rgba(220,38,38,0.6);
  }
  50%{
    box-shadow:0 0 14px rgba(220,38,38,1);
  }
}

/* titik kedip */
@keyframes liveDot{
  0%,100%{ opacity:1; }
  50%{ opacity:0.3; }
}

/* MAIN NUMBER BOX */
.num-wrap{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:10px 0;
}

.num-box{
  background:#78350f;
  color:#fff;
  padding:12px;
  border-radius:8px;
  font-weight:900;
  font-size:20px;
  min-width:40px;
  text-align:center;
  box-shadow:inset 0 2px 4px rgba(255,255,255,0.2);
}

/* INFO TAG */
.info-row{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.info-tag{
  background:#a16207;
  padding:5px 8px;
  border-radius:6px;
  font-size:10px;
  color:#fff;
}

/* BOTTOM GRID */
.bottom{
  display:flex;
  gap:10px;
}

.col{
  flex:1;
  background:#78350f;
  border-radius:10px;
  padding:10px;
  font-size:12px;
  color:#fff;
}

.col-title{
  font-weight:700;
  margin-bottom:5px;
}

.col.red{
  border-left:3px solid red;
}

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

/* WRAP */
.search-box-gold{
  display:flex;
  align-items:center;

  padding:6px;
  border-radius:20px;

  background:linear-gradient(135deg,#facc15,#a16207);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.3),
    0 4px 12px rgba(0,0,0,0.3);

  margin-bottom:20px;
}

/* ICON (KECIL & RAPAT) */
.search-icon{
  width:34px;
  height:34px;
  border-radius:50%;

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

  background:linear-gradient(135deg,#fde047,#f59e0b);
  color:#000;
  font-size:14px;

  margin-right:8px;
}

/* ===== SEARCH FINAL FIX ===== */
.search-box-gold{
  display:flex;
  align-items:center; /* FIX BIAR GA TURUN */

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

  background:linear-gradient(135deg,#facc15,#a16207);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.3),
    0 4px 12px rgba(0,0,0,0.3);

  margin-bottom:20px;
}

/* ICON */
.search-icon{
  width:40px;
  height:40px;
  border-radius:50%;

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

  background:linear-gradient(135deg,#fde047,#f59e0b);
  color:#000;
  font-size:16px;

  margin-right:8px;
  flex-shrink:0;
}

/* INPUT */
.search-box-gold input{
  flex:1;

  border:none;
  outline:none;

  height:42px; /* FIX HEIGHT BIAR SAMA */
  padding:0 14px;

  border-radius:12px;

  background:rgba(0,0,0,0.25);
  color:#fff;

  font-size:15px;
}

/* BUTTON */
.search-box-gold button{
  margin-left:8px;

  height:42px; /* FIX BIAR SEJAJAR */
  padding:0 18px;

  border-radius:12px;

  border:1px solid rgba(255,255,255,0.5);

  background:rgba(255,255,255,0.1);
  color:#fff;
  font-weight:800;
  font-size:13px;

  cursor:pointer;

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

  transition:0.2s;
}

/* HOVER */
.search-box-gold button:hover{
  background:rgba(255,255,255,0.2);
}

/* FOCUS */
.search-box-gold input:focus{
  box-shadow:0 0 10px rgba(255,215,0,0.5);
}
.search-box-gold{
  align-items:stretch; /* ini kunci biar semua full height */
}

/* samain tinggi lewat flex */
.search-box-gold input,
.search-box-gold button{
  display:flex;
  align-items:center;
}

/* biar button ikut tinggi input */
.search-box-gold button{
  height:auto;
}
.search-box-gold button{
  margin-top:1px;
}

.title-main{
  font-weight:900;
  font-size:22px;
  text-align:center;
  margin-bottom:16px;

  /* warna emas */
  background:linear-gradient(90deg,#fde047,#facc15,#f59e0b,#fde047);
  background-size:200% auto;

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  /* glow emas */
  text-shadow:
    0 0 6px rgba(255,215,0,0.6),
    0 0 12px rgba(255,200,0,0.4);

  animation:goldShine 3s linear infinite;
}

/* animasi gerak kilap */
@keyframes goldShine{
  0%{ background-position:0% center; }
  100%{ background-position:200% center; }
}

.subtitle{
  text-align:center;
  font-size:13px;
  font-weight:600;

  margin-top:-6px;
  margin-bottom:18px;

  color:#fde68a;

  letter-spacing:0.5px;

  /* glow halus */
  text-shadow:0 0 6px rgba(255,215,0,0.4);

  opacity:0.9;
}


/* NAV WRAP */
.navbar{
  background:transparent;
}

/* INNER */
.nav-inner{
  max-width:900px;
  margin:12px auto;

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

  padding:10px 18px;
  border-radius:14px;

  background:linear-gradient(135deg,#facc15,#a16207);
  box-shadow:0 6px 16px rgba(0,0,0,0.4);
}

/* LOGO */
/* LOGO LEBIH BESAR */
.logo img{
  height:50px; /* tadinya 28px */
}
/* PASTIIN ADA POSISI */
.menu a{
  position:relative;
}

/* GARIS PEMISAH */
.menu a:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-2px; /* geser dikit biar ga nempel teks */
  top:50%;
  transform:translateY(-50%);

  width:1px;
  height:12px;

  background:rgba(0,0,0,0.3);
}
/* MENU LEBIH KECIL & RAPI */
.menu a{
  font-size:11px; /* lebih kecil biar muat */
  padding:4px 10px;
  font-weight:700;
}

/* JARAK ANTAR MENU */
.menu{
  gap:4px; /* biar ga kepanjangan */
}

/* BADGE DIKECILIN DIKIT */
.badge{
  font-size:8px;
  padding:2px 5px;
}

/* NAVBAR PADDING DIKURANGIN DIKIT */
.nav-inner{
  padding:8px 14px;
}

.menu a{
  padding:4px 8px;
}

/* DIVIDER (INI SKAT NYA 🔥) */
.menu a:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);

  width:1px;
  height:14px;
  background:rgba(0,0,0,0.2);
}

/* HOVER */
.menu a:hover{
  opacity:0.7;
}

/* BADGE */
.badge{
  font-size:9px;
  padding:2px 6px;
  border-radius:6px;
  margin-left:4px;
  color:#fff;
}

.badge.hot{
  background:#ef4444;
}

.badge.new{
  background:#10b981;
}
/* HAMBURGER */
.hamburger{
  display:none;
  font-size:22px;
  cursor:pointer;
}

/* ===== NAV DEFAULT (DESKTOP AMAN) ===== */
.menu{
  display:flex;
  align-items:center;
  gap:6px;

  position:static;
  transform:none;
  background:none;
  height:auto;
  width:auto;
  padding:0;
}

/* HAMBURGER */
.hamburger{
  display:none;
  font-size:22px;
  cursor:pointer;
}

/* ===== MOBILE FIX FINAL ===== */
@media(max-width:768px){

  .hamburger{
    display:block;
  }

  .menu{
    position:fixed;
    top:0;
    right:0;

    width:80%;
    height:100%;

    background:linear-gradient(135deg,#facc15,#a16207);

    flex-direction:column;
    align-items:flex-start;

    padding:20px;
    gap:12px;

    transform:translateX(100%);
    transition:0.3s ease;

    z-index:9999;
  }

  .menu.active{
    transform:translateX(0);
  }

  .menu a{
    width:100%;
    padding:10px 4px;
    font-size:14px;
    border-bottom:1px solid rgba(0,0,0,0.2);
  }

}

/* ===== MOBILE ONLY FIX ===== */
@media(max-width:768px){

  /* sembunyiin menu default */
  .menu{
    position:fixed;
    top:0;
    right:0;
    width:75%;
    height:100%;

    background:linear-gradient(135deg,#facc15,#a16207);

    display:flex;
    flex-direction:column;
    padding:20px;
    gap:14px;

    transform:translateX(100%);
    transition:0.3s;
    z-index:9999;
  }
  .menu{
  transition: transform 0.3s ease;
}

  /* pas kebuka */
  .menu.active{
    transform:translateX(0);
  }

  /* link */
  .menu a{
    font-size:14px;
    padding:10px 6px;
    border-bottom:1px solid rgba(0,0,0,0.2);
  }

}
/* BASE */
.badge{
  font-size:9px;
  padding:2px 6px;
  border-radius:6px;
  margin-left:4px;
  color:#fff;
  font-weight:700;
}

/* HOT (merah glow) */
.badge.hot{
  background:#ef4444;
  box-shadow:0 0 8px rgba(239,68,68,0.8);
  animation:glowHot 1.5s ease-in-out infinite;
}

/* NEW (hijau glow) */
.badge.new{
  background:#10b981;
  box-shadow:0 0 8px rgba(16,185,129,0.8);
  animation:glowNew 1.8s ease-in-out infinite;
}

/* ANIMASI */
@keyframes glowHot{
  0%,100%{
    box-shadow:0 0 6px rgba(239,68,68,0.6);
  }
  50%{
    box-shadow:0 0 14px rgba(239,68,68,1);
  }
}

@keyframes glowNew{
  0%,100%{
    box-shadow:0 0 6px rgba(16,185,129,0.6);
  }
  50%{
    box-shadow:0 0 14px rgba(16,185,129,1);
  }
}
.angka-main{
  text-align:center;

  font-size:17px;
  font-weight:900;

  margin-bottom:10px;

  letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
  color:#805a03;
}

.badge{
  animation:badgePop 2s ease-in-out infinite;
}

@keyframes badgePop{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
}
@media(max-width:768px){

  .search-box-gold{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px;
    overflow:hidden; /* penting biar ga keluar */
  }

  /* ICON */
  .search-icon{
    flex-shrink:0;
  }

  /* INPUT FLEX */
  .search-box-gold input{
    flex:1;
    min-width:0; /* penting biar ga maksa lebar */
  }

  /* BUTTON FLEX */
  .search-box-gold button{
    flex-shrink:0;
    padding:8px 10px;
    font-size:12px;
  }

}
@media(max-width:768px){

  .search-box-gold{
    display:grid;
    grid-template-columns: 36px 1fr auto;
    align-items:center;
    gap:6px;
    padding:6px 8px;
  }

  /* ICON */
  .search-icon{
    width:32px;
    height:32px;
    font-size:13px;
  }

  /* INPUT */
  .search-box-gold input{
    width:100%;
    min-width:0;
    padding:8px;
    font-size:13px;
    height:32px;
  }

  /* BUTTON */
  .search-box-gold button{
    padding:8px 10px;
    font-size:12px;
    height:32px;
    white-space:nowrap;
  }

}
.search-box-gold button{
  width:auto !important;
}

@media(max-width:768px){

  .search-box-gold{
    display:flex;
    align-items:center;
    gap:8px;

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

    background:linear-gradient(135deg,#facc15,#a16207);
  }

  /* ICON */
  .search-icon{
    width:32px;
    height:32px;
    flex-shrink:0;
  }

  /* INPUT */
  .search-box-gold input{
    flex:1;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(0,0,0,0.2);
  }

  /* BUTTON (INI KUNCI) */
  .search-box-gold button{
    padding:8px 14px;
    border-radius:10px;

    background:linear-gradient(135deg,#fde047,#f59e0b);

    /* kasih jarak dari pinggir */
    margin-right:2px;

    /* biar ga stretch */
    flex-shrink:0;
  }

}
.search-box-gold button{
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

/* FOOTER */
.footer{
  margin-top:30px;
  padding:20px 15px;

  background:transparent; /* ini biar nyatu */
  text-align:center;
}

/* CONTAINER */
.footer-inner{
  max-width:900px;
  margin:auto;
}

/* TITLE */
.footer-title{
  color:#facc15;
  font-size:14px;
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:4px;
}

/* SUB */
.footer-sub{
  color:#999;
  font-size:11px;
  margin-bottom:12px;
}

/* MENU */
.footer-menu{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;

  margin-bottom:12px;
}

.footer-menu a{
  color:#888;
  font-size:11px;
  text-decoration:none;
}

.footer-menu a:hover{
  color:#facc15;
}

/* COPYRIGHT */
.footer-copy{
  font-size:10px;
  color:#666;
}

.footer-copy span{
  display:block;
  margin-top:4px;
  color:#555;
}

.footer-title{
  border-bottom:2px solid #facc15;
  display:inline-block;
  padding-bottom:6px;
}

.footer{
  border-top:1px solid rgba(255,255,255,0.05);
}


.card-live{
  background:linear-gradient(135deg,#facc15,#b45309);
  margin:10px 0;
  padding:15px;
  border-radius:12px;
  text-align:center;
}

.card-title{
  font-weight:bold;
  margin-bottom:10px;
}

.angka span{
  display:inline-block;
  background:#5b2c06;
  color:#fff;
  padding:10px;
  margin:3px;
  border-radius:6px;
  font-weight:bold;
}

/* ===== LEADERBOARD ===== */

.leaderboard-wrap{
  max-width:1000px;
  margin:40px auto;
  padding:20px;
}

.lb-title{
  text-align:center;
  color:#ffd700;
  font-weight:bold;
  font-size:24px;
  margin-bottom:25px;
  text-shadow:0 0 10px #ffcc00;
}

/* TOP 5 */
.top3{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:25px;
}

.top-card{
  flex:1;
  min-width:130px;
  max-width:180px;
  background:linear-gradient(180deg,#facc15,#b45309);
  border-radius:14px;
  padding:15px;
  text-align:center;
  color:#000;
  font-weight:bold;
  transition:0.3s;
}

.top-card:hover{
  transform:translateY(-5px);
}

.top1{
  transform:scale(1.1);
  box-shadow:0 0 20px gold;
}

.rank{
  margin-top:8px;
  font-size:14px;
}

/* TABLE */
.lb-table{
  background:rgba(255,215,0,0.08);
  border-radius:14px;
  overflow:hidden;
}

.lb-row{
  display:flex;
  align-items:center;
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:#fff;
}

.lb-row span{
  flex:1;
  text-align:center;
  font-size:14px;
}

.lb-head{
  background:#111;
  color:#ffd700;
  font-weight:bold;
}

/* efek hover row */
.lb-row:hover{
  background:rgba(255,215,0,0.1);
}

/* MOBILE FIX */
@media(max-width:600px){
  .top-card{
    min-width:100px;
    font-size:12px;
  }

  .lb-row span{
    font-size:12px;
  }
}


/* PODIUM STYLE */
.top3{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:10px;
  margin-bottom:30px;
}

/* CARD */
.top-card{
  width:140px;
  background:linear-gradient(180deg,#facc15,#b45309);
  border-radius:14px;
  padding:15px;
  text-align:center;
  color:#000;
  position:relative;
  transition:0.3s;
}

/* POSISI PODIUM */
.podium-1{ height:180px; transform:translateY(-20px); z-index:3; box-shadow:0 0 20px gold; }
.podium-2{ height:150px; transform:translateY(-10px); z-index:2; }
.podium-3{ height:140px; }
.podium-4{ height:120px; opacity:0.9; }
.podium-5{ height:120px; opacity:0.9; }

/* ICON */
.medal{
  font-size:20px;
  margin-bottom:5px;
}

/* TEXT */
.name{
  font-weight:bold;
  font-size:13px;
}

.prize{
  font-size:12px;
  margin:5px 0;
}

.win{
  font-size:11px;
  background:#00000022;
  border-radius:6px;
  padding:3px;
  display:inline-block;
}

/* RANK BAWAH */
.rank{
  position:absolute;
  bottom:-25px;
  left:50%;
  transform:translateX(-50%);
  font-weight:bold;
  color:#ffd700;
}
/* ===== TOP 1–5 GLOW ===== */

.lb-row:nth-child(1),
.lb-row:nth-child(2),
.lb-row:nth-child(3),
.lb-row:nth-child(4),
.lb-row:nth-child(5){
  position: relative;
  overflow: hidden;
}

/* BASE GOLD */
.lb-row:nth-child(1){
  background:linear-gradient(90deg,#ffd70033,#ffcc0033);
  font-weight:bold;
}

.lb-row:nth-child(2),
.lb-row:nth-child(3),
.lb-row:nth-child(4),
.lb-row:nth-child(5){
  background:linear-gradient(90deg,#ffd70022,#ffcc0022);
}

/* 🔥 GLOW ANIMATION */
.lb-row:nth-child(1)::before,
.lb-row:nth-child(2)::before,
.lb-row:nth-child(3)::before,
.lb-row:nth-child(4)::before,
.lb-row:nth-child(5)::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,215,0,0.6),
    transparent
  );
  animation: shine 3s infinite;
}

/* SPEED BERBEDA BIAR NATURAL */
.lb-row:nth-child(1)::before{ animation-duration:2.5s; }
.lb-row:nth-child(2)::before{ animation-duration:3s; }
.lb-row:nth-child(3)::before{ animation-duration:3.5s; }
.lb-row:nth-child(4)::before{ animation-duration:4s; }
.lb-row:nth-child(5)::before{ animation-duration:4.5s; }

/* KEYFRAME */
@keyframes shine{
  0%{ left:-100%; }
  100%{ left:100%; }
}


/* ===== MOBILE LEADERBOARD FIX ===== */
@media(max-width:600px){

  .top3{
    flex-direction:column;
    align-items:center;
  }

  .top-card{
    width:90%;
    max-width:300px;
    transform:none !important;
    height:auto !important;
    margin-bottom:10px;
  }

  /* RESET URUTAN */
  .podium-1,
  .podium-2,
  .podium-3,
  .podium-4,
  .podium-5{
    order:unset !important;
  }

}


/* ===== FIX MOBILE KE POTONG ===== */
@media(max-width:600px){

  .leaderboard-wrap{
    padding:10px;
    overflow:hidden;
  }

  .top3{
    padding:0 10px;
  }

  .top-card{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

}
@media(max-width:600px){

  /* kalau pakai class rank */
  .rank{
    display:none !important;
  }

  /* kalau pakai podium-base */
  .podium-base{
    display:none !important;
  }

}


.ai-box{
  max-width:500px;
  margin:30px auto;
  padding:20px;
  border-radius:15px;
  background:linear-gradient(180deg,#facc15,#b45309);
  text-align:center;
}

.ai-box select{
  width:100%;
  padding:12px;
  border-radius:10px;
  margin:15px 0;
}

.ai-box button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:gold;
  font-weight:bold;
  cursor:pointer;
}

.hasil-ai{
  margin-top:20px;
}

.num-ai{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:15px 0;
}

.num-ai div{
  width:50px;
  height:50px;
  background:#ffd700;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:20px;
}
#pasaranSelect{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(255,215,0,0.3);

  background:linear-gradient(180deg,#3b1d00,#2a1200);
  color:#ffd700;

  font-weight:600;
  font-size:15px;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  outline:none;
}
.ai-box{
  max-width:520px;
  margin:40px auto;
  padding:25px;

  border-radius:18px;

  background:linear-gradient(180deg,#facc15,#b45309);
  border:2px solid rgba(255,215,0,0.6);

  box-shadow:
    0 0 25px rgba(255,215,0,0.4),
    inset 0 0 15px rgba(255,255,255,0.2);

  position:relative;
}

.ai-box button{
  width:100%;
  padding:15px;

  border:none;
  border-radius:12px;

  background:linear-gradient(90deg,#ffd700,#ffcc00);
  color:#000;

  font-weight:bold;
  letter-spacing:1px;

  box-shadow:0 0 20px rgba(255,215,0,0.6);

  transition:0.2s;
}

.ai-box button:hover{
  transform:scale(1.03);
  box-shadow:0 0 30px rgba(255,215,0,0.9);
}

/* BADGE */
.ai-badge{
  display:inline-block;
  padding:6px 14px;
  border-radius:20px;
  font-size:11px;
  color:#00ffcc;

  background:rgba(0,255,200,0.1);
  border:1px solid rgba(0,255,200,0.4);

  margin-bottom:15px;
}

/* STEP WRAPPER */
.ai-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* STEP BOX */
.step{
  text-align:center;
  color:#fff;
  opacity:0.5;
}

.step span{
  display:inline-flex;
  width:28px;
  height:28px;

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

  border-radius:8px;
  background:#222;
  font-weight:bold;
  margin-bottom:5px;
}

.step small{
  display:block;
  font-size:10px;
}

/* ACTIVE STEP */
.step.active{
  opacity:1;
}

.step.active span{
  background:#ffd700;
  color:#000;
  box-shadow:0 0 10px gold;
}

/* LINE */
.line{
  width:20px;
  height:2px;
  background:rgba(255,255,255,0.3);
}

.ai-result{
  margin-top:20px;
  color:#fff;
}

/* TITLE */
.ai-title{
  text-align:center;
  font-weight:bold;
  color:#ffd700;
  margin-bottom:15px;
}

/* BALLS */
.ai-balls{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:15px 0;
}

.ai-balls div{
  width:55px;
  height:55px;
  border-radius:50%;

  background:radial-gradient(circle,#fff,#ffd700);

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

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

  box-shadow:0 0 10px gold;
}

/* INFO */
.ai-info{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0;
}

.ai-info span{
  background:#3b1d00;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  color:#ffd700;
}

/* RESULT BOX */
.ai-box-result{
  background:linear-gradient(180deg,#3b1d00,#2a1200);
  padding:12px;
  border-radius:12px;
  margin:10px 0;

  border-left:3px solid gold;
}

.ai-box-result.red{
  border-left:3px solid #ff0033;
}

.ai-box-result b{
  color:#ffd700;
}

.ai-box-result p{
  margin-top:5px;
  color:#fff;
}

/* SUCCESS */
.ai-success{
  text-align:center;
  color:#00ffcc;
  font-size:12px;
  margin-top:10px;
}

.dd{
  position:relative;
  width:100%;
  user-select:none;
}

/* box atas */
.dd-selected{
  padding:14px;
  border-radius:12px;
  cursor:pointer;

  background:linear-gradient(180deg,#3b1d00,#2a1200);
  color:#ffd700;
  border:1px solid rgba(255,215,0,0.4);

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

.dd-selected .arrow{
  opacity:0.7;
}

/* dropdown list */
.dd-list{
  display:none;
  position:absolute;
  top:110%;
  left:0;
  width:100%;

  background:#2a1200;
  border-radius:12px;
  overflow:hidden;
  max-height:220px;
  overflow-y:auto;

  z-index:999;
  box-shadow:0 0 20px rgba(0,0,0,0.6);
}

/* item */
.dd-item{
  padding:12px;
  color:#ffd700;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.dd-item:hover{
  background:#1a1a1a;
}

/* active */
.dd-item.active{
  background:#222;
}

.ai-brain{
  width:120px;
  height:120px;
  position:relative;
  margin:30px auto;
}

/* CORE */
.core{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

  width:70px;
  height:70px;
  border-radius:50%;

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

  font-size:28px;

  background:radial-gradient(circle,#ffd700,#ff9900);

  box-shadow:
    0 0 20px gold,
    0 0 40px rgba(255,215,0,0.6);
}

/* ORBIT BASE */
.orbit{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}

/* DOT DALAM ORBIT */
.orbit span{
  position:absolute;
  top:50%;
  left:0;

  width:8px;
  height:8px;
  border-radius:50%;

  background:gold;
  box-shadow:0 0 10px gold;

  transform:translateY(-50%);
}

/* ORBIT 1 */
.orbit1{
  width:90px;
  height:90px;
  border:2px solid rgba(255,215,0,0.3);
  animation:spin1 6s linear infinite;
}

/* ORBIT 2 */
.orbit2{
  width:110px;
  height:110px;
  border:1px solid rgba(255,185,0,0.2);
  animation:spin2 8s linear infinite reverse;
}

/* ORBIT 3 */
.orbit3{
  width:130px;
  height:130px;
  border:1px dashed rgba(255,135,0,0.2);
  animation:spin3 10s linear infinite;
}

/* ANIMASI */
@keyframes spin1{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}

@keyframes spin2{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(-360deg); }
}

@keyframes spin3{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}
.ai-brain{
  filter: drop-shadow(0 0 15px gold);
}
.orbit2 span{ width:6px;height:6px; }
.orbit3 span{ width:4px;height:4px; }

.ai-brain{
  margin-bottom:-5px;
}

/* ===== PANDUAN PAGE ===== */

.pd-wrap{
  max-width:900px;
  margin:30px auto;
  padding:20px;
}

/* TITLE */
.pd-title{
  text-align:center;
  color:#ffd700;
  font-weight:bold;
  font-size:24px;
}

.pd-sub{
  text-align:center;
  color:#ccc;
  font-size:13px;
  margin-bottom:20px;
}

/* SECTION TITLE */
.pd-section{
  color:#ffd700;
  margin:20px 0 10px;
  font-weight:bold;
  display:flex;
  align-items:center;
  gap:10px;
}

.pd-section::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,215,0,0.3);
}

/* GRID */
.pd-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

/* CARD */
.pd-card{
  background:linear-gradient(180deg,#facc15,#b45309);
  border-radius:12px;
  padding:15px;
  color:#000;

  border:1px solid rgba(255,215,0,0.6);
  box-shadow:0 0 10px rgba(255,215,0,0.3);

  transition:0.2s;
}

.pd-card:hover{
  transform:translateY(-3px);
  box-shadow:0 0 20px rgba(255,215,0,0.6);
}

.pd-card-title{
  font-weight:bold;
  margin-bottom:5px;
}

.pd-card p{
  font-size:13px;
}

/* TIPS */
.pd-grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:15px;
}

.pd-tip{
  text-align:center;
  background:linear-gradient(180deg,#facc15,#b45309);
  border-radius:12px;
  padding:15px;
  color:#000;

  transition:0.2s;
}

.pd-tip:hover{
  transform:translateY(-3px);
  box-shadow:0 0 20px rgba(255,215,0,0.6);
}

.pd-tip b{
  display:block;
  margin-top:5px;
}

/* MOBILE */
@media(max-width:600px){
  .pd-grid{
    grid-template-columns:1fr;
  }
  
  /* WRAP */
.home-wrap{
  display:flex;
  gap:15px;
  max-width:1100px;
  margin:20px auto;
  padding:10px;
}

/* LEFT */
.home-left{
  flex:3;
}

.main-banner{
  width:100%;
  border-radius:12px;
}



/* WARNA BUTTON */
.login{ background:#3b1d00; border:1px solid gold; }
.daftar{ background:gold; color:#000; }
.promo{ background:#ff9900; }
.rtp{ background:#2d6cff; }

/* RIGHT */
.home-right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.home-right img{
  width:100%;
  border-radius:10px;
}

  .pd-grid-3{
    grid-template-columns:1fr;
  }
}

.home-wrap{
  display:flex;
  gap:15px;
  max-width:1100px;
  margin:20px auto;
  padding:10px;
}

.home-left{
  flex:3;
}

.main-banner{
  width:100%;
  border-radius:12px;
}

.home-buttons{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;

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

  font-weight:bold;
  text-decoration:none;

  transition:0.2s;
  cursor:pointer;
}

/* LOGIN */
.login{
  background:#2a1200;
  border:1px solid gold;
  color:#ffd700;
}

/* DAFTAR */
.daftar{
  background:linear-gradient(180deg,#ffd700,#b8860b);
  color:#000;
}

/* PROMO */
.promo{
  background:linear-gradient(180deg,#ff9900,#cc6600);
  color:#fff;
}

/* RTP */
.rtp{
  background:linear-gradient(180deg,#2d6cff,#1a3bb8);
  color:#fff;
}

/* HOVER EFFECT */
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 15px rgba(255,215,0,0.6);
}

.home-right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.home-right img{
  width:100%;
  border-radius:10px;
}

/* MOBILE */
@media(max-width:768px){
  .home-wrap{
    flex-direction:column;
  }

  .home-buttons{
    grid-template-columns:1fr 1fr;
  }
}

.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;

  background:#0b0b0b;
  border-top:1px solid rgba(255,215,0,0.2);

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

  padding:8px 0;

  z-index:999;
}

/* ITEM */
.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  font-size:12px;
  color:#aaa;
  text-decoration:none;
}

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

/* ACTIVE */
.nav-item.active{
  color:#ffd700;
}

/* TOMBOL TENGAH */
.nav-center{
  position:relative;
  top:-20px;

  width:60px;
  height:60px;

  border-radius:50%;

  background:linear-gradient(180deg,#ffd700,#ff9900);

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

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

  box-shadow:
    0 0 10px gold,
    0 0 20px rgba(255,215,0,0.6);
}

.nav-center span{
  position:absolute;
  bottom:-18px;
  font-size:11px;
  color:#ffd700;
}

@media(max-width:768px){
  body{
    padding-bottom:calc(70px + env(safe-area-inset-bottom));
  }
}