:root{
  --radius: 26px;
}

*{
  box-sizing:border-box;
  font-family: system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ===== MOBILE FIRST ===== */
body{
  margin:0;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#667eea,#764ba2);
  padding:14px;
}

/* CARD BESAR */
.card{
  width:100%;
  max-width:720px;           /* ⬅️ LEBAR */
  min-height:70svh;          /* ⬅️ TINGGI */
  background:#fff;
  padding:36px 30px;
  border-radius:var(--radius);
  box-shadow:0 22px 60px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* JUDUL */
.card h2{
  font-size:2.3rem;          /* ⬅️ GEDE */
  text-align:center;
  margin-bottom:34px;
}

/* INPUT */
.input-group{
  margin-bottom:22px;
}

.input-group input{
  width:100%;
  padding:20px 22px;         /* ⬅️ EMPUK */
  font-size:1.2rem;          /* ⬅️ BESAR */
  border-radius:20px;
  border:1.5px solid #ccc;
}

/* TOMBOL */
.btn{
  width:100%;
  padding:20px;
  font-size:1.3rem;          /* ⬅️ BESAR */
  border:none;
  border-radius:22px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

/* LINK */
.links{
  text-align:center;
  margin-top:26px;
  font-size:1.1rem;
}

.links a{
  color:#667eea;
  text-decoration:none;
  display:block;
  margin-top:8px;
}

/* ===== DESKTOP ===== */
@media (min-width: 1024px){
  .card{
    max-width:540px;         /* desktop tetap proporsional */
    min-height:auto;
  }
}