/* ===================================
   MAIN.CSS - SLT GAMING
   =================================== */

/* 1) CSS VARIABLES */
:root{
  --primary-color:#0096FF;
  --secondary-color:#00CCFF;
  --accent-color:#00B8FF;
  --success-color:#4ECDC4;
  --warning-color:#F7B733;
  --danger-color:#FF4444;
  --info-color:#00D4FF;

  --gold:#FFD700; --gold-dark:#B8860B;
  --silver:#C0C0C0; --bronze:#CD7F32;

  --dark-bg:#0d1117;
  --dark-secondary:#161b22;
  --dark-tertiary:#21262d;
  --dark-card:#1c2128;
  --dark-border:#30363d;

  --text-primary:#fff;
  --text-secondary:#C9D1D9;
  --text-muted:#8B949E;

  --gradient-primary:linear-gradient(135deg,#0096FF 0%,#0044FF 100%);
  --gradient-secondary:linear-gradient(135deg,#00CCFF 0%,#0096FF 100%);
  --gradient-gold:linear-gradient(135deg,#FFD700 0%,#B8860B 100%);
  --gradient-dark:linear-gradient(135deg,#0d1117 0%,#161b22 100%);
  --gradient-success:linear-gradient(135deg,#4ECDC4 0%,#44A08D 100%);
  --gradient-danger:linear-gradient(135deg,#FF6B6B 0%,#FF4444 100%);

  --shadow-sm:0 2px 4px rgba(0,0,0,.3);
  --shadow-md:0 4px 15px rgba(0,0,0,.4);
  --shadow-lg:0 8px 25px rgba(0,0,0,.5);
  --shadow-xl:0 15px 35px rgba(0,0,0,.6);
  --shadow-glow:0 0 20px rgba(0,150,255,.5);

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:20px; --radius-2xl:24px; --radius-full:50%;

  --transition-fast:.2s ease; --transition-base:.3s ease; --transition-slow:.5s ease;
}

/* 2) RESET + GLOBAL */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--dark-bg); color:var(--text-primary); line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* 3) TYPOGRAPHY */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:1rem;color:var(--text-primary)}
h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}
p{margin-bottom:1rem;color:var(--text-secondary)}
a{color:var(--primary-color);text-decoration:none;transition:var(--transition-base)}
a:hover{color:var(--secondary-color)}

/* 4) CONTAINER */
.container{max-width:1400px;margin:0 auto;padding:0 20px}

/* 5) TOP NAV */
.top-nav{background:rgba(13,17,23,.95);backdrop-filter:blur(10px);padding:10px 0;font-size:.9rem;border-bottom:1px solid var(--dark-border)}
.top-nav .contact-info a{color:var(--text-secondary);margin-right:20px;display:inline-flex;align-items:center;gap:6px;transition:var(--transition-base)}
.top-nav .contact-info a:hover{color:var(--primary-color)}
.top-nav i{color:var(--primary-color)}
.time-display{color:var(--gold);font-weight:600}

/* 6) NAVBAR */
.navbar{
  background:var(--dark-secondary);backdrop-filter:blur(10px);box-shadow:var(--shadow-md);
  padding:15px 0;position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--dark-border)
}
.navbar-brand img{height:45px;transition:var(--transition-base)}
.navbar-brand:hover img{transform:scale(1.05)}
.navbar-nav{margin-left:auto}
.navbar-nav .nav-link{
  color:var(--text-primary);font-weight:500;padding:10px 18px;margin:0 5px;border-radius:var(--radius-md);
  display:flex;align-items:center;gap:8px;transition:var(--transition-base)
}
.navbar-nav .nav-link i{font-size:1.1rem}

/* Active + NEW badge */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"]{
  background:rgba(0,150,255,.12); color:var(--primary-color);
  border:1px solid rgba(0,150,255,.35); border-radius:var(--radius-md);
}
.navbar .nav-link .badge{
  position:relative; top:-1px; margin-right:.25rem; padding:.25rem .45rem; font-size:.65rem; line-height:1; border-radius:.35rem;
}
/* Dropdown */
.navbar .dropdown-menu{background:var(--dark-secondary);border:1px solid var(--dark-border);box-shadow:var(--shadow-md)}
.navbar .dropdown-item{color:var(--text-secondary)}
.navbar .dropdown-item:hover,.navbar .dropdown-item:focus{background:rgba(0,150,255,.10);color:var(--text-primary)}
/* Hover nav (satu-satunya) */
.navbar-nav .nav-link:hover{background:rgba(0,150,255,.10);color:var(--primary-color);transform:translateY(-1px)}
/* Mobile */
@media (max-width:992px){
  .navbar-nav .nav-link{padding:12px 14px;margin:4px 0}
  .navbar .dropdown-menu{position:static;float:none;margin-top:.25rem}
  .navbar .dropdown-item{padding:.6rem .8rem}
}

