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

*{
    box-sizing:border-box;
}


body{

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

    background:#f4f7fb;

    margin:0;

    padding:30px;

    color:#333;

}



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


h1{

    text-align:center;

    color:#046C73;

    font-size:32px;

    margin-bottom:20px;

}



h2{

    color:#046C73;

    text-align:center;

}



/* =========================
   BUTTON
========================= */


button{

    border:none;

    padding:10px 18px;

    border-radius:10px;

    cursor:pointer;

    background:#046C73;

    color:white;

    font-size:14px;

    transition:.3s;

}



button:hover{

    transform:translateY(-2px);

    opacity:.85;

}



/* BUTTON ACTION */


.editBtn{

    background:#f39c12;

}



.hapusBtn{

    background:#e74c3c;

}


#logoutBtn{

    background:#34495e;

}



#exportBtn{

    background:#27ae60;

}





/* =========================
   STATISTIK CARD
========================= */


.stats{


display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin:30px 0;


}



.card{


background:white;

width:200px;

padding:25px;

border-radius:20px;

text-align:center;


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


transition:.3s;


}



.card:hover{

transform:translateY(-5px);

}



.card h3{

color:#555;

}



.card h1{

font-size:40px;

margin:10px;

color:#046C73;

}






/* =========================
   SEARCH
========================= */


#searchAlumni{


display:block;

margin:20px auto;

width:350px;

max-width:90%;

padding:14px;

border-radius:12px;

border:1px solid #ddd;

font-size:15px;


}






/* =========================
   TABLE
========================= */


table{


width:95%;

margin:auto;

background:white;

border-collapse:collapse;

border-radius:15px;

overflow:hidden;


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


}



th{


background:#046C73;

color:white;

padding:15px;


}



td{


padding:12px;

text-align:center;

border-bottom:1px solid #eee;


}




tr:hover{

background:#f1fafa;

}





.namaAlumni{

background:none;

color:#046C73;

font-weight:bold;

padding:5px;

}





/* =========================
   FOTO
========================= */


img{

object-fit:cover;

}






/* =========================
   MODAL
========================= */


.modal{


display:none;

position:fixed;

z-index:999;

left:0;

top:0;


width:100%;

height:100%;


background:
rgba(0,0,0,.5);


justify-content:center;

align-items:center;


}



.modal-content{


background:white;


width:400px;

max-width:90%;


padding:30px;


border-radius:20px;


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


animation:
muncul .3s;


}



@keyframes muncul{


from{

transform:scale(.7);

opacity:0;

}


to{

transform:scale(1);

opacity:1;

}


}




#closeModal,
#closeEdit{


float:right;

cursor:pointer;


font-size:20px;


}





/* =========================
   FORM
========================= */


form{


background:white;


width:400px;


max-width:95%;


margin:30px auto;


padding:30px;


border-radius:20px;


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


}



input,
textarea{


width:90%;


padding:12px;


margin:8px;


border-radius:10px;


border:1px solid #ddd;


font-size:14px;


}




textarea{


height:100px;


}





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


@media(max-width:700px){


body{

padding:15px;

}



.stats{

flex-direction:column;

align-items:center;


}



.card{

width:90%;


}



table{


font-size:12px;


}



button{

font-size:12px;

padding:8px;


}



}/* =====================
   BACK BUTTON MOBILE
===================== */

.back-button{

display:block;

width:90%;

max-width:400px;

margin:20px auto;

padding:15px;

background:#0B6B4F;

color:white;

border-radius:30px;

text-align:center;

text-decoration:none;

font-size:16px;

font-weight:bold;

box-shadow:

0 8px 20px rgba(0,0,0,.15);

transition:.3s;

}



.back-button:hover{

background:#084d39;

transform:translateY(-3px);

}



@media(max-width:600px){

.back-button{

width:90%;

font-size:15px;

padding:14px;

}

}