/* PPDB Umum microsite (Gelombang 1 & 2). Loaded after the Open House microsite styles and reuses
   their header, footer, sticky bar, FAQ, location card and final invitation. Page rules use pg-. */
body[data-design="direct"].pg-page {
  --pg-cta: #c64a16;          /* white label 4.78:1 (WCAG AA); the lighter #ff681e stays decorative */
  --pg-cta-hover: #a53a0d;    /* white label 6.54:1 */
  --pg-cta-edge: #8a330c;
  --pg-orange-text: #c2410c;  /* 4.96:1 on the page paper */
  --pg-band: #f0f4fa;
  --pg-quiet: #52617b;
}

/* Buttons with a white label keep AA contrast (the Open House orange #ff681e is 2.9:1 with white). */
body[data-design="direct"].pg-page .oh-primary { background: var(--pg-cta); color: #fff; }
body[data-design="direct"].pg-page .oh-primary:hover { background: var(--pg-cta-hover); color: #fff; }
body[data-design="direct"].pg-page :is(.oh-header,.oh-sticky,.oh-final-invitation) a:focus-visible { outline-color: #ffd5ba; }

/* Hero */
.pg-hero { position: relative; max-width: var(--oh-width); margin: 0 auto; padding: 26px var(--oh-gutter) 34px; display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; text-align: center; }
.pg-hero > * { min-width: 0; }
.pg-hero-badge { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; max-width: 100%; margin: 0 auto 14px; color: var(--pg-quiet); font-size: 11px; line-height: 1.5; }
.pg-hero-badge strong { display: block; padding: 6px 9px 5px; border-bottom: 2px solid #ff681e; border-radius: 3px 3px 0 0; background: #214586; color: #fff; font-weight: 750; letter-spacing: .07em; }
body[data-design="direct"] .pg-hero-script { --pesat-font-family: "OH Caveat", cursive; font-family: "OH Caveat", cursive; width: fit-content; margin: 0 auto 4px; color: #214586; font-size: 32px; font-weight: 600; line-height: 1.1; transform: rotate(-3deg); }
body[data-design="direct"] .pg-hero h1 {
  --pesat-font-family: "OH Anton", Impact, "Arial Narrow", sans-serif;
  font-family: "OH Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: clamp(50px, 15.5vw, 86px); line-height: 1.04; letter-spacing: -.01em; text-transform: uppercase;
  color: #214586; text-shadow: 1px 2px 0 #dce3ee; -webkit-text-stroke: 1px #fff; paint-order: stroke fill;
  overflow-wrap: anywhere;
}
body[data-design="direct"] .pg-hero h1 span { display: block; margin-top: 4px; color: var(--pg-orange-text); font-size: .56em; line-height: 1.15; letter-spacing: 0; }
.pg-lead { max-width: 42ch; margin: 14px auto 0 !important; color: var(--pg-quiet); font-size: 14px; line-height: 1.7; }

.pg-hero-photos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.pg-hero-photos figure { position: relative; min-width: 0; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 14px; background: #dce3ed; }
.pg-hero-photos img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pg-hero-photos figure:nth-child(1) img { object-position: 50% 35%; }
.pg-hero-photos figure:nth-child(2) img { object-position: 52% 30%; }
.pg-hero-photos figure:nth-child(3) img { object-position: 50% 40%; }
.pg-hero-photos figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border: 1px solid #ffffff38; border-radius: 99px; background: #132c54e0; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; }

.pg-hero-panel { display: grid; gap: 12px; width: 100%; max-width: 480px; margin: 0 auto; }
.pg-status { padding: 17px 16px 15px; border: 2px solid #214586; border-radius: 16px; background: #ffffffc7; text-align: left; }
.pg-status-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; color: #476697; font-size: 10px; font-weight: 750; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; }
.pg-status-title::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #9fb4d6; }
body[data-pg-live="true"] .pg-status-title::before { background: #1f8a4c; box-shadow: 0 0 0 3px #1f8a4c26; }
.pg-status-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-status-list li { color: #214586; font-size: 14px; font-weight: 650; line-height: 1.5; }
.pg-status-list li + li { padding-top: 8px; border-top: 1px solid #dce3ee; }
.pg-status-list strong { display: block; color: #476697; font-size: 10px; font-weight: 750; line-height: 1.5; letter-spacing: .1em; }
body[data-design="direct"] .pg-hero-panel > .pg-cta { width: 100%; margin-top: 4px; font-size: 15px; box-shadow: 0 3px 0 var(--pg-cta-edge); }
/* r73 (owner, 21 Oct 2026): "Sudah mendaftar? Buka halaman PPDB ananda" is highlighted as a light blue button with a
   round arrow, so families who already registered find their page. Same text and destination (/pemulihan). */
body[data-design="direct"] :is(.pg-hero-panel > .pg-recover, .oh-final-ticket > .pg-final-recover) { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 12px 14px; border: 1.5px solid #214586; border-radius: 14px; background: #edf3fd; color: #214586; font-size: 14px; font-weight: 750; line-height: 1.4; text-align: center; text-decoration: none; box-shadow: 0 2px 0 #21458624; }
body[data-design="direct"] :is(.pg-recover, .pg-final-recover) > span { display: inline-grid; flex: 0 0 26px; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #214586; color: #fff; font-size: 14px; line-height: 1; }
body[data-design="direct"] .oh-final-ticket > .pg-final-recover { margin-top: 12px; }

/* Unit schedule cards. r63 (owner, 18 Oct 2026): the heading reads "Kuota terbatas", red and highlighted, without the
   "Jadwal per jenjang" kicker and intro. */
body[data-design="direct"] .pg-units .pg-quota-title { max-width: none; color: #b42318; }
.pg-quota-title mark { display: inline-block; padding: 4px 14px 6px; border-radius: 10px; background: #fde4e1; color: inherit; box-shadow: inset 0 0 0 1.5px #f5bdb5; }
.pg-unit-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.pg-unit { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 18px 18px; border: 1px solid var(--oh-line); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px #1b325e0a; }
.pg-unit-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pg-unit-head img { flex: 0 0 auto; width: 76px; height: 44px; object-fit: contain; object-position: left center; }
.pg-unit-head h3 { min-width: 0; color: #214586; font-size: 16px; font-weight: 750; line-height: 1.3; letter-spacing: .01em; overflow-wrap: anywhere; }
.pg-badge { display: inline-flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; padding: 5px 11px; border-radius: 99px; background: #edf3fd; color: #214586; font-size: 11px; font-weight: 700; line-height: 1.45; }
.pg-badge::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pg-unit:is([data-phase="not_open"],[data-phase="not_started"]) .pg-badge { background: #fff1e5; color: #8a3a0c; }
.pg-unit[data-phase="open"] .pg-badge { background: #e6f4ea; color: #1d5a32; }
.pg-unit:is([data-phase="closed"],[data-phase="ended"]) .pg-badge { background: #eef1f6; color: #4a5568; }
.pg-unit-message { color: var(--pg-quiet); font-size: 13px; line-height: 1.7; }
.pg-rows { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid #dce3ee; }
.pg-rows > li { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 10px; padding: 11px 4px 11px 12px; border-bottom: 1px solid #dce3ee; }
.pg-row-label { grid-column: 1; color: #476697; font-size: 10px; font-weight: 750; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.pg-row-range { grid-column: 1; color: #214586; font-size: 14px; font-weight: 650; line-height: 1.45; }
.pg-row-state { grid-column: 2; grid-row: 1 / 3; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.pg-rows > li[data-state="current"] { background: #fff6ef; }
.pg-rows > li[data-state="current"]::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; border-radius: 3px; background: #ff681e; }
.pg-rows > li[data-state="current"] .pg-row-state { background: #ffe3cf; color: #8a3a0c; }
.pg-rows > li[data-state="done"] .pg-row-range { color: var(--pg-quiet); font-weight: 500; }
.pg-rows > li[data-state="done"] .pg-row-state { background: #eef1f6; color: #4a5568; }
.pg-unit-action { display: grid; gap: 10px; margin-top: auto; padding-top: 4px; }
.pg-unit-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 18px; border: 1px solid transparent; border-radius: 99px; background: var(--pg-cta); color: #fff; font-size: 14px; font-weight: 750; line-height: 1.3; text-align: center; transition: background .2s, border-color .2s; }
.pg-unit-cta:hover { background: var(--pg-cta-hover); }
.pg-unit-cta.is-quiet { border-color: #bdcde4; background: transparent; color: #214586; }
.pg-unit-cta.is-quiet:hover { border-color: #214586; background: #f7faff; }
/* r13 (K4): a registration button whose wave has not opened yet stays in place with its label ("Daftar Gelombang 1"),
   greyed and without an address; the note next to it says when it opens. */
.pg-unit-cta.is-disabled, body[data-design="direct"].pg-page .oh-primary.is-disabled { border-color: #cfd7e3; background: #e3e8ef; color: #4a5568; box-shadow: none; cursor: not-allowed; pointer-events: none; }
body[data-design="direct"] .pg-hero-panel > .pg-cta-note { margin: 0 !important; }
.pg-unit-note { padding: 12px 14px; border-radius: 12px; background: #eef1f6; color: #4a5568; font-size: 13px; font-weight: 650; line-height: 1.5; text-align: center; }

/* Full-width tinted band */
body[data-design="direct"] .oh-section.pg-band { max-width: none; padding-inline: max(var(--oh-gutter), calc((100vw - var(--oh-width)) / 2 + var(--oh-gutter))); background: var(--pg-band); }

/* Flow */
.pg-steps { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg-steps > li { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 14px; min-width: 0; padding: 18px 16px; border: 1px solid #d5deec; border-radius: 14px; background: #fff; }
.pg-step-number { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #edb18e; border-radius: 50%; background: #fff4e9; color: #954516; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-steps h3 { padding-top: 2px; color: #214586; font-size: 16px; font-weight: 750; line-height: 1.35; letter-spacing: -.015em; }
.pg-steps p { margin-top: 6px !important; color: var(--pg-quiet); font-size: 13px; line-height: 1.7; }

/* Payment */
.pg-pay-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.pg-pay-card { min-width: 0; padding: 24px 20px; border-radius: 18px; background: #214586; color: #fff; }
.pg-pay-card h3 { color: #fff; font-size: 17px; font-weight: 750; line-height: 1.35; }
.pg-pay-lines { margin: 16px 0 0 !important; }
.pg-pay-lines > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 0; border-top: 1px solid #ffffff2e; }
.pg-pay-lines dt { color: #d4dff3; font-size: 13px; line-height: 1.5; }
.pg-pay-lines dd { margin: 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-pay-lines > .pg-pay-total { border-top: 2px solid #ffffff5c; }
.pg-pay-total dt { color: #fff; font-weight: 700; }
.pg-pay-total dd { color: #ffc8a5; font-size: 24px; letter-spacing: -.02em; }
.pg-pay-card > p { margin-top: 10px !important; color: #d4dff3; font-size: 12px; line-height: 1.7; }
.pg-lock-card { min-width: 0; padding: 24px 20px; border: 1px solid #ebcfba; border-left: 4px solid #ff681e; border-radius: 14px; background: #fff1e5; }
/* r63 (owner, 18 Oct 2026): instead of "Investasi & benefit", one line and a button to the customer representative
   (the CS WhatsApp of contact-data.js, as in Kontak). */
.pg-lock-card.pg-invest-card { display: grid; align-content: center; gap: 16px; }
.pg-lock-card.pg-invest-card > p { margin: 0 !important; color: #4a3f39; font-size: 14px; line-height: 1.7; }
.pg-invest-card strong { color: #214586; font-weight: 750; }
.pg-invest-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 99px; background: var(--pg-cta); color: #fff; font-size: 14px; font-weight: 750; line-height: 1.3; text-align: center; text-decoration: none; box-shadow: 0 3px 0 var(--pg-cta-edge); transition: background .2s; }
.pg-invest-cta:hover { background: var(--pg-cta-hover); color: #fff; }
body[data-design="direct"].pg-page .pg-invest-cta:focus-visible { outline: 3px solid #214586; outline-offset: 3px; }

/* FAQ links */
body[data-design="direct"] .pg-faq details p a { color: #214586; font-weight: 650; }

/* Contact */
.pg-contact-body { display: grid; align-content: center; gap: 14px; min-width: 0; padding: 24px 22px; }
.pg-contact-body h3 { color: #214586; font-size: 22px; font-weight: 750; line-height: 1.25; letter-spacing: -.02em; }
.pg-contact-address { color: var(--pg-quiet); font-size: 13px; line-height: 1.75; }
.pg-contact-list { display: grid; margin: 0; border-top: 1px solid #dce3ee; }
.pg-contact-list > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid #dce3ee; }
.pg-contact-list dt { color: #64738b; font-size: 11px; font-weight: 600; line-height: 1.5; }
.pg-contact-list dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; color: #214586; font-size: 16px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.pg-contact-list dd a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-color: #bdcde4; text-underline-offset: 4px; }
.pg-contact-list dd span { color: #64738b; font-size: 12px; font-weight: 500; }

/* Final invitation */
.pg-final-units { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; justify-items: center; gap: 10px; margin-top: 18px; }
.pg-final-units img { width: 100%; max-width: 96px; height: 44px; object-fit: contain; }
body[data-design="direct"] .pg-final .oh-final-place { margin-top: 18px; }
.pg-cta-note { margin: 16px 0 0 !important; padding: 10px 12px; border-radius: 10px; background: #edf3fd; color: #214586; font-size: 13px; font-weight: 650; line-height: 1.5; text-align: center; }

/* Sticky bar */
body[data-design="direct"] .pg-sticky > div > span { overflow-wrap: anywhere; }

@media (min-width: 600px) {
  .pg-hero { max-width: 760px; padding: 40px 48px 48px; }
  body[data-design="direct"] .pg-hero-script { font-size: 40px; }
  .pg-lead { font-size: 15px; }
  .pg-hero-photos { gap: 12px; }
  .pg-hero-photos figure { aspect-ratio: 1 / 1; }
  .pg-hero-photos figcaption { left: 10px; bottom: 10px; font-size: 11px; }
  .pg-unit { padding: 24px; }
  .pg-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .pg-pay-card, .pg-lock-card { padding: 28px; }
  .pg-pay-total dd { font-size: 28px; }
  .pg-contact-body { padding: 31px; }
  .pg-contact-body h3 { font-size: 26px; }
}
@media (min-width: 900px) {
  .pg-unit-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .pg-pay-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: stretch; }
  .pg-contact-body { padding: 35px; }
}
@media (min-width: 1000px) {
  .pg-hero { max-width: var(--oh-width); grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); grid-template-rows: auto auto; column-gap: 52px; row-gap: 24px; align-items: center; padding: 56px 40px 64px; }
  .pg-hero-copy { grid-column: 1; grid-row: 1; }
  .pg-hero-panel { grid-column: 1; grid-row: 2; }
  /* Landscape sources: one wide photograph above two square crops, never upscaled into a tall tile. */
  .pg-hero-photos { grid-column: 2; grid-row: 1 / 3; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .pg-hero-photos figure { aspect-ratio: 1 / 1; border-radius: 18px; }
  .pg-hero-photos figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .pg-hero-photos figure:first-child img { object-position: 50% 45%; }
  .pg-steps { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
  .pg-steps > li { display: block; padding: 22px 20px; }
  .pg-step-number { margin-bottom: 16px; }
}
@media (max-width: 359px) {
  .pg-hero { padding-top: 22px; }
  body[data-design="direct"] .pg-hero-script { font-size: 28px; }
  body[data-design="direct"] .pg-hero h1 { font-size: 46px; }
  .pg-lead { font-size: 13px; }
  .pg-hero-photos { gap: 6px; }
  .pg-status { padding-inline: 13px; }
  .pg-unit { padding: 18px 15px 15px; }
  .pg-unit-head img { width: 64px; height: 38px; }
  .pg-steps > li { grid-template-columns: 36px minmax(0,1fr); gap: 11px; padding: 16px 13px; }
  .pg-step-number { width: 36px; height: 36px; }
  .pg-pay-card, .pg-lock-card { padding: 22px 16px; }
  .pg-contact-body { padding: 22px 18px; }
}
@media (hover: hover) {
  .pg-contact-list dd a:hover { text-decoration-color: #214586; }
  body[data-design="direct"] :is(.pg-recover, .pg-final-recover):hover { background: #dfe9fa; }
}
html[data-motion-mode="reduced"] :is(.pg-unit-cta,.pg-invest-cta) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pg-unit-cta, .pg-invest-cta { transition: none; }
}
@media print {
  .pg-hero-photos, .pg-unit-action, .pg-hero-panel > a { display: none !important; }
  .pg-unit, .pg-steps > li, .pg-pay-card, .pg-lock-card { break-inside: avoid; }
}

/* Open House morning (r12, A4 · audit O-01): until 13.00 WIB of 17 October a card on top of "/" and the bottom bar
   lead families who registered to their ticket. */
.pg-today { max-width: calc(var(--oh-width) - var(--oh-gutter) * 2); margin: 18px var(--oh-gutter) 0; padding: 18px 18px 16px; border-radius: 18px; background: #214586; color: #fff; box-shadow: 0 12px 28px #1b325e2e; }
.pg-today-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 6px !important; color: #ffd5ba; font-size: 11px; font-weight: 750; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }
.pg-today-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff681e; box-shadow: 0 0 0 4px #ff681e40; }
.pg-today h2 { margin: 0; color: #fff; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.pg-today-meta { margin: 8px 0 0 !important; color: #fff; font-size: 15px; font-weight: 650; line-height: 1.5; }
.pg-today-note { margin: 6px 0 0 !important; color: #dbe6fc; font-size: 13px; line-height: 1.6; }
.pg-today-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 14px; }
body[data-design="direct"] .pg-today .pg-today-ticket { width: 100%; min-height: 48px; font-size: 15px; box-shadow: 0 3px 0 var(--pg-cta-edge); }
.pg-today-map { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 15px; border: 1px solid #ffffff66; border-radius: 99px; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pg-today-map:hover { background: #ffffff1a; }
body[data-design="direct"].pg-page .pg-today a:focus-visible { outline-color: #ffd5ba; }
@media (min-width: 1160px) { .pg-today { margin-inline: auto; } }
@media (min-width: 760px) { .pg-today { margin-top: 26px; padding: 22px 26px 20px; } .pg-today h2 { font-size: 26px; } .pg-today-actions { grid-template-columns: auto auto; justify-content: start; } body[data-design="direct"] .pg-today .pg-today-ticket { width: auto; padding-inline: 26px; } }