/* /assets/css/style.css */

/* Perbaikan untuk Navbar Fixed-top */
body {
    padding-top: 56px; /* Memberi jarak untuk navbar fixed-top */
}

/* Style untuk link */
a {
    text-decoration: none;
}

/* Style untuk card kursus */
.card-course {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-course .card-body {
    flex-grow: 1;
}

/* Hero Section dengan Latar Belakang Siluet Biru Langit */
.welcome-hero {
  position: relative; /* Diperlukan agar pseudo-element bisa diposisikan */
  overflow: hidden; /* Penting! Memotong blob agar sesuai radius kotak */
}

/* Konten di depan (teks, tombol) */
.welcome-hero-content {
  position: relative; /* Atur posisi */
  z-index: 3; /* Di atas bintang */
}

/* Ini adalah Siluet/Blob Biru Langit Anda */
.welcome-hero::before {
  content: '';
  position: absolute;
  z-index: 1; /* Di BELAKANG konten */
  
  /* Warna Biru Langit (soft) */
  background-color: #e3f2fd; 
  
  /* Bentuk Blob Organik (akan dianimasikan) */
  width: 200%;
  height: 150%;
  
  /* Posisi (sedikit ke atas dan ke kiri) */
  top: -60%;
  left: -50%;

  /* Memanggil 'wave-animation' */
  animation: wave-animation 10s ease-in-out infinite alternate;
}

/* ANIMASI Gelombang Dinamis */
@keyframes wave-animation {
  from {
    /* Posisi & bentuk awal */
    transform: translateX(0);
    border-radius: 40% 60% 60% 40% / 70% 50% 50% 30%;
  }
  to {
    /* Posisi & bentuk akhir */
    transform: translateX(20%); 
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  }
}

/* Efek Bintang Meledak */
.welcome-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2; /* Bintang ada di antara gelombang biru dan teks */
}

.welcome-stars span {
  position: absolute;
  
  /* Ukuran bintang dibuat sedikit lebih besar */
  width: 10px;
  height: 10px;
  background-color: #0000FF; /* Warna Kuning Emas */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

  /* Durasi animasi dibuat lebih lambat (3s) */
  animation: sparkle-animation 3s infinite ease-out;
  
  /* Sembunyikan di awal */
  opacity: 0;
}

/* Animasi Ledakan (Sparkle) */
@keyframes sparkle-animation {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    /* "Ledakan" dibuat lebih besar (scale 2) */
    transform: scale(2) rotate(180deg);
    opacity: 1;
  }
  100% {
    /* Hilang lagi di akhir */
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* Atur posisi dan delay acak untuk 10 bintang */
.welcome-stars span:nth-child(1) { top: 20%; left: 15%; animation-delay: 0.5s; }
.welcome-stars span:nth-child(2) { top: 40%; left: 30%; animation-delay: 1.2s; }
.welcome-stars span:nth-child(3) { top: 10%; left: 50%; animation-delay: 0.2s; }
.welcome-stars span:nth-child(4) { top: 60%; left: 60%; animation-delay: 2.8s; }
.welcome-stars span:nth-child(5) { top: 30%; left: 80%; animation-delay: 0.8s; }
.welcome-stars span:nth-child(6) { top: 70%; left: 10%; animation-delay: 2.5s; }
.welcome-stars span:nth-child(7) { top: 80%; left: 40%; animation-delay: 1.3s; }
.welcome-stars span:nth-child(8) { top: 50%; left: 70%; animation-delay: 2s; }
.welcome-stars span:nth-child(9) { top: 25%; left: 90%; animation-delay: 0.7s; }
.welcome-stars span:nth-child(10) { top: 90%; left: 80%; animation-delay: 2.3s; }


/*
  KODE DIUBAH: Perbaikan Final Posisi Tombol Mata
*/

/* 1. Buat wrapper div-nya 'relative' */
.password-field-wrapper {
  position: relative;
}

/* 2. Atur input field agar memberi ruang di kanan untuk tombol */
.password-field-wrapper .form-control {
  padding-right: 40px; /* Beri ruang 40px di kanan */
}

/* 3. Atur posisi tombol mata (absolute) */
.toggle-password-btn {
  position: absolute;
  
  /* DIUBAH: Atur posisi tombol agar 
    berada di BAWAH dan RATA dengan input field
  */
  bottom: 0;
  right: 5px; 
  
  /* DIUBAH: Samakan tinggi tombol dengan tinggi input field Bootstrap
    (Tinggi default .form-control adalah 38px)
  */
  height: 38px; 
  width: 40px; 
  
  /* HAPUS BORDER (Sesuai permintaan Anda) */
  border: 0;
  
  /* SHADING BIRU (Sesuai permintaan Anda) */
  background: transparent; /* Latar belakang transparan */
  color: #0d6efd; /* Ikon berwarna biru */
  opacity: 0.5; /* Buat sedikit transparan */
  
  /* Rapikan */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Bulat */
  transition: all 0.2s ease;
}

/* 4. Beri efek "shading" saat di-hover */
.toggle-password-btn:hover {
  background-color: #e3f2fd; /* Shading biru langit */
  opacity: 1; /* Ikon menjadi solid */
}

/* 5. Saat input-nya di-klik (focus), tombolnya juga ikut 'menyala' */
.form-control:focus + .toggle-password-btn {
  opacity: 1;
}