@media(max-width:1050px){.container{width:min(920px,calc(100% - 40px))}.nav-links{gap:14px}.nav-links a{font-size:11px}.about-grid,.cam-grid,.library-grid,.pmb-grid{gap:55px}}
@media(max-width:820px){.announcement{display:none}.header{height:70px}.nav{height:70px}.nav-links{display:none}.hamburger{display:flex;width:42px;height:42px;background:none;border:0;flex-direction:column;justify-content:center;gap:5px;padding:8px}.hamburger i{display:block;width:25px;height:2px;background:#0a2a5c}.mobile-menu{display:none;position:absolute;left:0;right:0;top:70px;background:#fff;border-top:1px solid #e7ebf0;box-shadow:0 20px 35px #071d3d12;padding:8px 20px 18px}.mobile-menu.open{display:block}.mobile-menu a{display:block;padding:13px 3px;border-bottom:1px solid #edf0f4;font-size:13px;font-weight:700;color:#263851}.hero{height:calc(100svh - 70px);min-height:570px}.hero-inner{align-items:flex-end;padding-bottom:90px}.hero h1{font-size:clamp(42px,11vw,62px);letter-spacing:-2.5px}.hero p{font-size:13px}.hero-side{display:none}.actions{flex-direction:column;align-items:flex-start}.section{padding:78px 0}.about-grid,.cam-grid,.library-grid,.pmb-grid,.contact-grid{grid-template-columns:1fr}.about-grid{gap:50px}.visual>img{height:350px}.mini-stat{right:15px}.numbers{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:60px}.numbers div{padding-left:15px}.programs-grid{grid-template-columns:1fr 1fr}.education-grid{grid-template-columns:1fr}.facility-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:210px 210px 210px}.f1{grid-row:auto;grid-column:span 2}.news-grid{grid-template-columns:1fr}.achievement-track{overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}.achievement-track article{min-width:80%;scroll-snap-align:start}.pmb-grid{gap:45px}.pmb-note{grid-column:span 1}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{display:none}}
@media(max-width:560px){.container{width:calc(100% - 32px)}.brand-name b{font-size:6px}.brand-name strong{font-size:10px}.brand-logos{height:44px}.brand-logos img{width:36px;height:44px}.brand-logos img[src="assets/logo/logo-yayasan.png"]{width:34px}.hero h1{font-size:42px}.hero p b{padding:0 3px}.head{align-items:flex-start}.head .arrow-link{display:none}.copy h2,.head h2{font-size:35px}.programs-grid{grid-template-columns:1fr}.education-card{grid-template-columns:70px 1fr;padding:24px;gap:15px}.education-card .big{font-size:53px}.facility-mosaic{grid-template-columns:1fr;grid-template-rows:repeat(6,220px)}.f1{grid-column:auto}.book{width:220px;height:300px}.book b{font-size:28px}.waves{grid-template-columns:1fr}.pmb-note{grid-column:span 1}.contact-grid{gap:35px}.map-wrap,.map-wrap iframe{min-height:290px}.footer-grid{grid-template-columns:1fr 1fr}.footer-main{grid-column:span 2}.foot-bottom{flex-direction:column;gap:6px}.hero-bottom{display:none}}
/* =========================
   V4 RESPONSIVE POLISH
   ========================= */
@media (max-width: 820px){
  body{width:100%;overflow-x:hidden}
  .container{width:min(100% - 32px, 680px)}
  .header{height:68px}
  .nav{height:68px;position:relative;justify-content:center}
  .brand{position:absolute;left:50%;transform:translateX(-50%);gap:8px;white-space:nowrap;max-width:calc(100% - 100px)}
  .brand-logos{height:44px;gap:4px}
  .brand-logos img{width:34px;height:44px}
  .brand-logos img[src="assets/logo/logo-yayasan.png"]{width:32px}
  .brand-name{align-items:center}
  .brand-name b{font-size:5.5px;letter-spacing:2px}
  .brand-name strong{font-size:10px;letter-spacing:.15px}
  .hamburger{display:flex;position:absolute;left:0;top:13px;width:42px;height:42px;z-index:5}
  .mobile-menu{top:68px;padding:8px 16px 18px}
  .hero{height:calc(100svh - 68px);min-height:560px;max-height:900px}
  .hero-video,.hero-fallback{object-position:center center}
  .hero-overlay{background:linear-gradient(180deg,rgba(4,18,43,.35) 0%,rgba(4,18,43,.48) 40%,rgba(4,18,43,.91) 100%)}
  .hero-inner{height:100%;padding:0 0 74px;align-items:flex-end}
  .hero-copy{width:100%;max-width:none}
  .hero h1{font-size:clamp(39px,10.5vw,58px);line-height:1.03;letter-spacing:-2.4px;margin:14px 0}
  .hero p{font-size:12.5px;line-height:1.5;max-width:330px}
  .actions{flex-direction:row;flex-wrap:wrap;gap:9px;margin-top:24px}
  .btn{min-height:46px;padding:12px 16px;font-size:11px;gap:10px}
  .hero-bottom{display:none}
  .section{padding:70px 0}
  .about-grid,.cam-grid,.library-grid,.pmb-grid,.contact-grid{grid-template-columns:1fr;gap:42px}
  .visual>img{height:min(78vw,390px);min-height:290px}
  .mini-stat{right:12px;bottom:18px;padding:14px 17px}
  .mini-stat strong{font-size:27px}
  .mission{grid-template-columns:1fr;gap:20px;margin:24px 0;padding:20px 0}
  .mission b{display:block;font-size:11px;line-height:1.7;font-weight:600}
  .numbers{margin-top:50px;padding-top:22px;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .numbers div{padding-left:14px}
  .numbers b{font-size:28px}
  .programs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .programs-grid article{min-height:315px;padding:18px}
  .programs-grid article img{height:120px}
  .head{gap:20px;margin-bottom:30px}
  .head h2,.copy h2{font-size:clamp(32px,8.5vw,44px);letter-spacing:-1.8px}
  .education-grid{grid-template-columns:1fr}
  .education-card{grid-template-columns:76px 1fr;padding:24px;gap:14px}
  .facility-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,190px);gap:10px}
  .f1{grid-column:span 2;grid-row:auto}
  .fac b{font-size:13px;left:14px;bottom:13px}
  .news-grid{grid-template-columns:1fr}
  .news-grid article>img{height:210px}
  .achievement-track{overflow-x:auto}
  .achievement-track article{min-width:78%}
  .cam-logo{height:280px}
  .book{width:min(220px,70vw);height:300px}
  .pmb h2{font-size:clamp(48px,13vw,70px);letter-spacing:-2.5px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .wa{right:15px;bottom:15px;width:48px;height:48px}
}

@media (max-width: 560px){
  .container{width:calc(100% - 28px)}
  .brand{max-width:calc(100% - 88px)}
  .brand-name strong{font-size:9.5px}
  .hero{min-height:540px}
  .hero-inner{padding-bottom:62px}
  .hero h1{font-size:41px;letter-spacing:-2px}
  .hero p{font-size:12px}
  .actions .btn{flex:1 1 auto}
  .programs-grid{grid-template-columns:1fr}
  .programs-grid article{min-height:0;padding:18px 19px 22px}
  .programs-grid article img{height:145px}
  .facility-mosaic{grid-template-columns:1fr;grid-template-rows:repeat(6,210px)}
  .f1{grid-column:auto}
  .education-card{grid-template-columns:62px 1fr;padding:20px}
  .education-card .big{font-size:48px}
  .education-card h3{font-size:20px}
  .waves{grid-template-columns:1fr}
  .pmb-note{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}
  .footer-main{grid-column:auto}
  .foot-bottom{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:820px){
  body.menu-open{overflow:hidden}
  .hamburger.is-open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.is-open i:nth-child(2){opacity:0}
  .hamburger.is-open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hamburger i{transition:.2s}
}

@media(max-width:560px){.map-open{left:12px;right:12px;bottom:12px;text-align:center;padding:12px}.map-wrap,.map-wrap iframe{min-height:310px}}

/* ==========================================================
   GURU & STAFF - RESPONSIVE
   ========================================================== */

@media (max-width: 1000px) {
    .staff-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .staff-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .staff-intro {
        max-width: 300px;
    }
}

@media (max-width: 560px) {
    .staff-section {
        padding: 75px 0;
    }

    .staff-section .head {
        display: block;
        margin-bottom: 30px;
    }

    .staff-intro {
        max-width: 100%;
        margin-top: 18px;
    }

    .staff-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .staff-photo {
        aspect-ratio: 4 / 4.7;
    }

    .staff-info {
        padding: 16px 17px 18px;
    }
}


/* ==========================================================
   PROFIL DROPDOWN
   ========================================================== */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{border:0;background:none;color:#263851;font:700 12px/1 DM Sans,sans-serif;padding:12px 0;cursor:pointer}
.nav-dropdown-toggle span{font-size:12px;margin-left:4px}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:-14px;min-width:190px;background:#fff;border:1px solid #e4e9ef;box-shadow:0 18px 38px rgba(7,29,61,.12);padding:7px;opacity:0;visibility:hidden;transform:translateY(5px);transition:.2s;z-index:20}
.nav-dropdown-menu a{display:block!important;padding:11px 12px!important;border-radius:6px;color:#263851!important;font-size:11px!important}
.nav-dropdown-menu a:hover{background:#f3f6f9;color:#0a2a5c!important}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:none}
.mobile-profile{border-bottom:1px solid #edf0f4}
.mobile-profile-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;padding:13px 3px;border:0;background:none;color:#263851;font:700 13px DM Sans,sans-serif;cursor:pointer}
.mobile-profile-menu{display:none;padding:0 0 6px 14px}
.mobile-profile.open .mobile-profile-menu{display:block}
.mobile-profile-menu a{border-bottom:0!important;padding:10px 3px!important;font-size:12px!important}
@media(max-width:820px){.nav-dropdown{display:none}}
@media(min-width:821px){.mobile-profile{display:none}}