/* =============================================
   RTP LIVE SLOT — STYLESHEET
   ============================================= */

:root{
  /* =============================================
     🎨 WARNA — UBAH DI SINI SESUAI KEINGINAN
     ============================================= */

  /* WARNA AKSEN UTAMA */
  --gold:#E8A87C;       /* Coklat hangat / RTP tinggi         */
  --gold2:#C0622A;      /* Coklat tua / gradient              */
  --neon:#E07050;       /* Merah bata / border aktif          */
  --red:#CC3300;        /* Merah gelap / badge live           */
  --green:#D4845A;      /* Coklat oranye / RTP sangat tinggi  */

  /* BACKGROUND UTAMA HALAMAN */
  --bg-page:#1A0A08;    /* Coklat sangat gelap                */

  /* HEADER */
  --bg-header:rgba(30,10,5,.98);
  --border-header:rgba(180,80,40,.2);

  /* BANNER */
  --bg-banner:#1A0A08;

  /* PROVIDER SECTION */
  --bg-provider-card:rgba(180,80,40,.07);
  --border-provider:rgba(180,80,40,.2);
  --border-provider-hover:rgba(220,100,50,.7);
  --bg-provider-hover:rgba(180,80,40,.15);

  /* REKOMENDASI KEMENANGAN */
  --bg-winrec:#1A0A08;
  --bg-winrec-box1:rgba(180,80,30,.1);
  --bg-winrec-box2:rgba(140,50,20,.06);
  --border-winrec:rgba(180,80,40,.28);
  --bg-winrec-card:rgba(160,60,30,.08);
  --border-winrec-card:rgba(180,80,40,.2);

  /* GAME CARD */
  --bg-card:rgba(180,80,40,.06);
  --border-card:rgba(180,80,40,.18);
  --border-card-hover:rgba(220,100,50,.45);

  /* MODAL POPUP */
  --bg-modal1:#1F0C08;
  --bg-modal2:#2A1208;
  --border-modal:rgba(200,90,50,.25);

  /* MISC */
  --r:12px;
}

/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background-color:var(--bg-page);
  background-image:url('img/assets/background-desktop.png');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:#fff;
  font-family:'Rajdhani',sans-serif,system-ui;
  overflow-x:hidden;
}
/* Mobile: pakai gambar portrait */
@media(max-width:768px){
  body{
    background-image:url('img/assets/background-mobile.jpg');
    background-attachment:scroll;
  }
}
body::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.45);pointer-events:none;z-index:0}

