/* ===================================================
   CSS untuk halaman Login (application/views/auth/login.php)
   =================================================== */
* { box-sizing: border-box; }
html, body {
	height: 100%;
	margin: 0;
	font-family: 'Segoe UI', Arial, sans-serif;
	overflow: hidden;
}
body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 45%, #6f4e37 100%);
}

/* ===== Blob dekoratif - murni CSS, ringan, tidak pakai gambar ===== */
.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .35;
	animation: mengambang 12s ease-in-out infinite;
}
.blob-1 { width: 340px; height: 340px; background: #ff9e27; top: -80px; left: -80px; animation-delay: 0s; }
.blob-2 { width: 280px; height: 280px; background: #4facfe; bottom: -60px; right: -60px; animation-delay: 2s; }
.blob-3 { width: 220px; height: 220px; background: #a855f7; top: 55%; left: 60%; animation-delay: 4s; opacity: .25; }

@keyframes mengambang {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(30px, -25px) scale(1.08); }
}

/* ===== Kartu login (efek glass) ===== */
.login-card {
	position: relative;
	z-index: 2;
	width: 380px;
	max-width: 90vw;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(10px);
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(0,0,0,.35);
	padding: 2.25rem 2rem;
	animation: munculNaik .5s ease both;
}
@keyframes munculNaik {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.login-logo {
	height: 56px; width: 56px; object-fit: cover; border-radius: 50%;
	display: block; margin: 0 auto 12px; box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.login-logo-fallback {
	height: 56px; width: 56px; border-radius: 50%; margin: 0 auto 12px;
	background: linear-gradient(135deg, #1a1a2e, #6f4e37);
	display: flex; align-items: center; justify-content: center; font-size: 26px;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.login-title { text-align: center; font-weight: 700; font-size: 1.15rem; margin-bottom: 2px; }
.login-subtitle { text-align: center; color: #999; font-size: .85rem; margin-bottom: 1.75rem; }

.form-control { border-radius: 10px; padding: .65rem .9rem; border: 1px solid #e5e5e5; }
.form-control:focus { border-color: #1a1a2e; box-shadow: 0 0 0 .15rem rgba(26,26,46,.1); }

.btn-login {
	border-radius: 10px; padding: .7rem; font-weight: 600; border: none;
	background: linear-gradient(135deg, #1a1a2e, #6f4e37); color: #fff;
	transition: transform .15s, box-shadow .15s;
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25); color: #fff; }

.login-footer { text-align: center; margin-top: 1.5rem; font-size: .72rem; color: #bbb; }

@media (max-width: 480px) {
	.login-card { padding: 1.75rem 1.4rem; }
}