/* -----------  GLOBAL COLORS ------------- */
		:root {
			--brand-maroon: #7b0000;
			--input-bg: #d9d9d9;
			--placeholder: #9b9b9b;
			--btn-yellow: #ffd400;
			--btn-grey: #d9d9d9;
		}

		body {
			min-height: 120vh;
			background: var(--brand-maroon);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: "Inter", sans-serif;
		}

		/* -------------  CARD --------------- */
		.login-card {
			width: 420px;
			height: 100%;
			background: #ffffff;
			border-radius: 2rem;
			padding: 3.5rem 3rem;
			box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
		}

		.login-card h1 {
			font-weight: 700;
			margin-bottom: 2.75rem;
		}

		/* -------------  INPUTS --------------- */
		.input-group-text,
		.form-control {
			background: var(--input-bg) !important;
			border: none !important;
		}

		.form-control {
			height: 46px;
		}

		.form-control::placeholder {
			color: var(--placeholder);
			font-weight: 500;
		}

		.input-group-text {
			border-top-left-radius: 999px !important;
			border-bottom-left-radius: 999px !important;
		}

		.form-control {
			border-top-right-radius: 999px !important;
			border-bottom-right-radius: 999px !important;
		}

		/* -------------  RADIO SEGMENTED CONTROL --------------- */
		.btn-check:checked+.gender-pill {
			background: var(--btn-yellow);
			color: #7b0000;
		}

		.gender-pill {
			background: var(--input-bg);
			color: #000000;
			border: none;
			font-weight: 500;
			box-shadow: none;
		}

		.gender-pill:first-of-type {
			border-top-left-radius: 999px;
			border-bottom-left-radius: 999px;
		}

		.gender-pill:last-of-type {
			border-top-right-radius: 999px;
			border-bottom-right-radius: 999px;
		}

		.gender-group {
			margin-bottom: 1.8rem;
			text-align: left;
		}

		/* -------------  OTHER CONTROLS --------------- */
		.form-check-input {
			width: 14px;
			height: 14px;
			margin-top: 0.15rem;
		}

		.helper-row {
			font-size: 0.9rem;
		}

		/* -------------  BUTTONS --------------- */
		.btn-yellow {
			background: var(--btn-yellow);
			color: #7b0000;
			border: none;
		}

		.btn-grey {
			background: var(--btn-grey);
			color: #4a4a4a;
			border: none;
			text-align: center;
			/* ✅ pastikan ini ada */
			display: inline-block;
			/* atau block/inline-flex jika perlu */
			vertical-align: middle;
			padding: 10px 15px;
			border: none;
		}

		.btn-yellow,
		.btn-grey {
			border-radius: 999px;
			height: 46px;
			font-weight: 600;
		}

		/* -------------  SEPARATOR --------------- */
		.separator {
			position: relative;
			text-align: center;
			margin: 1.2rem 0 1.4rem;
			font-size: 0.9rem;
		}

		.separator span {
			background: #ffffff;
			padding: 0 0.75rem;
			position: relative;
			z-index: 1;
		}

		.separator::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			height: 1px;
			background: var(--input-bg);
			transform: translateY(-50%);
			z-index: 0;
		}

		@media (max-width: 991px) {
			.login-card {
				width: 85%;
				/* ganti ukuran absolut dengan persentase */

				/* opsional: cegah melebar melebihi ukuran asli */
			}
		}