:root{
  --bg:#ffffff;
  --text:#000000;
  --muted:#555555;
  --accent:#000000;
  --accent2:#000000;
  --border:rgba(0,0,0,.18);
  --header-h:64px;
  --footer-h:56px;
  --radius:16px;
  --shadow-1:none;
}

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

/* ========== 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:#ffffff;
  border-bottom:1px solid var(--border);
  box-shadow:none;
}

.brand{
  position:relative;
  font-weight:700;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:.5rem;
  z-index:2;
  color:#000;
}
.brand::before{
  content:"";
  width:34px;
  height:34px;
  border-radius:50%;
  background:url("../assets/mive.png") center/cover no-repeat;
  border:1px solid #000;
  box-shadow:none;
  flex-shrink:0;
}
.brand span{color:#000}

/* top nav (desktop) */
nav.site-nav{
  margin-left:auto;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  z-index:2;
}
nav.site-nav a{
  color:#000;
  text-decoration:none;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:.78rem;
  background:transparent;
  transition:background .12s ease, border-color .12s ease;
}
nav.site-nav a:hover{
  background:rgba(0,0,0,.05);
  border-color:rgba(0,0,0,.25);
  box-shadow:none;
}
nav.site-nav a.active{
  background:#000;
  color:#fff;
  border-color:#000;
  box-shadow:none;
}

/* ========== HAMBURGER (MOBILE) ========== */
.hamburger{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.6);
  background:#fff;
  place-items:center;
  cursor:pointer;
  box-shadow:none;
  z-index:2;
}
.hamburger .bars{
  position:relative;
  width:22px;
  height:2px;
  background:#000;
  color:#000;
  transition:.15s;
}
.hamburger .bars::before,
.hamburger .bars::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:#000;
  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:#fff;
  border:1px solid rgba(0,0,0,.4);
  border-radius:14px;
  overflow:hidden;
  box-shadow:none;
  max-height:0;
  opacity:0;
  transition:max-height .2s ease, opacity .2s ease;
  z-index:1200;
}
.menu-panel.open{
  max-height:380px;
  opacity:1;
}

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

.menu-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
}
.menu-list li{
  margin:0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.menu-list a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  text-decoration:none;
  color:#000;
  font-size:.8rem;
  background:transparent;
  transition:background .12s ease;
  border-left:3px solid transparent;
}
.menu-list a::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#000;
  box-shadow:none;
}
.menu-list a:hover{
  background:rgba(0,0,0,.05);
  border-left-color:#000;
}
.menu-list a:active{
  transform:none;
}

/* menu panel */
@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:#ffffff;           
  border-top:1px solid #000000; 
  color:#000000;                
  font-size:.9rem;

  box-shadow:none;
  backdrop-filter:none;
  background-image:none;
}

/* ========== 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:#ffffff;
  border:1px solid rgba(0,0,0,.18);
  border-radius:20px;
  box-shadow:none;
}
.wrap::before{
  content:none;
}

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

/* ========== CARD ========== */
.card{
  position:relative;
  border-radius:16px;
  padding:16px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.25);
  box-shadow:none;
  backdrop-filter:none;
  overflow:hidden;
  transition:none;
}
.card::after{
  content:none;
}
.card:hover{
  transform:none;
  border-color:rgba(0,0,0,.35);
  box-shadow:none;
}
    .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;
}

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

/* ====== INPUT FIELD & BACK WRAP BERSIH ====== */
.field input,
.back-wrap {
  background: transparent !important;
  background-image: none !important;
}

/* ====== BUTTON GENERIC ====== */
.btn,
.btn.primary {
  background: transparent !important;
  background-image: none !important;
  color: var(--accent);
  border:1px solid #000;
}

/* ========== 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:var(--muted);
  margin-bottom:6px;
}
.app-hero h1{
  font-size:1.65rem;
  margin:0 0 8px;
  color:#000;
  background:none;
  -webkit-background-clip:border-box;
}
.hero-sub{
  margin:0 0 14px;
  color:var(--muted);
  max-width:540px;
  font-size:.86rem;
}
.hero-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:8px;
}
.btn-hero{
  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:#000;
  color:#fff;
  border:1px solid #000;
  box-shadow:none;
}
.btn-hero.ghost{
  background:transparent;
  border:1px solid #000;
  color:#000;
}
.btn-hero span.icon-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#fff;
  border:1px solid #000;
  box-shadow:none;
}

/* ====== WALLET PANEL DECOR OFF ====== */
.wallet-panel::before,
.wallet-panel::after{
  content: none !important;
}

/* ====== SKELETON TANPA EFFECT ====== */
.skeleton,
.skel-line,
.skel-box{
  background: transparent !important;
  background-image: none !important;
}

#bgConstellation,
#bg-space{
  display:none !important;
}