/* ===========================

   KEUNGGULAN SECTION

   =========================== */

.keunggulan-section {

	background: var(--background);

}



/* ===========================

   LEFT — IMAGE

   =========================== */

.keunggulan-img-wrapper {

	position: relative;

	padding: 50px 0px;

}



.keunggulan-img {

	width: 100%;

	height: auto;

	position: relative;

	z-index: 1;

	display: block;

	transition: transform 0.4s ease;

	animation: keunggulanFloat 5s ease-in-out infinite;

}



@keyframes keunggulanFloat {

	0%, 100% { transform: translateY(0); }

	50%       { transform: translateY(-10px); }

}



/* Dekoratif dot grid */

.keunggulan-dots {

	position: absolute;

	z-index: 0;

	width: 110px;

	height: 110px;

	background-image: radial-gradient(circle, #4A90D9 1.5px, transparent 1.5px);

	background-size: 14px 14px;

	opacity: 0.55;

}



.keunggulan-dots-tr {

	top: 0;

	right: 0;

}



.keunggulan-dots-bl {

	bottom: 0;

	left: 0;

	background-image: radial-gradient(circle, var(--background-green) 1.5px, transparent 1.5px);

	opacity: 0.25;

}



/* ===========================

   RIGHT — CONTENT

   =========================== */

.keunggulan-content {

	padding-left: 32px;

}



.keunggulan-judul {

	margin-top: 24px;

	display: inline-block;

	font-size: 18px;

	font-weight: 600;

	color: var(--background-green);

	margin-bottom: 14px;

	letter-spacing: 0.2px;

}



.keunggulan-deskripsi {

	font-size: 30px;

	font-weight: 700;

	color: var(--text-green);

	line-height: 1.4;

	margin-bottom: 28px;

	max-width: 420px;

}

.keunggulan-deskripsi ul,

.keunggulan-deskripsi ol {

	margin-left: 20px !important;

	text-align: left !important;

	margin-bottom: 12px;

}

.keunggulan-deskripsi ul { list-style: disc; }

.keunggulan-deskripsi ol { list-style: decimal; }

.keunggulan-deskripsi li { margin-bottom: 4px; }



/* ===========================

   TAGS / LIST

   =========================== */

.keunggulan-tags {

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 10px;

}



.keunggulan-tag {

	display: inline-flex;

	align-items: center;

	background: var(--background-list-unggulan);

	color: var(--background-brown-hover);

	border-radius: 50px;

	padding: 8px 20px;

	font-size: 13px;

	font-weight: 500;

	letter-spacing: 0.1px;

	transition: transform 0.25s ease, box-shadow 0.25s ease;

	cursor: default;

}





/* ===========================

   RESPONSIVE

   =========================== */

@media (max-width: 991.98px) {

	.keunggulan-section { padding: 60px 0; }



	.keunggulan-img-wrapper { padding: 30px 20px; }



	.keunggulan-content {

		padding-left: 0;

		padding-top: 0;

		text-align: center;

	}



	.keunggulan-judul    { font-size: 16px; }



	.keunggulan-deskripsi {

		font-size: 24px;

		max-width: 100%;

	}



	.keunggulan-tags { align-items: center; }

}



@media (max-width: 575.98px) {

	.keunggulan-section   { padding: 48px 0; }



	.keunggulan-img-wrapper { padding: 20px 0; }



	.keunggulan-deskripsi { font-size: 20px; margin-bottom: 20px; }

	.keunggulan-judul     { font-size: 16px; margin-bottom: 10px; }



	.keunggulan-tags { gap: 8px; }

	.keunggulan-tag  { font-size: 12px; padding: 7px 16px; }

}


/* ===========================
   LAYAR LEBAR — beri ruang untuk phone hero yang overflow ke bawah
   =========================== */
@media (min-width: 1920px) {
	.keunggulan-section { padding-top: 180px; }
}

@media (min-width: 3200px) {
	.keunggulan-section { padding-top: 60px; }
}