/* Navbar */
.navbar {
  background-color: #1167b1 !important;
  border: none; /* Pastikan navbar tidak punya border */
  outline: none; /* Pastikan navbar tidak punya outline */
}

.navbar-brand,
.nav-link {
  color: white !important;
}

.nav-link:hover {
  color: #cce6ff !important;
}

/* Animasi slide in dari kiri*/
@keyframes slideInLeft {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animasi slide in dari atas*/
@keyframes slideInTop {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animasi slide in dari bawah*/
@keyframes slideInBottom {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Default state sebelum terlihat */
/* Nonaktifkan efek scroll di navbar agar teks tidak hilang */
.navbar .slide-in,
.navbar .slide-in-b1,
.navbar .slide-in-b2,
.navbar .slide-in-b3,
.navbar .slide-in-b4,
.navbar .slide-in-b5 {
  opacity: 1 !important;
}

/* Aktifkan animasi saat terlihat */
.slide-in.show {
  animation: slideInLeft 1.2s ease-out forwards;
}

/* Aktifkan animasi saat terlihat */
.slide-in-t.show {
  animation: slideInTop 1.2s ease-out forwards;
}

/* Aktifkan animasi saat terlihat */
.slide-in-b1.show {
  animation: slideInBottom 0.8s ease-out forwards;
}

/* Aktifkan animasi saat terlihat */
.slide-in-b2.show {
  animation: slideInBottom 0.9s ease-out forwards;
}

/* Aktifkan animasi saat terlihat */
.slide-in-b3.show {
  animation: slideInBottom 1s ease-out forwards;
}

/* Aktifkan animasi saat terlihat */
.slide-in-b4.show {
  animation: slideInBottom 1.1s ease-out forwards;
}

/* Aktifkan animasi saat terlihat */
.slide-in-b5.show {
  animation: slideInBottom 1.2s ease-out forwards;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"],
textarea,
select {
  background-color: #e6f4fa;
  /* biru muda */
  color: #000;
  text-shadow: 0 0 1px #000000;
}

input,
textarea,
select {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px 5px 5px 5px;
  padding: 5px;
  transition: all 0.25s ease-in-out 0s;
  z-index: 10;
}

form fieldset {
  background-color: #87cefa !important;
  max-width: 800px;
  margin: 0 auto;
  /* Bikin horizontal center */
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: #000;
}

input[type="submit"] {
  background-color: #4682b4;
  /* biru tua */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #5aa6dd;
}

body {
  background: linear-gradient(135deg, #d0f0f8, #cceeff);
  /* atau warna biru yang kamu suka */
}

@media (max-width: 1200px) {
  body {
    background: linear-gradient(135deg, #355c7d, #6c5b7b, #c06c84);
    /* tablet landscape */
  }
}

@media (max-width: 768px) {
  body {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    /* tablet potrait */
  }
}

@media (max-width: 576px) {
  body {
    background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
    /* hp */
  }
}

/* ========== ANIMASI SAAT SCROLL ========== */

.hidden-before {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Saat elemen muncul di viewport */
.show {
  opacity: 1;
  transform: translateY(0);
}

/* Animasi Khusus */
.show.slide-left {
  animation: slideInLeft 1s ease forwards;
}

.show.slide-right {
  animation: slideInRight 1s ease forwards;
}

.show.blur-in {
  animation: blurToClear 1.2s ease forwards;
}

.show.fade-up {
  animation: fadeInUp 1s ease forwards;
}

/* Keyframes */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes blurToClear {
  0% {
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

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