/* Navbar */
.navbar {
  background: linear-gradient(90deg, #2e0039, #3b0022);
}

.navbar a {
  color: #fff !important;
}

.btn-masuk,
.btn-daftar {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: transparent;
  color: #fff;
  border: 2px solid #d916c8; /* garis tepi normal pink fuchsia */
  border-radius: 30px;
  padding: 8px 35px;
}

.btn-masuk::before,
.btn-daftar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(270deg, #d916c8, #5a009d, #d916c8);
  background-size: 600% 600%;
  animation: borderAnimation 5s ease infinite;
  border-radius: 30px;
}

@keyframes borderAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Optional hover effect */
.btn-masuk:hover,
.btn-daftar:hover {
  background-color: rgba(217, 22, 200, 0.2);
  color: #fff;
}


/* Hero Section */
.hero,
.hero h1,
.hero p {
  color: #fff;
}

.hero {
  background: linear-gradient(90deg, #41064d, #4f0329);
}

.hero .btn-warning,
.hero .btn-livechat,
.hero .btn-whatsapp,
.hero .btn-telegram {
  background-color: #5a009d;
  color: #fff;
  border: 2px solid #d916c8;
  border-radius: 30px;
  padding: 8px 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero .btn-warning:hover,
.hero .btn-livechat:hover,
.hero .btn-whatsapp:hover,
.hero .btn-telegram:hover {
  background-color: #4B0082;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

/* Konten Artikel Panjang */
.konten {
  background: linear-gradient(90deg, #41064d, #4f0329);
  padding: 60px 20px;
}

.konten h2 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}

.konten p {
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 15px;
}

/* Keunggulan Section */
.keunggulan {
  background: linear-gradient(90deg, #41064d, #4f0329);
  padding: 1px;
}
.keunggulan h3 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-align: left;
  margin-bottom: 10px;
}
.keunggulan ul {
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  padding-left: 20px;
  margin: 0;
}
.keunggulan li {
  margin-bottom: 5px;
}

/* Testimoni Section */
.testimoni {
  padding: 40px 0;
  background: linear-gradient(90deg, #41064d, #4f0329);
  color: #fff;
}

/* FAQ Section */
.faq {
  padding: 40px 0;
  background: linear-gradient(90deg, #41064d, #4f0329);
  color: #fff;
}

/* Footer Section */
.footer {
  text-align: center;
  padding: 20px 0;
  background: linear-gradient(90deg, #41064d, #4f0329);
  color: #fff;
}
.footer p {
  margin: 0;
}


/* ==========================
    Responsive untuk Mobile
========================== */
@media (max-width: 600px) {
  /* Navbar Buttons */
  .btn-masuk,
  .btn-daftar {
    padding: 6px 16px;
    font-size: 14px;
  }

  /* Hero Section */
  .hero {
    padding: 40px 15px;
  }
  .hero h1 {
    font-size: 22px;
  }
  .hero p {
    font-size: 14px;
  }

  /* Konten Panjang */
  .konten {
    padding: 40px 15px;
  }
  .konten h2 {
    font-size: 22px;
  }
  .konten p {
    font-size: 14px;
  }

  /* Keunggulan Section */
  .keunggulan {
    padding: 30px 15px;
  }
  .keunggulan h3 {
    font-size: 20px;
    text-align: center;
  }
  .keunggulan ul {
    font-size: 14px;
    padding-left: 15px;
  }
  .keunggulan li {
    margin-bottom: 5px;
  }

  /* Testimoni Section */
  .testimoni {
    padding: 30px 15px;
  }

  /* FAQ Section */
  .faq {
    padding: 30px 15px;
  }

  /* Footer Section */
  .footer {
    padding: 15px;
  }
}