:root{
      --bg0:#070914;
      --bg1:#0b0f22;
      --panel: rgba(12,14,35,.72);
      --line: rgba(75,31,255,.55);
      --neon:#00f5ff;
      --neon2:#ff2bd6;
      --gold:#ffd34d;
      --text:#d8e7ff;
      --muted: rgba(216,231,255,.75);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: Raleway, sans-serif;
      color: var(--text);
      font-weight: 600;
      font-size: 15px;
      line-height: 1.618;
      background:
        radial-gradient(1000px 700px at 20% 15%, rgba(255,43,214,.18), transparent 60%),
        radial-gradient(900px 600px at 85% 25%, rgba(0,245,255,.14), transparent 55%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
      overflow-x:hidden;
    }

    a{ color:#fff; text-decoration:none; }
    img{ max-width:100%; height:auto; display:block; }

    .container{ max-width: 1000px; margin:0 auto; padding: 0 14px; }
    article{ max-width: 1000px; margin: auto; padding: 20px; }

    .central{ position:absolute; visibility:hidden; overflow:hidden; }

    /* Desktop */
    .desktop-view{
      background-image: url('/assets/bg.png');
      background-position: top center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-color: black;
    }

    /* Topbar */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      background: linear-gradient(180deg, rgba(10,12,30,.92), rgba(10,12,30,.62));
      border-bottom: 1px solid rgba(75,31,255,.55);
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
    }
    .panel{ display:flex; align-items:center; padding: 8px 0; }
    .logo{ flex:0 0 auto; }
    .panel-right{ margin-left:auto; text-align:right; width:100%; }

    .btn, .svgWhite{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 6px 12px;
      border-radius: 25px;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .5px;
      text-transform: uppercase;
      border: 1px solid rgba(75,31,255,.45);
      background: rgba(0,0,0,.18);
      margin-left: 10px;
      transition: .18s ease;
      white-space: nowrap;
    }
    .btn:hover, .svgWhite:hover{
      border-color: rgba(0,245,255,.65);
      box-shadow: 0 0 22px rgba(0,245,255,.12);
      transform: translateY(-1px);
    }
    .regbtn{
      border-color: rgba(255,43,214,.65);
      background: linear-gradient(90deg, rgba(255,43,214,.25), rgba(255,43,214,.10));
      color:#ffd6f7;
    }
    .mbtn{
      border-color: rgba(255,211,77,.55);
      background: linear-gradient(90deg, rgba(255,211,77,.20), rgba(255,211,77,.06));
      color: var(--gold);
    }
    .svgWhite img{ width:25px; height:25px; }

    /* Navbar */
    .navbar{
      display:flex;
      background: rgba(12,14,35,.55);
      border-top: 1px solid rgba(75,31,255,.30);
      border-bottom: 1px solid rgba(75,31,255,.35);
      backdrop-filter: blur(10px);
    }
    .navbar ul{
      list-style:none;
      padding: 10px 0;
      margin:0;
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      justify-content:center;
      width:100%;
    }
    .navbar li{ margin:0; border-radius: 14px; overflow:hidden; }
    .navbar a{
      display:block;
      font-size: 13px;
      padding: 8px 16px;
      font-weight: 800;
      letter-spacing: .6px;
      color: rgba(216,231,255,.92);
    }
    .navbar li:hover{
      background: rgba(0,245,255,.08);
      box-shadow: 0 0 18px rgba(0,245,255,.10);
    }
    .navbar li.active{
      background: rgba(255,43,214,.14);
      box-shadow: 0 0 18px rgba(255,43,214,.18), inset 0 0 0 1px rgba(255,43,214,.35);
    }
    .navbar li.active a{ color:#fff; }
/* container desktop */
.slider .container{
  max-width: 1000px;
  margin: 0 auto;
}

/* GRID UTAMA: 664 + 328 */
.slider-grid{
  display: grid;
  grid-template-columns: 664px 328px;
  grid-auto-rows: auto;
  gap: 8px;
  padding: 8px 0;
}

/* kiri */
.box-left{
  width: 664px;
  height: 374px;
}

/* kanan */
.box-right{
  width: 328px;
  display: grid;
  grid-template-rows: 183px 183px;
  gap: 8px;
}

/* bawah 3 */
.misbox{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 328px);
  gap: 8px;
}

/* card neon */
.neon-card{
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 20px 5px rgba(193,0,255,.49);
  background: rgba(0,0,0,.2);
}

/* IMG FIX: biar gak ngaco */
.neon-card img,
.carousel img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* carousel engine (tumpuk slide, cuma 1 aktif) */
.carousel{
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel .slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
}
.carousel .slide.active{
  opacity: 1;
}

/* responsive fallback */
@media (max-width: 1023px){
  .desktop-view{ display:none; }
}

    /* Slider layout desktop */
    .slider{ padding: 8px 0; }
    .box-left{
      float:left;
      width: 664px;
      height: 374px;
      border-radius: 15px;
      box-shadow: 0 0 20px 5px #c100ff7d;
      overflow:hidden;
    }
    .box-right{ float:left; width: 328px; margin-left:8px; }
    .misbox{ clear:both; height:auto; margin-top: 8px; display:flex; gap:8px; }
    .misbox img{
      width: 328px;
      border-radius: 15px;
      box-shadow: 0 0 20px 5px #c100ff7d;
    }

    /* Simple carousel */
    .carousel{
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
      border-radius: 15px;
    }
    .carousel .slide{
      position:absolute;
      inset:0;
      opacity:0;
      transition: opacity .35s ease;
    }
    .carousel .slide.active{ opacity:1; }
    .carousel img{ width:100%; height:100%; object-fit:cover; }

    /* Mobile top bar */
    .nav{
      position: fixed;
      top: 0;
      width: 100%;
      background: linear-gradient(180deg, rgba(10,12,30,.92), rgba(10,12,30,.62));
      border-bottom: 1px solid rgba(75,31,255,.55);
      padding: 10px 0;
      z-index: 60;
      backdrop-filter: blur(12px);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 0 14px;
    }
    .nav-logo img{ max-height: 42px; object-fit:contain; }
    .nav-menu, .nav-download{
      width: 44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(75,31,255,.45);
      background: rgba(0,0,0,.18);
      display:grid; place-items:center;
      cursor:pointer;
    }
    .nav-menu img, .nav-download img{ width: 28px; height: 28px; }

    /* Drawers */
    .drawer-overlay{
      position: fixed; inset:0;
      background: rgba(0,0,0,.65);
      z-index: 9998;
      display:none;
    }
    .drawer{
      position: fixed;
      top:0; bottom:0;
      width: 280px;
      background: rgba(7,9,20,.96);
      border-right: 1px solid rgba(75,31,255,.45);
      box-shadow: 0 0 26px rgba(0,0,0,.60);
      z-index: 9999;
      transform: translateX(-110%);
      transition: transform .2s ease;
      padding: 12px;
      overflow:auto;
    }
    .drawer.right{
      right:0;
      left:auto;
      border-right:0;
      border-left: 1px solid rgba(75,31,255,.45);
      transform: translateX(110%);
    }
    .drawer.open{ transform: translateX(0); }

    .drawer ul{ list-style:none; padding:0; margin:0; }
    .drawer li{ border-bottom: 1px solid rgba(75,31,255,.25); }
    .drawer a{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 12px;
      color:#fff;
      font-weight:800;
    }
    .drawer a:hover{ background: rgba(0,245,255,.08); }

    /* Content wrapper */
    .wrapper{ background: rgba(0,0,0,.10); }
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:5px;
      margin: 18px 0;
    }
    .grid-view{
      color: #fefff2;
      text-align:center;
      padding: 2em 0 1em;
      border-radius: 10px;
      border: 1px solid rgba(255,43,214,.55);
      background: rgba(0,0,0,.18);
      box-shadow: 0 0 18px rgba(0,245,255,.06);
      transition:.18s ease;
    }
    .grid-view:hover{
      transform: translateY(-2px);
      border-color: rgba(0,245,255,.55);
      box-shadow: 0 0 26px rgba(0,245,255,.12);
    }
    .grid-view img{ max-width:200px; margin:0 auto; }
    .grid-view span{ display:block; margin-top:1em; font-weight:900; letter-spacing:.6px; }

    /* Footer */
    .site-footer a{ color: var(--gold); }
    .footer-top{ background: rgba(12,14,35,.65); padding: 18px 0; }
    .footer-mid{ background: rgba(0,0,0,.55); padding: 18px 0; border-top: 1px solid rgba(75,31,255,.25); }
    .footer-bottom{ background: rgba(0,0,0,.55); font-size: 12px; padding: 14px 0; border-top: 1px solid rgba(75,31,255,.25); text-align:center; color: rgba(216,231,255,.70); }

    .row{ display:flex; gap:14px; flex-wrap:wrap; }
    .column{ flex:1; min-width: 240px; }
    .items{ padding: 0 1em; }
    .support{ list-style:none; padding:0; margin:0; }
    .support p{ margin:0 0 10px; font-weight:900; color: rgba(216,231,255,.85); }
    .support li{ margin:0 0 10px; }
    .support a{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(75,31,255,.35);
      background: rgba(255,255,255,.03);
      color:#fff;
      font-weight:900;
    }
    .support a:hover{
      border-color: rgba(0,245,255,.55);
      box-shadow: 0 0 18px rgba(0,245,255,.10);
    }
    .support img{ width:24px; height:24px; }

    /* Floating widgets */
    .float-widget{
      position: fixed;
      left: 5px;
      z-index: 999;
      opacity: .98;
    }
    .float-widget img{ width:75px; height:75px; }
    .float-wa{ bottom: 10px; }
    .float-tg{ bottom: 85px; }
    .float-indo{ bottom: 165px; }
    .float-indo img{ width:90px; height:90px; }

    /* Popup overlay fix */
    .overlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.80);
      display:none;
      align-items:center;
      justify-content:center;
      z-index: 9998;
      padding: 14px;
    }
    .popup{
      position: relative;
      max-width: 520px;
      width: 100%;
      border-radius: 15px;
      box-shadow: 0 0 20px #AA0000;
      transform: scale(.8);
      opacity: 0;
      animation: fadeInPop .6s ease-out forwards;
    }
    .popup img.main{ width:100%; border-radius: 10px; }
    @keyframes fadeInPop{ to{ transform: scale(1); opacity: 1; } }

    .pulse-red{ animation: redPulse 1.5s infinite alternate; }
    @keyframes redPulse{
      0%{ filter: drop-shadow(0 0 0px #673ab7); }
      100%{ filter: drop-shadow(0 0 10px #673ab7); }
    }
    .img-top-center{ position:absolute; top:-45px; left:50%; transform:translateX(-50%); width:170px; }
    .img-middle-right{ position:absolute; top:50%; right:-55px; transform:translateY(-50%); width:75px; }
    .img-bottom-left{ position:absolute; bottom:-15px; left:-70px; width:78px; }

    .fade-out{ animation: fadeOutOverlay .4s ease forwards; }
    .fade-out .popup{ animation: fadeOutPop .4s ease forwards; }
    @keyframes fadeOutOverlay{ to{ opacity:0; } }
    @keyframes fadeOutPop{ to{ transform: scale(.8); opacity:0; } }

    @media (max-width:1023px){
      .desktop-view{ display:none; }
      .wrapper{ padding-top: 60px; }
      .grid{ grid-template-columns: 1fr 1fr; }
      .misbox{ display:none; }
      .box-left, .box-right{ float:none; width:100%; height:auto; margin:0; }
      .box-right{ margin-top:8px; }
      .box-left{ height: 240px; }
      .box-right .mini{ height: 170px; margin-bottom:8px; border-radius:15px; overflow:hidden; box-shadow:0 0 20px 5px #c100ff7d; }
    }
    @media (min-width:1024px){
      .mobile-view{ display:none; }
    }
  
  /* ===== FUTURISTIC ANIMATIONS ===== */

/* neon card base (kalau belum ada) */
.neon-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transform: translateZ(0);
  animation: cardFloat 4.8s ease-in-out infinite;
}

/* scanline overlay */
.neon-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,245,255,.00) 0px,
      rgba(0,245,255,.05) 2px,
      rgba(0,245,255,.00) 6px
    );
  opacity:.55;
  transform: translateY(-20%);
  animation: scanMove 2.6s linear infinite;
  pointer-events:none;
}

/* neon sweep highlight */
.neon-card::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(90deg,
    rgba(255,43,214,0) 0%,
    rgba(255,43,214,.14) 45%,
    rgba(0,245,255,.18) 55%,
    rgba(0,245,255,0) 100%
  );
  transform: translateX(-35%) rotate(12deg);
  animation: neonSweep 3.4s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* hover “futuristic tilt” (desktop only) */
@media (min-width:1024px){
  .neon-card{
    transition: transform .22s ease, filter .22s ease;
  }
  .neon-card:hover{
    transform: translateY(-2px) scale(1.01);
    filter: drop-shadow(0 0 10px rgba(0,245,255,.20)) drop-shadow(0 0 10px rgba(255,43,214,.14));
  }
}

/* image smoothing */
.neon-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  transform: translateZ(0);
}

