/* ===== LOGIN STYLE ===== */
body {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
url('../img/entrance-koperasi.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
}

/* ===== HEADER & LOGO ===== */
.header-container {
background: #FBFFCA;
padding: 10px 0px ;
text-align: center;
width: 100%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logo-container {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
}

.logo-item {
text-align: center;
}

/* Logo standard */
.logo-img {
width: 140px;
height: 120px;
padding: 10px;
object-fit: contain;
}

/* Logo kedua */
.logo-item:nth-child(2) .logo-img {
width: 290px;
height: 160px;
padding: 5px;
}

 /* Logo ketiga */
.logo-item:nth-child(3) .logo-img {
height: 140px;
padding: 5px;
}

/* ===== LOGIN FORM ===== */
.login-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
padding: 20px;
}

.login-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
width: 350px;
overflow: hidden;
}

.login-section {
padding: 25px;
}

.login-title {
font-size: 18px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
color: #333;
}

.form-group {
margin-bottom: 15px;
}

.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
transition: all 0.3s;
}

.form-control:focus {
outline: none;
border-color: #EC994B;
box-shadow: 0 0 0 3px rgba(236, 153, 75, 0.2);
}

.btn-login {
width: 100%;
background-color: #EC994B;
color: white;
border: 2px solid #EC994B;
padding: 12px;
border-radius: 4px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin-top: 10px;
transition: all 0.3s;
box-shadow: 0 4px 8px rgba(236, 153, 75, 0.3);
}

.btn-login:hover {
background-color: white;
color: #EC994B;
box-shadow: 0 6px 12px rgba(236, 153, 75, 0.4);
transform: translateY(-2px);
}

.admin-link {
text-align: center;
margin-top: 15px;
font-size: 14px;
color: #666;
}

.admin-link a {
color: #EC994B;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
}

.admin-link a:hover {
text-decoration: underline;
color: #e58932;
}
.alert {
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: none;
        }
        
        .alert-error {
            background-color: #ffebee;
            color: #c62828;
            border: 1px solid #ef9a9a;
        }
        
        .alert-success {
            background-color: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #a5d6a7;
        }
        
        .school-name {
            text-align: center;
            color: white;
            margin-top: 20px;
            font-size: 24px;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .footer {
            text-align: center;
            color: white;
            padding: 15px;
            font-size: 14px;
            background-color: rgba(0, 0, 0, 0.2);
        }
        
        .demo-credentials {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            color: white;
            font-size: 14px;
        }
        
        .demo-credentials h4 {
            margin-bottom: 10px;
            font-size: 16px;
        }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.logo-container {
      gap: 30px;
}

.login-container {
      width: 100%;
      max-width: 400px;
}
}

@media (max-width: 576px) {
.logo-container {
      flex-direction: column;
      gap: 20px;
      align-items: center;
}

.login-container {
      width: 100%;
      max-width: 320px;
}

.header-container {
      padding: 15px 0;
}
}