/* ═══════════════════════════════════════════════════════════════
   styles/fonts.css — Fon Roboto dilayani dari server sendiri
   ───────────────────────────────────────────────────────────────
   Sprint pra-rilis Fase 3. Berkas baru, tidak memporting modul lama.

   Sebelumnya index.html memuat Roboto dari fonts.googleapis.com.
   Akibatnya setiap halaman, termasuk login, menghubungi dua host
   luar sebelum teksnya tampil, dan itu juga menghalangi CSP.

   Satu berkas variabel (bobot 100–900, subset latin, 43 KB)
   menggantikan empat bobot yang dulu diminta terpisah. Lisensinya
   SIL OFL 1.1, salinannya di public/assets/fonts/OFL.txt.
   `swap`: teks langsung tampil dengan fon cadangan, lalu berganti.
═══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 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);
}
/* Bingkai 16:10 ini dirancang untuk FOTO. Saat yang tampil logo institusi
   (bujur sangkar), `cover` memotongnya habis di atas dan bawah. Modifier ini
   mempertahankan bingkainya — supaya tata letak halaman tidak berubah — tapi
   memuat logonya utuh di atas panel bertingkat warna lembut. */
.sub-hero-img.is-logo{
  object-fit:contain;
  padding:clamp(18px,4vw,42px);
  background:linear-gradient(135deg,rgba(22,163,74,.08),rgba(13,148,136,.14));
}

/* ════════════════════════════════════
   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)}
/* Satu kartu: dibatasi lebar kolom KPI biasa, bukan direntang selebar seksi */
.pub-k1{grid-template-columns:minmax(0,300px)}
.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-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pub-chart-headtext{min-width:0}
.pub-chart-filter{
  flex-shrink:0;max-width:100%;
  padding:5px 10px;border-radius:8px;
  border:1.5px solid var(--border-strong);
  background:var(--glass-bg);
  color:var(--text-secondary);
  font-family:inherit;font-size:11px;font-weight:600;
  cursor:pointer;transition:border-color .18s,color .18s;
}
.pub-chart-filter:hover,.pub-chart-filter:focus{border-color:var(--green);color:var(--green-dark);outline:none}
.pub-chart-filters{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.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; }

/* ════════════════════════════════════
   PETA SEBARAN (beranda)
════════════════════════════════════ */
.pub-peta-wrap{
  height:460px;padding:10px;overflow:hidden;
  border-radius:16px;
}
/* Leaflet menggambar tile-nya sendiri; sudutnya perlu ikut dipotong supaya
   tidak menembus lengkung kartu kaca di sekelilingnya. */
