/* ===== Reset & dasar ===== */
* {box-sizing: border-box; margin:0; padding:0;}
body {font-family: Arial, sans-serif; background:#f5f6fa; color:#333;}
a {text-decoration:none; color:#3498db;}
h1,h2,h3,h4,h5,h6 {margin-bottom:10px;}
input, select, button, textarea {font-family: inherit;}

/* ===== Header ===== */
header {
  background: #3498db;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
header h1 {font-size: 1.2rem;}
header button {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}
header button:hover {background:#c0392b;}

/* ===== Sidebar ===== */
aside {
  background: #ecf0f1;
  padding: 15px;
  width: 220px;
  min-width: 180px;
  height: calc(100vh - 80px);
  float: left;
  transition: all 0.3s;
}
aside h3 {margin-bottom:10px;}
aside ul {list-style:none;}
aside ul li {margin:10px 0;}
aside ul li a {display:block; padding:8px; border-radius:6px; transition:0.3s;}
aside ul li a:hover {background:#3498db; color:white;}

/* ===== Main content ===== */
main {
  margin-left: 240px;
  padding: 20px;
  transition: all 0.3s;
}
section {margin-bottom:30px;}
input, select, textarea {width:100%; padding:10px; margin:5px 0 15px 0; border-radius:6px; border:1px solid #ccc;}
button {background:#3498db; color:white; border:none; padding:10px 15px; border-radius:6px; cursor:pointer; transition:0.3s;}
button:hover {background:#2980b9;}
.center {text-align:center;}

/* ===== Table ===== */
table {width:100%; border-collapse:collapse; margin-top:15px;}
table, th, td {border:1px solid #ccc;}
th, td {padding:10px; text-align:left; font-size:0.9rem;}
th {background:#3498db; color:white;}

/* ===== Footer ===== */
footer {
  background:#3498db;
  color:white;
  text-align:center;
  padding:15px 0;
  position: relative;
  bottom:0;
  width:100%;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1024px){
  aside {width:200px;}
  main {margin-left:210px;}
}

@media screen and (max-width: 768px){
  header {flex-direction: column; align-items: flex-start;}
  aside {position: relative; width:100%; height:auto;}
  main {margin-left:0;}
  table, th, td {font-size:0.85rem;}
}

@media screen and (max-width: 480px){
  header h1 {font-size:1rem;}
  button {padding:8px;}
  input, select, textarea {font-size:0.9rem;}
  th, td {font-size:0.8rem; padding:6px;}
  aside ul li a {padding:6px;}
  section h2 {font-size:1rem;}
}