:root{
  /* Palette cerah ikut logo MBK */
  --mbk-navy:#1E3A8A;
  --mbk-blue:#2563EB;
  --mbk-cyan:#22D3EE;

  --white:#ffffff;
  --muted:#64748b;
  --border:#e5e7eb;
  --text:#0f172a;
}

/* RESET */
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
}

/* ===== FULL SCREEN BACKGROUND ===== */
.bg{
  min-height:100vh;
  width:100%;
  background:
    radial-gradient(circle at 18% 28%, rgba(34,211,238,.35), transparent 55%),
    radial-gradient(circle at 82% 72%, rgba(37,99,235,.28), transparent 55%),
    linear-gradient(135deg, #60A5FA, #1E3A8A);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
}

/* ===== CARD ===== */
.login-container{
  width:100%;
  max-width:1200px;
}

.login-card{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  background:var(--white);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.30);
}

/* ===== LEFT PANEL ===== */
.left-panel{
  position:relative;
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(circle at 78% 78%, rgba(34,211,238,.30), transparent 55%),
    linear-gradient(135deg, #6ECFF6 0%, #3B82F6 45%, #1E3A8A 100%);
  color:#fff;
  padding:70px 45px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Soft bubbles */
.left-panel::before{
  content:"";
  position:absolute;
  width:260px; height:260px;
  border-radius:50%;
  left:-90px; bottom:-120px;
  background: rgba(34,211,238,.28);
}
.left-panel::after{
  content:"";
  position:absolute;
  width:300px; height:300px;
  border-radius:50%;
  right:-130px; top:-130px;
  background: rgba(255,255,255,.18);
}

/* ===== LOGO CENTER (BESAR, TANPA KOTAK PUTIH) ===== */
.logo-center{
  display:flex;
  gap:36px;
  margin-bottom:42px;
  position:relative;
  z-index:1;
}

.logo-center img{
  height:120px;              /* LOGO DIBESARKAN */
  width:auto;
  object-fit:contain;

  /* Glow & shadow supaya logo gelap masih jelas */
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 26px rgba(255,255,255,.35));
}

/* ===== WELCOME TEXT ===== */
.welcome-text{
  position:relative;
  z-index:1;
  max-width:460px;
}

.welcome-text h1{
  font-size:36px;
  letter-spacing:1.2px;
  text-shadow:0 3px 8px rgba(0,0,0,.25);
}

.welcome-text p{
  margin-top:14px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.6px;
  opacity:.95;
}

/* ===== RIGHT PANEL ===== */
.right-panel{
  padding:70px 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.right-panel h2{ font-size:32px; }
.desc{
  margin:12px 0 32px;
  color:var(--muted);
  font-size:15px;
}

/* FORM */
.field{
  display:flex;
  flex-direction:column;
  margin-bottom:20px;
}

.field label{
  font-size:14px;
  font-weight:800;
  margin-bottom:6px;
}

.field input{
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  font-size:15px;
  background:#fbfdff;
}

.field input:focus{
  outline:none;
  border-color:var(--mbk-cyan);
  box-shadow:0 0 0 4px rgba(34,211,238,.22);
  background:#fff;
}

/* ROW */
.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  margin:14px 0 30px;
}

.row a{
  text-decoration:none;
  color:var(--mbk-blue);
  font-weight:800;
}
.row a:hover{ text-decoration:underline; }

/* BUTTON */
button{
  background:linear-gradient(135deg,var(--mbk-blue),var(--mbk-navy));
  color:#fff;
  border:none;
  padding:16px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.4px;
  cursor:pointer;
  box-shadow:0 18px 36px rgba(30,58,138,.25);
}

button:hover{ filter:brightness(1.06); }
button:active{ transform:translateY(1px); }

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .login-card{ grid-template-columns:1fr; }

  .left-panel{ padding:50px 24px; }

  .logo-center{
    gap:22px;
    margin-bottom:30px;
  }
  .logo-center img{ height:90px; }   /* mobile scale */

  .welcome-text h1{ font-size:30px; }
  .welcome-text p{ font-size:18px; }

  .right-panel{ padding:40px 24px; }
}