.pub-peta-wrap .leaflet-container{border-radius:10px;background:#f8fafc}
.pub-peta-legend{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  margin-top:12px;font-size:11.5px;color:var(--text-muted);
}
.pub-peta-legend i{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:6px;vertical-align:middle;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
/* Kartu alamat di bawah peta — dua kolom, mengikuti acuan visual pemilik
   sistem. `align-items:stretch` (bawaan grid) supaya dua kartu sebaris sama
   tinggi walau panjang alamatnya berbeda jauh. */
.pub-peta-cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin-top:22px;
}
.pub-peta-card{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:14px;
  text-align:left;width:100%;cursor:pointer;
  /* Elemen ini <button> supaya bisa dijangkau keyboard; huruf & warna bawaan
     tombol dinolkan agar tampil sebagai kartu. Border TIDAK disetel di sini —
     biar garis tipis dari .glass yang dipakai, sama seperti kartu lain. */
  font:inherit;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.pub-peta-card:hover{ transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,44,34,.10); }
.pub-peta-card:focus-visible{ outline:2px solid var(--green-600,#16a34a);outline-offset:2px; }
/* 78px: kira-kira setinggi blok teksnya (judul + dua baris alamat), supaya
   logo dan tulisan terbaca sebagai satu kesatuan, bukan ikon kecil di tepi. */
.pub-peta-card-logo{
  width:78px;height:78px;flex:0 0 78px;
  object-fit:contain;border-radius:10px;background:#fff;
}
.pub-peta-card-logo-kosong{
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);border:1px dashed rgba(2,44,34,.18);
}
.pub-peta-card-teks{ display:flex;flex-direction:column;gap:3px;min-width:0; }
.pub-peta-card-teks b{ font-size:16px;line-height:1.25;font-weight:800;color:var(--text-primary); }
.pub-peta-card-teks span{ font-size:12px;line-height:1.45;color:var(--text-muted); }

@media(max-width:768px){
  .pub-peta-wrap{height:340px}
  .pub-peta-cards{grid-template-columns:1fr;gap:12px}
  .pub-peta-card-logo{width:60px;height:60px;flex-basis:60px}
}
/* ═══════════════════════════════════════════
   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;

  /* ── Fase 7b: sistem token ──
     Skala spacing kelipatan 4. Nama token = kelipatannya (`--sp-3` = 3x4px),
     jadi angkanya bisa dibaca tanpa membuka berkas ini.

     DILENGKAPI 16/09/2026 saat migrasi gaya inline dituntaskan. Skala semula
     hanya 4/8/12/16/24/32, dan itu memaksa nilai yang sebenarnya SUDAH tertib
     (20px, 28px, 40px — semuanya kelipatan 4) ikut bergeser hanya karena
     tokennya belum ada. Menambahkan --sp-5/7/10 membuat 33 titik semacam itu
     berpindah ke token TANPA berubah satu piksel pun.

     `--sp-05` (2px) adalah satu-satunya setengah-langkah, sengaja: jarak di
     dalam badge/pill kecil memang lebih rapat dari ritme kartu, dan memaksanya
     ke 4px melebarkan komponen yang justru dirancang mungil. Bukan izin
     membuat setengah-langkah lain. */
  --sp-05: 2px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* Tombol — DUA primer dengan makna beda (keputusan 👤 14/09/2026), bukan
     satu warna dipaksakan: hijau = simpan/konfirmasi (positif), biru =
     lanjut/navigasi wizard & seleksi aktif (netral). Bahaya = solid pastel
     merah, terbaca tanpa hover (bukan lagi teks merah di atas latar kaca). */
  --btn-primary-bg:       var(--d-g600);
  --btn-primary-bg-hover: var(--d-g700);
  --btn-accent-bg:        var(--d-blue);
  --btn-accent-bg-hover:  #1d4ed8;
  --btn-danger-bg:        #fee2e2;
  --btn-danger-bg-hover:  #fecaca;
  --btn-danger-fg:        #dc2626;
  --btn-danger-bd:        #fca5a5;
  --btn-disabled-op:      .55;
  --btn-focus-ring:       0 0 0 2px #fff, 0 0 0 4px #2563eb;

  /* Tipografi kartu — jarak judul↔caption sudah ditambal 10/09/2026;
     diformalkan jadi token di sini supaya konsisten dipakai lagi. */
  --fs-card-title: 14px;
  --fs-caption:    11.5px;
  --lh-caption:    1.45;
  --gap-caption:   var(--sp-1);
}

*, *::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; }
/* Item navigasi netral di dropdown akun (Fase 3 SIPPTAN v3) — .d-user-dd-item
   sengaja merah karena dibuat untuk "Keluar"; item biasa tidak boleh terbaca
   sebagai aksi destruktif. */
.d-user-dd-nav { color: var(--d-txt); }
.d-user-dd-nav:hover { background: var(--d-g100); color: var(--d-g700); }
.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-k2   { grid-template-columns: repeat(2,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: var(--fs-card-title); font-weight: 700; color: var(--d-txt);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.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;
}
/* Jarak judul↔caption dinaikkan sedikit (2→4px) supaya dua tipe teks itu tidak
   menempel — permintaan pemilik sistem 10/09/2026. Kini bersumber dari token
   tipografi (Fase 7b) alih-alih angka lepas. */
.d-cs   { font-size: var(--fs-caption); color: var(--d-muted); margin-top: var(--gap-caption); line-height: var(--lh-caption); }
.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); }


