body {
font-family: Arial, sans-serif;
background: #f0f8ff;
color: #333;
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 700px;
background: #fff;
margin: 30px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);

}
h2 {
text-align: center;
color: #0077b6;
}
form {
margin-bottom: 20px;
}
.form input, .search input {
width: calc(100% - 20px);
padding: 8px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button, .batal {
background: #0077b6;
color: #fff;
padding: 8px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
button:hover, .batal:hover {
background: #023e8a;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ccc;
}
th {
background: #0077b6;
color: white;
}
td, th {
padding: 8px;
text-align: center;
}
.search {
display: flex;
gap: 10px;
margin-bottom: 15px;
}