body { 
   font-family: 'Arial', sans-serif;
   margin: 0;
   padding: 0;
   background: linear-gradient(135deg, #6cbf84, #4a90e2);
   color: #333;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

.container {
   width: 100%;
   margin: 130px auto; /* Memusatkan secara horizontal */
   max-width: 400px;
   background: #fff;
   padding: 20px; /* Menambahkan ruang di dalam container */
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   animation: fadeIn 0.8s ease-in-out;
}

.container img {
   display: block;
   margin: 0 auto 20px;
}

h3 {
   text-align: center;
   font-size: 24px;
   color: #000000;
}
h4 {
   text-align: center;
   font-size: 24px;
   color: #000000;
   margin-bottom: 30px;
}

form {
   display: grid;
   gap: 15px;
}


label {
   font-size: 14px;
   color: #555;
}

input[type="text"],
input[type="password"] {
     width: 100%;
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 5px;
     font-size: 14px;
}

button {
   
   padding: 10px;
   border: none;
   border-radius: 5px;
   background: #4a90e2;
   color: white;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

button:hover {
   background-color: #3b76c4;
}

.password-container {
   position: relative;
}

.password-container .show-password {
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
   border: none;
   background: none;
   color: #777;
   cursor: pointer;
}

.login-container {
   text-align: center;
   margin-top: 10px;
}

.login-container a {
   text-decoration: none;
   color: #4a90e2;
   font-weight: bold;
}

.login-container a:hover {
   color: #3b76c4;
}

footer {
   background: #4a90e2;
   color: #fff;
   text-align: center;
   padding: 10px 0;
   margin-top: auto;
   font-size: 14px;
}

@keyframes fadeIn {
   from {
       opacity: 0;
       transform: translateY(-20px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

/* Responsif untuk perangkat kecil */
@media screen and (max-width: 768px) {
   .container {
       width: calc(100% - 40px); /* Lebar maksimal 100% dengan margin kiri dan kanan */
   }
}