/* ===============================
   GLOBAL
================================ */
body {
  background: #f4f6f9;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: #2c3e50;
  font-size: 1.4rem;
}

/* ===============================
   HEADER
================================ */
header {
  background: linear-gradient(135deg, #6a89cc, #b8e994);
  padding: 15px;
  text-align: center;
  color: white;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  margin-bottom: 20px;
}

header h2 {
  font-weight: 700;
  margin: 0;
  font-size: 2rem;
}

/* ===============================
   TABLE
================================ */
table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  width: 100%;
  font-size: 1.5rem;
}

thead {
  background: #74b9ff;
  color: white;
  font-size: 1.4rem;
}

tbody tr:nth-child(even) {
  background: #f9fbfd;
}

tbody tr:hover {
  background: #eaf2fb;
  transition: .2s;
}

td, th {
  text-align: center;
  padding: 10px;
}

/* ===============================
   ZOOM ROW ANIMATION
================================ */
.zoomed {
  transform: scale(1.2, 1.3);
  transform-origin: center;
  text-align: left;
  transition: transform 0.4s ease;
  z-index: 8;
  position: relative;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
}

.zoomed td {
  font-size: 1.5em;
  text-align: left;
}

/* aturan kolom saat zoom */
.zoomed td:nth-child(1) { text-align: center; }
.zoomed td:nth-child(2) { text-align: left; padding-left: 12%; }
.zoomed td:nth-child(3) { text-align: left; padding-left: 30px; }
.zoomed td:nth-child(4) { text-align: left; padding-left: 30px; }

/* ===============================
   FOOTER
================================ */
footer {
  margin-top: 20px;
  text-align: center;
  color: #7f8c8d;
  font-size: 1rem;
}