/* ===== BASE: Variables, Typography, Utilities, Animations ===== */
:root {
	--primary-blue: #1c84ee;
	--primary-yellow: #f2a003;
	--success-green: #10b981;
	--background: #f4f5f8;
	--white: #ffffff;
	--text-dark: #334155;
	--text-muted: #64748b;
	--border-light: #e2e8f0;
}

body {
	background-color: var(--background);
}
.min-vh-100 {
	min-height: 100vh;
}

/* Links (global) */
a {
	color: var(--primary-blue);
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}
a:hover {
	color: var(--primary-yellow);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.forgot-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.9rem;
}

/* Titles & subtitles */
h5 {
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--primary-blue);
	margin-bottom: 10px;
}
.subtitle {
	color: var(--text-muted);
	font-size: 0.9rem;
	margin-bottom: 30px;
}

/* Dividers (generic) */
.form-divider,
.divider {
	position: relative;
	text-align: center;
	margin: 25px 0;
}
.form-divider::before,
.divider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--border-light);
}
.form-divider span,
.divider span {
	background: var(--white);
	padding: 0 15px;
	position: relative;
	color: var(--text-muted);
	font-size: 0.85rem;
	font-weight: 500;
}

/* Utilities & misc */
.text-danger {
	font-weight: 600;
	margin-top: 0.5rem;
	display: block;
}
.validasi {
	font-size: 0.85rem;
	color: #ef4444;
	margin-top: 0.5rem;
}
.helper-text {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-top: 0.5rem;
	display: block;
}
.d-none {
	display: none !important;
}
hr {
	border-color: var(--border-light);
	opacity: 0.5;
}

/* Animations (dipakai banyak komponen) */
@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

/* Responsive (umum) */
@media (max-width: 991px) {
	h5 {
		font-size: 1.4rem;
	}
}
@media (max-width: 576px) {
	h5 {
		font-size: 1.35rem;
	}
}
