/* assets/style.css */

/* --- Reset & dasar tampilan umum --- */
/* Supaya semua elemen dihitung ukuran dengan cara yang sama */
* {
  box-sizing: border-box;
}

/* Biar tinggi halaman dan body selalu 100% layar */
html,
body {
  height: 100%;
}

/* Gaya dasar halaman: font, warna, latar belakang, dll */
body {
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  /* Bikin font lebih halus di Safari */
  -moz-osx-font-smoothing: grayscale;
  /* Bikin font lebih halus di Firefox */
  color: #222;
  /* Warna teks utama */
}

/* Style untuk video background fullscreen di index */
#bg-video {
  position: fixed;
  /* posisinya tetap saat scroll */
  right: 0;
  bottom: 0;
  min-width: 100%;
  /* supaya lebar minimal 100% layar */
  min-height: 100%;
  /* supaya tinggi minimal 100% layar */
  width: auto;
  height: auto;
  z-index: -1;
  /* dibelakang semua konten */
  object-fit: cover;
  /* biar video menutupi area tanpa distorsi */
  filter: brightness(0.7);
  /* opsional: gelapkan video supaya konten terbaca */
  backdrop-filter: blur(20px);
  /* efek blur kaca */
}


/* Membuat logo-wrapper agar logo sejajar dan berada di atas box */
.container {
  display: flex;
  flex-direction: column;
  /* susun anak secara vertikal */
  align-items: center;
  /* rata tengah secara horizontal */
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
  padding-top: 20px;
  width: 100%;
  /* supaya logo berada di tengah container */
}

.logo {
  height: 100px;
  /* tinggi logo */
  width: auto;
  object-fit: contain;
  user-select: none;
}







/* --- Tata letak utama container dan kotak card --- */
/* Container utama: bikin konten berada di tengah layar vertikal dan horizontal */
.container {
  display: flex;
  justify-content: center;
  /* Tengah horizontal */
  align-items: center;
  /* Tengah vertikal */
  min-height: 100vh;
  /* Tinggi minimal 100% tinggi layar */
  padding: 20px;
  /* Jarak dalam container */
}

/* Card: kotak putih dengan efek transparan dan bayangan */
.card {
  position: relative;
  background: linear-gradient(135deg, #852e18, #feb47b);
  border-radius: 20px;
  /* Sudut membulat */
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.08);
  /* Bayangan halus */
  padding: 28px;
  width: 100%;
  max-width: 560px;
  /* Lebar maksimal */
  text-align: center;
  /* Tengah teks */
  overflow: hidden;
  /* Sembunyikan konten keluar batas */
}

/* --- Garis tipis efek kaca transparan di card --- */
/* Efek stripe halus di card sebagai ornamen kaca */
.card::before {
  content: "";
  position: absolute;
  left: -30%;
  top: -40%;
  width: 160%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(255, 150, 50, 0.10), transparent 30%);
  transform: rotate(-12deg);
  pointer-events: none;
  /* Jangan mengganggu klik */
}

/* --- Progress bar (lingkaran kecil) untuk step form --- */
/* Bar kecil sebagai indikator langkah di form multi-step */
.progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
  z-index: 5;
}

/* Lingkaran indikator */
.progress .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eee;
  /* Warna default */
  transition: transform .25s, background .25s;
  /* Animasi halus */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) inset;
}

/* Lingkaran aktif (langkah yang sedang dipilih) */
.progress .dot.active {
  background: #ff6600;
  /* Oranye cerah */
  transform: scale(1.35);
  /* Membesar */
}

/* --- Halaman pembuka / intro --- */
/* Kotak pembuka yang berwarna oranye cerah */
.intro {
  position: relative;
  border-radius: 16px;
  padding: 34px 20px;
  color: #fff;
  overflow: visible;
  z-index: 2;
  background: linear-gradient(135deg, #ff6a00 0%, #ff9250 60%);
  box-shadow: 0 8px 30px rgba(255, 102, 0, 0.18);
}

/* Judul utama di halaman intro */
.intro h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  margin: 0 0 8px;
  letter-spacing: 0.6px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  /* Bayangan teks */
}

/* Paragraf di intro */
.intro p {
  font-size: 1.05rem;
  margin: 0 0 18px;
  opacity: 0.95;
  /* Sedikit transparan */
  line-height: 1.45;
}

/* --- Bentuk dekorasi bulat mengambang di intro --- */
/* Ornamen bulat transparan sebagai hiasan */
.intro .shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  z-index: 1;
  pointer-events: none;
}

.intro .shape.s1 {
  width: 120px;
  height: 120px;
  right: -30px;
  top: -20px;
  background: #fff;
  transform: rotate(20deg);
}

.intro .shape.s2 {
  width: 60px;
  height: 60px;
  left: -20px;
  bottom: -10px;
  background: #ffd7b3;
}

.intro .shape.s3 {
  width: 36px;
  height: 36px;
  right: 18%;
  bottom: -18px;
  background: #ffd0a8;
}

