/* Auth page styles extracted from view for maintainability */
:root {
	--gradient-orange: linear-gradient(135deg, #FF6A00 0%, #FF6A00 50%, #FF6A00 100%);
}

body {
	background-image: linear-gradient(rgba(6,7,20,0.45), rgba(6,7,20,0.25)), url('../img/pelabuhanpriokai.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.login-container {
	width: 100%;
	max-width: 920px;
	padding: 2rem;
}

.login-card {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
	overflow: hidden;
}

.login-grid {
	display: grid;
	grid-template-columns: 1fr 420px;
}

.login-illustration {
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	padding: 2.5rem 3.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 420px;
}

@media (max-width: 991px) {
	.login-grid { grid-template-columns: 1fr; }
	.login-illustration { display: none; }
}

.logo-section { text-align: center; margin-bottom: 1rem; }
.logo-icon { width: 56px; height: 56px; background: var(--gradient-orange); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; box-shadow: 0 8px 20px rgba(255, 106, 0, 0.18); }
.logo-icon img { height: 40px; }
.logo-icon i { color: white; }

.login-title { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-bottom: 0.25rem; }
.login-subtitle { color: #6b7280; font-size: 0.9rem; }

.form-label { font-weight: 500; color: #374151; margin-bottom: 0.5rem; font-size: 0.875rem; }

.form-control { border: 1px solid #e6e8eb; border-radius: 10px; padding: 0.65rem 0.9rem; transition: all 0.18s ease; font-size: 0.95rem; }
.form-control:focus { border-color: #FF6A00; box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.1); }

.input-group-text { background: transparent; border: none; padding-right: 0.5rem; color: #6b7280; }
.input-group .form-control { border-left: none; }
.input-group:focus-within .form-control { box-shadow: 0 6px 18px rgba(99,102,241,0.06); border-color: #FF6A00; }

.btn-primary { background: var(--gradient-orange); border: none; border-radius: 10px; padding: 0.7rem 1rem; font-weight: 600; font-size: 1rem; transition: transform .14s ease, box-shadow .14s ease; box-shadow: 0 6px 18px rgba(255, 106, 0, 0.14); }
.btn-primary:active { transform: translateY(1px); }

.btn-link { color: #FF6A00; text-decoration: none; font-weight: 500; font-size: 0.875rem; }
.btn-link:hover { color: #FF6A00; text-decoration: underline; }

.alert { border-radius: 12px; border: none; }

.register-link { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; color: #6b7280; font-size: 0.875rem; }
.register-link a { color: #FF6A00; font-weight: 600; text-decoration: none; }
.register-link a:hover { color: #FF6A00; text-decoration: underline; }

/* Illustration box */
.illustration-box { width: 320px; height: 320px; border-radius: 26px; background: linear-gradient(135deg, #FF6A00 0%, #FF6A00 100%); box-shadow: 0 18px 36px rgba(15,23,42,0.08); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.illustration-box img { max-width: 72%; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15)); }
@media (max-width: 991px) { .illustration-box { width: 220px; height: 220px; } .illustration-box img { max-width: 80%; } }