/* ── Sistem tombol (Fase 7b) ──
   Empat kategori: primer (2 warna bermakna beda) · sekunder (2 varian
   permukaan) · bahaya · tautan. Tak ada lagi kelas yang "jatuh polos" tanpa
   definisi (d-btn-pr pensiun 14/09/2026 — lihat git log kalau perlu riwayat). */
.d-btn {
  padding: var(--sp-2) var(--sp-3); border-radius: 9px; border: none;
  font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .14s;
  font-family: inherit;
}
.d-btn:disabled { opacity: var(--btn-disabled-op); cursor: default; }
.d-btn:focus-visible, .d-btn-xlsx:focus-visible { box-shadow: var(--btn-focus-ring); outline: none; }

/* Primer — hijau: simpan/konfirmasi (positif). */
.d-btn-g  { background: var(--btn-primary-bg); color: #fff; }
.d-btn-g:hover:not(:disabled) { background: var(--btn-primary-bg-hover); }

/* Primer — biru: lanjut/navigasi wizard, seleksi aktif (netral). */
.d-btn-p  { background: var(--btn-accent-bg); color: #fff; }
.d-btn-p:hover:not(:disabled) { background: var(--btn-accent-bg-hover); }

/* Sekunder di atas latar KACA (kartu dashboard). Border netral abu
   (ditambal 10/09/2026) — border putih 55% yang lama lenyap di kartu putih. */
.d-btn-gh {
  background: rgba(255,255,255,0.72);
  backdrop-filter: var(--d-glass);
  -webkit-backdrop-filter: var(--d-glass);
  border: 1.5px solid #cbd5e1; color: var(--d-txt);
}
.d-btn-gh:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }

/* Sekunder di atas permukaan PUTIH (modal). d-btn-gh dirancang untuk latar
   kaca dashboard — border putih 55%-nya lenyap di atas modal putih sehingga
   "Batal" terbaca sebagai tautan, bukan tombol. */
.d-btn-out {
  background: #fff; border: 1.5px solid #cbd5e1; color: var(--d-txt);
}
.d-btn-out:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }

/* Bahaya — solid pastel merah, terbaca TANPA hover. Sebelumnya tiap halaman
   menulis ulang kombinasi ini sendiri (atau, lebih buruk, menaruh teks merah
   di atas d-btn-gh yang transparan sehingga tak terlihat sama sekali sampai
   di-hover) — kini satu kelas untuk Hapus/Tolak/Hapus Draf di semua halaman. */
.d-btn-danger {
  background: var(--btn-danger-bg); color: var(--btn-danger-fg);
  border: 1.5px solid var(--btn-danger-bd);
}
.d-btn-danger:hover:not(:disabled) { background: var(--btn-danger-bg-hover); border-color: var(--btn-danger-fg); }

/* Nama orang di kolom tabel → halaman riwayat (v3 Fase 10).

   Putaran pertama memakai warna teks biasa + garis bawah titik-titik agar
   tidak "berisik" di tabel berisi ratusan baris. Terlalu samar: pemilik
   sistem sendiri tidak menemukan pintu masuknya dan mengira halaman riwayat
   belum punya jalan masuk sama sekali. Sekarang biru — warna yang sejak
   Fase 7b berarti navigasi — dan garis bawahnya muncul saat di-hover. */
.d-lnk-orang {
  color: var(--btn-accent-bg);
  text-decoration: none;
  font-weight: 600;
}
.d-lnk-orang:hover { color: var(--btn-accent-bg-hover); text-decoration: underline; }
.d-lnk-orang:focus-visible {
  outline: 2px solid var(--btn-accent-bg); outline-offset: 2px; border-radius: 3px;
}

/* Tautan/ekspor — dipakai khusus tombol unduh XLSX. */
.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: var(--sp-2) var(--sp-3);
  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: var(--btn-disabled-op); cursor: default; }

