/* Importing Google Fonts - Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

/* Dark Mode Styles */
:root {
  --primary-color: #5c56e1; /* Green accent color */
  --secondary-color: #4b44d7; /* Darker green for hover states */
  --bg-color: #263152; /* Dark background */
  --text-color: #f3f4f6; /* Light text color */
  --card-bg-color: #1e293b; /* Dark card background */
  --border-color: #334155; /* Border color */
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: 20px;
}
.container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--card-bg-color);
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
}
h1 {
  text-align: center;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.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: #141b2d; /* 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: #5c56e1;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

button:hover {
  background: #4b44d7;
}

#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 */
  }
}