:root {
  --ppdb-green-900: #0b3b32;
  --ppdb-green-800: #0f4a3d;
  --ppdb-green-700: #146555;
  --ppdb-emerald: #1f8a70;
  --ppdb-gold: #c99a3b;
  --ppdb-gold-deep: #af7f26;
  --ppdb-cream: #f7f1e6;
  --ppdb-ivory: #fffdf8;
  --ppdb-surface: rgba(255, 255, 255, 0.88);
  --ppdb-text: #1f2a2a;
  --ppdb-muted: #687270;
  --ppdb-line: rgba(9, 59, 50, 0.12);
  --ppdb-shadow: 0 24px 60px rgba(11, 59, 50, 0.12);
  --ppdb-shadow-soft: 0 14px 38px rgba(11, 59, 50, 0.08);
  --ppdb-radius-xl: 32px;
  --ppdb-radius-lg: 24px;
  --ppdb-radius-md: 18px;
  --ppdb-radius-sm: 14px;
}

/* Popup PPDB mihrab: template baru mengikuti referensi 6 Juli. */
body.ppdb-public .ppdb-mihrab-container {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ppdb-public .ppdb-mihrab-container.swal2-backdrop-show {
  background: rgba(4, 24, 27, 0.86) !important;
}

body.ppdb-public .ppdb-mihrab-popup {
  width: min(920px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 28px);
  overflow: hidden !important;
  border: 1px solid rgba(218, 183, 91, 0.72) !important;
  border-radius: 25px !important;
  background: #fffaf0 !important;
  color: #073d31;
  box-shadow: 0 30px 95px rgba(0, 0, 0, 0.46) !important;
}

body.ppdb-public .ppdb-mihrab-html {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.ppdb-public .ppdb-mihrab-alert {
  position: relative;
  min-height: 960px;
  padding: 92px 72px 0;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.98) 0 41%, rgba(255, 250, 240, 0.82) 70%, rgba(255, 250, 240, 0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Cg fill='none' stroke='%23d9b76d' stroke-opacity='.23' stroke-width='1'%3E%3Cpath d='M46 6 C55 21 70 37 86 46 C70 55 55 71 46 86 C37 71 22 55 6 46 C22 37 37 21 46 6Z'/%3E%3Cpath d='M46 18 C53 29 63 39 74 46 C63 53 53 63 46 74 C39 63 29 53 18 46 C29 39 39 29 46 18Z'/%3E%3Ccircle cx='46' cy='46' r='9'/%3E%3Cpath d='M0 46 H18 M74 46 H92 M46 0 V18 M46 74 V92'/%3E%3C/g%3E%3C/svg%3E"),
    #fffaf0;
  background-size: auto, 92px 92px, auto;
}

body.ppdb-public .ppdb-mihrab-alert::after {
  display: none;
}

body.ppdb-public .ppdb-mihrab-arch {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.ppdb-public .ppdb-mihrab-arch-shadow,
body.ppdb-public .ppdb-mihrab-arch-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

body.ppdb-public .ppdb-mihrab-arch-shadow {
  stroke: rgba(104, 72, 18, 0.2);
  stroke-width: 12;
}

body.ppdb-public .ppdb-mihrab-arch-line {
  stroke: #d8a441;
  stroke-width: 6.2;
  filter:
    drop-shadow(0 1px 1px rgba(255, 246, 219, 0.72))
    drop-shadow(0 2px 2px rgba(101, 68, 18, 0.2));
}

body.ppdb-public .ppdb-mihrab-lantern {
  position: absolute;
  z-index: 3;
  top: 96px;
  width: 70px;
  height: 206px;
  color: #d4a84a;
  pointer-events: none;
}

body.ppdb-public .ppdb-mihrab-lantern-left {
  left: 75px;
}

body.ppdb-public .ppdb-mihrab-lantern-right {
  right: 75px;
}

body.ppdb-public .ppdb-mihrab-lantern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 90px;
  background: linear-gradient(180deg, rgba(199, 145, 43, 0.2), #d4a84a);
}

body.ppdb-public .ppdb-mihrab-lantern::after {
  content: "";
  position: absolute;
  top: 86px;
  left: 50%;
  width: 50px;
  height: 76px;
  border: 3px solid #d1a040;
  border-radius: 14px 14px 18px 18px;
  background:
    linear-gradient(90deg, transparent 22%, rgba(147, 96, 20, 0.42) 23% 27%, transparent 28% 48%, rgba(147, 96, 20, 0.42) 49% 53%, transparent 54% 73%, rgba(147, 96, 20, 0.42) 74% 78%, transparent 79%),
    radial-gradient(circle at 50% 52%, rgba(255, 235, 160, 0.78), rgba(211, 156, 48, 0.28) 42%, transparent 64%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 239, 189, 0.38),
    0 12px 18px rgba(132, 84, 12, 0.16);
  transform: translateX(-50%);
}

body.ppdb-public .ppdb-mihrab-lantern i {
  display: none;
}

body.ppdb-public .ppdb-mihrab-leaf {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

body.ppdb-public .ppdb-mihrab-leaf-left {
  top: 430px;
  left: -10px;
  width: 138px;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%);
}

body.ppdb-public .ppdb-mihrab-leaf-right {
  top: 428px;
  right: -10px;
  width: 136px;
  opacity: 0.7;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(270deg, #000 0 72%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0 72%, transparent 100%);
}

body.ppdb-public .ppdb-mihrab-content {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-direction: column;
}

body.ppdb-public .ppdb-mihrab-logo {
  width: 124px;
  height: 124px;
  margin: 0 auto 12px;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(4, 38, 31, 0.3));
}

body.ppdb-public .ppdb-mihrab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 30px;
  gap: 12px;
  padding: 4px 18px;
  border: 1px solid rgba(219, 174, 72, 0.76);
  border-radius: 999px;
  background: linear-gradient(180deg, #0c5a47 0%, #063b30 100%);
  color: #fff;
  box-shadow: 0 8px 14px rgba(4, 46, 37, 0.24);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

body.ppdb-public .ppdb-mihrab-badge i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #d9ae4b;
  transform: rotate(45deg);
}

body.ppdb-public .ppdb-mihrab-alert h2 {
  max-width: 610px;
  margin: 12px auto 6px;
  color: #073d31;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.48rem, 4.15vw, 3.26rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

body.ppdb-public .ppdb-mihrab-year {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(500px, 100%);
  gap: 10px;
  margin: 0 auto 9px;
  color: #aa7819;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 800;
}

body.ppdb-public .ppdb-mihrab-year span {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  max-width: 92px;
  background: linear-gradient(90deg, transparent, #c99732);
}

body.ppdb-public .ppdb-mihrab-year span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 7px;
  height: 7px;
  background: #c99732;
  transform: translateY(-50%) rotate(45deg);
}

body.ppdb-public .ppdb-mihrab-year span:last-child {
  background: linear-gradient(90deg, #c99732, transparent);
}

body.ppdb-public .ppdb-mihrab-year span:last-child::after {
  right: auto;
  left: -4px;
}

body.ppdb-public .ppdb-mihrab-school {
  position: relative;
  display: grid;
  align-items: center;
  justify-content: center;
  min-width: min(486px, 100%);
  margin: 0 auto 9px;
  padding: 10px 38px 9px;
  border: 2px solid #d2a346;
  border-radius: 15px;
  background: linear-gradient(180deg, #0b5b47, #063b30);
  color: #fff;
  box-shadow:
    0 11px 18px rgba(5, 54, 43, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: visible;
}

body.ppdb-public .ppdb-mihrab-school::before,
body.ppdb-public .ppdb-mihrab-school::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 26px;
  height: 26px;
  border: 2px solid #d2a346;
  background: linear-gradient(180deg, #0b5b47, #063b30);
  transform: translateY(-50%) rotate(45deg);
}

body.ppdb-public .ppdb-mihrab-school > * {
  position: relative;
  z-index: 1;
}

body.ppdb-public .ppdb-mihrab-school::before {
  left: -11px;
  border-radius: 8px 0 8px 0;
}

body.ppdb-public .ppdb-mihrab-school::after {
  right: -11px;
  border-radius: 8px 0 8px 0;
}

body.ppdb-public .ppdb-mihrab-school strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

body.ppdb-public .ppdb-mihrab-school small {
  display: block;
  margin-top: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

body.ppdb-public .ppdb-mihrab-school i {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #d9ae4b;
  transform: translateY(-50%) rotate(45deg);
}

body.ppdb-public .ppdb-mihrab-school i:first-child {
  left: 22px;
}

body.ppdb-public .ppdb-mihrab-school i:last-child {
  right: 22px;
}

body.ppdb-public .ppdb-mihrab-alert p {
  max-width: 560px;
  margin: 0 auto 9px;
  color: #16322e;
  font-size: 0.94rem;
  line-height: 1.42;
}

body.ppdb-public .ppdb-mihrab-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(420px, 100%);
  min-height: 44px;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, #e8f1e2, #dbe8d4);
  color: #103f34;
  font-size: 0.88rem;
  font-weight: 800;
}

body.ppdb-public .ppdb-mihrab-date i {
  color: #0d5747;
  font-size: 1.1rem;
  flex: 0 0 auto;
}

body.ppdb-public .ppdb-mihrab-date span,
body.ppdb-public .ppdb-mihrab-date strong,
body.ppdb-public .ppdb-mihrab-date small {
  display: block;
}

body.ppdb-public .ppdb-mihrab-date small {
  margin-top: 2px;
  color: rgba(16, 63, 52, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

body.ppdb-public .ppdb-mihrab-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(330px, 100%);
  min-width: min(330px, 100%);
  min-height: 38px;
  margin-top: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(211, 157, 43, 0.38);
  border-radius: 11px;
  background: rgba(255, 247, 225, 0.86);
  color: #7b540b;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 18px rgba(60, 43, 5, 0.06);
}

body.ppdb-public .ppdb-mihrab-countdown i {
  color: #0d5747;
  font-size: 0.95rem;
}

body.ppdb-public .ppdb-mihrab-countdown.is-expired {
  background: rgba(238, 246, 241, 0.9);
  color: #557168;
}

body.ppdb-public .ppdb-mihrab-students-wrap {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 576px;
  bottom: auto;
  left: 0;
  height: 278px;
  overflow: hidden;
  pointer-events: none;
}

body.ppdb-public .ppdb-mihrab-students {
  position: absolute;
  right: 50%;
  top: 0;
  bottom: auto;
  width: min(446px, 66%);
  height: auto;
  margin: 0;
  object-fit: contain;
  transform: translateX(50%);
  filter: drop-shadow(0 15px 18px rgba(13, 45, 37, 0.2));
}

body.ppdb-public .ppdb-mihrab-actions {
  position: absolute;
  z-index: 5;
  right: 86px;
  bottom: 108px;
  left: 86px;
  display: grid;
  grid-template-columns: 1fr 1.18fr 0.9fr;
  gap: 26px;
  align-items: stretch;
}

body.ppdb-public .ppdb-mihrab-btn {
  display: grid;
  grid-template-columns: 32px 1fr 18px;
  align-items: center;
  min-height: 70px;
  padding: 11px 19px;
  border-radius: 14px;
  border: 2px solid transparent;
  font-family: "Poppins", sans-serif;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 13px 20px rgba(3, 42, 34, 0.2);
  cursor: pointer;
}

body.ppdb-public .ppdb-mihrab-btn > i:first-child {
  font-size: 1.55rem;
}

body.ppdb-public .ppdb-mihrab-btn strong,
body.ppdb-public .ppdb-mihrab-btn small {
  display: block;
}

body.ppdb-public .ppdb-mihrab-btn strong {
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.08;
  white-space: nowrap;
}

body.ppdb-public .ppdb-mihrab-btn small {
  margin-top: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}

body.ppdb-public .ppdb-mihrab-btn-primary {
  border-color: #d3a244;
  background: linear-gradient(180deg, #0c5846, #063b30);
  color: #fff;
}

body.ppdb-public .ppdb-mihrab-btn-wa {
  border-color: rgba(41, 173, 60, 0.65);
  background: linear-gradient(180deg, #1b9d38, #0b7f27);
  color: #fff;
}

body.ppdb-public .ppdb-mihrab-btn-light {
  grid-template-columns: 34px 1fr;
  border-color: rgba(6, 61, 49, 0.66);
  background: rgba(255, 255, 255, 0.95);
  color: #073d31;
}

body.ppdb-public .ppdb-mihrab-footer {
  position: absolute;
  z-index: 4;
  right: 104px;
  bottom: 24px;
  left: 104px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  color: #fff;
  text-align: left;
}

body.ppdb-public .ppdb-mihrab-feature {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 8px 24px 6px;
}

body.ppdb-public .ppdb-mihrab-feature + .ppdb-mihrab-feature {
  border-left: 1px solid rgba(213, 166, 62, 0.55);
}

body.ppdb-public .ppdb-mihrab-feature span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #e1b856;
  font-size: 1.65rem;
}

body.ppdb-public .ppdb-mihrab-feature strong {
  align-self: end;
  color: #f2c468;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.05;
}

body.ppdb-public .ppdb-mihrab-feature small {
  align-self: start;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.7rem;
  line-height: 1.24;
}

body.ppdb-public .ppdb-mihrab-hide {
  display: none;
}

body.ppdb-public .ppdb-mihrab-close {
  top: 24px !important;
  right: 24px !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(207, 161, 56, 0.65) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #073d31 !important;
  font-size: 2rem !important;
  box-shadow: 0 8px 20px rgba(5, 54, 43, 0.14);
}

@media (max-width: 991.98px) {
  body.ppdb-public .ppdb-mihrab-alert {
    min-height: 840px;
    padding-right: 36px;
    padding-left: 36px;
  }

  body.ppdb-public .ppdb-mihrab-actions {
    right: 34px;
    left: 34px;
    grid-template-columns: 1fr;
    bottom: 128px;
    gap: 10px;
  }

  body.ppdb-public .ppdb-mihrab-btn {
    min-height: 54px;
  }

  body.ppdb-public .ppdb-mihrab-students-wrap {
    bottom: 196px;
    height: 245px;
  }

  body.ppdb-public .ppdb-mihrab-footer {
    right: 20px;
    left: 20px;
  }

  body.ppdb-public .ppdb-mihrab-feature {
    padding: 5px 10px;
  }
}

@media (max-width: 575.98px) {
  body.ppdb-public .ppdb-mihrab-popup {
    width: min(94vw, 520px) !important;
  }

  body.ppdb-public .ppdb-mihrab-alert {
    min-height: 840px;
    padding: 28px 18px 0;
  }

  body.ppdb-public .ppdb-mihrab-logo {
    width: 92px;
    height: 92px;
  }

  body.ppdb-public .ppdb-mihrab-alert h2 {
    font-size: 2rem;
  }

  body.ppdb-public .ppdb-mihrab-school strong {
    font-size: 1.14rem;
  }

  body.ppdb-public .ppdb-mihrab-lantern,
  body.ppdb-public .ppdb-mihrab-leaf {
    opacity: 0.34;
  }

  body.ppdb-public .ppdb-mihrab-students-wrap {
    bottom: 222px;
    height: 220px;
  }

  body.ppdb-public .ppdb-mihrab-actions {
    right: 18px;
    bottom: 122px;
    left: 18px;
  }

  body.ppdb-public .ppdb-mihrab-footer {
    right: 10px;
    bottom: 8px;
    left: 10px;
    grid-template-columns: 1fr;
  }

  body.ppdb-public .ppdb-mihrab-feature {
    min-height: 34px;
    grid-template-columns: 34px 1fr;
    padding: 2px 14px;
  }

  body.ppdb-public .ppdb-mihrab-feature + .ppdb-mihrab-feature {
    border-top: 1px solid rgba(213, 166, 62, 0.35);
    border-left: 0;
  }

  body.ppdb-public .ppdb-mihrab-feature span {
    width: 30px;
    height: 30px;
    font-size: 1.1rem;
  }

  body.ppdb-public .ppdb-mihrab-feature small {
    display: none;
  }
}

html {
  scroll-behavior: smooth;
}

body.ppdb-public {
  margin: 0;
  font-family: "Poppins", sans-serif;
  color: var(--ppdb-text);
  background:
    radial-gradient(circle at top left, rgba(201, 154, 59, 0.12), transparent 32%),
    linear-gradient(180deg, #f7f5ef 0%, #fbfaf6 38%, #f5f2eb 100%);
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.ppdb-main {
  overflow: visible;
}

.ppdb-section {
  position: relative;
  padding: 36px 0;
}

.ppdb-container-narrow {
  max-width: 1080px;
  margin: 0 auto;
}

.ppdb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 154, 59, 0.35);
  background: rgba(255, 255, 255, 0.76);
  color: var(--ppdb-green-800);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ppdb-section-heading {
  margin-bottom: 18px;
}

.ppdb-section-heading h2 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  font-weight: 700;
  color: var(--ppdb-green-900);
}

.ppdb-section-heading p {
  margin: 0;
  color: var(--ppdb-muted);
  font-size: 1rem;
  line-height: 1.8;
}

.ppdb-small-heading {
  color: var(--ppdb-green-900);
  font-size: 1.2rem;
  font-weight: 700;
}

.ppdb-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(201, 154, 59, 0.18);
  border-radius: var(--ppdb-radius-md);
  box-shadow: var(--ppdb-shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.ppdb-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ppdb-shadow);
  border-color: rgba(201, 154, 59, 0.35);
}

.ppdb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 24px;
  border: none;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease;
  cursor: pointer;
}

.ppdb-btn:hover {
  transform: translateY(-3px);
}

.ppdb-btn-primary {
  background: linear-gradient(135deg, var(--ppdb-green-900), var(--ppdb-green-700));
  color: #fff;
  box-shadow: 0 16px 34px rgba(15, 74, 61, 0.22);
}

.ppdb-btn-primary:hover {
  background: linear-gradient(135deg, var(--ppdb-green-700), var(--ppdb-emerald));
  color: #fff;
}

.ppdb-btn-secondary {
  background: linear-gradient(135deg, #ddb262, var(--ppdb-gold));
  color: #fff;
  box-shadow: 0 16px 34px rgba(201, 154, 59, 0.22);
}

.ppdb-btn-secondary:hover {
  background: linear-gradient(135deg, var(--ppdb-gold), var(--ppdb-gold-deep));
  color: #fff;
}

.ppdb-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.ppdb-btn-outline:hover,
.ppdb-btn-outline.is-solid {
  border-color: rgba(15, 74, 61, 0.16);
  background: #fff;
  color: var(--ppdb-green-900);
  box-shadow: var(--ppdb-shadow-soft);
}

.ppdb-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ppdb-green-700);
  font-weight: 600;
}

.ppdb-link:hover {
  color: var(--ppdb-emerald);
}

.ppdb-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  padding: 18px 0 0;
  transition: all 0.35s ease;
}

.ppdb-header.is-scrolled {
  padding-top: 0;
}

.ppdb-navbar {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 22px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(6, 44, 36, 0.92), rgba(18, 82, 67, 0.82));
  box-shadow: 0 26px 50px rgba(6, 44, 36, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: all 0.35s ease;
}

.ppdb-header.is-scrolled .ppdb-navbar {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(9, 59, 50, 0.08);
  box-shadow: 0 22px 44px rgba(11, 59, 50, 0.12);
}

.ppdb-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.ppdb-brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.14);
  padding: 4px;
}

.ppdb-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.ppdb-brand-copy strong {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
}

.ppdb-brand-copy span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
}

.ppdb-header.is-scrolled .ppdb-brand-copy strong,
.ppdb-header.is-scrolled .ppdb-nav-link,
.ppdb-header.is-scrolled .navbar-toggler {
  color: var(--ppdb-green-900);
}

.ppdb-header.is-scrolled .ppdb-brand-copy span {
  color: var(--ppdb-muted);
}

.ppdb-navbar .navbar-nav {
  gap: 4px;
}

.ppdb-nav-link {
  position: relative;
  padding: 12px 16px !important;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.ppdb-nav-link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ppdb-gold), rgba(201, 154, 59, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.ppdb-nav-link:hover::after,
.ppdb-nav-link.is-active::after {
  transform: scaleX(1);
}

.ppdb-navbar .navbar-toggler {
  border: none;
  box-shadow: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 8px 10px;
}

.ppdb-navbar .navbar-toggler:focus {
  box-shadow: none;
}

.ppdb-hero {
  padding: 34px 0 28px;
}

.ppdb-hero-shell {
  position: relative;
  padding: 38px;
  border-radius: 38px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 246, 0.94) 46%, rgba(240, 248, 244, 0.86) 100%);
  border: 1px solid rgba(201, 154, 59, 0.14);
  box-shadow: var(--ppdb-shadow);
}

.ppdb-hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(201, 154, 59, 0.24), transparent 24%),
    radial-gradient(circle at bottom left, rgba(31, 138, 112, 0.12), transparent 22%);
  pointer-events: none;
}

.ppdb-hero-copy,
.ppdb-hero-media {
  position: relative;
  z-index: 1;
}

.ppdb-hero-copy h1 {
  margin: 18px 0 14px;
  font-size: clamp(3.1rem, 6vw, 5.2rem);
  line-height: 0.95;
  font-weight: 700;
  color: var(--ppdb-green-900);
}

.ppdb-hero-copy h1 span {
  color: var(--ppdb-gold);
}

.ppdb-hero-title {
  margin: 0;
  color: var(--ppdb-green-800);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.18;
}

.ppdb-hero-subtitle {
  margin: 10px 0 0;
  color: var(--ppdb-green-800);
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  font-weight: 600;
}

.ppdb-tagline {
  display: inline-block;
  margin: 18px 0 18px;
  padding: 0 18px;
  position: relative;
  color: var(--ppdb-gold-deep);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  font-style: italic;
}

.ppdb-tagline::before,
.ppdb-tagline::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 48px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(201, 154, 59, 0), rgba(201, 154, 59, 0.9));
}

.ppdb-tagline::before {
  left: -34px;
}

.ppdb-tagline::after {
  right: -34px;
  transform: scaleX(-1);
}

.ppdb-hero-description {
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--ppdb-muted);
  font-size: 1rem;
  line-height: 1.85;
}

.ppdb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

.ppdb-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ppdb-highlight-item {
  padding: 18px 12px;
  text-align: center;
}

.ppdb-highlight-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(11, 59, 50, 0.1), rgba(31, 138, 112, 0.08));
  color: var(--ppdb-green-800);
  font-size: 1.5rem;
}

.ppdb-highlight-item strong {
  display: block;
  color: var(--ppdb-green-900);
  font-size: 0.98rem;
  font-weight: 600;
}

.ppdb-highlight-item span {
  display: block;
  margin-top: 8px;
  color: var(--ppdb-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.ppdb-hero-visual {
  position: relative;
  min-height: 580px;
}

.ppdb-hero-frame {
  position: absolute;
  inset: 0;
  padding: 18px 18px 82px;
  border-radius: 42px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(201, 154, 59, 0.35), rgba(11, 59, 50, 0.08));
  box-shadow: 0 30px 60px rgba(11, 59, 50, 0.18);
}

.ppdb-hero-frame::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 36px;
  border: 3px solid rgba(201, 154, 59, 0.75);
  pointer-events: none;
}

.ppdb-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

.ppdb-hero-badge {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding: 12px;
  background: radial-gradient(circle at top, #f3d38d, #a82122 76%);
  box-shadow: 0 18px 36px rgba(128, 18, 18, 0.24);
}

.ppdb-hero-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  padding: 10px;
}

.ppdb-floating-card {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ppdb-floating-card .ppdb-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(8, 49, 41, 0.88);
  color: #fff;
  border-color: rgba(201, 154, 59, 0.36);
}

.ppdb-floating-card .ppdb-card:hover {
  transform: translateY(-4px);
}

.ppdb-floating-card i {
  font-size: 1.4rem;
  color: var(--ppdb-gold);
}

.ppdb-floating-card strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.ppdb-floating-card span {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
}

.ppdb-strip {
  padding: 28px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ppdb-strip-copy {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ppdb-strip-copy i {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ppdb-green-900), var(--ppdb-emerald));
  color: #fff;
  font-size: 1.75rem;
}

.ppdb-strip h3 {
  margin: 0 0 4px;
  color: var(--ppdb-green-900);
  font-size: 2rem;
  font-weight: 700;
}

.ppdb-strip p {
  margin: 0;
  color: var(--ppdb-gold-deep);
  font-size: 1.2rem;
  font-weight: 600;
}

.ppdb-page-shell {
  padding-top: 8px;
  padding-bottom: clamp(42px, 6vh, 76px);
}

.ppdb-page-content {
  padding: 8px 0 0;
}

.ppdb-page-shell[data-page="pendaftaran"] {
  padding-bottom: clamp(56px, 8vh, 96px);
}

.ppdb-page-shell[data-page="pendaftaran"] .ppdb-split-layout {
  margin-bottom: 8px;
}

.ppdb-stats-grid,
.ppdb-major-grid,
.ppdb-gallery-grid,
.ppdb-page-grid,
.ppdb-contact-grid,
.ppdb-summary-grid,
.ppdb-footer-grid {
  display: grid;
  gap: 20px;
}

.ppdb-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ppdb-stat-card {
  padding: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ppdb-stat-card i {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(11, 59, 50, 0.08), rgba(201, 154, 59, 0.16));
  color: var(--ppdb-green-700);
  font-size: 1.8rem;
  flex-shrink: 0;
}

.ppdb-stat-card strong {
  display: block;
  color: var(--ppdb-green-900);
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1;
  font-weight: 700;
}

.ppdb-stat-card span {
  display: block;
  margin-top: 8px;
  color: var(--ppdb-muted);
  font-size: 0.92rem;
}

.ppdb-info-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: 22px;
}

.ppdb-info-card,
.ppdb-contact-card,
.ppdb-page-card,
.ppdb-panel-card {
  padding: 28px;
}

.ppdb-accordion {
  display: grid;
  gap: 14px;
}

.ppdb-accordion-item {
  border: 1px solid rgba(9, 59, 50, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  overflow: hidden;
}

.ppdb-accordion-button {
  width: 100%;
  padding: 18px 20px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ppdb-green-900);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
}

.ppdb-accordion-button i {
  transition: transform 0.35s ease;
}

.ppdb-accordion-item.is-open .ppdb-accordion-button i {
  transform: rotate(180deg);
}

.ppdb-accordion-content {
  display: none;
  padding: 0 20px 20px;
  color: var(--ppdb-muted);
  line-height: 1.8;
}

.ppdb-accordion-item.is-open .ppdb-accordion-content {
  display: block;
}

.ppdb-watermark-panel {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 241, 230, 0.9)),
    radial-gradient(circle at center, rgba(201, 154, 59, 0.12), transparent 40%);
}

.ppdb-watermark {
  width: min(320px, 70%);
  opacity: 0.14;
  filter: saturate(0.7);
}

.ppdb-contact-list {
  display: grid;
  gap: 18px;
}

.ppdb-contact-item {
  display: flex;
  gap: 16px;
}

.ppdb-contact-item i {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 74, 61, 0.08);
  color: var(--ppdb-green-700);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.ppdb-contact-item strong {
  display: block;
  color: var(--ppdb-green-900);
  font-size: 1rem;
  font-weight: 600;
}

.ppdb-contact-item span,
.ppdb-contact-item a,
.ppdb-contact-item p {
  margin: 4px 0 0;
  color: var(--ppdb-muted);
  font-size: 0.94rem;
  line-height: 1.75;
}

.ppdb-major-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ppdb-major-card {
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.ppdb-major-badge {
  width: 110px;
  height: 110px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(11, 59, 50, 0.95), rgba(31, 138, 112, 0.88));
  color: #fff;
  font-size: 2.2rem;
  flex-shrink: 0;
}

.ppdb-major-card:nth-child(2n) .ppdb-major-badge {
  background: linear-gradient(145deg, rgba(221, 178, 98, 0.95), rgba(201, 154, 59, 0.82));
}

.ppdb-major-card h3 {
  margin: 0 0 8px;
  color: var(--ppdb-green-900);
  font-size: 1.6rem;
  font-weight: 700;
}

.ppdb-major-card p {
  margin: 0;
  color: var(--ppdb-muted);
  line-height: 1.8;
}

.ppdb-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.ppdb-timeline-item {
  text-align: center;
  position: relative;
}

.ppdb-timeline-item::after {
  content: "";
  position: absolute;
  top: 44px;
  left: calc(50% + 52px);
  width: calc(100% - 26px);
  height: 2px;
  background: linear-gradient(90deg, rgba(201, 154, 59, 0.6), rgba(201, 154, 59, 0.18));
}

.ppdb-timeline-item:last-child::after {
  display: none;
}

.ppdb-timeline-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(11, 59, 50, 0.98), rgba(31, 138, 112, 0.88));
  box-shadow: 0 16px 32px rgba(11, 59, 50, 0.16);
  color: #fff;
  font-size: 2rem;
}

.ppdb-timeline-index {
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ppdb-gold), #e3bb70);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.ppdb-timeline-item h3 {
  margin: 0 0 8px;
  color: var(--ppdb-green-900);
  font-size: 1.08rem;
  font-weight: 700;
}

.ppdb-timeline-item p {
  margin: 0;
  color: var(--ppdb-muted);
  font-size: 0.9rem;
  line-height: 1.75;
}

.ppdb-swiper-card {
  height: 100%;
  overflow: hidden;
}

.ppdb-gallery-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ppdb-gallery-card .ppdb-card-body,
.ppdb-testimonial-card .ppdb-card-body {
  padding: 18px 20px 22px;
}

.ppdb-gallery-card h3,
.ppdb-testimonial-card h3 {
  margin: 0 0 8px;
  color: var(--ppdb-green-900);
  font-size: 1.05rem;
  font-weight: 700;
}

.ppdb-gallery-card p,
.ppdb-testimonial-card p {
  margin: 0;
  color: var(--ppdb-muted);
  line-height: 1.75;
}

.ppdb-testimonial-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.ppdb-testimonial-meta img {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: cover;
}

.ppdb-testimonial-meta strong {
  display: block;
  color: var(--ppdb-green-900);
  font-size: 0.96rem;
  font-weight: 700;
}

.ppdb-testimonial-meta span {
  color: var(--ppdb-muted);
  font-size: 0.88rem;
}

.ppdb-faq-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
}

.ppdb-faq-copy {
  padding: 32px;
  min-height: 100%;
  background: linear-gradient(135deg, rgba(11, 59, 50, 0.96), rgba(20, 101, 85, 0.88));
  color: #fff;
}

.ppdb-faq-copy h3 {
  margin: 18px 0 12px;
  font-size: 2rem;
  font-weight: 700;
}

.ppdb-faq-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.9;
}

.ppdb-faq-list {
  display: grid;
  gap: 14px;
}

.ppdb-faq-item {
  border: 1px solid rgba(9, 59, 50, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

.ppdb-faq-button {
  width: 100%;
  padding: 18px 20px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ppdb-green-900);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
}

.ppdb-faq-content {
  display: none;
  padding: 0 20px 20px;
  color: var(--ppdb-muted);
  line-height: 1.8;
}

.ppdb-faq-item.is-open .ppdb-faq-content {
  display: block;
}

.ppdb-faq-item.is-open .ppdb-faq-button i {
  transform: rotate(45deg);
}

.ppdb-cta {
  margin-top: 12px;
}

.ppdb-cta-panel {
  padding: 32px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background:
    linear-gradient(135deg, rgba(6, 44, 36, 0.98), rgba(15, 74, 61, 0.94)),
    radial-gradient(circle at top right, rgba(201, 154, 59, 0.2), transparent 34%);
  color: #fff;
}

.ppdb-cta-copy {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ppdb-cta-copy i {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 154, 59, 0.16);
  color: var(--ppdb-gold);
  font-size: 2rem;
}

.ppdb-cta-copy h3 {
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 700;
}

.ppdb-cta-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.85;
}

.ppdb-footer {
  position: relative;
  margin-top: 44px;
  padding: 58px 0 22px;
  background:
    linear-gradient(180deg, rgba(9, 59, 50, 0.98), rgba(7, 43, 37, 1)),
    radial-gradient(circle at top right, rgba(201, 154, 59, 0.16), transparent 24%);
  color: #fff;
}

.ppdb-footer-grid {
  grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;
}

.ppdb-footer h4 {
  margin: 0 0 18px;
  font-size: 1.1rem;
  font-weight: 700;
}

.ppdb-footer p,
.ppdb-footer li,
.ppdb-footer a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.85;
}

.ppdb-footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ppdb-footer li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ppdb-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.ppdb-footer-brand img {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px;
}

.ppdb-footer-brand strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
}

.ppdb-footer-brand span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.9rem;
}

.ppdb-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.ppdb-social a {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: transform 0.35s ease, background 0.35s ease;
}

.ppdb-social a:hover {
  transform: translateY(-3px);
  background: rgba(201, 154, 59, 0.18);
}

.ppdb-footer-note {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
  text-align: center;
}

.ppdb-page-hero {
  padding: 26px 28px;
  margin-bottom: 24px;
  background:
    linear-gradient(135deg, rgba(11, 59, 50, 0.95), rgba(20, 101, 85, 0.86)),
    radial-gradient(circle at right top, rgba(201, 154, 59, 0.24), transparent 26%);
  color: #fff;
}

.ppdb-page-hero h2 {
  margin: 10px 0 12px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}

.ppdb-page-hero p {
  margin: 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.85;
}

.ppdb-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.ppdb-page-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
}

.ppdb-split-layout {
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  gap: 22px;
}

.ppdb-visual-panel {
  padding: 32px;
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(9, 59, 50, 0.88), rgba(8, 44, 37, 0.96)),
    radial-gradient(circle at top right, rgba(201, 154, 59, 0.22), transparent 26%);
  color: #fff;
}

.ppdb-visual-panel .ppdb-hero-frame {
  position: relative;
  min-height: 340px;
  inset: auto;
  padding: 12px;
  margin-top: 26px;
}

.ppdb-visual-panel .ppdb-hero-frame::before {
  inset: 10px;
}

.ppdb-form-card {
  padding: 28px;
  overflow: visible;
}

.ppdb-form-card .form-label {
  font-weight: 600;
  color: var(--ppdb-green-900);
}

.ppdb-form-card .form-control,
.ppdb-form-card .form-select,
.ppdb-form-card .select2-container .select2-selection--single,
.ppdb-form-card .daterangepicker input {
  min-height: 54px;
  border-radius: 16px !important;
  border: 1px solid rgba(9, 59, 50, 0.12);
  box-shadow: none !important;
}

.ppdb-form-card .form-control,
.ppdb-form-card .form-select {
  padding: 14px 18px;
}

.ppdb-form-card .form-floating > label {
  padding: 14px 18px;
  line-height: 1.25;
}

.ppdb-form-card .form-floating > .form-control:focus ~ label,
.ppdb-form-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: scale(0.82) translateY(-0.62rem) translateX(0.15rem);
}

.ppdb-form-card .form-control:focus,
.ppdb-form-card .form-select:focus {
  border-color: rgba(31, 138, 112, 0.36);
  box-shadow: 0 0 0 4px rgba(31, 138, 112, 0.08) !important;
}

.ppdb-form-card .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.ppdb-form-card .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 54px;
  padding-left: 0;
  color: var(--ppdb-text);
}

.ppdb-form-card .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 54px;
  right: 14px;
}

.ppdb-wizard-header {
  margin-bottom: 24px;
}

.ppdb-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(9, 59, 50, 0.08);
  overflow: hidden;
  margin-bottom: 22px;
}

.ppdb-progress-bar {
  width: 16.66%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ppdb-green-700), var(--ppdb-gold));
  transition: width 0.35s ease;
}

.ppdb-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.ppdb-stepper-item {
  padding: 14px 12px;
  border-radius: 18px;
  background: rgba(9, 59, 50, 0.04);
  border: 1px solid transparent;
  text-align: center;
  transition: all 0.35s ease;
}

.ppdb-stepper-item.is-active {
  background: rgba(31, 138, 112, 0.1);
  border-color: rgba(31, 138, 112, 0.18);
}

.ppdb-stepper-item span {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 59, 50, 0.12);
  color: var(--ppdb-green-900);
  font-weight: 700;
}

.ppdb-stepper-item.is-active span {
  background: linear-gradient(135deg, var(--ppdb-green-700), var(--ppdb-gold));
  color: #fff;
}

.ppdb-stepper-item strong {
  display: block;
  color: var(--ppdb-green-900);
  font-size: 0.82rem;
  font-weight: 600;
}

.ppdb-wizard-panel {
  display: none;
  animation: ppdbFadeIn 0.35s ease;
}

.ppdb-wizard-panel.is-active {
  display: block;
}

.ppdb-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ppdb-panel-grid .full-span {
  grid-column: 1 / -1;
}

.ppdb-helper {
  margin-top: 10px;
  color: var(--ppdb-muted);
  font-size: 0.88rem;
  line-height: 1.75;
}

.ppdb-registration-photo {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(9, 59, 50, 0.09);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 16%, rgba(224, 173, 61, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 245, 0.94));
  box-shadow: 0 18px 46px rgba(9, 59, 50, 0.07);
}

.ppdb-registration-photo-main {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.ppdb-registration-photo-preview {
  width: 92px;
  height: 122px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  color: rgba(9, 59, 50, 0.5);
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(255, 255, 255, 0.46) 18% 38%, transparent 38% 100%),
    linear-gradient(180deg, #eaf8fc, #cfeaf4);
  border: 5px solid #fff;
  outline: 1px solid rgba(9, 59, 50, 0.1);
  box-shadow:
    0 14px 30px rgba(9, 59, 50, 0.13),
    inset 0 0 0 1px rgba(112, 174, 211, 0.18);
}

.ppdb-photo-avatar {
  position: relative;
  width: 72px;
  height: 94px;
  display: block;
}

.ppdb-photo-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(180deg, #9fd2ef, #7fbfe3);
  transform: translateX(-50%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

.ppdb-photo-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 76px;
  height: 58px;
  border-radius: 42px 42px 16px 16px;
  background: linear-gradient(180deg, #9fd2ef, #73b7dc);
  transform: translateX(-50%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35);
}

.ppdb-registration-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
}

.ppdb-registration-photo-copy p {
  margin: 0 0 10px;
  color: var(--ppdb-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.ppdb-photo-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 118px;
  min-height: 38px;
  padding: 9px 12px;
  margin: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #075f47, #064533);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 24px rgba(7, 86, 64, 0.22);
}

.ppdb-photo-picker i {
  font-size: 0.86rem;
}

.ppdb-photo-picker:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(7, 86, 64, 0.24);
}

.ppdb-photo-filename {
  display: block;
  color: var(--ppdb-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  word-break: break-word;
}

.ppdb-school-autocomplete {
  position: relative;
  z-index: 20;
}

.ppdb-school-results {
  position: absolute;
  z-index: 1200;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: min(320px, 48vh);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(9, 59, 50, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(9, 59, 50, 0.14);
  overscroll-behavior: contain;
}

.ppdb-school-autocomplete.is-upward .ppdb-school-results {
  top: auto;
  bottom: calc(100% + 8px);
  box-shadow: 0 -18px 40px rgba(9, 59, 50, 0.14);
}

.ppdb-school-option {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ppdb-green-900);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.ppdb-school-option:hover,
.ppdb-school-option:focus {
  background: rgba(31, 138, 112, 0.1);
  outline: none;
}

.ppdb-school-empty {
  padding: 11px 12px;
  color: var(--ppdb-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.ppdb-captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.ppdb-captcha img {
  border-radius: 16px;
  border: 1px solid rgba(9, 59, 50, 0.08);
  background: #fff;
  padding: 10px;
}

.ppdb-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ppdb-summary-item {
  padding: 18px;
  border-radius: 18px;
  background: rgba(9, 59, 50, 0.04);
  border: 1px solid rgba(9, 59, 50, 0.08);
}

.ppdb-summary-item strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ppdb-green-900);
  font-size: 0.92rem;
  font-weight: 700;
}

.ppdb-summary-item span {
  color: var(--ppdb-muted);
  line-height: 1.75;
}

.ppdb-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.ppdb-aside-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.ppdb-aside-list .ppdb-card {
  padding: 16px 18px;
}

.ppdb-aside-list strong {
  display: block;
  color: var(--ppdb-green-900);
  font-weight: 700;
}

.ppdb-aside-list span,
.ppdb-aside-list a {
  display: block;
  margin-top: 6px;
  color: var(--ppdb-muted);
  line-height: 1.7;
}

.ppdb-data-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.ppdb-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

.ppdb-badge-success {
  background: rgba(31, 138, 112, 0.12);
  color: var(--ppdb-green-700);
}

.ppdb-badge-warning {
  background: rgba(201, 154, 59, 0.16);
  color: var(--ppdb-gold-deep);
}

.ppdb-badge-danger {
  background: rgba(179, 68, 68, 0.12);
  color: #9f2f2f;
}

.ppdb-table-wrap {
  overflow: hidden;
}

.ppdb-table {
  width: 100% !important;
  margin: 0 !important;
}

.ppdb-table thead th {
  background: rgba(9, 59, 50, 0.04);
  color: var(--ppdb-green-900);
  font-size: 0.88rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(9, 59, 50, 0.08);
}

.ppdb-table tbody td {
  vertical-align: middle;
  color: var(--ppdb-text);
  font-size: 0.92rem;
}

.ppdb-table .dataTables_wrapper .dataTables_filter input,
.ppdb-table .dataTables_wrapper .dataTables_length select {
  border-radius: 12px;
  border: 1px solid rgba(9, 59, 50, 0.12);
  padding: 8px 12px;
}

.ppdb-announcement-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 22px;
}

.ppdb-news-feature {
  overflow: hidden;
}

.ppdb-news-feature .ppdb-card-body,
.ppdb-news-list .ppdb-card-body {
  padding: 26px;
}

.ppdb-news-feature h3,
.ppdb-news-list h3 {
  margin: 0 0 12px;
  color: var(--ppdb-green-900);
  font-size: 1.4rem;
  font-weight: 700;
}

.ppdb-news-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--ppdb-gold-deep);
  font-size: 0.86rem;
  font-weight: 600;
}

.ppdb-news-feature p,
.ppdb-news-list p {
  margin: 0;
  color: var(--ppdb-muted);
  line-height: 1.85;
}

.ppdb-news-list {
  display: grid;
  gap: 16px;
}

.ppdb-success-card {
  padding: 34px;
  text-align: center;
}

.ppdb-success-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 22px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ppdb-green-900), var(--ppdb-emerald));
  color: #fff;
  font-size: 2.3rem;
  box-shadow: 0 18px 32px rgba(15, 74, 61, 0.2);
}

.ppdb-success-card h2 {
  margin: 0 0 12px;
  color: var(--ppdb-green-900);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
}

.ppdb-success-card p {
  margin: 0 auto;
  max-width: 680px;
  color: var(--ppdb-muted);
  line-height: 1.85;
}

.ppdb-auth-credentials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0;
  text-align: left;
}

.ppdb-auth-credentials .ppdb-summary-item {
  background: rgba(255, 255, 255, 0.92);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.d-none-force {
  display: none !important;
}

.full-span {
  grid-column: 1 / -1;
}

@keyframes ppdbFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1199.98px) {
  .ppdb-navbar {
    border-radius: 22px;
  }

  .ppdb-highlight-grid,
  .ppdb-stats-grid,
  .ppdb-timeline,
  .ppdb-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppdb-info-grid,
  .ppdb-faq-grid,
  .ppdb-announcement-grid,
  .ppdb-footer-grid,
  .ppdb-split-layout {
    grid-template-columns: 1fr;
  }

  .ppdb-major-grid,
  .ppdb-summary-grid,
  .ppdb-auth-credentials {
    grid-template-columns: 1fr;
  }

  .ppdb-floating-card {
    position: static;
    margin-top: 20px;
  }

  .ppdb-hero-visual {
    min-height: auto;
  }

  .ppdb-hero-frame {
    position: relative;
    min-height: 460px;
  }

  .ppdb-hero-badge {
    width: 108px;
    height: 108px;
  }
}

@media (max-width: 991.98px) {
  .ppdb-header {
    padding: 10px 0 0;
  }

  .ppdb-navbar {
    padding: 16px 18px;
  }

  .ppdb-navbar .navbar-collapse {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .ppdb-header.is-scrolled .ppdb-navbar .navbar-collapse {
    border-top-color: rgba(9, 59, 50, 0.08);
  }

  .ppdb-navbar .navbar-nav {
    gap: 10px;
  }

  .ppdb-hero-shell,
  .ppdb-strip,
  .ppdb-page-hero,
  .ppdb-info-card,
  .ppdb-contact-card,
  .ppdb-page-card,
  .ppdb-panel-card,
  .ppdb-form-card,
  .ppdb-success-card,
  .ppdb-faq-copy,
  .ppdb-visual-panel,
  .ppdb-cta-panel {
    padding: 26px;
  }

  .ppdb-highlight-grid,
  .ppdb-panel-grid,
  .ppdb-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ppdb-timeline-item::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .ppdb-brand-copy strong {
    font-size: 1rem;
  }

  .ppdb-brand-copy span {
    font-size: 0.8rem;
  }

  .ppdb-hero {
    padding-top: 18px;
  }

  .ppdb-hero-shell {
    padding: 24px 18px;
    border-radius: 28px;
  }

  .ppdb-highlight-grid,
  .ppdb-panel-grid,
  .ppdb-stats-grid,
  .ppdb-timeline,
  .ppdb-stepper,
  .ppdb-summary-grid,
  .ppdb-auth-credentials {
    grid-template-columns: 1fr;
  }

  .ppdb-registration-photo {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
    text-align: center;
  }

  .ppdb-registration-photo-preview {
    width: 104px;
    height: 140px;
    border-radius: 14px;
  }

  .ppdb-photo-picker {
    margin-bottom: 0;
  }

  .ppdb-hero-frame {
    min-height: 360px;
    padding: 12px 12px 14px;
  }

  .ppdb-hero-badge {
    top: 18px;
    right: 18px;
    width: 88px;
    height: 88px;
  }

  .ppdb-highlight-item {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .ppdb-highlight-icon {
    margin: 0;
    flex-shrink: 0;
  }

  .ppdb-strip-copy,
  .ppdb-cta-copy {
    align-items: flex-start;
  }

  .ppdb-stat-card,
  .ppdb-major-card {
    flex-direction: column;
    align-items: flex-start;
  }
}
























.ppdb-ref-header {
  padding: 0;
  background: linear-gradient(90deg, #06362f 0%, #0b493d 58%, #07352e 100%);
  box-shadow: 0 18px 36px rgba(6, 44, 36, 0.18);
}

.ppdb-ref-navbar {
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ppdb-ref-nav-inner {
  min-height: 92px;
}

.ppdb-ref-brand {
  gap: 16px;
}

.ppdb-ref-brand .ppdb-brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  padding: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.ppdb-ref-brand .ppdb-brand-copy strong {
  font-size: 1.55rem;
  letter-spacing: 0.01em;
}

.ppdb-ref-brand .ppdb-brand-copy span {
  color: #d6b158;
  font-weight: 500;
  font-size: 0.98rem;
}

.ppdb-ref-nav-list {
  gap: 10px;
}

.ppdb-ref-nav-link {
  padding: 28px 10px !important;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
}

.ppdb-ref-nav-link::after {
  left: 10px;
  right: 10px;
  bottom: 20px;
  height: 3px;
  background: linear-gradient(90deg, #d8a948, rgba(216, 169, 72, 0));
}

.ppdb-ref-login {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid rgba(216, 169, 72, 0.8);
  border-radius: 14px;
  color: #fff;
  font-weight: 600;
  transition: all 0.35s ease;
}

.ppdb-ref-login:hover {
  background: rgba(216, 169, 72, 0.12);
  color: #fff;
}

.ppdb-header.is-scrolled.ppdb-ref-header {
  padding-top: 0;
}

.ppdb-header.is-scrolled .ppdb-ref-navbar {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ppdb-header.is-scrolled .ppdb-ref-brand .ppdb-brand-copy strong,
.ppdb-header.is-scrolled .ppdb-ref-nav-link,
.ppdb-header.is-scrolled .ppdb-ref-login,
.ppdb-header.is-scrolled .ppdb-ref-navbar .navbar-toggler {
  color: #fff;
}

.ppdb-header.is-scrolled .ppdb-ref-brand .ppdb-brand-copy span {
  color: #d6b158;
}

.ppdb-ref-hero {
  padding: 28px 0 22px;
}

.ppdb-ref-hero-card {
  position: relative;
  overflow: hidden;
  padding: 34px 34px 24px;
  border-radius: 0 0 30px 30px;
  background:
    radial-gradient(circle at top left, rgba(219, 173, 81, 0.1), transparent 26%),
    linear-gradient(180deg, #fffdf9 0%, #fff9f0 100%);
  box-shadow: 0 18px 38px rgba(11, 59, 50, 0.08);
}

.ppdb-ref-copy {
  padding: 18px 10px 10px 6px;
}

.ppdb-ref-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 12px;
}

.ppdb-ref-title-row h1 {
  margin: 0;
  font-size: clamp(4rem, 7vw, 6rem);
  line-height: 0.88;
  font-weight: 700;
  color: #083b32;
}

.ppdb-ref-title-row span {
  color: #d19b3a;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

.ppdb-ref-copy h2 {
  margin: 0;
  max-width: 520px;
  color: #0d493d;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.15;
  font-weight: 700;
}

.ppdb-ref-school {
  margin: 10px 0 0;
  color: #2a322f;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
}

.ppdb-ref-tagline {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0 18px;
  color: #c68b2d;
  font-size: clamp(1.5rem, 2vw, 2.15rem);
  font-style: italic;
  font-weight: 500;
}

.ppdb-ref-tagline span {
  width: 76px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214, 177, 88, 0.15), rgba(214, 177, 88, 0.95));
}

.ppdb-ref-description {
  max-width: 510px;
  margin: 0 0 28px;
  color: #495654;
  font-size: 1.02rem;
  line-height: 1.85;
}

.ppdb-ref-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 560px;
}

.ppdb-ref-feature {
  text-align: center;
}

.ppdb-ref-feature-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #083f35, #0b5f50);
  color: #ddb456;
  font-size: 1.5rem;
  box-shadow: 0 10px 24px rgba(8, 63, 53, 0.16);
}

.ppdb-ref-feature strong {
  display: block;
  color: #20312d;
  font-size: 0.94rem;
  line-height: 1.45;
  font-weight: 500;
}

.ppdb-ref-visual {
  position: relative;
  min-height: 600px;
  padding-left: 42px;
}

.ppdb-ref-visual::before {
  content: "";
  position: absolute;
  top: -30px;
  bottom: 88px;
  left: -36px;
  width: 220px;
  border: 5px solid #d4a145;
  border-right: 0;
  border-radius: 220px 0 0 220px;
  pointer-events: none;
}

.ppdb-ref-visual::after {
  content: "";
  position: absolute;
  inset: 12% 0 8% auto;
  width: 140px;
  background: radial-gradient(circle at center, rgba(255, 216, 145, 0.38), rgba(255, 216, 145, 0));
  pointer-events: none;
}

.ppdb-ref-image-wrap {
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 42px;
  box-shadow: 0 24px 52px rgba(11, 59, 50, 0.14);
}

.ppdb-ref-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ppdb-ref-accreditation {
  position: absolute;
  top: 26px;
  right: 18px;
  width: 122px;
  height: 122px;
  padding: 14px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #f6d996 0%, #c5302f 45%, #961717 100%);
  color: #fff8ea;
  text-align: center;
  box-shadow: 0 18px 32px rgba(149, 22, 24, 0.24);
}

.ppdb-ref-accreditation span,
.ppdb-ref-accreditation small {
  display: block;
  line-height: 1.1;
}

.ppdb-ref-accreditation span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ppdb-ref-accreditation strong {
  margin: 4px 0 2px;
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
}

.ppdb-ref-accreditation small {
  max-width: 92px;
  font-size: 0.52rem;
  font-weight: 600;
}

.ppdb-ref-meta {
  position: absolute;
  right: 24px;
  bottom: 20px;
  left: 74px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 2px solid rgba(216, 169, 72, 0.72);
  border-radius: 20px;
  background: rgba(7, 58, 49, 0.94);
  color: #fff;
  box-shadow: 0 22px 44px rgba(11, 59, 50, 0.18);
}

.ppdb-ref-meta-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
}

.ppdb-ref-meta-item + .ppdb-ref-meta-item {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.ppdb-ref-meta-item i {
  color: #ddb456;
  font-size: 2rem;
}

.ppdb-ref-meta-item small,
.ppdb-ref-meta-item strong {
  display: block;
}

.ppdb-ref-meta-item small {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.ppdb-ref-meta-item strong {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.ppdb-ref-promo {
  padding: 18px 24px;
  border: 1px solid rgba(11, 59, 50, 0.08);
  border-radius: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(11, 59, 50, 0.08);
}

.ppdb-ref-promo-copy {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ppdb-ref-promo-icon {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #073b32, #0b5f50);
  color: #d9b04f;
  font-size: 1.8rem;
}

.ppdb-ref-promo h3 {
  margin: 0 0 4px;
  color: #103f36;
  font-size: 2.1rem;
  font-weight: 700;
}

.ppdb-ref-promo p {
  margin: 0;
  color: #cc952f;
  font-size: 1.35rem;
  font-weight: 700;
}

.ppdb-ref-promo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ppdb-ref-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(11, 59, 50, 0.08);
}

.ppdb-ref-stat-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 30px;
}

.ppdb-ref-stat-item + .ppdb-ref-stat-item {
  border-left: 1px solid rgba(11, 59, 50, 0.08);
}

.ppdb-ref-stat-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef7ec, #dff2dd);
  color: #366d4f;
  font-size: 1.95rem;
  flex-shrink: 0;
}

.ppdb-ref-stat-item strong {
  display: block;
  color: #163930;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 700;
}

.ppdb-ref-stat-item span {
  display: block;
  margin-top: 8px;
  color: #4f5c59;
  font-size: 0.96rem;
}

.ppdb-ref-section {
  padding-top: 20px;
}

.ppdb-ref-section-title {
  margin-bottom: 18px;
  text-align: center;
}

.ppdb-ref-section-title h2 {
  margin: 0 0 8px;
  color: #0d4238;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700;
}

.ppdb-ref-section-title p {
  margin: 0;
  color: #5c6764;
  font-size: 1rem;
}

.ppdb-ref-info-panel {
  display: grid;
  grid-template-columns: 1.05fr 0.9fr 0.95fr;
  gap: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(11, 59, 50, 0.08);
}

.ppdb-ref-info-column,
.ppdb-ref-watermark-column,
.ppdb-ref-contact-column {
  padding: 34px 30px;
}

.ppdb-ref-info-column h2,
.ppdb-ref-contact-column h2 {
  margin: 0 0 10px;
  color: #0f4137;
  font-size: 1.9rem;
  font-weight: 700;
}

.ppdb-ref-info-column > p,
.ppdb-ref-contact-column > p,
.ppdb-ref-watermark-column p {
  margin: 0;
  color: #5f6966;
  line-height: 1.75;
}

.ppdb-ref-info-list {
  display: grid;
  gap: 12px;
  margin: 26px 0 22px;
}

.ppdb-ref-info-item {
  border: 1px solid rgba(11, 59, 50, 0.08);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.ppdb-ref-info-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  color: #173f36;
  font-weight: 600;
}

.ppdb-ref-info-item summary::-webkit-details-marker {
  display: none;
}

.ppdb-ref-info-item summary span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ppdb-ref-info-item summary i {
  color: #194a3f;
}

.ppdb-ref-info-item[open] summary .bi-chevron-right {
  transform: rotate(90deg);
}

.ppdb-ref-info-content {
  padding: 0 18px 18px;
  color: #5a6662;
  line-height: 1.8;
}

.ppdb-ref-info-content p:last-child {
  margin-bottom: 0;
}

.ppdb-ref-watermark-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid rgba(216, 169, 72, 0.2);
  border-right: 1px solid rgba(216, 169, 72, 0.2);
  background:
    radial-gradient(circle at center, rgba(214, 177, 88, 0.12), rgba(214, 177, 88, 0) 55%),
    linear-gradient(180deg, #fffcf7 0%, #fff 100%);
}

.ppdb-ref-watermark-ring {
  width: min(280px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(214, 177, 88, 0.45);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 16px rgba(214, 177, 88, 0.08);
}

.ppdb-ref-watermark-ring img {
  width: 58%;
  opacity: 0.9;
}

.ppdb-ref-watermark-column p {
  margin-top: 20px;
  color: #b2862b;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.ppdb-ref-contact-list {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.ppdb-ref-contact-item {
  display: flex;
  gap: 16px;
}

.ppdb-ref-contact-item i {
  color: #1e7c54;
  font-size: 1.85rem;
  flex-shrink: 0;
}

.ppdb-ref-contact-item strong,
.ppdb-ref-contact-item a,
.ppdb-ref-contact-item p {
  display: block;
}

.ppdb-ref-contact-item strong {
  margin-bottom: 4px;
  color: #173f36;
  font-weight: 600;
}

.ppdb-ref-contact-item a,
.ppdb-ref-contact-item p {
  margin: 0;
  color: #4d5a57;
  line-height: 1.7;
}

.ppdb-ref-major-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ppdb-ref-major-card {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px;
  border: 1px solid rgba(11, 59, 50, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(11, 59, 50, 0.06);
}

.ppdb-ref-major-emblem {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 90% 12%, 90% 72%, 50% 100%, 10% 72%, 10% 12%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0a5649, #07352f);
  color: #dfb85a;
  font-size: 2.3rem;
}

.ppdb-ref-major-emblem.is-light {
  background: linear-gradient(160deg, #fff7df, #ebd59e);
  color: #a07a25;
}

.ppdb-ref-major-card h3 {
  margin: 0 0 8px;
  color: #153f36;
  font-size: 2rem;
  font-weight: 700;
}

.ppdb-ref-major-card p {
  margin: 0;
  color: #54615d;
  line-height: 1.78;
}

.ppdb-ref-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  padding: 30px 24px 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(11, 59, 50, 0.08);
}

.ppdb-ref-step {
  position: relative;
  text-align: center;
}

.ppdb-ref-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 39px;
  left: calc(50% + 48px);
  width: calc(100% - 96px);
  border-top: 2px dashed rgba(214, 177, 88, 0.7);
}

.ppdb-ref-step-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #073b32, #0b5a4d);
  color: #ddb456;
  font-size: 2rem;
  box-shadow: 0 12px 28px rgba(7, 59, 50, 0.14);
}

.ppdb-ref-step-number {
  width: 30px;
  height: 30px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d6a546;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.ppdb-ref-step h3 {
  margin: 0 0 8px;
  color: #173f36;
  font-size: 1.2rem;
  font-weight: 700;
}

.ppdb-ref-step p {
  margin: 0;
  color: #55615e;
  line-height: 1.7;
}

.ppdb-ref-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.ppdb-ref-gallery-card {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(11, 59, 50, 0.08);
}

.ppdb-ref-gallery-card img {
  width: 100%;
  height: 168px;
  object-fit: cover;
}

.ppdb-ref-gallery-card h3 {
  margin: 0;
  padding: 14px 12px 16px;
  color: #193e35;
  font-size: 0.95rem;
  text-align: center;
  font-weight: 600;
}

.ppdb-ref-cta-section {
  padding-top: 12px;
}

.ppdb-ref-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(90deg, #07372f 0%, #0b4d3f 65%, #083830 100%);
  box-shadow: 0 20px 40px rgba(7, 55, 47, 0.18);
}

.ppdb-ref-cta-copy {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  color: #fff;
}

.ppdb-ref-cta-icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(216, 169, 72, 0.12);
  color: #ddb456;
  font-size: 2.7rem;
}

.ppdb-ref-cta-copy h3 {
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 700;
}

.ppdb-ref-cta-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

.ppdb-ref-cta .ppdb-btn {
  margin: 20px 24px;
  min-width: 260px;
}

.ppdb-ref-footer {
  margin-top: 30px;
  padding: 34px 0 18px;
  background: linear-gradient(180deg, #06362f 0%, #042a24 100%);
}

.ppdb-ref-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 30px;
}

.ppdb-ref-footer-brand .ppdb-brand-logo,
.ppdb-ref-footer-brand img {
  width: 72px;
  height: 72px;
}

.ppdb-ref-footer-brand-col p {
  margin: 18px 0 20px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.85;
}

.ppdb-ref-footer .ppdb-social a {
  background: rgba(255, 255, 255, 0.08);
}

.ppdb-ref-footer .ppdb-social a:hover {
  background: rgba(216, 169, 72, 0.18);
  color: #ddb456;
}

@media (max-width: 1399.98px) {
  .ppdb-ref-feature-grid,
  .ppdb-ref-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppdb-ref-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .ppdb-ref-hero-card {
    border-radius: 0 0 26px 26px;
  }

  .ppdb-ref-copy {
    padding-right: 0;
  }

  .ppdb-ref-feature-grid,
  .ppdb-ref-stats,
  .ppdb-ref-major-grid,
  .ppdb-ref-timeline,
  .ppdb-ref-gallery-grid,
  .ppdb-ref-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppdb-ref-info-panel {
    grid-template-columns: 1fr;
  }

  .ppdb-ref-watermark-column {
    border-right: 0;
    border-left: 0;
    border-top: 1px solid rgba(216, 169, 72, 0.2);
    border-bottom: 1px solid rgba(216, 169, 72, 0.2);
  }

  .ppdb-ref-visual {
    min-height: auto;
    padding-left: 0;
    margin-top: 24px;
  }

  .ppdb-ref-visual::before {
    left: -10px;
    width: 140px;
    bottom: 110px;
  }

  .ppdb-ref-image-wrap {
    min-height: 460px;
  }

  .ppdb-ref-meta {
    left: 24px;
  }

  .ppdb-ref-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .ppdb-ref-navbar .navbar-collapse {
    margin-top: 0;
    padding: 0 0 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .ppdb-ref-nav-link {
    padding: 14px 0 !important;
  }

  .ppdb-ref-nav-link::after {
    left: 0;
    right: auto;
    width: 42px;
    bottom: 6px;
  }

  .ppdb-ref-login {
    width: 100%;
    justify-content: center;
  }

  .ppdb-ref-promo,
  .ppdb-ref-cta {
    padding: 22px;
  }

  .ppdb-ref-cta .ppdb-btn {
    margin: 0;
    width: 100%;
  }

  .ppdb-ref-cta-copy {
    padding: 0;
  }

  .ppdb-ref-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .ppdb-ref-nav-inner {
    min-height: 82px;
  }

  .ppdb-ref-brand .ppdb-brand-logo {
    width: 56px;
    height: 56px;
  }

  .ppdb-ref-brand .ppdb-brand-copy strong {
    font-size: 1.05rem;
  }

  .ppdb-ref-brand .ppdb-brand-copy span {
    font-size: 0.8rem;
  }

  .ppdb-ref-hero-card {
    padding: 20px 18px 18px;
  }

  .ppdb-ref-title-row {
    gap: 10px;
  }

  .ppdb-ref-title-row h1 {
    font-size: 3.3rem;
  }

  .ppdb-ref-copy h2 {
    font-size: 1.7rem;
  }

  .ppdb-ref-school {
    font-size: 1.25rem;
  }

  .ppdb-ref-tagline {
    gap: 10px;
    font-size: 1.25rem;
  }

  .ppdb-ref-tagline span {
    width: 38px;
  }

  .ppdb-ref-feature-grid,
  .ppdb-ref-stats,
  .ppdb-ref-major-grid,
  .ppdb-ref-timeline,
  .ppdb-ref-gallery-grid,
  .ppdb-ref-footer-grid,
  .ppdb-ref-meta {
    grid-template-columns: 1fr;
  }

  .ppdb-ref-image-wrap {
    min-height: 320px;
    border-radius: 26px;
  }

  .ppdb-ref-visual::before,
  .ppdb-ref-visual::after {
    display: none;
  }

  .ppdb-ref-accreditation {
    top: 14px;
    right: 12px;
    width: 88px;
    height: 88px;
    padding: 10px;
  }

  .ppdb-ref-accreditation strong {
    font-size: 2.25rem;
  }

  .ppdb-ref-accreditation small {
    font-size: 0.42rem;
  }

  .ppdb-ref-meta {
    position: static;
    margin-top: 16px;
  }

  .ppdb-ref-promo,
  .ppdb-ref-info-column,
  .ppdb-ref-watermark-column,
  .ppdb-ref-contact-column,
  .ppdb-ref-major-card {
    padding: 22px 18px;
  }

  .ppdb-ref-promo h3 {
    font-size: 1.4rem;
  }

  .ppdb-ref-promo p {
    font-size: 1rem;
  }

  .ppdb-ref-stat-item {
    padding: 20px 18px;
  }

  .ppdb-ref-stat-item + .ppdb-ref-stat-item {
    border-left: 0;
    border-top: 1px solid rgba(11, 59, 50, 0.08);
  }

  .ppdb-ref-major-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .ppdb-ref-major-emblem {
    width: 96px;
    height: 96px;
  }

  .ppdb-ref-cta-copy {
    flex-direction: column;
    align-items: flex-start;
  }
}

body.ppdb-public .container {
  max-width: 1468px;
}

.reveal,
.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

.ppdb-ref-hero {
  padding: 24px 0 12px;
}

.ppdb-ref-hero-card {
  padding: 34px 36px 18px;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.ppdb-ref-title-row h1 {
  font-size: clamp(4.65rem, 7vw, 6rem);
  letter-spacing: -0.04em;
}

.ppdb-ref-title-row span {
  margin-bottom: 10px;
  font-size: clamp(2rem, 2.9vw, 3.1rem);
}

.ppdb-ref-copy h2 {
  max-width: 540px;
  font-size: clamp(1.95rem, 3.5vw, 2.95rem);
}

.ppdb-ref-school {
  max-width: 520px;
  font-size: clamp(1.25rem, 2.1vw, 1.9rem);
}

.ppdb-ref-tagline {
  margin: 18px 0 16px;
  font-size: clamp(1.25rem, 2vw, 2rem);
}

.ppdb-ref-description {
  max-width: 440px;
  margin-bottom: 20px;
  font-size: 0.98rem;
  line-height: 1.62;
}

.ppdb-ref-feature-grid {
  gap: 12px;
  max-width: 560px;
}

.ppdb-ref-feature-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  font-size: 1.35rem;
}

.ppdb-ref-feature strong {
  font-size: 0.9rem;
  line-height: 1.35;
}

.ppdb-ref-hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 22px;
}

.ppdb-ref-hero-actions .ppdb-btn {
  min-width: 212px;
  min-height: 56px;
  padding-inline: 22px;
}

.ppdb-ref-visual {
  min-height: auto;
  padding-left: 0;
}

.ppdb-ref-visual::before {
  display: none;
}

.ppdb-ref-image-wrap {
  min-height: 0;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.ppdb-ref-image-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.ppdb-ref-accreditation,
.ppdb-ref-meta,
.ppdb-ref-visual::after {
  display: none;
}

.ppdb-ref-meta-item {
  padding: 18px 22px;
}

.ppdb-ref-meta-item strong {
  font-size: 0.98rem;
}

.ppdb-ref-meta-item:last-child strong {
  font-size: 0.9rem;
}

.ppdb-ref-promo {
  padding: 16px 22px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.ppdb-ref-promo h3 {
  font-size: 1.15rem;
}

.ppdb-ref-promo p {
  font-size: 0.95rem;
}

.ppdb-ref-promo-icon {
  width: 58px;
  height: 58px;
  font-size: 1.45rem;
}

.ppdb-ref-promo-actions .ppdb-btn {
  min-width: 246px;
  padding-inline: 28px;
}

.ppdb-ref-stats {
  margin-top: 4px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.ppdb-ref-stat-item {
  gap: 16px;
  padding: 18px 28px;
}

.ppdb-ref-stat-icon {
  width: 64px;
  height: 64px;
  font-size: 1.65rem;
}

.ppdb-ref-stat-item strong {
  font-size: clamp(2rem, 3vw, 2.75rem);
}

.ppdb-ref-stat-item span {
  margin-top: 6px;
  font-size: 0.92rem;
}

.ppdb-ref-row {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.ppdb-ref-row-top {
  grid-template-columns: minmax(0, 1.52fr) minmax(380px, 0.88fr);
  align-items: stretch;
}

.ppdb-ref-row-mid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.34fr) minmax(220px, 0.58fr);
  align-items: stretch;
}

.ppdb-ref-row-bottom {
  grid-template-columns: minmax(300px, 0.88fr) minmax(0, 2.1fr);
  align-items: stretch;
  margin-top: 16px;
}

.ppdb-ref-panel {
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.ppdb-ref-panel .ppdb-ref-section-title {
  margin-bottom: 14px;
}

.ppdb-ref-panel .ppdb-ref-section-title h2 {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.ppdb-ref-panel .ppdb-ref-section-title p {
  font-size: 0.78rem;
  line-height: 1.4;
}

.ppdb-ref-panel-info .ppdb-ref-info-panel {
  min-height: 404px;
  box-shadow: none;
  border-radius: 0;
}

.ppdb-ref-static-panel {
  position: relative;
}

.ppdb-ref-static-image {
  display: block;
  width: 100%;
  height: auto;
}

.ppdb-ref-static-link {
  position: absolute;
  display: block;
}

.ppdb-ref-static-link-info {
  left: 4.2%;
  bottom: 8.2%;
  width: 28.5%;
  height: 15%;
}

.ppdb-ref-panel-info {
  padding: 0;
}

.ppdb-ref-panel-info .ppdb-ref-static-panel-info {
  overflow: hidden;
}

.ppdb-ref-info-column,
.ppdb-ref-watermark-column,
.ppdb-ref-contact-column {
  padding: 22px 22px 20px;
}

.ppdb-ref-info-column h2,
.ppdb-ref-contact-column h2 {
  font-size: 0.98rem;
  margin-bottom: 8px;
}

.ppdb-ref-info-column > p,
.ppdb-ref-contact-column > p {
  font-size: 0.78rem;
  line-height: 1.55;
}

.ppdb-ref-info-list {
  gap: 10px;
  margin: 18px 0 18px;
}

.ppdb-ref-info-item {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(11, 59, 50, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #183f36;
  font-size: 0.8rem;
  font-weight: 500;
}

.ppdb-ref-info-item span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ppdb-ref-watermark-column {
  min-width: 0;
}

.ppdb-ref-watermark-ring {
  width: 250px;
  box-shadow: inset 0 0 0 12px rgba(214, 177, 88, 0.06);
}

.ppdb-ref-contact-list {
  gap: 16px;
  margin-top: 18px;
}

.ppdb-ref-contact-item {
  gap: 12px;
}

.ppdb-ref-contact-item i {
  font-size: 1.55rem;
}

.ppdb-ref-contact-item strong {
  font-size: 0.84rem;
}

.ppdb-ref-contact-item p {
  font-size: 0.78rem;
  line-height: 1.55;
}

.ppdb-ref-panel-jurusan {
  padding: 16px 16px 12px;
}

.ppdb-ref-panel-jurusan .ppdb-ref-section-title {
  margin-bottom: 14px;
}

.ppdb-ref-panel-jurusan .ppdb-ref-section-title h2 {
  font-size: 0.98rem;
}

.ppdb-ref-panel-jurusan .ppdb-ref-section-title p {
  font-size: 0.72rem;
}

.ppdb-ref-major-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.ppdb-ref-major-card {
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: none;
}

.ppdb-ref-major-emblem {
  width: 92px;
  height: 92px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.ppdb-ref-major-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ppdb-ref-major-card h3 {
  font-size: 0.98rem;
  margin-bottom: 6px;
}

.ppdb-ref-major-card p {
  font-size: 0.78rem;
  line-height: 1.55;
}

.ppdb-ref-panel-alur,
.ppdb-ref-panel-testimonial {
  padding: 12px 16px 14px;
}

.ppdb-ref-panel-alur {
  padding: 0;
}

.ppdb-ref-panel-alur .ppdb-ref-static-image {
  transform: scale(1.04);
  transform-origin: center top;
}

.ppdb-ref-panel-gallery {
  padding: 12px 16px 14px;
}

.ppdb-ref-panel-alur .ppdb-ref-timeline {
  padding: 8px 0 0;
  background: transparent;
  box-shadow: none;
  gap: 12px;
}

.ppdb-ref-panel-alur .ppdb-ref-step-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 8px;
  font-size: 1.35rem;
}

.ppdb-ref-panel-alur .ppdb-ref-step-number {
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
  font-size: 0.7rem;
}

.ppdb-ref-panel-alur .ppdb-ref-step h3 {
  font-size: 0.84rem;
  margin-bottom: 6px;
}

.ppdb-ref-panel-alur .ppdb-ref-step p {
  font-size: 0.68rem;
  line-height: 1.45;
}

.ppdb-ref-panel-alur .ppdb-ref-step:not(:last-child)::after {
  top: 27px;
  left: calc(50% + 34px);
  width: calc(100% - 68px);
}

.ppdb-ref-panel-gallery .ppdb-ref-gallery-grid {
  gap: 8px;
}

.ppdb-ref-gallery-strip img {
  border-radius: 12px;
  transform: scale(1.03);
  transform-origin: center top;
}

.ppdb-ref-panel-gallery .ppdb-ref-gallery-card {
  box-shadow: none;
  border: 1px solid rgba(11, 59, 50, 0.08);
}

.ppdb-ref-panel-gallery .ppdb-ref-gallery-card img {
  height: 88px;
}

.ppdb-ref-panel-gallery .ppdb-ref-gallery-card h3 {
  padding: 10px 8px 11px;
  font-size: 0.72rem;
}

.ppdb-ref-panel-testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding-inline: 14px;
  padding-top: 14px;
}

.ppdb-ref-testimonial-header {
  color: #173f36;
  font-size: 0.98rem;
  font-weight: 700;
}

.ppdb-ref-testimonial-body {
  margin-top: 18px;
  color: #43524f;
}

.ppdb-ref-testimonial-body i {
  color: #133f36;
  font-size: 1.2rem;
}

.ppdb-ref-testimonial-body p {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.7;
}

.ppdb-ref-testimonial-meta {
  margin-top: 16px;
  text-align: right;
}

.ppdb-ref-testimonial-meta strong,
.ppdb-ref-testimonial-meta span {
  display: block;
}

.ppdb-ref-testimonial-meta strong {
  color: #193e35;
  font-size: 0.8rem;
}

.ppdb-ref-testimonial-meta span {
  color: #5b6865;
  font-size: 0.68rem;
}

.ppdb-ref-testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.ppdb-ref-testimonial-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(16, 63, 54, 0.22);
}

.ppdb-ref-testimonial-dots .is-active {
  background: #103f36;
}

.ppdb-ref-panel-faq {
  padding: 12px 14px;
}

.ppdb-ref-faq-title {
  margin-bottom: 10px;
  color: #173f36;
  font-size: 0.96rem;
  font-weight: 700;
}

.ppdb-ref-faq-list {
  display: grid;
  gap: 8px;
}

.ppdb-ref-faq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(11, 59, 50, 0.08);
  color: #183f36;
  font-size: 0.78rem;
}

.ppdb-ref-row-bottom .ppdb-ref-cta-section {
  padding: 0;
  margin: 0;
}

.ppdb-ref-row-bottom .ppdb-ref-cta {
  min-height: 100%;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}

.ppdb-ref-row-bottom .ppdb-ref-cta-copy {
  padding: 12px 18px;
}

.ppdb-ref-row-bottom .ppdb-ref-cta-icon {
  width: 96px;
  height: 64px;
  border-radius: 0;
  background: transparent;
  font-size: 2.45rem;
}

.ppdb-ref-row-bottom .ppdb-ref-cta-copy h3 {
  font-size: 1.15rem;
}

.ppdb-ref-row-bottom .ppdb-ref-cta-copy p {
  font-size: 0.78rem;
  line-height: 1.5;
}

.ppdb-ref-row-bottom .ppdb-ref-cta .ppdb-btn {
  min-width: 228px;
  margin: 10px 18px;
}

.ppdb-ref-footer {
  margin-top: 18px;
  padding-top: 12px;
  padding-bottom: 8px;
}

.ppdb-ref-footer-grid {
  grid-template-columns: 1.28fr 0.9fr 0.9fr 0.95fr 0.9fr;
  gap: 22px;
}

.ppdb-ref-footer-grid > div {
  position: relative;
}

.ppdb-ref-footer-grid > div:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 8px;
  left: -14px;
  width: 1px;
  background: rgba(216, 169, 72, 0.22);
}

.ppdb-ref-footer-brand-col p,
.ppdb-ref-footer p,
.ppdb-ref-footer li,
.ppdb-ref-footer a {
  font-size: 0.72rem;
  line-height: 1.48;
}

.ppdb-ref-footer h4 {
  margin-bottom: 8px;
  font-size: 0.88rem;
}

.ppdb-ref-footer .ppdb-footer-note {
  margin-top: 12px;
  padding-top: 12px;
  font-size: 0.72rem;
}

@media (max-width: 1399.98px) {
  .ppdb-ref-row-top,
  .ppdb-ref-row-mid,
  .ppdb-ref-row-bottom {
    grid-template-columns: 1fr;
  }

  .ppdb-ref-major-grid,
  .ppdb-ref-gallery-grid,
  .ppdb-ref-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  body.ppdb-public .container {
    max-width: 100%;
  }

  .ppdb-ref-info-panel {
    grid-template-columns: 1fr;
  }

  .ppdb-ref-watermark-column {
    border-right: 0;
    border-left: 0;
  }

  .ppdb-ref-footer-grid,
  .ppdb-ref-gallery-grid,
  .ppdb-ref-major-grid {
    grid-template-columns: 1fr;
  }
}

body.ppdb-public {
  background: #f7f8f3;
  overflow-x: hidden;
}

body.ppdb-public .container {
  max-width: 1400px;
  padding-left: 16px;
  padding-right: 16px;
}

[data-aos] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ppdb-header {
  padding: 0;
}

.ppdb-navbar {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #0e4b3b;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ppdb-header.is-scrolled .ppdb-navbar {
  background: #0e4b3b;
  border: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.ppdb-ref-nav-inner {
  min-height: 76px;
  align-items: center;
}

.ppdb-brand-logo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: transparent;
  padding: 0;
}

.ppdb-brand {
  min-width: 0;
}

.ppdb-brand-copy {
  min-width: 0;
}

.ppdb-brand-copy strong {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ppdb-brand-copy span {
  display: block;
  font-size: 0.84rem;
  color: #f0c357;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ppdb-navbar .navbar-nav {
  gap: 8px;
}

.ppdb-nav-link {
  padding: 26px 10px 22px !important;
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
}

.ppdb-nav-link::after {
  left: 10px;
  right: 10px;
  bottom: 14px;
  height: 3px;
  background: #c89a2b;
}

.ppdb-ref-login {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(200, 154, 43, 0.9);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.ppdb-navbar .navbar-toggler {
  border: 1px solid rgba(200, 154, 43, 0.72);
  color: #fff;
  box-shadow: none;
}

.ppdb-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.18rem rgba(200, 154, 43, 0.22);
}

.ppdb-ref-hero {
  padding: 0 0 18px;
}

.ppdb-ref-hero-shell {
  position: relative;
}

.ppdb-ref-hero-leaves {
  position: absolute;
  left: -48px;
  top: 70px;
  width: 82px;
  z-index: 1;
  pointer-events: none;
}

.ppdb-ref-hero-card {
  position: relative;
  padding: 26px 32px 18px;
  border-radius: 0 0 22px 22px;
  background: #fff;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.ppdb-ref-copy {
  position: relative;
  z-index: 2;
  padding: 16px 10px 10px 18px;
}

.ppdb-ref-title-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.ppdb-ref-title-row h1 {
  margin: 0;
  font-size: clamp(4.4rem, 7vw, 5.9rem);
  line-height: 0.92;
  color: #073c31;
  font-weight: 700;
}

.ppdb-ref-title-row span {
  margin-bottom: 12px;
  color: #c89a2b;
  font-size: clamp(2.1rem, 3vw, 3rem);
  font-weight: 700;
}

.ppdb-ref-copy h2 {
  margin: 10px 0 8px;
  color: #153b32;
  font-size: clamp(1.85rem, 3vw, 2.7rem);
  line-height: 1.08;
  font-weight: 700;
}

.ppdb-ref-school {
  margin: 0;
  color: #173730;
  font-size: clamp(1.18rem, 2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.ppdb-ref-tagline {
  margin: 14px 0 16px;
  color: #c89a2b;
  font-size: clamp(1.25rem, 1.9vw, 1.8rem);
  font-style: italic;
  text-align: left;
}

.ppdb-ref-tagline span {
  display: inline-block;
  width: 62px;
  height: 2px;
  margin: 0 12px 6px 0;
  background: rgba(200, 154, 43, 0.6);
}

.ppdb-ref-description {
  max-width: 470px;
  margin-bottom: 22px;
  color: #455654;
  font-size: 1rem;
  line-height: 1.7;
}

.ppdb-ref-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 520px;
}

.ppdb-ref-feature {
  text-align: center;
}

.ppdb-ref-feature-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 16px;
  background: #0e4b3b;
  color: #e7be5a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(14, 75, 59, 0.2);
}

.ppdb-ref-feature strong {
  display: block;
  color: #183f36;
  font-size: 0.83rem;
  line-height: 1.42;
  font-weight: 600;
}

.ppdb-ref-hero-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.ppdb-ref-hero-actions .ppdb-btn {
  min-width: 180px;
  min-height: 52px;
  border-radius: 14px;
  padding-inline: 20px;
}

.ppdb-ref-hero-actions .ppdb-ref-wa-btn {
  min-width: 238px;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, #17a83b, #078428);
  color: #fff;
  box-shadow: 0 16px 32px rgba(7, 132, 40, 0.22);
}

.ppdb-ref-hero-actions .ppdb-ref-wa-btn:hover {
  background: linear-gradient(135deg, #20b946, #07922d);
  color: #fff;
}

.ppdb-ref-hero-actions .ppdb-ref-wa-btn > i:first-child {
  font-size: 1.45rem;
}


.ppdb-ref-wa-copy {
  display: block;
  text-align: left;
  line-height: 1.08;
}

.ppdb-ref-wa-copy strong,
.ppdb-ref-wa-copy small {
  display: block;
}

.ppdb-ref-wa-copy strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.ppdb-ref-wa-copy small {
  margin-top: 3px;
  font-size: 0.61rem;
  font-weight: 700;
  opacity: 0.96;
}

.ppdb-ref-hero-card .row {
  align-items: stretch !important;
}

.ppdb-ref-hero-card .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.ppdb-ref-visual {
  position: relative;
  flex: 1 1 auto;
  height: auto;
  min-height: 378px;
  --ppdb-hero-clip-outer: ellipse(105.2% 128% at 108.2% 50%);
  --ppdb-hero-clip-inner: ellipse(104.45% 126% at 108.55% 50%);
  padding-left: 0;
  overflow: visible;
}

.ppdb-ref-visual::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 112px;
  height: 150px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 248, 221, 0.9) 0%, rgba(255, 234, 181, 0.54) 16%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
  z-index: 3;
}

.ppdb-ref-hero-swiper {
  position: absolute;
  inset: 0;
  height: auto;
  overflow: hidden;
  clip-path: var(--ppdb-hero-clip-inner);
  z-index: 2;
  background: linear-gradient(135deg, #f7fbf3, #fff8df);
}

.ppdb-ref-hero-swiper .swiper-wrapper,
.ppdb-ref-hero-swiper .swiper-slide {
  height: 100%;
}

.ppdb-ref-hero-slide {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #edf6ec, #fff7df);
}

.ppdb-ref-hero-slide::before {
  content: none;
}

.ppdb-ref-hero-slide::after {
  content: none;
}

.ppdb-ref-hero-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  object-position: center center;
  transform: scale(1) translateX(0%) translateY(0%);
  transform-origin: center top;
  position: relative;
  z-index: 1;
  filter: saturate(1.04) contrast(1.02);
}

.ppdb-ref-hero-arch {
  position: absolute;
  inset: 0;
  width: auto;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  clip-path: var(--ppdb-hero-clip-outer);
  background: linear-gradient(180deg, #f4cf76 0%, #d8a23d 54%, #c88e22 100%);
  box-shadow: 0 0 16px rgba(216, 162, 61, 0.22);
}

.ppdb-ref-hero-arch::before {
  content: none;
}

.ppdb-ref-hero-arch::after {
  content: none;
}

.ppdb-ref-hero-swiper::after {
  content: none;
}

.ppdb-ref-hero-badge {
  position: absolute;
  top: 14px;
  right: 24px;
  z-index: 4;
  width: 116px;
  height: 116px;
  min-height: 116px;
  padding: 11px 10px 24px;
  border-radius: 50%;
  border: 5px solid #efbf55;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.28), transparent 20%),
    radial-gradient(circle at 50% 36%, #c90e1a 0%, #8f0913 66%, #65050d 100%);
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.ppdb-ref-hero-badge::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -7deg, #f6d27a 0 16deg, #d39b2f 16deg 32deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  opacity: 0.95;
}

.ppdb-ref-hero-badge::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -8px;
  z-index: 1;
  height: 24px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #f6d27a 0%, #cf9224 100%);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
}

.ppdb-ref-hero-badge span,
.ppdb-ref-hero-badge em {
  display: block;
  position: relative;
  z-index: 2;
  font-style: normal;
  text-transform: uppercase;
}

.ppdb-ref-hero-badge span {
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ppdb-ref-hero-badge strong {
  position: relative;
  z-index: 2;
  display: block;
  margin: 4px 0 0;
  font-size: 3.45rem;
  line-height: 0.92;
  font-weight: 700;
}

.ppdb-ref-hero-badge em {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  color: #5d2703;
  font-size: 0.34rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ppdb-ref-hero-meta {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 54%;
  max-width: 430px;
  padding: 12px 18px 13px;
  border: 2px solid rgba(210, 163, 64, 0.95);
  border-radius: 18px;
  background: linear-gradient(180deg, #0a4b3d 0%, #083e32 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.ppdb-ref-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.ppdb-ref-hero-meta-item i {
  color: #d8a23d;
  font-size: 1.85rem;
}

.ppdb-ref-hero-meta-item small {
  display: block;
  margin-bottom: 1px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.74rem;
  font-weight: 500;
}

.ppdb-ref-hero-meta-item strong {
  display: block;
  color: #fff;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
}

.ppdb-ref-hero-meta-divider {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.18);
}

.ppdb-ref-hero-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #0e4b3b;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
  transform: translateY(-50%);
}

.ppdb-ref-hero-prev {
  left: 54px;
}

.ppdb-ref-hero-next {
  right: 14px;
}

.ppdb-ref-hero-pagination {
  position: absolute;
  left: 31%;
  bottom: 30px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateX(-50%);
  filter: none;
}

.ppdb-ref-hero-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  opacity: 1;
  background: rgba(255, 255, 255, 0.92);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.ppdb-ref-hero-pagination .swiper-pagination-bullet-active {
  background: #c89a2b;
  width: 18px;
  border-radius: 999px;
}

.ppdb-ref-stats-section {
  margin-top: -8px;
  position: relative;
  z-index: 3;
}

.ppdb-ref-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}

.ppdb-ref-stat-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 28px;
  border-right: 1px solid rgba(14, 75, 59, 0.08);
}

.ppdb-ref-stat-item:last-child {
  border-right: 0;
}

.ppdb-ref-stat-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #eef6df;
  color: #1d463c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.ppdb-ref-stat-item strong {
  display: block;
  color: #143a31;
  font-size: clamp(1.85rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
}

.ppdb-ref-stat-item span {
  display: block;
  margin-top: 8px;
  color: #4e5e5b;
  font-size: 0.92rem;
}

.ppdb-ref-info-board {
  padding: 0;
}

.ppdb-ref-info-board-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr 0.92fr;
  align-items: stretch;
}

.ppdb-ref-info-col,
.ppdb-ref-contact-col {
  padding: 24px 28px;
}

.ppdb-ref-info-col h2,
.ppdb-ref-contact-col h2 {
  margin: 0 0 8px;
  color: #163c32;
  font-size: 1rem;
  font-weight: 700;
}

.ppdb-ref-info-col > p,
.ppdb-ref-contact-col > p {
  margin: 0;
  color: #53615f;
  font-size: 0.84rem;
  line-height: 1.55;
}

.ppdb-ref-info-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 16px;
}

.ppdb-ref-info-item {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(14, 75, 59, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #173e35;
  font-size: 0.82rem;
  font-weight: 500;
}

.ppdb-ref-info-item span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ppdb-ref-middle-preview {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  border-left: 1px solid rgba(14, 75, 59, 0.08);
  border-right: 1px solid rgba(14, 75, 59, 0.08);
  background: linear-gradient(180deg, #fffdf9 0%, #fefcf6 100%);
}

.ppdb-ref-middle-card {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 100%;
  padding: 30px 20px 18px;
  border-radius: 0;
  background:
    radial-gradient(circle at 16% 16%, rgba(232, 242, 216, 0.46), transparent 30%),
    radial-gradient(circle at 86% 16%, rgba(229, 240, 210, 0.5), transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(240, 246, 228, 0.66), transparent 32%),
    linear-gradient(180deg, #fdfdf8 0%, #f8f8ef 100%);
  box-shadow: inset 0 0 0 1px rgba(14, 75, 59, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.ppdb-ref-middle-card h3 {
  margin: 0 0 10px;
  color: #173f35;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.25;
}

.ppdb-ref-middle-card > p {
  margin: 0 auto;
  max-width: 330px;
  color: #4d5d5a;
  font-size: 0.8rem;
  line-height: 1.55;
}

.ppdb-ref-middle-values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.ppdb-ref-middle-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.ppdb-ref-middle-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 58px;
}

.ppdb-ref-middle-icon img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.ppdb-ref-middle-value span {
  color: #173e35;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.ppdb-ref-middle-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.2px);
  pointer-events: none;
}

.ppdb-ref-middle-orb-left {
  left: -22px;
  bottom: 8px;
  width: 96px;
  height: 96px;
  background: radial-gradient(circle, rgba(235, 243, 219, 0.92) 0%, rgba(235, 243, 219, 0) 72%);
}

.ppdb-ref-middle-orb-right {
  right: -20px;
  top: 8px;
  width: 92px;
  height: 92px;
  background: radial-gradient(circle, rgba(227, 240, 210, 0.88) 0%, rgba(227, 240, 210, 0) 72%);
}

.ppdb-ref-contact-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.ppdb-ref-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ppdb-ref-contact-item i {
  color: #2f8d43;
  font-size: 1.55rem;
}

.ppdb-ref-contact-item strong {
  display: block;
  color: #153b32;
  font-size: 0.84rem;
  font-weight: 700;
}

.ppdb-ref-contact-item p {
  margin: 3px 0 0;
  color: #4f5e5b;
  font-size: 0.78rem;
  line-height: 1.55;
}

.ppdb-ref-adiwiyata-card {
  position: relative;
  display: grid;
  grid-template-columns: 282px minmax(300px, 0.92fr) minmax(520px, 1.36fr) 210px;
  gap: 14px;
  align-items: center;
  min-height: 126px;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(248, 252, 239, 0.92) 0%, rgba(255, 254, 250, 0.98) 35%, rgba(252, 255, 244, 0.94) 100%);
}

.ppdb-ref-adiwiyata-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  overflow: hidden;
  background: transparent;
}

.ppdb-ref-adiwiyata-media::before {
  content: "";
  position: absolute;
  inset: -24px -96px -24px -18px;
  background: url("../img/reference/adiwiyata-crops/earth-leaves-soft.png") left center / auto 178px no-repeat;
}

.ppdb-ref-adiwiyata-media img {
  display: none;
}

.ppdb-ref-adiwiyata-copy h2 {
  margin: 0 0 8px;
  color: #163c32;
  font-size: 1.15rem;
  font-weight: 700;
}

.ppdb-ref-adiwiyata-copy p {
  margin: 0;
  color: #556360;
  font-size: 0.82rem;
  line-height: 1.65;
}

.ppdb-ref-adiwiyata-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ppdb-ref-adiwiyata-item {
  min-height: 96px;
  padding: 15px 10px 13px;
  border-radius: 13px;
  border: 1px solid rgba(14, 75, 59, 0.08);
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: #143931;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(14, 75, 59, 0.04);
}

.ppdb-ref-adiwiyata-item img {
  display: block;
  width: 46px;
  height: 38px;
  object-fit: contain;
}

.ppdb-ref-adiwiyata-flourish {
  position: relative;
  width: 100%;
  height: 126px;
  pointer-events: none;
  background: url("../img/reference/adiwiyata-crops/leaves-right-soft.png") right -18px center / auto 240px no-repeat;
  opacity: 0.98;
}

.ppdb-ref-bottom-board {
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.ppdb-ref-bottom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.ppdb-ref-bottom-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 22px 12px;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.07);
}

.ppdb-ref-bottom-cell + .ppdb-ref-bottom-cell {
  border-left: 0;
}

.ppdb-ref-cta-section {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -1px;
}

.ppdb-ref-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 10px 120px 10px 206px;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid rgba(200, 154, 43, 0.76);
  background:
    radial-gradient(circle at 28% 50%, rgba(19, 111, 99, 0.4), transparent 34%),
    linear-gradient(90deg, #073a2f 0%, #0e4b3b 100%);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.07);
}

.ppdb-ref-cta::after {
  content: "";
  position: absolute;
  right: 18px;
  top: -22px;
  width: 170px;
  height: 136px;
  background: url("../img/reference/adiwiyata-crops/leaves-right-soft.png") right center / auto 180px no-repeat;
  opacity: 0.8;
  pointer-events: none;
}

.ppdb-ref-cta-hand {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 206px;
  max-width: 38%;
  pointer-events: none;
}

.ppdb-ref-cta-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
}

.ppdb-ref-cta-copy h3 span {
  color: #f0c357;
}

.ppdb-ref-cta-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ppdb-ref-cta .ppdb-btn {
  position: relative;
  z-index: 1;
  min-width: 210px;
  min-height: 44px;
  border-radius: 12px;
}

.ppdb-ref-footer {
  position: relative;
  margin-top: -1px;
  padding: 12px 0 8px;
  background: linear-gradient(180deg, #073a2f 0%, #042720 100%);
  overflow: hidden;
}

.ppdb-ref-footer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 210px;
  height: 150px;
  background: url("../img/reference/footer-mosque-clean.png?v=20260706-footer") right bottom / 150px auto no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

.ppdb-ref-footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 1.18fr) minmax(110px, 0.72fr) minmax(120px, 0.76fr) minmax(210px, 1fr) minmax(170px, 0.86fr);
  gap: 24px;
  align-items: start;
}

.ppdb-ref-footer-grid > div:not(:first-child)::before {
  left: -12px;
}

.ppdb-ref-footer-brand img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  padding: 0;
}

.ppdb-ref-footer-brand strong {
  font-size: 0.95rem;
  color: #fff;
}

.ppdb-ref-footer-brand span {
  color: #f0c357;
  font-size: 0.78rem;
}

.ppdb-ref-footer-brand-col p,
.ppdb-ref-footer p,
.ppdb-ref-footer li,
.ppdb-ref-footer a {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  line-height: 1.52;
}

.ppdb-ref-footer ul {
  display: grid;
  gap: 5px;
}

.ppdb-ref-footer li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-height: 0;
  line-height: 1.35;
  margin: 0;
}

.ppdb-ref-footer li i {
  width: 14px;
  margin-top: 1px;
  color: #dca735;
  font-size: 0.76rem;
  line-height: 1.3;
  text-align: center;
}

.ppdb-ref-footer li span,
.ppdb-ref-footer li a {
  display: block;
  min-width: 0;
  line-height: 1.36;
  white-space: normal;
}

.ppdb-ref-footer .ppdb-ref-hours {
  gap: 8px;
}

.ppdb-ref-footer .ppdb-ref-hours li {
  grid-template-columns: 14px minmax(0, 1fr);
}

.ppdb-ref-footer .ppdb-ref-hours strong {
  display: block;
  color: #f0c357;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.18;
}

.ppdb-ref-footer .ppdb-ref-hours small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
  line-height: 1.22;
}

