body {
  background-color: white;
  padding: 0%;
  line-height: 2;
  margin-right: 150px;
  margin-left: 150px;
  font-family: "Poppins", sans-serif;
}

.navbar {
  display: flex;
  border-radius: 20px;
  padding: 0px 2px -10px 0px;
}

ul {
  color: white;
  list-style: none;
  display: flex;
  gap: 10px;
  margin-left: auto;
  margin-right: 50px;
  font-size: 20px;
}

a {
  color: black;
  margin-left: 25px;
  font-weight: bold;
  text-decoration: none;
}

nav {
  background-color: lightgray;
  height: 60px;
  border-bottom: 3px solid black;
  position: sticky;
  /* padding-bottom: 10px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

strong {
  font-size: 30px;
  font-family: "Poppins", sans-serif;
  text-align: center;
}

nav a:hover {
  color: purple;
  transform: scale(5);
}

.marquee {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  background: transparent;
  padding: 20px 0;
}

.marquee-content {
  display: flex;
  gap: 40px;
  animation: scroll 5s linear infinite;
}

.marquee-content img {
  height: 60px;
  width: auto;
  border-radius: 10px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
  transition: transform 0.3s ease;
  border: 2px solid lightgray;
}

/* animasi emoji hai👋👋 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

p {
  display: flex;
  justify-content: center;
  align-items: center;
}
article {
  border: 3px solid black;
}

img {
  width: 100px;
  height: auto;
  margin-left: 10px;
  display: flex;
}

.gambar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 500px;
}

h1 strong {
  justify-content: center;
  display: flex;
  text-align: center;
}

.wave {
  display: inline-block;
  animation: wave 1s infinite;
  transform-origin: 70% 70%; /* titik putarnya biar kayak tangan */
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Animasi emoji 🚶‍♂️ */
.move {
  display: inline-block;
  animation: move 3s ease-in-out infinite;
}

@keyframes move {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(30px);
  }
}


/* --- Animasi Underline Berjalan --- */

/* 1. Atur link navigasi Anda */
nav a {
  color: black;
  margin-left: 25px;
  font-weight: bold;
  text-decoration: none; /* Pastikan underline bawaan mati */
  position: relative; /* Ini PENTING untuk menampung pseudo-element */
  padding-bottom: 5px; /* Beri sedikit ruang untuk garis di bawah */
}

/* 2. Buat garis bawahnya menggunakan ::after */
nav a::after {
  content: ''; /* Wajib ada untuk pseudo-element */
  position: absolute; /* Posisikan relatif terhadap 'nav a' */
  width: 100%; /* Lebar garis sama dengan lebar link */
  height: 3px; /* Ketebalan garis */
  background-color: purple; /* Warna garis (sesuai hover Anda) */
  
  /* Posisikan di bawah link */
  bottom: 0;
  left: 0;
  
  /* KUNCI ANIMASI: */
  /* Sembunyikan garis dengan skala 0 di sumbu X (horizontal) */
  transform: scaleX(0); 
  /* Tentukan titik awal animasi (mulai dari kiri) */
  transform-origin: left; 
  /* Atur kecepatan transisi "berjalannya" */
  transition: transform 0.3s ease-out;
}


nav a:hover {
  color: purple; /* Ubah warna teks saat hover */
  transform: scale(1.05); 
}

/* 4. Tampilkan garis saat di-hover */
nav a:hover::after {
  /* Animasikan garisnya menjadi skala 100% */
  transform: scaleX(1); 
}