
.tab-links {
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.tab-link {
  text-decoration: none;
  color: #666;
  padding: 10px 20px;
  display: inline-block;
  font-weight: 600;
  transition: 0.3s;
  border-bottom: 2px solid transparent; /* Garis bawah transparan */
}

/* Gaya saat di-hover atau aktif */
.tab-link:hover, .tab-link.active {
  color: #000;
  border-bottom: 2px solid #0073aa; /* Garis bawah muncul saat aktif */
}

/* Gaya saat di-hover atau aktif */
.tab-link:hover, .tab-link.active {
  color: #000;
  background-color: #e0e0e0; /* Abu-abu sedikit lebih gelap untuk tab aktif */
  border-bottom: 2px solid #0073aa; /* Tetap ada garis bawah sebagai aksen */
  border-radius: 4px 4px 0 0;/* Garis bawah muncul saat aktif */
}

/* Menyembunyikan konten secara default */
.tab-content {
  padding: 15px 0;
  animation: fadeEffect 0.5s; /* Efek halus saat ganti tab */
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