.ppdb-ref-footer h4 {
  margin-bottom: 8px;
  color: #fff;
  font-size: 0.84rem;
}

.ppdb-social {
  gap: 8px;
}

.ppdb-social a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  font-size: 0.92rem;
}

.ppdb-ref-footer .ppdb-social a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ppdb-ref-footer .ppdb-footer-note {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  padding-top: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
}

@media (max-width: 1199.98px) {
  .ppdb-navbar .navbar-nav {
    padding: 10px 0 18px;
  }

  .ppdb-nav-link {
    padding: 12px 0 !important;
  }

  .ppdb-nav-link::after {
    left: 0;
    right: auto;
    width: 48px;
    bottom: 2px;
  }

  .ppdb-ref-hero-card {
    padding: 24px;
  }

  .ppdb-ref-copy {
    padding: 12px 4px 18px;
  }

  .ppdb-ref-visual {
    min-height: 332px;
    margin-top: 16px;
  }

  .ppdb-ref-hero-badge {
    top: 18px;
    right: 24px;
    width: 110px;
    height: 110px;
    min-height: 110px;
    padding: 10px 9px 22px;
  }

  .ppdb-ref-hero-badge strong {
    font-size: 3.18rem;
  }

  .ppdb-ref-hero-badge::after {
    left: 13px;
    right: 13px;
    bottom: -7px;
    height: 22px;
  }

  .ppdb-ref-hero-meta {
    right: 18px;
    bottom: 20px;
    gap: 12px;
    width: 62%;
    padding: 12px 16px;
  }

  .ppdb-ref-hero-meta-divider {
    height: 46px;
  }

  .ppdb-ref-hero-pagination {
    left: 34%;
    bottom: 28px;
  }

  .ppdb-ref-visual {
    --ppdb-hero-clip-outer: ellipse(105.8% 128% at 109% 50%);
    --ppdb-hero-clip-inner: ellipse(105.05% 126% at 109.25% 50%);
  }

  .ppdb-ref-hero-swiper {
    inset: 0;
  }

  .ppdb-ref-hero-slide img {
    transform: scale(1) translateX(0%) translateY(0%);
  }

  .ppdb-ref-hero-leaves {
    display: none;
  }

  .ppdb-ref-feature-grid {
    max-width: none;
  }

  .ppdb-ref-info-board-grid,
  .ppdb-ref-adiwiyata-card,
  .ppdb-ref-bottom-grid,
  .ppdb-ref-footer-grid {
    grid-template-columns: 1fr;
  }

  .ppdb-ref-adiwiyata-card {
    padding: 16px;
  }

  .ppdb-ref-adiwiyata-media {
    justify-content: center;
    align-self: auto;
    min-height: 126px;
  }

  .ppdb-ref-adiwiyata-media::before {
    inset: -18px 0 -18px 0;
    background-position: center;
  }

  .ppdb-ref-adiwiyata-flourish {
    display: none;
  }

  .ppdb-ref-middle-preview {
    border: 0;
    border-top: 1px solid rgba(14, 75, 59, 0.08);
    border-bottom: 1px solid rgba(14, 75, 59, 0.08);
  }

  .ppdb-ref-middle-card {
    max-width: none;
    min-height: 220px;
  }

  .ppdb-ref-adiwiyata-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppdb-ref-bottom-cell + .ppdb-ref-bottom-cell {
    border-left: 0;
    border-top: 1px solid rgba(14, 75, 59, 0.08);
  }

  .ppdb-ref-cta {
    padding: 24px;
  }

  .ppdb-ref-cta-hand {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .ppdb-ref-nav-inner {
    min-height: 70px;
  }

  .ppdb-brand {
    max-width: calc(100% - 58px);
  }

  .ppdb-brand-copy strong {
    font-size: 0.9rem;
  }

  .ppdb-brand-copy span {
    font-size: 0.76rem;
  }

  .ppdb-ref-hero-card {
    padding: 18px 16px 16px;
  }

  .ppdb-ref-title-row {
    gap: 10px;
  }

  .ppdb-ref-title-row h1 {
    font-size: 3.5rem;
  }

  .ppdb-ref-title-row span {
    font-size: 1.6rem;
    margin-bottom: 8px;
  }

  .ppdb-ref-copy h2 {
    font-size: 1.5rem;
  }

  .ppdb-ref-school {
    font-size: 1rem;
  }

  .ppdb-ref-tagline {
    font-size: 1.15rem;
  }

  .ppdb-ref-tagline span {
    width: 34px;
  }

  .ppdb-ref-feature-grid,
  .ppdb-ref-stats,
  .ppdb-ref-adiwiyata-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppdb-ref-feature-grid {
    gap: 14px;
  }

  .ppdb-ref-hero-actions {
    flex-direction: column;
  }

  .ppdb-ref-description,
  .ppdb-ref-copy h2,
  .ppdb-ref-school,
  .ppdb-ref-feature strong {
    max-width: 100%;
  }

  .ppdb-ref-hero-actions .ppdb-btn,
  .ppdb-ref-cta .ppdb-btn {
    width: 100%;
    min-width: 0;
  }

  .ppdb-ref-stat-item {
    padding: 16px 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(14, 75, 59, 0.08);
  }

  .ppdb-ref-stat-item:nth-child(odd) {
    border-right: 1px solid rgba(14, 75, 59, 0.08);
  }

  .ppdb-ref-stat-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .ppdb-ref-info-col,
  .ppdb-ref-contact-col {
    padding: 20px 18px;
  }

  .ppdb-ref-middle-preview {
    padding: 0;
  }

  .ppdb-ref-middle-card {
    min-height: 220px;
    padding: 24px 16px 18px;
  }

  .ppdb-ref-middle-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
  }

  .ppdb-ref-adiwiyata-card {
    gap: 16px;
    padding: 16px;
  }

  .ppdb-ref-adiwiyata-media::before {
    background-size: auto 154px;
  }

  .ppdb-ref-bottom-cell {
    padding: 10px;
  }

  .ppdb-ref-hero-nav {
    width: 40px;
    height: 40px;
  }

  .ppdb-ref-hero-prev {
    left: 42px;
  }

  .ppdb-ref-hero-badge {
    top: 12px;
    right: 14px;
    width: 76px;
    height: 76px;
    min-height: 76px;
    padding: 7px 7px 16px;
    border-width: 4px;
  }

  .ppdb-ref-hero-badge strong {
    margin-top: 2px;
    font-size: 2.38rem;
  }

  .ppdb-ref-hero-badge::before {
    inset: -5px;
  }

  .ppdb-ref-hero-badge::after {
    left: 10px;
    right: 10px;
    bottom: -6px;
    height: 16px;
  }

  .ppdb-ref-hero-badge span {
    font-size: 0.42rem;
  }

  .ppdb-ref-hero-badge em {
    font-size: 0.26rem;
  }

  .ppdb-ref-hero-meta {
    right: 12px;
    left: 14px;
    bottom: 20px;
    gap: 10px;
    padding: 10px 12px;
    justify-content: space-between;
  }

  .ppdb-ref-hero-meta-item {
    gap: 10px;
  }

  .ppdb-ref-hero-meta-item i {
    font-size: 1.6rem;
  }

  .ppdb-ref-hero-meta-item small {
    font-size: 0.7rem;
  }

  .ppdb-ref-hero-meta-item strong {
    font-size: 0.88rem;
  }

  .ppdb-ref-hero-meta-divider {
    height: 40px;
  }

  .ppdb-ref-hero-pagination {
    left: 50%;
    bottom: 14px;
  }

  .ppdb-ref-visual {
    --ppdb-hero-clip-outer: ellipse(108% 136% at 111% 50%);
    --ppdb-hero-clip-inner: ellipse(107.1% 134% at 111.35% 50%);
  }

  .ppdb-ref-hero-swiper {
    inset: 0;
  }

  .ppdb-ref-hero-slide img {
    transform: scale(1) translateX(0%) translateY(0%);
  }

  .ppdb-ref-hero-prev {
    left: 30px;
  }

  .ppdb-ref-footer-grid {
    gap: 16px;
  }

  .ppdb-ref-footer-grid > div:not(:first-child)::before {
    display: none;
  }
}

