/* =====================================
   IKASU TRACKING DESIGN
   Kecamatan Siantar Utara
===================================== */


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


body{

    font-family:'Segoe UI',sans-serif;

    background:#eef5ff;

    min-height:100vh;

}





/* CONTAINER */

.tracking-container{

    width:90%;

    max-width:1000px;

    margin:40px auto;

}






/* HEADER */

.tracking-header{


    background:linear-gradient(
        135deg,
        #005bea,
        #00c6fb
    );


    color:white;

    padding:45px 30px;

    border-radius:25px;


    text-align:center;


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


}



.tracking-header h1{

    font-size:38px;

    font-weight:800;

    margin-bottom:10px;

}



.tracking-header p{

    font-size:16px;

    opacity:.95;

}







/* SEARCH */

.search-card{


    background:white;


    padding:25px;


    margin-top:25px;


    border-radius:20px;


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


}



.search-card input{


    height:50px;

    border-radius:12px 0 0 12px;


}



.search-card button{


    width:120px;

    border-radius:0 12px 12px 0;


}







/* CARD UTAMA */


.tracking-card{


    background:white;


    margin-top:30px;


    padding:30px;


    border-radius:25px;


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


    overflow:hidden;


}




.pelayanan-card{

    border-top:8px solid #0d6efd;

}



.pengaduan-card{

    border-top:8px solid #ff9800;

}







/* TITLE */


.card-header-custom{


    font-size:24px;


    font-weight:800;


    margin-bottom:25px;


    color:#0d6efd;


}



.pengaduan-card .card-header-custom{

    color:#ff9800;

}








/* DATA */


.detail-data{


    display:grid;


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


    gap:20px;


    margin-bottom:30px;


}



.detail-data p{


    background:#f8faff;


    padding:15px;


    border-radius:15px;


    border-left:4px solid #0d6efd;


}



.pengaduan-card .detail-data p{


    border-left-color:#ff9800;


}





.detail-data strong{


    color:#555;


}







/* TIMELINE */


.timeline{


    position:relative;


    margin-top:30px;


}




.timeline:before{


    content:"";


    position:absolute;


    left:25px;


    top:0;


    bottom:0;


    width:3px;


    background:#0d6efd;


}



.pengaduan-card .timeline:before{


    background:#ff9800;


}





.timeline-item{


    display:flex;


    gap:20px;


    margin-bottom:35px;


    position:relative;


}




.timeline-icon{


    width:52px;


    height:52px;


    min-width:52px;


    border-radius:50%;


    background:#0d6efd;


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:20px;


    z-index:2;


}




.timeline-icon.orange{


    background:#ff9800;


}






.timeline-item h5{


    font-weight:700;


    margin-bottom:8px;


}



.timeline-item p{


    color:#666;


}







/* BUTTON */


.btn{


    border-radius:10px;


}






/* FOTO PENGADUAN */


.foto-track{


    width:100%;


    max-width:450px;


    height:280px;


    object-fit:cover;


    border-radius:18px;


    margin-top:10px;


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


}







/* RESPONSIVE */


@media(max-width:768px){



.tracking-container{

    width:95%;

}




.tracking-header h1{

    font-size:28px;

}




.detail-data{

    grid-template-columns:1fr;

}




.search-card button{

    width:90px;

}




.timeline-item{

    gap:15px;

}




.foto-track{

    height:220px;

}



}
.foto-track{

cursor:pointer;

transition:.3s;

}



.foto-track:hover{


transform:scale(1.03);


}
.badge{

padding:10px 18px;

font-size:14px;

border-radius:20px;

}