/*!
 * Prime Competition — halaman login.
 *
 * Pola dua panel diwarisi dari Prime Generation: panel kiri merah dengan
 * potongan diagonal memuat logo dan nama produk, panel kanan gelap memuat
 * kartu login. Di layar sempit panel merah menyusut jadi header pendek.
 *
 * Yang TIDAK diwarisi: pemilih peran. Portal siswa hanya punya satu jenis
 * pengguna, jadi loginnya cukup nomor peserta dan PIN.
 */

.auth {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	background: var(--ink-900);
}

/* --- Panel kiri: merah, potongan diagonal ---------------------------------- */
.auth__brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--sp-7) var(--sp-6);
	background: var(--brand-gradient);
	color: #FFFFFF;
	overflow: hidden;
}

/* Potongan diagonal di tepi kanan panel. */
.auth__brand::after {
	content: "";
	position: absolute;
	inset: 0 -1px 0 auto;
	width: 90px;
	background: var(--ink-900);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Kilau lembut agar bidang merah besar tidak terasa mati. */
.auth__brand::before {
	content: "";
	position: absolute;
	top: -20%;
	right: -10%;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 68%);
	pointer-events: none;
}

.auth__brand-inner { position: relative; z-index: 1; max-width: 380px; }

.auth__logo {
	max-height: 64px;
	width: auto;
	margin-bottom: var(--sp-5);
}

.auth__wordmark {
	font: var(--text-h1);
	font-size: 1.75rem;
	line-height: 1.2;
	margin-bottom: var(--sp-3);
}

.auth__tagline {
	font: var(--text-body);
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.6;
}

.auth__brand-foot {
	position: relative;
	z-index: 1;
	font: var(--text-label);
	color: rgba(255, 255, 255, 0.72);
}

/* --- Panel kanan: gelap, kartu login --------------------------------------- */
.auth__panel {
	display: grid;
	place-items: center;
	padding: var(--sp-6) var(--sp-5);
}

.auth__card {
	width: 100%;
	max-width: 400px;
	padding: var(--sp-6);
	background: var(--ink-850);
	border: 1px solid var(--ink-700);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-lg);
}

.auth__title {
	font: var(--text-h2);
	color: #FFFFFF;
	margin-bottom: var(--sp-2);
}

.auth__subtitle {
	font: var(--text-body);
	color: var(--ink-300);
	margin-bottom: var(--sp-5);
}

/* Tombol perlihatkan/sembunyikan PIN. */
.auth__reveal {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	background: none;
	border: 0;
	color: var(--ink-400);
	cursor: pointer;
	border-radius: var(--r-sm);
}
.auth__reveal:hover { color: #FFFFFF; }

.auth__field-wrap { position: relative; }
.auth__field-wrap .input { padding-right: calc(var(--tap) + 4px); }

/* Input PIN: monospace angka agar 6 digit mudah dihitung mata. */
.input--pin {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.35em;
	text-align: center;
	font-weight: 600;
	font-size: 1.125rem;
}
.input--pin::placeholder { letter-spacing: normal; font-weight: 400; }

.auth__foot {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--ink-700);
	font: var(--text-label);
	color: var(--ink-400);
	text-align: center;
}
.auth__foot a { color: var(--brand-300); }

/* --- Layar sempit ----------------------------------------------------------
   Panel merah menyusut jadi header pendek di atas kartu. */
@media (max-width: 860px) {
	.auth {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	.auth__brand {
		padding: var(--sp-5) var(--sp-4) var(--sp-6);
		text-align: center;
		align-items: center;
	}
	.auth__brand::after {
		inset: auto 0 -1px 0;
		width: auto;
		height: 44px;
		clip-path: polygon(0 100%, 100% 100%, 100% 0);
	}
	.auth__brand-inner { max-width: none; }
	.auth__logo { margin-inline: auto; max-height: 48px; }
	.auth__wordmark { font-size: 1.375rem; }
	.auth__tagline { display: none; }
	.auth__brand-foot { display: none; }

	.auth__panel { padding: var(--sp-5) var(--sp-4) var(--sp-6); align-items: start; }
	.auth__card { padding: var(--sp-5); }
}