/* =========================
   BARBERSHOP KINGSZ IGNA
   STYLE CSS
========================= */


/* BODY */

body{
    margin:0;
    padding:0;

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

    background:
    linear-gradient(
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.9)
    ),
    url(logo\ barbershop.png);

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:white;
}


/* CONTAINER */

.container{

    width:90%;
    margin:auto;

    padding-top:40px;

}



/* JUDUL */

h1{

    text-align:center;

    font-size:50px;

    color:#fcfbf9;

    letter-spacing:3px;

    text-shadow:
    0 0 20px #fdfcf9;

}



h2{

    color:#f9f9f6;

}



/* SUBTITLE */

.sub{

    text-align:center;

    color:#ccc;

    font-size:20px;

}



/* =================
   DASHBOARD MENU
================= */


.menu{

    margin-top:50px;

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}



.menu a{

    width:220px;

    padding:30px;


    background:
    rgba(20,20,20,0.85);


    border:1px solid #d4af37;

    border-radius:20px;


    text-decoration:none;

    color:white;


    text-align:center;


    transition:.3s;


    backdrop-filter:blur(8px);

}



.menu a:hover{

    transform:translateY(-12px);

    background:#d4af37;

    color:black;

    box-shadow:
    0 0 25px #d4af37;

}



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


.btn-tambah{

    display:inline-block;


    margin:20px 0;


    padding:12px 20px;


    background:#d4af37;


    color:black;


    border-radius:10px;


    text-decoration:none;


    font-weight:bold;


}



.btn-tambah:hover{

    background:white;

}




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


table{


    width:100%;


    border-collapse:collapse;


    margin-top:20px;


    background:
    rgba(20,20,20,0.9);


    border-radius:15px;


    overflow:hidden;


}




th{


    background:#d4af37;


    color:black;


    padding:15px;


    font-size:18px;


}



td{


    padding:15px;


    text-align:center;


    border-bottom:1px solid #444;


}



tr:hover{


    background:#333;


}



/* =================
   AKSI EDIT HAPUS
================= */


.aksi a{


    padding:8px 15px;


    border-radius:8px;


    text-decoration:none;


    margin:3px;


    display:inline-block;


}



.edit{


    background:#3498db;

    color:white;

}



.hapus{


    background:#e74c3c;

    color:white;

}



.edit:hover,
.hapus:hover{


    opacity:.7;


}



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


form{


    width:450px;


    max-width:90%;


    margin:30px auto;


    padding:30px;


    background:
    rgba(20,20,20,0.9);


    border-radius:20px;


    border:1px solid #d4af37;


}



label{


    color:#d4af37;

    font-weight:bold;


}



input,
select{


    width:100%;


    box-sizing:border-box;


    padding:12px;


    margin:10px 0;


    border:none;


    border-radius:10px;


    background:#333;


    color:white;


}




button{


    width:100%;


    padding:12px;


    margin-top:15px;


    background:#d4af37;


    color:black;


    border:none;


    border-radius:10px;


    cursor:pointer;


    font-weight:bold;


}



button:hover{


    background:white;


}



/* LINK */

a{


    color:#d4af37;


}



/* FOOTER */

footer{


    text-align:center;

    margin-top:50px;

    color:#aaa;


}