/* Global Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: linear-gradient(to bottom right, #00bfff, #8a2be2, #ff69b4, #ffd700);
  color: #222;
  margin: 0;
  padding: 0; /* Hapus padding supaya footer bisa full */
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 30px;
  color: #6a5acd;
}

.left-nav {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 40px;
  margin-right: 10px;
}

.logo {
  font-size: 1.4rem;
  font-weight: bold;
}

.menu-toggle {
  font-size: 24px;
  cursor: pointer;
  display: none;
}

/* Navigation Menu */
.menu {
  display: flex;
  gap: 15px;
}

.menu a {
  color: #6a5acd;
  text-decoration: none;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  padding: 10px 12px;
  border-radius: 6px;
  transition: background 0.3s;
}

.menu a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Title & Subtitle */
main h1 {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 10px;
  padding: 10px; /* Tambahkan padding untuk ruang dalam */
  border-radius: 5px; /* Sudut membulat */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* Bayangan pada teks */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan hitam */
}

.subtitle {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: #333;
}

.input-group {
  display: flex; /* Memastikan elemen berada dalam satu baris */
  border: 2px solid #c0a8ff; /* Border untuk semua elemen */
  border-radius: 5px; /* Sudut membulat */
  overflow: hidden; /* Memastikan tombol tidak keluar dari batas */
}

.input-group input {
  flex: 1; /* Input mengisi ruang yang ada */
  padding: 20px; /* Padding dalam input */
  border: none; /* Menghilangkan border default */
  font-size: 1.1rem;
}

.input-group button {
  padding: 20px 24px; /* Padding untuk tombol */
  background-color: #7b68ee;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  border: 1px solid #fff; /* Menghilangkan border default */
  cursor: pointer; /* Menampilkan pointer saat hover */
  transition: background 0.3s;
  font-size: 1rem;
}

.input-group button:hover {
  background-color: #9370db; /* Warna tombol saat hover */
}

/* Download Button */
.download-btn {
  background-color: #6a0dad;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Bayangan pada teks */
  padding: 20px 24px;
  border: 1px solid #fff;
  border-radius: 0;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
  margin-top: 10px;
  margin-bottom: 320px;
}

.download-btn:hover {
  background-color: #8a2be2;
}

/* Text and Descriptions */
.tutor-text {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 1rem;
  color: #444;
}

