/*GENERAL*/

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

html,
body{

    width:100%;
    height:100%;

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

}

body{

    overflow:hidden;

}


/*MAP*/


#map{

    width:100%;
    height:100vh;

}



/*HEADER*/


#header{

    position:absolute;

    top:15px;
    left:50%;

    transform:translateX(-50%);

    z-index:1000;

    width:90%;
    max-width:700px;

    background:rgba(255,255,255,.90);

    backdrop-filter:blur(8px);

    border-radius:12px;

    padding:15px;

    text-align:center;

    box-shadow:0 4px 15px rgba(0,0,0,.15);

}


#header h1{

    color:#1b5e20;

    font-size:26px;

    font-weight:700;

}


#header p{

    margin-top:6px;

    font-size:14px;

    color:#555;

}


/*FOOTER*/


#footer{

    position:absolute;

    right:15px;

    bottom:12px;

    z-index:1000;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(6px);

    padding:6px 12px;

    border-radius:8px;

    font-size:12px;

    color:#444;

}


/*POPUP*/


.leaflet-popup-content{

    margin:10px;

    font-size:14px;

    line-height:1.5;

}

.leaflet-popup-content h3{

    margin-bottom:8px;

    color:#1b5e20;

}

.leaflet-popup-content img{

    width:100%;

    border-radius:8px;

    margin-bottom:10px;

}


/*LEGEND*/


.legend{

    background:white;

    padding:12px;

    border-radius:10px;

    box-shadow:0 3px 10px rgba(0,0,0,.2);

    font-size:13px;

    line-height:1.7;

}


/*LAYER CONTROLER*/


.leaflet-control-layers{

    border-radius:10px;

    box-shadow:0 3px 12px rgba(0,0,0,.2);

}


/*RESPONSIVE*/

@media(max-width:768px){

#header{

    width:95%;

    padding:12px;

}

#header h1{

    font-size:20px;

}

#header p{

    font-size:12px;

}

#footer{

    font-size:10px;

}

}


/* LEAFLET POPUP */

.leaflet-popup-content-wrapper{

    border-radius:12px;

}

.leaflet-popup-content{

    margin:12px;

    font-size:14px;

    line-height:1.5;

}


/* CUSTOM POPUP */

.popup-content{

    width:260px;

    max-height:420px;

    overflow-y:auto;

}

.popup-image{

    width:100%;

    height:170px;

    object-fit:cover;

    border-radius:10px;

    margin-bottom:12px;

    box-shadow:0 2px 8px rgba(0,0,0,.2);

}

.popup-content h3{

    margin-bottom:12px;

    text-align:center;

    color:#1b5e20;

    font-size:18px;

    font-weight:700;

}

.popup-table{

    width:100%;

    border-collapse:collapse;

    font-size:13px;

}

.popup-table tr{

    border-bottom:1px solid #eeeeee;

}

.popup-table tr:last-child{

    border-bottom:none;

}

.popup-table th{

    width:45%;

    text-align:left;

    vertical-align:top;

    padding:6px 8px 6px 4px;

    color:#2e7d32;

    font-weight:600;

}

.popup-table td{

    padding:6px 4px 6px 12px;

    color:#444;

}

/* Tombol Google Maps */

.popup-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    margin-top:12px;

    padding:10px;

    background:#2E7D32;

    color:#fff !important;

    text-decoration:none;

    border-radius:8px;

    font-weight:600;

    transition:.25s;

}

.popup-button:hover{

    background:#1B5E20;

    transform:translateY(-1px);

}

/*LEGEND*/

.legend{

    background:white;

    padding:10px;

    border-radius:10px;

    box-shadow:0 3px 12px rgba(0,0,0,.25);

    font-size:13px;

    width:220px;

    cursor:pointer;

}

.legend-title{

    font-weight:bold;

    color:#1b5e20;

    font-size:15px;

}

.legend-content{

    margin-top:10px;

}

.legend.collapsed .legend-content{

    display:none;

}

.legend img{

    width:18px;

    height:18px;

    vertical-align:middle;

    margin-right:8px;

}

.legend hr{

    margin:8px 0;

    border:none;

    border-top:1px solid #ddd;

}

.line{

    display:inline-block;

    width:35px;

    margin-right:8px;

    vertical-align:middle;

}

.kab{

    border-top:2px dashed #616161;

}

.kec{

    border-top:2px dashed #757575;

}

.kel{

    border-top:2px dashed #FB8C00;

}

.pad{

    border-top:3px solid #FB8C00;

}