:root{
  --bg:#111111;
  --panel:#1a1a1a;
  --panel2:#202020;
  --red:#680707;
  --red2:#2a0505;
  --gold:#ffbf17;
  --text:#f1f1f1;
  --muted:#bdbdbd;
  --line:#3a2a11;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0f0f0f;color:var(--text);font-family:Arial,Helvetica,sans-serif}
img{display:block;max-width:100%}
a{text-decoration:none}

.container{max-width:1280px;margin:0 auto;padding:0 10px}

.top-actions{
  background:#2a0505;
  border-bottom:1px solid #5e2424;
}
.top-actions .container{
  display:flex;justify-content:flex-end;gap:8px;padding:6px 10px;
}
.mini-btn{
  background:var(--gold);color:#000;font-size:12px;font-weight:700;padding:6px 12px;border-radius:2px;
}
.mini-btn.register{background:#ff8c00}

.site-header{
  background:linear-gradient(180deg,var(--red),var(--red2));
  border-bottom:1px solid #7a2b2b;
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;padding:12px 10px;
}
.brand{
  color:var(--gold);font-weight:900;font-size:34px;letter-spacing:.5px;text-shadow:0 0 10px rgba(255,191,23,.2);
}
.main-nav{
  display:flex;align-items:center;gap:26px;
}
.main-nav a{
  display:flex;flex-direction:column;align-items:center;gap:4px;color:#f7d978;font-size:12px;font-weight:700;
}
.main-nav a span{font-size:18px}
.nav-toggle{
  display:none;background:none;border:0;color:#fff;font-size:24px
}
.mobile-nav{display:none;background:#191919;padding:8px 10px;border-top:1px solid #352211}
.mobile-nav a{display:block;color:#ddd;padding:10px 0;border-bottom:1px solid #262626}

.main-wrap{padding-top:10px;padding-bottom:30px}

.hero-slider{
  position:relative;margin-bottom:14px;
}
.slider-window{
  overflow:hidden;border:1px solid #402212;background:#120909;border-radius:3px;
}
.slider-track{
  display:flex;transition:transform .45s ease;
}
.slider-track img{
  width:100%;flex:0 0 100%;height:300px;object-fit:cover;
}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:3px;border:0;background:rgba(23,23,23,.88);color:#fff;font-size:22px;cursor:pointer
}
.slider-arrow.prev{left:8px}
.slider-arrow.next{right:8px}
.slider-dots{
  display:flex;justify-content:center;gap:6px;padding-top:8px
}
.slider-dots button{
  width:8px;height:8px;border-radius:50%;border:0;background:#5f5f5f;cursor:pointer
}
.slider-dots button.active{background:var(--gold)}

.content-grid{
  display:grid;grid-template-columns:2.1fr .95fr;gap:14px;
}
.section-title{
  display:flex;align-items:center;gap:10px;margin:4px 0 10px;
}
.section-title h2{
  color:#ff4c21;font-size:18px;margin:0;font-weight:800;
}
.title-line{
  height:1px;background:#412515;flex:1;
}
.games-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.game-card{
  background:#141414;border:1px solid #2b2b2b;border-radius:4px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease;
}
.game-card:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,191,23,.28), 0 10px 18px rgba(0,0,0,.35);
}
.game-card img{
  width:100%;aspect-ratio:1/1;object-fit:cover;background:#240909;
}
.game-meta{
  padding:8px 8px 10px;
}
.game-meta h3{
  font-size:12px;line-height:1.25;margin:0 0 3px;color:#fff;font-weight:700;
}
.game-meta p{
  margin:0;color:#9d9d9d;font-size:11px;
}

.panel{
  background:#151515;border:1px solid #272727;border-radius:4px;overflow:hidden;
}
.panel-title{
  color:#ff4c21;font-size:16px;font-weight:800;padding:12px 12px 10px;border-bottom:1px solid #272727;
}
.match-card{
  padding:12px;border-bottom:1px solid #262626;
}
.match-card:last-child{border-bottom:0}
.league{
  color:#f0a81a;font-size:12px;font-weight:700;margin-bottom:10px;
}
.teams,.odds{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
}
.teams{margin-bottom:8px}
.teams span{
  color:#efefef;font-size:13px;
}
.teams span:last-child{text-align:right}
.teams b{
  color:#f0a81a;
}
.odds span{
  display:block;background:#201910;border:1px solid #463113;color:#f5c14c;font-weight:700;padding:5px 6px;text-align:center;border-radius:2px;font-size:12px;
}
.service-box{
  position:relative;padding:18px 14px 18px 14px;min-height:88px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,#1c1c1c,#131313)
}
.service-time{
  font-size:24px;font-weight:800;color:#fff;
}
.service-text{
  color:#a8a8a8;font-size:12px;margin-top:4px
}
.live-badge{
  position:absolute;right:10px;top:12px;background:#ff1458;color:#fff;font-size:10px;font-weight:800;padding:4px 6px;border-radius:3px;
}

.bank-section{
  margin-top:14px;
}
.bank-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:12px;
}
.bank-grid span{
  display:flex;align-items:center;justify-content:center;background:#212121;border:1px solid #323232;height:42px;border-radius:3px;color:#35b0ff;font-weight:800;
}

.seo-content{
  margin-top:16px;background:#141414;border:1px solid #272727;border-radius:4px;padding:18px;color:#d0d0d0;line-height:1.7;
}
.seo-content h1{
  margin:0 0 10px;color:var(--gold);font-size:26px;line-height:1.3;
}
.seo-content p{margin:0 0 12px}

@media (max-width: 980px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .content-grid{grid-template-columns:1fr}
  .games-grid{grid-template-columns:repeat(4,1fr)}
  .slider-track img{height:240px}
}
@media (max-width: 700px){
  .brand{font-size:28px}
  .games-grid{grid-template-columns:repeat(2,1fr)}
  .bank-grid{grid-template-columns:repeat(3,1fr)}
  .slider-track img{height:190px}
  .seo-content h1{font-size:22px}
}
/* ===== SAFE FIX (TIDAK MERUSAK LAYOUT) ===== */

/* TOP BUTTON */
.top-actions{
background:#2a0505;
}

.mini-btn{
border:1px solid #444;
transition:0.2s;
}

.mini-btn:hover{
border-color:#ffbf17;
}

/* LOGO FIX */
.brand img{
height:42px;
width:auto;
}

/* NAV FIX (JANGAN UBAH STRUKTUR) */
.main-nav a{
transition:0.2s;
}

.main-nav a:hover{
transform:translateY(-2px);
}