/* 7) HERO */
.hero-section{background:var(--dark-card);border-radius:var(--radius-2xl);padding:30px;margin:25px 0;border:1px solid var(--dark-border);box-shadow:var(--shadow-lg)}
.banner-container{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);background:#000}
.slide-content{position:relative;height:400px;overflow:hidden}
.slide-content img{width:100%;height:100%;object-fit:cover}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.8) 0%,transparent 70%);display:flex;align-items:center;padding:40px}
.slide-text h3{font-size:2.2rem;font-weight:800;margin-bottom:15px;text-shadow:2px 2px 4px rgba(0,0,0,.8)}
.action-buttons{margin-top:20px}
.action-buttons .btn{
  background:var(--primary-color);color:#fff;font-weight:700;padding:15px;border-radius:var(--radius-lg);
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:var(--transition-base);border:none;text-transform:uppercase;font-size:.85rem;cursor:pointer
}
.action-buttons .btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,150,255,.4)}
.action-buttons .btn i{font-size:1.5rem}

/* 8) SMALL WIDGETS */
.winner-section{background:var(--primary-color);border-radius:var(--radius-xl);padding:25px;color:#fff;box-shadow:var(--shadow-xl)}
.sidebar-title{font-size:1.2rem;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.winner-item{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.winner-amount{font-weight:700;color:var(--gold);font-size:1.1rem}
.quick-stats{display:flex;gap:15px;margin-top:20px}
.stat-item{background:var(--dark-secondary);border-radius:var(--radius-lg);padding:20px;flex:1;display:flex;align-items:center;gap:15px;border:1px solid var(--dark-border)}
.stat-icon{background:var(--primary-color);width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem}
.stat-number{font-size:1.5rem;font-weight:700;color:var(--gold)}
.promo-banner{background:var(--secondary-color);border-radius:var(--radius-xl);padding:25px;text-align:center;color:#fff;margin-top:20px}

/* 9) TAB NAVIGATION */
.tab-navigation-section{margin:25px 0}
.tab-buttons{background:var(--dark-card);border-radius:var(--radius-2xl);padding:25px;border:1px solid var(--dark-border)}
.tab-btn{
  background:var(--dark-secondary);border:2px solid transparent;color:var(--text-secondary);font-weight:600;border-radius:var(--radius-lg);
  padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:90px;cursor:pointer;transition:var(--transition-base)
}
.tab-btn:hover{background:rgba(0,150,255,.1);border-color:var(--primary-color);color:var(--primary-color)}
.tab-btn.active{background:var(--primary-color);color:#fff;box-shadow:0 10px 30px rgba(0,150,255,.4)}
.tab-btn i{font-size:1.5rem}
.tab-indicator{background:var(--dark-secondary);border-radius:var(--radius-lg);padding:18px 25px;margin-top:20px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--dark-border)}
.indicator-text{display:flex;align-items:center;gap:10px;color:var(--gold);font-weight:600}
/* Show/Hide tab content */
.tab-content-wrapper{display:none}.tab-content-wrapper.active{display:block!important}

/* 10) CONTENT CARDS */
.content-card{background:var(--dark-card);border-radius:var(--radius-2xl);padding:30px;margin:25px 0;border:1px solid var(--dark-border);min-height:500px;position:relative}
.result-header{background:var(--dark-secondary);border-radius:var(--radius-lg);padding:20px;margin-bottom:25px;display:flex;align-items:center;gap:15px}
.result-header h2{color:var(--primary-color);font-size:1.5rem;margin:0}

/* Generic Tables (fallback) */
.table{width:100%;background:var(--dark-secondary);border-radius:var(--radius-lg);overflow:hidden;margin-top:20px}
.table thead{background:var(--primary-color)}
.table thead th{color:#fff;font-weight:600;padding:18px;text-align:left;border:none}
.table tbody tr{border-bottom:1px solid var(--dark-border);transition:var(--transition-base)}
.table tbody tr:hover{background:rgba(0,150,255,.05)}
.table tbody td{padding:15px 18px;color:var(--text-secondary)}

/* 11) FOOTER */
.footer-section{background:var(--dark-secondary);color:var(--text-secondary);padding:60px 0 30px;margin-top:60px;border-top:1px solid var(--dark-border)}
.footer-logo{height:50px;margin-bottom:20px}
.footer-title{color:var(--primary-color);font-size:1.2rem;font-weight:600;margin-bottom:20px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:12px}
.footer-links a{color:var(--text-secondary);transition:var(--transition-base)}
.footer-links a:hover{color:var(--primary-color)}
.footer-social{display:flex;gap:15px;margin-top:20px}
.social-link{width:45px;height:45px;background:var(--dark-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:var(--transition-base)}
.social-link:hover{background:var(--primary-color);color:#fff;transform:translateY(-3px)}

/* 12) BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);text-decoration:none}
.btn-primary{background:linear-gradient(180deg,#11a1ff 0%,#0087e6 100%);color:#fff;border:1px solid rgba(0,0,0,.15)}
.btn-primary:hover{background:linear-gradient(180deg,#0fb2ff 0%,#0a8fe9 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-warning{background:var(--warning-color);color:#fff}
.btn-danger{background:var(--danger-color);color:#fff}
.btn-success{background:var(--success-color);color:#fff}

/* Focus states */
.btn-primary:focus,.btn-primary:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,150,255,.22)}
a:focus-visible,.navbar-nav .nav-link:focus-visible{outline:2px solid rgba(0,150,255,.55);outline-offset:2px;border-radius:8px}

/* 13) FORMS */
.form-control,.form-select{background:var(--dark-secondary);border:1px solid var(--dark-border);color:var(--text-primary);padding:12px 16px;border-radius:var(--radius-md);width:100%;transition:var(--transition-base)}
.form-control:focus,.form-select:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,150,255,.1);outline:none}
.form-control::placeholder,.form-select::placeholder,input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.9}
/* Autofill Chrome */
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--text-primary);
  -webkit-box-shadow:0 0 0px 1000px var(--dark-secondary) inset;
  transition:background-color 5000s ease-in-out 0s;caret-color:var(--text-primary)
}

