:root{
  --bg: radial-gradient(circle at 5% 5%, #0f172a 0%, #020617 25%, #000 80%);
  --text:#eef4ff;
  --muted:#95a3c4;
  --accent:#8b5cf6;
  --accent2:#0ea5e9;
  --border:rgba(143, 168, 255, .25);
  --header-h:64px;
  --footer-h:56px;
  --radius:16px;
  --shadow-1:0 12px 30px rgba(0,0,0,.35);
}

/* ========== BASE ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
}


body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 10%, rgba(138, 92, 246, .10) 0%, rgba(1, 3, 10, 0) 45%),
    radial-gradient(circle at 80% 90%, rgba(14, 165, 233, .09) 0%, rgba(1, 3, 10, 0) 50%);
  mix-blend-mode:screen;
  z-index:-1;
}

/* ========== HEADER ========== */
header.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-h);
  z-index:1000;

  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 16px 10px 18px;

  background:linear-gradient(
    110deg,
    rgba(4,6,15,0.98) 0%,
    rgba(27,33,69,.45) 55%,
    rgba(139,92,246,.18) 100%
  );
  border-bottom:1px solid rgba(147,178,255,.35);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}


.brand{
  position:relative;
  font-weight:700;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:.5rem;
  z-index:2;
}
.brand::before{
  content:"";
  width:34px;
  height:34px;
  border-radius:50%;
  background:url("assets/mive.png") center/cover no-repeat;
  border:1px solid rgba(174,203,255,.5);
  box-shadow:
    0 0 10px rgba(139,92,246,.75),
    0 0 20px rgba(14,165,233,.4),
    inset 0 0 6px rgba(255,255,255,.08);
  flex-shrink:0;
}
.brand span{color:var(--accent)}

/* top nav (desktop) */
nav.site-nav{
  margin-left:auto;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  z-index:2;
}
nav.site-nav a{
  color:var(--text);
  text-decoration:none;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:.78rem;
  transition:all .14s ease-out;
  background:rgba(3,7,18,0);
}
nav.site-nav a:hover{
  background:radial-gradient(circle at 10% 20%, rgba(186,230,253,.24) 0%, rgba(21,32,63,0) 65%);
  border-color:rgba(143,177,255,.4);
  box-shadow:0 10px 18px rgba(45,125,255,.25);
}
nav.site-nav a.active{
  background:radial-gradient(circle at 10% 20%, rgba(130,96,250,.95) 0%, rgba(16,23,42,0) 65%);
  border-color:rgba(130,96,250,1);
  box-shadow:0 10px 24px rgba(130,96,250,.45);
}

/* ========== HAMBURGER (MOBILE) ========== */
.hamburger{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(145,163,240,.45);
  background:radial-gradient(circle, rgba(139,92,246,.38) 0%, rgba(9,12,24,0) 70%);
  place-items:center;
  cursor:pointer;
  box-shadow:0 18px 30px rgba(0,0,0,.2);
  z-index:2;
}
.hamburger .bars{
  position:relative;
  width:22px;
  height:2px;
  background:currentColor;
  color:var(--text);
  transition:.15s;
}
.hamburger .bars::before,
.hamburger .bars::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:currentColor;
  transition:.2s;
}
.hamburger .bars::before{top:-7px}
.hamburger .bars::after{top:7px}
.hamburger.active .bars{background:transparent}
.hamburger.active .bars::before{top:0; transform:rotate(45deg)}
.hamburger.active .bars::after{top:0; transform:rotate(-45deg)}

/* ========== MOBILE MENU PANEL ========== */
.menu-panel{
  position:fixed;
  top:var(--header-h);
  right:16px;
  width:240px;
  background:
    radial-gradient(circle at 20% 0%, rgba(122,162,255,.25) 0%, rgba(8,10,20,.95) 55%),
    linear-gradient(180deg, rgba(10,12,25,.9), rgba(4,6,18,.95));
  border:1px solid rgba(178,198,255,.35);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 44px rgba(0,0,0,.45), 0 0 20px rgba(139,92,246,.3);
  max-height:0;
  opacity:0;
  transform:translateY(-10px);
  transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
  z-index:1200;
}
.menu-panel.open{
  max-height:380px;
  opacity:1;
  transform:translateY(0);
}

