body{
  margin:0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(120deg, #061a10, #0b0b0b, #0f2a1a);
  background-size: 300% 300%;
  animation: gradientBG 10s ease infinite;
  color:white;
  min-height:100vh;
}

/* ANIMASI BACKGROUND BERGERAK */
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* EFEK GRID NEON HALUS */
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:
    linear-gradient(rgba(138,255,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,255,0,0.03) 1px, transparent 1px);
  background-size:40px 40px;
  animation: gridMove 8s linear infinite;
  pointer-events:none;
  z-index:-1;
}

@keyframes gridMove{
  from{background-position:0 0;}
  to{background-position:40px 40px;}
}

.container{
  max-width:420px;
  margin:40px auto;
  text-align:center;
  padding:20px;
  position:relative;
}

/* ANIMASI MASUK */
.fade-in{
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* AVATAR + PULSE */
.avatar{
  width:95px;
  height:95px;
  background:#111;
  border-radius:50%;
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #8aff00;
  overflow:hidden;
  box-shadow: 0 0 10px #8aff00;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pulse{
  animation: pulse 2s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 5px #8aff00;}
  50%{box-shadow:0 0 15px #8aff00;}
  100%{box-shadow:0 0 5px #8aff00;}
}

/* BADGES */
.badges{
  margin:10px 0 15px;
  display:flex;
  justify-content:center;
  gap:8px;
  animation: slideUp 1s ease-in-out;
}

.badges span{
  background:#1a1a1a;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  border:1px solid #333;
}

@keyframes slideUp{
  from{opacity:0; transform:translateY(15px);}
  to{opacity:1; transform:translateY(0);}
}

/* BUTTONS */
.btn{
  display:block;
  background:#1f1f1f;
  color:white;
  text-decoration:none;
  padding:14px;
  margin:10px 0;
  border-radius:14px;
  font-weight:bold;
  border:1px solid #333;
  transition:0.3s;
}

.btn:hover{
  transform:scale(1.03);
  background:#252525;
}

.highlight{
  background:#8aff00;
  color:black;
  border:none;
}

.highlight:hover{
  background:#7ae000;
}

/* GLOW BUTTON */
.glow{
  box-shadow:0 0 10px #8aff00;
}

.gallery-section{
  margin-top:40px;
  text-align:center;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:15px;
  margin-top:20px;
}

.gallery-card{
  background:#111;
  border-radius:12px;
  padding:10px;
  transition:0.3s;
}

.gallery-card img{
  width:100%;
  border-radius:10px;
}

.gallery-card:hover{
  transform:scale(1.05);
}

.gallery-card p{
  margin-top:8px;
  font-size:14px;
}

/* SEO TEXT */
.seo-text{
  margin-top:20px;
  font-size:12px;
  color:#bbb;
  line-height:1.5;
}

/* FOOTER */
.footer{
  margin-top:20px;
  font-size:12px;
  color:#777;
}