* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Arial", sans-serif;
  background-color: #111115; /* Warna latar belakang gelap */
  color: #e0e0e0; /* Warna teks terang */
  padding: 30px;
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.7rem;
  color: #6a5acd;
}

.form-grid {
  display: flex;
  gap: 40px; /* Jarak antar kolom */
}

.form-column {
  flex: 1; /* Membagi kolom secara merata */
}

label {
  display: block;
  margin-top: 20px;
  margin-bottom: 8px;
  color: #fff; /* Warna label senada dengan judul */
}

select {
  width: 100%;
  padding: 12px;
  margin-top: 5px;
  border: none; /* Border lebih gelap */
  border-radius: 6px;
  background-color: #22262f; /* Latar belakang input lebih gelap */
  color: #e0e0e0; /* Warna teks input terang */
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

select:focus {
  border-color: #25cff0; /* Border berubah warna saat fokus */
  outline: none;
}

button {
  display: block;
  width: 100%;
  padding: 15px;
  margin-top: 30px;
  background: linear-gradient(145deg, #5286ff, #6a5acd);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

button:hover {
  background: linear-gradient(200deg, #5286ff, #6a5acd);
}

#resultSection {
  margin-top: 30px;
}

.hidden {
  display: none;
}

#generatedPrompt {
  background-color: #2c2c2c; /* Latar belakang hasil lebih gelap */
  padding: 15px;
  border-radius: 6px;
  margin-top: 15px;
  font-size: 1rem;
  line-height: 1.6;
  color: #e0e0e0; /* Warna teks hasil terang */
}

#copyButton {
  margin-top: 15px;
  background-color: #03dac6; /* Warna hijau neon untuk tombol salin */
}

#copyButton:hover {
  background-color: #018786; /* Warna hijau lebih gelap saat hover */
}

/* Media Query untuk Responsif Mobile */
@media (max-width: 768px) {
  body {
    padding: 10px; /* Mengurangi padding agar lebih kompak */
  }

  .container {
    padding: 20px; /* Mengurangi padding container */
  }

  h1 {
    font-size: 1.5rem; /* Mengurangi ukuran font judul */
  }

  .form-grid {
    flex-direction: column; /* Mengubah layout menjadi vertikal */
    gap: 20px; /* Mengurangi jarak antar elemen */
  }

  button {
    padding: 12px; /* Mengurangi padding tombol */
    font-size: 0.9rem; /* Mengurangi ukuran font tombol */
  }

  select {
    padding: 10px; /* Mengurangi padding input */
    font-size: 0.9rem; /* Mengurangi ukuran font input */
  }

  #generatedPrompt {
    font-size: 0.9rem; /* Mengurangi ukuran font teks hasil */
  }
}

@media (max-width: 480px) {
  body {
    padding: 5px; /* Mengurangi padding lebih lanjut */
  }

  .container {
    padding: 15px; /* Mengurangi padding container lebih lanjut */
  }

  h1 {
    font-size: 1.2rem; /* Mengurangi ukuran font judul lebih lanjut */
  }

  label {
    font-size: 0.9rem; /* Mengurangi ukuran font label */
  }

  button {
    padding: 10px; /* Mengurangi padding tombol lebih lanjut */
    font-size: 0.8rem; /* Mengurangi ukuran font tombol lebih lanjut */
  }

  select {
    padding: 8px; /* Mengurangi padding input lebih lanjut */
    font-size: 0.8rem; /* Mengurangi ukuran font input lebih lanjut */
  }

  #generatedPrompt {
    font-size: 0.8rem; /* Mengurangi ukuran font teks hasil lebih lanjut */
  }
}