/* ====================
   NORMAL (Desktop)
==================== */

/* Jangan ubah table/div/input apapun dulu! Biarkan seperti aslinya */

/* Untuk gambar biasa */
img {
  max-width: 100%;
  height: auto;
}

/* Untuk input gambar */
input[type="image"] {
  height: auto;
  max-width: none; /* biarkan ukuran asli */
}

/* Untuk layout default */
#container {
  max-width: 750px;
  margin: 0 auto;
  padding: 10px;
}

/* ====================
   Responsive (Mobile)
==================== */
@media screen and (max-width: 768px) {
  /* Baru ubah semuanya di mobile */
  
  table, div, #container {
    width: 100% !important;
    box-sizing: border-box;
  }

 /* Mengatur input dan textarea agar memiliki lebar penuh dan konsisten */
input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%; /* Lebar penuh untuk semua input */
    box-sizing: border-box; /* Agar padding dan border tidak mengganggu lebar */
    padding: 10px; /* Padding yang seragam */
    font-size: 1em; /* Ukuran font konsisten */
    margin: 5px 0; /* Margin yang konsisten */
    display: block; /* Menghindari masalah dengan kolom yang tidak rata */
}

/* Mengatur input dan textarea agar lebih besar dan mudah diakses di mobile */
@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="password"], textarea {
        font-size: 1em; /* Ukuran font yang sama */
        padding: 10px; /* Padding yang konsisten */
    }
}

/* Pastikan tombol submit juga konsisten */
input.submit {
    width: 100%; /* Lebar penuh */
    padding: 12px; /* Padding konsisten */
    font-size: 1.2em; /* Ukuran font tombol yang konsisten */
    background-color: #2497c1; /* Warna tombol */
    color: white;
    border: none;
    cursor: pointer;
}

input.submit:hover {
    background-color: #1a6f9f; /* Warna tombol saat hover */
}