:root{--green:#08623a;--green2:#0b7a49;--deep:#063a24;--mint:#eaf6ef;--pale:#f6faf7;--ink:#12241a;--muted:#697a70;--line:#dce8e0;--white:#fff;--shadow:0 22px 60px rgba(5,53,31,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif;background:#fff;line-height:1.6}a{text-decoration:none;color:inherit}.container{width:min(1200px,calc(100% - 44px));margin:auto}h1,h2,h3,strong,.brand{font-family:"Plus Jakarta Sans",sans-serif}
.announcement{height:34px;background:var(--deep);color:#d7e8de;font-size:10px}.announcement-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.announcement b{color:#fff;margin-right:7px}.announcement-right{opacity:.75}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(220,232,224,.8)}.nav-wrap{height:76px;display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:10px;min-width:230px}.brand-mark{width:50px;height:50px;display:grid;place-items:center}.brand-mark img{width:48px;height:48px;object-fit:contain}.brand-text strong{display:block;font-size:14px;letter-spacing:.025em}.brand-text small{display:block;font-size:8px;color:#6d8175;letter-spacing:.12em;margin-top:1px}.main-nav{display:flex;align-items:center;justify-content:center;gap:20px;flex:1}.main-nav>a,.nav-drop>a{font-size:11px;font-weight:700;color:#405248;white-space:nowrap}.main-nav a:hover,.main-nav a.active{color:var(--green)}.main-nav a.active{position:relative}.main-nav a.active:after{content:"";position:absolute;left:0;right:0;height:2px;bottom:-12px;background:var(--green)}.nav-drop i{font-style:normal;color:#8da097;font-size:10px}.sia-btn{background:var(--green);color:#fff;border-radius:9px;padding:12px 15px;font-size:10px;font-weight:800;white-space:nowrap;box-shadow:0 10px 24px rgba(8,98,58,.18)}.sia-btn span{margin-right:6px}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:22px;height:2px;background:var(--green);margin:4px}
.hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#eef8f1 0%,#f8fcf9 55%,#e4f3e9 100%);min-height:600px}.hero-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 75% 15%,rgba(72,157,108,.14),transparent 35%),linear-gradient(90deg,rgba(255,255,255,.3),transparent)}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr .9fr;gap:50px;align-items:center;padding:72px 0 82px}.kicker{font-size:10px;letter-spacing:.2em;font-weight:800;color:var(--green);display:flex;align-items:center;gap:9px}.kicker span{height:2px;width:28px;background:var(--green)}.hero h1{font-size:clamp(43px,5.1vw,70px);line-height:1.04;letter-spacing:-.055em;margin:18px 0}.hero h1 em,.section h2 em,.ppdb-box h2 em{color:var(--green2);font-style:normal}.hero-copy>p{max-width:620px;color:var(--muted);font-size:16px}.hero-buttons{display:flex;gap:11px;flex-wrap:wrap;margin:28px 0}.btn{display:inline-flex;align-items:center;gap:16px;border-radius:9px;padding:13px 17px;font-size:11px;font-weight:800}.btn.primary{background:var(--green);color:#fff;box-shadow:0 12px 30px rgba(8,98,58,.22)}.btn.outline{border:1px solid var(--line);background:#fff}.btn.white{background:#fff;color:var(--green)}.hero-trust{display:flex;gap:25px;margin-top:34px}.hero-trust div{display:flex;flex-direction:column}.hero-trust b{font-size:17px;color:var(--green)}.hero-trust span{font-size:10px;color:var(--muted)}
.hero-visual{height:440px;position:relative;display:flex;align-items:center;justify-content:center}.hero-photo{width:min(490px,100%);height:405px;border-radius:28px;overflow:hidden;position:relative;background:linear-gradient(145deg,#0a5a35,#cce8d5);box-shadow:var(--shadow)}.photo-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:rgba(255,255,255,.95);background:linear-gradient(145deg,rgba(2,53,32,.92),rgba(24,117,70,.64))}.photo-placeholder img{width:130px;height:130px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}.photo-placeholder span{font-size:10px;letter-spacing:.18em;font-weight:800;margin-top:12px}.photo-placeholder small{font-size:9px;opacity:.7;margin-top:5px}.building-lines{position:absolute;width:370px;height:250px;border:1px solid rgba(255,255,255,.14);transform:skew(-12deg);bottom:-100px;left:40px;box-shadow:0 -30px 0 rgba(255,255,255,.025),0 -60px 0 rgba(255,255,255,.02)}.photo-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,26,16,.82),transparent 60%);z-index:1}.photo-caption{position:absolute;z-index:2;bottom:24px;left:25px;color:#fff}.photo-caption small{font-size:8px;letter-spacing:.18em;opacity:.7}.photo-caption strong{display:block;font-size:20px;margin-top:5px}.floating-card{position:absolute;z-index:5;background:#fff;box-shadow:0 18px 45px rgba(5,53,31,.16);border-radius:13px;padding:13px 16px;display:flex;align-items:center;gap:10px;font-size:10px;color:#6b7b72}.floating-card i{font-style:normal;width:32px;height:32px;border-radius:9px;background:var(--mint);display:grid;place-items:center;color:var(--green);font-size:16px}.floating-card b{display:block;color:var(--ink);font-size:11px}.card-a{left:-25px;top:70px}.card-b{right:-20px;bottom:65px}.hero-orb{position:absolute;border-radius:50%;border:1px solid rgba(8,98,58,.1)}.orb-a{width:420px;height:420px;right:-160px;top:-190px}.orb-b{width:260px;height:260px;left:-130px;bottom:-170px}.hero-bottom-line{position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green),#b8dcc6,var(--green))}
.service-strip{margin-top:-38px;position:relative;z-index:10}.service-grid{display:grid;grid-template-columns:repeat(5,1fr);background:rgba(6,58,36,.97);border-radius:15px;overflow:hidden;box-shadow:0 18px 45px rgba(4,53,31,.2)}.service-item{color:#fff;display:flex;align-items:center;gap:10px;padding:18px 15px;border-right:1px solid rgba(255,255,255,.08)}.service-item:last-child{border:0}.service-item.active{background:rgba(41,132,82,.34)}.service-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.09);display:grid;place-items:center;font-size:17px;color:#c7ead4}.service-item small{display:block;font-size:7px;letter-spacing:.12em;color:#9eb9aa}.service-item b{font-size:11px;display:block}.service-item i{margin-left:auto;color:#9dc6aa;font-style:normal}
.section{padding:100px 0}.profile-section{background:#fff}.profile-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.principal-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:.7fr 1.1fr;box-shadow:0 15px 40px rgba(5,53,31,.06)}.principal-photo{min-height:340px;background:linear-gradient(145deg,#d8ecdf,#75a988);display:grid;place-items:center}.portrait-placeholder{width:130px;height:180px;border:1px solid rgba(255,255,255,.5);border-radius:65px 65px 20px 20px;display:grid;place-items:center;text-align:center;color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;background:rgba(255,255,255,.12)}.principal-info{padding:30px}.principal-info small{font-size:8px;color:var(--green);letter-spacing:.15em;font-weight:800}.principal-info h3{font-size:21px;margin:10px 0}.principal-info p{font-size:13px;color:var(--muted)}.principal-info>strong{font-size:10px}.section-tag{font-size:9px;color:var(--green);letter-spacing:.17em;font-weight:800}.section-tag span{margin-left:8px}.profile-copy h2,.section h2{font-size:clamp(34px,4vw,53px);line-height:1.1;letter-spacing:-.05em;margin:15px 0}.profile-copy>p{color:var(--muted);font-size:15px}.mini-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:28px}.mini-links a{border:1px solid var(--line);border-radius:11px;padding:13px;display:flex;align-items:center;gap:10px;font-size:10px}.mini-links span{width:27px;height:27px;border-radius:8px;background:var(--mint);color:var(--green);display:grid;place-items:center}.mini-links i{margin-left:auto;color:#9aaa9f;font-style:normal}
.programs-section{background:var(--pale)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}.section-heading h2{margin-bottom:0}.section-link{color:var(--green);font-size:11px;font-weight:800;white-space:nowrap}.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.program-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s}.program-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.program-image{height:185px;display:flex;align-items:end;padding:16px;background:linear-gradient(135deg,#cfe6d7,#27734d);position:relative}.program-image:before{content:"";position:absolute;inset:25px;border:1px solid rgba(255,255,255,.25);transform:rotate(-4deg)}.image-two{background:linear-gradient(135deg,#e1eee5,#548a6a)}.image-three{background:linear-gradient(135deg,#b9d7c3,#194d35)}.program-image span{position:relative;z-index:2;background:rgba(255,255,255,.92);color:var(--green);padding:6px 8px;border-radius:7px;font-size:8px;font-weight:800}.program-body{padding:22px}.program-body small{font-size:8px;color:#91a198;letter-spacing:.13em}.program-body h3{font-size:19px;line-height:1.3;margin:8px 0}.program-body p{font-size:12px;color:var(--muted);min-height:58px}.program-body a{font-size:10px;color:var(--green);font-weight:800}
.numbers-section{background:var(--deep);color:#fff;padding:35px 0}.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.numbers-grid div{border-left:1px solid rgba(255,255,255,.13);padding-left:18px}.numbers-grid b{display:block;color:#b9e0c8;font-size:21px}.numbers-grid span{font-size:10px;color:#9db5a8}
.news-section{background:#fff}.content-columns{display:grid;grid-template-columns:1.25fr .75fr;gap:28px}.news-list{display:flex;flex-direction:column;gap:14px}.news-feature{display:grid;grid-template-columns:.9fr 1fr;gap:20px;border:1px solid var(--line);border-radius:18px;padding:12px}.news-thumb{height:230px;border-radius:12px;display:flex;align-items:end;padding:13px;background:linear-gradient(135deg,#cce6d5,#1e6845)}.news-thumb span{font-size:8px;background:#fff;padding:6px;border-radius:6px;color:var(--green);font-weight:800}.news-feature>div+div{padding:14px 10px}.news-feature small,.news-row small{font-size:8px;letter-spacing:.08em;color:#8b9a92}.news-feature h3{font-size:20px;line-height:1.35;margin:9px 0}.news-feature p{font-size:12px;color:var(--muted)}.news-feature a,.news-row a{font-size:10px;color:var(--green);font-weight:800}.news-row{display:grid;grid-template-columns:120px 1fr;gap:15px;align-items:center;border-top:1px solid var(--line);padding-top:14px}.small-thumb{height:80px;border-radius:10px;background:linear-gradient(135deg,#d7e9dc,#548a6a)}.news-row h3{font-size:14px;margin:5px 0}.announcement-card{border:1px solid var(--line);border-radius:18px;padding:22px;height:max-content}.ann-head{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:16px}.ann-head>span{width:38px;height:38px;border-radius:10px;background:var(--mint);display:grid;place-items:center;color:var(--green)}.ann-head small{font-size:8px;color:#91a198;letter-spacing:.12em}.ann-head h3{font-size:18px;margin:2px 0}.ann-head>a{margin-left:auto;color:var(--green);font-size:9px;font-weight:800}.ann-item{display:flex;gap:13px;padding:17px 0;border-bottom:1px solid #edf2ee}.ann-item:last-child{border:0}.ann-item>b{color:#aac2b4;font-size:12px}.ann-item strong{display:block;font-size:11px}.ann-item small{display:block;color:var(--muted);font-size:9px;margin-top:4px}
.feature-section{background:linear-gradient(135deg,#063a24,#0a6840);color:#fff;padding:90px 0;overflow:hidden}.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}.section-tag.light{color:#bfe1cb}.feature-copy h2{font-size:clamp(37px,4.4vw,56px);line-height:1.08;letter-spacing:-.05em;margin:15px 0}.feature-copy h2 em{color:#bde4ca;font-style:normal}.feature-copy p{color:#bad0c2;max-width:620px;font-size:14px;margin-bottom:26px}.dashboard-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:22px;backdrop-filter:blur(10px);box-shadow:0 25px 60px rgba(0,0,0,.16)}.dash-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.1em;color:#a7c8b4}.dash-top b{color:#cce8d6}.dash-title{font:700 22px "Plus Jakarta Sans";margin:30px 0 18px}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dash-grid span{background:rgba(255,255,255,.07);border-radius:11px;padding:14px}.dash-grid small{display:block;color:#a9c4b3;font-size:8px}.dash-grid b{font-size:14px;color:#fff;letter-spacing:4px}.dash-bar{height:7px;border-radius:10px;background:linear-gradient(90deg,#bde4ca 0 72%,rgba(255,255,255,.08) 72%);margin-top:16px}
.achievement-section{background:var(--pale)}.achievement-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}.achievement-copy p{color:var(--muted);font-size:14px}.achievement-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.achievement-tile{height:250px;border-radius:18px;background:#fff;border:1px solid var(--line);padding:20px;display:flex;flex-direction:column}.achievement-tile b{font-size:35px;color:var(--green)}.achievement-tile span{margin-top:auto;font-size:11px;color:var(--muted)}.achievement-tile strong{font-size:24px;color:#c3d5ca}.achievement-tile.dark{background:var(--green);color:#fff;border-color:var(--green)}.achievement-tile.dark b{color:#c5e6d0}.achievement-tile.dark span{color:#b7d0c1}
.gallery-grid{display:grid;grid-template-columns:1.1fr .8fr .8fr;grid-template-rows:190px 190px;gap:12px}.gallery-item{border-radius:16px;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;background:linear-gradient(145deg,#b8d7c2,#17633f)}.gallery-item:before{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.16);transform:rotate(-5deg)}.gallery-item span,.gallery-item b{position:relative;z-index:2}.gallery-item span{font-size:8px;opacity:.7}.gallery-item b{font-size:14px}.g1{grid-row:span 2;background:linear-gradient(145deg,#a6cfb5,#0c4a2d)}.g2{background:linear-gradient(145deg,#d4e7da,#4e8967)}.g3{background:linear-gradient(145deg,#c1dcca,#265d40)}.g4{background:linear-gradient(145deg,#dcece1,#68967a)}.g5{background:linear-gradient(145deg,#bdd9c5,#185437)}
.ppdb-section{background:#eef7f1;padding:75px 0}.ppdb-box{background:#fff;border:1px solid var(--line);border-radius:24px;padding:48px 52px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;box-shadow:0 18px 50px rgba(5,53,31,.05)}.ppdb-box h2{font-size:clamp(35px,4vw,53px);line-height:1.1;letter-spacing:-.05em;margin:15px 0}.ppdb-box p{color:var(--muted);font-size:13px}
.contact-section{padding-bottom:90px}.contact-grid{display:grid;grid-template-columns:1fr .7fr;gap:50px;align-items:center}.contact-grid h2{margin-bottom:8px}.contact-grid p{color:var(--muted);max-width:650px}.contact-card{border:1px solid var(--line);border-radius:18px;padding:25px;background:var(--pale)}.contact-card span{display:block;font-size:8px;color:var(--green);letter-spacing:.15em;font-weight:800}.contact-card strong{display:block;font-size:17px;margin:9px 0}.contact-card small{color:var(--muted);font-size:10px}
.footer{background:#052d1c;color:#d9e9df}.footer-top{padding:60px 0;display:grid;grid-template-columns:1.3fr .7fr .8fr 1fr;gap:50px}.footer-brand{display:flex;gap:10px;align-items:center}.footer-brand img{width:48px;height:48px;object-fit:contain}.footer-brand strong{display:block;font-size:12px}.footer-brand small{display:block;font-size:7px;color:#7fa391;letter-spacing:.12em}.footer p,.footer a{font-size:10px;color:#90aa9b}.footer a{display:block;margin:8px 0}.footer h4{font-size:10px;letter-spacing:.12em}.footer-muted{opacity:.7}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;display:flex;justify-content:space-between;font-size:9px;color:#6f8d7d}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1100px){.main-nav{gap:12px}.brand{min-width:205px}.main-nav>a,.nav-drop>a{font-size:10px}.sia-btn{font-size:9px;padding:11px}.service-item{padding:15px 10px}.service-item b{font-size:10px}}
@media(max-width:900px){.main-nav{display:none;position:absolute;left:14px;right:14px;top:72px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:10px}.main-nav a.active:after{display:none}.menu-toggle{display:block;margin-left:auto}.sia-btn{display:none}.hero-grid,.profile-grid,.feature-grid,.achievement-grid,.content-columns,.ppdb-box,.contact-grid{grid-template-columns:1fr}.hero-visual{display:none}.service-grid{grid-template-columns:repeat(2,1fr)}.service-item:nth-child(2n){border-right:0}.program-grid{grid-template-columns:1fr 1fr}.numbers-grid{grid-template-columns:1fr 1fr}.footer-top{grid-template-columns:1fr 1fr}.achievement-cards{margin-top:15px}}
@media(max-width:640px){.container{width:min(100% - 28px,1200px)}.announcement-right{display:none}.brand-text strong{font-size:12px}.brand-text small{font-size:7px}.hero-grid{padding:60px 0}.hero h1{font-size:43px}.hero-copy>p{font-size:14px}.hero-trust{gap:15px;flex-wrap:wrap}.service-grid{grid-template-columns:1fr}.service-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.section{padding:70px 0}.section-heading{display:block}.section-link{display:inline-block;margin-top:12px}.principal-card{grid-template-columns:1fr}.principal-photo{min-height:230px}.mini-links,.program-grid,.numbers-grid,.achievement-cards,.footer-top{grid-template-columns:1fr}.news-feature{grid-template-columns:1fr}.news-thumb{height:180px}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:160px 160px 160px}.g1{grid-row:auto}.g5{grid-column:1 / -1}.ppdb-box{padding:30px}.footer-bottom{display:block}.footer-bottom span{display:block;margin:4px 0}}

/* =========================================================
   PERBAIKAN FOTO KEPALA SEKOLAH
   ========================================================= */

/* =========================================================
   FINAL - CARD KEPALA SEKOLAH
   ========================================================= */

.principal-card {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    height: 430px !important;
    min-height: 430px !important;
    overflow: hidden !important;
    border: 1px solid #dce8e0 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(5,53,31,.08) !important;
}


/* PANEL FOTO */
.principal-photo {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 30px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            #dff2e6 0%,
            #b8ddc7 45%,
            #75ad8d 100%
        ) !important;

    border-radius: 24px 0 0 24px !important;
}


/* DEKORASI PANEL FOTO */
.principal-photo::before {
    content: "" !important;
    position: absolute !important;

    width: 330px !important;
    height: 330px !important;

    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 50% !important;

    left: -150px !important;
    bottom: -160px !important;
}

.principal-photo::after {
    content: "" !important;
    position: absolute !important;

    width: 300px !important;
    height: 300px !important;

    border: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 50% !important;

    right: -170px !important;
    top: -150px !important;
}


/* FOTO 3 x 4 */
.principal-photo .principal-portrait {
    position: relative !important;
    z-index: 5 !important;

    display: block !important;

    width: 150px !important;
    height: 200px !important;

    min-width: 150px !important;
    min-height: 200px !important;

    max-width: 150px !important;
    max-height: 200px !important;

    object-fit: cover !important;
    object-position: center top !important;

    border-radius: 18px !important;

    border: 5px solid rgba(255,255,255,.95) !important;

    box-shadow:
        0 15px 35px rgba(5,53,31,.18) !important;
}


/* INFO */
.principal-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    padding: 38px 42px !important;

    background: #fff !important;
}

.principal-info small {
    font-size: 9px !important;
    letter-spacing: .18em !important;
    color: var(--green) !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

.principal-info h3 {
    font-size: 28px !important;
    line-height: 1.1 !important;
    margin: 0 0 14px !important;
    color: #09291b !important;
}

.principal-info p {
    max-width: 500px !important;

    font-size: 14px !important;
    line-height: 1.65 !important;

    color: var(--muted) !important;

    margin: 0 0 18px !important;
}

.principal-info > strong {
    display: inline-flex !important;
    width: fit-content !important;

    padding: 8px 14px !important;

    border-radius: 999px !important;

    background: #edf8f1 !important;

    color: var(--green) !important;

    font-size: 11px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .principal-card {
        grid-template-columns: 40% 60% !important;
        height: 390px !important;
        min-height: 390px !important;
    }

    .principal-photo {
        padding: 24px !important;
    }

    .principal-photo .principal-portrait {
        width: 130px !important;
        height: 173px !important;

        min-width: 130px !important;
        min-height: 173px !important;
    }

    .principal-info {
        padding: 30px !important;
    }

    .principal-info h3 {
        font-size: 25px !important;
    }

    .principal-info p {
        font-size: 13px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .principal-card {
        grid-template-columns: 1fr !important;

        height: auto !important;
        min-height: 0 !important;
    }

    .principal-photo {
        height: 270px !important;
        min-height: 270px !important;

        border-radius: 24px 24px 0 0 !important;
    }

    .principal-photo .principal-portrait {
        width: 125px !important;
        height: 167px !important;

        min-width: 125px !important;
        min-height: 167px !important;
    }

    .principal-info {
        padding: 28px !important;
    }
}

.principal-photo .portrait-placeholder {
    width: 130px;
    height: 180px;
    display: grid;
    place-items: center;
    text-align: center;
}

/* Tablet */
@media (max-width: 900px) {
    .principal-photo {
        height: 380px;
        min-height: 380px;
    }
}

/* HP */
@media (max-width: 640px) {
    .principal-photo {
        height: 320px;
        min-height: 320px;
        border-radius: 20px 20px 0 0;
    }

    .principal-photo .principal-portrait {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

/* Guru tambahan disembunyikan sebelum tombol diklik */
.teacher-hidden {
    display: none !important;
}

/* Tombol tampilkan semua guru */
.teachers-view-all {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.btn-view-all-teachers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 25px;
    border: 1px solid #d7e7dd;
    border-radius: 14px;
    background: #fff;
    color: #08613c;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
}

.btn-view-all-teachers:hover {
    background: #08613c;
    border-color: #08613c;
    color: #fff;
    transform: translateY(-2px);
}