/*
Theme Name: SLB Anak Brilliant
Author: Geaber
Author URI: https://geaber.com
Description: Tema ringan dan siap pakai untuk SLB Anak Brilliant Batam. Semua halaman (Beranda, Tentang Kami, Layanan, Kegiatan, Pendaftaran, Kontak, Berita) dibuat otomatis saat tema diaktifkan, lengkap dengan formulir pendaftaran tanpa plugin dan pengaturan tampilan untuk aksesibilitas.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brilliant
*/

/* ---------------------------------------------------------------------------
   Huruf: Lexend, dirancang khusus supaya teks lebih mudah dibaca
   --------------------------------------------------------------------------- */
@font-face {
	font-family: "Lexend";
	src: url("assets/fonts/lexend.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Warna dan ukuran, diambil dari logo sekolah
   --------------------------------------------------------------------------- */
:root {
	--ink: #17324d;
	--ink-2: #3f5a73;
	--sky: #1479b8;
	--sky-deep: #0d5a8a;
	--sky-soft: #e4f2fb;
	--sun: #f6c21a;
	--sun-deep: #c99400;
	--sun-soft: #fff5d6;
	--berry: #c8352c;
	--berry-soft: #fce6e3;
	--mist: #f4f8fb;
	--line: #d5e3ed;
	--white: #ffffff;
	--wa: #12843f;

	--radius-lg: 32px;
	--radius: 20px;
	--radius-sm: 12px;
	--wrap: 1180px;
	--gap: clamp(1rem, 3vw, 2rem);
	--section: clamp(3.5rem, 8vw, 6.5rem);
	--font: "Lexend", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

html[data-size="l"] { font-size: 112.5%; }
html[data-size="xl"] { font-size: 125%; }

html[data-contrast] {
	--ink: #000000;
	--ink-2: #1a1a1a;
	--sky: #003f75;
	--sky-deep: #002a50;
	--sky-soft: #ffffff;
	--sun: #ffd400;
	--sun-soft: #ffffff;
	--berry: #9a0f08;
	--berry-soft: #ffffff;
	--mist: #ffffff;
	--line: #000000;
}
html[data-contrast] .service,
html[data-contrast] .need-cards li,
html[data-contrast] .note,
html[data-contrast] .docs,
html[data-contrast] .path__item,
html[data-contrast] .page-head { border: 2px solid #000; }
html[data-contrast] img { filter: contrast(1.1); }

html[data-links] a { text-decoration: underline !important; text-underline-offset: .18em; }

html[data-still] *,
html[data-still] *::before,
html[data-still] *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------------------
   Dasar
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.125rem;
	font-weight: 350;
	line-height: 1.7;
	color: var(--ink);
	background: var(--white);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--sky); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--sky-deep); }
strong { font-weight: 600; }
ul, ol { padding-left: 1.2em; }

:focus-visible {
	outline: 3px solid var(--sun);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--ink);
	border-radius: 6px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: 1rem; top: -100px; z-index: 100;
	background: var(--sun); color: var(--ink); font-weight: 600;
	padding: .8rem 1.2rem; border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.svg-defs { position: absolute; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.muted { color: var(--ink-2); font-size: .95rem; }
.icon { flex: none; vertical-align: middle; }
.site-main:focus { outline: none; }

/* ---------------------------------------------------------------------------
   Tombol
   --------------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 48px; padding: .7rem 1.4rem;
	font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
	border: 2px solid transparent; border-radius: 999px;
	text-decoration: none; cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; padding: .9rem 1.7rem; font-size: 1.06rem; }
.btn--block { width: 100%; }
.btn--sun { background: var(--sun); color: var(--ink); }
.btn--sun:hover { background: #ffd23d; color: var(--ink); }
.btn--sky { background: var(--sky); color: var(--white); }
.btn--sky:hover { background: var(--sky-deep); color: var(--white); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: #0e2236; color: var(--white); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }
.btn--light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn--light:hover { background: var(--white); color: var(--ink); }

.text-link { font-weight: 600; color: var(--sky-deep); }

/* ---------------------------------------------------------------------------
   Header & menu
   --------------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,.97);
	border-bottom: 1px solid var(--line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 80px; }

.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); }
.brand__logo { width: 52px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; white-space: nowrap; }
.brand__place { white-space: nowrap; }
.brand__place { font-size: .9rem; color: var(--ink-2); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.nav__cta, .tool-btn { white-space: nowrap; }
@media (max-width: 1440px) { .tool-btn__label { display: none; } }
.brand { flex: none; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.nav__list a {
	display: block; padding: .55rem .75rem; border-radius: 999px; white-space: nowrap;
	color: var(--ink); text-decoration: none; font-weight: 450; font-size: 1rem;
}
.nav__list a:hover { background: var(--sky-soft); color: var(--ink); }
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a,
.nav__list .current_page_parent > a { background: var(--sky-soft); font-weight: 600; }
.nav__list .sub-menu { display: none; }

.site-header__tools { display: flex; gap: .4rem; }
.tool-btn {
	display: inline-flex; align-items: center; gap: .45rem;
	min-height: 44px; min-width: 44px; padding: .45rem .8rem;
	background: var(--mist); color: var(--ink);
	border: 1px solid var(--line); border-radius: 999px;
	font: inherit; font-size: .92rem; cursor: pointer;
}
.tool-btn:hover, .tool-btn[aria-expanded="true"] { background: var(--sky-soft); border-color: var(--sky); }
.nav-toggle { display: none; }
.nav-toggle .when-open { display: none; }
.nav-open .nav-toggle .when-open { display: block; }
.nav-open .nav-toggle .when-closed { display: none; }

.a11y-panel { background: var(--sky-soft); border-top: 1px solid var(--line); }
.a11y-panel__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-block: 1rem; }
.a11y-panel__title { margin: 0; font-weight: 600; width: 100%; }
.a11y-panel__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.a11y-panel__label { font-size: .95rem; margin-right: .25rem; }
.chip {
	display: inline-flex; align-items: center; gap: .4rem;
	min-height: 44px; padding: .4rem 1rem;
	background: var(--white); color: var(--ink);
	border: 2px solid var(--line); border-radius: 999px;
	font: inherit; font-size: .95rem; cursor: pointer;
}
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--sun); font-weight: 600; }
.chip--ghost { background: transparent; }

@media (max-width: 1140px) {
	.tool-btn__label { display: none; }
	.nav-toggle { display: inline-flex; }
	.nav {
		position: absolute; left: 0; right: 0; top: 100%;
		display: none; flex-direction: column; align-items: stretch; gap: 1rem;
		padding: 1rem 1.25rem 1.5rem;
		background: var(--white); border-bottom: 1px solid var(--line);
		box-shadow: 0 20px 40px rgba(23,50,77,.12);
	}
	.nav-open .nav { display: flex; }
	.nav__list { flex-direction: column; }
	.nav__list a { padding: .85rem 1rem; font-size: 1.1rem; border-radius: var(--radius-sm); }
	.site-header__tools { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   Bagian & judul bagian
   --------------------------------------------------------------------------- */
.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section--sky { background: var(--sky-soft); }
.section--sun { background: var(--sun-soft); }
.section-head { max-width: 700px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--ink-2); font-size: 1.15rem; margin: 0; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; }
.section-head--row h2 { margin: 0; }

.prose > *:last-child { margin-bottom: 0; }
.prose h2 { margin-top: 0; }
.prose p, .prose li { max-width: 68ch; }
.prose img { border-radius: var(--radius); }
.prose blockquote { margin: 1.5em 0; padding: 1rem 1.5rem; border-left: 5px solid var(--sun); background: var(--sun-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--tight { margin-top: clamp(2.5rem, 5vw, 4rem); grid-template-columns: .9fr 1.1fr; }
.rounded-photo { width: 100%; border-radius: var(--radius-lg); object-fit: cover; aspect-ratio: 4 / 3; }
.rounded-photo--tall { aspect-ratio: 3 / 4; max-height: 620px; }

.ticks { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .55rem; }
.ticks .icon { margin-top: .3rem; color: var(--sky); stroke-width: 2.6; }

.note {
	display: flex; gap: 1rem; align-items: flex-start;
	padding: 1.25rem 1.4rem; margin-top: 1.5rem;
	background: var(--sky-soft); border-radius: var(--radius);
}
.note .icon { color: var(--sky); margin-top: .2rem; }
.note p { margin: 0; }

/* ---------------------------------------------------------------------------
   Hero beranda
   --------------------------------------------------------------------------- */
.hero { padding-top: clamp(2.5rem, 6vw, 5rem); background: linear-gradient(var(--white) 70%, var(--mist)); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__org { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; padding: .35rem 1rem .35rem .4rem; background: var(--mist); border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; color: var(--ink-2); }
.hero__org img { width: 36px; height: 36px; }
.hero__title { max-width: 14ch; margin-bottom: 1.25rem; }
.hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--ink-2); max-width: 36rem; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__visual { position: relative; aspect-ratio: 1; }
.hero__photo {
	position: relative; z-index: 2;
	width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
	clip-path: url(#puzzle-clip);
}
.hero__piece { position: absolute; z-index: 1; display: block; }
.hero__piece--blue { width: 30%; right: -6%; bottom: -2%; transform: rotate(14deg); }
.hero__piece--red { width: 16%; left: -2%; top: 8%; transform: rotate(-18deg); }
.puzzle-deco { display: block; width: 100%; height: auto; }

.hero__visual .hero__photo { animation: pieceIn .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pieceIn {
	from { opacity: 0; transform: translate(6%, -6%) rotate(6deg); }
	to { opacity: 1; transform: none; }
}

.facts {
	list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 1.75rem 0 clamp(2.5rem, 5vw, 3.5rem);
	display: grid; grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line);
}
.facts li { padding: 0 1.5rem; border-left: 1px solid var(--line); }
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts strong { display: block; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; color: var(--sky-deep); line-height: 1.15; letter-spacing: -.02em; }
.facts span { color: var(--ink-2); font-size: 1rem; }

/* ---------------------------------------------------------------------------
   Layanan (beranda)
   --------------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.service { padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radius-lg); }
.service--sky { background: var(--sky-soft); }
.service--sun { background: var(--sun-soft); }
.service__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.25rem; border-radius: 20px; background: var(--white); color: var(--sky-deep); }
.service--sun .service__icon { color: var(--sun-deep); }
.service h3 { font-size: 1.6rem; }

/* ---------------------------------------------------------------------------
   Kebutuhan anak
   --------------------------------------------------------------------------- */
.needs { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.needs__intro p { color: var(--ink-2); }
.needs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.needs__list li { display: flex; align-items: center; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-weight: 450; }
.needs__bullet { width: 26px; height: 26px; flex: none; }
.needs__list li:nth-child(4n+2) .needs__bullet path { fill: var(--sky); }
.needs__list li:nth-child(4n+3) .needs__bullet path { fill: var(--berry); }
.needs__list li:nth-child(4n) .needs__bullet path { fill: #7fc4ea; }

.need-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.need-cards li { position: relative; padding: 1.5rem 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.need-cards__mark { width: 34px; height: 34px; margin-bottom: .75rem; }
.need-cards li:nth-child(4n+2) .need-cards__mark path { fill: var(--sky); }
.need-cards li:nth-child(4n+3) .need-cards__mark path { fill: var(--berry); }
.need-cards li:nth-child(4n) .need-cards__mark path { fill: #7fc4ea; }
.need-cards h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.need-cards p { margin: 0; color: var(--ink-2); font-size: 1rem; }

/* ---------------------------------------------------------------------------
   Kegiatan
   --------------------------------------------------------------------------- */
.activities { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.activity__art { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.activity p { margin: .4rem 0 0; color: var(--ink-2); font-size: 1rem; }
.activity h3 { font-size: 1.25rem; margin: 0; }

.activity-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.activity-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.activity-row__art { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.activity-row--flip .activity-row__art { order: 2; }
.activity-row__text p { font-size: 1.15rem; color: var(--ink-2); max-width: 34rem; }

.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery-grid__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.gallery-grid__btn img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s; }
.gallery-grid__btn:hover img { transform: scale(1.04); }

.lightbox { width: min(96vw, 1100px); padding: 0; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--white); }
.lightbox::backdrop { background: rgba(10, 25, 40, .85); }
.lightbox__img { width: 100%; max-height: 80vh; object-fit: contain; background: #000; }
.lightbox__caption { margin: 0; padding: 1rem 1.25rem; font-size: 1rem; }
.lightbox__close { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; }

/* ---------------------------------------------------------------------------
   Langkah pendaftaran (berurutan)
   --------------------------------------------------------------------------- */
.steps { list-style: none; counter-reset: step; margin: 0 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.steps li { counter-increment: step; position: relative; padding-top: 4.25rem; }
.steps li::before {
	content: counter(step);
	position: absolute; top: 0; left: 0;
	display: grid; place-items: center; width: 52px; height: 52px;
	border-radius: 50%; background: var(--sun); color: var(--ink);
	font-weight: 700; font-size: 1.3rem; z-index: 1;
}
.steps li::after { content: ""; position: absolute; top: 26px; left: 60px; right: -1.2rem; border-top: 2px dashed var(--line); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.steps p { color: var(--ink-2); font-size: 1rem; margin: 0; }

.steps--compact { grid-template-columns: 1fr; gap: 0; margin-bottom: 2rem; }
.steps--compact li { padding: 0 0 1.5rem 4rem; min-height: 52px; }
.steps--compact li::before { width: 44px; height: 44px; font-size: 1.1rem; }
.steps--compact li::after { top: 48px; left: 21px; right: auto; bottom: 4px; border-top: 0; border-left: 2px dashed var(--line); }

/* ---------------------------------------------------------------------------
   Galeri singkat & berita
   --------------------------------------------------------------------------- */
.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(170px, 260px)); gap: 1rem; }
.mosaic figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); min-height: 0; }
.mosaic figure:first-child { grid-row: span 2; }
.mosaic figure:last-child { grid-column: span 2; }
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic--three { grid-template-columns: repeat(3, 1fr); grid-template-rows: 300px; }
.mosaic--three figure:first-child, .mosaic--three figure:last-child { grid-row: auto; grid-column: auto; }

.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; }
.post-card { display: flex; flex-direction: column; }
.post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--sky-soft); margin-bottom: 1rem; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__placeholder { display: grid; place-items: center; height: 100%; }
.post-card__placeholder img { width: 110px; height: 110px; object-fit: contain; }
.post-card__date { font-size: .92rem; color: var(--ink-2); margin-bottom: .3rem; }
.post-card__title { font-size: 1.25rem; }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--sky); text-decoration: underline; }
.post-card p:last-child { color: var(--ink-2); font-size: 1rem; }

.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-numbers { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); }
.page-numbers.current { background: var(--ink); color: var(--white); border-color: var(--ink); }

.single__cover { margin: 0 0 2rem; }
.single__cover img { border-radius: var(--radius-lg); }
.post-nav { display: grid; gap: .75rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

.empty { text-align: center; padding: 2rem 0; }
.search-form { display: flex; gap: .5rem; max-width: 480px; margin: 1.5rem auto 0; }
.search-form input { flex: 1; }

/* ---------------------------------------------------------------------------
   Ajakan (CTA)
   --------------------------------------------------------------------------- */
.cta { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding-block: clamp(3rem, 7vw, 5rem); }
.cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
.cta h2 { color: var(--white); }
.cta p { color: #d5e1ec; font-size: 1.15rem; max-width: 36rem; margin: 0; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
.cta__puzzle { position: absolute; width: 420px; right: -90px; top: -120px; transform: rotate(18deg); }

/* ---------------------------------------------------------------------------
   Judul halaman dalam
   --------------------------------------------------------------------------- */
.page-head { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 3.75rem); }
.page-head--sky { background: var(--sky-soft); }
.page-head--sun { background: var(--sun-soft); }
.page-head__inner { position: relative; z-index: 1; }
.page-head__title { max-width: 18ch; margin-bottom: .75rem; }
.page-head__lead { max-width: 42rem; font-size: 1.2rem; color: var(--ink-2); margin: 0; }
.page-head__meta { color: var(--ink-2); margin-bottom: 1rem; }
.page-head__puzzle { position: absolute; width: clamp(180px, 26vw, 340px); right: clamp(-60px, -2vw, 0px); bottom: -30%; transform: rotate(-12deg); opacity: .9; }
.page-head--sun .page-head__puzzle path { fill: var(--sky); }
.single .page-head__title { max-width: 26ch; font-size: clamp(2rem, 4vw, 3rem); }

.subnav { position: sticky; top: 80px; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.admin-bar .subnav { top: 112px; }
.subnav .wrap { display: flex; gap: .5rem; overflow-x: auto; padding-block: .6rem; }
.subnav a { flex: none; padding: .5rem 1rem; border-radius: 999px; background: var(--mist); color: var(--ink); text-decoration: none; font-size: .98rem; }
.subnav a:hover { background: var(--sky-soft); }

/* Jenjang sekolah: urutan TK sampai SMA */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; }
.path__item { padding: 1.5rem; border-radius: var(--radius); background: var(--mist); border-top: 6px solid var(--sun); }
.path__item--sky { border-top-color: var(--sky); }
.path__item--berry { border-top-color: var(--berry); }
.path__item--ink { border-top-color: var(--ink); }
.path__level { display: inline-block; margin-bottom: .75rem; padding: .2rem .8rem; border-radius: 999px; background: var(--white); font-weight: 700; font-size: .95rem; }
.path h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.path p { margin: 0; font-size: 1rem; color: var(--ink-2); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 1.25rem 3rem 1.25rem 0; font-weight: 600; font-size: 1.15rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
	display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: var(--sun); font-size: 1.4rem; font-weight: 500; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 1.4rem; color: var(--ink-2); max-width: 62ch; }

/* Nilai sekolah */
.values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.values li { padding-top: 1.25rem; border-top: 3px solid var(--sun); }
.values li:nth-child(2) { border-color: var(--sky); }
.values li:nth-child(3) { border-color: var(--berry); }
.values li:nth-child(4) { border-color: var(--ink); }
.values .icon { color: var(--ink); margin-bottom: .75rem; }
.values h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.values p { margin: 0; color: var(--ink-2); font-size: 1rem; }

/* Visi & misi */
.vm { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.vm__statement { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.5; font-weight: 400; color: var(--ink); margin: 0; padding-left: 1.25rem; border-left: 6px solid var(--sun); }
.vm__list { margin: 0; padding: 0; list-style: none; counter-reset: misi; }
.vm__list li { counter-increment: misi; position: relative; padding: .85rem 0 .85rem 3rem; border-bottom: 1px solid var(--line); }
.vm__list li::before { content: counter(misi); position: absolute; left: 0; top: .8rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sky); color: var(--white); font-weight: 600; font-size: .95rem; }

/* Kepala sekolah */
.leader { display: flex; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center; }
.leader > div { max-width: 640px; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.people .leader { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--white); border-radius: var(--radius-lg); align-items: flex-start; }
.leader__avatar.leader__avatar--sky { background: var(--sky); color: var(--white); }
.leader__avatar { flex: none; display: grid; place-items: center; width: clamp(84px, 10vw, 112px); aspect-ratio: 1; border-radius: 50%; background: var(--sun); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--ink); }
.leader__role { margin: 0 0 .2rem; color: var(--ink-2); }
.leader__name { margin-bottom: .6rem; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.leader p:last-child { margin: 0; color: var(--ink-2); }

/* Putrakami & sekolah afiliasi */
.putrakami { display: grid; grid-template-columns: 260px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.putrakami__logo img { width: 100%; max-width: 260px; margin-inline: auto; }
.putrakami__text > p { color: var(--ink-2); max-width: 62ch; }
.putrakami__text h3 { margin-top: 1.75rem; }
.putrakami--compact { grid-template-columns: 160px 1fr; }
.affiliates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.affiliates li { display: flex; gap: .7rem; align-items: flex-start; padding: 1.1rem 1.2rem; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); }
.affiliates .icon { color: var(--berry); margin-top: .15rem; }
.affiliates strong { display: block; line-height: 1.3; }
.affiliates span { font-size: 1rem; color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   Formulir pendaftaran
   --------------------------------------------------------------------------- */
.register { display: grid; grid-template-columns: .85fr 1.4fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.register__side h2 { font-size: 1.6rem; margin-bottom: 1.5rem; }
.register__form:focus { outline: none; }
.docs { padding: 1.5rem; margin-bottom: 1.5rem; background: var(--sun-soft); border-radius: var(--radius); }
.docs h3 { display: flex; gap: .6rem; align-items: center; font-size: 1.1rem; }
.docs ul { margin: 0 0 .75rem; padding-left: 1.2rem; }
.docs li { margin-bottom: .3rem; font-size: 1rem; }
.docs .muted { margin: 0; }

.form fieldset { margin: 0 0 2rem; padding: 0; border: 0; }
.form legend { font-size: 1.35rem; font-weight: 600; margin-bottom: 1rem; padding: 0; }
.field { margin-bottom: 1.2rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label, .field .label { display: block; font-weight: 500; margin-bottom: .4rem; }
.req { display: inline-block; margin-left: .35rem; padding: 0 .5rem; border-radius: 999px; background: var(--sky-soft); color: var(--sky-deep); font-size: .8rem; font-weight: 500; vertical-align: middle; }
.hint { margin: -.15rem 0 .5rem; font-size: .95rem; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="search"], select, textarea {
	width: 100%; min-height: 52px; padding: .75rem 1rem;
	font: inherit; font-size: 1.05rem; color: var(--ink);
	background: var(--white); border: 2px solid var(--line); border-radius: var(--radius-sm);
}
textarea { min-height: 120px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #a9c3d6; }
input:focus, select:focus, textarea:focus { border-color: var(--sky); outline: 3px solid var(--sun); outline-offset: 1px; box-shadow: none; }
.field--error input, .field--error textarea, .field--error .choices { border-color: var(--berry); }
.field--error > label::after, .field--error > .label::after { content: " Mohon diisi"; color: var(--berry); font-weight: 500; font-size: .9rem; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; border: 2px solid transparent; border-radius: var(--radius-sm); }
.choice { position: relative; display: block; margin: 0 !important; font-weight: 400 !important; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: flex; align-items: center; min-height: 52px; padding: .6rem 1rem; border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.choice input:checked + span { border-color: var(--ink); background: var(--sun-soft); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.check { display: flex !important; gap: .75rem; align-items: flex-start; font-weight: 400 !important; }
.check input { width: 24px; height: 24px; margin-top: .2rem; flex: none; accent-color: var(--sky); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { display: flex; gap: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 2rem; border-radius: var(--radius); }
.alert:focus { outline: 3px solid var(--sun); }
.alert p { margin: 0; }
.alert h2 { font-size: 1.4rem; margin-bottom: .4rem; }
.alert--ok { background: #e3f4e9; border-left: 6px solid #2e8b57; }
.alert--ok .icon { color: #2e8b57; }
.alert--warn { background: var(--berry-soft); border-left: 6px solid var(--berry); }

/* ---------------------------------------------------------------------------
   Kontak
   --------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.contact-list li:first-child { padding-top: 0; }
.contact-list__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--sky-soft); color: var(--sky-deep); }
.contact-list h2 { font-size: 1.05rem; margin: 0 0 .15rem; }
.contact-list p { margin: 0; }
.contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.contact__map { position: sticky; top: 100px; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); min-height: 460px; }
.contact__map iframe { display: block; width: 100%; height: 520px; border: 0; }

/* ---------------------------------------------------------------------------
   404
   --------------------------------------------------------------------------- */
.notfound__art { margin: 0 auto 1.5rem; }
.notfound .btn { margin: .3rem; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer { background: #10263b; color: #cfdbe6; padding-top: clamp(3rem, 6vw, 4.5rem); font-size: 1rem; }
.site-footer a { color: var(--white); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr .8fr 1.1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.site-footer__title { color: var(--white); font-size: 1.05rem; margin-bottom: 1rem; }
.brand--light { color: var(--white); margin-bottom: 1.25rem; }
.brand--light .brand__place { color: #b7c8d8; }
.brand__badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--white); }
.brand__badge .brand__logo { width: 46px; }
.parent-org { display: flex; gap: .8rem; align-items: center; margin-top: 1.25rem; line-height: 1.4; }
.parent-org strong { color: var(--white); }
.parent-org__badge { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--white); flex: none; }
.parent-org__badge img { width: 52px; height: 52px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links--plain li { color: var(--white); }
.footer-links--plain span { display: block; color: #a9bccd; font-size: .92rem; }
.contact-line { display: flex; gap: .65rem; align-items: flex-start; }
.contact-line .icon { margin-top: .25rem; color: var(--sun); }
.social { display: flex; gap: .5rem; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .92rem; }
.site-footer__bottom p { margin: 0; }

.wa-float {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40;
	display: inline-flex; align-items: center; gap: .55rem;
	min-height: 56px; padding: .6rem 1.25rem .6rem 1rem;
	background: var(--wa); color: var(--white); border-radius: 999px;
	font-weight: 600; text-decoration: none;
	box-shadow: 0 10px 30px rgba(18, 132, 63, .35);
}
.wa-float:hover { color: var(--white); background: #0d6b32; }

/* ---------------------------------------------------------------------------
   Layar kecil
   --------------------------------------------------------------------------- */
@media (max-width: 1060px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.affiliates { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
	.vm, .hero__grid, .split, .split--tight, .services, .needs, .register, .contact, .cta__inner, .activity-row, .putrakami, .putrakami--compact { grid-template-columns: 1fr; }
	.hero__visual { order: -1; width: min(82%, 340px); margin: 0 auto; }
	.hero__title { max-width: none; }
	.facts { grid-template-columns: 1fr 1fr; gap: 1.5rem 0; }
	.facts li:nth-child(3) { padding-left: 0; border-left: 0; }
	.steps, .path, .values { grid-template-columns: 1fr 1fr; }
	.steps li::after { display: none; }
	.activity-row--flip .activity-row__art { order: 0; }
	.cta__actions { justify-content: flex-start; }
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 200px; }
	.mosaic figure:first-child { grid-row: auto; grid-column: span 2; }
	.mosaic figure:last-child { grid-column: auto; }
	.mosaic--three { grid-template-columns: 1fr; grid-auto-rows: 240px; }
	.mosaic--three figure:first-child { grid-column: auto; }
	.putrakami__logo img { max-width: 180px; margin: 0; }
	.contact__map { position: static; min-height: 0; }
	.contact__map iframe { height: 360px; }
	.subnav { top: 80px; }
	.admin-bar .subnav { top: 80px; }
}
@media (max-width: 600px) {
	body { font-size: 1.0625rem; }
	.site-header__inner { min-height: 68px; }
	.subnav { top: 68px; }
	.admin-bar .subnav { top: 68px; }
	.brand__logo { width: 44px; }
	.hero__actions .btn { width: 100%; }
	.needs__list, .steps, .path, .values, .field-row, .choices, .activities { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr; }
	.leader { flex-direction: column; align-items: flex-start; }
	.people { grid-template-columns: 1fr; }
	.wa-float__text { display: none; }
	.wa-float { padding: .6rem; width: 56px; justify-content: center; }
	.page-head__puzzle { width: 150px; bottom: -20%; right: -40px; opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Gaya bawaan editor WordPress */
.alignwide { max-width: 1100px; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption-text, figcaption { font-size: .95rem; color: var(--ink-2); }

.people--single { grid-template-columns: minmax(0, 640px); }