/* =========================================
   POP-UP ZONA INTEGRITAS MAN 1 MUBA
   ========================================= */

.mansa-welcome-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
	background: rgba(12, 28, 20, 0.72);
}

/* Kotak utama */
.mansa-welcome-dialog {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mansa-popup-width, 620px);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 42px 38px 34px;
	border: 1px solid #e9e8df;
	border-top: 6px solid #16734b;
	border-radius: 18px;
	background: #ffffff;
	color: #354139;
	text-align: center;
	box-shadow: 0 25px 75px rgba(0, 0, 0, 0.27);
	animation: mansaPopupEnter 0.35s ease-out;
}

/* Tombol X */
.mansa-welcome-close {
	position: absolute;
	top: 12px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f2f4f1;
	color: #526057;
	font-size: 27px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.mansa-welcome-close:hover {
	background: #e3e9e3;
	color: #16734b;
}

/* Logo di bagian atas */
.mansa-welcome-logo {
	margin: 0 auto 20px;
}

.mansa-welcome-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100px;
	max-height: 100px;
	margin: 0 auto;
	object-fit: contain;
}

/* Teks SELAMAT DATANG */
.mansa-welcome-eyebrow {
	margin: 0 0 12px;
	color: #b18a17;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 2.4px;
	line-height: 1.5;
}

/* Judul utama */
.mansa-welcome-dialog h2 {
	max-width: 480px;
	margin: 0 auto 18px;
	color: #16734b;
	font-size: clamp(22px, 3.2vw, 30px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.2px;
	overflow-wrap: anywhere;
}

/* Garis emas di bawah judul */
.mansa-welcome-dialog h2::after {
	display: block;
	width: 76px;
	height: 3px;
	margin: 19px auto 0;
	border-radius: 5px;
	background: #d5b54a;
	content: "";
}

/* Nama madrasah */
.mansa-welcome-message {
	max-width: 460px;
	margin: 0 auto 13px;
	color: #303b33;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.7;
	letter-spacing: 0.3px;
}

/* Kalimat penjelas */
.mansa-welcome-slogan {
	max-width: 455px;
	margin: 0 auto 17px;
	color: #5a655d;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.8;
}

/* Motto miring */
.mansa-welcome-motto {
	max-width: 455px;
	margin: 0 auto 25px;
	color: #526057;
	font-size: 14px;
	font-style: italic;
	line-height: 1.8;
}

/* Tombol hijau */
.mansa-welcome-button {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 13px 25px;
	border: 0;
	border-radius: 8px;
	background: #16734b;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(22, 115, 75, 0.15);
	transition: background 0.2s ease, transform 0.2s ease;
}

.mansa-welcome-button:hover {
	background: #105b3b;
	transform: translateY(-1px);
}

/* Fokus keyboard */
.mansa-welcome-close:focus-visible,
.mansa-welcome-button:focus-visible {
	outline: 3px solid #d5b54a;
	outline-offset: 3px;
}

/* Animasi masuk */
@keyframes mansaPopupEnter {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Tampilan ponsel */
@media (max-width: 600px) {
	.mansa-welcome-overlay {
		padding: 14px;
	}

	.mansa-welcome-dialog {
		max-height: calc(100vh - 28px);
		padding: 39px 22px 27px;
		border-radius: 15px;
	}

	.mansa-welcome-logo img {
		max-width: 82px;
		max-height: 82px;
	}

	.mansa-welcome-eyebrow {
		font-size: 11px;
		letter-spacing: 1.7px;
	}

	.mansa-welcome-dialog h2 {
		font-size: 23px;
	}

	.mansa-welcome-message {
		font-size: 14px;
	}

	.mansa-welcome-slogan,
	.mansa-welcome-motto {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mansa-welcome-dialog {
		animation: none;
	}

	.mansa-welcome-button {
		transition: none;
	}
}

.mansa-welcome-entering {
    margin: 0 0 10px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}