:root{
  --bg:#000000;        /* hitam original */
  --fg:#f2f2f2;
  --muted:#b9b9b9;
  --card:#0f0f0f;      /* tetap gelap tapi beda layer */
  --accent:#ff3b3b;   /* aksen merah */
}


    *{box-sizing:border-box}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;line-height:1.6;background:var(--bg);color:var(--fg)}
    a{color:var(--accent);text-decoration:none}
    a:hover{text-decoration:underline}
    header,main,footer{max-width:1000px;margin:auto;padding:16px}
    header h1{font-size:clamp(1.25rem,2.5vw,1.75rem);margin:.25em 0}
    .card{
  background:#000000 !important;
  border-radius:1px;
  padding:16px;
  margin:16px 0;
}

    .muted{color:var(--muted)}
    .center{text-align:center}
    img{max-width:100%;height:auto;border-radius:1px;}
    table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
    th,td{border:1px solid #222;padding:8px;text-align:center}
    th{background:#161616}
    iframe{width:100%;border:0;border-radius:12px}
    ul{padding-left:18px}
    blockquote{border-left:4px solid var(--accent);padding-left:12px;margin:16px 0;color:var(--muted)}
    .badge{display:inline-block;background:#1b1b1b;border:1px solid #222;border-radius:999px;padding:4px 10px;margin-right:6px}

   
  nav.card{
  padding:0;
  background:linear-gradient(90deg, #8b0000, #ff0000, #8b0000);
  overflow:hidden;
}

nav.card a{
  display:block;
  width:100%;
  padding:14px 12px;
  margin:0;
  background:linear-gradient(90deg, #b30000, #ff1a1a, #b30000);
  color:#ffffff;
  font-weight:600;
  border-bottom:1px solid rgba(0,0,0,.35);
  border-radius:0;
  text-decoration:none;
}

    nav.card a:last-child{border-bottom:none}
  nav.card a:hover{
  background:rgba(0,0,0,0.25);
  color:#ffffff;
  text-decoration:none;
}


 
  
    table{background:#ffffff;color:#000000}
    table th{background:#ff8c00;color:#000000}
    table td{background:#ffffff;color:#000000}
    
  
.header-banner{
  display:flex;
  flex-direction:column;   
  align-items:center;      
  gap:1px;
  margin:16px 0;
}

.header-banner a{
  display:block;
  text-align:center;
}

.header-banner img{
  display:block;
  width:auto;
  max-width:100%;          
  height:auto;
  margin:0 auto;           
}
.floating-top,
.floating-bottom{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 728px;
  max-width: 100%;
  z-index: 9999;

  display: flex;
  flex-direction: column;   
  align-items: center;
  gap: 6px;                
  pointer-events: auto;
}

/* posisi */
.floating-top{
  top: 10px;
}

.floating-bottom{
  bottom: 10px;
}


.floating-top a,
.floating-bottom a{
  display: block;
  width: 728px;
  max-width: 100%;
  line-height: 0;
}


.floating-top img,
.floating-bottom img{
  display: block;
  width: 728px;
  height: 80px;
  max-width: 100%;
  object-fit: contain;
}

  
.last-update {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}
.icon-center{
  display:block;
  margin:10px auto;      /* center horizontal */
  width:150px;           /* lebar */
  height:150px;           /* tinggi */
  object-fit:contain;    /* biar tidak pecah */
}


    @media (max-width:1000px){
      table th, table td{padding:7px;font-size:14px}
      .floating-top,
  .floating-bottom{
    width: 728px;
  }
    }

    @media (max-width:768px){
      table th, table td{padding:6px;font-size:13.5px}
      .floating-top,
  .floating-bottom{
    width: 100%;
    padding: 0 6px;
  }

  .floating-top a,
  .floating-bottom a,
  .floating-top img,
  .floating-bottom img{
    width: 100%;
    height: auto;
  }
    }

    @media (max-width:600px){
      table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
      table th, table td{padding:6px;font-size:13px;white-space:nowrap}
      .floating-top img,
  .floating-bottom img{
    height: 80px; 
  }
    }

    @media (max-width:320px){
      table th, table td{padding:5px;font-size:12px}
        .floating-top,
  .floating-bottom{
    gap: 4px;
  }
    }
/* container */
.floating-top,
.floating-bottom{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:0px;
  pointer-events:auto;
}

/* posisi */
.floating-top{ top:0; }
.floating-bottom{ bottom:0; }

/* link & gambar */
.floating-top a,
.floating-bottom a{
  display:block;
}

.floating-top img,
.floating-bottom img{
  width:728px;
  height:80px;
  max-width:100%;
  object-fit:contain;
  display:block;
}


@media (max-width:1000px){
  .floating-top img,
  .floating-bottom img{
    width:100%;
    height:auto;
  }
   header,main,footer{
    max-width:100%;
    padding:5px;
  }

  .card{
    padding:5px;
  }
}

@media (min-width: 1001px){
  nav.card{
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    gap: 1px;
    padding: 8px 12px;
  }

  nav.card a{
    width: auto;               
    display: inline-block;
    padding: 8px 14px;
    border-bottom: none;       
    border-radius: 1px;
  }
}

@media (max-width:600px){
  #dtTable{
    display: table;         
    width: 100%;
    min-width: 100%;        
    margin: 0 auto;         
  }
}
#histats-wrap{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:20px auto !important;
  clear:both !important;
}

/* Tangkap elemen Histats hasil inject */
#histats-wrap iframe,
#histats-wrap img,
#histats-wrap a{
  display:block !important;
  margin:0 auto !important;
}
body,
header,
main,
footer{
  background:#000000 !important;
}
/* HEADER BANNER PC (desktop) */
@media (min-width: 1001px){
  .headerbanner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    margin:16px 0;
  }

  .headerbanner img{
    width: auto;
    height:auto;      /* tinggi otomatis */
    display:block;
    margin:0 auto;
    object-fit:contain;
  }
}
/* KECILKAN GAP HEADER BANNER KHUSUS MOBILE */
@media (max-width:1000px){
  .headerbanner{
    gap:1px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .headerbanner img{
    margin:0 !important;
    padding:0 !important;
    display:block;
  }
}