/* ====== Background Body ====== */
body {
  background: linear-gradient(135deg, #015871, #04bfa6, #e9f7f6);
  background-attachment: fixed;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: #04364A;
}

/* ====== Card Utama ====== */
.card {
  border-radius: 18px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ====== Label Pertanyaan ====== */
.form-label {
  display: inline-block;
  background: linear-gradient(90deg, #047e96, #04bfa6);
  //background: linear-gradient(135deg, #D36600, #D8A01A);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 2px 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

/* Label wajib (tanda *) */
.form-label .text-danger {
  color: #FFD700;
  font-weight: bold;
  margin-left: 4px;
}

/* ====== Input dan Select ====== */
.form-control, .form-select {
  border-radius: 10px;
  border: 1px solid #b2dfdb;
  transition: all 0.25s ease-in-out;
  background-color: #fff;
}

.form-control:focus, .form-select:focus {
  border-color: #04bfa6;
  box-shadow: 0 0 8px rgba(4,191,166,0.4);
}

/* ====== Tombol ====== */
.btn-primary {
  background: linear-gradient(90deg, #046b9a, #04bfa6);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 3px 8px rgba(4,111,154,0.25);
}
.btn-primary:hover {
  background: linear-gradient(90deg, #03445e, #049b86);
}

.btn-warning {
  background: linear-gradient(90deg, #d49c00, #ffcc33);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(255,193,7,0.35);
}
.btn-warning:hover {
  background: linear-gradient(90deg, #b88600, #ffb300);
}

.btn-outline-secondary {
  border-radius: 10px;
  color: #015871;
  border: 1px solid #04bfa6;
}
.btn-outline-secondary:hover {
  background: #04bfa6;
  color: #fff;
}

/* ====== Progress bar ====== */
.progress {
  border-radius: 18px;
  background-color: #c8e6c9;
}
.progress-bar {
  background: linear-gradient(90deg, #04bfa6, #ffcc33);
  font-weight: 600;
}

/* ====== Section Title ====== */
h5.mb-3 {
  color: #015871;
  font-weight: 700;
  border-left: 6px solid #04bfa6;
  padding-left: 10px;
  margin-top: 22px;
}

/* ====== Table Styling ====== */
.table-bordered th {
  background: linear-gradient(90deg, #04bfa6, #047e96);
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.table-bordered td {
  background-color: #fafafa;
  vertical-align: middle !important;
}
.table-bordered tr:hover td {
  background-color: #fffbe6;
}

/* ====== Alert Box ====== */
.alert-info {
  background: linear-gradient(90deg, #04bfa6, #047e96);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ====== Responsif ====== */
@media (max-width: 768px) {
  .form-label {
    font-size: 0.9rem;
  }
  .card {
    border-radius: 12px;
  }
}