:root {
  --ubb-navy: #0b2545;
  --ubb-blue: #134074;
  --ubb-gold: #c9a24b;
  --ubb-light: #f5f7fa;
}

body {
  background-color: var(--ubb-light);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color: #1c2b3a;
}

.navbar {
  background: linear-gradient(90deg, var(--ubb-navy), var(--ubb-blue));
}

.hero-ubb {
  background: linear-gradient(135deg, var(--ubb-navy), var(--ubb-blue));
  color: #fff;
  border-radius: 1rem;
  padding: 3rem 2rem;
  margin-bottom: 2rem;
}

.hero-ubb .badge-gold {
  background-color: var(--ubb-gold);
  color: #1c2b3a;
}

.card-menu {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(11, 37, 69, 0.08);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}

.card-menu:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(11, 37, 69, 0.15);
}

.card-menu .icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ubb-light);
  color: var(--ubb-blue);
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.form-section {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 6px 18px rgba(11, 37, 69, 0.06);
}

.form-section h5 {
  color: var(--ubb-blue);
  border-bottom: 2px solid var(--ubb-gold);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
}

.footer-ubb {
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

.syarat-list li {
  margin-bottom: .5rem;
}

.btn-ubb {
  background-color: var(--ubb-blue);
  color: #fff;
  border: none;
}
.btn-ubb:hover {
  background-color: var(--ubb-navy);
  color: #fff;
}

.no-pendaftaran-box {
  border: 2px dashed var(--ubb-gold);
  border-radius: .75rem;
  padding: 1.5rem;
  background: #fffdf7;
  text-align: center;
}

.table thead {
  background-color: var(--ubb-navy);
  color: #fff;
}

.sidebar-admin {
  background: var(--ubb-navy);
  min-height: 100vh;
  color: #fff;
}
.sidebar-admin a {
  color: #cbd5e1;
  text-decoration: none;
  display: block;
  padding: .65rem 1rem;
  border-radius: .5rem;
}
.sidebar-admin a:hover, .sidebar-admin a.active {
  background: var(--ubb-blue);
  color: #fff;
}