.pmb-page {

		--primary-blue: #0B5ED7;
		--sky-blue: #3BA7FF;
		--teal-green: #10B981;
		--light-blue: #E8F4FF;
		--dark-blue: #073B5B;
		--soft-gray: #F3F8FA;
		--accent-yellow: #F59E0B;
		--alert-red: #EF4444;

		font-family: "Roboto", sans-serif;

		position: relative;

		width: 100%;
		min-height: 100vh;

		padding: 45px 20px 60px;

		background:
			linear-gradient(135deg,
				#E8F4FF 0%,
				#F8FCFF 50%,
				#DDF1FF 100%);

		box-sizing: border-box;

		overflow: hidden;
	}


	/* =========================================================
	   DEKORASI BACKGROUND
	   ========================================================= */

	.pmb-page::before {

		content: "";

		position: absolute;

		top: -90px;
		left: -100px;

		width: 350px;
		height: 250px;

		background:
			linear-gradient(135deg,
				#0B5ED7,
				#3BA7FF,
				#63D6D4);

		border-radius: 0 0 190px 0;

		opacity: .9;

		pointer-events: none;
	}


	.pmb-page::after {

		content: "";

		position: absolute;

		right: -110px;
		bottom: -100px;

		width: 350px;
		height: 250px;

		background:
			linear-gradient(135deg,
				#63D6D4,
				#3BA7FF,
				#0B5ED7);

		border-radius: 190px 0 0 0;

		opacity: .9;

		pointer-events: none;
	}


	/* =========================================================
	   TITIK BACKGROUND
	   ========================================================= */

	.pmb-dot-pattern {

		position: absolute;

		width: 100px;
		height: 100px;

		background-image:
			radial-gradient(circle,
				rgba(59, 167, 255, .65) 3px,
				transparent 4px);

		background-size: 24px 24px;

		pointer-events: none;
	}


	.pmb-dot-top {

		top: 25px;
		left: 25px;
	}


	.pmb-dot-bottom {

		right: 25px;
		bottom: 35px;
	}


	/* =========================================================
	   CARD UTAMA
	   ========================================================= */

	.pmb-container {

		position: relative;

		z-index: 5;

		width: 100%;
		max-width: 1020px;

		margin: 0 auto;

		padding: 30px 50px 45px;

		background:
			linear-gradient(135deg,
				rgba(255, 255, 255, .99),
				rgba(248, 252, 255, .97));

		border: 1px solid rgba(59, 167, 255, .45);

		border-radius: 20px;

		box-shadow:
			0 12px 35px rgba(11, 94, 215, .12),
			0 4px 12px rgba(0, 0, 0, .04);

		box-sizing: border-box;

		overflow: hidden;
	}


	/* =========================================================
	   AKSEN CARD
	   ========================================================= */

	.pmb-container::before {

		content: "";

		position: absolute;

		top: -105px;
		left: -95px;

		width: 290px;
		height: 190px;

		background:
			linear-gradient(135deg,
				#0B5ED7,
				#3BA7FF,
				#63D6D4);

		border-radius: 0 0 180px 0;

		z-index: -1;
	}


	.pmb-container::after {

		content: "";

		position: absolute;

		right: -95px;
		bottom: -95px;

		width: 260px;
		height: 175px;

		background:
			linear-gradient(135deg,
				#63D6D4,
				#3BA7FF,
				#0B5ED7);

		border-radius: 180px 0 0 0;

		z-index: -1;
	}


	/* =========================================================
	   HEADER
	   ========================================================= */

	.pmb-header {

		text-align: center;

		margin-bottom: 28px;
	}


	/* =========================================================
	   LOGO
	   ========================================================= */

	.pmb-logo {

		display: block;

		width: auto;
		height: 92px;

		max-width: 180px;

		margin: 0 auto 8px;

		object-fit: contain;
	}


	/* =========================================================
	   NAMA SEKOLAH
	   ========================================================= */

	.pmb-school-name {

		margin: 0 0 7px;

		color: var(--dark-blue);

		font-size: 21px;
		font-weight: 700;

		line-height: 1.4;
	}


	/* =========================================================
	   JUDUL
	   ========================================================= */

	.pmb-title {

		margin: 0;

		color: #104B86;

		font-size: 39px;

		font-weight: 800;

		line-height: 1.2;

		letter-spacing: -.5px;
	}


	.pmb-title-year {

		display: block;

		margin-top: 3px;

		color: var(--primary-blue);

		font-size: 38px;

		font-weight: 800;
	}


	/* =========================================================
	   GARIS AKSEN
	   ========================================================= */

	.pmb-title-line {

		width: 92px;
		height: 8px;

		margin: 17px auto 0;

		border-radius: 20px;

		background:
			linear-gradient(90deg,
				#3BA7FF,
				#0B5ED7);

		box-shadow:
			0 3px 8px rgba(59, 167, 255, .25);
	}


	/* =========================================================
	   SECTION PILIH PENDAFTARAN
	   ========================================================= */

	.pmb-selection {

		margin-top: 5px;
	}


	.pmb-selection-title {

		display: flex;

		align-items: center;

		gap: 15px;

		margin-bottom: 15px;

		color: var(--dark-blue);

		font-size: 22px;

		font-weight: 700;
	}


	.pmb-selection-icon {

		width: 52px;
		height: 52px;

		min-width: 52px;

		display: flex;

		align-items: center;
		justify-content: center;

		border-radius: 50%;

		background: var(--light-blue);

		color: #1687E8;

		font-size: 23px;

		box-shadow:
			0 4px 12px rgba(59, 167, 255, .15);
	}


	/* =========================================================
	   GELOMBANG
	   ========================================================= */

	.pmb-wave-item {

		margin-bottom: 12px;
	}


	.pmb-wave-button {

		width: 100%;

		min-height: 78px;

		display: flex;

		align-items: center;

		padding: 8px 20px 8px 10px;

		border: none;

		border-radius: 15px;

		background:
			linear-gradient(135deg,
				#10B981 0%,
				#0EAA92 55%,
				#00A58C 100%);

		color: #fff;

		box-shadow:
			0 7px 18px rgba(16, 185, 129, .25);

		cursor: pointer;

		text-align: left;

		transition: all .2s ease;
	}


	.pmb-wave-button:hover {

		transform: translateY(-2px);

		box-shadow:
			0 11px 25px rgba(16, 185, 129, .32);
	}


	.pmb-wave-button:focus {

		outline: none;
	}


	/* =========================================================
	   ICON KALENDER
	   ========================================================= */

	.pmb-wave-icon {

		width: 55px;
		height: 55px;

		min-width: 55px;

		display: flex;

		align-items: center;
		justify-content: center;

		margin-right: 15px;

		border-radius: 12px;

		background: rgba(255, 255, 255, .18);

		color: #fff;

		font-size: 28px;
	}


	/* =========================================================
	   GARIS PEMISAH
	   ========================================================= */

	.pmb-wave-divider {

		width: 1px;
		height: 38px;

		margin-right: 20px;

		background: rgba(255, 255, 255, .55);
	}


	/* =========================================================
	   NAMA GELOMBANG
	   ========================================================= */

	.pmb-wave-name {

		flex: 1;

		padding-right: 15px;

		color: #fff;

		font-size: 19px;

		font-weight: 700;

		line-height: 1.35;

		text-transform: uppercase;
	}


	/* =========================================================
	   PANAH
	   ========================================================= */

	.pmb-wave-arrow {

		width: 35px;
		height: 35px;

		min-width: 35px;

		display: flex;

		align-items: center;
		justify-content: center;

		border-radius: 50%;

		background: #fff;

		color: #10A98B;

		font-size: 17px;

		transition: transform .2s ease;
	}


	.pmb-wave-button:hover .pmb-wave-arrow {

		transform: translateX(4px);
	}


	/* =========================================================
	   DETAIL GELOMBANG
	   ========================================================= */

	.pmb-wave-detail {

		padding: 20px 22px;

		background: #fff;

		border: 1px solid #D9ECF8;

		border-top: none;

		border-radius: 0 0 14px 14px;

		box-shadow:
			0 5px 15px rgba(11, 94, 215, .08);
	}


	.pmb-wave-description {

		margin-bottom: 18px;

		color: #536B7B;

		font-size: 14px;

		line-height: 1.7;
	}


	/* =========================================================
	   BUTTON
	   ========================================================= */

	.pmb-wave-actions {

		display: flex;

		gap: 10px;

		flex-wrap: wrap;
	}


	.pmb-btn {

		display: inline-flex;

		align-items: center;
		justify-content: center;

		gap: 7px;

		padding: 10px 20px;

		border-radius: 8px;

		font-size: 14px;

		font-weight: 600;

		text-decoration: none !important;

		transition: all .2s ease;
	}


	.pmb-btn-daftar {

		background: #0B5ED7;

		color: #fff !important;

		box-shadow:
			0 4px 10px rgba(11, 94, 215, .2);
	}


	.pmb-btn-daftar:hover {

		background: #084DB5;

		color: #fff !important;

		transform: translateY(-1px);
	}


	.pmb-btn-masuk {

		background: #10B981;

		color: #fff !important;

		box-shadow:
			0 4px 10px rgba(16, 185, 129, .2);
	}


	.pmb-btn-masuk:hover {

		background: #0C9F70;

		color: #fff !important;

		transform: translateY(-1px);
	}


	/* =========================================================
	   PMB BELUM DIBUKA
	   ========================================================= */

	.pmb-alert-wrapper {

		margin-top: 10px;
	}


	.pmb-alert {

		display: flex;

		align-items: flex-start;

		gap: 18px;

		padding: 22px;

		background:
			linear-gradient(135deg,
				#FFF8DF,
				#FFF3CD,
				#FFE9A8);

		border-left: 5px solid #F59E0B;

		border-radius: 15px;

		box-shadow:
			0 5px 18px rgba(245, 158, 11, .10);
	}


	.pmb-alert-icon {

		width: 50px;
		height: 50px;

		min-width: 50px;

		display: flex;

		align-items: center;
		justify-content: center;

		border-radius: 50%;

		background: #F59E0B;

		color: #fff;

		font-size: 22px;
	}


	.pmb-alert-content {

		flex: 1;
	}


	.pmb-alert-content strong {

		display: block;

		margin-bottom: 7px;

		color: #856404;

		font-size: 18px;

		font-weight: 700;
	}


	.pmb-alert-content p {

		margin: 0 0 12px;

		color: #6B5A25;

		font-size: 14px;

		line-height: 1.6;
	}


	.pmb-hotline-text {

		margin-bottom: 10px;

		color: #705B20;

		font-size: 13px;
	}


	.btn-hotline-pmb {

		display: inline-flex !important;

		align-items: center;
		justify-content: center;

		gap: 8px;

		padding: 9px 18px;

		background: #28A745 !important;

		color: #fff !important;

		border: 1px solid #28A745 !important;

		border-radius: 7px;

		font-size: 14px;

		font-weight: 600;

		text-decoration: none !important;

		box-shadow:
			0 3px 8px rgba(40, 167, 69, .25);

		transition: all .2s ease;
	}


	.btn-hotline-pmb:hover {

		background: #218838 !important;

		border-color: #218838 !important;

		color: #fff !important;

		transform: translateY(-1px);
	}

	/* =========================================================
   LOGIN FORM
   ========================================================= */

	.pmb-login-form {
		position: fixed;

		top: 0;
		right: 0;

		width: 100%;
		max-width: 520px;

		height: 100vh;

		overflow-y: auto;

		box-sizing: border-box;

		/* Background putih sedikit transparan */
		background: rgba(255, 255, 255, 0.96);

		/* Garis tepi biru langit */
		border: 1px solid #87ceeb !important;

		/* Bayangan hitam tipis */
		box-shadow:
			0 0 8px rgba(0, 0, 0, 0.18),
			0 2px 12px rgba(0, 0, 0, 0.10);

		/* Sedikit rounded */
		border-radius: 8px;

		z-index: 10;
	}


	/* =========================================================
   CONTENT
   ========================================================= */

	.pmb-login-form .j-content {
		padding: 30px 35px;
	}


	/* =========================================================
   INPUT
   ========================================================= */

	.pmb-login-form input,
	.pmb-login-form select {
		border: 1px solid #87ceeb;
		transition: all 0.2s ease;
	}

	.pmb-login-form input:focus,
	.pmb-login-form select:focus {
		border-color: #4db8e8;
		box-shadow: 0 0 4px rgba(77, 184, 232, 0.35);
		outline: none;
	}


	/* =========================================================
   BUTTON
   ========================================================= */

	.pmb-login-form .btn-primary {
		border: 1px solid #55bde8;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
	}


	/* =========================================================
   SCROLLBAR
   ========================================================= */

	.pmb-login-form::-webkit-scrollbar {
		width: 5px;
	}

	.pmb-login-form::-webkit-scrollbar-track {
		background: transparent;
	}

	.pmb-login-form::-webkit-scrollbar-thumb {
		background: rgba(135, 206, 235, 0.7);
		border-radius: 10px;
	}


	/* =========================================================
	   FOOTER NOTE
	   ========================================================= */

	.pmb-footer-note {

		margin-top: 22px;

		color: #78909C;

		text-align: center;

		font-size: 12px;
	}

	/* =========================================================
   LOGIN PAGE
   ========================================================= */

	.pmb-login-page {
		width: 100%;
		min-height: 100vh;
		overflow-x: hidden;
	}

	.pmb-login-page>.card-block {
		padding: 0 !important;
	}

	.pmb-login-page .row {
		margin-left: 0;
		margin-right: 0;
	}

	/* =========================================================
   LEFT / CAROUSEL
   ========================================================= */

	.pmb-left {
		position: relative;
		min-height: 100vh;
		padding: 0 !important;
		overflow: hidden;
	}

	.pmb-carousel {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	.pmb-carousel .carousel-inner,
	.pmb-carousel .carousel-item {
		width: 100%;
		height: 100%;
	}

	.pmb-login-image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}


	/* =========================================================
   RIGHT / FORM
   ========================================================= */

	.pmb-right {
		min-height: 100vh;
		padding: 0 !important;

		background: rgba(248, 250, 253, 0.95);

		display: flex;
		align-items: flex-start;
		justify-content: center;

		overflow-y: auto;
	}

	.pmb-form-wrapper {
		width: 100%;
		max-width: 520px;
		min-height: 100vh;

		padding: 25px 30px;

		display: flex;
		justify-content: center;
	}

	.pmb-login-form {
		width: 100% !important;
		height: auto !important;

		position: relative !important;

		border: 0 !important;

		overflow: visible !important;

		opacity: 0.95;
	}

	.pmb-login-form .j-content {
		width: 100%;
	}


	/* =========================================================
   INPUT
   ========================================================= */

	.pmb-login-form input,
	.pmb-login-form select {
		max-width: 100%;
	}


	/* =========================================================
   TABLET
   ========================================================= */

	@media (max-width: 991.98px) {

		.pmb-left {
			min-height: 500px;
		}

		.pmb-carousel {
			height: 500px;
		}

		.pmb-right {
			min-height: auto;
		}

		.pmb-form-wrapper {
			min-height: auto;
			padding: 30px;
		}

	}


	/* =========================================================
   MOBILE
   ========================================================= */

	@media (max-width: 767.98px) {

		.pmb-left {
			min-height: 350px;
		}

		.pmb-carousel {
			height: 350px;
		}

		.pmb-login-image {
			object-fit: cover;
		}

		.pmb-form-wrapper {
			padding: 25px 20px;
		}

	}


	/* =========================================================
   SMALL MOBILE
   ========================================================= */

	@media (max-width: 480px) {

		.pmb-left {
			min-height: 280px;
		}

		.pmb-carousel {
			height: 280px;
		}

		.pmb-form-wrapper {
			padding: 20px 15px;
		}

	}

	/* =========================================================
   MASKOT
   ========================================================= */

	.pmb-mascot {
		position: absolute;
		z-index: 2;

		/* Ukuran mengikuti layar */
		width: clamp(180px, 15vw, 240px);
		height: auto;

		object-fit: contain;
		pointer-events: none;

		opacity: .92;

		filter: drop-shadow(0 12px 20px rgba(7, 59, 91, .10));
	}


	/* Maskot sebelah kiri */
	.pmb-mascot-left {
		left: clamp(-40px, calc(50vw - 660px), 125px);
		bottom: 25px;

		transform: rotate(-3deg);
	}


	/* Maskot sebelah kanan */
	.pmb-mascot-right {
		right: -4px;
		bottom: 25px;

		transform: scaleX(-1) rotate(-3deg);
	}

	.pmb-mascot-center {
		position: absolute;
		left: 50%;
		bottom: clamp(10px, -100vh, 25px);

		width: clamp(180px, 30vw, 250px);
		max-width: 90vw;
		height: auto;

		transform: translateX(-50%) scaleX(-1) rotate(-3deg);
		z-index: 1;
	}


	/* =========================================================
   TABLET / LAPTOP KECIL
   ========================================================= */

	@media (max-width: 1200px) {

		.pmb-mascot {
			width: 280px;
			height: 420px;
			opacity: .70;
		}

		.pmb-mascot-left {
			left: -100px;
		}

		.pmb-mascot-right {
			right: -100px;
		}
		.pmb-mascot-center {
			center: -100px;
		}
	}


	/* =========================================================
   MOBILE
   ========================================================= */

	@media (max-width: 768px) {

		.pmb-mascot {
			width: 210px;
			height: 320px;
			opacity: .25;
		}

		.pmb-mascot-left {
			left: -95px;
			bottom: 10px;
		}

		.pmb-mascot-right {
			right: -95px;
			bottom: 10px;
		}
		.pmb-mascot-center {
			center: -95px;
			bottom: 10px;
		}
	}


	/* =========================================================
   HP KECIL
   ========================================================= */

	@media (max-width: 576px) {

		.pmb-mascot {
			width: 170px;
			height: 260px;
			opacity: .16;
		}

		.pmb-mascot-left {
			left: -90px;
			bottom: 5px;
		}

		.pmb-mascot-right {
			right: -90px;
			bottom: 5px;
		}
		.pmb-mascot-center {
			center: -90px;
			bottom: 5px;
		}
	}


	/* =========================================================
	   TABLET
	   ========================================================= */

	@media (max-width: 768px) {

		.pmb-page {

			padding: 25px 14px 40px;
		}


		.pmb-container {

			padding: 30px 25px 35px;

			border-radius: 16px;
		}


		.pmb-title {

			font-size: 30px;
		}


		.pmb-title-year {

			font-size: 29px;
		}


		.pmb-school-name {

			font-size: 18px;
		}


		.pmb-selection-title {

			font-size: 19px;
		}


		.pmb-wave-name {

			font-size: 16px;
		}
	}


	/* =========================================================
	   MOBILE
	   ========================================================= */

	@media (max-width: 576px) {

		.pmb-page {

			padding: 15px 10px 30px;
		}


		.pmb-container {

			padding: 25px 15px 30px;

			border-radius: 13px;
		}


		.pmb-logo {

			height: 75px;
		}


		.pmb-school-name {

			font-size: 16px;
		}


		.pmb-title {

			font-size: 25px;

			line-height: 1.25;
		}


		.pmb-title-year {

			font-size: 24px;
		}


		.pmb-title-line {

			width: 70px;

			height: 6px;

			margin-top: 14px;
		}


		.pmb-selection-title {

			gap: 10px;

			font-size: 17px;
		}


		.pmb-selection-icon {

			width: 43px;
			height: 43px;

			min-width: 43px;

			font-size: 18px;
		}


		.pmb-wave-button {

			min-height: 65px;

			padding: 7px 10px 7px 7px;

			border-radius: 12px;
		}


		.pmb-wave-icon {

			width: 45px;
			height: 45px;

			min-width: 45px;

			margin-right: 10px;

			font-size: 22px;
		}


		.pmb-wave-divider {

			height: 30px;

			margin-right: 11px;
		}


		.pmb-wave-name {

			font-size: 13px;

			line-height: 1.3;
		}


		.pmb-wave-arrow {

			width: 29px;
			height: 29px;

			min-width: 29px;

			font-size: 14px;
		}


		.pmb-wave-detail {

			padding: 16px;
		}


		.pmb-wave-actions {

			flex-direction: column;
		}


		.pmb-btn {

			width: 100%;
		}


		.pmb-alert {

			gap: 12px;

			padding: 16px;
		}


		.pmb-alert-icon {

			width: 40px;
			height: 40px;

			min-width: 40px;

			font-size: 18px;
		}


		.pmb-alert-content strong {

			font-size: 15px;
		}


		.pmb-alert-content p {

			font-size: 13px;
		}


		.btn-hotline-pmb {

			width: 100%;
		}
	}