.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); }
/* `contain`, BUKAN `cover`: isinya logo institusi/program yang berbentuk
   bujur sangkar, sementara bingkainya melebar 175×96. `cover` memotong
   atas-bawah logo — tulisan melingkar di logo Polbangtan jadi terpenggal.
   Tinggi bingkai sengaja tidak diubah supaya tata letak grid tetap sama. */
.d-st-img  {
  width: 100%; height: 96px; display: block;
  object-fit: contain; padding: 9px;
  background: linear-gradient(135deg, rgba(22,163,74,0.06), rgba(13,148,136,0.10));
}
.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, .d-k2 { 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; }
/* Aktor tanpa akun (pengisi tracer, percobaan login username tak dikenal).
   Sengaja abu-abu netral: ketiga badge di atas memakai warna yang sudah
   berarti "role admin tertentu", dan meminjam salah satunya akan mengulang
   persis bug yang kelas ini dibuat untuk memperbaiki. */
.d-role-publik { background: #e5e7eb; color: #374151; 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; }
}

/* ════════════════════════════════════
   PUSTAKA GAMBAR (MediaPicker)
════════════════════════════════════ */
.d-media-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;
}
.d-media-item{
  display:flex;flex-direction:column;gap:6px;
  padding:6px;border-radius:10px;
  border:1.5px solid var(--d-border,#e2e8f0);
  background:#fff;cursor:pointer;text-align:left;
  font-family:inherit;transition:border-color .15s,box-shadow .15s;
}
.d-media-item:hover{border-color:#16a34a;box-shadow:0 4px 14px rgba(22,163,74,.15)}
.d-media-thumb{
  display:block;width:100%;aspect-ratio:4/3;border-radius:6px;
  background:#f1f5f9 center/contain no-repeat;
}
.d-media-nama{
  font-size:10px;color:var(--d-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.d-btn.is-disabled{opacity:var(--btn-disabled-op);pointer-events:none}

/* ════════════════════════════════════
   TABEL PIVOT (rekap alumni)
   Meniru lembar rekap Excel: baris unit, kolom tahun/status, TOTAL di
   tepi kanan dan bawah. Bukan DataTable — tidak ada paginasi, sortir,
   maupun pencarian; isinya agregat yang selalu muat satu layar.
════════════════════════════════════ */
.d-pivot-wrap { overflow-x: auto; padding: 0 14px 14px; }
.d-pivot {
  width: 100%; border-collapse: collapse; font-size: 12px;
  color: var(--d-txt);
}
.d-pivot th, .d-pivot td {
  padding: 7px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.d-pivot th {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; color: var(--d-soft);
  border-bottom: 1.5px solid rgba(0,0,0,0.10);
}
/* Kolom unit satu-satunya yang rata kiri — sisanya angka. */
.d-pivot .d-pivot-unit { text-align: left; font-weight: 700; }
.d-pivot .d-pivot-no {
  display: inline-block; min-width: 18px; color: var(--d-muted);
  font-weight: 600;
}
.d-pivot .d-pivot-total { font-weight: 800; background: rgba(22,163,74,0.06); }
.d-pivot tbody tr:hover { background: rgba(22,163,74,0.04); }
.d-pivot tr.on { background: rgba(22,163,74,0.10); }
.d-pivot tr.on td { font-weight: 800; }
.d-pivot tr.d-pivot-sum td {
  border-top: 1.5px solid rgba(0,0,0,0.12);
  border-bottom: none; font-weight: 800;
  background: rgba(0,0,0,0.03);
}
/* Subtotal per institusi (rekap prodi). Lebih redup dari baris TOTAL supaya
   keduanya tidak terbaca sederajat, tapi tetap tebal seperti diminta. */
.d-pivot tr.d-pivot-subsum td {
  font-weight: 800;
  background: rgba(22,163,74,0.05);
  border-top: 1px solid rgba(0,0,0,0.10);
}
/* Sel institusi yang direntangkan: namanya dinaikkan ke atas supaya sejajar
   dengan baris prodi pertamanya, bukan melayang di tengah rentangan. */
.d-pivot td.d-pivot-unit[rowspan] {
  vertical-align: top;
  border-right: 1px solid rgba(0,0,0,0.06);
}

/* Tabel detail dengan lebar kolom terkunci — lihat catatan di DataTable.jsx.
   `table-layout: fixed` membuat lebar diambil dari <colgroup>, bukan dihitung
   ulang dari isi tiap halaman. Isi yang kepanjangan dipotong dengan elipsis
   supaya tidak mendorong kolom sebelahnya. */
.d-tbl-fixed { table-layout: fixed; }
.d-tbl-fixed td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d-tbl-fixed thead th { overflow: hidden; }
/* Nomor tingkat sortasi (2, 3) di sebelah panah kolom. */
.d-th-sort-no { font-size: 8px; font-weight: 800; margin-left: 1px; opacity: .75; }

/* ─── Penyunting instrumen tracer (v3 Fase 10d) ─────────────── */

/*
  Panel Struktur di kiri, kartu yang disunting di kanan. Di bawah 1100px
  pohonnya TURUN ke atas daftar, bukan disembunyikan: percabangan adalah hal
  yang paling mudah hilang dari pandangan di layar kecil, dan justru di sanalah
  menggulir dua puluh kartu paling mahal.
*/
.d-instrumen-susun { display: grid; gap: var(--sp-4); }

@media (min-width: 1100px) {
  .d-instrumen-susun {
    grid-template-columns: minmax(240px, 300px) 1fr;
    align-items: start;
  }
}
/* ─────────────────────────────────────────────────────────
   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('/assets/login-bg.webp');
  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; }
}
/* ═══════════════════════════════════════════════════════════════
   styles/responsive.css — Aturan layar HP & tablet
   ───────────────────────────────────────────────────────────────
   Sprint pra-rilis Fase 3 C. Berkas baru, tidak memporting modul lama.

   public.css, dashboard.css, dan login.css adalah hasil port dari
   code-base lama dan TIDAK disunting di tempatnya. Semua penyesuaian
   layar kecil ditambahkan DI SINI, dan berkas ini diimpor paling
   akhir di main.jsx supaya menang pada kekhususan yang sama.

   Titik patah baku (aturan BARU hanya memakai tiga ini):
     480px  HP kecil
     768px  HP besar dan tablet tegak
     1024px tablet rebah
   Titik patah lama di berkas port (640 · 720 · 900) dibiarkan. Pita
   721–768 sengaja tumpang tindih dengan rel ikon sidebar: aturan di
   sini aman berlaku di kedua keadaan sidebar.

   `!important` hanya dipakai untuk mengalahkan gaya INLINE di JSX
   (ratusan `style={{…}}` warisan). Tiap pemakaiannya diberi alasan.
═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════
   1. LATAR
════════════════════════════════════ */

/* Foto hero dashboard: dulu diambil dari images.unsplash.com lewat gaya
   inline, sekarang berkas sendiri. Dipasang di sini supaya versi kecilnya
   bisa dipilih lewat @media (gaya inline tidak bisa). */
.d-hero-bg-foto { --d-hero-img: url('/assets/dash-hero.webp'); }

/* Tempat peta beranda ditahan selagi Leaflet diunduh (lihat Home.jsx),
   supaya testimoni dan footer tidak melompat saat petanya tiba. */
.pub-peta-tunggu { min-height: 520px; }

@media (max-width: 1024px) {
  /* `background-attachment: fixed` berat di HP (seluruh latar digambar ulang
     tiap gulir) dan diabaikan iOS Safari. `.pub-bg` sudah `position: fixed`,
     jadi `fixed` kedua itu memang tidak menambah apa-apa. */
  .pub-bg { background-attachment: scroll; }

  /* Dashboard: latarnya menempel di `.d-app` yang ikut memanjang bersama
     isi. Tanpa `fixed`, `cover` akan meregangkan gambarnya setinggi seluruh
     halaman. Jadi gambarnya dipindah ke lapisan `::before` yang sudah
     `position: fixed`, dan hasilnya sama dengan tampilan desktop. */
  .d-app { background-image: none; }
  .d-app::before { background: url('/assets/background.webp') center / cover no-repeat; }
}

@media (max-width: 768px) {
  /* Versi 960 px (6 KB) untuk layar kecil; aslinya 1920 px. */
  .pub-bg { background-image: url('/assets/background-sm.webp'); }
  .d-app::before { background-image: url('/assets/background-sm.webp'); }
  .login-bg { background-image: url('/assets/login-bg-sm.webp'); }
  .d-hero-bg-foto { --d-hero-img: url('/assets/dash-hero-sm.webp'); }
  .pub-peta-tunggu { min-height: 380px; }
}

/* ════════════════════════════════════
   2. HALAMAN PUBLIK
════════════════════════════════════ */
@media (max-width: 768px) {
  /* Panah hero berada di tengah tinggi layar, tepat di atas kartu judul:
     huruf pertama judulnya tertutup. Dinaikkan ke bawah navbar. */
  .hero-arrow { top: 124px; transform: none; width: 44px; height: 44px; }
  .hero-arrow.prev { left: 16px; }
  .hero-arrow.next { right: 16px; }

  /* Titik slide 8 px terlalu kecil untuk jari. Tampilannya dibiarkan;
     yang diperbesar daerah sentuhnya, dan jaraknya supaya tidak tumpang. */
  .hero-dots { gap: 16px; }
  .hero-dot { position: relative; }
  .hero-dot::after { content: ''; position: absolute; inset: -16px -8px; }

  /* Target sentuh minimal 44 px. */
  .pub-ham { width: 44px; height: 44px; }
  .pub-nav-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .pub-mob-close { width: 44px; height: 44px; }
  .pub-mob-link { min-height: 44px; display: flex; align-items: center; }
  .pub-mob-cta { min-height: 48px; display: flex; align-items: center; justify-content: center; }
  .stats-tab { min-height: 44px; }
  .btn-primary, .btn-outline { min-height: 48px; }

  /* Isian di bawah 16 px membuat iOS memperbesar halaman sendiri saat
     isiannya disentuh, dan tidak mengembalikannya. */
  .pub-section select, .stats-panel select { font-size: 16px; min-height: 44px; }

  /* Peta beranda 460 px terlalu tinggi untuk layar 360 px: Indonesia yang
     melebar hanya mengisi sepertiganya, sisanya laut kosong yang harus
     digulir lewat. */
  .pub-peta-wrap { height: 320px; }
}

/* ════════════════════════════════════
   3. LOGIN
════════════════════════════════════ */
@media (max-width: 768px) {
  .form-input { font-size: 16px; }
  .back-home { min-height: 44px; }
  /* Tombol "tampilkan password" 26 px: ikonnya dibiarkan, daerah sentuhnya
     diperluas jadi 44 px. Dipakai juga di halaman Akun. */
  .pw-intip::after { content: ''; position: absolute; inset: -9px; }
}

/* ════════════════════════════════════
   4. DASHBOARD
════════════════════════════════════ */

/* Anak grid berlebar minimum `auto` tidak bisa menyusut di bawah isinya:
   satu tabel atau deret filter yang lebar mendorong seluruh halaman melebar.
   Berlaku di semua lebar; di desktop tidak mengubah apa pun yang terlihat. */
.d-g2 > *, .d-g3 > *, .d-g13 > *, .d-g31 > *, .d-instrumen-susun > * { min-width: 0; }

@media (max-width: 768px) {
  /* ── Header ── Nama akun + caret membuat header 46 px lebih lebar dari
     layar 360 px, sehingga SEMUA halaman dashboard bergulir mendatar.
     Namanya tetap terbaca di kepala menu akun saat avatar disentuh. */
  .d-top { padding: 0 12px; gap: 8px; }
  .d-top-actions { gap: 2px; min-width: 0; }
  .d-user { padding: 3px; margin-left: 0; gap: 0; }
  .d-user-txt, .d-user-btn > svg { display: none; }
  .d-user-btn { gap: 0; min-width: 44px; min-height: 44px; justify-content: center; }
  .d-acct-status, .d-acct-info { min-width: 0; }
  .d-acct-role { overflow: hidden; text-overflow: ellipsis; }
  .d-iconbtn { width: 44px; height: 44px; }

  /* ── Grid ── Blok ≤720 px di dashboard.css merapatkan kartu KPI tetapi
     melewatkan grid grafik, jadi dua grafik berdampingan dalam 155 px. */
  .d-g2, .d-g3, .d-g13, .d-g31 { grid-template-columns: 1fr; }

  /* ── Kepala kartu ── Deret filter di kanan judul diberi `flexShrink: 0`
     lewat gaya inline (DashDbCommon), jadi tidak bisa turun baris maupun
     menyusut. `!important` di sini karena itu gaya inline. */
  .d-chd { flex-wrap: wrap; }
  .d-chd > * { min-width: 0; max-width: 100%; flex-shrink: 1 !important; }
  .d-card select { max-width: 100%; }

  /* ── Isian ── minimal 16 px (alasan yang sama dengan halaman publik).
     `!important`: sebagian isian membawa `fontSize` inline. `.d-overlay`
     ikut disebut karena pustaka gambar dirender di luar `.d-app`. */
  .d-app input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
  .d-app select,
  .d-app textarea,
  .d-overlay input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
  .d-overlay select,
  .d-overlay textarea { font-size: 16px !important; }
  .d-app input[type='date'] { min-width: 158px; }

  /* ── Target sentuh ── */
  .d-btn, .d-btn-xlsx, .d-hbtn, .d-sel, .d-fld-sel, .d-fld-inp,
  .d-scope-tab, .d-mode-tab, .dsh-tab, .dsh-export-btn, .pm-fbtn, .pm-prov-reset, .cl-add { min-height: 44px; }
  a.d-btn, a.d-hbtn { display: inline-flex; align-items: center; }
  .d-pbtn { min-width: 40px; min-height: 40px; }
  .d-mitem, .d-msub a, .d-user-dd-item { min-height: 44px; }
  .d-side-close { width: 44px; height: 44px; }
  .d-sbox { min-height: 44px; }
  /* Tombol saring di kepala kolom (20 px): cukup diperbesar ke 32 px.
     Lebih dari itu kepala tabelnya ikut meninggi di setiap kolom. */
  .d-th-fbtn { min-width: 32px; min-height: 32px; }

  /* ── Laci menu ── Bayangannya dipasang pada laci itu sendiri, jadi saat
     laci tertutup (digeser keluar layar ke kiri) bayangannya masih jatuh ke
     dalam layar sebagai garis hijau gelap di tepi kiri. Terlihat di HP
     sungguhan 08/10/2026. Bayangan hanya saat laci terbuka. */
  .d-side:not(.mob-open) { box-shadow: none; }

  /* ── Kotak centang di tabel ── Kolomnya 38 px dan selnya memotong isi
     dengan "…"; di Android kotak centangnya sedikit lebih lebar, sehingga
     tiga titik itu muncul di samping setiap kotak. */
  .d-tbl-fixed td:has(> input[type='checkbox']),
  .d-tbl-fixed th:has(> input[type='checkbox']) { text-overflow: clip; }

  /* ── Pemberitahuan ── tidak menempel di pojok kanan dengan lebar isinya,
     supaya kalimat panjang tidak terpotong tepi layar. */
  .d-toast { left: 12px; right: 12px; bottom: 16px; }

  /* ── Peta ── Tinggi peta dihitung dari tinggi layar penuh. Di HP itu
     "menjebak" gulir: seluruh layar adalah peta, dan menggeser jari hanya
     menggeser peta. Disisakan ruang untuk menggulir halaman di tepinya. */
  .pm-page { height: auto; min-height: calc(100vh - var(--d-topbar-h)); overflow: visible; }
  .pm-map-wrap { height: 58vh; max-height: 460px; }
  /* Pemilih provinsi menempel di kanan baris filter dan tidak boleh
     menyusut; di HP ia turun ke baris sendiri selebar layar. */
  .pm-prov-bar { margin-left: 0; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .pm-prov-sel { height: 44px; max-width: none; flex: 1 1 140px; }
  .pm-stat { min-width: 0; }
  /* Rincian provinsi: di desktop ia panel 420 px di sisi kanan, di HP
     lebarnya jadi selayar penuh dan menutup petanya, sehingga provinsi lain
     tidak bisa dipilih sebelum panel ditutup (dilaporkan 👤 dari HP
     08/10/2026). Di layar kecil ia jadi lembar bawah setinggi separuh layar;
     peta tetap terlihat dan bisa disentuh di atasnya. Ruang kosong di bawah
     halaman ditambah selama lembarnya terbuka, supaya peta bisa digulir naik
     ke bagian layar yang tidak tertutup.
     `!important`: `marginTop` panel ini gaya inline. */
  .pm-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: 48vh; margin-top: 0 !important;
    border-left: 0; border-top: 1.5px solid var(--d-bdr2);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 40px rgba(5,46,22,.18);
  }
  .pm-panel-hd { padding: 12px 16px 10px; }
  .pm-close { width: 44px; height: 44px; }
  .pm-tab { min-height: 44px; }
  .pm-page:has(.pm-panel) { padding-bottom: 50vh; }
  /* Saat lembar dibuka, DashPeta menggulir peta ke atas layar; jarak ini
     menahannya tepat di bawah header yang menempel. */
  .pm-map-wrap { scroll-margin-top: calc(var(--d-topbar-h) + 8px); }

  /* Tombol perbesar/perkecil Leaflet 30 px, di kedua peta. */
  .leaflet-touch .leaflet-bar a, .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
}

@media (max-width: 480px) {
  .d-wrap { padding: 16px 12px 28px; }
  .d-title { font-size: 21px; }
}

/* ════════════════════════════════════
   5. KONTRAS (semua lebar layar)
════════════════════════════════════ */
/* Bukan soal layar kecil; ditaruh di sini karena berkas port tidak disunting
   di tempatnya. Lima teks yang paling pucat menurut audit Fase 3 (rasio di
   bawah 2,5:1) digelapkan atas permintaan pemilik sistem 08/10/2026, dengan
   rona yang sama. Temuan kontras lain (rasio ±3) sengaja DIBIARKAN: sudah
   dilihat dan dinilai cukup terbaca. Lencana Kurikulum diubah di komponennya
   (Kurikulum.jsx), tiga sisanya di sini. */

/* Baris hak cipta footer dan label "SKS": abu-hijau paling muda (#a8c4b0,
   1,7–1,9:1) diganti abu-hijau tua dari palet yang sama (6,1–6,6:1). */
.footer-bottom, .kur-sks-lbl { color: var(--text-secondary); }

/* Tombol utama di hero dashboard: teks putih di atas hijau #22c55e hanya
   2,3:1. Hijaunya DIPERTAHANKAN (ia yang membuat tombol ini menonjol di atas
   foto hijau tua); teksnya yang dijadikan hijau sangat tua (6,5:1). */
.d-hbtn-p, .d-hbtn-p:hover { color: #052e16; }

/* ════════════════════════════════════
   6. FOKUS PAPAN KETIK
════════════════════════════════════ */
/* Pemicu menu akun kini <button> (lihat DashLayout). Gaya bawaan tombolnya
   dibuang supaya tampilannya persis seperti <div> yang digantikannya. */
.d-user-btn {
  all: unset; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; border-radius: 999px;
}
.d-user.open .d-user-btn > svg { transform: rotate(180deg); }
.d-user-btn:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }

/* Teks yang hanya untuk pembaca layar: ada di pohon aksesibilitas, tidak
   terlihat dan tidak memakan tempat. Bukan `display: none`, yang juga
   menyembunyikannya dari pembaca layar. */
.hanya-pembaca-layar {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Wadah tabel bergulir kini bisa difokus (lihat DataTable, PivotTable).
   Garis fokusnya dibuat jelas, dan hanya untuk papan ketik. */
.d-tbl-scroll:focus-visible,
.d-pivot-wrap:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }