/* =========================
   FULL GREEN DARK MODE
========================= */

:root{

  --bg:#020b05;
  --bg2:#07130c;
  --card:#0d1b12;

  --primary:#22c55e;
  --primary2:#4ade80;
  --primary3:#86efac;

  --text:#f0fdf4;
  --muted:#94a3b8;

  --line:rgba(34,197,94,.18);

}

/* Background */

body{

  background:
  linear-gradient(
    135deg,
    #020b05,
    #07130c,
    #0b1f13,
    #14532d
  );

  background-size:400% 400%;

  color:var(--text);

  animation:bgMove 12s ease infinite;

  overflow-x:hidden;
}

/* Glow background */

body::before{

  content:"";

  position:fixed;

  width:600px;
  height:600px;

  background:
  radial-gradient(
    circle,
    rgba(34,197,94,.25),
    transparent 70%
  );

  top:-250px;
  right:-200px;

  filter:blur(80px);

  z-index:-1;
}

body::after{

  content:"";

  position:fixed;

  width:500px;
  height:500px;

  background:
  radial-gradient(
    circle,
    rgba(74,222,128,.18),
    transparent 70%
  );

  bottom:-200px;
  left:-150px;

  filter:blur(80px);

  z-index:-1;
}

/* Animasi background */

@keyframes bgMove{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }
}

/* Card */

.card{

  background:
  rgba(13,27,18,.75);

  border:
  1px solid var(--line);

  backdrop-filter:blur(12px);

  border-radius:24px;

  transition:.4s;

  position:relative;

  overflow:hidden;
}

/* Neon border animation */

.card::before{

  content:"";

  position:absolute;

  width:200%;
  height:200%;

  background:
  linear-gradient(
    45deg,
    transparent,
    rgba(34,197,94,.12),
    transparent
  );

  top:-50%;
  left:-50%;

  transform:rotate(25deg);

  animation:shine 6s linear infinite;
}

@keyframes shine{

  0%{
    transform:
    translateX(-100%)
    rotate(25deg);
  }

  100%{
    transform:
    translateX(100%)
    rotate(25deg);
  }
}

/* Hover gaming */

.card:hover{

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

  border-color:
  rgba(34,197,94,.35);

  box-shadow:
  0 0 20px rgba(34,197,94,.25),
  0 0 50px rgba(34,197,94,.15);
}

/* Button */

button,
.btn{

  background:
  linear-gradient(
    135deg,
    #22c55e,
    #16a34a
  );

  color:#021b09;

  border:none;

  border-radius:14px;

  font-weight:700;

  transition:.3s;

  position:relative;

  overflow:hidden;

  box-shadow:
  0 0 20px rgba(34,197,94,.25);
}

/* Button shine */

button::before,
.btn::before{

  content:"";

  position:absolute;

  width:100%;
  height:100%;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );

  top:0;
  left:-120%;
}

button:hover::before,
.btn:hover::before{

  animation:btnShine .8s forwards;
}

@keyframes btnShine{

  100%{
    left:120%;
  }
}

/* Hover tombol */

button:hover,
.btn:hover{

  transform:
  translateY(-4px);

  box-shadow:
  0 0 25px rgba(34,197,94,.45),
  0 0 50px rgba(34,197,94,.2);
}

/* Text */

h1,
h2,
h3{

  color:var(--text);

  text-shadow:
  0 0 10px rgba(34,197,94,.18);
}

p{

  color:var(--muted);
}

/* Link */

a{

  color:var(--primary2);

  transition:.3s;
}

a:hover{

  color:var(--primary3);

  text-shadow:
  0 0 10px rgba(74,222,128,.5);
}

/* Navbar */

nav{

  background:
  rgba(2,11,5,.7);

  backdrop-filter:blur(12px);

  border-bottom:
  1px solid var(--line);
}

/* Footer */

footer{

  border-top:
  1px solid var(--line);

  color:var(--muted);
}

/* Floating animation */

.float{

  animation:float 3s ease-in-out infinite;
}

@keyframes float{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }

  100%{
    transform:translateY(0);
  }
}

/* Pulse glow */

.glow{

  animation:pulse 2s infinite;
}

@keyframes pulse{

  0%{
    box-shadow:
    0 0 0 rgba(34,197,94,.3);
  }

  50%{
    box-shadow:
    0 0 30px rgba(34,197,94,.4);
  }

  100%{
    box-shadow:
    0 0 0 rgba(34,197,94,.3);
  }
}

.icon img {
  width: 150px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 15px #00ff88;
  transition: transform 0.3s ease;
}

.icon img:hover {
  transform: scale(1.1);
}