*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",Arial,sans-serif;color:#14233b;background:#fff;line-height:1.6;overflow-x:hidden}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 48px));margin:auto}.announcement{background:#061c3b;color:#b9c8da;font-size:10px;letter-spacing:.3px}.announcement-in{height:34px;display:flex;align-items:center;justify-content:space-between}.announcement a{color:#d7b05d}.header{height:84px;position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid #e8edf2;transition:.25s}.header.scrolled{box-shadow:0 10px 30px #071d3d12}.nav{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-logos{display:flex;align-items:center;gap:6px;height:52px}.brand-logos img{width:43px;height:52px;object-fit:contain}.brand-logos img[src="assets/logo/logo-yayasan.png"]{width:42px}.brand-name{display:flex;flex-direction:column}.brand-name b{font-size:7px;letter-spacing:2.5px;color:#8290a2}.brand-name strong{font:800 14px Manrope;color:#0a2a5c}.nav-links{display:flex;align-items:center;gap:24px;font-size:12px;font-weight:700;color:#536176}.nav-links a{height:84px;display:flex;align-items:center;position:relative}.nav-links a:hover,.nav-links .active{color:#0a2a5c}.nav-links .active:after{content:"";position:absolute;bottom:24px;left:0;width:18px;height:2px;background:#c9a34e}.nav-links .pmb-link{height:auto;background:#0a2a5c;color:#fff;padding:11px 18px;border-radius:4px}.hamburger,.mobile-menu{display:none}.hero{height:min(760px,calc(100vh - 118px));min-height:610px;position:relative;overflow:hidden;background:#092958;color:#fff}.hero-video,.hero-fallback,.hero-overlay{position:absolute;inset:0;width:100%;height:100%}.hero-video{object-fit:cover;z-index:0}.hero-fallback{background:#173e6b url("../images/hero/hero.jpg") center/cover no-repeat;z-index:-1}.hero-overlay{background:linear-gradient(90deg,rgba(4,18,43,.86),rgba(7,30,66,.53),rgba(7,25,55,.25));z-index:1}.hero-inner{height:100%;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}.hero-copy{max-width:820px}.label{font-size:10px;letter-spacing:3px;font-weight:800;color:#d5b05e}.label.dark{color:#ba913e}.hero h1{font:800 clamp(46px,6.4vw,82px)/1.02 Manrope;letter-spacing:-3.5px;margin:18px 0}.hero h1 em{font-style:normal;color:#d9b45f}.hero p{font-size:17px;color:#d7e1ec}.hero p b{color:#d5b05e;padding:0 8px}.actions{display:flex;gap:12px;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 21px;border-radius:4px;font-size:12px;font-weight:800;transition:.25s}.btn:hover{transform:translateY(-3px)}.btn.gold{background:#d5b05e;color:#12233d}.btn.glass{border:1px solid #ffffff55;color:#fff;background:#ffffff08}.btn.navy{background:#0a2a5c;color:#fff}.hero-side{width:245px}.hero-side>div{display:grid;grid-template-columns:35px 1fr;border-top:1px solid #ffffff35;padding:18px 0}.hero-side small{font-size:9px;color:#d5b05e}.hero-side b{font:700 13px Manrope}.hero-side span{grid-column:2;font-size:10px;color:#afc0d3}.hero-bottom{position:absolute;bottom:0;left:0;right:0;z-index:3}.hero-bottom .container{display:flex;gap:16px;align-items:center;padding-bottom:24px;color:#afc0d3;font-size:9px;letter-spacing:2px}.hero-bottom i{width:60px;height:1px;background:#d5b05e}.section{padding:110px 0}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.visual{position:relative}.visual>img{width:100%;height:500px;object-fit:cover;background:#b9c9da}.mini-stat{position:absolute;right:-25px;bottom:28px;background:#0a2a5c;color:#fff;padding:18px 24px;display:flex;gap:13px;align-items:center}.mini-stat strong{font:800 31px Manrope;color:#d5b05e}.mini-stat span{font-size:9px;line-height:1.3}.copy h2,.head h2{font:800 clamp(35px,4vw,53px)/1.08 Manrope;letter-spacing:-2.5px;margin:16px 0;color:#12243e}.copy h2 em,.head h2 em{font-style:normal;color:#c79e49}.copy>p{font-size:13px;color:#6d7c90;max-width:570px;margin:23px 0}.mission{display:grid;grid-template-columns:1fr 1fr;gap:25px;border-top:1px solid #e0e6ed;border-bottom:1px solid #e0e6ed;padding:18px 0;margin:28px 0}.mission small,.contact-items small{display:block;font-size:9px;letter-spacing:2px;color:#c79e49;font-weight:800}.mission b{font-size:12px;color:#526176}.arrow-link{font-size:12px;font-weight:800;color:#0a2a5c}.arrow-link span{color:#c79e49;padding-left:6px}.numbers{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e0e6ed;margin-top:90px;padding-top:28px}.numbers div{border-right:1px solid #e0e6ed;padding-left:25px}.numbers div:first-child{padding-left:0}.numbers div:last-child{border:0}.numbers b{font:800 32px Manrope;display:block;color:#0a2a5c}.numbers span{font-size:10px;color:#7b899b}.programs{background:#f4f6f8}.head{display:flex;align-items:end;justify-content:space-between;margin-bottom:42px}.programs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#dce3eb;border:1px solid #dce3eb}.programs-grid article{background:#fff;min-height:350px;padding:22px 26px;position:relative;overflow:hidden;transition:.25s}.programs-grid article:hover{transform:translateY(-4px);box-shadow:0 15px 35px #10243c12}.programs-grid article>span{font-size:9px;color:#bd9544;font-weight:800;position:relative;z-index:2}.programs-grid article img{width:100%;height:125px;object-fit:cover;margin:15px 0 0;background:#d9e2ec}.icon{font:700 22px Manrope;color:#0a2a5c;margin:13px 0 6px}.programs-grid h3{font:700 18px Manrope;margin:0 0 6px}.programs-grid p{font-size:11px;color:#718096;margin:0}.education{background:#0a2a5c;color:#fff}.head.light h2{color:#fff}.education-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.education-card{border:1px solid #ffffff22;background:#ffffff08;padding:35px;display:grid;grid-template-columns:120px 1fr;gap:25px;align-items:center;transition:.25s}.education-card:hover{background:#ffffff12;transform:translateY(-3px)}.education-card .big{font:800 75px/1 Manrope;color:#d5b05e}.education-card span{font-size:9px;letter-spacing:2px;color:#9fb1c7}.education-card h3{font:700 23px Manrope;margin:4px 0}.education-card p{font-size:11px;color:#b7c7d9}.education-card b{font-size:10px;color:#d5b05e}.cambridge{background:#eeeae1}.cam-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}.cam-logo{height:320px;border:1px solid #c7a354;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#15365e;text-align:center}.cam-logo>img{max-height:70px;max-width:190px;object-fit:contain;margin-bottom:10px}.crest{width:70px;height:70px;border:2px solid #c7a354;border-radius:50%;display:grid;place-items:center;font:800 35px Manrope;margin-bottom:18px}.cam-logo strong{font:800 25px Manrope;letter-spacing:2px}.cam-logo span{font-size:10px;letter-spacing:4px;color:#bd9547}.cam-logo small{font-size:8px;letter-spacing:3px;margin-top:28px}.facility-mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:230px 230px;gap:14px}.fac{position:relative;overflow:hidden;background:#a2b5c8}.fac img{width:100%;height:100%;object-fit:cover;transition:.4s}.fac:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#071d3db8)}.fac:hover img{transform:scale(1.04)}.fac b{position:absolute;left:18px;bottom:16px;color:#fff;z-index:2;font:700 15px Manrope}.f1{grid-row:span 2}.news{background:#f4f6f8}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.news-grid article{background:#fff}.news-grid article>img{width:100%;height:225px;object-fit:cover;background:#a9bbcd}.news-content{padding:23px}.news-content small{font-size:8px;color:#b08a41;letter-spacing:1.2px}.news-content h3{font:700 18px/1.25 Manrope;margin:10px 0}.news-content p{font-size:11px;color:#758398}.news-content a{display:block;margin-top:17px;font-size:10px;font-weight:800;color:#0a2a5c}.achievement-track{display:flex;gap:15px;overflow:hidden;scroll-behavior:smooth}.achievement-track article{min-width:calc((100% - 45px)/4);border:1px solid #dce3eb;background:#fff;overflow:hidden}.achievement-track article>img{width:100%;height:170px;object-fit:cover;background:#a9bbcd}.achievement-track article>div{padding:22px}.achievement-track small{font-size:8px;letter-spacing:2px;color:#8492a4}.achievement-track h3{font:700 19px Manrope;margin:6px 0}.achievement-track p{font-size:11px;color:#748398;margin:0}.controls{display:flex;gap:7px}.controls button{width:40px;height:40px;background:#fff;border:1px solid #dce3eb;cursor:pointer}.library{background:#eeeae1}.library-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.book-stage{display:grid;place-items:center}.book{height:350px;width:255px;background:#0a2a5c;color:#fff;padding:32px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:20px 20px 0 #c8a253;text-align:center}.book small{font-size:8px;letter-spacing:3px}.book b{font:800 31px/1.05 Manrope;letter-spacing:1px}.book span{font-size:9px;color:#d5b05e;letter-spacing:3px}.pmb{background:#102f5f;color:#fff}.pmb-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}.pmb h2{font:800 clamp(50px,6vw,75px)/.95 Manrope;letter-spacing:-3px;margin:18px 0}.pmb h2 em{font-style:normal;color:#d5b05e}.pmb-copy p{color:#bdcbdc;font-size:13px;margin-bottom:25px}.waves{display:grid;grid-template-columns:1fr 1fr;gap:12px}.waves>div:not(.pmb-note){border:1px solid #ffffff22;background:#ffffff08;padding:24px}.waves small{display:block;color:#d5b05e;font-size:8px;letter-spacing:2px}.waves b{display:block;font:700 16px Manrope;margin:7px 0}.waves span{font-size:10px;color:#b8c8da}.pmb-note{grid-column:span 2;color:#8fa5bf;font-size:10px;border-top:1px solid #ffffff18;padding-top:16px}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:stretch}.contact-items{margin-top:30px}.contact-items div{border-bottom:1px solid #e2e7ed;padding:13px 0}.contact-items p{margin:3px 0;font-size:12px;color:#69788d}.map-wrap{min-height:390px;position:relative;background:#e7ecf1;overflow:hidden}.map-wrap iframe{width:100%;height:100%;min-height:390px;border:0}.map-note{position:absolute;left:15px;right:15px;bottom:15px;background:#fff;padding:9px 12px;font-size:9px;color:#596c83;box-shadow:0 5px 20px #0001}.map-note b{color:#0a2a5c}footer{background:#061c3b;color:#dbe3ed;padding:65px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}.footer-logos{display:flex;gap:7px}.footer-logos img{height:48px;width:43px;object-fit:contain}.footer-main h3{font:700 19px Manrope;margin:15px 0}.footer-main p{font-size:10px;color:#8da0b8}.footer-grid>div:not(.footer-main) small{display:block;color:#d5b05e;font-size:8px;letter-spacing:2px;margin-bottom:18px}.footer-grid>div:not(.footer-main) a{display:block;color:#b2c1d2;font-size:11px;margin:9px 0}.foot-bottom{border-top:1px solid #ffffff18;margin-top:45px;padding-top:18px;display:flex;justify-content:space-between;color:#7389a3;font-size:9px}.wa{position:fixed;right:20px;bottom:20px;width:52px;height:52px;border-radius:50%;background:#1da86a;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;box-shadow:0 12px 30px #0003;z-index:80}.reveal{opacity:0;transform:translateY(20px);transition:.7s}.reveal.visible{opacity:1;transform:none}
/* V4.1 visual polish */
html{scroll-padding-top:92px}.header{will-change:box-shadow}.hero-copy .label{display:inline-flex;align-items:center;gap:10px}.hero-copy .label:before{content:"";width:28px;height:1px;background:#d5b05e}.btn{box-shadow:0 8px 24px rgba(4,18,43,.08)}.btn.gold{box-shadow:0 10px 25px rgba(213,176,94,.18)}.programs-grid,.news-grid,.achievement-track{border-radius:2px}.programs-grid article,.news-grid article,.achievement-track article,.education-card,.fac{will-change:transform}.news-content{min-height:205px;display:flex;flex-direction:column}.news-content a{margin-top:auto}.fac img,.news-grid article>img,.achievement-track article>img{background:linear-gradient(135deg,#dce4ec,#b8c8d8)}.missing-media{display:grid!important;place-items:center;position:relative;background:linear-gradient(135deg,#dfe7ef,#b7c8d8)!important}.missing-media:after{content:"FOTO SEGERA DITAMBAHKAN";font:700 9px Manrope;letter-spacing:1.5px;color:#53667c}.programs-grid article>img{border-radius:1px}.numbers b{min-height:39px}.copy p,.news-content p,.achievement-track p{line-height:1.7}.mobile-menu a:focus-visible,.nav-links a:focus-visible,.btn:focus-visible,.arrow-link:focus-visible,.hamburger:focus-visible{outline:2px solid #c79e49;outline-offset:3px}
/* V4.1 visual polish */
html{scroll-padding-top:92px}.hero-copy .label{display:inline-flex;align-items:center;gap:10px}.hero-copy .label:before{content:"";width:28px;height:1px;background:#d5b05e}.btn{box-shadow:0 8px 24px rgba(4,18,43,.08)}.btn.gold{box-shadow:0 10px 25px rgba(213,176,94,.18)}.programs-grid,.news-grid,.achievement-track{border-radius:2px}.programs-grid article,.news-grid article,.achievement-track article,.education-card,.fac{will-change:transform}.news-content{min-height:205px;display:flex;flex-direction:column}.news-content a{margin-top:auto}.fac img,.news-grid article>img,.achievement-track article>img{background:linear-gradient(135deg,#dce4ec,#b8c8d8)}.missing-media{display:grid!important;place-items:center;position:relative;background:linear-gradient(135deg,#dfe7ef,#b7c8d8)!important}.missing-media:after{content:"FOTO SEGERA DITAMBAHKAN";font:700 9px Manrope;letter-spacing:1.5px;color:#53667c}.programs-grid article>img{border-radius:1px}.numbers b{min-height:39px}.copy p,.news-content p,.achievement-track p{line-height:1.7}.mobile-menu a:focus-visible,.nav-links a:focus-visible,.btn:focus-visible,.arrow-link:focus-visible,.hamburger:focus-visible{outline:2px solid #c79e49;outline-offset:3px}
/* V4.2 social CTA */
.social-icons{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.social-icons a{width:38px!important;height:38px;display:grid!important;place-items:center;border:1px solid #ffffff22;border-radius:50%;color:#cbd7e5!important;margin:0!important;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}.social-icons a:hover{transform:translateY(-3px);background:#ffffff12;color:#d5b05e!important;border-color:#d5b05e55}.social-icons svg{width:17px;height:17px}.social-hint{font-size:9px!important;color:#8195ad!important;margin:13px 0 0!important;line-height:1.6}.contact-link{color:#69788d;transition:color .2s ease}.contact-link:hover{color:#0a2a5c}.wa span{font-size:10px}.wa:hover{transform:translateY(-3px);background:#168d59}.wa{transition:transform .2s ease,background .2s ease}
/* V4.3 Google Maps */
.map-wrap{position:relative}.map-open{position:absolute;right:16px;bottom:16px;background:#fff;color:#0a2a5c;padding:11px 15px;border-radius:4px;font-size:10px;font-weight:800;box-shadow:0 8px 24px rgba(7,29,61,.18);z-index:3;transition:.2s}.map-open:hover{transform:translateY(-2px);background:#0a2a5c;color:#fff}.map-open span{color:#c79e49;padding-left:6px}
/* V4.4 — Berita & Artikel */
.news-page .copy{max-width:760px;margin:18px 0 44px}.news-page .copy h1{font-size:clamp(38px,5vw,68px);margin:0 0 12px}.news-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.news-list article{overflow:hidden;border:1px solid rgba(6,28,59,.10);background:#fff;border-radius:18px;box-shadow:0 12px 35px rgba(6,28,59,.06)}.news-list article>img{width:100%;height:240px;object-fit:cover;display:block}.news-list .news-content{padding:25px}.news-list h2{font-size:25px;line-height:1.15;margin:10px 0}.news-list p{color:#5e6b7d;line-height:1.7}.news-list .arrow-link{display:inline-flex;margin-top:12px}.article-wrap{max-width:920px}.article-wrap>h1{font-size:clamp(40px,6vw,74px);line-height:1.02;max-width:850px;margin:18px 0}.article-lead{font-size:20px;line-height:1.65;color:#566477;max-width:780px;margin-bottom:34px}.article-hero{width:100%;max-height:560px;object-fit:cover;border-radius:22px;display:block;margin-bottom:38px}.article-body{max-width:760px;font-size:18px;line-height:1.9;color:#27364a}.article-body p{margin:0 0 22px}.article-wrap>.arrow-link{margin-top:22px}
@media(max-width:820px){.news-list{grid-template-columns:1fr}.news-list article>img{height:220px}.news-list .news-content{padding:20px}.article-wrap>h1{font-size:42px}.article-lead{font-size:18px}.article-hero{border-radius:15px}.article-body{font-size:17px}}
/* V4.6 — Digital Library */
.library-page{background:#fff}.library-hero{background:#eeeae1;padding:92px 0 88px;overflow:hidden}.library-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}.library-hero h1{font:800 clamp(52px,6.5vw,82px)/.98 Manrope;letter-spacing:-4px;color:#12243e;margin:18px 0}.library-hero h1 em,.library-info h2 em{font-style:normal;color:#c79e49}.library-hero p{max-width:620px;color:#637287;font-size:15px}.outline-navy{border:1px solid #0a2a5c;color:#0a2a5c;background:transparent}.library-visual{display:grid;place-items:center}.book-cover{width:min(300px,80%);height:380px;background:#0a2a5c;color:#fff;padding:34px;display:flex;flex-direction:column;justify-content:space-between;text-align:center;box-shadow:24px 24px 0 #c8a253;transform:rotate(2deg)}.book-cover small{font-size:8px;letter-spacing:3px;color:#d5b05e}.book-cover strong{font:800 34px/1.05 Manrope;letter-spacing:2px}.book-cover span{font-size:8px;letter-spacing:3px;color:#b8c8d9}.library-collections{background:#fff}.library-source-note{font-size:11px;color:#77869a;max-width:300px;text-align:right}.library-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.library-card{border:1px solid #dce3eb;padding:30px;min-height:310px;background:#fff;transition:.25s;display:flex;flex-direction:column}.library-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px #10243c12}.library-card-icon{font-size:31px;margin-bottom:20px}.library-card small{font-size:8px;letter-spacing:2px;color:#c79e49;font-weight:800}.library-card h3{font:700 23px/1.2 Manrope;margin:10px 0}.library-card p{font-size:11px;color:#6d7c90;line-height:1.75}.library-card .arrow-link{margin-top:auto;padding-top:18px}.library-info{background:#0a2a5c;color:#fff;padding:70px 0}.library-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.library-info h2{font:800 clamp(35px,4vw,54px)/1.05 Manrope;margin:16px 0}.library-info p{color:#bdcbdc;font-size:13px;line-height:1.8}.library-page + footer{padding-top:25px}.library-page + footer .foot-bottom{border-top:0;margin-top:0}.library-page + footer a{color:#d5b05e}
@media(max-width:820px){.library-hero{padding:65px 0}.library-hero-grid,.library-info-grid{grid-template-columns:1fr;gap:45px}.library-hero h1{font-size:52px}.library-hero p{font-size:14px}.library-visual{margin-top:10px}.book-cover{height:340px;width:240px}.library-cards{grid-template-columns:1fr}.library-source-note{text-align:left;margin-top:10px}.library-info{padding:60px 0}.library-info-grid{gap:10px}.library-page + footer .foot-bottom{flex-direction:column;gap:10px}}
/* ==========================================================
GURU & STAFF
Edit data guru/staff langsung di index.html.
Foto: assets/images/guru-staff/
========================================================== */
.staff-section {
background: #f7f8fa;
}
.staff-intro {
max-width: 360px;
margin: 0 0 5px;
color: #6d7c90;
font-size: 12px;
line-height: 1.8;
}
.staff-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.staff-card {
background: #ffffff;
border: 1px solid #e0e6ed;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.staff-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 38px rgba(16, 36, 60, 0.10);
}
.staff-photo {
aspect-ratio: 4 / 5;
overflow: hidden;
background: linear-gradient(135deg, #e2e8ef, #bcc9d8);
}
.staff-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
}
.staff-card:hover .staff-photo img {
transform: scale(1.04);
}
.staff-info {
padding: 18px 19px 20px;
}
.staff-info > span {
display: block;
margin-bottom: 7px;
color: #bd9545;
font-size: 8px;
font-weight: 800;
letter-spacing: 2px;
}
.staff-info h3 {
margin: 0 0 4px;
color: #12243e;
font: 700 18px/1.25 Manrope, sans-serif;
}
.staff-info p {
margin: 0;
color: #728096;
font-size: 10px;
line-height: 1.6;
}