/* =====================================================================
   PPDB Online - gaya tambahan di atas template TemplateMo First Portfolio
   ===================================================================== */

.page-head {
  background: var(--secondary-color);
  padding: 140px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-head h1 {
  color: #fff;
  font-size: 40px;
  letter-spacing: -1px;
  margin-bottom: .25rem;
}
.page-head p { color: rgba(255,255,255,.9); margin: 0; font-size: 17px; }
.page-head .crumb a { color: #fff; text-decoration: underline; }

.navbar-nav .nav-link { font-size: 13px; }
.navbar .btn-daftar { padding: 8px 18px; font-size: 15px; }

.ppdb-card {
  background: #fff;
  border-radius: var(--border-radius-medium);
  box-shadow: 0 .5rem 2rem rgba(0,0,0,.08);
  padding: 32px;
}
@media (max-width: 575px) { .ppdb-card { padding: 20px 16px; } }

.ppdb-card p, .ppdb-card li, .ppdb-card dd, .ppdb-card dt, .ppdb-card td, .ppdb-card th { font-size: 16px; }
.ppdb-card .small, .ppdb-card small { font-size: 14px !important; }

.form-label { font-weight: 600; color: #222; font-size: 15px; margin-bottom: .3rem; }
.form-control, .form-select { border-radius: 10px; padding: .6rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 .2rem rgba(20,183,137,.2); }
.form-text { font-size: 13px; }

.step-title {
  color: var(--primary-color);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: .6rem;
  margin: 0 0 1.2rem;
  letter-spacing: 0;
  font-size: 20px;
}

/* ---------- wizard */
.ppdb-wizard .form-step { display: none; animation: ppdbFade .35s ease; }
.ppdb-wizard .form-step.aktif { display: block; }
.ppdb-form-admin .form-step { margin-bottom: 2rem; }
@keyframes ppdbFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.wizard-progress {
  display: flex; list-style: none; padding: 0; margin: 0 0 2rem;
  counter-reset: s; gap: 4px;
}
.wizard-progress li {
  flex: 1; text-align: center; position: relative; color: #999; padding: 0;
}
.wizard-progress li::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: #ddd; z-index: 0;
}
.wizard-progress li:first-child::before { display: none; }
.wizard-progress li span {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: #ddd; color: #fff; font-weight: 700;
}
.wizard-progress li small { display: block; font-size: 12px; margin-top: 4px; }
.wizard-progress li.selesai span, .wizard-progress li.selesai::before { background: var(--secondary-color); }
.wizard-progress li.aktif span { background: var(--primary-color); box-shadow: 0 0 0 4px rgba(83,93,161,.2); }
.wizard-progress li.aktif { color: var(--primary-color); font-weight: 700; }
.wizard-progress li.aktif::before { background: var(--secondary-color); }
@media (max-width: 575px) { .wizard-progress li small { display: none; } }

.ppdb-map { height: 340px; border-radius: 12px; border: 1px solid #ccc; z-index: 1; }
.ringkasan h6 { color: var(--primary-color); margin-top: 1rem; letter-spacing: 0; }
.ringkasan dt { font-weight: 600; color: #555; }

/* ---------- komponen beranda */
.alur-step {
  background: #fff; border-radius: var(--border-radius-medium); padding: 24px; height: 100%;
  border: 2px solid var(--border-color); transition: .3s;
}
.alur-step:hover { border-color: var(--secondary-color); box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }
.alur-step .nomor {
  width: 46px; height: 46px; border-radius: 50%; background: var(--primary-color); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; margin-bottom: 12px;
}
.alur-step h5 { letter-spacing: 0; font-size: 19px; }
.alur-step p { font-size: 15px; margin: 0; }

.jalur-card { border-radius: var(--border-radius-medium); padding: 22px; height: 100%; background: #fff; border-left: 6px solid var(--secondary-color); }
.jalur-card h5 { letter-spacing: 0; font-size: 19px; }
.jalur-card p { font-size: 15px; margin: 0; }
.jalur-card .persen { font-size: 28px; font-weight: 700; color: var(--primary-color); }

.pilih-jenjang {
  display: block; text-decoration: none; text-align: center; padding: 34px 20px;
  border-radius: var(--border-radius-medium); border: 3px solid var(--border-color); background: #fff; transition: .3s; height: 100%;
}
.pilih-jenjang:hover, .pilih-jenjang.aktif { border-color: var(--secondary-color); box-shadow: 0 1rem 2rem rgba(0,0,0,.1); }
.pilih-jenjang .ikon { font-size: 56px; color: var(--primary-color); }
.pilih-jenjang h4 { margin: .5rem 0 .25rem; letter-spacing: 0; }
.pilih-jenjang p { font-size: 15px; margin: 0; }

.pengumuman-item { border-bottom: 1px solid var(--border-color); padding: 18px 0; }
.pengumuman-item:last-child { border-bottom: 0; }
.pengumuman-item h5 { letter-spacing: 0; font-size: 19px; margin-bottom: .25rem; }
.pengumuman-isi { white-space: pre-line; }

.table-ppdb th { background: var(--section-bg-color); font-size: 14px !important; white-space: nowrap; }
.table-ppdb td { font-size: 15px !important; vertical-align: middle; }

.status-besar { border-radius: var(--border-radius-medium); padding: 22px; color: #fff; }
.status-besar h3 { color: #fff; letter-spacing: 0; margin: 0; }
.status-besar p { color: rgba(255,255,255,.92); margin: .25rem 0 0; font-size: 15px; }

.pin-box {
  font-size: 40px; font-weight: 700; letter-spacing: 10px; color: var(--primary-color);
  background: #f2f3fb; border: 2px dashed var(--primary-color); border-radius: 14px; padding: 10px 20px; display: inline-block;
}

.hero .hero-image { max-height: 300px; }
.hero .lead-badge { background: rgba(255,255,255,.18); color: #fff; padding: 6px 14px; border-radius: 30px; font-size: 15px; display: inline-block; }

@media (max-width: 575px) {
  .navbar-brand { font-size: 22px; }
  .navbar .btn-daftar { padding: 6px 14px; font-size: 14px; }
  .hero { padding-top: 130px; padding-bottom: 90px; }
  .hero .hero-image-wrap, .hero .hero-image { display: none; }
  .hero .hero-title { font-size: 30px; letter-spacing: -1px; }
  .hero h2 { font-size: 21px; letter-spacing: -.5px; }
  .hero-text { top: 0; }
  .page-head { padding: 120px 0 40px; }
  .page-head h1 { font-size: 28px; }
  h2 { font-size: 32px; letter-spacing: -1px; }
}