/* Tema login NUSACU — palet Emerald (selaras token --nc-* aplikasi). */
:root {
	--nc-bg-canvas: #f5f7f9;
	--nc-bg-surface: #ffffff;
	--nc-border: #e9ecef;
	--nc-text: #111827;
	--nc-text-secondary: #4b5563;
	--nc-text-muted: #6b7280;
	--nc-primary: #047857;
	--nc-primary-hover: #065f46;
	--nc-primary-soft: #ecfdf5;
	--nc-danger: #b91c1c;
	--nc-danger-soft: #fee2e2;
	--nc-warning: #b45309;
	--nc-warning-soft: #fef3c7;
	--nc-radius-sm: 8px;
	--nc-radius: 12px;
	--nc-radius-lg: 16px;
	--nc-shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12);
	--nc-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--nc-font-display: 'DM Serif Display', Georgia, serif;
	--nc-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--pf-v5-global--FontFamily--text: var(--nc-font);
	--pf-v5-global--FontFamily--heading: var(--nc-font);
	--pf-v5-global--primary-color--100: var(--nc-primary);
	--pf-v5-global--primary-color--200: var(--nc-primary-hover);
	--pf-v5-global--link--Color: var(--nc-primary);
	--pf-v5-global--link--Color--hover: var(--nc-primary-hover);
	--pf-v5-c-button--m-primary--BackgroundColor: var(--nc-primary);
	--pf-v5-c-button--m-primary--hover--BackgroundColor: var(--nc-primary-hover);
	--pf-v5-c-button--m-primary--focus--BackgroundColor: var(--nc-primary-hover);
	--pf-v5-c-button--BorderRadius: var(--nc-radius-sm);
	--pf-v5-c-form-control--BorderRadius: var(--nc-radius-sm);
}

html.login-pf,
body.nc-body {
	background: var(--nc-bg-canvas) !important;
	color: var(--nc-text);
	font-family: var(--nc-font);
	min-height: 100%;
}

.nc-login {
	display: grid;
	grid-template-columns: minmax(320px, 44%) 1fr;
	min-height: 100vh;
}

/* Panel merek */
.nc-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 48px 56px;
	color: #ecfdf5;
	background:
		radial-gradient(circle at 15% 10%, rgba(52, 211, 153, 0.35), transparent 45%),
		radial-gradient(circle at 90% 85%, rgba(16, 185, 129, 0.25), transparent 50%),
		linear-gradient(160deg, #064e3b 0%, #065f46 55%, #047857 100%);
	overflow: hidden;
}
.nc-brand::after {
	content: '';
	position: absolute;
	inset: auto -120px -160px auto;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	border: 1px solid rgba(236, 253, 245, 0.12);
	box-shadow:
		0 0 0 60px rgba(236, 253, 245, 0.04),
		0 0 0 120px rgba(236, 253, 245, 0.03);
	pointer-events: none;
}
.nc-brand-id {
	display: flex;
	align-items: center;
	gap: 16px;
}
.nc-logo {
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: 16px;
	object-fit: contain;
	background: #ffffff;
	padding: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.nc-monogram {
	display: grid;
	place-items: center;
	font-family: var(--nc-font-display);
	font-size: 28px;
	color: var(--nc-primary);
}
.nc-cu-name {
	margin: 0;
	font-family: var(--nc-font-display);
	font-size: 26px;
	line-height: 1.15;
	color: #ffffff;
}
.nc-cu-tagline {
	margin: 4px 0 0;
	font-size: 14px;
	color: rgba(236, 253, 245, 0.82);
}
.nc-brand-body h2 {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.35;
	color: #ffffff;
	max-width: 26ch;
}
.nc-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	max-width: 46ch;
}
.nc-points li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(236, 253, 245, 0.92);
}
.nc-ico {
	width: 32px;
	height: 32px;
	flex: none;
	padding: 7px;
	border-radius: 10px;
	background: rgba(236, 253, 245, 0.12);
	fill: #a7f3d0;
}
.nc-brand-foot {
	position: relative;
	z-index: 1;
	font-size: 13px;
	color: rgba(236, 253, 245, 0.8);
}
.nc-brand-foot p {
	margin: 0 0 4px;
}
.nc-powered {
	letter-spacing: 0.02em;
	opacity: 0.85;
}

/* Area form */
.nc-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 32px 24px;
}
.nc-topbar {
	width: 100%;
	max-width: 440px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.nc-env {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nc-warning);
	background: var(--nc-warning-soft);
	border-radius: 999px;
	padding: 4px 10px;
}
.nc-locale {
	font: inherit;
	font-size: 13px;
	color: var(--nc-text-secondary);
	background: var(--nc-bg-surface);
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-sm);
	padding: 6px 10px;
}
.nc-card {
	width: 100%;
	max-width: 440px;
	background: var(--nc-bg-surface);
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-lg);
	box-shadow: var(--nc-shadow-pop);
	padding: 32px 32px 28px;
}
.nc-title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 700;
	color: var(--nc-text);
}
.nc-lead {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--nc-text-secondary);
}
.nc-steps {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	font-size: 12.5px;
	color: var(--nc-text-muted);
}
.nc-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	padding: 8px 10px;
	border-radius: var(--nc-radius-sm);
	background: #f3f4f6;
}
.nc-steps li span {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-weight: 700;
	background: #e5e7eb;
	color: var(--nc-text-secondary);
}
.nc-steps li.is-current {
	background: var(--nc-primary-soft);
	color: var(--nc-primary-hover);
	font-weight: 600;
}
.nc-steps li.is-current span,
.nc-steps li.is-done span {
	background: var(--nc-primary);
	color: #ffffff;
}
.nc-steps li.is-done {
	color: var(--nc-primary-hover);
}
.nc-alert {
	border-radius: var(--nc-radius-sm);
}
.nc-turnstile {
	margin: 4px 0 18px;
}
.nc-turnstile-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--nc-text-secondary);
	margin-bottom: 6px;
}
.nc-field-error {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--nc-danger);
}
.nc-help {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--nc-text-muted);
}
.nc-code-input {
	font-family: var(--nc-font-mono) !important;
	font-size: 22px !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
}
.nc-timer {
	margin: 4px 0 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nc-primary-hover);
}
.nc-timer.is-expired {
	color: var(--nc-danger);
}
.nc-code-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.nc-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nc-primary);
	cursor: pointer;
	text-decoration: none;
}
.nc-link:hover {
	text-decoration: underline;
}
.nc-link:disabled {
	color: var(--nc-text-muted);
	cursor: default;
	text-decoration: none;
}
.nc-required {
	font-size: 12px;
	color: var(--nc-text-muted);
}
.nc-info {
	margin-top: 16px;
	font-size: 13px;
}
.nc-footer {
	margin: 0;
	font-size: 12px;
	color: var(--nc-text-muted);
	text-align: center;
}
:focus-visible {
	outline: 2px solid var(--nc-primary);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.nc-login {
		grid-template-columns: 1fr;
	}
	.nc-brand {
		padding: 28px 20px;
		gap: 20px;
	}
	.nc-brand-body,
	.nc-brand-foot {
		display: none;
	}
	.nc-main {
		justify-content: flex-start;
		padding: 20px 16px 32px;
	}
	.nc-card {
		padding: 24px 20px;
	}
}