/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
/* ═══════════════════════════════════════════
   public.css — SIPPTAN halaman publik
   Theme: light background, green accents, pastel cards
   WCAG 2.1 AA — contrast ratios verified for text sizes
═══════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
  /* --- Teks --- */
  --text-primary:   #15432a;
  --text-secondary: #4a6350;
  --text-muted:     #7a9580;
  --text-faint:     #a8c4b0;
  --text-on-dark:   #ffffff;        /* teks di atas bg gelap (hero, modal, tombol hijau) */
  --text-on-accent: #ffffff;        /* teks di atas tombol berwarna */
  --text-hero-caption: rgba(255,255,255,0.82); /* sub-teks hero */

  /* --- Aksen hijau --- */
  --green:          #16a34a;
  --green-light:    #4ade80;
  --green-dark:     #166534;
  --teal:           #0d9488;
  --green-glow-sm:  rgba(22,163,74,0.35);
  --green-glow-md:  rgba(22,163,74,0.40);
  --green-glow-lg:  rgba(22,163,74,0.50);
  --green-glow-55:  rgba(22,163,74,0.55);

  /* --- Tint hijau untuk bg subtle --- */
  --accent-tint-06: rgba(22,163,74,0.06);
  --accent-tint-07: rgba(22,163,74,0.07);
  --accent-tint-08: rgba(22,163,74,0.08);
  --accent-tint-09: rgba(22,163,74,0.09);
  --accent-tint-10: rgba(22,163,74,0.10);
  --accent-tint-12: rgba(22,163,74,0.12);
  --accent-tint-15: rgba(22,163,74,0.15);
  --accent-tint-18: rgba(22,163,74,0.18);

  /* --- Hero overlay --- */
  --hero-tag-color: var(--green-dark);
  --hero-tag-bg:    rgba(255,255,255,0.7);
  --hero-tag-border:rgba(22,163,74,0.30);
  --hero-dot-idle:  rgba(0,0,0,0.25);
  --hero-arrow-bg:  rgba(255,255,255,0.4);
  --hero-arrow-border:rgba(0,0,0,0.1);
  --hero-btn-outline-bg: rgba(0,0,0,0.05);
  --hero-btn-outline-border: rgba(0,0,0,0.2);

  /* --- Glass / card background --- */
  --glass-bg:       rgba(255,255,255,0.50);
  --glass-bg-md:    rgba(255,255,255,0.50);
  --nav-bg:         rgba(255,255,255,0.55);
  --dd-bg:          rgba(255,255,255,0.80);
  --card-bg-solid:  rgba(255,255,255,0.50);

  /* --- Border & shadow --- */
  --border:         rgba(22,163,74,0.15);
  --border-strong:  rgba(22,163,74,0.28);
  --shadow-sm:      0 1px 6px rgba(0,0,0,.06);
  --shadow-md:      0 4px 20px rgba(0,0,0,.09);
  --shadow-lg:      0 12px 40px rgba(0,0,0,.12);
}

/* ── Reset & Base ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Roboto',sans-serif;
  font-size:14px;line-height:1.6;
  color:var(--text-primary);
  overflow-x:hidden;
  background:transparent;
}

/* ════════════════════════════════════
   FIXED BACKGROUND
════════════════════════════════════ */
.pub-bg{
  position:fixed;inset:0;z-index:-2;
  background:url('/assets/background.webp') center/cover no-repeat fixed;
}
.pub-bg::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:rgba(255,255,255,0.38);
}

/* ════════════════════════════════════
   CONTENT WRAPPER
════════════════════════════════════ */
.pub-content{position:relative;z-index:1}

/* ════════════════════════════════════
   NAVBAR
════════════════════════════════════ */
.pub-nav-outer{
  position:fixed;top:0;left:0;width:100%;
  box-sizing:border-box;
  z-index:600;
  padding:12px 32px 0;
}
.pub-nav{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:flex-start;
  padding:12px;
  min-height:67px;
  background:var(--nav-bg);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--border);
  border-radius:19px;
  box-shadow:0 4px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .3s, box-shadow .3s;
}
.pub-nav.scrolled{
  background:var(--nav-bg);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 6px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);

}

/* Brand */
.pub-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;margin-right:20px}
.pub-brand-ico{
  width:43px;height:43px;
  background:#fff;
  border-radius:12px;display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(22,163,74,.35);
  overflow:hidden;flex-shrink:0;
}
.pub-brand-ico img{width:80%;height:80%;object-fit:contain}
.pub-brand-name{
  font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1;white-space:nowrap;
  color:var(--green-light);
  background:linear-gradient(135deg, #4ade80, #ff8800);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff);
}
.pub-brand-sub{font-size:10px;color:var(--text-primary);font-weight:700;letter-spacing:.2px;white-space:nowrap;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 2px 4px rgba(255,255,255,0.8)}

/* Nav links */
.pub-nav-links{display:flex;align-items:center;gap:2px}
.pub-nav-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:12px;
  font-size:14.5px;font-weight:700;
  color:var(--text-primary);
  background:none;border:none;cursor:pointer;
  font-family:inherit;transition:all .15s;
  white-space:nowrap;text-decoration:none;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 2px 4px rgba(255,255,255,0.8);
}
.pub-nav-btn:hover,.pub-nav-btn.active{
  background:var(--accent-tint-09);
  color:var(--green-dark);
}
.pub-nav-btn svg{width:9px;height:9px;transition:transform .2s;flex-shrink:0}
.pub-nav-btn.open svg{transform:rotate(180deg)}
.pub-nav-cta{
  margin-left:auto;padding:10px 22px;border-radius:12px;
  font-size:14.5px;font-weight:700;color:var(--text-on-accent);
  background:linear-gradient(135deg,var(--green),var(--teal));
  text-decoration:none;border:none;cursor:pointer;
  font-family:inherit;white-space:nowrap;
  box-shadow:0 2px 10px var(--green-glow-sm);
  transition:all .2s;
}
.pub-nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--green-glow-md)}

/* Dropdown wrapper */
.pub-nav-dd{position:relative}
.pub-dd-menu{
  display:none;
  position:fixed;
  transform:translateX(-50%);
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border);
  border-radius:16px;padding:8px;
  box-shadow:0 16px 48px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  min-width:180px;
}
@keyframes ddIn{
  from{opacity:0;transform:translateX(-50%) translateY(-8px)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)}
}
.pub-dd-menu.open{display:block;animation:ddIn .18s ease}
.pub-dd-section{
  font-size:8.5px;font-weight:800;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.8px;
  padding:6px 10px 4px;
}
.pub-dd-item{
  display:block;padding:8px 12px;border-radius:9px;
  font-size:11.5px;font-weight:600;
  color:var(--text-secondary);
  text-decoration:none;transition:all .13s;
  white-space:nowrap;
}
.pub-dd-item:hover{background:var(--accent-tint-09);color:var(--green-dark)}
.pub-dd-item.active{background:var(--accent-tint-12);color:var(--green)}
.pub-dd-group-sep{height:1px;background:var(--border);margin:4px 10px;}

/* ─── Hamburger button ─── */
.pub-ham{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:40px;height:40px;flex-shrink:0;
  background:var(--glass-bg);border:1px solid var(--border);
  border-radius:10px;cursor:pointer;padding:9px;margin-left:8px;
}
.pub-ham span{
  display:block;width:18px;height:2px;border-radius:2px;
  background:var(--text-primary);transition:transform .25s,opacity .2s;
}
.pub-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pub-ham.open span:nth-child(2){opacity:0}
.pub-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── Mobile overlay ─── */
.pub-mob-overlay{
  display:none;position:fixed;inset:0;z-index:610;
  background:rgba(0,0,0,.35);backdrop-filter:blur(3px);
}
.pub-mob-overlay.open{display:block}

/* ─── Mobile nav drawer ─── */
.pub-mob-nav{
  position:fixed;top:0;right:0;width:min(300px,88vw);height:100dvh;
  z-index:620;overflow-y:auto;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-left:1px solid var(--border);
  box-shadow:-4px 0 32px rgba(0,0,0,.15);
  visibility:hidden;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
}
.pub-mob-nav.open{visibility:visible;transform:translateX(0)}
.pub-mob-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1;
  background:rgba(255,255,255,.97);backdrop-filter:blur(24px);
}
.pub-mob-title{font-size:13px;font-weight:800;color:var(--text-primary);letter-spacing:-.2px}
.pub-mob-close{
  background:none;border:none;cursor:pointer;
  width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;
  font-size:20px;color:var(--text-secondary);font-family:inherit;
  transition:all .15s;line-height:1;
}
.pub-mob-close:hover{background:var(--accent-tint-09);color:var(--green-dark)}
.pub-mob-body{padding:12px 12px 0}
.pub-mob-section{margin-bottom:4px}
.pub-mob-lbl{
  font-size:9px;font-weight:800;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.8px;padding:8px 10px 4px;
}
.pub-mob-link{
  display:block;padding:9px 12px;border-radius:9px;
  font-size:13px;font-weight:600;color:var(--text-secondary);
  text-decoration:none;transition:all .13s;
}
.pub-mob-link:hover{background:var(--accent-tint-09);color:var(--green-dark)}
.pub-mob-sep{height:1px;background:var(--border);margin:6px 10px}
.pub-mob-cta{
  display:block;margin:16px 12px 8px;padding:12px;
  border-radius:12px;font-size:14px;font-weight:700;
  color:var(--text-on-accent);text-align:center;text-decoration:none;
  background:linear-gradient(135deg,var(--green),var(--teal));
  box-shadow:0 2px 10px var(--green-glow-sm);transition:all .2s;
}
.pub-mob-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--green-glow-md)}


.pub-dd-2col{display:none;grid-template-columns:1fr 1fr;gap:0;min-width:360px}
.pub-dd-2col.open{display:grid}

/* ════════════════════════════════════
   GLASS / CARD VARIANTS
════════════════════════════════════ */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  min-width: 0;
}
.glass-md{
  background:var(--glass-bg-md);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  min-width: 0;
}
.glass-dark{
  background:var(--accent-tint-07);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border-strong);
  border-radius:20px;
  min-width: 0;
}