/* ===== Carousel slide animation ===== */
/* tiap slide default hidden */
.carousel{
  position: relative;
}
.carousel .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: scale(1.03) translateY(6px);
  filter: saturate(1.05) contrast(1.05);
  transition:
    opacity .9s ease,
    transform 1.1s cubic-bezier(.2,.9,.2,1),
    filter 1.1s ease;
}
.carousel .slide.active{
  opacity:1;
  transform: scale(1) translateY(0);
}

/* glitch micro flicker on active (halus aja, jangan norak) */
.carousel .slide.active img{
  animation: microFlicker 5.2s ease-in-out infinite;
}

/* ===== keyframes ===== */
@keyframes scanMove{
  0%{ transform: translateY(-25%); }
  100%{ transform: translateY(25%); }
}
@keyframes neonSweep{
  0%{ transform: translateX(-55%) rotate(12deg); opacity:.0; }
  18%{ opacity:.9; }
  50%{ transform: translateX(10%) rotate(12deg); opacity:.45; }
  100%{ transform: translateX(55%) rotate(12deg); opacity:0; }
}
@keyframes cardFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
@keyframes microFlicker{
  0%,100%{ filter: brightness(1) contrast(1); }
  48%{ filter: brightness(1.02) contrast(1.03); }
  50%{ filter: brightness(.99) contrast(1.02); }
  52%{ filter: brightness(1.02) contrast(1.04); }
}