/* Website publik sekolah: tiga template (klasik, modern, elegan) */
* { box-sizing:border-box; margin:0; padding:0; }
:root { --p:#1d4ed8; --p2:#0ea5e9; --a:#f59e0b; --pg:#0b2a6b; --fh:'Segoe UI',Arial,sans-serif; --lat:#f4f7fb; }
body.tema-klasik { --p:#14532d; --p2:#1f7a45; --a:#d4a017; --pg:#0d3a20; --fh:Georgia,'Times New Roman',serif; --lat:#f5f7f3; }
body.tema-elegan { --p:#7f1d1d; --p2:#a3262a; --a:#c9a227; --pg:#4a0f10; --fh:Georgia,'Times New Roman',serif; --lat:#faf6f1; }
body.situs { font-family:'Segoe UI',Arial,sans-serif; color:#1f2937; background:#fff; font-size:15px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.st-wadah { width:min(1120px,100% - 32px); margin:0 auto; }
h1,h2,h3 { font-family:var(--fh); line-height:1.25; }

.st-demo { background:#111827; color:#e5e7eb; font-size:12.5px; padding:9px 16px; text-align:center; }
.st-demo a { color:#93c5fd; margin-left:10px; font-weight:600; } .st-demo .st-demo-btn { background:var(--a); color:#111; padding:4px 12px; border-radius:14px; }

.st-atas { background:var(--pg); color:#e5ecff; font-size:12.5px; } .st-atas .st-wadah { display:flex; gap:22px; padding:7px 0; flex-wrap:wrap; } .st-atas .st-kanan { margin-left:auto; opacity:.85; }
.st-brand { background:#fff; } .st-brand-isi { display:flex; align-items:center; gap:16px; padding:16px 0; }
.st-logo { width:62px; height:62px; border-radius:16px; background:linear-gradient(135deg,var(--p),var(--p2)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; letter-spacing:1px; overflow:hidden; flex:none; box-shadow:0 6px 16px rgba(0,0,0,.15); }
.st-logo img { width:100%; height:100%; object-fit:contain; background:#fff; }
.st-judul b { display:block; font-family:var(--fh); font-size:21px; color:var(--p); letter-spacing:.4px; } .st-judul small { color:#6b7280; font-size:13px; }
.st-nav { background:var(--p); position:sticky; top:0; z-index:20; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.st-nav-isi { display:flex; flex-wrap:wrap; }
.st-nav a { color:#fff; padding:13px 16px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px; border-bottom:3px solid transparent; transition:background .2s; }
.st-nav a:hover { background:rgba(255,255,255,.12); } .st-nav a.aktif { background:rgba(0,0,0,.18); border-bottom-color:var(--a); }
.st-nav a.st-ppdb { margin-left:auto; background:var(--a); color:#1f1300; border-radius:0; } .st-nav a.st-ppdb:hover { filter:brightness(1.07); }

.st-hero { background:linear-gradient(120deg,var(--pg),var(--p) 55%,var(--p2)); color:#fff; padding:64px 0 74px; position:relative; overflow:hidden; }
.st-hero::after { content:''; position:absolute; right:-80px; top:-80px; width:380px; height:380px; border-radius:50%; background:rgba(255,255,255,.08); }
.st-hero-isi { display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:center; position:relative; z-index:1; }
.st-lencana { display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); padding:4px 14px; border-radius:20px; font-size:12.5px; font-weight:700; margin-bottom:14px; }
.st-hero h1 { font-size:38px; margin-bottom:10px; } .st-hero p { font-size:17px; opacity:.95; max-width:560px; }
.st-aksi { margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }
.st-tombol { display:inline-block; background:var(--a); color:#1f1300; font-weight:800; padding:12px 26px; border-radius:10px; font-size:14.5px; transition:transform .15s, box-shadow .15s; box-shadow:0 6px 16px rgba(0,0,0,.2); }
.st-tombol:hover { transform:translateY(-2px); } .st-tombol.st-terang { background:#fff; color:var(--p); } .st-tombol.st-kecil { padding:7px 16px; font-size:13px; margin-left:auto; box-shadow:none; background:var(--p); color:#fff; }
.st-hero-kartu { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:22px; padding:34px 24px; text-align:center; backdrop-filter:blur(4px); }
.st-hero-kartu i { font-size:54px; color:var(--a); display:block; margin-bottom:10px; } .st-hero-kartu b { font-size:30px; font-family:var(--fh); display:block; } .st-hero-kartu span { font-size:14px; opacity:.9; }

.st-stat { display:flex; background:#fff; border-radius:16px; box-shadow:0 14px 34px rgba(15,23,42,.14); margin-top:-38px; position:relative; z-index:3; overflow:hidden; }
.st-stat div { flex:1; text-align:center; padding:20px 8px; border-right:1px solid #eef1f5; } .st-stat div:last-child { border-right:0; }
.st-stat b { display:block; font-size:28px; color:var(--p); font-family:var(--fh); } .st-stat span { font-size:13px; color:#6b7280; }

.st-bagian { padding:54px 0; } .st-abu { background:var(--lat); }
.st-h { font-size:25px; color:var(--p); margin-bottom:14px; position:relative; padding-bottom:10px; } .st-h::after { content:''; position:absolute; left:0; bottom:0; width:46px; height:4px; border-radius:3px; background:var(--a); }
.st-baris-judul { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; } .st-baris-judul a { color:var(--p2); font-weight:700; font-size:14px; }
.st-dua { display:grid; grid-template-columns:1fr 1.7fr; gap:40px; align-items:center; } .st-dua.st-atas-rata { grid-template-columns:1fr 1fr; align-items:start; }
.st-dua p { margin-bottom:12px; } .st-ttd { margin-top:16px; }
.st-foto { aspect-ratio:1/1.1; border-radius:20px; background:linear-gradient(160deg,var(--p),var(--p2)); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); font-size:110px; box-shadow:0 14px 34px rgba(0,0,0,.18); }
.st-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:18px; }
.st-kartu { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 18px rgba(15,23,42,.08); transition:transform .2s, box-shadow .2s; display:block; }
.st-kartu:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(15,23,42,.14); }
.st-thumb { height:150px; background:linear-gradient(135deg,var(--w),color-mix(in srgb,var(--w) 55%,#fff)); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.92); font-size:50px; }
.st-kartu-isi { padding:16px 18px 20px; } .st-kartu-isi small { color:#6b7280; font-size:12.5px; } .st-kartu-isi h3 { font-size:17px; margin:5px 0 8px; color:#111827; } .st-kartu-isi p { color:#4b5563; font-size:14px; }
.st-daftar { list-style:none; display:grid; gap:12px; margin-top:14px; } .st-daftar li { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e8ecf2; border-radius:14px; padding:14px 16px; }
.st-daftar li > i { width:42px; height:42px; border-radius:12px; background:var(--lat); color:var(--p); display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.st-daftar b { display:block; font-size:15px; } .st-daftar small { color:#6b7280; font-size:13px; }
.st-tgl { width:52px; height:56px; border-radius:12px; background:var(--p); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; font-size:11px; text-transform:uppercase; } .st-tgl b { font-size:21px; line-height:1; color:#fff; font-family:var(--fh); }
.st-besar li { padding:18px; }
.st-galeri { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; }
.st-foto-kotak { aspect-ratio:4/3; border-radius:14px; background:linear-gradient(135deg,var(--w),color-mix(in srgb,var(--w) 55%,#fff)); background-size:cover; background-position:center; position:relative; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); font-size:40px; overflow:hidden; }
.st-foto-kotak span { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent,rgba(0,0,0,.65)); color:#fff; font-size:13px; font-weight:600; padding:22px 12px 10px; font-family:'Segoe UI',Arial,sans-serif; }
.st-cta { background:linear-gradient(120deg,var(--pg),var(--p)); color:#fff; text-align:center; padding:50px 0; } .st-cta h2 { font-size:28px; margin-bottom:6px; } .st-cta p { opacity:.92; margin-bottom:18px; }
.st-judul-halaman { background:linear-gradient(120deg,var(--pg),var(--p)); color:#fff; padding:34px 0; } .st-judul-halaman h1 { font-size:30px; }
.st-sempit { max-width:820px; } .st-artikel h2 { font-size:28px; color:var(--p); margin:6px 0 16px; } .st-artikel p { margin-bottom:14px; line-height:1.8; } .st-artikel a { color:var(--p2); font-weight:700; }
.st-misi { padding-left:20px; margin-bottom:12px; } .st-misi li { margin-bottom:6px; }
.st-identitas { background:var(--lat); border-radius:16px; padding:22px; } .st-identitas h3 { color:var(--p); margin-bottom:10px; } .st-identitas td { padding:7px 6px; vertical-align:top; border-bottom:1px solid #e3e7ee; font-size:14px; } .st-identitas td:first-child { color:#6b7280; width:36%; } .st-identitas table { width:100%; border-collapse:collapse; }
.st-info { background:var(--lat); border-radius:16px; padding:24px; text-align:center; } .st-info i { font-size:28px; color:var(--p); margin-bottom:8px; display:block; } .st-info b { display:block; margin-bottom:4px; }
.st-kosong { color:#9ca3af; padding:14px 0; }
.st-kaki { background:var(--pg); color:#cbd5e1; padding:26px 0; font-size:14px; } .st-kaki .st-wadah { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; } .st-kaki b { color:#fff; } .st-kaki a { color:var(--a); font-weight:600; } .st-kaki .st-kanan { text-align:right; }

/* --- perbedaan antar template --- */
/* klasik: header terpusat, nav hijau rata tengah, hero bertepi tegas */
.tema-klasik .st-brand-isi { justify-content:center; text-align:left; } .tema-klasik .st-nav-isi { justify-content:center; } .tema-klasik .st-nav a.st-ppdb { margin-left:0; }
.tema-klasik .st-hero { background:linear-gradient(120deg,var(--pg),var(--p)); border-bottom:6px solid var(--a); } .tema-klasik .st-hero h1 { font-size:34px; }
.tema-klasik .st-stat { border-radius:6px; } .tema-klasik .st-kartu, .tema-klasik .st-daftar li { border-radius:8px; } .tema-klasik .st-thumb { height:130px; }
/* modern: nav putih melayang, hero besar membulat */
.tema-modern .st-atas { display:none; } .tema-modern .st-brand { border-bottom:1px solid #eef1f5; }
.tema-modern .st-nav { background:rgba(255,255,255,.92); backdrop-filter:blur(8px); box-shadow:0 2px 18px rgba(15,23,42,.1); }
.tema-modern .st-nav a { color:#1f2937; border-bottom:3px solid transparent; } .tema-modern .st-nav a:hover { background:var(--lat); } .tema-modern .st-nav a.aktif { background:var(--lat); color:var(--p); border-bottom-color:var(--p); }
.tema-modern .st-nav a.st-ppdb { color:#1f1300; margin:6px 0 6px auto; border-radius:20px; padding:7px 18px; border-bottom:0; }
.tema-modern .st-hero { border-radius:0 0 40px 40px; padding:78px 0 90px; } .tema-modern .st-hero h1 { font-size:42px; }
.tema-modern .st-kartu, .tema-modern .st-stat { border-radius:20px; }
/* elegan: kepala gelap, hero tengah, ornamen emas */
.tema-elegan .st-brand { background:var(--pg); } .tema-elegan .st-judul b { color:#fff; } .tema-elegan .st-judul small { color:#e8d9a6; } .tema-elegan .st-atas { background:#2b0809; }
.tema-elegan .st-logo { background:#fff; color:var(--p); border:3px solid var(--a); } .tema-elegan .st-nav { background:var(--p); border-top:2px solid var(--a); }
.tema-elegan .st-hero { background:radial-gradient(900px 400px at 80% -20%, rgba(201,162,39,.35), transparent 60%), linear-gradient(120deg,var(--pg),var(--p)); text-align:center; padding:70px 0; }
.tema-elegan .st-hero-isi { grid-template-columns:1fr; } .tema-elegan .st-hero p { margin:0 auto; } .tema-elegan .st-aksi { justify-content:center; } .tema-elegan .st-hero-kartu { display:none; }
.tema-elegan .st-h::after { width:70px; height:2px; } .tema-elegan .st-kartu { border:1px solid #eadfc8; box-shadow:none; border-radius:4px; } .tema-elegan .st-thumb { height:120px; }
.tema-elegan .st-stat { border-radius:4px; border-top:3px solid var(--a); } .tema-elegan .st-tgl { background:var(--pg); } .tema-elegan .st-daftar li { border-radius:4px; }

@media (max-width:860px) {
	.st-hero-isi, .st-dua, .st-dua.st-atas-rata { grid-template-columns:1fr; } .st-hero h1 { font-size:28px !important; } .st-grid3 { grid-template-columns:1fr; } .st-galeri { grid-template-columns:repeat(2,1fr); }
	.st-stat { flex-wrap:wrap; } .st-stat div { flex:1 1 45%; border-bottom:1px solid #eef1f5; } .st-kepsek { max-width:220px; }
	.st-nav-isi { overflow-x:auto; flex-wrap:nowrap; } .st-nav a { white-space:nowrap; padding:12px 12px; } .st-kaki .st-kanan { text-align:left; } .st-atas .st-kanan { display:none; }
	.tema-modern .st-nav { position:static; }
}