/* ===== HEADER ===== */
header{position:sticky;top:0;z-index:100;background:var(--bg-header);border-bottom:1px solid var(--border-header);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:36px;width:auto;object-fit:contain}
.live-badge{display:flex;align-items:center;gap:6px;background:rgba(180,40,10,.2);border:1px solid rgba(200,60,20,.5);border-radius:20px;padding:5px 12px;font-size:.74rem;font-weight:700;letter-spacing:1px;color:#E07050;white-space:nowrap}
.live-dot{width:7px;height:7px;background:#CC3300;border-radius:50%;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.clock{font-size:.7rem;color:rgba(255,200,160,.35);font-family:'Orbitron',monospace;white-space:nowrap}

/* ===== BANNER ===== */
.hero{
  position:relative;
  z-index:1;
  padding:10px 12px;
}
.hero-frame{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:2px solid transparent;
  background-clip:padding-box;
  box-shadow:
    0 0 0 2px rgba(212,175,55,.6),
    0 0 16px rgba(212,175,55,.35),
    0 0 40px rgba(212,175,55,.15),
    inset 0 0 20px rgba(0,0,0,.2);
  animation:bannerGlow 3s ease-in-out infinite alternate;
  /* Pastikan banner tidak mengecil */
  width:100%;
  line-height:0;
}
.hero-frame img{
  width:100%;
  height:auto;
  min-height:120px;
  display:block;
  object-fit:cover;
}
@keyframes bannerGlow{
  from{box-shadow:0 0 0 2px rgba(212,175,55,.5),0 0 16px rgba(212,175,55,.25),0 0 40px rgba(212,175,55,.1)}
  to  {box-shadow:0 0 0 2px rgba(255,215,80,.9),0 0 24px rgba(255,215,80,.5),0 0 60px rgba(255,215,80,.2)}
}
.hero-frame::before,.hero-frame::after{
  content:'';
  position:absolute;
  width:28px;height:28px;
  z-index:2;pointer-events:none;
}
.hero-frame::before{top:6px;left:6px;border-top:3px solid #FFD700;border-left:3px solid #FFD700;border-radius:6px 0 0 0}
.hero-frame::after{top:6px;right:6px;border-top:3px solid #FFD700;border-right:3px solid #FFD700;border-radius:0 6px 0 0}
.hero-corner-bl,.hero-corner-br{position:absolute;width:28px;height:28px;z-index:2;pointer-events:none}
.hero-corner-bl{bottom:6px;left:6px;border-bottom:3px solid #FFD700;border-left:3px solid #FFD700;border-radius:0 0 0 6px}
.hero-corner-br{bottom:6px;right:6px;border-bottom:3px solid #FFD700;border-right:3px solid #FFD700;border-radius:0 0 6px 0}

@media(max-width:480px){
  .hero{padding:8px 8px}
  .hero-frame{border-radius:12px}
  .hero-frame img{min-height:80px}
}

/* ===== BANNER BUTTONS ===== */
.banner-btns{
  position:relative;z-index:1;
  display:flex;gap:10px;
  padding:12px 12px;
  justify-content:center;
  flex-wrap:wrap;
}
.bbtn{
  display:flex;align-items:center;gap:7px;
  padding:10px 20px;
  border-radius:50px;
  font-family:'Orbitron',monospace;
  font-size:.72rem;font-weight:700;
  letter-spacing:.8px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s,box-shadow .18s,opacity .18s;
  white-space:nowrap;
}
.bbtn svg{width:16px;height:16px;flex-shrink:0}
.bbtn:hover{transform:translateY(-2px);opacity:.9}
.bbtn:active{transform:translateY(0)}

/* APK — biru */
.bbtn-apk{
  background:linear-gradient(135deg,#1565C0,#1E88E5);
  color:#fff;
  box-shadow:0 4px 14px rgba(30,136,229,.45);
}
.bbtn-apk:hover{box-shadow:0 6px 20px rgba(30,136,229,.65)}

/* Daftar — emas */
.bbtn-daftar{
  background:linear-gradient(135deg,#C0622A,#E8A87C);
  color:#fff;
  box-shadow:0 4px 14px rgba(192,98,42,.45);
}
.bbtn-daftar:hover{box-shadow:0 6px 20px rgba(232,168,124,.65)}

/* Login — hijau */
.bbtn-login{
  background:linear-gradient(135deg,#1B5E20,#43A047);
  color:#fff;
  box-shadow:0 4px 14px rgba(67,160,71,.45);
}
.bbtn-login:hover{box-shadow:0 6px 20px rgba(67,160,71,.65)}

@media(max-width:480px){
  .bbtn{padding:9px 14px;font-size:.65rem;gap:5px}
  .bbtn svg{width:14px;height:14px}
}

/* ===== MAIN ===== */
.main{position:relative;z-index:1;padding:16px 12px;max-width:1280px;margin:0 auto}
.stitle{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.stitle h2{font-family:'Orbitron',monospace;font-size:.88rem;font-weight:700;letter-spacing:2px;white-space:nowrap}
.sline{flex:1;height:1px;background:linear-gradient(90deg,var(--border-card),transparent)}

/* ===== PROVIDER ===== */
.pv-outer{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.pv-arr{
  flex-shrink:0;
  width:42px;height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,#C0622A,#E8A87C);
  border:none;
  color:#fff;
  font-size:1.1rem;
  font-weight:900;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  user-select:none;
  box-shadow:0 4px 14px rgba(192,98,42,.5);
  transition:transform .18s,box-shadow .18s,opacity .18s;
}
.pv-arr:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(232,168,124,.7);opacity:.95}
.pv-arr:active{transform:scale(.95)}
.pv-wrap{overflow:hidden;flex:1;position:relative}
.pv-wrap::before,.pv-wrap::after{content:'';position:absolute;top:0;bottom:0;width:28px;z-index:2;pointer-events:none}
.pv-wrap::before{left:0;background:linear-gradient(90deg,var(--bg-page),transparent)}
.pv-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg-page),transparent)}
.pv-track{display:flex;gap:10px;transition:transform .38s cubic-bezier(.23,1,.32,1);width:max-content}

/* Card style: kotak gelap, rounded, logo putih di tengah, nama di bawah */
.pv-card{
  flex-shrink:0;
  width:110px;
  height:90px;
  background:#f0ede8;
  border:1px solid rgba(255,255,255,.3);
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  text-decoration:none;
  transition:border-color .2s,transform .2s,background .2s;
  padding:10px 8px;
}
.pv-card:hover{border-color:rgba(220,100,50,.7);transform:translateY(-2px);background:#fff}
.pv-card.active{border-color:rgba(220,100,50,.9);background:#fff}

/* Logo → filter putih agar semua logo apapun warnanya tampil putih */
.pv-logo-wrap{display:flex;align-items:center;justify-content:center;width:72px;height:40px}
.pv-card img{
  width:72px;
  height:40px;
  object-fit:contain;
  display:block;
  transition:opacity .2s;
}
.pv-card:hover img{opacity:1}

.pv-name{
  font-family:'Rajdhani',sans-serif;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.5px;
  color:#333;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* ===== WIN REC ===== */
.win-box{background:linear-gradient(135deg,var(--bg-winrec-box1),var(--bg-winrec-box2),var(--bg-winrec-box1));border:1px solid var(--border-winrec);border-radius:14px;padding:14px 16px;margin-bottom:22px}
.win-ttl{font-family:'Orbitron',monospace;font-size:.76rem;font-weight:700;letter-spacing:2px;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.win-ttl::before{content:'';width:8px;height:8px;background:var(--gold);border-radius:50%;animation:pulse 1.2s infinite;flex-shrink:0}
.win-mask{overflow:hidden;position:relative}
.win-mask::before,.win-mask::after{content:'';position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none}
.win-mask::before{left:0;background:linear-gradient(90deg,var(--bg-page),transparent)}
.win-mask::after{right:0;background:linear-gradient(-90deg,var(--bg-page),transparent)}
.win-track{display:flex;gap:12px;animation:wscroll 30s linear infinite;width:max-content;will-change:transform}
.win-track:hover{animation-play-state:paused}
@keyframes wscroll{to{transform:translateX(-50%)}}

/* Card lebih besar, layout vertikal agar tidak kejepit */
.win-card{
  flex-shrink:0;
  width:150px;
  background:var(--bg-header);
  border:1px solid rgba(180,80,40,.3);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.win-card:hover{background:rgba(40,15,8,.98);border-color:rgba(220,100,50,.6);transform:translateY(-2px)}
.wimg{width:100%;height:80px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.04);flex-shrink:0}
.wimg img{width:100%;height:100%;object-fit:cover;display:block}
.wi{width:100%;min-width:0}
.wi-game{font-size:.78rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.wi-prov{font-size:.62rem;color:rgba(255,255,255,.35);margin-bottom:4px}
.wr{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%}
.wr-rtp{font-family:'Orbitron',monospace;font-size:1rem;font-weight:900;color:var(--gold);line-height:1;white-space:nowrap}
.ws{font-size:.58rem;padding:2px 8px;border-radius:8px;font-weight:700;white-space:nowrap}
.shot{background:rgba(255,51,102,.18);color:var(--red);border:1px solid rgba(255,51,102,.28)}
.swin{background:rgba(0,255,136,.12);color:var(--green);border:1px solid rgba(0,255,136,.26)}
.snew{background:rgba(0,191,255,.12);color:#00BFFF;border:1px solid rgba(0,191,255,.26)}

/* Tombol Login & Daftar di win-card */
.wc-btns{display:flex;gap:6px;width:100%;margin-top:2px}
.wc-btn{flex:1;padding:5px 0;border-radius:7px;font-family:'Orbitron',monospace;font-size:.55rem;font-weight:700;letter-spacing:.8px;text-align:center;text-decoration:none;cursor:pointer;transition:opacity .2s,transform .15s}
.wc-btn:hover{opacity:.85;transform:translateY(-1px)}
.wc-daftar{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#000}
.wc-login{background:rgba(224,112,80,.12);border:1px solid rgba(224,112,80,.4);color:var(--neon)}

/* ===== FILTER ===== */
.fbar{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.fbar::-webkit-scrollbar{display:none}
.fbtn{flex-shrink:0;padding:6px 18px;border-radius:20px;border:1px solid var(--border-card);background:transparent;color:rgba(255,255,255,.42);font-family:'Rajdhani',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.fbtn.active{background:rgba(180,80,40,.15);border-color:rgba(220,100,50,.55);color:var(--neon)}

/* ===== GAME GRID ===== */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px;margin-bottom:24px;contain:layout}
.gc{background:var(--bg-header);border:1px solid rgba(180,80,40,.3);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s;contain:layout style;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.gc:hover{border-color:rgba(220,100,50,.6);transform:translateY(-3px);box-shadow:0 8px 20px rgba(180,80,40,.2)}
.gthumb{width:100%;aspect-ratio:4/3;background:rgba(255,255,255,.03);overflow:hidden}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.gc:hover .gthumb img{transform:scale(1.05)}
.gbody{padding:9px 11px}
.gname{font-size:.73rem;font-weight:700;color:#fff;margin-bottom:5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grtp{font-family:'Orbitron',monospace;font-size:1.1rem;font-weight:900;line-height:1;margin-bottom:3px}
.gprov{font-size:.6rem;color:rgba(255,255,255,.28);margin-bottom:6px}
.rbar{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.rfill{height:100%;border-radius:2px}
.rh{color:var(--green)}.rm{color:var(--gold)}.rl{color:rgba(255,255,255,.4)}
.rfill.rh{background:linear-gradient(90deg,var(--green),var(--neon))}
.rfill.rm{background:linear-gradient(90deg,var(--gold2),var(--gold))}
.rfill.rl{background:rgba(255,255,255,.16)}

/* ===== FOOTER ===== */
footer{text-align:center;padding:16px;border-top:1px solid var(--border-card);color:rgba(255,255,255,.2);font-size:.68rem}

/* ===== MODAL ===== */
.mOv{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:999;align-items:center;justify-content:center;padding:16px}
.mOv.show{display:flex}
.modal{background:linear-gradient(145deg,var(--bg-modal1),var(--bg-modal2));border:1px solid var(--border-modal);border-radius:18px;padding:26px 22px;width:100%;max-width:360px;position:relative;animation:mIn .28s cubic-bezier(.23,1,.32,1)}
@keyframes mIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.mcl{position:absolute;top:13px;right:15px;background:none;border:none;color:rgba(255,255,255,.38);font-size:1.3rem;cursor:pointer;line-height:1;transition:color .2s}
.mcl:hover{color:#fff}
.mgi{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.mgi-img{width:72px;height:72px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06);flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.mgi-img img{width:100%;height:100%;object-fit:cover;display:block}
.mgn{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:4px;line-height:1.3}
.mgr{font-family:'Orbitron',monospace;font-size:1.05rem;font-weight:900;color:var(--green)}
.mttl{font-family:'Orbitron',monospace;font-size:.75rem;font-weight:700;letter-spacing:2px;color:rgba(255,255,255,.4);text-align:center;margin-bottom:14px}
.mbtns{display:flex;flex-direction:column;gap:10px}
.mbtn{display:block;width:100%;padding:13px;border-radius:12px;font-family:'Orbitron',monospace;font-size:.8rem;font-weight:700;letter-spacing:1px;text-align:center;text-decoration:none;cursor:pointer;border:none;transition:opacity .2s,box-shadow .2s}
.mbtn-l{background:rgba(0,255,204,.1);border:1px solid rgba(0,255,204,.4);color:var(--neon)}
.mbtn-l:hover{background:rgba(0,255,204,.18)}
.mbtn-d{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#000;font-weight:900}
.mbtn-d:hover{opacity:.88;box-shadow:0 5px 16px rgba(255,215,0,.28)}
.mnote{text-align:center;font-size:.6rem;color:rgba(255,255,255,.2);margin-top:11px}

/* ===== FLOATING BUTTONS ===== */
.float-btns{position:fixed;bottom:24px;left:16px;display:flex;flex-direction:column;gap:10px;z-index:998}
.float-btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,0.35);transition:transform .2s,box-shadow .2s}
.float-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.4)}
.float-btn svg{width:26px;height:26px;fill:#fff}
.float-btn-wa{background:#25D366}
.float-btn-tg{background:#229ED9}

/* ===== MOBILE ===== */
@media(max-width:480px){
  header{padding:8px 11px}
  .logo img{height:28px}
  .clock{display:none}
  .main{padding:12px 10px}
  .pv-arr{width:28px;height:28px;font-size:.8rem}
  .pv-card{width:82px;height:74px;border-radius:12px;gap:4px}
  .pv-card img{width:58px;height:30px}
  .pv-name{font-size:.58rem}
  .ggrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .grtp{font-size:1rem}
  /* win card mobile */
  .win-card{width:130px;padding:10px}
  .wimg{height:65px}
  .wi-game{font-size:.7rem}
  .wr-rtp{font-size:.88rem}
  .ws{font-size:.5rem;padding:2px 5px}
}

/* ===== TABLET ===== */
@media(min-width:481px) and (max-width:768px){
  .ggrid{grid-template-columns:repeat(3,1fr)}
}

/* ===== DESKTOP ===== */
@media(min-width:1024px){
  header{padding:12px 32px;backdrop-filter:blur(12px);background:rgba(30,10,5,.97)}
  .logo img{height:40px}
  .main{padding:22px 32px}
  .pv-card{width:120px;height:96px;border-radius:18px}
  .pv-card img{width:88px;height:46px}
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
  .grtp{font-size:1.2rem}
}

@media(min-width:1280px){
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}