/* --- Tombol utama berwarna oranye dengan efek pulsa --- */
.btn {
  display: inline-block;
  background: #ff6600;
  color: #fff;
  padding: 12px 22px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(255, 102, 0, 0.20);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-3px);
  /* Naik sedikit saat hover */
  box-shadow: 0 12px 26px rgba(255, 102, 0, 0.20);
}

.btn:active {
  transform: translateY(0);
}

/* --- Efek animasi pulsa di tombol --- */
.pulse {
  position: relative;
}

.pulse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 102, 0, 0.22);
  animation: pulse 1.8s ease-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* Animasi pulsa */
@keyframes pulse {
  0% {
    width: 0;
    height: 0;
    opacity: 0.6;
  }

  70% {
    width: 160px;
    height: 160px;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* --- Form input dan label --- */
/* Label buat tiap input agar jelas */
label {
  display: block;
  text-align: left;
  margin: 12px 0 6px;
  color: #333;
  font-weight: 700;
}

/* Gaya untuk input tanggal, teks, dan dropdown */
input[type="date"],
input[type="text"],
select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(34, 34, 34, 0.09);
  background: #fff;
  font-size: 1rem;
  outline: none;
  transition: box-shadow .12s, border-color .12s;
}

/* Efek fokus pada input */
input:focus,
select:focus {
  box-shadow: 0 6px 18px rgba(34, 34, 34, 0.06);
  border-color: #ffb089;
}

/* --- Animasi perpindahan step form --- */
/* Setiap step form tersembunyi dan ada efek naik turun */
.step {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: all .36s cubic-bezier(.2, .9, .2, 1);
}

/* Step yang aktif akan tampil */
.step.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* --- Baris tombol next/back di form --- */
/* Tempat tombol next dan back */
.controls {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 10px;
}

/* Tombol di baris controls */
.controls .btn {
  flex: 0 0 auto;
}

/* --- Responsif untuk layar kecil --- */
@media (max-width: 520px) {
  .card {
    padding: 20px;
    border-radius: 14px;
  }

  .intro h1 {
    font-size: 1.5rem;
  }

  .intro p {
    font-size: 0.98rem;
  }
}

/* --- Kanvas konfeti untuk efek perayaan (default tersembunyi) --- */
#confetti-canvas {
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

/* --- Bantu aksesibilitas, sembunyikan teks tapi tetap baca layar --- */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* =========================================================
   🎨 STYLE HALAMAN HASIL KLASIFIKASI
   (Halaman yang menampilkan hasil akhir klasifikasi)
   ========================================================= */
/* Container utama halaman hasil klasifikasi */
.hasil-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;

  position: relative;
  /* penting agar z-index bekerja */
  z-index: 1;
  /* agar berada di atas video */
  background: none;
  /* hapus background */
}

/* Style untuk video background fullscreen di index */
#bg-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100vw;
  /* pakai viewport width */
  min-height: 100vh;
  /* pakai viewport height */
  width: auto;
  height: auto;
  z-index: -1;
  object-fit: cover;
  filter: brightness(0.7) blur(4px);
  /* video agak gelap dan blur */
  /* hapus backdrop-filter agar lebih kompatibel */
}

/* Kotak hasil klasifikasi dengan efek kaca oranye */
.hasil-card {
  background: linear-gradient(135deg, #852e18, #feb47b);
  border-radius: 20px;
  padding: 35px 40px;
  max-width: 500px;
  text-align: center;
  color: #3a1f00;
  /* warna teks coklat gelap */
  box-shadow: 0 12px 35px rgba(255, 126, 95, 0.5);
  /* bayangan oranye */
  backdrop-filter: blur(30px);
  /* efek blur kaca */
  animation: fadeInUp 1s ease-out;
}

/* Judul utama hasil klasifikasi */
.hasil-card h1 {
  font-size: 2.8rem;
  margin-bottom: 15px;
  color: #fff3e0;
  /* krem lembut */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}

/* Info tambahan seperti jenis kelamin, status kerja, dll */
.hasil-card .info {
  font-size: 1.1rem;
  margin: 8px 0;
  opacity: 0.9;
  font-weight: 600;
}

/* Deskripsi utama hasil klasifikasi, tampil jelas dan besar */
.hasil-card .deskripsi {
  margin-top: 25px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #fff8f0;
  font-style: italic;
}

/* Tombol kembali ke halaman awal */
.btn-kembali {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 28px;
  background: #ff6f3c;
  /* oranye tajam */
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 6px 15px rgba(255, 111, 60, 0.5);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-kembali:hover {
  background: #ff855e;
  transform: scale(1.08);
}

/* --- Animasi masuk untuk semua elemen dengan class animasi-muncul --- */
@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Pasang animasi masuk untuk elemen yang pakai class ini */
.animasi-muncul {
  animation: fadeInUp 1s ease forwards;
}


@media (max-width: 600px) {
  .hasil-card {
    max-width: 90%;
    /* Jadi lebar menyesuaikan layar kecil */
    padding: 20px 15px;
    /* Padding dikurangi agar pas */
    font-size: 1rem;
    /* Atur font lebih kecil agar pas */
  }

  .hasil-card h1 {
    font-size: 2rem;
  }

  .btn-kembali {
    padding: 10px 20px;
    font-size: 1rem;
  }
}