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: 40px;
}

.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;
}

/* ===== 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);}
}

.chat-menu a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  text-decoration:none;
  color:#fff;
  border-radius:8px;
  font-weight:500;
  background:rgba(255,255,255,0.05);
  transition:.25s;
}

.chat-menu a:hover {
  background:#ffb300;
  color:#000;
  transform:translateX(5px);
}

.chat-menu a span {
  font-size:18px;
}