@font-face {
  font-family: 'Carena';
  src: url('../fonts/Carena-Regular.otf') format('truetype'); /* Ganti .ttf menjadi .otf jika filemu berakhiran .otf */
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d6e8f8 0%, #e8f0fb 50%, #d4e4f7 100%);
  position: relative;
  overflow: hidden;
}

.bg-blob {
  position: fixed;
  border-radius: 50%;
  z-index: 0;
}

.bg-blob-tl {
  width: 360px;
  height: 360px;
  top: -60px;
  left: -80px;
  background: rgba(184, 212, 240, 0.5);
}

.bg-blob-br {
  width: 300px;
  height: 300px;
  bottom: -80px;
  right: -60px;
  background: rgba(194, 216, 245, 0.4);
}

.bg-blob-tr {
  width: 200px;
  height: 200px;
  top: 40px;
  right: 60px;
  background: rgba(191, 214, 239, 0.35);
}

.main-card {
  display: flex;
  width: 1160px;
  max-width: 95vw;
  min-height: 740px;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow:
    0 20px 60px -10px rgba(1, 86, 204, 0.09),
    0 4px 20px 0 rgba(0, 0, 0, 0.06);
}

.left-panel {
  width: 480px;
  min-width: 400px;
  background: #0156CC;
  padding: 40px 56px; /* Bantalan atas-bawah dikurangi biar seimbang */
  display: flex;
  flex-direction: column;
  justify-content: center; /* KUNCI: Membuat semua konten ke tengah vertikal */
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.deco-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.deco-tl { width: 180px; height: 180px; top: -60px; left: -60px; }
.deco-tr { width: 140px; height: 140px; top: -40px; right: -50px; }
.deco-mid { width: 100px; height: 100px; top: 200px; right: -20px; background: rgba(255,255,255,0.05); }
.deco-br { width: 200px; height: 200px; bottom: -80px; left: -30px; }

.deco-hex { position: absolute; top: 300px; left: 100px; width: 21px; height: 27px; }
.deco-hex svg { stroke: rgba(255,255,255,0.3); stroke-width: 1; fill: none; }

.left-content { 
  display: flex; 
  flex-direction: column; 
  align-items: center; /* Memastikan semuanya rata tengah horizontal */
  gap: 0px; /* Jarak bawaan dinolkan agar kita bisa atur rapatnya */
  position: relative; 
  z-index: 1; 
}
.logo-wrapper { display: flex; justify-content: center; padding: 10px 0; }
.logo-wrapper img { width: 142px; height: auto; }
.logo-placeholder { width: 142px; height: 193px; display: flex; align-items: center; justify-content: center; }
.logo-placeholder svg { width: 100px; height: 100px; }

.brand-block { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}
.brand-heading { 
  font-family: 'Carena', sans-serif; /* Ini kode yang ditambahkan */
  font-size: 60px; 
  color: #fff; 
  font-weight: 700; 
  letter-spacing: 4px; 
  text-shadow: 0 2px 8px rgba(0,0,0,0.15); 
  line-height: 1.2; 
}
.brand-divider { width: 163px; height: 1px; background: #fff; }
.welcome-text { font-size: 28px; font-weight: 600; color: #fff; line-height: 1.4; }

.description-text { 
  font-size: 14px; /* Ukuran reguler yang pas untuk dibaca */
  font-weight: 400; /* Ketebalan reguler (tidak bold) */
  color: rgba(255, 255, 255, 0.75); /* Putih dengan transparansi 75% agar terlihat samar/elegan */
  line-height: 1.6; 
  text-align: center; 
  margin-top: 16px; 
}

.right-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px; background: #fff; }

.login-card {
  width: 440px; max-width: 100%; background: #fff; border-radius: 24px; padding: 40px;
  display: flex; flex-direction: column; gap: 20px; border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.04), 0 18px 48px -16px rgba(1,86,204,0.08);
}

.login-title { font-size: 32px; font-weight: 700; color: #0156CC; text-align: center; }
.login-subtitle { font-size: 14px; color: #9CA3AF; text-align: center; margin-top: 6px; }

.form-area { display: flex; flex-direction: column; gap: 16px; }
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 11px; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; }

.input-container {
  display: flex; align-items: center; gap: 12px; background: #f8fafc;
  border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 0 16px; height: 52px;
  transition: border-color 0.2s, box-shadow 0.2s; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04);
}
.input-container:focus-within { border-color: #0156CC; box-shadow: 0 0 0 3px rgba(1,86,204,0.1); }
.input-icon { flex-shrink: 0; color: #94a3b8; }
.input-container input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Poppins', sans-serif; font-size: 14px; color: #1e293b; }
.input-container input::placeholder { color: #737d8c; }

.toggle-password { background: none; border: none; cursor: pointer; color: #94a3b8; padding: 4px; display: flex; align-items: center; transition: color 0.2s; }
.toggle-password:hover { color: #64748b; }

.forgot-row { display: flex; justify-content: flex-end; }
.forgot-link { font-size: 13px; font-weight: 600; color: #ff383c; text-decoration: none; transition: opacity 0.2s; }
.forgot-link:hover { opacity: 0.8; }

.btn-login {
  width: 100%; height: 56px; border: none; border-radius: 18px;
  background: linear-gradient(90deg, #0156CC 0%, #1593CC 100%); color: #fff;
  font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 10px 24px -10px rgba(1,86,204,0.31);
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(1,86,204,0.4); }
.btn-login:active { transform: translateY(0); }

.footer-signup { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; }
.footer-signup span { color: #9CA3AF; }
.footer-signup a { color: #0156CC; font-weight: 700; text-decoration: none; transition: opacity 0.2s; }
.footer-signup a:hover { opacity: 0.8; }

/* TABLET */
@media (max-width: 1200px) {
  .main-card { width: 95vw; min-height: auto; }
  .left-panel {
  width: 480px;
  min-width: 400px;
  background: #0156CC;
  
  /* Ubah baris ini: Angka pertama (atas/bawah) dikecilkan */
  padding: 30px 56px; 
  
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
  .brand-heading { font-size: 48px; }
  .welcome-text { font-size: 24px; }
  .description-text { font-size: 14px; }
  .right-panel { padding: 40px; }
  .login-card { width: 100%; }
}

@media (max-width: 900px) {
  .left-panel { width: 320px; min-width: 280px; padding: 48px 32px; }
  .brand-heading { font-size: 40px; }
  .welcome-text { font-size: 20px; }
  .logo-placeholder { width: 110px; height: 150px; }
  .logo-placeholder svg { width: 80px; height: 80px; }
  .right-panel { padding: 32px; }
  .login-title { font-size: 26px; }
}

/* MOBILE */
@media (max-width: 768px) {
  body { background: #0156CC; padding: 20px; }
  .bg-blob { display: none; }
  .main-card { width: 100%; max-width: 480px; min-height: auto; border-radius: 24px; box-shadow: 0 20px 60px -10px rgba(0,0,0,0.25); flex-direction: column; }
  .left-panel { display: none; }
  .right-panel { padding: 24px; border-radius: 24px; }
  .login-card { width: 100%; padding: 32px 24px; border-radius: 20px; }
  .login-title { font-size: 26px; }
  .login-subtitle { font-size: 13px; }
  .input-container { height: 48px; border-radius: 14px; }
  .btn-login { height: 50px; border-radius: 14px; font-size: 15px; }
  .footer-signup { font-size: 13px; }
}

@media (max-width: 400px) {
  body { padding: 16px; }
  .login-card { padding: 28px 20px; }
  .login-title { font-size: 24px; }
}