/* komen jangan di hapus buat tanda */
/* Mengatur ulang margin bawaan browser */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f7f6; /* Warna background modern yang lembut */
  color: #333;
}

/* --- WADAH UTAMA (Rahasia Atas-Bawah & Scroll) --- */
.halaman-utama {
  display: flex;
  flex-direction: column; /* Mengubah arah jejeran menjadi Atas ke Bawah */
  align-items: center;    /* Posisi di tengah layar */
  min-height: 100vh;      /* Minimal setinggi layar. Jika isi lebih panjang, otomatis bisa di-scroll */
  padding: 60px 20px;     /* Jarak aman atas-bawah 60px, dan kiri-kanan 20px agar tidak mentok di HP */
}

/* --- TEKS SAMBUTAN (Di Atas) --- */
.wadah-sambut {
  text-align: center;
  margin-bottom: 50px; /* Jarak yang cukup lega antara judul dan katalog */
}

.wadah-sambut h1 {
  color: #1a2b3c;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.wadah-sambut p {
  color: #666;
  font-size: 1.1rem;
}

/* --- KATALOG (Di Bawah) --- */
.katalog-wadah {
  display: grid;
  gap: 25px;
  width: 100%;
  max-width: 900px; /* Lebar maksimal katalog di laptop */
  
  /* PENTING UNTUK HP: Default-nya 1 kolom ke bawah agar tulisan tidak memaksakan diri mengecil */
  grid-template-columns: 1fr; 
}

/* --- RESPONSIVITAS (Media Query) --- */
/* Jika layar lebih lebar dari 600px (Tablet/Laptop), ubah jadi 2 kolom */
@media (min-width: 600px) {
  .katalog-wadah {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- KARTU PRODUK (UI/UX Terkini) --- */
.kartu-produk {
  background-color: white;
  padding: 30px 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Bayangan sangat halus dan modern */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek animasi saat disentuh */
}

/* Efek mengambang saat mouse diarahkan ke kartu (Hover) */
.kartu-produk:hover {
  transform: translateY(-5px); /* Kartu naik sedikit */
  box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Bayangan menebal */
}

.kartu-produk h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #222;
}

.kartu-produk p {
  color: #777;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

/* --- TOMBOL --- */
.kartu-produk button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px; /* Lengkungan tombol modern */
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 100%; /* Tombol memenuhi lebar kartu */
}

.kartu-produk button:hover {
  background-color: #0056b3;
}

.tombol-link {
  display: inline-block; /* Penting agar link bisa dikasih tinggi/lebar/padding */
  background-color: #007bff;
  color: white;
  text-decoration: none; /* Menghilangkan garis bawah khas link */
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.2s;
}

.tombol-link:hover {
  background-color: #0056b3;
}

.tombol-kembali {
  display: inline-block;
  background-color: transparent; /* Latar belakang transparan */
  color: #333; /* Warna teks gelap */
  border: 2px solid #ccc; /* Garis pinggir abu-abu */
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none; /* Menghilangkan garis bawah link */
  font-weight: bold;
  margin-bottom: 20px; /* Jarak dengan elemen di bawahnya */
  transition: all 0.3s ease;
}

.tombol-kembali:hover {
  background-color: #e9ecef; /* Berubah abu-abu muda saat disentuh */
  border-color: #bbb;
}

/* --- DESAIN INPUT MODERN --- */
/* --- DESAIN INPUT MODERN --- */
.grup-input {
  text-align: left; /* Teks label dibuat rata kiri agar mudah dibaca */
  margin-bottom: 15px;
}

.grup-input label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a5568; /* Abu-abu kebiruan yang elegan */
  margin-bottom: 6px;
}

.grup-input input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px; /* Lengkungan modern */
  font-size: 1rem;
  font-family: inherit;
  color: #2d3748;
  background-color: #f8fafc;
  transition: all 0.3s ease; /* Transisi halus saat warna berubah */
}

/* Keajaiban UI: Efek saat kotak input diklik */
.grup-input input:focus {
  border-color: #3182ce; /* Berubah biru */
  outline: none;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15); /* Efek cahaya (glow) biru di sekitarnya */
}

.tombol-hitung {
  margin-top: 10px;
}

/* --- DESAIN KOTAK HASIL --- */
.kotak-hasil {
  margin-top: 25px;
  padding: 20px;
  background-color: #f0fdf4; /* Latar hijau sangat muda */
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  text-align: center;
  transition: opacity 0.4s ease; /* Muncul perlahan */
}

/* Class ini digunakan JS untuk menyembunyikan elemen */
.sembunyi {
  display: none; 
}

.label-hasil {
  font-size: 0.85rem;
  color: #166534; /* Hijau gelap */
  font-weight: bold;
  letter-spacing: 1px;
}

.kotak-hasil h2 {
  color: #15803d;
  font-size: 2.2rem; /* Angka hasil dibuat sangat besar dan menonjol */
  margin: 8px 0;
}

.teks-untung {
  font-size: 0.95rem;
  color: #22c55e;
  font-weight: 500;
  margin: 0;
}

/* --- DESAIN ALERT MODERN & TRANSPARAN --- */
.kartu-alert {
  /* Menggunakan rgba untuk warna merah transparan (r, g, b, alpha) */
  /* Alpha 0.15 berarti 15% tingkat ketebalan warnanya */
  background-color: rgba(220, 53, 69, 0.15); 
  border: 1.5px solid #dc3545; /* Garis pinggir merah tegas */
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  
  /* Efek Glow: Memberikan bayangan merah halus di sekeliling kartu */
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Sedikit efek angkat saat kartu disentuh */
.kartu-alert:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

/* --- MENYUSUN EMOJI DAN TEKS --- */
.kepala-alert {
  display: flex;
  align-items: center; /* Teks dan emoji rata tengah secara vertikal */
  justify-content: center; /* Posisikan grup ke tengah kartu */
  margin-bottom: 15px;
}

.emoji-peringatan {
  font-size: 2rem; /* Ukuran emoji dibuat besar */
  margin-right: 12px; /* Jarak antara emoji dan teks */
}

.kepala-alert h3 {
  font-size: 1.5rem;
  color: #c82333; /* Warna teks merah gelap agar mudah dibaca */
  margin: 0; /* Menghapus margin bawaan h3 */
}

/* Menyesuaikan teks deskripsi di bawahnya */
.kartu-alert p {
  color: #721c24; /* Warna teks deskripsi cokelat kemerahan */
  font-size: 1rem;
  margin-bottom: 20px;
}

/* 1. Class sakti untuk menyembunyikan elemen */
.alertBg {
  display: none;
}

/* 2. Mengecilkan ukuran emoji agar sejajar dengan teks */
.emoji-peringatan {
  font-size: 1.2rem; /* Sebelumnya 2rem, sekarang kita kecilkan */
  margin-right: 8px;
}

/* 3. Mengecilkan judul alert agar lebih proporsional */
.judul-peringatan {
  font-size: 1.1rem; 
  color: #c82333;
  margin: 0;
}

.teks-peringatan {
  font-size: 0.9rem;
  margin-top: 5px;
  margin-bottom: 0; /* Menghilangkan jarak bawah berlebih */
  color: #721c24;
}