/* =========================================
   ROOT & BODY
========================================= */
body {
  font-family: "Poppins", sans-serif;
  color: #2e3d35;
  margin: 0;
  padding: 0;

  /* Soft gradient background */
  background: linear-gradient(135deg, #f7fffb 0%, #eafff4 50%, #f3fff9 100%);

  /* Doodle background */
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
      <g fill='none' stroke='%2396d9a1' stroke-width='2' opacity='0.25'>\
        <path d='M60 40 C45 40 40 60 55 72 C55 90 78 90 78 72 C92 60 87 40 72 40 Z'/>\
        <circle cx='110' cy='110' r='18'/>\
        <ellipse cx='50' cy='180' rx='20' ry='12'/>\
      </g>\
    </svg>");
  background-size: 260px 260px;
  background-repeat: repeat;
  background-attachment: fixed;
}

/* =========================================
   LOGIN CONTAINER
========================================= */
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

/* =========================================
   LOGIN CARD
========================================= */
.login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 1.2rem;
  padding: 2rem 2.2rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  animation: fadeUp 0.5s ease;
}

/* Animasi masuk halus */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   HEADING
========================================= */
.login-card h3 {
  font-weight: 700;
  color: #3a7f68;
  margin-bottom: 1.5rem;
}

/* =========================================
   FORM
========================================= */
.form-label {
  font-size: 0.9rem;
  font-weight: 500;
}

.form-control {
  border-radius: 0.65rem;
  padding: 10px 12px;
  font-size: 0.95rem;
}

.form-control:focus {
  border-color: #4bb58c;
  box-shadow: 0 0 0 0.15rem rgba(75, 181, 140, 0.25);
}

/* =========================================
   PASSWORD TOGGLE
========================================= */
.input-group .btn {
  border-radius: 0 0.65rem 0.65rem 0;
}

/* =========================================
   BUTTON
========================================= */
.btn-primary {
  background: linear-gradient(135deg, #4bb58c, #3a9d78);
  border: none;
  border-radius: 0.7rem;
  padding: 10px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #3fae84, #328a68);
  transform: translateY(-1px);
}

/* =========================================
   LINK BAWAH
========================================= */
.text-muted {
  font-size: 0.85rem;
}

.text-muted a {
  color: #3a7f68;
  font-weight: 500;
  text-decoration: none;
}

.text-muted a:hover {
  text-decoration: underline;
}

/* =========================================
   RESPONSIVE (HP)
========================================= */
@media (max-width: 576px) {
  .login-card {
    padding: 1.6rem;
    border-radius: 1rem;
  }

  .login-card h3 {
    font-size: 1.25rem;
  }
}