/* 14) LOADING */
.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.spinner{width:50px;height:50px;border:3px solid var(--dark-border);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 15px}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* 15) RESPONSIVE */
@media (max-width:1200px){.container{max-width:100%;padding:0 15px}}
@media (max-width:992px){
  .slide-content{height:300px}
  .slide-text h3{font-size:1.8rem}
  .navbar-nav{background:var(--dark-secondary);padding:20px;margin-top:15px;border-radius:var(--radius-lg);border:1px solid var(--dark-border)}
}
@media (max-width:768px){
  .hero-section{padding:20px}
  .content-card{padding:20px}
  .tab-btn{padding:15px;min-height:75px}
  .tab-btn i{font-size:1.3rem}
  .number-ball{width:50px;height:50px;font-size:1.3rem}
  .quick-stats{flex-direction:column}
  .stat-item{padding:15px}
}
@media (max-width:576px){
  .container{padding:0 10px}
  .slide-content{height:200px}
  .slide-text h3{font-size:1.4rem}
  .action-buttons .btn{padding:12px 8px;font-size:.75rem}
  .tab-btn{padding:12px 8px;min-height:65px}
  .tab-btn span{font-size:.75rem}
  .number-ball{width:45px;height:45px;font-size:1.2rem}
}

/* 16) ANNOUNCEMENT */
.announcement-section{margin:20px 0}
.announcement-wrapper{
  background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);
  border-radius:var(--radius-lg);padding:15px 20px;display:flex;align-items:center;gap:15px;box-shadow:0 8px 25px rgba(0,150,255,.3);position:relative;overflow:hidden
}
.marquee{overflow:hidden;white-space:nowrap;flex:1}
.marquee-text{display:inline-block;animation:marqueeScroll 30s linear infinite;color:#fff;font-weight:600}
@keyframes marqueeScroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* 17) UTILITIES */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.text-primary{color:var(--primary-color)!important}
.text-secondary{color:var(--secondary-color)!important}
.text-success{color:var(--success-color)!important}
.text-danger{color:var(--danger-color)!important}
.text-warning{color:var(--warning-color)!important}
.text-gold{color:var(--gold)!important}
.text-muted{color:var(--text-muted)!important}
.bg-primary{background:var(--primary-color)!important}
.bg-secondary{background:var(--secondary-color)!important}
.bg-success{background:var(--success-color)!important}
.bg-danger{background:var(--danger-color)!important}
.bg-warning{background:var(--warning-color)!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:2rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:2rem!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:2rem!important}
.w-100{width:100%!important}.h-100{height:100%!important}
.d-none{display:none!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-grid{display:grid!important}
.position-relative{position:relative!important}.position-absolute{position:absolute!important}

/* Back to Top */
.back-to-top{
  position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:var(--primary-color);color:#fff;border:none;border-radius:50%;
  cursor:pointer;display:none;align-items:center;justify-content:center;font-size:1.2rem;transition:var(--transition-base);z-index:1000;box-shadow:var(--shadow-lg)
}
.back-to-top:hover{background:var(--secondary-color);transform:translateY(-5px)}
.back-to-top.show{display:flex}

/* Scrollbar */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--dark-secondary)}
::-webkit-scrollbar-thumb{background:var(--dark-border);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}

/* =======================
   DATA RESULT – THEME
   ======================= */
.data-result .card{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}
.data-result .card-header{
  background:var(--dark-secondary);border-bottom:1px solid var(--dark-border);padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)
}
.data-result .card-header strong{color:#cfe9ff;letter-spacing:.2px}
.data-result .card-header strong::before{content:"";display:inline-block;width:6px;height:18px;background:var(--gradient-primary);border-radius:3px;margin-right:10px;vertical-align:-2px}

.data-result .filter-bar .form-select,
.data-result .filter-bar .form-control{height:48px;background:var(--dark-tertiary);border-color:var(--dark-border);color:var(--text-primary)}
.data-result .filter-bar .form-select:focus,
.data-result .filter-bar .form-control:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,150,255,.12)}
.data-result .filter-bar .btn.btn-primary{height:48px;font-weight:700}

.data-result .table-responsive{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--dark-border)}

.data-result .table thead.table-warning{background:linear-gradient(90deg,#151b23 0%,#1b2330 100%)!important}
.data-result .table thead.table-warning th{
  color:#0180ff;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:14px 16px;border-bottom:1px solid var(--dark-border)
}

.data-result .table{background:var(--dark-secondary);margin:0}
.data-result .table tbody tr{border-bottom:1px solid var(--dark-border);transition:background .18s ease,transform .12s ease}
.data-result .table tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
.data-result .table tbody tr:hover{background:rgba(0,150,255,.08)}

.data-result .table td{padding:14px 16px;color:#d8e0ea;vertical-align:middle}

.data-result .table td:nth-child(3)>span{
  display:inline-block;padding:6px 12px;border-radius:999px;font-weight:800;letter-spacing:.06em;
  background:var(--gradient-secondary);color:#07121f;box-shadow:0 0 0 1px rgba(0,150,255,.25),0 8px 18px rgba(0,150,255,.20)
}
.data-result .table td:nth-child(4) .time-chip,
.data-result .table td:nth-child(4)>span{
  display:inline-block;padding:4px 10px;border-radius:10px;border:1px solid rgba(0,150,255,.25);background:rgba(0,150,255,.10)
}

/* Footer/Pagination */
.data-result .card-header .small,
.data-result .card-header .text-muted{color:#8ea3b7}
.data-result .table thead th:first-child{border-top-left-radius:12px}
.data-result .table thead th:last-child{border-top-right-radius:12px}
.data-result .card-footer{background:var(--dark-secondary);border-top:1px solid var(--dark-border)}
.data-result .pagination .page-link{background:var(--dark-tertiary);border-color:var(--dark-border);color:var(--text-secondary)}
.data-result .pagination .page-link:hover{background:rgba(0,150,255,.12);color:var(--text-primary)}
.data-result .pagination .page-item.active .page-link{background:var(--primary-color);border-color:var(--primary-color);color:#07121f;font-weight:800}

/* Mobile tweaks */
@media (max-width:768px){
  .data-result .card-header{padding:12px 14px}
  .data-result .filter-bar .col-md-4,
  .data-result .filter-bar .col-md-3,
  .data-result .filter-bar .col-md-2{margin-bottom:8px}
}

/* ===== NAVBAR – alignment ikon & badge ===== */
.navbar-nav .nav-link {
  padding: 10px 14px;        /* sedikit lebih rapat */
  gap: 8px;
}
/* lebar ikon seragam agar teks tidak “geser” */
.navbar-nav .nav-link .fa,
.navbar-nav .nav-link .fas,
.navbar-nav .nav-link .far,
.navbar-nav .nav-link .fal,
.navbar-nav .nav-link .fab {
  width: 18px;
  text-align: center;
  line-height: 1;
}
/* badge "NEW" stabil, tidak jatuh */
.navbar .nav-link .badge {
  top: -1px;
  margin-left: .25rem;
  margin-right: 0;
  padding: .25rem .45rem;
  font-size: .65rem;
  line-height: 1;
  border-radius: .4rem;
}

/* ===== DATA RESULT – kontras teks (hapus hitam) ===== */
/* header tabel: putih kebiruan agar kontras */
.data-result .table thead.table-warning th {
  color: #007fff !important;
}
/* kolom Hari & Tanggal: abu-abu terang (bukan hitam) */
.data-result .table td:nth-child(1),
.data-result .table td:nth-child(2) {
  color: #000000 !important;
}
/* kolom Jam Result: kebiruan terang (bukan hitam) */
.data-result .table td:nth-child(4) {
  color: #000000 !important;
}
.tab-indicator{display:none!important;}