.description-block {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  margin: 20px 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.faq-section {
  margin-top: 40px;
}

.faq-drawer__title {
  display: block;
  font-weight: bold;
  background-color: #cdb4f7;
  color: #333;
  padding: 14px 20px;
  margin-top: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.faq-drawer__title:hover {
  background-color: #b296f3;
}

.faq-drawer__content {
  padding: 15px 20px;
  background: #f7f0ff;
  margin-top: 5px;
  border-radius: 8px;
  display: none;
  line-height: 1.6;
}

.faq-drawer:checked + .faq-drawer__title + .faq-drawer__content {
  display: block;
}

.arrow {
  margin-right: 10px;
}

/* Footer Styling - Perbaikan */
.footer {
  width: 100%;
  background-color: #4682B4; /* Warna gelap profesional */
  color: white;
  text-align: center;
  padding: 40px 20px;
  margin: 0;
  margin-top: 20px;
  box-sizing: border-box;
}

.footer-links {
  margin-bottom: 30px;
}

.footer-links a {
  color: #ffffff;
  display: inline;
  text-decoration: none;
  font-size: 18px;
  margin: 5px;
}

.footer-links a:hover {
  color: #00ffff;
  text-decoration: underline;
  transition: all 0.2s ease;
}

.footer-copy {
  font-size: 16px;
  color: #000000;
  margin-top: 45px;
}

/* Responsive */
@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .menu.active {
    display: flex;
  }
}
.center-text {
  text-align: center;
}

.description-block h2, .description-block p {
  text-align: center;
}

@media (max-width: 768px) {
  .input-group {
    flex-direction: column;
  }

  .input-group input,
  .input-group button {
    width: 100%;
  }

  .download-btn {
    width: 100%;
  }
}
.howto-section {
  /* Untuk section pertama, kita akan mengubah ini menggunakan kelas spesifik */
  padding: 40px 20px;
  border-radius: 16px;
  margin: 50px 0;
  text-align: center; /* Tetap */
}

.howto-title {
  font-size: 2rem;
  margin-bottom: 30px;
  font-weight: bold;
}

/* Section untuk langkah-langkah dengan background biru dan text putih */
.howto-section.steps {
  background: linear-gradient(135deg, #7b68ee, #8a2be2); /* Gradient biru */
  color: white; /* Teks putih */
}

/* Special styling untuk angka langkah */
.step-number {
  background: white; /* Background putih untuk nomor */
  color: #7b68ee; /* Teks biru untuk nomor */
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 auto 10px;
  font-weight: bold;
}

/* Kembali ke styling default untuk langkah-langkah */
.step p {
  color: white; /* Teks langkah putih */
  font-size: 1rem;
}

/* Section untuk ikon dengan background putih dan text hitam */
.howto-section.icons {
    background-color: white; /* Background putih */
    color: black; /* Teks hitam */
    padding: 40px 20px; /* Padding untuk section icons */
}

.howto-icons {
    display: flex;
    flex-wrap: wrap; /* Agar elemen bisa membungkus */
    justify-content: center; /* Menyelaraskan secara horizontal */
    gap: 30px; /* Jarak antar icon-info */
}

.icon-info {
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 150px; /* Lebar ikon info */
    text-align: center; /* Menyelaraskan teks di tengah */
}

.icon-info img {
    width: 110px; /* Ukuran gambar */
    height: 110px; /* Ukuran gambar */
    margin-bottom: 10px; /* Jarak antara gambar dan teks */
}

.icon-info p {
    font-size: 0.99rem; /* Ukuran font untuk teks */
    color: black; /* Teks hitam */
    line-height: 1.4; /* Jarak antar baris untuk teks lebih rapi */
    margin: 0; /* Menghapus margin default */
    padding: 0 10px; /* Padding horizontal untuk teks */
}

.main__content {
    margin: 20px 0; /* Jarak di bagian atas dan bawah konten utama */
    padding: 20px; /* Padding untuk konten utama */
    background-color: #fff; /* Latar belakang putih untuk konten utama */
    border-radius: 8px; /* Membuat sudut konten utama melengkung */
}

/* Container untuk setiap bagian konten */
.main__content__container {
    display: flex;
    flex-direction: column; /* Mengubah arah ke kolom */
    align-items: center; /* Untuk menyelaraskan elemen di tengah secara horizontal */
    margin-bottom: 20px; /* Jarak antara setiap konten */
}

/* Teks dengan judul besar dan warna hitam */
.u-smaller-text {
    font-size: 1rem; /* Ukuran font normal untuk deskripsi */
    color: black; /* Teks berwarna hitam */
}

/* Mengubah ukuran font untuk judul */
.u-smaller-text h3 {
    font-size: 1.8rem; /* Ukuran huruf lebih besar untuk judul */
    text-transform: capitalize; /* Mengubah huruf pertama dari setiap kata menjadi huruf besar */
    margin-bottom: 25px; /* Menghilangkan margin default */
    text-align: center; /* Menengahkan teks */
}

/* Teks deskripsi */
.u-smaller-text p {
    font-size: 1.2rem; /* Ukuran font sedikit lebih besar untuk deskripsi */
    margin-bottom: 12px; /* Menambah jarak antara bait deskripsi */
}

/* Gaya untuk gambar dalam konten */
.image__wrapper {
    margin-bottom: 35px; /* Jarak di bawah gambar */
}

.image__wrapper img {
    max-width: 100%; /* Gambar tidak lebih lebar dari kontainer */
    height: auto; /* Rasio gambar tetap terjaga */
}

/* Gaya untuk info-arrow */
.info-arrow {
    color: #800080; /* Warna ungu */
    font-size: 1.2rem; /* Ukuran font untuk teks arrow */
    display: flex;
    align-items: center; /* Tengah secara vertikal */
}

/* Responsivitas untuk layar kecil */
@media (max-width: 768px) {
    .howto-icons {
        flex-direction: column; /* Mengubah ke kolom pada layar kecil */
        align-items: center; /* Memusatkan konten secara horizontal */
    }
}

/* Menambahkan animasi untuk ikon */
.icon-info:nth-child(1) { animation-delay: 0.1s; }
.icon-info:nth-child(2) { animation-delay: 0.2s; }
.icon-info:nth-child(3) { animation-delay: 0.3s; }
.icon-info:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}
.input-section {
  text-align: center;
  margin: 40px auto;
  max-width: 400px;
}

.url-input {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  margin-bottom: 15px;
  background: #f0f0f0;
}

.paste-btn,
.download-btn {
  width: 100%;
  padding: 18px;
  font-size: 16px;
  border: 1px solid #fff;
  border-radius: 5px;
  margin-top: 10px;
  background: linear-gradient(to right, #7b00ff, #ff00c8);
  color: white;
  font-weight: bold;
}


/* === Enhanced Visible Shimmer Animation for Download Button === */
/* === Tambahan shimmer animasi tanpa ubah warna tombol === */
.download-btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.download-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.15) 100%
  );
  transform: skewX(-20deg);
  animation: shimmer-slide 2.5s infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes shimmer-slide {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* === Karakter animasi 3D kecil menekan tombol === */
.download-character {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: auto;
  animation: bounce 1.8s infinite;
  z-index: 5;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}
.icon-info {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-in-out;
}

.icon-info.animate {
  opacity: 1;
  transform: translateY(0);
}