[hidden] { display: none !important; }
/* Public website layout. Tokens and tb- components come from design-system/tunas-bangsa.css. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 26px; background: var(--surface); color: var(--ink); }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--space-4); }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }


/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.topbar-ig { color: var(--on-navy); font-size: 14px; text-decoration: none; opacity: .9; }
.topbar-ig:hover { text-decoration: underline; }
.tb-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.tb-nav::-webkit-scrollbar { display: none; }
.tb-nav-link { white-space: nowrap; }
@media (max-width: 720px) {
  .tb-nav { justify-content: flex-start; }
  .topbar-ig { display: none; }
  .tb-brand-sub { display: none; }
}


/* Shared intro text */
.hero-inner { position: relative; padding-block: var(--space-12); display: grid; gap: var(--space-3); max-width: 1120px; }
.hero-eyebrow { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.hero-title { margin: 0; max-width: 16ch; font-size: clamp(32px, 5vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.hero-lead { margin: 0; max-width: 46ch; font-size: 18px; line-height: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.hero-quiet { background: transparent; color: var(--on-navy); border-color: rgba(253, 244, 227, .7); }
.hero-quiet:hover { background: rgba(253, 244, 227, .12); }

/* Facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding-block: var(--space-6); }
.fact { display: grid; gap: 2px; padding-left: var(--space-3); border-left: 3px solid var(--gold); }
.fact-num { font-size: 28px; line-height: 34px; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; }
.fact-label { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* Section bands */
.band { padding-block: var(--space-8); }
.band.cream { background: var(--surface-cream); }
.band.sunken { background: var(--surface-sunken); }

.visi { max-width: 60ch; margin: 0 auto var(--space-6); text-align: center; font-size: 20px; line-height: 30px; font-weight: 700; color: var(--heading); }
.misi { list-style: none; counter-reset: misi; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); }
.misi li { counter-increment: misi; display: grid; grid-template-columns: 36px 1fr; gap: var(--space-2); align-items: start; }
.misi li::before { content: counter(misi); display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--navy); color: var(--on-navy); font-weight: 800; font-size: 14px; }
@media (max-width: 720px) { .misi { grid-template-columns: 1fr; } }

.programs .tb-program { height: 220px; }

.keg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.keg-grid .tb-agenda { max-width: none; }
.more { text-align: center; margin: var(--space-6) 0 0; }

/* Placeholder for photos still on the old hosting */
.ph { background-color: var(--navy); background-image: repeating-linear-gradient(135deg, rgba(254, 178, 26, .16) 0 2px, transparent 2px 14px); position: relative; }
.fas-media.ph, .tb-agenda-media.ph { display: block; }
.ph-count { position: absolute; top: var(--space-2); right: var(--space-2); background: rgba(9, 20, 36, .72); color: #fdf4e3; font-size: 12px; line-height: 16px; font-weight: 700; padding: 3px var(--space-2); border-radius: var(--radius-full); }

/* Guru */
.guru-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
.guru { display: grid; justify-items: center; text-align: center; gap: 2px; padding: var(--space-4) var(--space-3); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.guru-foto { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: var(--space-2); border-radius: var(--radius-full); background: var(--surface-cream); color: var(--heading); font-weight: 800; font-size: 26px; border: 3px solid var(--gold); }
.guru-nama { font-weight: 700; color: var(--heading); line-height: 22px; }
.guru-peran { font-size: 14px; line-height: 20px; color: var(--ink); }
.guru-mapel { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Fasilitas */
.fas-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.fas { background: var(--surface-raised); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.fas-media { height: 150px; }
.fas-body { display: grid; gap: var(--space-1); justify-items: start; padding: var(--space-4); }
.fas-body h3 { margin: 0; font-size: 20px; line-height: 28px; color: var(--heading); }
.fas-body p { margin: 0; color: var(--ink); }

/* Testimoni */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); justify-items: center; }
.testi-grid .tb-testimonial { max-width: none; width: 100%; box-sizing: border-box; }
.video-note { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.play { width: 0; height: 0; border-left: 10px solid var(--heading); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.tracer { margin-top: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-cream); }
.tracer h3 { margin: 0 0 var(--space-1); color: var(--heading); font-size: 24px; line-height: 32px; }
.tracer p { margin: 0; max-width: 52ch; }

/* Footer */
.site-footer { background: var(--navy); color: var(--on-navy); padding-top: var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-6); }
.site-footer h3 { margin: 0 0 var(--space-2); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.site-footer p { margin: 0; }
.footer-brand { display: grid; gap: var(--space-2); justify-items: start; }
.footer-name { font-weight: 800; font-size: 18px; }
.kontak { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); font-size: 15px; }
.kontak dt { opacity: .8; }
.kontak dd { margin: 0; overflow-wrap: anywhere; }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.links a { color: var(--on-navy); }
.copyright { margin: var(--space-8) 0 0 !important; padding: var(--space-3) var(--space-4); text-align: center; font-size: 14px; background: var(--navy-deep); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } }
.tb-btn { white-space: nowrap; }
@media (max-width: 420px) { .tb-brand-name { font-size: 15px; } .topbar-actions .tb-btn { padding-inline: var(--space-2); } }

/* ---- Prestasi & pengumuman carousel (posters are 3:1, like the old site) ---- */
.carousel { position: relative; background: var(--surface-sunken); }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.car-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 3 / 1; max-height: 520px; overflow: hidden; }
.car-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A slide the website draws itself when a prestasi has no poster */
.car-auto { height: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6); padding: var(--space-6) clamp(20px, 8vw, 120px); box-sizing: border-box; color: var(--on-navy);
  background-color: var(--navy);
  background-image: radial-gradient(rgba(253, 244, 227, .14) 1.5px, transparent 1.6px), linear-gradient(90deg, var(--navy-deep), transparent 70%);
  background-size: 20px 20px, auto; }
.car-auto-leaf { background-color: #1f5e22; background-image: radial-gradient(rgba(253, 244, 227, .14) 1.5px, transparent 1.6px), linear-gradient(90deg, #15431a, transparent 70%); }
.car-text { display: grid; gap: var(--space-2); }
.car-kicker { justify-self: start; background: var(--gold); color: #134686; font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px var(--space-2); border-radius: var(--radius-full); }
.car-name { margin: 0; font-size: clamp(26px, 4.2vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.car-what { margin: 0; font-size: clamp(15px, 1.7vw, 20px); line-height: 1.4; opacity: .95; }
.car-photo { width: clamp(90px, 14vw, 200px); aspect-ratio: 1; border-radius: var(--radius-full); border: 5px solid var(--gold); background: rgba(253, 244, 227, .12); display: grid; place-items: center; }
.car-photo span { font-size: clamp(28px, 4vw, 56px); font-weight: 800; color: #fdf4e3; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--radius-full); border: 0; background: rgba(9, 20, 36, .55); color: #fdf4e3; font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.car-btn:hover { background: var(--gold); color: #134686; }
.car-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.car-prev { left: var(--space-3); } .car-next { right: var(--space-3); }
.car-dots { position: absolute; bottom: var(--space-2); left: 0; right: 0; display: flex; justify-content: center; gap: var(--space-1); }
.car-dots button { width: 10px; height: 10px; padding: 0; border-radius: var(--radius-full); border: 2px solid #fdf4e3; background: rgba(9, 20, 36, .35); cursor: pointer; }
.car-dots button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); width: 26px; }
@media (max-width: 720px) {
  .car-slide { aspect-ratio: auto; }
  .car-slide:has(.car-poster) { aspect-ratio: 3 / 1; }
  .car-auto { grid-template-columns: 1fr; padding: var(--space-6) var(--space-8) var(--space-8); }
  .car-photo { display: none; }
  .car-btn { width: 34px; height: 34px; font-size: 22px; }
  .car-prev { left: 4px; } .car-next { right: 4px; }
}

/* ---- Intro: health + technology ---- */
.intro { position: relative; overflow: hidden; color: var(--on-navy); background-color: var(--navy);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 25v10M25 30h10' stroke='%23FDF4E3' stroke-opacity='.10' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23FDF4E3' fill-opacity='.14'/%3E%3Ccircle cx='60' cy='60' r='1.5' fill='%23FDF4E3' fill-opacity='.14'/%3E%3C/svg%3E"),
    linear-gradient(120deg, var(--navy-deep), var(--navy)); }
.intro-inner { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: center; padding-block: var(--space-12) calc(var(--space-12) + 20px); }
.intro-copy { display: grid; gap: var(--space-3); }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pillar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: rgba(253, 244, 227, .08); border: 1px solid rgba(253, 244, 227, .18); }
.pillar-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--gold); color: #134686; flex: none; }
.pillar b { display: block; font-size: 18px; line-height: 24px; }
.pillar small { font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pulse { position: absolute; left: 0; right: 0; bottom: 6px; width: 100%; height: 50px; }
.pulse polyline { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; opacity: .8; }
@media (max-width: 820px) { .intro-inner { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---- Program cards ---- */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.prog { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow-md); transition: transform .3s, box-shadow .3s; }
.prog:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.prog-media { position: relative; height: 190px; background: var(--surface-sunken) center / cover no-repeat; }
.prog-field { position: absolute; left: var(--space-3); top: var(--space-3); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px var(--space-2); border-radius: var(--radius-full); }
.prog-health .prog-field { background: var(--leaf-soft); color: var(--on-leaf-soft); }
.prog-tech .prog-field { background: var(--navy); color: var(--on-navy); }
.prog-body { position: relative; display: grid; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-4); }
.prog-ico { position: absolute; top: -26px; right: var(--space-4); display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-full); border: 4px solid var(--surface-raised); }
.prog-health .prog-ico { background: var(--leaf); color: #fff; }
.prog-tech .prog-ico { background: var(--navy); color: var(--on-navy); }
.prog-body h3 { margin: 0; font-size: 20px; line-height: 28px; color: var(--heading); }
.prog-body p { margin: 0; }

/* ---- Form pages: pendaftaran and tracer study ---- */
.form-hero { background: var(--navy); color: var(--on-navy); padding-block: var(--space-8) var(--space-12);
  background-image: radial-gradient(rgba(253, 244, 227, .12) 1.5px, transparent 1.6px); background-size: 20px 20px; }
.form-hero .wrap { display: grid; gap: var(--space-2); }
.back { justify-self: start; color: var(--on-navy); text-decoration: none; font-weight: 700; font-size: 14px; opacity: .9; }
.back:hover { text-decoration: underline; }
.form-title { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.form-lead { margin: 0; max-width: 60ch; font-size: 17px; line-height: 27px; opacity: .95; }
.form-wrap { max-width: 820px; margin-top: calc(-1 * var(--space-8)); padding-bottom: var(--space-12); position: relative; }
.form-card { background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-6); display: grid; gap: var(--space-6); }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
legend { padding: 0 0 var(--space-3); margin-bottom: var(--space-1); width: 100%; font-size: 20px; line-height: 28px; font-weight: 800; color: var(--heading); border-bottom: 2px solid var(--gold); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid2 .tb-field { max-width: none; }
.grid2 { align-items: start; }
.tb-field.wide { max-width: none; }
.tb-field.wide, .tb-field-input { width: 100%; box-sizing: border-box; }
.grid2 .wide { grid-column: 1 / -1; }
textarea.tb-field-input { resize: vertical; font: inherit; }
select.tb-field-input { appearance: auto; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } .form-card { padding: var(--space-4); } }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.choice-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .choice-grid, .choice-grid.four { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice-box { display: grid; gap: 2px; height: 100%; box-sizing: border-box; padding: var(--space-3); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.choice-box b { color: var(--heading); }
.choice-box small { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.choice input:checked + .choice-box { border-color: var(--navy); background: var(--surface-cream); box-shadow: inset 0 0 0 1px var(--navy); }
.choice input:focus-visible + .choice-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice.invalid .choice-box { border-color: var(--danger); }
.consent { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; line-height: 22px; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--navy); }
.consent.invalid { color: var(--danger); }
.form-error { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--on-danger-soft); font-weight: 700; }
.submit { min-height: 52px; font-size: 17px; }
.done { display: grid; gap: var(--space-6); }
.done-card { justify-items: center; text-align: center; gap: var(--space-2); }
.done-card h2 { margin: 0; color: var(--heading); font-size: 26px; line-height: 34px; }
.done-card p { margin: 0; max-width: 52ch; }
.done-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--leaf); color: #fff; font-size: 32px; font-weight: 800; }
.reg-no { font-size: 28px !important; line-height: 36px; font-weight: 800; color: var(--heading); letter-spacing: .04em; font-variant-numeric: tabular-nums; padding: var(--space-2) var(--space-4); border: 2px dashed var(--gold); border-radius: var(--radius-md); }
.notif-demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.notif-label { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.wa-bubble, .mail-card { border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); }
.wa-bubble { background: #dcf8c6; color: #1c2536; }
.mail-card { background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); }
.wa-head { display: block; font-size: 12px; font-weight: 700; margin-bottom: var(--space-1); opacity: .75; }
.notif-demo pre { margin: 0; white-space: pre-wrap; font-family: var(--font-sans); font-size: 14px; line-height: 21px; }
@media (max-width: 640px) { .notif-demo { grid-template-columns: 1fr; } }

/* ---- SPMB ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spmb-wrap { max-width: 900px; margin-top: calc(-1 * var(--space-8)); padding-bottom: var(--space-12); position: relative; display: grid; gap: var(--space-6); }
.alur { list-style: none; margin: 0; padding: var(--space-4); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.alur-step { display: flex; gap: var(--space-2); align-items: flex-start; }
.alur-step b { display: block; font-size: 15px; line-height: 20px; color: var(--heading); }
.alur-step small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.alur-no { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); border: 2px solid var(--line-strong); color: var(--ink-muted); font-weight: 800; }
.alur-step.is-now .alur-no { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.alur-step.is-done .alur-no { background: var(--leaf); border-color: var(--leaf); color: #fff; }
@media (max-width: 760px) { .alur { grid-template-columns: 1fr 1fr; } }
.minat-ok { gap: var(--space-4); }
.ok-head { display: flex; gap: var(--space-3); align-items: center; }
.ok-head h2 { margin: 0; color: var(--heading); font-size: 24px; line-height: 32px; }
.ok-head p { margin: 0; }
.kode { font-size: 20px; letter-spacing: .04em; color: var(--heading); font-variant-numeric: tabular-nums; }
.wa-step { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--leaf-soft); color: var(--on-leaf-soft); }
.wa-step p { margin: 0; }
.wa-btn { background: #1f8f4e; color: #fff; }
.wa-btn:hover { background: #17753f; }
.wa-ico { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.wa-ico::after { content: ""; position: absolute; left: -3px; bottom: -3px; border: 4px solid transparent; border-top-color: currentColor; transform: rotate(35deg); }
.wa-num { font-size: 14px; }
.chat-hint { margin: 0; color: var(--ink-muted); }
.portal { display: grid; gap: var(--space-3); }
.portal-head h2 { margin: 0; font-size: 26px; line-height: 34px; color: var(--heading); }
.portal-head p { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.tabs { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--line); overflow-x: auto; }
.tab { font: inherit; font-weight: 700; padding: var(--space-2) var(--space-4); border: 0; background: none; color: var(--ink-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--gold); }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.status-line { margin: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid3 .tb-field, .grid4 .tb-field { max-width: none; }
.grid3 .wide { grid-column: span 2; }
@media (max-width: 640px) { .grid3, .grid4 { grid-template-columns: 1fr 1fr; } .grid3 .wide { grid-column: 1 / -1; } }
.file { padding: 8px; font-size: 14px; }
.berkas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.berkas li { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.berkas b { display: block; color: var(--heading); }
.berkas small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.berkas a { color: var(--heading); }
@media (max-width: 640px) { .berkas li { grid-template-columns: 1fr; } }
.more-note, .ukur-note { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.ukur { display: grid; grid-template-columns: 1fr 180px; gap: var(--space-4); align-items: start; }
.ukur-fig { margin: 0; padding: var(--space-2); border-radius: var(--radius-lg); background: var(--surface-cream); }
.ukur-fig .body { fill: var(--surface-raised); stroke: var(--line-strong); stroke-width: 1.5; }
.ukur-fig .m { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 4 3; }
.ukur-fig text { font-size: 10px; fill: var(--ink); font-family: var(--font-sans); }
@media (max-width: 640px) { .ukur { grid-template-columns: 1fr; } .ukur-fig { max-width: 200px; } }

/* Chatbot */
.chat { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1100; display: grid; justify-items: end; gap: var(--space-2); }
.chat-fab { font: inherit; font-weight: 800; display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 18px; border: 0; border-radius: var(--radius-full); background: var(--navy); color: var(--on-navy); box-shadow: var(--shadow-lg); cursor: pointer; order: 2; }
.chat-fab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.chat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(254, 178, 26, .35); }
.chat-panel { width: min(360px, calc(100vw - 32px)); height: min(480px, 70vh); display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--line); }
.chat-panel[hidden] { display: none !important; }
.chat-head { position: relative; padding: var(--space-3) var(--space-4); background: var(--navy); color: var(--on-navy); display: grid; }
.chat-head small { opacity: .85; font-size: 12px; line-height: 16px; }
.chat-x { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border: 0; background: none; color: var(--on-navy); font-size: 24px; cursor: pointer; }
.chat-log { flex: 1; overflow-y: auto; padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; }
.msg { max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: 14px; line-height: 21px; display: grid; gap: var(--space-2); justify-items: start; }
.msg.bot { background: var(--surface-sunken); color: var(--ink); border-bottom-left-radius: 4px; }
.msg.me { justify-self: end; background: var(--navy); color: var(--on-navy); border-bottom-right-radius: 4px; }
.chat-quick { display: flex; gap: var(--space-1); overflow-x: auto; padding: 0 var(--space-3) var(--space-2); }
.chat-quick button { font: inherit; font-size: 13px; white-space: nowrap; padding: 6px 10px; border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--heading); cursor: pointer; }
.chat-form { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); border-top: 1px solid var(--line); }
.chat-form .tb-field-input { flex: 1; min-width: 0; padding: 8px 10px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 1200; max-width: min(520px, calc(100vw - 32px)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #13233b; color: #fdf4e3; box-shadow: var(--shadow-lg); font-size: 14px; line-height: 21px; }

/* Admin */
body.is-admin .site-header, body.is-admin .site-footer, body.is-admin .chat { display: none; }
.admin-bar { background: var(--navy); color: var(--on-navy); }
.admin-bar-in { display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
.admin-brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; }
.back.light { color: var(--on-navy); }
.admin-view { background: var(--surface-sunken); min-height: 80vh; }
.admin-wrap { display: grid; gap: var(--space-4); padding-block: var(--space-6) var(--space-12); }
.demo-flag { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--gold-soft); color: var(--on-gold-soft); font-size: 14px; }
.pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.pipe-card { font: inherit; text-align: left; display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 2px solid var(--line); background: var(--surface-raised); color: var(--ink-muted); cursor: pointer; }
.pipe-card[aria-selected="true"] { border-color: var(--navy); color: var(--heading); }
.pipe-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pipe-num { font-size: 28px; line-height: 34px; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .pipe { grid-template-columns: repeat(3, 1fr); } }
.admin-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.admin-tools .search { flex: 1 1 260px; max-width: none; }
.admin-tools select.tb-field-input { width: auto; }
.muted { color: var(--ink-muted); font-size: 13px; }
.mono { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tb-table td .tb-badge { margin-top: 2px; }
.tb-table-actions { flex-wrap: wrap; }
.mpls-note { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--gold-soft); color: var(--on-gold-soft); font-size: 14px; line-height: 21px; }

/* ---- Shared page parts ---- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: var(--space-2) var(--space-4); background: var(--gold); color: var(--on-gold); font-weight: 700; }
.skip:focus { left: var(--space-2); }
.card-title-link { color: inherit; text-decoration: none; }
.card-title-link:hover { text-decoration: underline; }
.card-title-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a.pillar { color: inherit; text-decoration: none; }
a.pillar:hover { background: rgba(253, 244, 227, .16); }
a.pillar:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
a.prog-media { display: block; }
.footer-h { margin: 0 0 var(--space-2); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.page-hero { background: var(--navy); color: var(--on-navy); padding-block: var(--space-8);
  background-image: radial-gradient(rgba(253, 244, 227, .12) 1.5px, transparent 1.6px); background-size: 20px 20px; }
.page-hero .wrap { display: grid; gap: var(--space-2); }
.crumbs { font-size: 14px; line-height: 20px; opacity: .9; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.crumbs a { color: var(--on-navy); }
.page-title { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.page-lead { margin: 0; max-width: 62ch; font-size: 17px; line-height: 27px; opacity: .95; }
.prose-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-8); align-items: start; }
@media (max-width: 860px) { .prose-grid { grid-template-columns: 1fr; } }
.prose { max-width: 68ch; }
.prose h2 { font-size: 24px; line-height: 32px; color: var(--heading); margin: var(--space-6) 0 var(--space-2); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 17px; line-height: 28px; }
.prose ul { padding-left: 1.2em; }
.prose-img { width: 100%; border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.info-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-cream); }
.info-card h2 { margin: var(--space-2) 0 0; font-size: 20px; line-height: 28px; color: var(--heading); }
.info-card h2:first-child, .info-card .pillar-ico + h2 { margin-top: 0; }
.info-card h3 { margin: var(--space-4) 0 0; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.info-card p { margin: 0; }
.info-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); }
.info-card dt { color: var(--ink-muted); }
.info-card dd { margin: 0; overflow-wrap: anywhere; }
.pillar-ico.big { width: 64px; height: 64px; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.plain a { color: var(--heading); font-weight: 700; }
.wa-big { font-size: 28px !important; line-height: 36px; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; }
.empty { margin: 0; padding: var(--space-6); text-align: center; color: var(--ink-muted); background: var(--surface-raised); border-radius: var(--radius-lg); }
.muted { color: var(--ink-muted); font-size: 14px; font-weight: 400; }
.article { display: grid; gap: var(--space-4); }
.gal-title { margin: var(--space-4) 0 0; font-size: 24px; line-height: 32px; color: var(--heading); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.gallery a { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery a:hover img { transform: scale(1.04); }
.gallery a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pager { display: flex; justify-content: center; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.pager [aria-disabled="true"] { opacity: .45; }
.pager-info { color: var(--ink-muted); font-size: 14px; }
img.guru-foto { object-fit: cover; padding: 0; }
.prestasi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.prestasi { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow-md); }
.prestasi img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.prestasi-body { display: grid; gap: var(--space-1); justify-items: start; padding: var(--space-4); }
.prestasi-body h2 { margin: 0; font-size: 20px; line-height: 28px; color: var(--heading); }
.prestasi-body p { margin: 0; color: var(--ink-muted); }
.fas-body h2 { margin: 0; font-size: 20px; line-height: 28px; color: var(--heading); }
.tracer h2 { margin: 0 0 var(--space-1); color: var(--heading); font-size: 24px; line-height: 32px; }
.testi-video { width: 100%; max-height: 260px; border-radius: var(--radius-md); background: #000; margin-bottom: var(--space-3); }
.wa-btn { background: #1f8f4e; color: #fff; }
.wa-btn:hover { background: #17753f; }
.wa-ico { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; position: relative; }
/* Login and dashboard */
.auth-band { display: grid; place-items: center; padding: var(--space-12) var(--space-4); background: var(--surface-sunken); }
.auth-card { width: 100%; max-width: 420px; box-sizing: border-box; display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-lg); }
.auth-card h1 { margin: 0; font-size: 28px; line-height: 36px; color: var(--heading); }
.auth-lead { margin: 0; color: var(--ink-muted); }
.auth-form { width: 100%; display: grid; gap: var(--space-3); text-align: left; }
.auth-form .tb-field { max-width: none; }
.auth-help { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.auth-help a { color: var(--heading); font-weight: 700; }
.dash { display: grid; gap: var(--space-6); justify-items: start; }
.dash-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.dash-card { display: grid; gap: var(--space-1); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.dash-card b { font-size: 20px; line-height: 28px; color: var(--heading); }
.dash-card span { color: var(--ink-muted); }
.dash-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.dash-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- SPMB (real site) ---- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.grid2 .consent.wide { grid-column: 1 / -1; }
.field-msg { margin: calc(-1 * var(--space-4)) 0 0; color: var(--danger); font-size: 14px; }
.flash { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--leaf-soft); color: var(--on-leaf-soft); }
.portal-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-cream); }
.portal-cta h2 { margin: 0 0 var(--space-1); color: var(--heading); font-size: 22px; line-height: 30px; }
.portal-cta p { margin: 0; max-width: 56ch; }
.berkas li.is-error { border-color: var(--danger); }
.berkas small.ok { color: var(--leaf); font-weight: 700; }
.berkas small.err { color: var(--danger); font-weight: 700; }
.chat-panel[hidden] { display: none !important; }
/* ---- Staff pages ---- */
.staf .admin-bar-in { flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-1); }
.admin-brand { color: var(--on-navy); text-decoration: none; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.admin-nav a, .admin-nav button { font: inherit; font-size: 14px; font-weight: 700; color: var(--on-navy); text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm); border: 0; background: none; cursor: pointer; }
.admin-nav a:hover, .admin-nav button:hover { background: rgba(253, 244, 227, .12); }
.admin-nav a[aria-current="page"] { background: var(--gold); color: var(--on-gold); }
.admin-nav form { margin: 0; }
.pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--space-3); }
a.pipe-card { text-decoration: none; }
.pipe-card[aria-current="page"] { border-color: var(--navy); color: var(--heading); }
.pipe-alert .pipe-num { color: var(--danger); }
@media (max-width: 900px) { .pipe { grid-template-columns: repeat(3, 1fr); } }
.tools-gap { flex: 1; }
.row-link { color: var(--heading); text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.tb-table td a { color: var(--heading); }
.nowrap { white-space: nowrap; }
.back-link { justify-self: start; color: var(--heading); font-weight: 700; text-decoration: none; }
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.detail-head h1 { margin: 0; font-size: 28px; line-height: 36px; color: var(--heading); }
.detail-head p { margin: 0; }
.tb-badge.big { font-size: 14px; padding: 6px 14px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }
.panel { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.panel.wide { grid-column: 1 / -1; }
.panel h2 { margin: 0; font-size: 18px; line-height: 26px; color: var(--heading); }
.panel p { margin: 0; }
.kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
.kv dt { color: var(--ink-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv.cols { grid-template-columns: max-content 1fr max-content 1fr; }
@media (max-width: 640px) { .kv.cols { grid-template-columns: max-content 1fr; } }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.btn-row form { margin: 0; }
.stack { display: grid; gap: var(--space-3); }
.stack .tb-field { max-width: none; }
.faq-item summary { cursor: pointer; display: flex; gap: var(--space-2); align-items: center; }
.faq-item[open] summary { margin-bottom: var(--space-2); }
.inline { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.num { width: 80px; }
code { font-size: 14px; background: var(--surface-sunken); padding: 2px 6px; border-radius: var(--radius-sm); }
.kuitansi { max-width: 720px; display: grid; gap: var(--space-4); padding: var(--space-8); background: #fff; color: #1c2536; border: 1px solid #e0e0e0; border-radius: var(--radius-md); }
.kuitansi h1 { margin: 0; font-size: 22px; line-height: 30px; text-align: center; color: #134686; border-block: 2px solid #134686; padding-block: var(--space-2); }
.kuitansi .kv dt { color: #5a6272; }
.kw-head { display: flex; gap: var(--space-3); align-items: center; }
.kw-school { margin: 0; font-weight: 800; font-size: 20px; color: #134686; }
.kw-addr { margin: 0; font-size: 13px; color: #5a6272; }
.kw-login { padding: var(--space-3) var(--space-4); border: 2px dashed #feb21a; border-radius: var(--radius-md); }
.kw-login p { margin: 0 0 4px; }
.kuitansi .muted { color: #5a6272; }
.kw-sign { display: flex; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-6); }
.kw-sign p { margin: 0; }
.kw-line { margin-top: 64px !important; border-top: 1px solid #1c2536; min-width: 200px; padding-top: 4px; }
@media print {
  .no-print, .admin-bar, .site-header, .site-footer { display: none !important; }
  .admin-view, body { background: #fff !important; }
  .kuitansi { border: 0; padding: 0; }
}

/* Konten Website editor */
.konten-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.konten-tabs a { padding: var(--space-2) var(--space-3); color: var(--ink-muted); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.konten-tabs a:hover { color: var(--heading); }
.konten-tabs a[aria-current="page"] { color: var(--heading); border-bottom-color: var(--gold); }
.konten-form .tb-field { max-width: none; }
.konten-form .grid2 { align-items: start; }
.konten-form code { font-size: 13px; background: var(--surface-sunken); padding: 1px 4px; border-radius: 4px; }
.fakta-row { grid-template-columns: 1fr 2fr; }
.rows { display: grid; gap: var(--space-3); }
.row-edit { display: grid; grid-template-columns: 2fr 3fr 170px; gap: var(--space-3); align-items: end; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--line); }
.row-edit.two { grid-template-columns: 1fr 170px; }
.row-checks { display: flex; gap: var(--space-3); padding-bottom: 10px; }
.reset-row { justify-content: flex-end; margin-top: var(--space-3); }
@media (max-width: 640px) { .row-edit, .fakta-row { grid-template-columns: 1fr; } .row-checks { padding-bottom: 0; } }

/* Installer */
.pasang { max-width: 640px; padding-block: var(--space-12); display: grid; gap: var(--space-4); }
.pasang h1 { margin: 0; color: var(--heading); }
.pasang .tb-field { max-width: none; }
.cek, .log { margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; gap: var(--space-1); }
.cek { list-style: none; }
.cek .ok span { color: var(--leaf, #1b7f4b); font-weight: 800; }
.cek .no { color: var(--danger); font-weight: 700; }

/* Tracer study */
.tracer-band { background: var(--navy); color: var(--on-navy); padding-block: var(--space-12); }
.tracer-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; }
.tracer-copy { display: grid; gap: var(--space-3); justify-items: start; }
.tracer-copy .tb-section-eyebrow { color: var(--gold); }
.tracer-copy h2 { margin: 0; font-size: 28px; line-height: 36px; color: #fff; }
.tracer-copy p { margin: 0; max-width: 56ch; color: rgba(255,255,255,.86); }
.tracer-angka { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tracer-angka div { padding: var(--space-4); border-radius: var(--radius-lg); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.tracer-angka dt { font-size: 13px; line-height: 18px; color: rgba(255,255,255,.8); }
.tracer-angka dd { margin: var(--space-1) 0 0; font-size: 32px; line-height: 40px; font-weight: 800; color: var(--gold); }
.spmb-wrap .tracer-angka { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--space-6); }
.spmb-wrap .tracer-angka div { background: var(--surface-raised); border-color: var(--line); }
.spmb-wrap .tracer-angka dt { color: var(--ink-muted); }
.spmb-wrap .tracer-angka dd { color: var(--heading); }
.choice-grid.invalid .choice-box { border-color: var(--danger); }
.field-err { margin: 0; color: var(--danger); font-size: 14px; }
@media (max-width: 800px) { .tracer-in { grid-template-columns: 1fr; } .spmb-wrap .tracer-angka { grid-template-columns: 1fr 1fr; } }
.saran-row td { padding-top: 0; font-size: 14px; }
.update-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-cream); border: 2px solid var(--gold); }
.update-note p { margin: 0; max-width: 60ch; }