/* =====================================================================
   NENG4D PURPLE GOLD NEON THEME — START
   Dibuat agar warna UI menyatu dengan banner ungu, neon, dan gold.
   ===================================================================== */

:root{
  --n4-purple:#7c22ff;
  --n4-purple-2:#b249ff;
  --n4-violet:#4f0fbf;
  --n4-blue:#00d7ff;
  --n4-gold:#ffd34e;
  --n4-orange:#ff8a00;
  --n4-pink:#ff2bd6;
  --n4-dark:#09030f;
  --n4-panel:rgba(19,8,31,.88);
  --n4-line:rgba(185,103,255,.34);
}

html,body{
  background:
    radial-gradient(circle at 50% 0%,rgba(124,34,255,.20),transparent 42%),
    radial-gradient(circle at 8% 40%,rgba(255,43,214,.10),transparent 28%),
    radial-gradient(circle at 92% 48%,rgba(0,215,255,.10),transparent 30%),
    linear-gradient(180deg,#09030f 0%,#12051c 48%,#07020c 100%) !important;
  color:#fff;
}

body{
  position:relative;
  overflow-x:hidden;
}

/* Canvas animasi selalu di belakang isi. */
#neng4dNeonCanvas{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  display:block !important;
  pointer-events:none !important;
  z-index:0 !important;
  opacity:.92;
  mix-blend-mode:screen;
}

body > *:not(#neng4dNeonCanvas){
  position:relative;
  z-index:2;
}

/* Header / topbar */
.topbar-container,
.header-container,
.menu-container,
.main-menu-container,
.mainmenu-container{
  background:linear-gradient(180deg,rgba(17,7,28,.97),rgba(9,3,16,.96)) !important;
  border-color:rgba(187,98,255,.32) !important;
  box-shadow:0 12px 35px rgba(26,0,50,.45),inset 0 -1px 0 rgba(255,211,78,.12) !important;
}

.topbar-container:after,
.menu-container:after,
.main-menu-container:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--n4-purple),var(--n4-gold),var(--n4-pink),transparent);
  background-size:220% 100%;
  animation:n4-border-flow 5s linear infinite;
  pointer-events:none;
}

/* Tombol masuk dan daftar */
.login-btn,
.btn-login,
[data-section="login"] button,
.header-login-button{
  background:linear-gradient(180deg,#6f25ef,#40119b) !important;
  border:1px solid rgba(194,126,255,.75) !important;
  color:#fff !important;
  box-shadow:0 0 18px rgba(124,34,255,.28) !important;
}

.register-btn,
.btn-register,
[data-section="register"] button,
.header-register-button{
  background:linear-gradient(180deg,#ffd654,#f28b00) !important;
  border:1px solid rgba(255,225,126,.9) !important;
  color:#231000 !important;
  box-shadow:0 0 22px rgba(255,176,0,.34) !important;
}

/* Menu kategori */
.main-menu-container a,
.menu-container a,
.navbar a{
  transition:filter .2s ease,transform .2s ease,color .2s ease,text-shadow .2s ease;
}

.main-menu-container a:hover,
.menu-container a:hover,
.navbar a:hover,
.main-menu-container [data-active="true"] > a{
  color:var(--n4-gold) !important;
  text-shadow:0 0 12px rgba(255,211,78,.75),0 0 22px rgba(124,34,255,.45);
  transform:translateY(-2px);
}

.main-menu-container img,
.menu-container img{
  filter:drop-shadow(0 0 6px rgba(124,34,255,.36));
}

/* Banner utama */
.banner{
  isolation:isolate;
  overflow:hidden;
  background:#06000c !important;
  border-top:1px solid rgba(255,211,78,.45);
  border-bottom:1px solid rgba(175,79,255,.48);
  box-shadow:0 0 45px rgba(110,28,255,.22);
}

.banner:before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 34%,rgba(255,255,255,.06) 43%,rgba(255,211,78,.16) 48%,rgba(255,255,255,.04) 53%,transparent 62%),
    radial-gradient(circle at 25% 50%,rgba(255,43,214,.12),transparent 28%),
    radial-gradient(circle at 76% 44%,rgba(255,211,78,.12),transparent 24%);
  transform:translateX(-45%);
  animation:n4-banner-sweep 7s ease-in-out infinite;
  mix-blend-mode:screen;
}

.banner:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(9,0,18,.28),transparent 15%,transparent 85%,rgba(9,0,18,.28)),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 18%,transparent 78%,rgba(124,34,255,.10));
}

.banner-img{
  position:relative;
  z-index:1;
  filter:saturate(1.08) contrast(1.04) brightness(.98);
  animation:n4-banner-breathe 5.5s ease-in-out infinite;
}

/* Announcement */
.home-info-container{
  background:linear-gradient(180deg,rgba(12,4,22,.92),rgba(8,2,15,.94)) !important;
}

.announcement-container{
  overflow:hidden;
  border:1px solid rgba(193,100,255,.42) !important;
  background:linear-gradient(90deg,rgba(72,18,124,.96),rgba(31,9,55,.96),rgba(100,45,0,.94)) !important;
  box-shadow:0 8px 25px rgba(35,0,65,.38),inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.announcement-container [data-section="title"]{
  background:linear-gradient(180deg,#ffd954,#f28a00) !important;
  color:#2c1000 !important;
  font-weight:800;
}

.announcement-container [data-section="date"]{
  color:#ffe7a0 !important;
}

/* Panel umum dan kartu game */
.home-content-container,
.game-container,
.game-list-container,
.provider-container,
footer,
.footer-container{
  background-color:rgba(8,2,15,.76) !important;
}

.game-item,
.provider-item,
.game-list li > a,
.home-game-item{
  border-color:rgba(171,78,255,.24) !important;
  box-shadow:0 8px 24px rgba(17,0,30,.34) !important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.game-item:hover,
.provider-item:hover,
.game-list li > a:hover,
.home-game-item:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 12px 32px rgba(124,34,255,.28),0 0 18px rgba(255,211,78,.12) !important;
  filter:brightness(1.08) saturate(1.05);
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#08020d}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--n4-purple),var(--n4-gold));
  border-radius:999px;
  border:2px solid #08020d;
}

@keyframes n4-border-flow{
  to{background-position:220% 0}
}

@keyframes n4-banner-sweep{
  0%,15%{transform:translateX(-48%) rotate(.001deg);opacity:.35}
  50%{transform:translateX(35%) rotate(.001deg);opacity:.85}
  85%,100%{transform:translateX(58%) rotate(.001deg);opacity:.20}
}

@keyframes n4-banner-breathe{
  0%,100%{transform:scale(1);filter:saturate(1.08) contrast(1.04) brightness(.98)}
  50%{transform:scale(1.006);filter:saturate(1.16) contrast(1.06) brightness(1.04)}
}

@media(max-width:768px){
  #neng4dNeonCanvas{opacity:.72}
  .banner:before{animation-duration:9s}
  .announcement-container{border-radius:10px}
}

@media(prefers-reduced-motion:reduce){
  .banner-img,.banner:before,.topbar-container:after,.menu-container:after,.main-menu-container:after{
    animation:none !important;
  }
}

/* =====================================================================
   NENG4D PURPLE GOLD NEON THEME — END
   ===================================================================== */