@media (max-width: 767.98px) {
		.d-flex.flex-md-row {
			flex-direction: column !important;
		}
		#infoPanel {
			max-width: 100vw !important;
			width: 100vw !important;
			min-width: 0 !important;
			border-left: none !important;
			border-top: 1px solid #dee2e6 !important;
			min-height: 220px;
		}
		#map {
			min-height: 300px !important;
			height: 40vh !important;
		}
	}
	@media (max-width: 575.98px) {
		#infoPanel {
			padding: 1rem 0.5rem !important;
		}
		.zonasi-table.table-modern th,
		.zonasi-table.table-modern td {
			padding: 6px 6px;
			font-size: 0.95rem;
		}
		.title-text {
			font-size: 1.2rem;
		}
	}
  #map { height: 100%; }
.mb-2 {
    font-weight: 700;       /* Bold */
    color: #000000;         /* Pink */
}

  /* Judul dinamis */
  .title-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: #06B6D4; /* pink */
    text-align: center;
    margin-bottom: 12px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
    font-family: 'Segoe UI', Arial, sans-serif;
  }

  /* Tombol Base Map */
  .base-btn { 
    transition: 0.3s; 
  }
  .base-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
  }

  /* Tabel Zonasi Modern */
  .zonasi-table.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    border-radius: 6px;
    overflow: hidden;
  }

  .zonasi-table.table-modern th,
  .zonasi-table.table-modern td {
    padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
  }

  .zonasi-table.table-modern thead th {
    text-align: center;
    color: #fff;
    background-color: #06B6D4; /* pink */
    font-weight: 700;
  }

  .zonasi-table.table-modern tbody tr:nth-child(odd) {
    background-color: #f8f9fa;
  }

  .zonasi-table.table-modern tbody tr:hover {
    background-color: #ffe6f7; /* soft pink highlight */
  }

  .zonasi-table.table-modern .section-header th {
    text-align: center;
    background-color: #fce4ec;
    color: #06B6D4;
    font-weight: 700;
  }
				/* =====================
				GALERI STYLE
			===================== */
			.about {
					padding: 60px 0;
					background: rgba(255, 255, 255, 0); /* putih transparan */
					border-radius: 15px;
					box-shadow: 0 4px 12px rgba(0,0,0,0.05);
					backdrop-filter: blur(6px); /* efek kaca (frosted glass) */
			}

			.section_title_container {
					margin-bottom: 40px;
			}

			.section_title {
					font-size: 2rem;
					font-weight: 700;
					color: #333;
					text-transform: uppercase;
					letter-spacing: 1px;
					margin: 0;
					position: relative;
					display: inline-block;
					padding-bottom: 10px;
			}
			.section_title::after {
					content: "";
					width: 60px;
					height: 3px;
					background: #0d6efd;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
			}

			/* =====================
				ITEM GALERI
			===================== */
			.about_item {
					background: rgba(255, 255, 255, 0.8); /* transparan 80% */
					border: 2px solid rgba(255, 255, 255, 0.3);
					border-radius: 15px;
					overflow: hidden;
					margin-bottom: 30px;
					box-shadow: 0 6px 15px rgba(0,0,0,0.1);
					backdrop-filter: blur(6px);
					transition: all 0.3s ease;
			}
			.about_item:hover {
					background: rgba(255, 255, 255, 0.95);
					border-color: rgba(0, 123, 255, 0.5);
					transform: translateY(-8px);
					box-shadow: 0 12px 25px rgba(0,0,0,0.2);
			}

			.about_item_image {
					overflow: hidden;
			}
			.about_item_image img {
					width: 100%;
					height: 220px;
					object-fit: cover;
					display: block;
					transition: transform 0.4s ease, filter 0.3s ease;
			}
			.about_item:hover .about_item_image img {
					transform: scale(1.1);
					filter: brightness(0.9);
			}

			/* Caption Title */
			.about_item_title {
					text-align: center;
					font-size: 1.1rem;
					font-weight: 600;
					padding: 15px 20px 10px;
					color: #222;
			}
			.about_item_title a {
					text-decoration: none;
					color: inherit;
					transition: color 0.3s ease;
			}
			.about_item_title a:hover {
					color: #0d6efd;
			}

			.about_item_text {
					font-size: 14px;
					color: #555;
					text-align: center;
					padding: 0 20px 20px;
			}

			/* =====================
				PAGINATION
			===================== */
			.pagination {
					display: inline-flex;
					padding-left: 0;
					list-style: none;
					border-radius: 8px;
					margin-top: 20px;
			}
			.pagination li {
					margin: 0 3px;
			}
			.pagination .page-link {
					border-radius: 8px;
					padding: 8px 14px;
					color: #007bff;
					border: 1px solid #dee2e6;
					transition: all 0.3s ease;
			}
			.pagination .page-link:hover {
					background-color: #007bff;
					color: #fff;
					border-color: #007bff;
			}
			.pagination .active .page-link {
					background-color: #007bff;
					border-color: #007bff;
					color: #fff;
			}

			/* =====================
				MODAL PREVIEW
			===================== */
			.modal-content {
					border-radius: 12px;
					border: none;
			}
			.modal-body img {
					box-shadow: 0 8px 25px rgba(0,0,0,0.6);
			}
			#modalCaption {
					font-size: 1.1rem;
					font-weight: 500;
					margin-top: 10px;
			}
			/* Legend box */
			.leaflet-html-legend {
				background: rgba(255, 255, 255, 0.95);
				border: 1px solid #ccc;
				border-radius: 8px;
				padding: 8px 10px;
				font-size: 13px;
				line-height: 1.4;
				box-shadow: 0 2px 8px rgba(0,0,0,0.15);

				max-height: 600px;    /* batas tinggi box */
				overflow-y: auto;     /* aktifkan scroll vertikal */
				overflow-x: hidden;   /* cegah scroll horizontal */
			}

			/* Scrollbar styling untuk browser berbasis WebKit (Chrome, Edge, Safari) */
			.leaflet-html-legend::-webkit-scrollbar {
				width: 10px;               /* lebar scrollbar */
			}

			.leaflet-html-legend::-webkit-scrollbar-track {
				background: #f1f1f1;        /* warna background track */
				border-radius: 8px;
			}

			.leaflet-html-legend::-webkit-scrollbar-thumb {
				background: #888;           /* warna batang scroll */
				border-radius: 8px;
			}

			.leaflet-html-legend::-webkit-scrollbar-thumb:hover {
				background: #555;           /* warna saat hover */
			}

			/* Untuk Firefox */
			.leaflet-html-legend {
				scrollbar-width: thin;          /* tipis */
				scrollbar-color: #888 #f1f1f1;  /* thumb dan track */
			}
			/* Elemen setiap simbol + label */
			.leaflet-html-legend .legend-element {
				display: flex;
				align-items: center;
				margin: 4px 0;   /* jarak antar baris */
			}

			/* Supaya kotak polygon/ikon agak jauh dari teks */
			.leaflet-html-legend .legend-element img {
				margin-right: 10px;   /* tambah jarak kanan */
				border: 1px solid #ccc;
				border-radius: 3px;
				background: #fff;
			}