.ppdb-ref-bottom-heading {
  margin-bottom: 12px;
}

.ppdb-ref-bottom-heading h3 {
  margin: 0 0 3px;
  color: #163c32;
  font-size: 1.1rem;
  font-weight: 700;
}

.ppdb-ref-bottom-heading p {
  margin: 0;
  color: #60706d;
  font-size: 0.72rem;
  line-height: 1.45;
}

.ppdb-ref-major-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 76px;
  max-width: 920px;
  margin: 0 auto;
}

.ppdb-ref-major-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  padding: 10px 20px;
  border: 1px solid rgba(14, 75, 59, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.035);
}

.ppdb-ref-major-card img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.ppdb-ref-major-card strong {
  display: block;
  margin-bottom: 4px;
  color: #153b32;
  font-size: 1rem;
  font-weight: 700;
}

.ppdb-ref-major-card em {
  display: block;
  margin-bottom: 4px;
  color: #152f2a;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
}

.ppdb-ref-major-card span {
  display: block;
  color: #556360;
  font-size: 0.76rem;
  line-height: 1.45;
}

.ppdb-ref-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

.ppdb-ref-flow::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 31px;
  border-top: 2px dashed rgba(200, 154, 43, 0.65);
}

.ppdb-ref-flow-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ppdb-ref-flow-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 7px solid #edf0e8;
  background: #0e4b3b;
  color: #e7be5a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.42rem;
  box-shadow: 0 10px 22px rgba(14, 75, 59, 0.18);
}

.ppdb-ref-flow-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #d49f2f;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

.ppdb-ref-flow-step strong {
  display: block;
  margin-bottom: 4px;
  color: #153b32;
  font-size: 0.82rem;
  font-weight: 700;
}

.ppdb-ref-flow-step p {
  margin: 0;
  color: #5b6b67;
  font-size: 0.68rem;
  line-height: 1.4;
}

.ppdb-ref-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.ppdb-ref-gallery-card {
  text-align: center;
}

.ppdb-ref-gallery-card img {
  width: 100%;
  height: 82px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.ppdb-ref-gallery-card strong {
  display: block;
  margin-top: 7px;
  color: #153b32;
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 600;
}

@media (max-width: 1199.98px) {
  .ppdb-ref-major-grid {
    gap: 18px;
  }

  .ppdb-ref-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ppdb-ref-flow::before {
    display: none;
  }

  .ppdb-ref-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .ppdb-ref-bottom-heading {
    text-align: left !important;
  }

  .ppdb-ref-major-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ppdb-ref-major-card {
    grid-template-columns: 50px 1fr;
    padding: 10px;
  }

  .ppdb-ref-major-card img {
    width: 46px;
    height: 46px;
  }

  .ppdb-ref-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }

  .ppdb-ref-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppdb-ref-gallery-card img {
    height: 88px;
  }
}

@media (min-width: 1200px) {
  body.ppdb-public .container {
    max-width: 100%;
    width: 100%;
    padding-left: clamp(24px, 3vw, 46px);
    padding-right: clamp(24px, 3vw, 46px);
  }

  .ppdb-ref-hero-card .row > .col-xl-5 {
    width: 38.5%;
  }

  .ppdb-ref-hero-card .row > .col-xl-7 {
    width: 61.5%;
  }

  .ppdb-section {
    padding: 18px 0;
  }

  .ppdb-ref-hero {
    padding: 0 0 12px;
  }

  .ppdb-ref-hero-leaves {
    left: -54px;
    top: 72px;
    width: 78px;
  }

  .ppdb-ref-hero-card {
    padding: 12px 0 12px 18px;
  }

  .ppdb-ref-copy {
    padding: 4px 16px 4px 8px;
  }

  .ppdb-ref-visual {
    min-height: 392px;
    margin-top: -12px;
    margin-right: 0;
    margin-bottom: -12px;
  }

  .ppdb-ref-title-row h1 {
    font-size: clamp(3.55rem, 5.3vw, 4.7rem);
  }

  .ppdb-ref-title-row span {
    margin-bottom: 8px;
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  }

  .ppdb-ref-copy h2 {
    margin: 6px 0 6px;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
  }

  .ppdb-ref-school {
    font-size: clamp(0.98rem, 1.35vw, 1.28rem);
  }

  .ppdb-ref-tagline {
    margin: 10px 0 12px;
    font-size: clamp(1rem, 1.4vw, 1.28rem);
  }

  .ppdb-ref-tagline span {
    width: 52px;
    margin-right: 10px;
  }

  .ppdb-ref-description {
    max-width: 420px;
    margin-bottom: 14px;
    font-size: 0.83rem;
    line-height: 1.48;
  }

  .ppdb-ref-feature-grid {
    gap: 10px;
    max-width: 430px;
  }

  .ppdb-ref-feature-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 7px;
    border-radius: 14px;
    font-size: 1rem;
  }

  .ppdb-ref-feature strong {
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .ppdb-ref-hero-actions {
    margin-top: 14px;
    gap: 12px;
  }

  .ppdb-ref-hero-actions .ppdb-btn {
    min-width: 160px;
    min-height: 42px;
    padding-inline: 16px;
    font-size: 0.84rem;
  }

  .ppdb-ref-visual {
    --ppdb-hero-clip-outer: ellipse(105.2% 128% at 108.2% 50%);
    --ppdb-hero-clip-inner: ellipse(104.45% 126% at 108.55% 50%);
  }

  .ppdb-ref-hero-swiper {
    inset: 0;
  }

  .ppdb-ref-hero-slide::before {
    inset: -28px;
    width: auto;
    height: auto;
  }

  .ppdb-ref-hero-slide::after {
    content: none;
  }

  .ppdb-ref-hero-slide img {
    transform: scale(1) translateX(0%) translateY(0%);
  }

  .ppdb-ref-hero-prev {
    left: 54px;
  }

  .ppdb-ref-hero-badge {
    top: 16px;
    right: 24px;
    width: 120px;
    height: 120px;
    min-height: 120px;
    padding: 12px 10px 24px;
  }

  .ppdb-ref-hero-badge strong {
    font-size: 3.52rem;
  }

  .ppdb-ref-hero-meta {
    right: 24px;
    bottom: 20px;
    width: 54%;
    max-width: 432px;
    padding: 12px 18px 13px;
  }

  .ppdb-ref-stat-item {
    padding: 18px 24px;
  }

  .ppdb-ref-stat-icon {
    width: 54px;
    height: 54px;
  }

  .ppdb-ref-info-col,
  .ppdb-ref-contact-col {
    padding: 18px 22px;
  }

  .ppdb-ref-middle-preview {
    padding: 0;
  }

  .ppdb-ref-middle-card {
    min-height: 224px;
    padding: 24px 16px 20px;
  }

  .ppdb-ref-contact-list {
    gap: 12px;
    margin-top: 14px;
  }

  .ppdb-ref-adiwiyata-card {
    gap: 14px;
    padding: 0;
  }

  .ppdb-ref-adiwiyata-media::before {
    inset: -22px -36px -22px -18px;
    background-position: left center;
    background-size: auto 172px;
  }

  .ppdb-ref-adiwiyata-item {
    min-height: 84px;
    padding: 10px 8px;
    gap: 8px;
    font-size: 0.78rem;
  }

  .ppdb-ref-bottom-cell {
    padding: 10px 22px 12px;
  }

  .ppdb-ref-bottom-heading {
    margin-bottom: 12px;
  }

  .ppdb-ref-major-card {
    padding: 10px 20px;
  }

  .ppdb-ref-flow {
    gap: 18px;
    margin-top: 14px;
  }

  .ppdb-ref-gallery-grid {
    gap: 18px;
  }

  .ppdb-ref-gallery-card img {
    height: 82px;
  }

  .ppdb-ref-cta {
    padding: 10px 120px 10px 206px;
  }

  .ppdb-ref-cta-hand {
    width: 206px;
  }

  .ppdb-ref-cta-copy h3 {
    font-size: 1.32rem;
  }

  .ppdb-ref-cta-copy p {
    font-size: 0.78rem;
  }

  .ppdb-ref-footer {
    padding: 12px 0 8px;
  }

  .ppdb-ref-footer-grid {
    gap: 18px;
  }
}

/* Reference lock: CTA + footer dibuat menyatu seperti gambar patokan terbaru. */
body.ppdb-public .ppdb-ref-cta-section {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

body.ppdb-public .ppdb-ref-cta-section > .container {
  padding-top: 0;
  padding-bottom: 0;
}

body.ppdb-public .ppdb-ref-cta {
  min-height: 86px;
  padding: 14px clamp(148px, 13vw, 242px) 14px clamp(218px, 18vw, 286px);
  border: 0;
  border-bottom: 1px solid rgba(216, 166, 51, 0.95);
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 26% 12%, rgba(26, 113, 86, 0.55), transparent 34%),
    linear-gradient(90deg, #073b30 0%, #0b4a3a 48%, #07372e 100%);
  box-shadow: none;
}

body.ppdb-public .ppdb-ref-cta::after {
  top: -4px;
  right: 14px;
  width: clamp(126px, 10vw, 188px);
  height: calc(100% + 8px);
  background: url("../img/reference/adiwiyata-crops/leaves-right-soft.png") right center / auto 132px no-repeat;
  opacity: 0.92;
}

body.ppdb-public .ppdb-ref-cta-hand {
  left: 0;
  top: 0;
  bottom: auto;
  width: clamp(188px, 17vw, 260px);
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%);
}

body.ppdb-public .ppdb-ref-cta-copy {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

body.ppdb-public .ppdb-ref-cta-copy h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.32rem, 1.55vw, 1.72rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

body.ppdb-public .ppdb-ref-cta-copy h3 span {
  color: #f3bd34;
}

body.ppdb-public .ppdb-ref-cta-copy p {
  display: none;
}

body.ppdb-public .ppdb-ref-cta .ppdb-btn {
  position: relative;
  z-index: 1;
  min-width: 200px;
  min-height: 46px;
  padding: 0 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #d9a13a 0%, #c58b22 100%);
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

body.ppdb-public .ppdb-ref-cta .ppdb-btn i {
  margin-left: 14px;
  font-size: 1.2rem;
}

body.ppdb-public .ppdb-ref-footer {
  margin-top: 0;
  padding: 16px 0 8px;
  background:
    radial-gradient(circle at 88% 72%, rgba(19, 111, 99, 0.28), transparent 34%),
    linear-gradient(180deg, #073b30 0%, #032821 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.ppdb-public .ppdb-ref-footer::after {
  right: 0;
  bottom: 0;
  width: 230px;
  height: 142px;
  background-size: 168px auto;
  opacity: 0.82;
}

body.ppdb-public .ppdb-ref-footer-grid {
  grid-template-columns: minmax(250px, 1.28fr) minmax(120px, 0.7fr) minmax(130px, 0.78fr) minmax(230px, 1.04fr) minmax(170px, 0.78fr);
  gap: clamp(20px, 3vw, 48px);
}

body.ppdb-public .ppdb-ref-footer-grid > div:not(:first-child)::before {
  left: calc(clamp(20px, 3vw, 48px) / -2);
  top: 8px;
  bottom: 8px;
  background: rgba(216, 166, 51, 0.42);
}

body.ppdb-public .ppdb-ref-footer-brand img {
  width: 50px;
  height: 50px;
}

body.ppdb-public .ppdb-ref-footer-brand strong {
  font-size: 0.96rem;
  line-height: 1.08;
}

body.ppdb-public .ppdb-ref-footer-brand span {
  font-size: 0.76rem;
  line-height: 1.18;
}

body.ppdb-public .ppdb-ref-footer-brand-col p {
  max-width: 260px;
  margin: 8px 0 12px;
}

body.ppdb-public .ppdb-ref-footer h4 {
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 800;
}

body.ppdb-public .ppdb-ref-footer li {
  gap: 7px;
}

body.ppdb-public .ppdb-ref-footer .ppdb-social a {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 0.8rem;
}

body.ppdb-public .ppdb-ref-footer .ppdb-ref-hours {
  gap: 7px;
}

body.ppdb-public .ppdb-ref-footer .ppdb-ref-hours strong {
  color: #f3bd34;
}

body.ppdb-public .ppdb-ref-footer .ppdb-footer-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 1199.98px) {
  body.ppdb-public .ppdb-ref-cta {
    padding: 22px;
    border-radius: 18px 18px 0 0;
  }

  body.ppdb-public .ppdb-ref-cta-hand,
  body.ppdb-public .ppdb-ref-cta::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  body.ppdb-public .ppdb-ref-cta {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
  }

  body.ppdb-public .ppdb-ref-cta .ppdb-btn {
    width: 100%;
  }
}

/* Reference lock: galeri kegiatan ideal seperti rekomendasi user. */
body.ppdb-public .ppdb-ref-bottom-cell-gallery {
  padding: 18px 22px 22px;
}

body.ppdb-public .ppdb-ref-gallery-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.45vw, 20px);
  align-items: stretch;
  margin-top: 18px;
}

body.ppdb-public .ppdb-ref-gallery-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(14, 75, 59, 0.1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 13px 30px rgba(12, 48, 39, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.ppdb-public .ppdb-ref-gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(12, 48, 39, 0.12);
}

body.ppdb-public .ppdb-ref-gallery-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: visible;
  background: #eaf0e8;
}

body.ppdb-public .ppdb-ref-activity-swiper,
body.ppdb-public .ppdb-ref-activity-swiper .swiper-wrapper,
body.ppdb-public .ppdb-ref-activity-swiper .swiper-slide,
body.ppdb-public .ppdb-ref-gallery-lightbox {
  width: 100%;
  height: 100%;
}

body.ppdb-public .ppdb-ref-activity-swiper {
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

body.ppdb-public .ppdb-ref-gallery-lightbox {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

body.ppdb-public .ppdb-ref-gallery-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px 14px 0 0;
  object-fit: cover;
  object-position: center center;
  transform: none;
  box-shadow: none;
}

body.ppdb-public .ppdb-ref-gallery-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, transparent 58%, rgba(8, 54, 43, 0.16) 100%);
  pointer-events: none;
}

body.ppdb-public .ppdb-ref-gallery-pagination {
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: auto !important;
  z-index: 3;
  display: inline-flex;
  width: auto !important;
  gap: 4px;
}

body.ppdb-public .ppdb-ref-gallery-pagination .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.62);
  opacity: 1;
}

body.ppdb-public .ppdb-ref-gallery-pagination .swiper-pagination-bullet-active {
  width: 15px;
  border-radius: 999px;
  border-color: #d9a13a;
  background: #d9a13a;
}

body.ppdb-public .ppdb-ref-gallery-icon {
  position: absolute;
  left: 12px;
  bottom: -18px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 3px solid #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, #136f63 0%, #0e4b3b 100%);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 8px 18px rgba(14, 75, 59, 0.2);
  pointer-events: none;
}

body.ppdb-public .ppdb-ref-gallery-body {
  flex: 1;
  min-height: 96px;
  padding: 24px 14px 14px;
  text-align: left;
}

body.ppdb-public .ppdb-ref-gallery-card strong {
  display: block;
  margin: 0;
  color: #123c32;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.26;
}

body.ppdb-public .ppdb-ref-gallery-card p {
  display: block;
  margin: 8px 0 0;
  color: #425753;
  font-size: 0.68rem;
  line-height: 1.42;
}