/* ════════════════════════════════════
   PASTEL CARD VARIANTS
   Use alongside .glass for colour-coded cards
════════════════════════════════════ */
.card-pink   {background:rgba(252,231,243,0.50);border-color:rgba(251,207,232,0.60)}
.card-yellow {background:rgba(254,249,195,0.50);border-color:rgba(253,230,138,0.60)}
.card-blue   {background:rgba(219,234,254,0.50);border-color:rgba(191,219,254,0.60)}
.card-purple {background:rgba(237,233,254,0.50);border-color:rgba(221,214,254,0.60)}
.card-orange {background:rgba(255,237,213,0.50);border-color:rgba(254,215,170,0.60)}
.card-teal   {background:rgba(204,251,241,0.50);border-color:rgba(153,246,228,0.60)}
.card-green  {background:rgba(220,252,231,0.50);border-color:rgba(187,247,208,0.60)}

.card-pink   .k-val,.card-pink   .pub-stat-val{color:#9d174d}
.card-yellow .k-val,.card-yellow .pub-stat-val{color:#854d0e}
.card-blue   .k-val,.card-blue   .pub-stat-val{color:#1e40af}
.card-purple .k-val,.card-purple .pub-stat-val{color:#5b21b6}
.card-orange .k-val,.card-orange .pub-stat-val{color:#9a3412}
.card-teal   .k-val,.card-teal   .pub-stat-val{color:#134e4a}
.card-green  .k-val,.card-green  .pub-stat-val{color:#15432a}

/* ════════════════════════════════════
   HERO — full-height, looping slider
   Text stays white — dark overlay is kept
════════════════════════════════════ */
.pub-hero{
  min-height:100vh;
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;
  width:100%;
}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  background-size:cover;background-position:center;
  transition:opacity 1.2s ease;
}
.hero-slide.active{opacity:1}


.hero-inner{
  position:relative;z-index:2;
  width:100%;
  max-width:1200px;margin:0 auto;
  padding:140px 32px 36px;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;
}
.hero-text{
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border);
  border-radius:19px;
  box-shadow:0 4px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  padding:32px;
  max-width:400px;
  flex-shrink:0;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 14px;border-radius:20px;
  background:var(--nav-bg);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--hero-tag-border);
  font-size:10.5px;font-weight:700;color:var(--hero-tag-color);
  text-transform:uppercase;letter-spacing:.8px;
  margin-bottom:18px;
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
}
.hero-tag span{width:6px;height:6px;border-radius:50%;background:var(--hero-tag-color);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hero-h1{
  font-size:clamp(1.8rem,3vw,2.2rem);
  font-weight:800;color:var(--text-primary);
  line-height:1.2;letter-spacing:-.5px;
  margin-bottom:18px;
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.8))
}
.hero-h1 em{
  color:var(--green-light);font-style:normal;
  background:linear-gradient(135deg, #00a73d, #ff8800);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-caption{
  font-size:.95rem;color:var(--text-primary);
  line-height:1.6;margin-bottom:28px;max-width:100%;
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.8))
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{
  padding:13px 28px;border-radius:12px;
  font-size:13px;font-weight:700;color:var(--text-on-accent);
  background:linear-gradient(135deg,var(--green),var(--teal));
  border:none;cursor:pointer;text-decoration:none;
  font-family:inherit;transition:all .2s;
  box-shadow:0 4px 20px var(--green-glow-md);
  display:inline-flex;align-items:center;gap:7px;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--green-glow-55)}
.btn-outline{
  padding:13px 28px;border-radius:12px;
  font-size:13px;font-weight:700;color:var(--text-secondary);
  background:var(--hero-btn-outline-bg);
  border:1.5px solid var(--hero-btn-outline-border);
  cursor:pointer;text-decoration:none;
  font-family:inherit;transition:all .2s;
  backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:7px;
}
.btn-outline:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.hero-imgcard{
  border-radius:20px;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.20);
  box-shadow:0 32px 80px rgba(0,0,0,.35);
  aspect-ratio:4/3;width:100%;object-fit:cover;
  transition:opacity .8s ease;
}
.hero-dots{
  display:flex;gap:8px;
  align-self:flex-end;
  padding-bottom:4px;
  flex-shrink:0;
}
.hero-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--hero-dot-idle);cursor:pointer;
  transition:all .3s ease;
}
.hero-dot.active{background:var(--green);width:22px;border-radius:4px}
.hero-arrow{
  position:absolute;top:50%;z-index:3;
  transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:var(--hero-arrow-bg);
  border:1px solid var(--hero-arrow-border);
  color:var(--text-primary);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);transition:all .2s;
}

.hero-arrow:hover{background:rgba(0,0,0,.08)}
.hero-arrow.prev{left:24px}
.hero-arrow.next{right:24px}

