:root{
  --bg:#080a08;
  --surface:#101310;
  --surface-2:#161a16;
  --line:#272d27;
  --text:#f5f7f5;
  --muted:#9ea69e;
  --green:#75ff00;
  --green-2:#4ed800;
  --shadow:0 24px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(circle at 15% 0,rgba(117,255,0,.08),transparent 25%),
  linear-gradient(180deg,#070907,#0d100d 55%,#070807);
  color:var(--text);font-family:Arial,Helvetica,sans-serif}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.topbar{background:#030403;border-bottom:1px solid #181b18;color:#aab1aa;font-size:12px}
.topbar-inner{min-height:34px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.topbar strong{color:var(--green)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,10,8,.94);backdrop-filter:blur(14px);border-bottom:1px solid #202520}
.nav{min-height:72px;display:flex;align-items:center;gap:30px}
.logo{width:190px}
.desktop-nav{display:flex;align-items:center;gap:26px;margin-right:auto}
.desktop-nav a,.mobile-menu a{font-size:14px;color:#d7dcd7}
.desktop-nav a:hover,.mobile-menu a:hover{color:var(--green)}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;padding:11px 18px;border:1px solid #343a34;font-weight:800;font-size:13px;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:#151815}
.btn-green{background:var(--green);color:#050605;border-color:var(--green);box-shadow:0 0 26px rgba(117,255,0,.13)}
.btn-outline{background:transparent;border-color:#454c45}
.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-large{padding:14px 22px}
.menu-btn{display:none;width:42px;height:42px;background:#151815;color:white;border:1px solid #343a34;border-radius:5px;font-size:20px}
.mobile-menu{display:none;padding:6px 16px 18px;border-top:1px solid #202520}
.mobile-menu.open{display:grid}
.mobile-menu a{padding:12px 0;border-bottom:1px solid #1c211c}
.hero{padding:42px 0 20px}
.hero-card{min-height:410px;display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;border:1px solid #242a24;border-radius:8px;background:
  linear-gradient(100deg,rgba(6,8,6,.98),rgba(6,8,6,.78) 55%,rgba(6,8,6,.15)),
  radial-gradient(circle at 78% 30%,rgba(117,255,0,.25),transparent 24%),
  #101310;box-shadow:var(--shadow)}
.hero-copy{padding:58px;align-self:center;position:relative;z-index:2}
.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--green);font-size:12px;font-weight:900;letter-spacing:1.7px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.hero h1{font-size:clamp(42px,5vw,72px);line-height:.98;letter-spacing:-3px;margin:18px 0}
.hero h1 span{color:var(--green)}
.hero p{max-width:590px;color:#b9c0b9;font-size:17px;line-height:1.7;margin:0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-visual{display:grid;place-items:center;position:relative;padding:35px}
.hero-visual img{width:min(430px,95%);filter:drop-shadow(0 0 40px rgba(117,255,0,.2))}
.search-box{display:flex;align-items:center;gap:12px;background:#111411;border:1px solid #292f29;border-radius:8px;padding:18px;margin:26px 0 26px}
.search-icon{font-size:24px;color:var(--green)}
.search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:white;font-size:16px}
.section{padding:34px 0 52px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}
.section-kicker{display:block;color:var(--green);font-weight:900;letter-spacing:1.6px;font-size:11px;margin-bottom:8px}
.section-head h2{font-size:32px;margin:0 0 6px}
.section-head p{margin:0;color:var(--muted)}
.text-link{border:0;background:none;color:var(--green);font-size:13px;font-weight:900}
.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.game-card{background:#111411;border:1px solid #262c26;border-radius:8px;overflow:hidden;transition:.25s;cursor:pointer}
.game-card:hover{transform:translateY(-6px);border-color:rgba(117,255,0,.65);box-shadow:0 18px 46px rgba(0,0,0,.35)}
.game-card.hidden-search{display:none}
.game-image{aspect-ratio:1.5/1;overflow:hidden;background:#171b17}
.game-image img{width:100%;height:100%;object-fit:cover;transition:.35s}
.game-card:hover .game-image img{transform:scale(1.04)}
.game-info{padding:16px;position:relative}
.game-info h3{margin:0 0 7px;font-size:16px}
.game-info p{margin:0;color:#8e978e;font-size:13px}
.badge{position:absolute;right:12px;top:-18px;background:var(--green);color:#050605;font-size:10px;font-weight:900;padding:6px 8px;border-radius:4px}
.extra-game{display:none}
.game-grid.show-all .extra-game{display:block}
.search-empty{display:none;color:#a8b0a8;padding:18px 0}
.promo-section{background:linear-gradient(180deg,transparent,rgba(117,255,0,.025),transparent)}
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.promo-card{min-height:260px;border:1px solid #262c26;border-radius:8px;overflow:hidden;position:relative;background:#111411;display:flex;align-items:flex-end}
.promo-card-main{background:#101410}
.promo-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo-copy{position:relative;z-index:2;padding:30px;max-width:76%}
.promo-copy span{color:var(--green);font-size:11px;font-weight:900;letter-spacing:1.5px}
.promo-copy h3{font-size:28px;margin:8px 0}
.promo-copy p{color:#b2bab2;line-height:1.55;margin:0 0 20px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #262c26;border-radius:8px;overflow:hidden;background:#262c26;gap:1px}
.feature-card{background:#101310;padding:30px}
.feature-card span{font-size:27px;color:var(--green)}
.feature-card h3{margin:13px 0 8px}
.feature-card p{margin:0;color:#969f96;line-height:1.6;font-size:14px}
footer{border-top:1px solid #202520;padding:38px 0}
.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:30px;align-items:center}
.footer-logo{width:165px;margin-bottom:10px}
footer p{color:#8d958d;margin:0}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:#aab1aa}
.copyright{font-size:13px}
@media(max-width:900px){
  .desktop-nav{display:none}.menu-btn{display:inline-grid;place-items:center}
  .hero-card{grid-template-columns:1fr}.hero-copy{padding:42px 30px 8px}
  .hero-visual{min-height:250px}.hero-visual img{width:310px}
  .game-grid{grid-template-columns:repeat(2,1fr)}
  .promo-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}.footer-links{justify-content:flex-start}
}
@media(max-width:560px){
  .container{width:min(100% - 22px,1180px)}
  .topbar-note{display:none}.logo{width:145px}.nav{min-height:64px;gap:12px}
  .nav-actions .btn-dark{display:none}.nav-actions{margin-left:auto}
  .nav-actions .btn{padding:10px 13px}
  .hero{padding-top:18px}.hero-copy{padding:32px 22px 6px}
  .hero h1{font-size:40px;letter-spacing:-1.6px}.hero p{font-size:15px}
  .hero-visual{min-height:210px;padding:15px}.hero-visual img{width:230px}
  .search-box{padding:14px;margin:18px 0}.search-box .btn{padding:10px 13px}
  .section{padding:26px 0 42px}.section-head h2{font-size:26px}
  .section-head p{font-size:14px}.game-grid{gap:10px}
  .game-info{padding:13px}.promo-copy{max-width:88%;padding:24px}
  .promo-copy h3{font-size:24px}.feature-grid{grid-template-columns:1fr}
}
/* =========================================
   PROMO CARD ANIMATION KILAU4D
========================================= */

.promo-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* GAMBAR ZOOM PELAN */
.promo-card .promo-art{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: promoZoom 7s ease-in-out infinite alternate;
  transition: filter .35s ease;
}

@keyframes promoZoom{
  0%{
    transform: scale(1);
  }

  100%{
    transform: scale(1.07);
  }
}

/* CAHAYA HIJAU BERJALAN */
.promo-card::before{
  content: "";
  position: absolute;
  z-index: 1;

  top: -80%;
  left: -35%;

  width: 22%;
  height: 260%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(99, 255, 0, .06),
    rgba(99, 255, 0, .38),
    rgba(255, 255, 255, .28),
    rgba(99, 255, 0, .12),
    transparent
  );

  transform: rotate(22deg);
  filter: blur(4px);

  animation: promoLight 5s linear infinite;
  pointer-events: none;
}

@keyframes promoLight{
  0%{
    left: -45%;
  }

  55%,
  100%{
    left: 130%;
  }
}

/* OVERLAY AGAR TEKS TETAP JELAS */
.promo-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: linear-gradient(
    90deg,
    rgba(5, 8, 5, .96) 0%,
    rgba(5, 8, 5, .90) 35%,
    rgba(5, 8, 5, .52) 62%,
    rgba(5, 8, 5, .08) 100%
  );

  pointer-events: none;
}

/* TEKS DI ATAS GAMBAR */
.promo-copy{
  position: relative;
  z-index: 3;
}

/* HOVER CARD */
.promo-card:hover{
  transform: translateY(-6px);
  border-color: #63ff00;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, .55),
    0 0 22px rgba(99, 255, 0, .16);
}

/* GAMBAR LEBIH TERANG SAAT HOVER */
.promo-card:hover .promo-art{
  filter:
    brightness(1.08)
    contrast(1.04);
}

/* TOMBOL GLOW */
.promo-card .btn{
  position: relative;
  overflow: hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.promo-card .btn:hover{
  transform: translateY(-2px) scale(1.03);

  box-shadow:
    0 0 10px rgba(99, 255, 0, .45),
    0 0 25px rgba(99, 255, 0, .25);
}

/* MATIKAN ANIMASI UNTUK USER YANG PILIH REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .promo-card .promo-art,
  .promo-card::before{
    animation: none;
  }
}
/* =========================================
   GAME CARD ANIMATION KILAU4D
========================================= */

.game-card{
  position:relative;
  overflow:hidden;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* GAMBAR ZOOM PELAN */
.game-card .game-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;

  transition:
    transform .6s ease,
    filter .35s ease;
}

/* GARIS CAHAYA HIJAU BERJALAN */
.game-card::before{
  content:"";
  position:absolute;
  z-index:4;

  top:-70%;
  left:-45%;

  width:18%;
  height:240%;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(99,255,0,.08),
    rgba(99,255,0,.42),
    rgba(255,255,255,.25),
    rgba(99,255,0,.08),
    transparent
  );

  transform:rotate(20deg);
  filter:blur(3px);

  animation:gameCardLight 6s linear infinite;

  pointer-events:none;
}

@keyframes gameCardLight{
  0%{
    left:-50%;
  }

  45%,
  100%{
    left:140%;
  }
}

/* HOVER CARD */
.game-card:hover{
  transform:translateY(-7px);

  border-color:#63ff00;

  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    0 0 18px rgba(99,255,0,.18);
}

/* GAMBAR MEMBESAR SAAT HOVER */
.game-card:hover .game-image img{
  transform:scale(1.08);

  filter:
    brightness(1.08)
    contrast(1.05);
}

/* GARIS HIJAU BAWAH */
.game-card::after{
  content:"";
  position:absolute;

  left:0;
  bottom:0;

  width:0;
  height:3px;

  background:#63ff00;

  box-shadow:
    0 0 10px #63ff00,
    0 0 18px rgba(99,255,0,.55);

  transition:width .35s ease;
}

.game-card:hover::after{
  width:100%;
}

/* JUDUL GAME */
.game-info h3{
  transition:
    color .25s ease,
    transform .25s ease;
}

.game-card:hover .game-info h3{
  color:#63ff00;
  transform:translateX(3px);
}

/* BADGE POPULER / TRENDING */
.game-card .badge{
  animation:badgeGlow 1.8s ease-in-out infinite alternate;
}

@keyframes badgeGlow{
  from{
    box-shadow:
      0 0 4px rgba(99,255,0,.25);
  }

  to{
    box-shadow:
      0 0 14px rgba(99,255,0,.9);
  }
}

/* LIHAT SEMUA */
.text-link{
  transition:
    color .25s ease,
    transform .25s ease,
    text-shadow .25s ease;
}

.text-link:hover{
  color:#ffffff;

  transform:translateX(4px);

  text-shadow:
    0 0 8px #63ff00,
    0 0 18px rgba(99,255,0,.65);
}

/* MATIKAN ANIMASI JIKA REDUCED MOTION */
@media(prefers-reduced-motion:reduce){

  .game-card::before,
  .game-card .badge{
    animation:none;
  }

}
/* ===================================
   VIDEO PROMO KILAU4D
=================================== */

.promo-video-card{
  position:relative;
  overflow:hidden;

  min-height:205px;

  background:#080b08;
}


/* VIDEO */

.promo-video{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  z-index:0;

  transform:scale(1.02);

  animation:videoMove 8s ease-in-out infinite alternate;
}


@keyframes videoMove{

  0%{
    transform:scale(1.02);
  }

  100%{
    transform:scale(1.09);
  }

}


/* OVERLAY HITAM */

.promo-video-overlay{
  position:absolute;

  inset:0;

  z-index:1;

  background:

    linear-gradient(
      90deg,

      rgba(3,6,3,.96) 0%,

      rgba(3,6,3,.88) 35%,

      rgba(3,6,3,.50) 65%,

      rgba(3,6,3,.15) 100%
    );

}


/* EFEK HIJAU */

.promo-video-card::before{

  content:"";

  position:absolute;

  z-index:2;

  top:-70%;
  left:-40%;

  width:15%;
  height:250%;

  background:linear-gradient(

    90deg,

    transparent,

    rgba(99,255,0,.1),

    rgba(99,255,0,.55),

    rgba(255,255,255,.30),

    transparent

  );

  transform:rotate(20deg);

  filter:blur(5px);

  animation:videoLight 5s linear infinite;

  pointer-events:none;
}


@keyframes videoLight{

  0%{
    left:-40%;
  }

  55%,
  100%{
    left:135%;
  }

}


/* CONTENT */

.promo-video-card .promo-copy{

  position:relative;

  z-index:3;

}


/* HOVER */

.promo-video-card{

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}


.promo-video-card:hover{

  transform:translateY(-5px);

  border-color:#63ff00;

  box-shadow:

    0 20px 45px rgba(0,0,0,.55),

    0 0 24px rgba(99,255,0,.20);

}


.promo-video-card:hover .promo-video{

  filter:

    brightness(1.15)

    contrast(1.08)

    saturate(1.1);

}
/* =========================================
   HERO GLASS BOX KILAU4D
========================================= */

.hero-card{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(12,18,12,.72),
      rgba(5,8,5,.42)
    );

  border:1px solid rgba(120,255,0,.28);

  border-radius:14px;

  backdrop-filter:
    blur(16px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(140%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(99,255,0,.05),
    0 25px 60px rgba(0,0,0,.48),
    0 0 30px rgba(99,255,0,.08);

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}


/* EFEK CAHAYA DALAM KACA */

.hero-card::before{
  content:"";

  position:absolute;
  z-index:1;

  top:-80%;
  left:-35%;

  width:18%;
  height:270%;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(99,255,0,.05),
    rgba(99,255,0,.28),
    rgba(255,255,255,.22),
    rgba(99,255,0,.08),
    transparent
  );

  transform:rotate(24deg);

  filter:blur(5px);

  animation:heroGlassLight 6s linear infinite;

  pointer-events:none;
}


@keyframes heroGlassLight{

  0%{
    left:-40%;
  }

  55%,
  100%{
    left:130%;
  }

}


/* EFEK GLOW HIJAU DI SUDUT */

.hero-card::after{
  content:"";

  position:absolute;

  z-index:0;

  width:420px;
  height:420px;

  right:-150px;
  bottom:-220px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(99,255,0,.22),
      rgba(99,255,0,.08) 38%,
      transparent 70%
    );

  filter:blur(12px);

  animation:heroGlowPulse 4s ease-in-out infinite alternate;

  pointer-events:none;
}


@keyframes heroGlowPulse{

  from{
    transform:scale(.92);
    opacity:.55;
  }

  to{
    transform:scale(1.12);
    opacity:1;
  }

}


/* PASTIKAN ISI HERO DI ATAS EFEK */

.hero-copy,
.hero-visual{
  position:relative;
  z-index:3;
}


/* GAMBAR HERO EFEK MELAYANG */

.hero-visual img{
  animation:heroFloat 4.5s ease-in-out infinite;

  transition:
    transform .4s ease,
    filter .4s ease;

  filter:
    drop-shadow(0 15px 24px rgba(0,0,0,.50))
    drop-shadow(0 0 18px rgba(99,255,0,.14));
}


@keyframes heroFloat{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }

}


/* HOVER KOTAK KACA */

.hero-card:hover{
  transform:translateY(-5px);

  border-color:rgba(99,255,0,.75);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 30px 70px rgba(0,0,0,.55),
    0 0 18px rgba(99,255,0,.18),
    0 0 45px rgba(99,255,0,.10);
}


.hero-card:hover .hero-visual img{
  transform:scale(1.025);

  filter:
    brightness(1.08)
    drop-shadow(0 18px 28px rgba(0,0,0,.55))
    drop-shadow(0 0 25px rgba(99,255,0,.25));
}


/* GARIS KACA BAGIAN ATAS */

.hero-card .hero-copy::before{
  content:"";

  position:absolute;

  top:0;
  left:8%;

  width:45%;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    rgba(99,255,0,.7),
    transparent
  );

  box-shadow:
    0 0 10px rgba(99,255,0,.45);
}


/* MATIKAN ANIMASI JIKA REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

  .hero-card::before,
  .hero-card::after,
  .hero-visual img{
    animation:none;
  }

}