* {
  margin:0; padding:0; box-sizing:border-box;
  font-family: 'Open Sans', sans-serif;
}

body {
  background:#f8f9fa;
  display:flex;
  height:100vh;
  justify-content:center;
  align-items:center;
}

.container {
  display:flex;
  width:90%;
  max-width:900px;   /* biar lebih ramping */
  height:500px;      /* dipendekin dari 600px */
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
  border-radius:8px; /* lebih kecil dari 12px */
  overflow:hidden;
}
/* ====== Bagian kiri ====== */
.left {
  flex:1;
  background:linear-gradient(135deg, #44a357, #2e7d32);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;   /* gambar + teks di tengah horizontal */
  padding:40px;
  text-align:center;    /* teks rata tengah */
}

.left img {
  max-width:70%;        /* gambar lebih besar dan agak ke tengah */
  margin-bottom:20px;
}

.left h1 {
  font-size:32px;
  margin-bottom:15px;
}

.left p {
  font-size:16px;
  line-height:1.6;
  max-width:300px;
  opacity:0.9;
}

/* ====== Bagian kanan ====== */
.right {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:40px;
}

.logo {
  margin-bottom:20px;
  text-align:center;
}

.logo img {
  width: 150px;
  height:auto;
}

.form {
  width:100%;
  max-width:320px;
}

.form input {
  width:100%;
  border:1px solid #ccc;
  border-radius:8px;
  padding:12px;
  margin-bottom:15px;
  font-size:14px;
  outline:none;
}

.form input:focus {
  border-color:#44a357;
}

.btn {
  width:100%;
  padding:12px;
  background:#44a357;
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

.btn:hover {
  background:#2e7d32;
}

/* Pesan sukses / error */
.message {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

.message.success {
  color: #44a357;
}

.message.error {
  color: #e74c3c;
}

/* Responsive */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    height:auto;
  }
  .left {
    display:none; /* sembunyiin bagian kiri di HP */
  }
}

.left h2 {
  font-size: 28px;
  margin-bottom: 20px; /* kasih jarak ke bawah */
}

.left p {
  font-size: 16px;
  line-height: 1.6;
}

.message.error {
  margin-top: 10px;
  font-size: 14px;
  color: #e74c3c;
  text-align: center;
}