/* ════════════════════════════════════
   SECTION LAYOUT
════════════════════════════════════ */
.pub-section{max-width:1200px;margin:0 auto;padding:72px 32px}
.pub-section-sm{max-width:1200px;margin:0 auto;padding:48px 32px}
.section-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 13px;border-radius:20px;
  background:var(--accent-tint-10);
  border:1px solid var(--border-strong);
  font-size:10.5px;font-weight:700;color:var(--green);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;
}
.section-title{
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:800;color:var(--text-primary);line-height:1.15;
  margin-bottom:10px;letter-spacing:-.3px;
}
.section-title em{
  color:var(--green-light);font-style:normal;
  background:linear-gradient(135deg, #4ade80, #ff8800);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.section-sub{font-size:.95rem;color:var(--text-secondary);line-height:1.7;max-width:560px}

/* ════════════════════════════════════
   SUB-HERO (halaman UPT/program)
════════════════════════════════════ */
.sub-hero{
  max-width:1200px;margin:0 auto;
  padding:100px 32px 56px;
  display:grid;grid-template-columns:1fr 400px;
  gap:48px;align-items:center;
}
.sub-hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 14px;border-radius:20px;
  background:var(--accent-tint-10);
  border:1px solid var(--border-strong);
  font-size:10.5px;font-weight:700;color:var(--green);
  letter-spacing:.5px;margin-bottom:16px;
}
.sub-hero h1{
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:800;color:var(--text-primary);line-height:1.1;
  letter-spacing:-.4px;margin-bottom:14px;
}
.sub-hero h1 em{
  font-style:normal;
  background:linear-gradient(135deg, #4ade80, #ff8800);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.sub-hero-desc{
  font-size:.95rem;color:var(--text-secondary);
  line-height:1.8;margin-bottom:24px;
}
.sub-hero-stats{display:flex;gap:24px;flex-wrap:wrap}
.sub-stat-val{font-size:1.9rem;font-weight:800;color:var(--green);line-height:1}
.sub-stat-lbl{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.sub-hero-imgwrap{border-radius:20px;overflow:hidden}
.sub-hero-img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:20px;display:block;
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-lg);
}

/* ════════════════════════════════════
   KPI CARDS
════════════════════════════════════ */
.pub-krow{display:grid;gap:12px}
.pub-k4{grid-template-columns:repeat(4,1fr)}
.pub-k3{grid-template-columns:repeat(3,1fr)}
.pub-k2{grid-template-columns:repeat(2,1fr)}
.pub-kcard{padding:20px 22px;position:relative;overflow:hidden}
.pub-kcard .k-acc{position:absolute;top:0;left:0;right:0;height:2px;border-radius:18px 18px 0 0}
.pub-kcard .k-lbl{font-size:9.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px;margin-top:4px}
.pub-kcard .k-val{font-size:1.9rem;font-weight:800;color:var(--text-primary);line-height:1;letter-spacing:-1px}
.pub-kcard .k-sub{font-size:10.5px;margin-top:6px;color:var(--text-muted)}
.pub-kcard .k-sub.up{color:var(--green)}
.pub-kcard .k-ico{position:absolute;top:18px;right:16px;font-size:1.4rem;opacity:.5}

/* Stat pill cards */
.pub-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pub-stat-card{padding:16px 18px;text-align:center}
.pub-stat-val{font-size:1.6rem;font-weight:800;color:var(--text-primary);line-height:1}
.pub-stat-lbl{font-size:9.5px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:5px}
.pub-stat-trend{font-size:10px;color:var(--green);margin-top:3px;font-weight:700}

/* ════════════════════════════════════
   CHART GRIDS
════════════════════════════════════ */
.pub-g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pub-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pub-chart-title{font-size:12.5px;font-weight:700;color:var(--text-primary);margin-bottom:3px}
.pub-chart-sub{font-size:10.5px;color:var(--text-muted);margin-bottom:14px}
.pub-chart-wrap{position:relative;width:100%;min-width:0;max-width:100%}

/* Progress bars */
.pub-prow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pub-plbl{font-size:10.5px;font-weight:600;color:var(--text-secondary);width:130px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-pwrap{flex:1;height:6px;background:var(--accent-tint-12);border-radius:3px;overflow:hidden}
.pub-pbar{height:100%;border-radius:3px;transition:width .7s ease}
.pub-pval{font-size:10.5px;font-weight:700;color:var(--text-muted);width:38px;text-align:right}

/* ════════════════════════════════════
   VIDEO CARDS (Testimoni)
════════════════════════════════════ */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.video-card{border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow-md)}
.video-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.video-thumb-wrap{position:relative;aspect-ratio:16/9;overflow:hidden}
.video-thumb{width:100%;height:100%;object-fit:cover;display:block}
.video-overlay{position:absolute;inset:0;background:rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;transition:background .2s}
.video-card:hover .video-overlay{background:rgba(0,0,0,.12)}
.video-play-btn{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transition:transform .2s,background .2s;
}
.video-card:hover .video-play-btn{transform:scale(1.12);background:#fff}
.video-play-btn svg{width:20px;height:20px;fill:#16a34a;margin-left:3px}
.video-info{padding:14px 16px;background:rgba(255,255,255,0.50);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
.video-info-title{font-size:13px;font-weight:700;color:var(--text-primary);line-height:1.4}
.video-info-meta{font-size:10.5px;color:var(--text-muted);margin-top:4px}

/* Video Modal */
#videoModal{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.82);align-items:center;justify-content:center}
#videoModal.open{display:flex}
.video-modal-inner{width:min(820px,90vw);position:relative}
.video-modal-close{position:absolute;top:-40px;right:0;background:none;border:none;color:var(--text-on-dark);font-size:22px;cursor:pointer;padding:6px;line-height:1}
.video-modal-frame{width:100%;aspect-ratio:16/9;border-radius:14px;border:none;display:block}

/* ════════════════════════════════════
   PROGRAM KAMPUS CARDS
════════════════════════════════════ */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.prog-card{padding:22px 20px;text-align:center;transition:transform .2s,box-shadow .2s}
.prog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.prog-icon{font-size:2rem;margin-bottom:12px;display:flex;justify-content:center;align-items:center;min-height:2.5rem}
.prog-icon img{width:2.5rem;height:2.5rem;object-fit:contain}
.prog-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.prog-desc{font-size:11px;color:var(--text-secondary);line-height:1.6}

/* ════════════════════════════════════
   ALUMNI SEKTOR
════════════════════════════════════ */
.sector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.sector-card{padding:18px;text-align:center;transition:transform .2s}
.sector-card:hover{transform:translateY(-3px)}
.sector-pct{font-size:2.2rem;font-weight:800;color:var(--green);line-height:1}
.sector-name{font-size:11.5px;color:var(--text-secondary);font-weight:600;margin-top:7px}

/* ════════════════════════════════════
   EKSPOR CARDS (Petani)
════════════════════════════════════ */
.ekspor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.ekspor-card{padding:20px;transition:transform .2s}
.ekspor-card:hover{transform:translateY(-3px)}
.ekspor-flag{font-size:2rem;margin-bottom:8px}
.ekspor-country{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.ekspor-komod{font-size:11px;color:var(--text-secondary)}
.ekspor-vol{font-size:11px;color:var(--green);font-weight:700;margin-top:5px}

/* ════════════════════════════════════
   KURIKULUM TABS
════════════════════════════════════ */
.kur-tabs{display:flex;gap:6px;margin-bottom:24px;flex-wrap:wrap}
.kur-tab{
  padding:8px 18px;border-radius:10px;
  font-size:12.5px;font-weight:700;
  border:1.5px solid var(--border-strong);
  background:transparent;color:var(--text-secondary);
  cursor:pointer;transition:all .15s;font-family:inherit;
  text-decoration:none;display:inline-flex;align-items:center;
}
.kur-tab:hover{background:var(--accent-tint-08);color:var(--green-dark)}
.kur-tab.active{background:var(--accent-tint-12);border-color:var(--border-strong);color:var(--green)}
.kur-item{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:14px;margin-bottom:10px;
  transition:transform .15s;
}
.kur-item:hover{transform:translateX(4px)}
.kur-item-icon{font-size:1.6rem;flex-shrink:0;width:44px;text-align:center}
.kur-item-body{flex:1}
.kur-item-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:3px;display:flex;align-items:center;gap:8px}
.kur-badge{padding:2px 8px;border-radius:6px;font-size:9.5px;font-weight:700}
.kur-item-meta{font-size:11px;color:var(--text-muted)}
.kur-item-end{text-align:right;flex-shrink:0}
.kur-sks{font-size:1.5rem;font-weight:800;color:var(--text-primary);line-height:1}
.kur-sks-lbl{font-size:9px;color:var(--text-faint);text-transform:uppercase}

/* MBKM Item */
.mbkm-card{padding:22px;margin-bottom:12px;transition:transform .2s}
.mbkm-card:hover{transform:translateX(4px)}
.mbkm-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.mbkm-icon{font-size:2rem;flex-shrink:0}
.mbkm-title-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.mbkm-title{font-size:13.5px;font-weight:800;color:var(--text-primary)}
.mbkm-status{padding:2px 9px;border-radius:6px;font-size:9.5px;font-weight:700}
.mbkm-dur{font-size:10px;color:var(--text-faint)}
.mbkm-desc{font-size:12.5px;color:var(--text-secondary);line-height:1.7}
.mbkm-mitra{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.mitra-tag{padding:3px 10px;border-radius:6px;background:var(--accent-tint-08);font-size:10px;font-weight:600;color:var(--text-secondary)}

/* Bahan Ajar item */
.ba-item{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:14px 18px;border-radius:14px;margin-bottom:8px;transition:transform .15s}
.ba-item:hover{transform:translateX(4px)}
.ba-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:1.4rem}
.ba-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:3px}
.ba-body{flex:1;min-width:0}
.ba-meta{font-size:10.5px;color:var(--text-muted)}
.ba-right{text-align:right;flex-shrink:0}
.ba-type{display:block;padding:2px 9px;border-radius:6px;font-size:10px;font-weight:700;margin-bottom:4px}
.ba-year{font-size:10px;color:var(--text-faint)}
.ba-link-hint{font-size:10px;color:var(--green);font-weight:700;margin-top:5px}
a.ba-item-link{text-decoration:none;color:inherit;cursor:pointer}
a.ba-item-link:hover{transform:translateX(4px)}

/* Kurikulum Accordion (prodi list) */
.kur-accordion{border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;margin-bottom:10px;background:rgba(255,255,255,.025)}
.kur-acc-head{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;list-style:none;user-select:none;transition:background .15s}
.kur-acc-head:hover{background:rgba(255,255,255,.04)}
.kur-acc-head::-webkit-details-marker{display:none}
.kur-acc-title{flex:1;font-size:.9rem;font-weight:700;color:var(--text-primary)}
.kur-acc-info{font-size:.75rem;color:var(--text-muted);white-space:nowrap}
.kur-acc-chevron{font-size:.9rem;color:var(--text-faint);transition:transform .2s;line-height:1;flex-shrink:0}
details.kur-accordion[open] .kur-acc-chevron{transform:rotate(180deg)}
.kur-acc-body{padding:0 18px 16px;border-top:1px solid rgba(255,255,255,.06)}
.kur-acc-upt{display:flex;flex-wrap:wrap;gap:5px;padding:10px 0 14px}

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
.pub-footer-outer{
  max-width:1200px;margin:0 auto;
  padding:0 32px 40px;
}
.pub-footer{padding:36px 36px 24px;border-radius:20px}
.pub-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:24px}
.footer-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-logo-ico{width:34px;height:34px;background:linear-gradient(135deg,var(--green),var(--teal));border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.footer-logo-ico svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.footer-brand{font-size:14px;font-weight:800;color:var(--text-primary);letter-spacing:-.3px}
.footer-desc{font-size:11.5px;color:var(--text-secondary);line-height:1.7;max-width:220px}
.footer-heading{font-size:10px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}
.footer-link{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);text-decoration:none;margin-bottom:9px;transition:color .14s;line-height:1.4}
.footer-link:hover{color:var(--green)}
.footer-link-ico{width:14px;height:14px;flex-shrink:0;opacity:.55}
.footer-divider{border:none;border-top:1px solid var(--border);margin-bottom:14px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--text-faint);gap:12px;flex-wrap:wrap}
.footer-bottom a{color:var(--green);text-decoration:none;font-weight:700}
.footer-socials{display:flex;gap:7px}
.footer-social{
  width:30px;height:30px;border-radius:8px;
  background:var(--accent-tint-09);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:all .15s;
}
.footer-social:hover{background:var(--accent-tint-18);transform:translateY(-2px)}
.footer-social svg{width:13px;height:13px;fill:var(--text-secondary)}

/* Disclaimer note */
.pub-note{
  font-size:10.5px;color:var(--text-muted);
  font-style:italic;padding:6px 0;margin-bottom:16px;
  border-left:2px solid var(--border-strong);
  padding-left:10px;
}

/* Scope switcher (Polbangtan vs SMK PP) */
.pub-scope-bar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.pub-scope-btn{
  padding:7px 20px;border-radius:20px;
  border:1.5px solid var(--border-strong);
  background:var(--glass-bg);
  color:var(--text-secondary);
  font-size:12.5px;font-weight:700;
  cursor:pointer;transition:all .18s;
  font-family:inherit;line-height:1;
}
.pub-scope-btn:hover{border-color:var(--green);color:var(--green-dark);background:var(--accent-tint-06)}
.pub-scope-btn.active{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 2px 10px rgba(22,163,74,.30)}

/* ════════════════════════════════════
   STATS TABS & EXPORT BAR
════════════════════════════════════ */
.stats-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.stats-tabbar{display:flex;gap:6px;flex-wrap:wrap}
.stats-tab{
  padding:7px 16px;border-radius:20px;
  border:1.5px solid var(--border-strong);
  background:var(--glass-bg);
  color:var(--text-secondary);
  font-size:12.5px;font-weight:700;
  cursor:pointer;transition:all .18s;
  font-family:inherit;line-height:1;
}
.stats-tab:hover{border-color:var(--green);color:var(--green-dark);background:var(--accent-tint-06)}
.stats-tab.active{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 2px 10px rgba(22,163,74,.30)}
.stats-export-bar{display:flex;gap:8px}
.stats-export-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:10px;
  border:1.5px solid var(--border);
  background:var(--glass-bg);
  color:var(--text-base);
  font-size:11.5px;font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s,border-color .15s;
}
.stats-export-btn:hover{background:rgba(22,163,74,.10);border-color:var(--green);color:var(--green-dark)}
.stats-export-btn:disabled{cursor:not-allowed;opacity:.48;pointer-events:none}
.pub-export-bar{display:flex;gap:8px;margin-top:12px}
.pub-export-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:10px;
  border:1.5px solid var(--border);
  background:var(--glass-bg);
  color:var(--text-base);
  font-size:11.5px;font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s,border-color .15s;
}
.pub-export-btn:hover{background:rgba(22,163,74,.10);border-color:var(--green);color:var(--green-dark)}
.stats-panel{display:none}
.stats-panel.active{display:block}

/* Field tags — data schema highlight strip */
.field-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  margin-bottom:16px;padding:10px 14px;
  background:var(--accent-tint-06);
  border-radius:10px;border:1px solid var(--border);
}
.field-tag-label{
  font-size:9px;font-weight:800;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.6px;margin-right:2px;flex-shrink:0;
}
.field-tag{
  padding:2px 9px;border-radius:10px;
  font-size:10px;font-weight:600;
  background:rgba(255,255,255,0.72);
  border:1px solid var(--border);
  color:var(--text-secondary);
}

