.search-pin{

    color:#ff1744;

    font-size:40px;

    text-shadow:
    0 2px 5px rgba(0,0,0,.5);

}


.search-marker{

    background:none;

    border:none;

}
/* =====================================
   LEGEND RPI
===================================== */


.rpi-legend{

    background:rgba(15,23,42,.95);

    color:white;

    padding:12px;

    border-radius:10px;

    font-size:13px;

    line-height:22px;

}



.legend-box{

    display:inline-block;

    width:16px;

    height:8px;

    margin-right:8px;

    border-radius:3px;

}



.rpi-merah{

    background:#ff0000;

}


.rpi-oranye{

    background:#ff9800;

}


.rpi-kuning{

    background:#ffd600;

}


.rpi-hijau{

    background:#00c853;

}


.rpi-biru{

    background:#1565c0;

}
/* ===============================
GLOBAL
================================ */

body{

	margin:0;

	background:#0b1220;

	font-family:
	"Segoe UI",
	Arial,
	sans-serif;

	color:#fff;

}



/* ===============================
GRID
================================ */


.dashboard-grid{


	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:25px;

	padding:25px;


}





/* ===============================
CARD DARK MODERN
================================ */


.info-card{


	position:relative;


	background:
	linear-gradient(
		145deg,
		#182235,
		#0f172a
	);


	border-radius:18px;


	padding:22px;


	border:
	1px solid rgba(255,255,255,.08);


	box-shadow:


	0 10px 30px rgba(0,0,0,.45);


	overflow:hidden;


	transition:.35s;


}





.info-card::before{


	content:"";


	position:absolute;


	width:120px;


	height:120px;


	right:-40px;


	top:-40px;



	background:


	radial-gradient(

		circle,

		rgba(34,197,94,.35),

		transparent 70%

	);


}





.info-card:hover{


	transform:translateY(-8px);


	border-color:#22c55e;


	box-shadow:


	0 15px 40px rgba(34,197,94,.25);


}






/* ===============================
TITLE
================================ */


.card-title{


	font-size:14px;


	font-weight:700;


	margin-bottom:20px;


	display:flex;


	align-items:center;


}





.card-title::before{


	content:"";


	width:5px;


	height:22px;


	background:#22c55e;


	border-radius:5px;


	margin-right:10px;


}






/* ===============================
KPI
================================ */


.card-kpi{


	text-align:center;





	margin-bottom:15px;


	border-bottom:


	1px solid rgba(255,255,255,.12);


}





.card-kpi strong{


	display:block;


	font-size:20px;


	font-weight:800;


	color:white;


}





.card-kpi small{


	display:block;


	margin-top:5px;


	font-size:12px;


	font-weight:250;


	color:#22c55e;


}







/* ===============================
ROW
================================ */


.status-row,
.list-row{


	display:flex;


	justify-content:space-between;


	align-items:center;


	margin-bottom:17px;


	font-size:14px;


	color:#cbd5e1;


}






.value{


	font-size:14px;


	font-weight:800;


	color:white;


}






/* ===============================
BADGE
================================ */


.badge{


	padding:6px 14px;


	border-radius:20px;


	font-size:12px;


	font-weight:700;


	display:flex;


	align-items:center;


	gap:6px;


}





.badge::before{


	content:"";


	width:7px;


	height:7px;


	border-radius:50%;


	background:white;


}






.baik{


	background:rgba(34,197,94,.18);


	color:#4ade80;


}





.sedang{


	background:rgba(234,179,8,.18);


	color:#facc15;


}





.ringan{


	background:rgba(249,115,22,.18);


	color:#fb923c;


}





.berat{


	background:rgba(239,68,68,.18);


	color:#f87171;


}






/* ===============================
RESPONSIVE
================================ */


@media(max-width:1200px){


	.dashboard-grid{


		grid-template-columns:repeat(2,1fr);


	}


}




@media(max-width:600px){


	.dashboard-grid{


		grid-template-columns:1fr;


	}


}