html {
  background: #33469c url(https://res.cloudinary.com/dxlfrsagx/image/upload/v1741816648/zeustoto-bg_er0y15.png) center center no-repeat;
  background-attachment: fixed !important;
  background-size: cover !important;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #fff;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  color: white;
  padding: 12px 20px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 2000;
}

.menu-icon {
  position: absolute;
  left: 20px;
  top: 18px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  z-index: 3000;
}

.menu-icon div {
  width: 22px;
  height: 3px;
  background: white;
  margin: 3px 0;
  border-radius: 2px;
}

.header-mini__logo {
  text-align: center;
  transform: translateX(-75px);
}

.header-mini__logo img {
  height: 35px;
}

.header-buttons {
  position: absolute;
  right: 20px;
  top: 16px;
  display: flex;
  gap: 10px;
}

.login-btn,
.daftar-btn {
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  padding: 8px 14px;
}

.login-btn {
  background: #444;
  color: white;
}

.login-btn:hover {
  background: #666;
  transform: scale(1.05);
}

.daftar-btn {
  background: #ffb300;
  color: #222;
}

.daftar-btn:hover {
  background: #ffd54f;
  transform: scale(1.05);
}

.running-text {
  background: #222;
  color: #ffcc00;
  padding: 8px 0;
  font-size: 14px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
}

.running-text span {
  display: inline-block;
  padding-left: 100%;
  animation: run 15s linear infinite;
}

@keyframes run {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.footer {
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: #fff; /* 🤍 semua teks putih */
  font-size: 13px;
  padding: 15px 10px;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}
.footer strong {
  color: #fff; /* tetap putih juga */
}

/* Navigation Menu */
.nav-links {
  position: fixed;
  top: 0;
  left: -250px;
  width: 220px;
  height: 100%;
  background: rgba(51, 51, 51, 0.85);
  display: flex;
  flex-direction: column;
  padding-top: 60px;
  transition: left 0.3s ease;
  z-index: 1500;
  backdrop-filter: blur(8px); /* efek blur */
}
.nav-links.active {
  left: 0;
}
.nav-links a {
  color: white;
  text-decoration: none;
  padding: 15px 25px;
  font-size: 1em;
  transition: background 0.2s;
}
.nav-links a:hover {
  background: #444;
}

/* MENU SIDEBAR UPGRADE */

.nav-links {
  position: fixed;
  top: 0;
  left: -260px;
  width: 240px;
  height: 100%;
  background: rgba(10,10,10,0.9);
  backdrop-filter: blur(12px);
  padding-top: 70px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: 0.35s;
  box-shadow: 5px 0 20px rgba(0,0,0,0.5);
}

.nav-links.active {
  left: 0;
}

/* POPUP IKLAN */
.popup-iklan {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  display: none; /* default tidak tampil */
}

.popup-iklan-content {
  position: relative;
  background: #111;
  padding: 10px;
  border-radius: 12px;
  animation: fadeIn 0.4s ease;
}

.popup-iklan-content img {
  width: 320px;
  max-width: 90vw;
  border-radius: 10px;
}

.close-iklan {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  color: white;
  background: red;
  font-size: 26px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  line-height: 30px;
  font-weight: bold;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== CHAT PRO VERSION ===== */
.cekskor-bubble {
  position: fixed;
  bottom: 145px; /* posisi atas */
  right: 25px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(37,211,102,0.6);
  animation: pulse 2s infinite;
  z-index: 2000;
}

.cekskor-bubble img {
  width: 125px;
  height: 125px;
}

.chat-bubble {
  position:fixed;
  bottom:75px;
  right:25px;
  width:55px;
  height:55px;
  border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:#fff;
  cursor:pointer;
  box-shadow:0 0 20px rgba(37,211,102,0.6);
  animation:pulse 2s infinite;
  z-index:2000;
}

@keyframes pulse {
  0% {box-shadow:0 0 0 0 rgba(37,211,102,0.6);}
  70% {box-shadow:0 0 0 18px rgba(37,211,102,0);}
  100% {box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

.chat-menu {
  position:fixed;
  bottom:100px;
  right:25px;
  background:rgba(0,0,0,0.9);
  padding:14px;
  border-radius:14px;
  display:none;
  flex-direction:column;
  gap:12px;
  min-width:200px;
  animation:fadeUp .3s ease;
}

@keyframes fadeUp {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}

/*==============================*/
/* PREMIUM CHAT MENU */
/*==============================*/

.chat-menu{

position:fixed;

right:25px;

bottom:145px;

width:290px;

display:none;

flex-direction:column;

overflow:hidden;

border-radius:20px;

background:rgba(20,20,20,.92);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.08);

box-shadow:
0 25px 50px rgba(0,0,0,.55);

animation:chatOpen .35s ease;

z-index:9999;

}

@keyframes chatOpen{

from{

opacity:0;

transform:translateY(25px) scale(.95);

}

to{

opacity:1;

transform:none;

}

}

.chat-header{

display:flex;

align-items:center;

gap:14px;

padding:18px;

background:linear-gradient(135deg,#ffb300,#ff8600);

color:#111;

}

.chat-avatar{

width:48px;

height:48px;

border-radius:50%;

background:white;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

font-weight:bold;

}

.chat-title h3{

margin:0;

font-size:18px;

}

.chat-title p{

margin:2px 0 0;

font-size:12px;

opacity:.8;

}

.chat-menu a{

display:flex;

align-items:center;

padding:16px;

gap:15px;

text-decoration:none;

color:white;

transition:.25s;

border-top:1px solid rgba(255,255,255,.05);

}

.chat-menu a:hover{

background:rgba(255,179,0,.08);

padding-left:24px;

}

.icon{

width:46px;

height:46px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

flex-shrink:0;

}

.telegram{

background:#229ED9;

}

.instagram{

background:linear-gradient(135deg,#fd5949,#d6249f,#285AEB);

}

.facebook{

background:#1877F2;

}

.info{

flex:1;

}

.info strong{

display:block;

font-size:15px;

}

.info small{

color:#bbb;

font-size:12px;

}

.arrow{

font-size:26px;

opacity:.5;

transition:.25s;

}

.chat-menu a:hover .arrow{

opacity:1;

transform:translateX(5px);

}

/* Notif Menang */
.win-notif {
  position: fixed;
  bottom: 25px;
  left: 25px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateX(-30px);
  transition: 0.5s;
  z-index: 999998;
}
.win-notif.show {
  opacity: 1;
  transform: translateX(0);
}

.menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  text-decoration:none;
  color:white;
  font-size:15px;
  border-left:3px solid transparent;
  transition:all 0.25s ease;
}

/* ICON */

.menu-icon2{
  font-size:18px;
}

/* HOVER EFFECT */

.menu-item:hover{
  background:rgba(255,179,0,0.15);
  border-left:3px solid #ffb300;
  transform:translateX(6px);
}

/* GLOW EFFECT */

.menu-item:hover span{
  color:#ffb300;
  text-shadow:0 0 6px rgba(255,179,0,0.8);
}