@media (max-width: 1199.98px) {
  body.ppdb-public .ppdb-ref-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.ppdb-public .ppdb-ref-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ppdb-public .ppdb-ref-gallery-card img {
    height: 100%;
  }
}

body.ppdb-public .ppdb-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 54px);
  background: rgba(2, 24, 20, 0.86);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.ppdb-public .ppdb-gallery-modal.is-open {
  opacity: 1;
  visibility: visible;
}

body.ppdb-public .ppdb-gallery-modal figure {
  position: relative;
  width: min(1040px, 100%);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 166, 51, 0.32);
  border-radius: 24px;
  background: #062d25;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  transform: scale(0.96);
  transition: transform 0.2s ease;
}

body.ppdb-public .ppdb-gallery-modal.is-open figure {
  transform: scale(1);
}

body.ppdb-public .ppdb-gallery-modal img {
  display: block;
  width: 100%;
  max-height: min(74vh, 720px);
  object-fit: contain;
  background: #021b16;
}

body.ppdb-public .ppdb-gallery-modal figcaption {
  padding: 14px 18px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(90deg, #073a2f, #0e4b3b);
}

body.ppdb-public .ppdb-gallery-modal-close {
  position: fixed;
  top: clamp(14px, 2.5vw, 30px);
  right: clamp(14px, 2.5vw, 30px);
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
  backdrop-filter: blur(8px);
}

body.ppdb-public .ppdb-ref-info-list {
  gap: 10px;
}

body.ppdb-public .ppdb-ref-info-item {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(14, 75, 59, 0.1);
  border-radius: 12px;
  background: #fff;
  color: #173e35;
  box-shadow: 0 8px 22px rgba(14, 75, 59, 0.04);
}

body.ppdb-public .ppdb-ref-info-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
}

body.ppdb-public .ppdb-ref-info-item summary::-webkit-details-marker {
  display: none;
}

body.ppdb-public .ppdb-ref-info-item summary span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.ppdb-public .ppdb-ref-info-item summary span i {
  color: #0e4b3b;
}

body.ppdb-public .ppdb-ref-info-item summary > .bi-chevron-right {
  flex: 0 0 auto;
  color: #0e4b3b;
  transition: transform 0.2s ease;
}

body.ppdb-public .ppdb-ref-info-item[open] summary {
  color: #0b3b32;
  background: linear-gradient(180deg, rgba(237, 247, 224, 0.82), rgba(255, 255, 255, 0.96));
}

body.ppdb-public .ppdb-ref-info-item[open] summary > .bi-chevron-right {
  transform: rotate(90deg);
}

body.ppdb-public .ppdb-ref-info-content {
  padding: 0 14px 14px 42px;
  color: #52615d;
  font-size: 0.78rem;
  line-height: 1.65;
  border-top: 1px solid rgba(14, 75, 59, 0.07);
}

body.ppdb-public .ppdb-ref-info-content p,
body.ppdb-public .ppdb-ref-info-content ul,
body.ppdb-public .ppdb-ref-info-content ol {
  margin: 10px 0 0;
}

body.ppdb-public .ppdb-ref-info-content ul,
body.ppdb-public .ppdb-ref-info-content ol {
  padding-left: 18px;
}

body.ppdb-public .ppdb-rich-text {
  color: #52615d;
  font-size: 0.92rem;
  line-height: 1.75;
}

body.ppdb-public .ppdb-rich-text p,
body.ppdb-public .ppdb-rich-text ul,
body.ppdb-public .ppdb-rich-text ol,
body.ppdb-public .ppdb-rich-text blockquote {
  margin: 0 0 12px;
}

body.ppdb-public .ppdb-rich-text ul,
body.ppdb-public .ppdb-rich-text ol {
  padding-left: 20px;
}

body.ppdb-public .ppdb-rich-text a {
  color: #0e4b3b;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(14, 75, 59, 0.32);
}

body.ppdb-public .ppdb-rich-text blockquote {
  padding: 10px 12px;
  border-left: 3px solid #c89a2b;
  border-radius: 8px;
  background: rgba(248, 241, 219, 0.42);
}

body.ppdb-public .ppdb-rich-text table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  font-size: 0.86rem;
}

body.ppdb-public .ppdb-rich-text th,
body.ppdb-public .ppdb-rich-text td {
  padding: 8px 10px;
  border: 1px solid rgba(14, 75, 59, 0.16);
}

body.ppdb-public .ppdb-ref-contact-link {
  display: inline-flex;
  width: max-content;
  color: #0e4b3b;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(14, 75, 59, 0.42);
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.ppdb-public .ppdb-ref-contact-link:hover {
  color: #c89a2b;
  border-color: rgba(200, 154, 43, 0.75);
}




















@media (max-width: 575.98px) {

}






































@media (max-width: 767.98px) {



}

/* Startup alert final match: sengaja diletakkan paling bawah supaya tidak ketimpa aturan lama. */
@media (min-width: 768px) {











}

/* Popup PPDB reference lock: mihrab line, students, actions, and footer. */
@media (min-width: 768px) {
  body.ppdb-public .ppdb-mihrab-popup {
    width: min(920px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 28px) !important;
  }

  body.ppdb-public .ppdb-mihrab-alert {
    min-height: min(1040px, calc(100vh - 28px));
    padding-top: 76px;
  }

  body.ppdb-public .ppdb-mihrab-arch-line {
    stroke-width: 6.2;
  }

  body.ppdb-public .ppdb-mihrab-logo {
    width: 116px;
    height: 116px;
    margin-bottom: 10px;
  }

  body.ppdb-public .ppdb-mihrab-alert h2 {
    max-width: 470px;
    margin-top: 8px;
    font-size: clamp(2.05rem, 2.8vw, 2.55rem);
    line-height: 1.06;
  }

  body.ppdb-public .ppdb-mihrab-year {
    margin-bottom: 8px;
  }

  body.ppdb-public .ppdb-mihrab-school {
    min-width: min(504px, 100%);
    margin-bottom: 10px;
    padding-top: 9px;
    padding-bottom: 8px;
  }

  body.ppdb-public .ppdb-mihrab-alert p {
    max-width: 548px;
    margin-bottom: 10px;
    font-size: 0.91rem;
    line-height: 1.42;
  }

  body.ppdb-public .ppdb-mihrab-date {
    min-height: 43px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  body.ppdb-public .ppdb-mihrab-countdown {
    margin-top: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body.ppdb-public .ppdb-mihrab-students-wrap {
    top: 590px;
    bottom: auto;
    height: 314px;
  }

  body.ppdb-public .ppdb-mihrab-students {
    top: 0;
    width: min(500px, 68%);
  }

  body.ppdb-public .ppdb-mihrab-actions {
    z-index: 8;
    right: 98px;
    bottom: 132px;
    left: 98px;
    gap: 20px;
  }

  body.ppdb-public .ppdb-mihrab-btn {
    grid-template-columns: 28px 1fr 15px;
    min-height: 58px;
    padding: 9px 16px;
    border-radius: 12px;
    box-shadow: 0 9px 15px rgba(3, 42, 34, 0.18);
  }

  body.ppdb-public .ppdb-mihrab-btn > i:first-child {
    font-size: 1.35rem;
  }

  body.ppdb-public .ppdb-mihrab-btn strong {
    font-size: 0.82rem;
  }

  body.ppdb-public .ppdb-mihrab-btn small {
    margin-top: 2px;
    font-size: 0.57rem;
  }

  body.ppdb-public .ppdb-mihrab-btn-light {
    grid-template-columns: 30px 1fr;
  }

  body.ppdb-public .ppdb-mihrab-footer {
    overflow: hidden;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 148px;
    padding: 78px 92px 14px;
    background: transparent;
    isolation: isolate;
  }

  body.ppdb-public .ppdb-mihrab-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 920 148' preserveAspectRatio='none' shape-rendering='geometricPrecision'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2305503e'/%3E%3Cstop offset='1' stop-color='%2303322a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 14 C80 58 172 74 268 74 L652 74 C748 74 840 58 920 14 L920 148 L0 148 Z' fill='url(%23g)'/%3E%3Cpath d='M0 14 C80 58 172 74 268 74 L652 74 C748 74 840 58 920 14' fill='none' stroke='%23d8a548' stroke-width='5.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
  }

  body.ppdb-public .ppdb-mihrab-feature {
    position: relative;
    z-index: 1;
    min-height: 56px;
    grid-template-columns: 46px 1fr;
    column-gap: 13px;
    padding: 0 18px 0;
  }

  body.ppdb-public .ppdb-mihrab-feature + .ppdb-mihrab-feature {
    border-left-color: rgba(216, 165, 72, 0.72);
  }

  body.ppdb-public .ppdb-mihrab-feature span {
    width: 42px;
    height: 42px;
    font-size: 1.9rem;
  }

  body.ppdb-public .ppdb-mihrab-feature strong {
    font-size: 1.06rem;
  }

  body.ppdb-public .ppdb-mihrab-feature small {
    max-width: 184px;
    font-size: 0.7rem;
    line-height: 1.16;
  }

  body.ppdb-public .ppdb-mihrab-lantern-left {
    left: 88px;
  }

  body.ppdb-public .ppdb-mihrab-lantern-right {
    right: 88px;
  }

  body.ppdb-public .ppdb-mihrab-leaf-left {
    top: 438px;
    left: -4px;
    width: 132px;
  }

  body.ppdb-public .ppdb-mihrab-leaf-right {
    top: 438px;
    right: -18px;
    width: 124px;
    opacity: 0.58;
  }
}

@media (max-width: 575.98px) {
  body.ppdb-public .ppdb-mihrab-alert {
    min-height: 810px;
  }

  body.ppdb-public .ppdb-mihrab-students-wrap {
    top: auto;
    bottom: 184px;
    height: 206px;
  }

  body.ppdb-public .ppdb-mihrab-actions {
    bottom: 96px;
  }

  body.ppdb-public .ppdb-mihrab-footer {
    bottom: 5px;
  }
}

/* Mobile popup polish: use normal flow so elements never collide. */
@media (max-width: 575.98px) {
  body.ppdb-public .ppdb-mihrab-container {
    align-items: center !important;
    padding: 8px 0 !important;
  }

  body.ppdb-public .ppdb-mihrab-popup {
    width: min(94vw, 388px) !important;
    max-height: calc(100vh - 10px) !important;
    max-height: calc(100svh - 10px) !important;
    border-radius: 17px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body.ppdb-public .ppdb-mihrab-alert {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: 0;
    padding: 14px 12px 14px;
    background:
      radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.98) 0 34%, rgba(255, 250, 240, 0.92) 68%, rgba(255, 250, 240, 0.98) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Cg fill='none' stroke='%23d9b76d' stroke-opacity='.14' stroke-width='1'%3E%3Cpath d='M46 6 C55 21 70 37 86 46 C70 55 55 71 46 86 C37 71 22 55 6 46 C22 37 37 21 46 6Z'/%3E%3Ccircle cx='46' cy='46' r='9'/%3E%3C/g%3E%3C/svg%3E"),
      #fffaf0;
    background-size: auto, 86px 86px, auto;
  }

  body.ppdb-public .ppdb-mihrab-alert::before {
    display: none;
  }

  body.ppdb-public .ppdb-mihrab-arch {
    display: none;
  }

  body.ppdb-public .ppdb-mihrab-close {
    top: 8px !important;
    right: 8px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1.42rem !important;
  }

  body.ppdb-public .ppdb-mihrab-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 7px;
  }

  body.ppdb-public .ppdb-mihrab-badge {
    min-width: 150px;
    min-height: 23px;
    gap: 7px;
    padding: 2px 12px;
    font-size: 0.65rem;
  }

  body.ppdb-public .ppdb-mihrab-alert h2 {
    max-width: 300px;
    margin-top: 6px;
    margin-bottom: 3px;
    font-size: clamp(1.5rem, 6.7vw, 1.82rem);
    line-height: 1.05;
    letter-spacing: 0;
  }

  body.ppdb-public .ppdb-mihrab-year {
    width: min(286px, 100%);
    gap: 5px;
    margin-bottom: 6px;
    font-size: 0.84rem;
  }

  body.ppdb-public .ppdb-mihrab-year span {
    max-width: 30px;
  }

  body.ppdb-public .ppdb-mihrab-school {
    min-width: 0;
    width: min(292px, calc(100% - 28px));
    min-height: 43px;
    margin-bottom: 7px;
    padding: 6px 20px;
    border-radius: 10px;
  }

  body.ppdb-public .ppdb-mihrab-school::before,
  body.ppdb-public .ppdb-mihrab-school::after {
    width: 22px;
    height: 22px;
  }

  body.ppdb-public .ppdb-mihrab-school::before {
    left: -11px;
  }

  body.ppdb-public .ppdb-mihrab-school::after {
    right: -11px;
  }

  body.ppdb-public .ppdb-mihrab-school strong {
    font-size: 0.96rem;
    line-height: 1.05;
    white-space: nowrap;
  }

  body.ppdb-public .ppdb-mihrab-school small {
    font-size: 0.68rem;
  }

  body.ppdb-public .ppdb-mihrab-alert p {
    max-width: 292px;
    margin-bottom: 7px;
    font-size: 0.76rem;
    line-height: 1.28;
  }

  body.ppdb-public .ppdb-mihrab-date {
    width: min(300px, 100%);
    min-height: 44px;
    padding: 7px 11px;
    border-radius: 10px;
    font-size: 0.75rem;
    line-height: 1.22;
  }

  body.ppdb-public .ppdb-mihrab-date small {
    font-size: 0.66rem;
  }

  body.ppdb-public .ppdb-mihrab-countdown {
    min-width: min(250px, 100%);
    padding: 6px 10px;
    font-size: 0.73rem;
  }

  body.ppdb-public .ppdb-mihrab-lantern {
    display: none;
  }

  body.ppdb-public .ppdb-mihrab-leaf {
    display: none;
  }

  body.ppdb-public .ppdb-mihrab-leaf-left {
    top: 354px;
    left: -30px;
    width: 90px;
  }

  body.ppdb-public .ppdb-mihrab-leaf-right {
    top: 354px;
    right: -34px;
    width: 88px;
  }

  body.ppdb-public .ppdb-mihrab-students-wrap {
    position: relative;
    z-index: 3;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 118px;
    margin: 7px 0 7px;
    opacity: 0.95;
    overflow: hidden;
  }

  body.ppdb-public .ppdb-mihrab-students {
    top: 0;
    width: min(310px, 86%);
  }

  body.ppdb-public .ppdb-mihrab-actions {
    position: relative;
    z-index: 8;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(304px, 100%);
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 0;
  }

  body.ppdb-public .ppdb-mihrab-btn {
    grid-template-columns: 27px 1fr 15px;
    min-height: 46px;
    padding: 7px 12px;
    border-radius: 10px;
  }

  body.ppdb-public .ppdb-mihrab-btn > i:first-child {
    font-size: 1.18rem;
  }

  body.ppdb-public .ppdb-mihrab-btn strong {
    font-size: 0.78rem;
    white-space: normal;
  }

  body.ppdb-public .ppdb-mihrab-btn small {
    font-size: 0.54rem;
  }

  body.ppdb-public .ppdb-mihrab-btn-light {
    grid-template-columns: 27px 1fr;
  }

  body.ppdb-public .ppdb-mihrab-footer {
    display: none;
  }
}

/* Popup stability lock: keep countdown, students, and action row from jumping. */
@media (min-width: 768px) {
  body.ppdb-public .ppdb-mihrab-countdown {
    width: min(330px, 100%) !important;
    min-width: min(330px, 100%) !important;
    min-height: 36px !important;
    margin-top: 5px !important;
    padding: 6px 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  body.ppdb-public .ppdb-mihrab-students-wrap {
    top: 590px !important;
    height: 314px !important;
  }

  body.ppdb-public .ppdb-mihrab-students {
    width: min(500px, 68%) !important;
  }

  body.ppdb-public .ppdb-mihrab-actions {
    min-height: 58px !important;
  }
}

@media (max-width: 575.98px) {
  body.ppdb-public .ppdb-mihrab-countdown {
    width: min(258px, 100%) !important;
    min-width: min(258px, 100%) !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }
}

body.ppdb-public .ppdb-mihrab-btn-fee {
  grid-template-columns: 34px 1fr !important;
  border-color: #b91c1c !important;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 24px rgba(185, 28, 28, 0.28) !important;
  cursor: default;
}

body.ppdb-public .ppdb-mihrab-btn-fee > i:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff !important;
  font-size: 1.35rem;
}

body.ppdb-public .ppdb-mihrab-btn-fee strong,
body.ppdb-public .ppdb-mihrab-btn-fee small {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(82, 12, 12, 0.22);
}

body.ppdb-public .ppdb-mihrab-btn-fee strong {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

body.ppdb-public .ppdb-mihrab-btn-fee small {
  margin-top: 5px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Popup/backdrop stability lock: prevent visible blinking. */
body.ppdb-public .ppdb-mihrab-container,
body.ppdb-public .ppdb-mihrab-container.swal2-backdrop-show,
body.ppdb-public .ppdb-mihrab-popup,
body.ppdb-public .ppdb-mihrab-html,
body.ppdb-public .ppdb-mihrab-alert {
  animation: none !important;
  transition: none !important;
}