.menu-panel::before{
  content:"Navigation";
  display:block;
  padding:10px 14px 6px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(230,240,255,.65);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.menu-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
}
.menu-list li{
  margin:0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.menu-list a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  text-decoration:none;
  color:#fff;
  font-size:.8rem;
  background:linear-gradient(
    90deg,
    rgba(139,92,246,.08),
    rgba(14,165,233,.05) 60%,
    transparent 100%
  );
  transition:all .15s ease;
  border-left:3px solid transparent;
}
.menu-list a::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle,#7aa2ff 0%, rgba(122,162,255,0) 80%);
  box-shadow:0 0 8px rgba(122,162,255,.7);
}
.menu-list a:hover{
  background:linear-gradient(
    90deg,
    rgba(139,92,246,.25),
    rgba(14,165,233,.15) 70%
  );
  border-left-color:#7aa2ff;
  box-shadow:inset 0 0 10px rgba(122,162,255,.2);
}
.menu-list a:active{
  transform:scale(.97);
}


@media (max-width:600px){
  .menu-panel{
    width:220px;
    right:10px;
  }
}

/* ========== FOOTER ========== */
.site-footer{
  width:100%;
  padding:20px 0;
  margin-top:40px;
  text-align:center;
  background:linear-gradient(90deg, #1a0035, #3b0d63, #260144);
  border-top:1px solid rgba(255,255,255,.2);
  color:#eaf2ff;
  font-size:.9rem;
}

/* ========== MAIN LAYOUT ========== */
main#app{
  min-height:100%;
  padding:calc(var(--header-h) + 20px) 18px calc(var(--footer-h) + 20px);
  max-width:1100px;
  margin:0 auto;
}

.wrap{
  position:relative;
  max-width:1100px;
  margin-inline:auto;
  padding:24px 18px 32px;

  background:
    radial-gradient(circle at 10% 0%, rgba(11,17,32,.35) 0%, rgba(11,17,32,0) 55%),
    rgba(5,8,16,.45);
  border:1px solid rgba(164,188,255,.12);
  border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.3);
}
.wrap::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:10px;
  background:linear-gradient(
    90deg,
    rgba(122,162,255,0) 0%,
    rgba(192,211,255,.7) 40%,
    rgba(122,162,255,0) 100%
  );
  opacity:.4;
  pointer-events:none;
  border-radius:20px 20px 0 0;
}


#content{
  display:grid;
  gap:16px;
}

/* ========== CARD ========== */
.card{
  position:relative;
  border-radius:16px;
  padding:16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(167,139,250,.22), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(34,211,238,.2), transparent 65%),
    linear-gradient(180deg, rgba(18,5,48,.98), rgba(18,5,48,.94));
  border:1px solid rgba(191, 219, 254, .9);
  box-shadow:
    0 14px 32px rgba(10,3,30,1),
    inset 0 1px 0 rgba(248,250,252,.1);
  backdrop-filter:blur(8px);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border .18s ease;
}
.card::after{
  content:"";
  position:absolute;
  top:-140%;
  left:-50%;
  width:200%;
  height:150%;
  background:linear-gradient(130deg,
    rgba(255,255,255,0) 0%,
    rgba(191,219,254,.35) 25%,
    rgba(255,255,255,0) 50%);
  transform:rotate(3deg);
  animation:cardScan 10s linear infinite;
  pointer-events:none;
  opacity:0;
}
@keyframes cardScan{
  0%{ transform:translateY(0) rotate(3deg); opacity:0;}
  15%{ opacity:.8; }
  40%{ transform:translateY(140%) rotate(3deg); opacity:0;}
  100%{ opacity:0; }
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(224,231,255,.98);
  box-shadow:0 22px 50px rgba(10,3,30,1);
}