@media(max-width:768px){
  .stats-toolbar{flex-direction:column;align-items:flex-start}
  .stats-export-bar{align-self:flex-start}
}
@media(max-width:640px){
  .stats-tab{font-size:11.5px;padding:6px 12px}
}

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media(max-width:1024px){
  .sub-hero{grid-template-columns:1fr;gap:28px}
  .hero-inner .hero-imgcard,.sub-hero-imgwrap{display:none}
  .pub-k4{grid-template-columns:repeat(2,1fr)}
  .pub-g2,.pub-g3{grid-template-columns:1fr}
  .pub-footer-grid{grid-template-columns:1fr 1fr;gap:20px}
  .pub-nav-links{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;padding-bottom:4px}
  .pub-nav-links::-webkit-scrollbar{height:4px}
  .pub-nav-links::-webkit-scrollbar-thumb{background:rgba(22,163,74,.3);border-radius:4px}
}
@media(max-width:768px){
  /* Hamburger replaces nav links on mobile */
  .pub-ham{display:flex}
  .pub-nav-links{display:none}
  /* Hero: stack dots above text, right-align */
  .hero-inner{flex-direction:column;align-items:flex-end;padding-bottom:24px}
  .hero-text{max-width:100%}
}
@media(max-width:640px){
  .pub-nav-outer{padding:8px 16px 0}
  .pub-section,.pub-section-sm{padding:48px 16px}
  .hero-inner,.sub-hero{padding:100px 16px 48px}
  .pub-k4,.pub-k3{grid-template-columns:1fr 1fr}
  .pub-stats-row{grid-template-columns:repeat(2,1fr)}
  .pub-footer-outer{padding:0 16px 32px}
  .pub-footer-grid{grid-template-columns:1fr}
}

/* Regulasi Page */
.reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 24px; margin-top: 32px; }
@media (max-width: 768px) { .reg-grid { grid-template-columns: 1fr; } }

.reg-card { 
  background: var(--glass-bg); 
  backdrop-filter: var(--glass-blur); 
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bdr); 
  border-radius: 20px; 
  padding: 24px;
}
.reg-card-title { font-size: 18px; font-weight: 800; color: var(--p700); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.reg-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.reg-link { 
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 12px; 
  background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.5);
  text-decoration: none; color: var(--txt); transition: all 0.2s;
}
.reg-link:hover { background: #fff; transform: translateX(5px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); color: var(--p700); }
.reg-link-icon { color: var(--p600); margin-top: 2px; }
.reg-link-label { font-size: 14px; font-weight: 600; line-height: 1.4; }
/* ═══════════════════════════════════════════
   dashboard.css — SIPPTAN Dashboard (Sidebar Layout)
═══════════════════════════════════════════ */

:root {
  --d-txt:    #052e16;
  --d-soft:   #166534;
  --d-muted:  #6b7280;

  --d-g900: #052e16; --d-g800: #166534; --d-g700: #15803d;
  --d-g600: #16a34a; --d-g500: #22c55e; --d-g200: #bbf7d0;
  --d-g100: #dcfce7; --d-g50:  #f0fdf4;

  --d-teal:   #0d9488;
  --d-amber:  #d97706;
  --d-blue:   #2563eb;
  --d-purple: #9333ea;
  --d-rose:   #e11d48;

  --d-bg:   #f5f3ee;
  --d-surf: rgba(255,255,255,0.50);
  --d-bdr:  rgba(255,255,255,0.50);
  --d-bdr2: rgba(220,215,200,0.70);

  --d-glass: blur(24px) saturate(180%);
  --d-sh:  0 4px 16px rgba(5,46,22,.08), 0 1px 4px rgba(5,46,22,.05);
  --d-sh2: 0 8px 32px rgba(5,46,22,.13), 0 2px 8px rgba(5,46,22,.07);

  /* Sidebar */
  --d-side-w: 240px;
  --d-side-bg: #1b5e3a;
  --d-side-bg-2: #164d30;
  --d-side-txt: #e8f0ea;
  --d-side-muted: #9fc3a9;
  --d-topbar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100vh;
}
.d-app {
  background: url('/assets/background.webp') center/cover fixed;
  font-family: 'Roboto', sans-serif;
  color: var(--d-txt);
  font-size: 13px;
  line-height: 1.5;
}
.d-app::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background: rgba(245,243,238,0.40);
}

/* ════════════════════════════════════
   APP SHELL
════════════════════════════════════ */
.d-app {
  display: grid;
  grid-template-columns: var(--d-side-w) 1fr;
  min-height: 100vh;
}

/* ════════════════════════════════════
   SIDEBAR
════════════════════════════════════ */
.d-side {
  position: sticky; top: 0;
  height: 100vh;
  background: var(--d-side-bg);
  color: var(--d-side-txt);
  display: flex; flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,0.10);
}

