/* =========================
   RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{

  --bg:#07010f;

  --gold:#ffd700;
  --gold-soft:#ffbe3b;

  --pink:#ff2bd6;
  --purple:#8f3dff;

  --text:#ffffff;
  --muted:#d2c6e7;

  --border:rgba(255,255,255,.08);
}

/* =========================
   BODY
========================= */

body{
  font-family:'Poppins',sans-serif;

  background:
    radial-gradient(
      circle at top,
      #3a014f 0%,
      #14031f 35%,
      #07010f 100%
    );

  color:var(--text);

  min-height:100vh;

  line-height:1.7;
}

a{
  text-decoration:none;
  color:inherit;
}

/* =========================
   LAYOUT
========================= */

.wrapper{
  width:100%;
  padding:20px 14px;
}

.container{

  width:100%;
  max-width:600px;

  margin:auto;

  background:
    linear-gradient(
      180deg,
      rgba(30,10,45,.98) 0%,
      rgba(10,3,18,.98) 100%
    );

  border-radius:28px;

  overflow:hidden;

  border:1px solid rgba(255, 0, 200, .35);

  box-shadow:
    0 0 0 1px rgba(255, 0, 200, .12),
    0 0 18px rgba(255, 0, 200, .20),
    0 0 50px rgba(143, 61, 255, .18),
    0 0 100px rgba(255, 0, 200, .06);
}

/* =========================
   BANNER
========================= */

.banner{
  position:relative;
}

.banner img{
  width:100%;
  display:block;
  object-fit:cover;
}


/* =========================
   HEADER
========================= */

.header{
  text-align:center;
  padding:28px 22px 16px;
}

.logo{
  font-family:'Orbitron',sans-serif;

  font-size:36px;
  font-weight:800;

  letter-spacing:2px;

  color:var(--gold);

  text-shadow:
    0 0 12px rgba(255,215,0,.45),
    0 0 24px rgba(255,43,214,.18);
}

.tagline{
  margin-top:10px;

  color:var(--muted);

  font-size:14px;
  font-weight:500;
}

/* =========================
   SECTION
========================= */

.section{
  padding:0 20px 12px;
}

/* =========================
   BUTTONS
========================= */

.btn-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}

.small-grid{
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

/* =========================
   BUTTON BASE
========================= */

.btn{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height:56px;
  padding:14px 16px;

  border-radius:18px;

  font-size:14px;
  font-weight:700;

  color:#fff;

  background:
    linear-gradient(
      180deg,
      rgba(45,10,70,.98),
      rgba(15,5,30,.98)
    );

  /* 🔥 lebih terang & neon border */
  border:1px solid rgba(255, 0, 200, .45);

  /* 🔥 glow lebih hidup */
  box-shadow:
    0 0 0 1px rgba(255, 0, 200, .15),
    0 0 12px rgba(255, 0, 200, .25),
    0 0 25px rgba(143, 61, 255, .15),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition:.25s ease;

}

/* icon */
.btn i{
  font-size:16px;
  filter: drop-shadow(0 0 6px rgba(255,0,200,.35));
}

/* =========================
   HOVER (BIAR NYALA)
========================= */

.btn:hover{

  transform:translateY(-3px) scale(1.02);

  background:
    linear-gradient(
      180deg,
      rgba(255, 43, 214, .95),
      rgba(143, 61, 255, .95)
    );

  border:1px solid rgba(255, 255, 255, .25);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    0 0 18px rgba(255, 43, 214, .45),
    0 0 45px rgba(143, 61, 255, .35),
    0 0 80px rgba(255, 0, 200, .15);

}

/* =========================
   PRIMARY BUTTON
========================= */

.btn-primary{

  margin-top:18px;

  background:
    linear-gradient(
      90deg,
      #ffd700,
      #ffbe3b,
      #ff8a00
    );

  color:#181818;

  border:1px solid rgba(255,215,0,.6);

  font-size:15px;
  font-weight:800;

  box-shadow:
    0 0 0 1px rgba(255,215,0,.25),
    0 0 18px rgba(255,190,59,.35),
    0 0 45px rgba(255,140,0,.25);
}

.btn-primary:hover{
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
}

/* =========================
   CONTENT
========================= */

.content{
  padding:24px 20px 28px;
}

.card{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.015)
    );

  border:1px solid rgba(255, 0, 200, .5);

  border-radius:24px;

  padding:24px;

  box-shadow:
    0 0 0 1px rgba(255, 0, 200, .20),
    0 0 14px rgba(255, 0, 200, .30),
    0 0 40px rgba(143, 61, 255, .20),
    0 0 80px rgba(255, 0, 200, .08);
}

.card h2{

  text-align:center;

  font-size:24px;

  line-height:1.3;

  margin-bottom:18px;

  color:var(--gold);
}

.card p{

  color:var(--muted);

  font-size:14.5px;

  margin-bottom:14px;
}

.highlight{
  color:var(--gold);
  font-weight:700;
}

/* =========================
   FOOTER
========================= */

.footer{

  text-align:center;

  padding:20px 16px 24px;

  border-top:1px solid rgba(255,255,255,.05);

  font-size:11px;

  color:rgba(255,255,255,.55);
}

.footer span{
  color:#ff59dc;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 768px){

  .container{
    border-radius:24px;
  }

  .logo{
    font-size:30px;
  }

  .card h2{
    font-size:21px;
  }

}

/* =========================
   MOBILE
========================= */

@media (max-width: 560px){

  .wrapper{
    padding:12px;
  }

  .header{
    padding:24px 18px 12px;
  }

  .logo{
    font-size:26px;
  }

  .tagline{
    font-size:13px;
    line-height:1.5;
  }

  /* KEEP DESKTOP LAYOUT */
  .btn-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .small-grid{
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
  }

  .btn{
    min-height:48px;

    padding:10px 8px;

    font-size:11px;

    gap:6px;

    border-radius:14px;
  }

  .btn i{
    font-size:12px;
  }

  .btn-primary{
    font-size:12px;
  }

  .content{
    padding:22px 18px 24px;
  }

  .card{
    padding:20px;
    border-radius:20px;
  }

  .card h2{
    font-size:18px;
    margin-bottom:14px;
  }

  .card p{
    font-size:13px;
    line-height:1.7;
  }

  .footer{
    font-size:10px;
    padding:18px 14px 22px;
  }

}

/* =========================
   SMALL DEVICES
========================= */

@media (max-width: 380px){

  .logo{
    font-size:22px;
  }

  .tagline{
    font-size:12px;
  }

  .btn{
    min-height:46px;

    font-size:10px;

    padding:10px 6px;

    border-radius:12px;
  }

  .btn i{
    font-size:11px;
  }

  .btn-primary{
    font-size:11px;
  }

  .card{
    padding:18px;
  }

  .card h2{
    font-size:17px;
  }

  .card p{
    font-size:12.5px;
  }

}