/* ========== TOAST ========== */
.toast{
  position:fixed;
  right:20px;
  bottom:calc(var(--footer-h) + 18px);
  background:radial-gradient(circle at 10% 10%, rgba(14,165,233,.9) 0%, rgba(0,0,0,.4) 70%);
  border:1px solid rgba(172,210,255,.55);
  color:var(--text);
  padding:10px 12px 10px 40px;
  border-radius:14px;
  display:none;
  box-shadow:0 10px 32px rgba(0,0,0,.35);
  min-width:220px;
  font-size:.7rem;
}
.toast.show{display:block}

/* ========== RESPONSIVE ========== */
@media (max-width:768px){
  nav.site-nav{display:none;}
  .hamburger{display:grid; place-items:center;}
  main#app{
    padding:calc(var(--header-h) + 16px) 14px calc(var(--footer-h) + 16px);
  }
}

.field input,
.back-wrap {
  background: transparent !important;
  background-image: none !important;
}

.btn,
.btn.primary {
  background: transparent !important;
  background-image: none !important;
  color: var(--accent);
}
  /* HERO */
  .app-hero{
    display:flex; gap:26px; align-items:flex-start; margin-bottom:26px; flex-wrap:wrap;
  }
  .hero-text{ flex:1 1 380px; position:relative; }
  .hero-kicker{
    letter-spacing:.28em; text-transform:uppercase; font-size:.6rem;
    color:rgba(231,237,255,.6); margin-bottom:6px;
  }
  .app-hero h1{
    font-size:1.65rem; margin:0 0 8px;
    background:linear-gradient(130deg,#e5e7ff,#a5b4fc,#22d3ee);
    -webkit-background-clip:text;
    color:transparent;
  }
  .hero-sub{
    margin:0 0 14px; color:rgba(229,236,255,.7); max-width:540px; font-size:.86rem;
  }
  .hero-actions{
    display:flex; gap:9px; flex-wrap:wrap; margin-top:8px;
  }
  .btn-hero{
    border:none; border-radius:14px; padding:9px 16px;
    font-weight:600; font-size:.78rem; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
  }
  .btn-hero.primary{
    background:linear-gradient(120deg, #7aa2ff 0%, #8b5cf6 55%, #22d3ee 100%);
    color:#fff;
    box-shadow:0 12px 28px rgba(15,23,42,.9);
  }
  .btn-hero.ghost{
    background:rgba(15,23,42,.9);
    border:1px solid rgba(186,204,255,.4);
    color:#e7edff;
  }
  .btn-hero span.icon-dot{
    width:8px; height:8px; border-radius:999px;
    background:radial-gradient(circle,#22d3ee,#8b5cf6);
    box-shadow:0 0 10px rgba(34,211,238,.9);
  }
  .icon-x {
  width: 16px;
  height: 16px;
  fill: currentColor;
  vertical-align: -2px; /* paling pas untuk icon kecil */
  margin-right: 6px;
}

    .social-list{
      display:flex;
      flex-direction:column;
      gap:.4rem;
      margin:0;
      padding:0;
      list-style:none;
    }
    .social-item{
      display:flex;
      align-items:center;
      gap:.5rem;
      color:var(--accent);
      text-decoration:none;
      font-size:.95rem;
      transition:opacity .25s;
    }
    .social-item:hover{
      opacity:.8;
    }
    .social-item svg{
      width:20px;
      height:20px;
      fill:currentColor;
      flex-shrink:0;
    }
    .social-list a {
  text-decoration: underline;
}


.wallet-panel::before,
.wallet-panel::after{
  content: none !important;
}


.skeleton,
.skel-line,
.skel-box{
  background: transparent !important;
  background-image: none !important;
}


body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 10% 0%, #0b1120 0%, #020617 40%, #050014 100%);
}

#bgConstellation {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
} 

#bg-space{
  position:fixed;
  inset:0;
  z-index:-1;          
  pointer-events:none; 
  background:#020617;  
}