.d-side-top {
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.d-side-brand {
  display: flex; align-items: center; gap: 10px; flex: 1;
  padding: 18px 18px 14px;
  text-decoration: none; color: inherit;
}
.d-side-close {
  display: none;
  width: 32px; height: 32px; flex-shrink: 0; margin-right: 12px;
  border-radius: 8px; border: none; background: rgba(255,255,255,.1);
  color: var(--d-side-txt); cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .15s;
}
.d-side-close:hover { background: rgba(255,255,255,.18); }
.d-side-logo {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  overflow: hidden;
}
.d-side-logo img { width: 80%; height: 80%; object-fit: contain; }
.d-side-brand-txt { line-height: 1.2; min-width: 0; }
.d-side-brand-name {
  font-size: 11px; font-weight: 800;
  letter-spacing: .4px; color: #fff;
}
.d-side-brand-sub {
  font-size: 10px; font-weight: 500;
  color: var(--d-side-muted); margin-top: 2px;
}

.d-side-menu {
  flex: 1; overflow-y: auto;
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.d-side-menu::-webkit-scrollbar { width: 6px; }
.d-side-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

.d-mitem {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--d-side-txt);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  cursor: pointer; background: none; border: none;
  font-family: inherit; text-align: left; width: 100%;
  transition: background .15s;
}
.d-mitem:hover { background: rgba(255,255,255,.06); }
.d-mitem.on {
  background: rgba(255,255,255,.12);
  color: #fff; font-weight: 600;
}
.d-mitem svg { flex-shrink: 0; opacity: .85; }
.d-mitem.on svg { opacity: 1; }
.d-mitem .d-mcaret {
  margin-left: auto; transition: transform .2s;
  opacity: .6;
}
.d-mitem.expanded .d-mcaret { transform: rotate(180deg); }

.d-msub {
  display: none; flex-direction: column;
  padding: 2px 0 6px 44px;
  gap: 2px;
}
.d-msub.open { display: flex; }
.d-msub a {
  display: flex; align-items: center; gap: 10px;
  color: var(--d-side-muted);
  text-decoration: none;
  font-size: 12px; font-weight: 500;
  padding: 6px 10px; border-radius: 6px;
  transition: all .15s;
}
.d-msub a svg { opacity: .7; flex-shrink: 0; }
.d-msub a:hover { color: #fff; background: rgba(255,255,255,.06); }
.d-msub a:hover svg, .d-msub a.on svg { opacity: 1; }
.d-msub a.on { color: #fff; font-weight: 600; }

.d-side-foot {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 10px; color: var(--d-side-muted);
  line-height: 1.5;
}
.d-side-foot b { color: #fff; font-weight: 700; display: block; margin-bottom: 2px; }
.d-side-foot a { color: inherit; text-decoration: none; transition: color .15s; }
.d-side-foot a:hover { color: #fff; text-decoration: underline; }

/* ════════════════════════════════════
   MAIN COLUMN
════════════════════════════════════ */
.d-main {
  min-width: 0;
  display: flex; flex-direction: column;
}

/* Topbar */
.d-top {
  height: var(--d-topbar-h);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--d-bdr);
  display: flex; align-items: center;
  gap: 16px; padding: 0 26px;
  position: sticky; top: 0; z-index: 80;
}
.d-acct-status {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid; border-radius: 999px; padding: 5px 12px 5px 6px;
}
.d-acct-ico {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
}
.d-acct-ico svg { width: 13px; height: 13px; }
.d-acct-role {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  white-space: nowrap;
}
.d-acct-name { display: none; }

.d-top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.d-iconbtn {
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: transparent;
  display: grid; place-items: center;
  color: #52564a; cursor: pointer;
  position: relative; transition: background .15s;
}
.d-iconbtn:hover { background: #f5f2eb; }
/* Mobile overlay + hamburger — hidden by default on all viewports */
.d-mob-overlay { display: none; }
.d-mob-ham { display: none; }
.d-iconbtn .d-dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #dc2626; border: 2px solid #fff;
}

.d-user {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px; margin-left: 4px;
  border-radius: 999px; cursor: pointer;
  transition: background .15s;
}
.d-user:hover { background: #f5f2eb; }
.d-user.open { background: #f5f2eb; }
.d-user.open > svg { transform: rotate(180deg); }
.d-user-dd {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 220px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.04);
  z-index: 100;
  overflow: hidden;
}
.d-user-dd.open { display: block; animation: d-fade .2s ease; }
@keyframes d-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.d-user-dd-head {
  padding: 12px 16px;
  background: #fdfdfc;
  border-bottom: 1px solid #e5e5e0;
}
.d-user-dd-h1 { font-size: 13px; font-weight: 700; color: var(--d-txt); }
.d-user-dd-body { padding: 6px; }
.d-user-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #dc2626;
  text-decoration: none; transition: background .15s;
}
.d-user-dd-item:hover { background: #fee2e2; }
.d-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center; flex-shrink: 0;
  overflow: hidden;
}
.d-avatar img { width: 100%; height: 100%; object-fit: cover; }
.d-user-txt { line-height: 1.2; }
.d-user-name { font-size: 12.5px; font-weight: 700; color: var(--d-txt); }
.d-user-role { font-size: 10.5px; color: var(--d-muted); margin-top: 1px; }
.d-user svg { color: #a1a09a; }

/* ════════════════════════════════════
   CONTENT WRAP
════════════════════════════════════ */
.d-wrap {
  padding: 26px 30px 40px;
  max-width: 1480px;
  width: 100%;
}
.d-shd { margin-bottom: 22px; }
.d-title {
  font-size: 24px; font-weight: 800;
  color: var(--d-soft); letter-spacing: -.3px;
}
.d-sub { font-size: 13px; color: var(--d-muted); margin-top: 4px; }

.d-g2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.d-g3  { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 16px; }
.d-g13 { display: grid; grid-template-columns: 1fr 2.2fr; gap: 16px; margin-bottom: 16px; }
.d-g31 { display: grid; grid-template-columns: 2.2fr 1fr; gap: 16px; margin-bottom: 16px; }
.d-mb  { margin-bottom: 16px; }
.d-row-label { font-size: 16px; font-weight: 800; color: var(--d-txt); margin: 22px 0 12px; }
.d-row-sub   { font-size: 12px; color: var(--d-muted); margin-top: 2px; }

/* ════════════════════════════════════
   HERO BANNER
════════════════════════════════════ */
.d-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #1f5a3a;
  min-height: 240px;
  margin-bottom: 22px;
  box-shadow: var(--d-sh);
}
.d-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #1f5a3a 0%, #1f5a3a 38%, rgba(31,90,58,.55) 60%, rgba(31,90,58,0) 100%),
              var(--d-hero-img, linear-gradient(135deg, #2d7a4f, #1f5a3a));
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.d-hero-body {
  position: relative;
  padding: 42px 44px;
  max-width: 800px;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  box-sizing: border-box;
}
.d-hero-h {
  font-size: 30px; font-weight: 800;
  line-height: 1.2; letter-spacing: -.6px;
  color: #fff; text-wrap: balance;
}
.d-hero-p {
  font-size: 13.5px; color: rgba(255,255,255,.88);
  margin-top: 12px; line-height: 1.55; max-width: 460px;
}
.d-hero-cta { display: flex; gap: 10px; margin-top: auto; flex-wrap: nowrap; padding-top: 22px; overflow-x: auto; padding-bottom: 4px; }
.d-hero-cta::-webkit-scrollbar { height: 4px; }
.d-hero-cta::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 4px; }
.d-hbtn {
  padding: 10px 18px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; border: none;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.d-hbtn-p { background: #22c55e; color: #fff; }
.d-hbtn-p:hover { background: #16a34a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.d-hbtn-g {
  background: rgba(255,255,255,.14);
  color: #fff; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
}
.d-hbtn-g:hover { background: rgba(255,255,255,.22); }

/* ════════════════════════════════════
   KPI CARDS (soft-tinted)
════════════════════════════════════ */
.d-krow { display: grid; gap: 16px; margin-bottom: 20px; }
.d-k4   { grid-template-columns: repeat(4,1fr); }
.d-k3   { grid-template-columns: repeat(3,1fr); }
.d-kcard {
  background: var(--d-kbg, rgba(220,252,231,0.50));
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 14px; padding: 18px 20px;
  position: relative; overflow: hidden;
  box-shadow: var(--d-sh);
  transition: transform .18s, box-shadow .18s;
  text-decoration: none; color: inherit;
  display: block;
}
.d-kcard:hover { transform: translateY(-2px); box-shadow: var(--d-sh2); }
.d-k-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #fff;
  display: grid; place-items: center;
  color: var(--d-kacc, #16a34a);
  margin-bottom: 14px;
}
.d-k-val {
  font-size: 30px; font-weight: 800;
  color: var(--d-kacc, #16a34a);
  line-height: 1; letter-spacing: -1px;
}
.d-k-lbl {
  font-size: 12.5px; font-weight: 600;
  color: var(--d-txt); margin-top: 6px;
}
.d-k-link {
  font-size: 11.5px; font-weight: 600;
  color: var(--d-kacc, #16a34a);
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  opacity: .8;
}
.d-kcard:hover .d-k-link { opacity: 1; }

/* Legacy KPI pieces (used by peserta/alumni/petani pages) */
.d-k-acc { position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: 13px 0 0 13px; }
.d-up  { color: var(--d-g600); font-size: 11px; font-weight: 600; }
.d-neu { color: var(--d-muted); font-size: 11px; font-weight: 600; }
.d-dn  { color: var(--d-rose); font-size: 11px; font-weight: 600; }

/* ════════════════════════════════════
   CARDS (generic)
════════════════════════════════════ */
.d-card {
  background: rgba(255,255,255,0.50);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 1px solid rgba(255,255,255,0.50);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--d-sh);
  min-width: 0;
}
.d-chd  { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.d-ct   {
  font-size: 14px; font-weight: 700; color: var(--d-txt);
  display: inline-flex; align-items: center; gap: 8px;
}
.d-ct-ico {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--d-g100); color: var(--d-g700);
  display: grid; place-items: center; flex-shrink: 0;
}
.d-cs   { font-size: 11.5px; color: var(--d-muted); margin-top: 2px; }
.d-clink {
  font-size: 11.5px; font-weight: 600;
  color: var(--d-g700); text-decoration: none;
}
.d-clink:hover { text-decoration: underline; }

.d-chwrap { position: relative; width: 100%; min-width: 0; max-width: 100%; }
canvas { display: block; }

.d-bdg { padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; display: inline-block; }
.d-bdg-g { background: var(--d-g100); color: var(--d-g800); }
.d-bdg-t { background: #ccfbf1; color: #0f766e; }
.d-bdg-b { background: #dbeafe; color: #1d4ed8; }
.d-bdg-a { background: #fef3c7; color: #92400e; }

/* ════════════════════════════════════
   NEWS GRID
════════════════════════════════════ */
.d-news-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.d-news {
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .18s;
}
.d-news:hover { transform: translateY(-2px); }
.d-news-img {
  height: 112px;
  background-size: cover; background-position: center;
  background-color: #e6e2d8;
  position: relative;
}
.d-news-date {
  font-size: 10.5px; color: var(--d-muted);
  margin-top: 10px; font-weight: 500;
}
.d-news-t {
  font-size: 13px; font-weight: 700;
  color: var(--d-txt); line-height: 1.35;
  margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.d-news-s {
  font-size: 11.5px; color: var(--d-muted);
  line-height: 1.5; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ════════════════════════════════════
   ALUMNI LIST
════════════════════════════════════ */
.d-alist { display: flex; flex-direction: column; gap: 12px; }
.d-arow {
  display: flex; align-items: center; gap: 12px;
}
.d-apfp {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--d-g500), var(--d-g700));
  color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center; flex-shrink: 0;
  overflow: hidden;
}
.d-apfp img { width: 100%; height: 100%; object-fit: cover; }
.d-ainfo { flex: 1; min-width: 0; }
.d-aname { font-size: 12.5px; font-weight: 700; color: var(--d-txt); }
.d-ameta { font-size: 10.5px; color: var(--d-muted); margin-top: 2px; }
.d-atag {
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}

/* ════════════════════════════════════
   PROGRESS / STAT MINIS (unchanged from before, tuned)
════════════════════════════════════ */
.d-prow  { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.d-plbl  { font-size: 11.5px; font-weight: 600; color: var(--d-txt); width: 140px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-pwrap { flex: 1; height: 7px; background: #f0ede4; border-radius: 4px; overflow: hidden; }
.d-pbar  { height: 100%; border-radius: 4px; transition: width .55s ease; }
.d-pval  { font-size: 11px; font-weight: 700; color: var(--d-muted); width: 50px; text-align: right; }

.d-srow  { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 13px; }
.d-smini {
  background: rgba(247,245,239,0.50);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 1px solid rgba(255,255,255,0.50);
  border-radius: 9px; padding: 12px;
  box-shadow: var(--d-sh);
}
.d-sm-l  { font-size: 9.5px; color: var(--d-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.d-sm-v  { font-size: 20px; font-weight: 800; color: var(--d-txt); margin-top: 3px; line-height: 1; letter-spacing: -.5px; }
.d-sm-s  { font-size: 10px; color: var(--d-muted); margin-top: 2px; }

/* ════════════════════════════════════
   TABLE & CONTROLS
════════════════════════════════════ */
.d-ctrl { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.d-sbox {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.50);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 9px; padding: 7px 12px; flex: 1; min-width: 180px;
  box-shadow: var(--d-sh);
}
.d-sbox input { border: none; outline: none; font-size: 12.5px; font-family: inherit; color: var(--d-txt); width: 100%; background: transparent; }
.d-sbox input::placeholder { color: var(--d-muted); }
.d-sel {
  background: rgba(255,255,255,0.50);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 9px; padding: 7px 11px; font-size: 12px;
  font-family: inherit; color: var(--d-txt); outline: none; cursor: pointer;
  box-shadow: var(--d-sh);
}

/* Multi-select Dropdown (d-msel) */
.d-msel { position: relative; display: inline-block; }
.d-msel-btn {
  background: rgba(255,255,255,0.50);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 9px; padding: 7px 12px; font-size: 11.5px;
  font-family: inherit; color: var(--d-txt); outline: none; cursor: pointer;
  box-shadow: var(--d-sh);
  display: flex; align-items: center; gap: 8px; min-width: 140px;
  transition: all .15s;
}
.d-msel-btn:hover { background: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.8); }
.d-msel-btn.active { border-color: var(--d-g500); color: var(--d-g700); background: var(--d-g100); }
.d-msel-arr { font-size: 10px; opacity: 0.5; transition: transform .2s; }
.d-msel.open .d-msel-arr { transform: rotate(180deg); }

.d-msel-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  min-width: 220px; max-width: 320px; max-height: 280px; overflow-y: auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  padding: 6px; display: none; animation: d-fin .15s ease-out;
}
.d-msel.open .d-msel-pop { display: block; }

.d-msel-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; transition: background .15s;
  font-size: 12px; color: var(--d-txt); font-weight: 500;
}
.d-msel-item:hover { background: rgba(0,0,0,0.04); }
.d-msel-item input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--d-g600);
}

/* Image Upload Component */
.d-img-up-group { display: flex; gap: 16px; align-items: flex-start; background: rgba(0,0,0,0.03); padding: 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.05); }
.d-img-up-group.sm { padding: 8px; gap: 10px; border-radius: 8px; }
.d-img-prev { 
  width: 100px; height: 100px; border-radius: 10px; background-color: #eee; 
  background-size: cover; background-position: center; border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.d-img-prev.sm { width: 50px; height: 50px; border-radius: 6px; }
.d-img-ph { font-size: 10px; color: #999; font-weight: 700; text-transform: uppercase; }
.d-cl-up-btn {
  display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700;
  color: var(--d-g700); background: var(--d-g100); padding: 4px 10px; border-radius: 6px;
  cursor: pointer; border: 1.5px solid var(--d-g200);
}
.d-cl-up-btn:hover { background: var(--d-g200); }


.d-btn { padding: 7px 13px; border-radius: 9px; border: none; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .14s; font-family: inherit; }
.d-btn-xlsx {
  display: inline-flex; align-items: center;
  background: rgba(22,163,74,0.10);
  border: 1.5px solid rgba(22,163,74,0.30);
  color: var(--d-g700); padding: 6px 12px;
  border-radius: 9px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: all .14s; font-family: inherit;
  white-space: nowrap;
}
.d-btn-xlsx:hover:not(:disabled) { background: rgba(22,163,74,0.18); border-color: var(--d-g600); }
.d-btn-xlsx:disabled { opacity: .55; cursor: default; }
.d-btn-g  { background: var(--d-g600); color: #fff; }
.d-btn-g:hover { background: var(--d-g700); }
.d-btn-p  { background: #2563eb; color: #fff; }
.d-btn-p:hover:not(:disabled) { background: #1d4ed8; }
.d-btn-p:disabled { opacity: .55; cursor: default; }
.d-btn-gh {
  background: rgba(255,255,255,0.50);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 1.5px solid rgba(255,255,255,0.55); color: var(--d-soft);
}
.d-btn-gh:hover { background: rgba(255,255,255,0.65); }

.d-tbl-outer  {
  overflow-x: auto; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.50);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  box-shadow: var(--d-sh);
}
.d-tbl-scroll { max-height: 460px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 600px; background: rgba(255,255,255,0.50); }
thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; padding: 10px 12px;
  font-size: 10px; font-weight: 700; color: var(--d-muted);
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid rgba(220,215,200,0.50);
  background: rgba(250,248,243,0.65); white-space: nowrap; cursor: pointer; user-select: none;
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
}
thead th:hover { color: var(--d-g700); }
thead th.nosort { cursor: default; }
thead th.nosort:hover { color: var(--d-muted); }
tbody td { padding: 10px 12px; color: #374151; border-bottom: .5px solid rgba(240,237,228,0.70); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
tbody td.d-td-actions { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; }
tbody td:first-child { color: var(--d-muted); font-weight: 400; font-size: 11px; }
tbody td:nth-child(2) { font-weight: 600; color: var(--d-txt); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(250,248,243,0.50); }

.d-pill   { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.d-pill-g { background: var(--d-g100); color: var(--d-g800); }
.d-pill-b { background: #dbeafe; color: #1d4ed8; }
.d-pill-a { background: #fef3c7; color: #92400e; }
.d-pill-p { background: #ede9fe; color: #5b21b6; }
.d-pill-r { background: #ffe4e6; color: #be123c; }
.d-pill-m { background: #f1f5f9; color: #475569; }
.d-pill-t { background: #ccfbf1; color: #0f766e; }

/* Sort icons on thead */
.d-th-sort  { display: inline-block; font-size: 8px; margin-left: 4px; vertical-align: middle; transition: color .13s; }
.d-th-idle  { color: rgba(107,114,128,.35); }
.d-th-asc   { color: var(--d-g600); }
.d-th-desc  { color: var(--d-g600); }
thead th.d-th-sortable:hover .d-th-idle { color: var(--d-g500); }

/* Column-header inline filter */
.d-th-inner  { display: flex; align-items: center; gap: 4px; }
.d-th-label  { flex: 1; min-width: 0; }
.d-th-flt    { position: relative; flex-shrink: 0; }
.d-th-fbtn   {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; border: none; cursor: pointer;
  background: transparent; color: rgba(107,114,128,.5); padding: 0;
  transition: background .13s, color .13s;
}
.d-th-fbtn:hover          { background: rgba(22,163,74,.12); color: var(--d-g700); }
.d-th-fbtn.has-filter     { background: var(--d-g100); color: var(--d-g700); }
.d-th-fbadge              {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--d-g600); color: #fff;
  font-size: 9px; font-weight: 800; border-radius: 10px;
  min-width: 15px; height: 15px; padding: 0 3px; line-height: 1;
}
.d-th-fpop {
  z-index: 9999;
  min-width: 200px; max-width: 280px; max-height: 280px; overflow-y: auto;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  padding: 6px; animation: d-fin .14s ease-out;
}
.d-th-fpop-hd {
  font-size: 10px; font-weight: 800; color: var(--d-muted);
  text-transform: uppercase; letter-spacing: .5px;
  padding: 6px 10px 4px; border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 4px;
}
.d-th-fclear {
  display: block; width: 100%; text-align: center;
  margin-top: 4px; padding: 6px 10px; border-radius: 8px; border: none;
  background: rgba(239,68,68,0.08); color: #dc2626;
  font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .13s;
}
.d-th-fclear:hover { background: rgba(239,68,68,0.15); }

/* Pagination + perPage footer */
.d-pag { display: flex; align-items: center; gap: 5px; margin-top: 12px; justify-content: space-between; flex-wrap: wrap; }
.d-pag-info { font-size: 11px; color: var(--d-muted); margin-right: 6px; }
.d-pbtn {
  min-width: 28px; height: 28px; padding: 0 6px; border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.50);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  font-size: 11.5px; font-weight: 600; cursor: pointer; color: var(--d-soft);
  transition: all .13s; font-family: inherit;
  box-shadow: var(--d-sh);
}
.d-pbtn:hover:not(:disabled) { border-color: var(--d-g500); color: var(--d-g700); background: rgba(255,255,255,0.65); }
.d-pbtn.on { background: var(--d-g600); color: #fff; border-color: var(--d-g600); }
.d-pbtn:disabled { opacity: .38; cursor: default; }

/* Scope tabs (Polbangtan vs SMK PP) */
.d-scope-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.d-scope-tab {
  padding: 7px 18px; border-radius: 20px; border: 1.5px solid var(--d-border);
  background: rgba(255,255,255,0.45); color: var(--d-soft); font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: all .15s;
}
.d-scope-tab:hover { background: rgba(255,255,255,0.65); color: var(--d-txt); }
.d-scope-tab.active { background: var(--d-g600); color: #fff; border-color: var(--d-g600); box-shadow: 0 2px 8px rgba(22,163,74,.25); }

/* UPT/Org card grid */
.d-stgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); gap: 11px; margin-bottom: 20px; }
.d-stcard {
  background: rgba(255,255,255,0.50);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 2px solid rgba(255,255,255,0.50);
  border-radius: 13px; overflow: hidden; cursor: pointer;
  transition: all .16s; box-shadow: var(--d-sh);
}
.d-stcard:hover { box-shadow: var(--d-sh2); transform: translateY(-2px); background: rgba(255,255,255,0.60); }
.d-stcard.on { border-color: var(--d-g600); box-shadow: 0 0 0 3px rgba(22,163,74,.18), var(--d-sh); background: rgba(255,255,255,0.60); }
.d-st-img  { width: 100%; height: 96px; object-fit: cover; display: block; }
.d-st-ph   { width: 100%; height: 96px; display: grid; place-items: center; font-size: 28px; }
.d-st-body { padding: 9px 11px; }
.d-st-name { font-size: 11.5px; font-weight: 700; color: var(--d-txt); line-height: 1.3; }
.d-st-meta { font-size: 10px; color: var(--d-muted); margin-top: 2px; }
.d-st-bdg  { margin-top: 5px; }

@keyframes d-spin { to { transform: rotate(360deg); } }
@keyframes d-fin  { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.d-fin { animation: d-fin .24s ease; }
.d-spinner-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; gap: 14px; }
.d-spinner { width: 36px; height: 36px; border: 3px solid var(--d-g100); border-top-color: var(--d-g600); border-radius: 50%; animation: d-spin 1s linear infinite; }

.d-note { background: #fef3c7; border: 1px solid #fde68a; border-radius: 10px; padding: 12px 16px; font-size: 12px; color: #92400e; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px; }
.d-note-ico { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ════════════════════════════════════
   DASHBOARD TAB FILTER & EXPORT
════════════════════════════════════ */
.dsh-tab {
  padding: 6px 14px; border-radius: 18px;
  border: 1.5px solid var(--d-g200);
  background: var(--d-glass);
  color: var(--d-muted);
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all .16s;
  font-family: inherit; line-height: 1;
}
.dsh-tab:hover { border-color: var(--d-g600); color: var(--d-g700); }
.dsh-tab.active { background: var(--d-g700); border-color: var(--d-g700); color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,.25); }
.dsh-export-btn {
  padding: 6px 12px; border-radius: 8px;
  border: 1.5px solid var(--d-g500);
  background: rgba(22,163,74,0.08);
  color: var(--d-g700);
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  box-shadow: 0 0 0 1px rgba(22,163,74,0.12);
}
.dsh-export-btn:hover { background: rgba(22,163,74,0.16); border-color: var(--d-g600); color: var(--d-g800); box-shadow: 0 0 0 1px rgba(22,163,74,0.22); }
.dsh-export-btn:disabled { cursor: not-allowed; opacity: .45; pointer-events: none; }

/* ════════════════════════════════════
   COLLAPSED SIDEBAR STATE
════════════════════════════════════ */
.d-app.d-side-collapsed { --d-side-w: 72px; }
.d-app.d-side-collapsed .d-side-brand-txt,
.d-app.d-side-collapsed .d-mitem span.d-mlbl,
.d-app.d-side-collapsed .d-side-foot,
.d-app.d-side-collapsed .d-mcaret,
.d-app.d-side-collapsed .d-side-toggle-lbl { display: none; }
.d-app.d-side-collapsed .d-side-brand { justify-content: center; padding: 18px 16px 14px; }
.d-app.d-side-collapsed .d-side-close { display: none; }
.d-app.d-side-collapsed .d-mitem,
.d-app.d-side-collapsed .d-side-toggle { justify-content: center; padding: 10px 12px; }
.d-app.d-side-collapsed #d-side-toggle svg { transform: rotate(180deg); }
/* Database: show toggle icon-only; sub-items as icon-only */
.d-app.d-side-collapsed .d-msub { display: flex; padding: 2px 0; }
.d-app.d-side-collapsed .d-msub a { justify-content: center; padding: 10px 12px; }
.d-app.d-side-collapsed .d-msub a span { display: none; }

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (min-width: 721px) and (max-width: 900px) {
  :root { --d-side-w: 72px; }
  .d-side-brand-txt, .d-mitem span.d-mlbl, .d-side-foot, .d-mcaret { display: none; }
  .d-side-brand { justify-content: center; padding: 18px 16px 14px; }
  .d-mitem { justify-content: center; padding: 10px 12px; }
  /* Database sub-items: always visible as icon-only */
  .d-msub { display: flex !important; padding: 2px 0; }
  .d-msub a { justify-content: center; padding: 10px 12px; }
  .d-msub a span { display: none; }
  .d-g2, .d-g13, .d-g31 { grid-template-columns: 1fr; }
  .d-g3 { grid-template-columns: 1fr; }
  .d-k4 { grid-template-columns: repeat(2,1fr); }
  .d-news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .d-app { grid-template-columns: 1fr; }
  /* Sidebar as fixed slide-in drawer */
  .d-side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    width: 240px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 32px rgba(5,46,22,.35);
  }
  .d-side.mob-open { transform: translateX(0); }
  /* Mobile overlay */
  .d-mob-overlay {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(5,46,22,.45);
    backdrop-filter: blur(2px);
  }
  .d-mob-overlay.open { display: block; }
  /* Show hamburger + sidebar close button */
  .d-mob-ham { display: flex !important; }
  .d-side-close { display: flex; }
  /* Reset collapsed sidebar state on mobile — always full sidebar */
  .d-app.d-side-collapsed { --d-side-w: 240px; }
  .d-app.d-side-collapsed .d-side-brand-txt { display: block; }
  .d-app.d-side-collapsed .d-mitem span.d-mlbl { display: inline; }
  .d-app.d-side-collapsed .d-side-foot { display: block; }
  .d-app.d-side-collapsed .d-mcaret { display: block; }
  .d-app.d-side-collapsed .d-msub { display: none; padding: 2px 0 6px 44px; }
  .d-app.d-side-collapsed .d-msub.open { display: flex; }
  .d-app.d-side-collapsed .d-msub a { justify-content: flex-start; padding: 6px 10px; }
  .d-app.d-side-collapsed .d-msub a span { display: inline; }
  .d-app.d-side-collapsed .d-side-toggle-lbl { display: inline; }
  .d-app.d-side-collapsed .d-side-brand { justify-content: flex-start; padding: 18px 18px 14px; }
  .d-app.d-side-collapsed .d-mitem { justify-content: flex-start; padding: 10px 12px; }
  .d-app.d-side-collapsed #d-db-toggle { display: flex; }
  /* Content layout */
  .d-wrap { padding: 18px 16px 30px; }
  .d-k4, .d-k3 { grid-template-columns: 1fr; }
  .d-hero-h { font-size: 22px; }
  .d-hero-body { padding: 26px 22px; max-width: 100%; }
}

/* ════════════════════════════════════
   INPUT DATA & EDIT PAGE FORMS
════════════════════════════════════ */
.d-form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.d-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.d-field     { display: flex; flex-direction: column; gap: 5px; }
.d-field.full { grid-column: 1/-1; }
.d-fsec { font-size: 10.5px; font-weight: 800; color: var(--d-muted); text-transform: uppercase; letter-spacing: .5px; margin: 6px 0 4px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.35); grid-column: 1/-1; }

.d-fld-lbl { font-size: 10.5px; font-weight: 700; color: var(--d-muted); text-transform: uppercase; letter-spacing: .3px; }
.d-fld-lbl .req { color: #be185d; }

.d-fld-inp, .d-fld-sel, .d-fld-ta {
  background: rgba(255,255,255,0.55);
  backdrop-filter: var(--d-glass); -webkit-backdrop-filter: var(--d-glass);
  border: 1.5px solid rgba(255,255,255,0.55); border-radius: 9px;
  padding: 8px 11px; font-size: 12.5px; font-family: inherit;
  color: var(--d-txt); outline: none; transition: border-color .15s;
  box-shadow: var(--d-sh); width: 100%; box-sizing: border-box;
}
.d-fld-inp:focus, .d-fld-sel:focus, .d-fld-ta:focus { border-color: var(--d-g500); background: rgba(255,255,255,.72); }
.d-fld-ta  { min-height: 90px; resize: vertical; }
.d-fld-sel { cursor: pointer; }

/* Mode sub-tabs */
.d-mode-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1.5px solid rgba(255,255,255,.30); padding-bottom: 10px; }
.d-mode-tab  { padding: 6px 14px; border-radius: 8px; border: 1.5px solid transparent; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--d-muted); background: transparent; font-family: inherit; transition: all .15s; }
.d-mode-tab:hover { color: var(--d-g700); }
.d-mode-tab.active { border-color: var(--d-g500); color: var(--d-g700); background: var(--d-g100); }

/* Upload drag-drop zone */
.d-upload-zone { 
  display: block; 
  width: 100%; 
  border: 2px dashed rgba(22,163,74,.35); 
  border-radius: 12px; 
  padding: 40px 24px; 
  text-align: center; 
  cursor: pointer; 
  transition: all .2s ease-in-out; 
  background: rgba(22,163,74,.03); 
  margin-bottom: 16px;
}
.d-upload-zone:hover, .d-upload-zone.drag { 
  border-color: var(--d-g500); 
  background: var(--d-g100); 
  border-style: solid;
}
.d-upload-zone input[type=file] { display: none; }
.d-upload-ico { font-size: 32px; margin-bottom: 12px; filter: grayscale(1) opacity(0.6); transition: all .2s; }
.d-upload-zone:hover .d-upload-ico, .d-upload-zone.drag .d-upload-ico { filter: grayscale(0) opacity(1); transform: translateY(-2px); }
.d-upload-txt { font-size: 14px; font-weight: 700; color: var(--d-txt); margin-bottom: 4px; }
.d-upload-sub { font-size: 11.5px; color: var(--d-muted); }

/* Toast notifications */
.d-toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; border-radius: 12px; font-size: 12.5px; font-weight: 600; z-index: 9999; animation: d-fin .22s ease; box-shadow: 0 4px 20px rgba(0,0,0,.15); max-width: 320px; }
.d-toast-ok   { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.d-toast-err  { background: #ffe4e6; color: #be123c; border: 1px solid #fda4af; }
.d-toast-info { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }

/* Bulk preview */
.d-bulk-preview { margin-top: 12px; max-height: 260px; overflow: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,.50); background: rgba(255,255,255,.45); }
.d-bulk-preview table { min-width: 400px; }

/* Admin role badges */
.d-role-super { background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; }
.d-role-upt   { background: #dbeafe; color: #1d4ed8; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; }
.d-role-pet   { background: #dcfce7; color: #166534; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; }

/* Edit page — JSON preview */
.d-json-pre { background: #1e1e2e; color: #cdd6f4; border-radius: 10px; padding: 14px 16px; font-family: 'Courier New', monospace; font-size: 11px; line-height: 1.6; overflow: auto; max-height: 320px; margin-top: 12px; }

/* Slide editor */
.d-slide-card { background: rgba(255,255,255,.45); border: 1.5px solid rgba(255,255,255,.55); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.d-slide-num  { font-size: 10px; font-weight: 800; color: var(--d-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }

/* Kurikulum / IkaPoPI section */
.d-edit-section { display: none; }
.d-edit-section.active { display: block; }

/* ── Card Editor (dynamic add/remove) ── */
.cl-card {
  position: relative;
  animation: cl-in .18s ease;
}
@keyframes cl-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.cl-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.cl-del {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px; border: none;
  background: #fee2e2; color: #be123c;
  font-size: 10px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .12s;
}
.cl-del:hover { background: #fecaca; }
.cl-add {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; width: 100%; padding: 10px 16px;
  border-radius: 10px; border: 1.5px dashed rgba(22,163,74,.35);
  background: rgba(22,163,74,.03); color: var(--d-g700);
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; margin-top: 8px;
  transition: all .15s;
}
.cl-add:hover { border-color: var(--d-g500); background: var(--d-g100); }
.cl-str-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.45);
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 9px; padding: 8px 10px;
  margin-bottom: 6px;
  animation: cl-in .18s ease;
}
.cl-str-num {
  font-size: 10px; font-weight: 800; color: var(--d-muted);
  text-transform: uppercase; letter-spacing: .3px;
  flex-shrink: 0; min-width: 52px;
}
.cl-str-inp {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 12.5px; color: var(--d-txt);
}
.cl-str-del {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
  border: none; background: #fee2e2; color: #be123c;
  font-size: 11px; cursor: pointer; display: grid; place-items: center;
  transition: background .12s;
}
.cl-str-del:hover { background: #fecaca; }

/* Form action bar */
.d-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.30); flex-wrap: wrap; }
.d-form-actions .d-api-note { font-size: 10.5px; color: var(--d-muted); font-style: italic; }

@media (max-width: 720px) {
  .d-form-grid, .d-form-grid-3 { grid-template-columns: 1fr; }
  .d-field.full { grid-column: 1; }
}

/* ═══════════════════════════════════════════════════════════
   PETA SEBARAN
═══════════════════════════════════════════════════════════ */
.pm-page {
  height: calc(100vh - var(--d-topbar-h));
  padding: 14px 24px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  box-sizing: border-box;
}
.pm-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.pm-title {
  font-size: 20px; font-weight: 800; color: var(--d-txt);
  letter-spacing: -.3px;
}
.pm-subtitle {
  font-size: 12.5px; color: var(--d-muted); margin-top: 2px;
}
.pm-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pm-leg-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--d-muted);
}
.pm-leg-dot {
  display: inline-block; border-radius: 50%; width: 10px; height: 10px; flex-shrink: 0;
}
.pm-leg-size { gap: 4px; }

/* Stats row */
.pm-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
}
.pm-stat {
  background: var(--d-surf); backdrop-filter: var(--d-glass);
  border: 1.5px solid var(--d-bdr);
  border-radius: 12px; padding: 9px 14px;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  border-left: 3px solid var(--ac, #16a34a);
  box-shadow: var(--d-sh);
}
.pm-stat-ico { font-size: 20px; flex-shrink: 0; }
.pm-stat-val { font-size: 18px; font-weight: 800; color: var(--d-txt); line-height: 1; }
.pm-stat-lbl { font-size: 10.5px; color: var(--d-muted); font-weight: 600; }

/* Map wrapper */
.pm-map-wrap {
  border-radius: 18px;
  border: 1.5px solid rgba(22,163,74,.2);
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
  overflow: hidden; position: relative;
  flex: 0 0 auto;
  height: calc(100vh - var(--d-topbar-h) - 250px);
  min-height: 180px;
  max-height: 670px;
}
#pm-map {
  width: 100%;
  height: 100%;
}
.pm-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; color: rgba(0,0,0,.35);
  white-space: nowrap; pointer-events: none; z-index: 1000;
}

/* Leaflet overrides */
.leaflet-container {
  background: #f0f4f0;
  font-family: 'Roboto', sans-serif;
}
.leaflet-control-attribution {
  background: rgba(255,255,255,.85) !important;
  color: rgba(0,0,0,.45) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: #16a34a !important; }
.leaflet-control-zoom a {
  background: #fff !important;
  color: #16a34a !important;
  border-color: #d1fae5 !important;
}
.leaflet-control-zoom a:hover { background: #f0fdf4 !important; }

/* Leaflet marker styles */
.pm-lf-has-data { cursor: pointer !important; }

/* Leaflet custom tooltip */
.pm-lf-tip {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid #d1fae5 !important;
  border-radius: 10px !important;
  padding: 9px 13px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
  color: #1e293b;
  font-size: 12px; font-family: 'Roboto', sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.pm-lf-tip::before { border-top-color: #d1fae5 !important; }

/* Detail panel */
.pm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(5,46,22,.25);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.pm-overlay.open { opacity: 1; pointer-events: auto; }

.pm-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  z-index: 1001;
  background: rgba(245,243,238,.97);
  backdrop-filter: var(--d-glass);
  border-left: 1.5px solid var(--d-bdr2);
  box-shadow: -8px 0 40px rgba(5,46,22,.15);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.pm-panel.open { transform: translateX(0); }

.pm-panel-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--d-bdr2);
  background: linear-gradient(135deg, rgba(22,163,74,.08), transparent);
  flex-shrink: 0;
}
.pm-panel-title {
  font-size: 17px; font-weight: 800; color: var(--d-txt);
}
.pm-panel-sub {
  font-size: 11.5px; color: var(--d-muted); margin-top: 3px; line-height: 1.4;
}
.pm-close {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: rgba(5,46,22,.08); color: var(--d-txt);
  font-size: 13px; cursor: pointer; display: grid; place-items: center;
  transition: background .12s; flex-shrink: 0;
}
.pm-close:hover { background: rgba(5,46,22,.15); }

.pm-panel-tabs {
  display: flex; gap: 0; padding: 12px 16px 0;
  border-bottom: 1.5px solid var(--d-bdr2);
  flex-shrink: 0;
}
.pm-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px 8px 0 0;
  border: none; background: transparent;
  font-size: 12px; font-weight: 600; color: var(--d-muted);
  cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}
.pm-tab:hover { color: var(--d-g700); background: var(--d-g100); }
.pm-tab.active {
  color: var(--d-g700); background: var(--d-g50);
  border-bottom-color: var(--d-g600);
}
.pm-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 20px;
  background: var(--d-g100); color: var(--d-g700);
  font-size: 10px; font-weight: 800; padding: 0 5px;
}
.pm-tab.active .pm-tab-count {
  background: var(--d-g600); color: #fff;
}

.pm-panel-body {
  flex: 1; overflow-y: auto; padding: 12px 16px;
}
.pm-panel-body::-webkit-scrollbar { width: 4px; }
.pm-panel-body::-webkit-scrollbar-thumb { background: var(--d-bdr2); border-radius: 4px; }

.pm-list { display: flex; flex-direction: column; gap: 8px; }
.pm-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--d-surf); border: 1px solid var(--d-bdr);
  transition: box-shadow .12s;
  animation: pm-item-in .18s ease both;
}
.pm-item:hover { box-shadow: var(--d-sh); }
@keyframes pm-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pm-item-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
}
.pm-item-info { flex: 1; min-width: 0; }
.pm-item-name {
  font-size: 13px; font-weight: 700; color: var(--d-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-item-meta {
  font-size: 11px; color: var(--d-muted); margin: 2px 0 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-item-tags { display: flex; gap: 4px; flex-wrap: wrap; }

.pm-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 16px;
  text-align: center; color: var(--d-muted); font-size: 12.5px;
}

/* Leaflet marker animation */
.leaflet-interactive {
  transition: fill .35s ease, fill-opacity .35s ease, stroke .35s ease;
}

/* Map filter bar */
.pm-filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0 2px;
}
.pm-fbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 20px; border: 1.5px solid transparent;
  font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .2s ease;
  background: var(--d-surf); color: var(--d-muted);
  border-color: var(--d-bdr2);
}
.pm-fbtn:hover {
  color: var(--fc, #16a34a);
  border-color: var(--fc, #16a34a);
  background: color-mix(in srgb, var(--fc, #16a34a) 8%, transparent);
}
.pm-fbtn.active {
  color: #fff;
  background: var(--fc, #16a34a);
  border-color: var(--fc, #16a34a);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--fc, #16a34a) 40%, transparent);
}

/* Province zoom bar — inline kanan filter bar */
.pm-prov-bar {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex-shrink: 0;
}
.pm-prov-ico { font-size: 15px; flex-shrink: 0; }
.pm-prov-sel {
  flex: 1; min-width: 0; max-width: 380px;
  height: 34px; padding: 0 10px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 9px; font-size: 12.5px;
  font-family: inherit; color: var(--d-txt);
  cursor: pointer; outline: none;
  box-shadow: var(--d-sh);
  transition: border-color .15s;
}
.pm-prov-sel:focus { border-color: var(--d-g500); }
.pm-prov-reset {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.5);
  font-size: 12px; font-weight: 600;
  font-family: inherit; color: var(--d-soft);
  cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.pm-prov-reset:hover { border-color: var(--d-g500); color: var(--d-g700); background: rgba(255,255,255,0.75); }

/* Panel table */
.pm-panel-body { padding: 0; }

.pm-tbl-ctrl {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(245,243,238,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--d-bdr2);
  flex-shrink: 0;
}
.pm-tbl-count { font-size: 11px; color: var(--d-muted); white-space: nowrap; }
.pm-tbl-sel   { font-size: 11px; padding: 3px 6px; min-width: 82px; margin-left: auto; }
.pm-tbl-xl {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 7px; border: none; cursor: pointer;
  font-size: 11px; font-weight: 700; font-family: inherit;
  background: var(--d-g100); color: var(--d-g700);
  transition: background .12s;
  white-space: nowrap;
}
.pm-tbl-xl:hover { background: var(--d-g200); }

.pm-tbl-wrap {
  overflow-x: auto; overflow-y: visible;
}
.pm-tbl-wrap::-webkit-scrollbar { height: 4px; }
.pm-tbl-wrap::-webkit-scrollbar-thumb { background: var(--d-bdr2); border-radius: 4px; }

.pm-tbl {
  width: 100%; border-collapse: collapse; font-size: 11.5px;
}
.pm-tbl thead th {
  position: sticky; top: 0;
  padding: 7px 8px; text-align: left;
  background: var(--d-g50); color: var(--d-g700);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1.5px solid var(--d-bdr2);
  white-space: nowrap;
}
.pm-tbl tbody tr { border-bottom: 1px solid var(--d-bdr); transition: background .1s; }
.pm-tbl tbody tr:hover { background: var(--d-g50); }
.pm-tbl tbody td {
  padding: 6px 8px; color: var(--d-txt);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-tbl tbody td:first-child { color: var(--d-muted); font-size: 10px; width: 32px; }

.pm-tbl-pag {
  display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid var(--d-bdr2);
  position: sticky; bottom: 0;
  background: rgba(245,243,238,.97);
  backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
  .pm-stats { grid-template-columns: repeat(2,1fr); }
  .pm-page  { padding: 14px 14px 24px; }
}
@media (max-width: 560px) {
  .pm-stats { grid-template-columns: 1fr 1fr; }
  .pm-panel { width: 100vw; }
}
/* ─────────────────────────────────────────────────────────
   login.css — SIPPTAN Login Page Styling
───────────────────────────────────────────────────────── */

:root {
  --green: #16a34a;
  --green-light: #4ade80;
  --orange: #ff8800;
  --accent-grad: linear-gradient(135deg, #4ade80, #ff8800);
  --glass: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.25);
  --text-on-dark: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.login-root {
  font-family: 'Plus Jakarta Sans', sans-serif;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #020f07;
  position: relative;
}

/* Fullscreen Background */
.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1600&q=80');
  background-size: cover;
  background-position: center;
}
.login-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(29, 88, 52, 0.9) 0%, rgba(5, 46, 22, 0.2) 100%);
}

/* Login Card */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 48px 40px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  text-align: center;
  margin: 20px;
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Branding */
.login-logo {
  width: 72px;
  height: 72px;
  background: #fff;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.3);
}
.login-logo img { width: 80%; height: 80%; object-fit: contain; }

.login-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
  color: transparent;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.login-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 36px;
}

/* Form */
.form-group {
  margin-bottom: 20px;
  text-align: left;
}
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: all 0.2s;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.form-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--green-light);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15);
}

.form-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  font-size: 13px;
}
.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.forgot-pw {
  color: var(--green-light);
  text-decoration: none;
  font-weight: 600;
}
.forgot-pw:hover { text-decoration: underline; }

/* Button */
.login-btn {
  width: 100%;
  padding: 16px;
  background: var(--accent-grad);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.4);
  margin-bottom: 24px;
}
.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(22, 163, 74, 0.5);
  filter: brightness(1.1);
}
.login-btn:active { transform: translateY(0); }

.back-home {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.back-home:hover { color: #fff; }

/* Error State */
.login-card.error {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  border-color: rgba(220, 38, 38, 0.5);
}

.error-msg {
  display: none;
  background: rgba(220, 38, 38, 0.15);
  color: #fecaca;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 20px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  text-align: center;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

@media (max-width: 480px) {
  .login-card { padding: 36px 24px; }
}